What's this about?

A ProseMirror link plugin which finds occuerrences 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});
69

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

Need more assistance?
We can help you in finding the most adequate solution for your issue!
Video consultation
Book an interactive video consultation with us. Get an interactive one on one or team session with our experienced developers.
Educate your team
We can hold on-site (in the EU) or online trainings. We can help your team to learn new technologies or master certain "grey area" aspects of already used tools.
Hire us to build the product you desire
Hire an individual or a team of developers to solve build your product. We can integrate into an ongoing project, or kick off and layout the foundations of an entirely new solution.