API REFERENCE · RICH TEXT PLUGINS

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

Automatic links for <dj-rich-text>: URLs and email addresses become links as you type.

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

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

Compose the autolink plugin with the default set; typing a URL or email followed by a space (or any boundary) links it. Add the links plugin too for manual link editing.

<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 { autolinkPlugin } from "@dojo-ng/rich-text-autolink";
  document.getElementById("editor").plugins = [...defaultPlugins, autolinkPlugin];
</script>

How it works

A text transform finds URLs and email addresses as you type and wraps them in links.
Editing the text so it no longer matches removes the link; editing it to a different URL updates the address. Links you made by hand are never changed.
www. addresses get https://, and plain email addresses get mailto:.

Setup

Exports autolinkPlugin, createAutoLinkPlugin({ matchers? }), and defaultMatchers.
A matcher is { regex, url(matched) }. The regex must not be global, and the earliest match wins.
It also registers the link node, so exported <a> elements import again through value even without rich-text-links. Loading both is fine.
Pair it with rich-text-links for editing links by hand.
Setting plugins replaces the default set, so spread ...defaultPlugins to keep bold, italic, underline, undo, and redo.

Not built

URLs split across formatting, removing an automatic link from a toolbar, and opening a link by clicking it in the editor.

Need one of these? Make a request on Discord or add an issue (work item) on Heptapod.

Functions

`createAutoLinkPlugin`

function createAutoLinkPlugin(options?: AutoLinkPluginOptions): RichTextPlugin;

Values

`autolinkPlugin`

const autolinkPlugin: RichTextPlugin;

`defaultMatchers`

const defaultMatchers: AutoLinkMatcher[];

Types

`AutoLinkMatcher`

interface AutoLinkMatcher {
  regex: RegExp;
  url(matched: string): string;
}

`AutoLinkPluginOptions`

interface AutoLinkPluginOptions {
  matchers?: AutoLinkMatcher[];
}