stash

web/src/components/inputs/FormatedText.vue

@@ -1,5 +1,5 @@
 <template>
-    <div contenteditable @input="onchange">
+    <div contenteditable @input="onchange" ref="text">
         <span v-html="rawhtml(value)"></span>
     </div>
 </template>
@@ -17,6 +17,11 @@ export default {
             default: null
         }
     },
+    data() {
+        return {
+            selection: null,
+        };
+    },
     emits: ['input'],
     methods: {
         rawhtml(value) {
@@ -27,8 +32,21 @@ export default {
             }
         },
         onchange(event) {
+            this.selection = window.getSelection();
             this.$emit('input', event.target.innerText);
         }
+    },
+    watch: {
+        value() {
+            if (this.selection) {
+                const div = this.$refs.text;
+                const range = document.createRange();
+                range.setStart(div.childNodes[0], this.selection.anchorOffset);
+                range.setEnd(div.childNodes[0], this.selection.focusOffset);
+                this.selection.removeAllRanges();
+                this.selection.addRange(range);
+            }
+        }
     }
 };
 </script>