partially working replace logic

vue/src/components/MarkdownEditorComponent.vue

@@ -12,26 +12,76 @@
 <script>
 
 import {EditorState} from "@codemirror/state"
-import {keymap, EditorView} from "@codemirror/view"
+import {keymap, EditorView, MatchDecorator, Decoration, WidgetType, ViewPlugin} from "@codemirror/view"
 import {defaultKeymap} from "@codemirror/commands"
 
 import {markdown} from "@codemirror/lang-markdown"
 import {autocompletion} from "@codemirror/autocomplete"
 
+class PlaceholderWidget extends WidgetType { //TODO this is not working for some javascript magic reason
+    name = undefined
+    constructor(name) {
+        console.log(name)
+        super()
+    }
+
+    eq(other) {
+        return this.name == other.name
+    }
+
+    toDOM() {
+        let elt = document.createElement("span")
+        elt.style.cssText = `
+      border: 1px solid blue;
+      border-radius: 4px;
+      padding: 0 3px;
+      background: lightblue;`
+
+        elt.textContent = "Food"
+        return elt
+    }
+
+    ignoreEvent() {
+        return false
+    }
+}
+
 export default {
     name: "MarkdownEditorComponent",
     props: {},
     computed: {},
     mounted() {
 
+        const placeholderMatcher = new MatchDecorator({
+            regexp: /\{\{\singredients\[\d\]\s\}\}/g,
+            decoration: match => Decoration.replace({
+                widget: new PlaceholderWidget(match[0]),
+            })
+        })
+
+        const placeholders = ViewPlugin.fromClass(class {
+            placeholders
+
+            constructor(view) {
+                this.placeholders = placeholderMatcher.createDeco(view)
+            }
+
+            update(update) {
+                this.placeholders = placeholderMatcher.updateDeco(update, this.placeholders)
+            }
+        }, {
+            decorations: instance => instance.placeholders,
+            provide: plugin => EditorView.atomicRanges.of(view => {
+                return view.plugin(plugin)?.placeholders || Decoration.none
+            })
+        })
 
         let startState = EditorState.create({
             doc: "Das ist eine Beschreibung \nPacke {{ ingredients[1] }} in das Fass mit {{ ingredients[3] }}\nTest Bla Bla",
-            extensions: [keymap.of(defaultKeymap), markdown(), autocompletion({override: [this.foodTemplateAutoComplete]})]
+            extensions: [keymap.of(defaultKeymap), placeholders, markdown(), autocompletion({override: [this.foodTemplateAutoComplete]})]
         })
 
         let view = new EditorView({
-
             state: startState,
             extensions: [],
             parent: document.getElementById("editor")

vue/src/utils/cm-widgets.ts

@@ -0,0 +1,27 @@
+import {WidgetType} from "@codemirror/view";
+
+class PlaceholderWidget extends WidgetType {
+    constructor(readonly name: string) {
+        super()
+    }
+
+    eq(other: PlaceholderWidget) {
+        return this.name == other.name
+    }
+
+    toDOM() {
+        const elt = document.createElement("span")
+        elt.style.cssText = `
+      border: 1px solid blue;
+      border-radius: 4px;
+      padding: 0 3px;
+      background: lightblue;`
+        console.log('reading name', this.name)
+        elt.textContent = this.name
+        return elt
+    }
+
+    ignoreEvent() {
+        return false
+    }
+}