https://github.com/epages-de/scribe-plugin-enhanced-link-tooltip
A [Scribe](https://github.com/guardian/scribe) plugin for doing a Medium/Google Docs style tooltip UI instead of a prompt for inserting links.
https://github.com/epages-de/scribe-plugin-enhanced-link-tooltip
Last synced: 8 months ago
JSON representation
A [Scribe](https://github.com/guardian/scribe) plugin for doing a Medium/Google Docs style tooltip UI instead of a prompt for inserting links.
- Host: GitHub
- URL: https://github.com/epages-de/scribe-plugin-enhanced-link-tooltip
- Owner: ePages-de
- License: mit
- Created: 2015-03-18T13:09:47.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2017-04-21T10:13:36.000Z (about 9 years ago)
- Last Synced: 2025-10-22T11:54:09.571Z (8 months ago)
- Language: JavaScript
- Size: 24.4 KB
- Stars: 2
- Watchers: 16
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# scribe-plugin-enhanced-link-tooltip
A [Scribe](https://github.com/guardian/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](https://github.com/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](https://github.com/ePages-de/scribe-plugin-enhanced-link-tooltip/blob/master/example.js#L117) of the [demo](http://ePages-de.github.io/scribe-plugin-enhanced-link-tooltip/example.html) (`example.html`, `example.js`).
Javascript (don't let yourself scare by the template stuff)
````javascript
// Replace with your templating solution of choice
var scribePluginLinkTooltipTemplate = '' +
'
' +
'' +
'' +
'Apply' +
'Change' +
'Remove';
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:
````css
.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