What's this about?

A ProseMirror link plugin which finds occurrences of strings in your document, and does it by only looking at the changed sections, thus saving a lot of time by not re-processing the whole document all the time.

How to use?

1. Install the plugin: npm i -S prosemirror-link-plugin
2. Add the plugin to the editor

In codespeak:

1import { schema } from "prosemirror-schema-basic";
2import { exampleSetup } from "prosemirror-example-setup";
3import { Decoration } from "prosemirror-view";
4import { EditorState } from "prosemirror-state";
5import { EditorView } from "prosemirror-view";
6import {
7    autoLinkingPlugin,
8    LinksKeyState,
9} from "prosemirror-link-plugin";
10
11export interface LinkSpec {
12    id: number;
13    alias: string;
14}
15
16export const aliasDecoration = (
17    start: number,
18    end: number,
19    alias: string,
20    matchPos: number,
21    pluginState: LinksKeyState<LinkSpec>,
22) => {
23    const spec = pluginState.aliasToSpec[alias];
24    return Decoration.inline(
25        start,
26        end,
27
28        {
29            class: "autoLink",
30            onclick: `alert('You clicked on "${alias}"')`,
31        },
32        { id: spec?.id, alias },
33    );
34};
35
36let aliases = { alias: "typing", id: 1 };
37
38const initialDoc = {
39    content: [
40        {
41            content: [
42                {
43                    text: "Start typing!",
44                    type: "text",
45                },
46            ],
47            type: "paragraph",
48        },
49    ],
50    type: "doc",
51};
52
53const state = EditorState.create<typeof schema>({
54    doc: schema.nodeFromJSON(initialDoc),
55    plugins: [
56        ...exampleSetup({
57            schema,
58        }),
59        autoLinkingPlugin(
60            aliases,
61            aliasDecoration,
62        ),
63    ],
64});
65
66const view: EditorView = new EditorView(document.getElementById("editor"), {
67    state,
68});

Add some CSS around your decoration, you can do it by targeting its class ( autoLink in the example above ).

You can check out the docs at https://gitlab.com/emergence-engineering/prosemirror-link-plugin