@mixd-id/web-scaffold 0.1.230406332 → 0.1.230406334

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.230406332",
+  "version": "0.1.230406334",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",

package/src/components/TextWithTag.vue

@@ -6,6 +6,8 @@
          ref="html"
          v-html="html"
          :class="itemClass"
+         @keydown="onKeyDown"
+         @blur="saveSelection($refs.html)"
          @input="onInput"></p>
 
       <button v-if="variant === 'minimal'" type="button" class="p-3" @click="$refs.modal.open()">
@@ -59,7 +61,8 @@
 </template>
 
 <script>
-import groupBy from "lodash/groupBy";
+
+import {restoreSelection, saveSelection} from "../utils/selection";
 
 export default{
 
@@ -69,6 +72,8 @@ export default{
 
     addFn: Function,
 
+    itemFn: Function,
+
     modelValue: String,
 
     items: Array,
@@ -82,7 +87,12 @@ export default{
   computed:{
 
     groupedItems(){
-      return groupBy(this.items ?? [], 'group')
+      return this.items.reduce((acc, item) => {
+        const key = item.group ?? ''
+        if(!acc[key]) acc[key] = []
+        acc[key].push(item)
+        return acc
+      }, {})
     },
 
     viewedItems(){
@@ -99,6 +109,8 @@ export default{
   },
 
   methods: {
+    restoreSelection,
+    saveSelection,
 
     insertElement(newNode){
       let selection = window.getSelection();
@@ -123,12 +135,10 @@ export default{
       selection.addRange(range);
     },
 
-    add(item){
-      this.$refs.modal.close()
+    addItem(item){
+      this.restoreSelection()
 
-      if(typeof this.addFn === 'function'){
-        item = this.addFn(item)
-      }
+      console.log(item)
 
       const el = document.createElement('span')
       el.setAttribute('contenteditable', 'false')
@@ -140,6 +150,42 @@ export default{
       this.onInput()
     },
 
+    add(item){
+      this.$refs.modal.close()
+
+      if(typeof this.addFn === 'function'){
+
+        if(this.addFn.constructor.name === 'AsyncFunction'){
+          this.addFn(item).then(newItem => {
+            if(newItem === false) return
+            item = newItem ? newItem : item
+            this.addItem(item)
+          })
+          return
+        }
+
+        const newItem = this.addFn(item)
+        if(newItem === false) return
+        item = newItem ? newItem : item
+      }
+
+      this.addItem(item)
+    },
+
+    onKeyDown(e){
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        document.execCommand('insertLineBreak');
+
+        const selection = window.getSelection();
+        const range = selection.getRangeAt(0);
+        range.setStartAfter(range.endContainer);
+        range.collapse(true);
+        selection.removeAllRanges();
+        selection.addRange(range);
+      }
+    },
+
     remove(e){
       e.target.parentNode.removeChild(e.target)
     },
@@ -148,14 +194,11 @@ export default{
 
       const arr = []
       for(let i = 0 ; i < this.$refs.html.childNodes.length ; i++){
-        if(this.$refs.html.childNodes[i].nodeType === 1 && this.$refs.html.childNodes[i].classList.contains(this.$style.tag)){
-          arr.push(this.$refs.html.childNodes[i].getAttribute('data-value'))
-        }
-        else if(this.$refs.html.childNodes[i].nodeType === 3){
-          arr.push(this.$refs.html.childNodes[i].textContent)
+        if(this.$refs.html.childNodes[i].nodeType === 3){
+          arr.push(this.$refs.html.childNodes[i].nodeValue)
         }
-        else{
-          arr.push((arr.length > 0 ? "\n\n" : '') + this.$refs.html.childNodes[i].innerText)
+        else if(this.$refs.html.childNodes[i].nodeType === 1 && this.$refs.html.childNodes[i].classList.contains(this.$style.tag)){
+          arr.push(this.$refs.html.childNodes[i].getAttribute('data-value'))
         }
       }
 
@@ -179,10 +222,19 @@ export default{
         }
 
         let html = val ?? ''
-        if(Array.isArray(this.items)){
-          for(let item of this.items){
-            html = html.replaceAll(item.value, `<span class="${this.$style.tag}" contenteditable="false" @click="remove" data-value="${item.value}">${item.text ?? item.value}</span>`, 'gi')
-          }
+
+        let customItems = []
+        if(typeof this.itemFn === 'function'){
+          customItems = this.itemFn(html)
+        }
+
+        const items = [
+          ...Array.isArray(this.items) ? this.items : [],
+          ...customItems
+        ]
+
+        for(let item of items){
+          html = html.replaceAll(item.value, `<span title="${item.value.replaceAll('"', '')}" class="${this.$style.tag}" contenteditable="false" data-value="${item.value}">${item.text ?? item.value}</span>`, 'gi')
         }
 
         this.html = html