links in html contentEditable with medium-editor-x

src/components/editable/ContentEditable.vue

@@ -7,6 +7,10 @@ import { ConcernementsStore } from '@stores/concernements'
 import { UserStore } from '@stores/user'
 
 
+import MediumEditor from 'medium-editor-x'
+import 'medium-editor-x/dist/css/medium-editor.css'
+import 'medium-editor-x/dist/css/themes/beagle.css'
+
 export default {
   props: {
     tag: String, 
@@ -24,7 +28,8 @@ export default {
   emits: ['updated'],
   data(){
     return {
-      
+      editor: null,
+      spellcheck: false
     }
   },
   computed: {
@@ -34,7 +39,14 @@ export default {
     console.log('ContentEditable created');
   },
   mounted () {
-
+    this.editor = new MediumEditor(this.$refs.html_editable, {
+      toolbar: {
+        allowMultiParagraphSelection: false,
+        buttons: ['anchor'],
+      }
+    });
+  },
+  beforeUnmount() {
   },
   methods: {
     ...mapActions(ConcernementsStore, ['reloadConcernements']),
@@ -84,6 +96,8 @@ export default {
         })
     }
   },
+  components: {
+  }
 }
 </script>
 
@@ -92,13 +106,17 @@ export default {
     v-if="!html" 
     :is="tag"
     :contenteditable="contenteditable"
+    :spellcheck="speelcheck"
     @focusout="onContentEditableFocusOut"
   >{{ value }}</component>
   <component
     v-else
     :is="tag"
+    class="html-editable"
+    ref="html_editable"
     v-html="value"
     :contenteditable="contenteditable"
+    :spellcheck="speelcheck"
     @focusout="onContentEditableFocusOut"
   />
 </template>