From 396dc00bc92f8aca149be7eeb6bfeaf64ea6069a Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Thu, 17 Feb 2022 12:06:25 +0100
Subject: [PATCH] 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
---
 .../src/components/content-forms/TextForm.vue | 37 ++++++++++++++++---
 1 file changed, 32 insertions(+), 5 deletions(-)

diff --git a/client/src/components/content-forms/TextForm.vue b/client/src/components/content-forms/TextForm.vue
index e8ec7762..3048e0f2 100644
--- a/client/src/components/content-forms/TextForm.vue
+++ b/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>