❤
npm
Sign UpSign In

scribe-plugin-link-tooltip

0.0.5 • Public • Published

scribe-plugin-link-tooltip

A Scribe plugin for doing a Medium/Google Docs style tooltip UI instead of a prompt for inserting links.

Example

var scribe = new Scribe(scribeElement);
scribe.use(scribePluginLinkTooltip());

Positioning

The tooltip will append itself to the body and use position: absolute, top, and left to position it close to the text you're highlighting. You can use CSS and target .scribe-plugin-link-tooltip to adjust styling of the tooltip.

e.g.

<body>
  <div id='scribe'>
    <div content-editable='true' >
    </div>
  </div>
  <form class="scribe-plugin-link-tooltip">
    <input placeholder="Paste or type a link">
    <button type="submit">Apply</button>
  </form>
</body>
.scribe-plugin-link-tooltip {
  padding: 10px;
  background: #eee;
  z-index: 2;
  /*
    Adds the following styles via JS
    position: absolute;
    top: xx;
    left: xx;
  */
}

TODO

  • Remove jQuery dependency
  • Tests

License

MIT

Readme

Keywords

Package Sidebar

Install

npm i scribe-plugin-link-tooltip

Repository

github.com/artsy/scribe-plugin-link-tooltip

Homepage

github.com/artsy/scribe-plugin-link-tooltip

Weekly Downloads

8

Version

0.0.5

License

none

Last publish

Collaborators

  • craigspaeth
Try on RunKit
Report malware