@mixd-id/web-scaffold 0.1.230406332 → 0.1.230406333

package/package.json

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

package/src/components/TextWithTag.vue

@@ -6,6 +6,7 @@
          ref="html"
          v-html="html"
          :class="itemClass"
+         @blur="saveSelection($refs.html)"
          @input="onInput"></p>
 
       <button v-if="variant === 'minimal'" type="button" class="p-3" @click="$refs.modal.open()">
@@ -59,7 +60,8 @@
 </template>
 
 <script>
-import groupBy from "lodash/groupBy";
+
+import {restoreSelection, saveSelection} from "../utils/selection";
 
 export default{
 
@@ -69,6 +71,8 @@ export default{
 
     addFn: Function,
 
+    itemFn: Function,
+
     modelValue: String,
 
     items: Array,
@@ -82,7 +86,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 +108,8 @@ export default{
   },
 
   methods: {
+    restoreSelection,
+    saveSelection,
 
     insertElement(newNode){
       let selection = window.getSelection();
@@ -123,12 +134,8 @@ export default{
       selection.addRange(range);
     },
 
-    add(item){
-      this.$refs.modal.close()
-
-      if(typeof this.addFn === 'function'){
-        item = this.addFn(item)
-      }
+    addItem(item){
+      this.restoreSelection()
 
       const el = document.createElement('span')
       el.setAttribute('contenteditable', 'false')
@@ -140,6 +147,28 @@ 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)
+    },
+
     remove(e){
       e.target.parentNode.removeChild(e.target)
     },
@@ -179,10 +208,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