scribe-plugin-enhanced-link-tooltip

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, but with a few modifications, namely:

• no jQuery dependency
• custom template (think of l10n)
• custom namespace for CSS classes and events
• pluggable link sanitizer
• tested with multiple Scribe instances

Usage

See the source code of the demo (example.html, example.js in gh-pages branch).

Javascript (don't let yourself scare by the template stuff)

// Replace with your templating solution of choice
var scribePluginLinkTooltipTemplate = '' + 
    '<div data-scribe-plugin-link-tooltip-role="arrow"></div>' +
    '<a data-scribe-plugin-link-tooltip-role="link"' +
    'class="scribe-plugin-link-tooltip-show-on-view"></a>' +
    '<input data-scribe-plugin-link-tooltip-role="input"' +
    'class="scribe-plugin-link-tooltip-show-on-edit" placeholder="Paste or type a link"/>' +
    '<button data-scribe-plugin-link-tooltip-role="submit" type="submit"' +
    'class="scribe-plugin-link-tooltip-show-on-edit">Apply</button>' +
    '<button data-scribe-plugin-link-tooltip-role="edit" type="button"' +
    'class="scribe-plugin-link-tooltip-show-on-view">Change</button>' +
    '<button data-scribe-plugin-link-tooltip-role="remove" type="button"' +
    'class="scribe-plugin-link-tooltip-show-on-view">Remove</button>';

scribe.use(scribePluginLinkTooltipCommand({
    innerMarkup: scribePluginLinkTooltipTemplate,
    namespace: 'scribe-plugin-link-tooltip',
    linkSanitizer: function (str) {
        // Try to catch common cases of users forgetting to add "http://" in front,
        // but err on the safe side: if it looks even remotely like a hostname, just stop.
        // Feel free to add your favourite contry's TLD as long as it is not a common file extension.
        return str.match(/^\w[\w\-_\.]+\.(co|uk|com|org|net|gov|biz|info|us|eu|de|fr|it|es|pl|nz)/i) ?
        'http://' + str :
            str;
    }
}));

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

.scribe-plugin-link-tooltip-hidden {
  visibility: hidden;
}

.scribe-plugin-link-tooltip {
  z-index: 1;
  white-space: nowrap;
  transform: translateY(14px);
}

.scribe-plugin-link-tooltip > * {
  display: inline-block;
}

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

[data-scribe-plugin-link-tooltip-role="arrow"] {
  position: absolute;
  bottom: 99%;
  left: 50%;
  height: 0;
  width: 0;
  border: 14px solid transparent;
}

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