API REFERENCE · RICH TEXT PLUGINS

`@dojo-ng/rich-text-links`

Links for <dj-rich-text>: add, change, and remove a link on the selection.

@dojo-ng/rich-text-links · v0.1.1 · A plugin for <dj-rich-text>, not a custom element

npm install @dojo-ng/rich-text-links

Compose the links plugin with the default set. createLinksPlugin({ promptForUrl }) swaps the built-in window.prompt for your own (overlay) URL editor.

<dj-rich-text id="editor" label="Article"></dj-rich-text>
<script type="module">
  import "@dojo-ng/rich-text";
  import { defaultPlugins } from "@dojo-ng/rich-text";
  import { linksPlugin } from "@dojo-ng/rich-text-links";
  document.getElementById("editor").plugins = [...defaultPlugins, linksPlugin];
</script>

Using it

The toolbar button shows whether the selection is a link (aria-pressed). Clicking it asks for a URL.
An empty URL removes the link, a new URL sets or changes it, and Cancel changes nothing.

Setup

The default prompt is window.prompt. Pass your own with createLinksPlugin({ promptForUrl }); it may return a Promise, so it can open your own dialog.
For links made automatically while typing, add rich-text-autolink.
Setting plugins replaces the default set, so spread ...defaultPlugins to keep bold, italic, underline, undo, and redo.

Functions

`createLinksPlugin`

function createLinksPlugin(options?: LinksPluginOptions): RichTextPlugin;

Values

`linksPlugin`

const linksPlugin: RichTextPlugin;

Types

`LinksPluginOptions`

interface LinksPluginOptions {
  promptForUrl?(currentUrl: string): string | null | undefined | Promise<string | null | undefined>;
}