mobiledoc-kit - npm Package Compare versions

Comparing version 0.13.0 to 0.13.1-pre.0

package.json

 {
   "name": "mobiledoc-kit",
-  "version": "0.13.0",
+  "version": "0.13.1-pre.0",
   "description": "A toolkit for building WYSIWYG editors with Mobiledoc",
@@ -5,0 +5,0 @@ "repository": "https://github.com/bustle/mobiledoc-kit",

README.md

@@ -112,2 +112,3 @@ # Mobiledoc Kit
 * `parserPlugins` - [array] See [DOM Parsing Hooks](https://github.com/bustle/mobiledoc-kit#dom-parsing-hooks)
+* `tooltipPlugin` - [object] Optional plugin for customizing tooltip appearance
 
@@ -409,2 +410,32 @@ The editor leverages unicode characters, so HTML documents must opt in to
 
+### Tooltip Plugins
+
+Developers can customize the appearance of tooltips (e.g. those shown when a user hovers over a link element) by specificying a tooltip plugin. A tooltip plugin is an object that implements the `renderLink` method.
+
+The `renderLink` method is called with three arguments:
+
+* `tooltip` - The DOM element of the tooltip UI.
+* `link` - The DOM element (HTMLAnchorElement) of the link to display a tooltip for.
+* `actions` - An object containing functions that can be called in response to user interaction.
+  * `editLink` - A function that, when called, prompts the user to edit the `href` of the link element in question.
+
+The `renderLink` method is responsible for populating the passed `tooltip` element with the correct content to display to the user based on the link in question. This allows Mobiledoc users to, for example, provide localized tooltip text via their system of choice.
+
+```js
+const MyTooltip = {
+  renderLink(tooltip, link, { editLink }) {
+    tooltip.innerHTML = `${i18n.translate('URL: ')} ${link.href}`;
+    const button = document.createElement('button');
+    button.innerText = i18n.translate('Edit');
+    button.addEventListener('click', editLink);
+    tooltip.append(button);
+  }
+}
+const editor = new Mobiledoc.Editor({
+  tooltipPlugin: MyTooltip
+});
+const element = document.querySelector('#editor');
+editor.render(element);
+```
+
 ## Caveats
@@ -443,3 +474,3 @@
  * `yarn start`
- * `open http://localhost:4200/website/demo`
+ * `open http://localhost:4200/website/demo/`
 
@@ -446,0 +477,0 @@ The assets for the demo are in `assets/demo`.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

830367

increased by0.85%

Lines of code

21335

increased by0.58%

Number of lines in readme file

512

increased by6.44%

No dependency changes