playing around with codemirror

vue/src/apps/TestView/TestView.vue

@@ -2,50 +2,7 @@
 
     <div id="app">
         <div>
-
-            <b-row>
-                <b-col>
-                    <b-input v-model="query" @change="refreshData"></b-input>
-                </b-col>
-            </b-row>
-
-            <b-row class="mt-5">
-                <b-col>
-                    <ul>
-
-                        <b-media tag="li" v-for="d in data" v-bind:key="d.id">
-                            <template #aside>
-                                <b-img-lazy thumbnail width="64" alt="placeholder" :src="d.image"></b-img-lazy>
-                            </template>
-                            <h5 class="mt-0 mb-1">{{ d.name }}</h5>
-                            <p class="mb-0">
-                                Cras sit amet nibh libero, in gravida nulla.
-                            </p>
-                            <p class="float-right">
-                                <b-button class="ml-1">1</b-button>
-                                <b-button class="ml-1">1</b-button>
-                                <b-button class="ml-1">1</b-button>
-                            </p>
-                        </b-media>
-
-                    </ul>
-
-
-                </b-col>
-            </b-row>
-
-            <b-row>
-                <b-col class="text-center align-items-center">
-                    <b-pagination
-                        v-model="current_page"
-                        :total-rows="items_total"
-                        :per-page="items_per_page"
-                        aria-controls="data_table"
-                        align="center"
-                        @change="refreshData"
-                    ></b-pagination>
-                </b-col>
-            </b-row>
+            <markdown-editor-component></markdown-editor-component>
 
         </div>
     </div>
@@ -64,6 +21,7 @@ import {ApiApiFactory} from "@/utils/openapi/api";
 import GenericMultiselect from "@/components/GenericMultiselect.vue";
 import GenericModalForm from "@/components/Modals/GenericModalForm.vue";
 import {Models} from "@/utils/models";
+import MarkdownEditorComponent from "@/components/MarkdownEditorComponent.vue";
 
 
 Vue.use(BootstrapVue)
@@ -72,35 +30,19 @@ Vue.use(BootstrapVue)
 export default {
     name: "TestView",
     mixins: [ApiMixin],
-    components: {},
+    components: {MarkdownEditorComponent},
     computed: {},
     data() {
-        return {
-            active_model: Models.FOOD,
-
-            data: [],
-            query: "",
-
-            items_per_page: 25,
-            items_total: 0,
-            current_page: 1,
-
-        }
+        return {}
     },
     mounted() {
         this.$i18n.locale = window.CUSTOM_LOCALE
 
-        this.refreshData()
+
     },
     methods: {
         refreshData: function () {
-            let apiClient = new ApiApiFactory()
-            apiClient.listFoods(this.query, 0, 0, this.current_page, this.items_per_page, {query: {extended: 1}}).then(result => {
-                this.items_total = result.data.count
-                this.data = result.data.results
-            }).catch((err) => {
-                StandardToasts.makeStandardToast(this, StandardToasts.FAIL_FETCH, err)
-            })
+
         }
     },
 }

vue/src/components/MarkdownEditorComponent.vue

@@ -0,0 +1,56 @@
+<template>
+    <div>
+        <h1>EDITOR</h1>
+        <div id="editor" style="" class="bg-info">
+
+        </div>
+
+    </div>
+
+</template>
+
+<script>
+
+import {EditorState} from "@codemirror/state"
+import {keymap, EditorView} from "@codemirror/view"
+import {defaultKeymap} from "@codemirror/commands"
+
+import {markdown} from "@codemirror/lang-markdown"
+import {autocompletion} from "@codemirror/autocomplete"
+
+export default {
+    name: "MarkdownEditorComponent",
+    props: {},
+    computed: {},
+    mounted() {
+
+
+        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]})]
+        })
+
+        let view = new EditorView({
+
+            state: startState,
+            extensions: [],
+            parent: document.getElementById("editor")
+        })
+    },
+    methods: {
+        foodTemplateAutoComplete: function (context) {
+            let word = context.matchBefore(/\w*/)
+            if (word.from == word.to && !context.explicit)
+                return null
+            return {
+                from: word.from,
+                options: [
+                    {label: "Mehl", type: "text", apply: "{{ ingredients[1] }}", detail: "template"},
+                    {label: "Butter", type: "text", apply: "{{ ingredients[2] }}", detail: "template"},
+                    {label: "Salz", type: "text", apply: "{{ ingredients[3] }}", detail: "template"},
+                ]
+            }
+        }
+    },
+}
+</script>