Add some toy example for a contenteditable div

Note: does not work currenty, because the parent attribute overwrites
the value. Need to implement something that prevents the overwrite while
the element is focused

client/src/components/content-forms/TextForm.vue

@@ -1,5 +1,12 @@
 <template>
+  <!-- eslint-disable vue/no-v-html -->
   <div class="text-form">
+    <div
+      class="text-form__input skillbox-textarea"
+      contenteditable="true"
+      @input="change"
+      v-text="text"
+    />
     <textarea
       :value="text"
       class="text-form__input skillbox-textarea"
@@ -11,6 +18,7 @@
 </template>
 
 <script>
+  let selection;
   export default {
     props: {
       value: {
@@ -18,19 +26,32 @@
         default: null,
         validator(value) {
           return Object.prototype.hasOwnProperty.call(value, 'text');
-        }
+        },
       },
       index: {
         type: Number,
-        default: -1
+        default: -1,
-      }
+      },
-  },
+    },
 
     computed: {
       text() {
         return this.value.text ? this.value.text.replace(/<br(\/)?>/, '\n').replace(/(<([^>]+)>)/ig, '') : '';
+      },
+    },
+
+    methods: {
+      log(e) {
+        console.log(e);
+      },
+      change(event) {
+        selection = window.getSelection().getRangeAt(0);
+        event.stopPropagation();
+        event.preventDefault();
+        this.$emit('change-text', event.target.innerText, this.index);
+        window.getSelection().addRange(selection);
       }
-    }
+    },
   };
 </script>
 
@@ -41,5 +62,11 @@
     &__input {
       width: 100%;
     }
+
+    &__contenteditable {
+     width: 100%;
+      height: 300px;
+      background-color: pink;
+    }
   }
 </style>