Provide Decoration with MatchDecorator (I don´t understand CodeMirror)

Developers: Plugin & API
1

Hello,
sorry, I know it can be annoying when Coding Newbies ask simple questions which everyone else knows, but I have been on this on and off for a few months now and I can´t understand the codemirror docs very well. For a bigger plugin, I want to decorate every instance of “((something))” in the viewport and thought to start with a underline.

import {
    Decoration,
    DecorationSet,
    EditorView,
    PluginSpec,
    PluginValue,
    ViewPlugin,
    ViewUpdate,
    WidgetType,
    MatchDecorator
  } from '@codemirror/view';

import {
    EditorState, 
    StateField,
    RangeSetBuilder,
    StateEffect
} from '@codemirror/state'; 

import { syntaxTree } from '@codemirror/language';

const LawRefMatcher = new MatchDecorator({
  regexp: /\(\((\w+)\)\)/g,
  decoration: match => Decoration.mark({
    class: "lr-underline"
  })
})

const underlineTheme = EditorView.baseTheme({
  ".lr-underline": { textDecoration: "underline 3px red"}
})





class LawRefPluginEditorProcessor implements PluginValue {
    decorations: DecorationSet;
    constructor(view: EditorView) {
        this.decorations = LawRefMatcher.createDeco(view);
        console.log("halloooo")
    }
  
    update(update: ViewUpdate) {
        if (update.docChanged || update.viewportChanged) {
            this.decorations = LawRefMatcher.updateDeco(update, this.decorations);
            console.log("elllooooo")
        }
    }
  
    destroy() {
      
    }

} 
  
export const lawRefPluginEditorProcessor = ViewPlugin.fromClass(LawRefPluginEditorProcessor);

I would guess that it the problem is that the decorations are not correctly provided to the editor, but I honestly don´t even know where to start, because in the examples, the decorations itself are always provided and as far as I understand, here I only have the MatchDecorator.

Another question if anybody knows: In the codemirror example, the decorations seem to be saved in StateFields. Is it expensive to always run the MatchDecorator and should I therefore provide State Fields with every underline too?

Again, sorry if this is a dumb question, I can´t really do much with what the codemirror docs are providing me :sweat_smile:

2

Alternatively: A plugin with a manageable source code where this is implemented would help a lot!