codemirror history and highlighting

vue/src/components/MarkdownEditorComponent.vue

@@ -1,10 +1,11 @@
 <template>
     <div>
         <h1>EDITOR</h1>
-        <div id="editor" style="" class="bg-info">
+        <div id="editor" style="background-color: #fff; border: solid 1px">
 
         </div>
 
+
     </div>
 
 </template>
@@ -13,34 +14,32 @@
 
 import {EditorState} from "@codemirror/state"
 import {keymap, EditorView, MatchDecorator, Decoration, WidgetType, ViewPlugin} from "@codemirror/view"
-import {defaultKeymap} from "@codemirror/commands"
+import {defaultKeymap, history} from "@codemirror/commands"
 
-import {markdown} from "@codemirror/lang-markdown"
+import {markdown, markdownLanguage} from "@codemirror/lang-markdown"
 import {autocompletion} from "@codemirror/autocomplete"
 
-class PlaceholderWidget extends WidgetType {
+import {defaultHighlightStyle, syntaxHighlighting} from "@codemirror/language";
+
+class CheckboxWidget extends WidgetType {
     name = undefined
 
     constructor(name) {
-        console.log('name:', name)
         super()
         this.name = name
     }
 
-    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;`
+        let wrap = document.createElement("span")
+        wrap.innerText = this.name
+        wrap.style.fontStyle = 'italic'
 
-        elt.textContent = this.name
-        return elt
+        let box = wrap.appendChild(document.createElement("b-badge"))
+        box.setAttribute('variant', 'success')
+        box.innerHTML = '1 g Test'
+        box.style.cssText = ` border: 1px solid blue; border-radius: 4px; padding: 0 3px; background: lightblue;`
+        return wrap
     }
 
     ignoreEvent() {
@@ -54,10 +53,10 @@ export default {
     computed: {},
     mounted() {
 
-        const placeholderMatcher = new MatchDecorator({
-            regexp: /\{\{\singredients\[\d\]\s\}\}/g,
+        const decoMatcher = new MatchDecorator({
+            regexp: /\{\{ (?:scale\(\d+\)|ingredients\[\d+\]) \}\}/g,
             decoration: match => Decoration.replace({
-                widget: new PlaceholderWidget(match[0]),
+                widget: new CheckboxWidget(match[0]),
             })
         })
 
@@ -65,11 +64,11 @@ export default {
             placeholders
 
             constructor(view) {
-                this.placeholders = placeholderMatcher.createDeco(view)
+                this.placeholders = decoMatcher.createDeco(view)
             }
 
             update(update) {
-                this.placeholders = placeholderMatcher.updateDeco(update, this.placeholders)
+                this.placeholders = decoMatcher.updateDeco(update, this.placeholders)
             }
         }, {
             decorations: instance => instance.placeholders,
@@ -79,8 +78,15 @@ export default {
         })
 
         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), placeholders, markdown(), autocompletion({override: [this.foodTemplateAutoComplete]})]
+            doc: "## Header\n\nDas ist eine Beschreibung [test](https://google.com) \nPacke {{ ingredients[1] }} in das Fass mit {{ ingredients[3] }}\nTest Bla Bla {{ scale(100) }} \n\n- test\n- test 2\n- test3",
+            extensions: [
+                history(),
+                syntaxHighlighting(defaultHighlightStyle),
+                keymap.of(defaultKeymap),
+                placeholders,
+                markdown({base: markdownLanguage, highlightFormatting: true}),
+                autocompletion({override: [this.foodTemplateAutoComplete]})
+            ]
         })
 
         let view = new EditorView({