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

**URL:** <https://forum.obsidian.md/t/provide-decoration-with-matchdecorator-i-don-t-understand-codemirror/91073>\
**Category:** Devs: Plugins & API\
**Created:** [November 5, 2024, 8:16pm UTC](https://forum.obsidian.md/t/provide-decoration-with-matchdecorator-i-don-t-understand-codemirror/91073 "2024-11-05T20:16:49Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Charlie1](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/c/ec9cab/32.png) [@Charlie1](https://forum.obsidian.md/u/Charlie1)\
**Post date:** [November 5, 2024, 8:16pm UTC](https://forum.obsidian.md/t/provide-decoration-with-matchdecorator-i-don-t-understand-codemirror/91073/1 "2024-11-05T20:16:49Z")

</div>

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.

```ts
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](https://codemirror.net/examples/decoration/), 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 😅

---

<div class="post-metadata">

**Author:** ![Charlie1](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/c/ec9cab/32.png) [@Charlie1](https://forum.obsidian.md/u/Charlie1)\
**Post date:** [November 5, 2024, 8:44pm UTC](https://forum.obsidian.md/t/provide-decoration-with-matchdecorator-i-don-t-understand-codemirror/91073/2 "2024-11-05T20:44:00Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![TfTHacker](https://forum.obsidian.md/user_avatar/forum.obsidian.md/tfthacker/32/12958_2.png) [@TfTHacker](https://forum.obsidian.md/u/TfTHacker)\
**Post date:** [December 1, 2024, 5:10am UTC](https://forum.obsidian.md/t/provide-decoration-with-matchdecorator-i-don-t-understand-codemirror/91073/3 "2024-12-01T05:10:34Z")

</div>

I can’t say this is easy, but at least another example for you to look at:

> <https://github.com/TfTHacker/obsidian42-strange-new-worlds/blob/master/src/view-extensions/references-cm6.ts>