artsy/scribe-plugin-enhanced-link-tooltip

Name: scribe-plugin-enhanced-link-tooltip

Owner: Artsy

Description: A [Scribe](https://github.com/guardian/scribe) plugin for doing a Medium/Google Docs style tooltip UI instead of a prompt for inserting links.

Forked from: jorystiefel/scribe-plugin-enhanced-link-tooltip

Created: 2016-03-29 21:36:32.0

Updated: 2016-03-29 21:36:33.0

Pushed: 2016-04-28 20:01:54.0

Homepage: null

Size: 20

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

scribe-plugin-enhanced-link-tooltip

A Scribe plugin for doing a Medium/Google Docs style tooltip UI instead of a prompt for inserting links. Inspired by artsy/scribe-plugin-link-tooltip and ePages, but with a few modifications, namely:

• custom template (think of l10n)
• custom namespace for CSS classes and events
• pluggable link sanitizer
• tested with multiple Scribe instances
• links open in new tab/window

Example

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

These few CSS styles are more or less required to make the plugin work:

ibe-plugin-link-tooltip-hidden {
sibility: hidden;


ibe-plugin-link-tooltip {
index: 1;
ite-space: nowrap;


ibe-plugin-link-tooltip > * {
splay: inline-block;


ibe-plugin-link-tooltip-state-edit .scribe-plugin-link-tooltip-show-on-view,
ibe-plugin-link-tooltip-state-view .scribe-plugin-link-tooltip-show-on-edit {
splay: none;

Positioning

The tooltip will prepend itself to the scribe element's parent element and use position: absolute, top, and left to position itself close to the text you're highlighting. Therefore that element will get position: relative if (and only if) its current position is static.

TODO

• Tests

License

MIT