@mixd-id/web-scaffold 0.1.230406333 → 0.1.230406335

package/package.json

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

package/src/components/TextWithTag.vue

@@ -2,10 +2,11 @@
 	<div :class="$style.comp">
 
 		<div class="flex flex-row items-start">
-      <p contenteditable="true" spellcheck="false" class="flex-1 whitespace-pre-line"
+      <p contenteditable="true" spellcheck="false" class="flex-1 whitespace-pre-wrap"
          ref="html"
          v-html="html"
          :class="itemClass"
+         @keydown="onKeyDown"
          @blur="saveSelection($refs.html)"
          @input="onInput"></p>
 
@@ -14,7 +15,7 @@
       </button>
     </div>
 
-    <div v-if="variant !== 'minimal'" class="flex flex-row bg-base-300">
+    <div v-if="variant !== 'minimal'" class="flex flex-row bg-base-300" @dblclick.alt="log(JSON.stringify(modelValue))">
       <div class="flex-1 flex flex-row gap-2 overflow-x-auto p-1" :class="$style.noScrollbar">
         <button type="button" v-for="item in viewedItems" :class="$style.tag2" class="text-xs" @click="add(item)">{{ item.text ?? item.value }}</button>
       </div>
@@ -137,6 +138,8 @@ export default{
     addItem(item){
       this.restoreSelection()
 
+      console.log(item)
+
       const el = document.createElement('span')
       el.setAttribute('contenteditable', 'false')
       el.setAttribute('class', this.$style.tag)
@@ -169,6 +172,20 @@ export default{
       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)
     },
@@ -177,18 +194,15 @@ 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'))
         }
       }
 
-      const text = arr.filter(_ => _).join('')
+      const text = arr.filter(_ => _).join('').trim()
 
       this.$emit('update:modelValue', text)