We now have a actual markdown field and removed some comments

assets/js/app/editor/Components/Filelist.vue

@@ -55,7 +55,6 @@ export default {
     data: function() {
         let counter = 0;
         let containerFiles = this.files;
-        console.log(this.files)
         containerFiles.forEach(function(file, index, theContainerFilesArray) {
             theContainerFilesArray[index].id = index;
             counter++;

assets/js/app/editor/Components/Imagelist.vue

@@ -57,7 +57,6 @@ export default {
     },
     data: function() {
         let counter = 0;
-        console.log(this.images)
         let containerImages = this.images;
         containerImages.forEach(function(file, index, theContainerImagesArray) {
             theContainerImagesArray[index].id = index;

assets/js/app/editor/Components/Markdown.vue

@@ -1,37 +1,23 @@
 <template>
     <div>
-        <textarea
-            :id="id"
-            v-model="val"
-            class="form-control field--textarea"
-            :name="name"
-            :rows="rows"
-            :required="required"
-            :readonly="readonly"
-            :data-errormessage="errormessage"
-            :placeholder="placeholder"
-            :style="{ height: styleHeight }"
-            :maxlength="maxlength"
-            :title="name"
+        <vue-easymde 
+            :id="name" 
+            v-model="val" 
+            :name="name" 
             :configs="config"
-        ></textarea>
+        ></vue-easymde>
     </div>
 </template>
 
 <script>
-import { formatStrip } from '../../../filters/string';
-import EditorTextarea from './Textarea';
+import VueEasymde from "vue-easymde";
 
 export default {
     name: 'EditorMarkdown',
     components: {
-        EditorTextarea,
+        VueEasymde
     },
-    props: {
-        value: String,
-        name: String,
-    },
-    data: () => {
+    data(){
         return {
             val: null,
             config: {
@@ -41,13 +27,9 @@ export default {
             },
         }
     },
-    computed: {
-        compiledMarkdown() {
-            return marked(formatStrip(this.value));
-        }
-    },
-    mounted() {
-        this.val = formatStrip(this.value);
-    },
-};
-</script>
+}
+</script>
+
+<style>
+    @import "~easymde/dist/easymde.min.css";
+</style>

assets/js/app/editor/index.js

@@ -55,15 +55,15 @@ if (document.getElementById(id)) {
     app.component('EditorPassword', Password);
     app.component('EditorHtml', Html);
     app.component('EditorImage', Image);
-    app.component('EditorImageList', Imagelist); // b0rk
+    app.component('EditorImageList', Imagelist);
     app.component('EditorFile', File);
-    app.component('EditorFileList', Filelist); // same b0rk as imagelist
+    app.component('EditorFileList', Filelist);
     app.component('EditorMarkdown', Markdown);
     app.component('EditorNumber', Number);
     app.component('EditorSelect', Select);
     app.component('EditorSlug', Slug);
     app.component('EditorText', Text);
-    app.component('EditorTextarea', Textarea);
+    // app.component('EditorTextarea', Textarea);
     app.component('EditorCollection', Collection); // b0rk
     app.component('EditorLanguage', Language);
     app.component('ThemeSelect', ThemeSelect); 

package.json

@@ -54,6 +54,7 @@
         "tiny-emitter": "^2.1.0",
         "tinycolor2": "^1.4.2",
         "vue": "^3.2",
+        "vue-easymde": "^2.0.0",
         "vue-flatpickr-component": "^9.0.5",
         "vue-multiselect": "^3.0.0-alpha.2",
         "vue-template-compiler": "^2.6.14",

templates/_partials/fields/markdown.html.twig

@@ -5,17 +5,9 @@
         {% set height = field.definition.height|default(5) %}
     {% endif %}
 
-    <editor-textarea
-        :id='{{ id|json_encode }}'
+    <editor-markdown
         :value='{{ value|json_encode }}'
-        :label='{{ label|json_encode }}'
         :name='{{ name|json_encode }}'
-        :required='{{ required|json_encode }}'
-        :readonly='{{ readonly|json_encode }}'
-        :errormessage='{{ errormessage|json_encode }}'
-        :placeholder='{{ placeholder|json_encode }}'
-        :height='{{ height|json_encode }}'
-        :maxlength='{{ maxlength|json_encode }}'
-    ></editor-textarea>
+    ></editor-markdown>
 {% endblock %}