@mixd-id/web-scaffold 0.1.230406335 → 0.1.230406336

package/package.json

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

package/src/components/TextWithTag.vue

@@ -2,13 +2,12 @@
 	<div :class="$style.comp">
 
 		<div class="flex flex-row items-start">
-      <p contenteditable="true" spellcheck="false" class="flex-1 whitespace-pre-wrap"
+      <span contenteditable="true" spellcheck="false"
          ref="html"
          v-html="html"
-         :class="itemClass"
-         @keydown="onKeyDown"
+         :class="`${$style.content}${itemClass ? ' ' + itemClass : ''}`"
          @blur="saveSelection($refs.html)"
-         @input="onInput"></p>
+         @input="onInput"></span>
 
       <button v-if="variant === 'minimal'" type="button" class="p-3" @click="$refs.modal.open()">
         <svg width="14" height="14" class="fill-text-300 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M328 256c0 39.8-32.2 72-72 72s-72-32.2-72-72 32.2-72 72-72 72 32.2 72 72zm104-72c-39.8 0-72 32.2-72 72s32.2 72 72 72 72-32.2 72-72-32.2-72-72-72zm-352 0c-39.8 0-72 32.2-72 72s32.2 72 72 72 72-32.2 72-72-32.2-72-72-72z"/></svg>
@@ -172,20 +171,6 @@ 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)
     },
@@ -193,6 +178,7 @@ export default{
     onInput(){
 
       const arr = []
+      console.log(this.$refs.html.childNodes)
       for(let i = 0 ; i < this.$refs.html.childNodes.length ; i++){
         if(this.$refs.html.childNodes[i].nodeType === 3){
           arr.push(this.$refs.html.childNodes[i].nodeValue)
@@ -202,7 +188,7 @@ export default{
         }
       }
 
-      const text = arr.filter(_ => _).join('').trim()
+      const text = arr.filter(_ => _).join('')
 
       this.$emit('update:modelValue', text)
 
@@ -256,8 +242,8 @@ export default{
   @apply divide-y divide-text-100;
 }
 
-.comp p{
-  @apply outline-none p-2 align-baseline;
+.content{
+  @apply flex-1 whitespace-pre-line outline-none p-2;
 }
 
 .comp .tag{