toggle-components-library 1.37.0-beta.5 → 1.37.0-beta.6

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "toggle-components-library",
-    "version": "1.37.0-beta.5",
+    "version": "1.37.0-beta.6",
     "private": false,
     "scripts": {
         "serve": "vue-cli-service serve",

package/src/components/breadcrumb/ToggleBreadCrumb.vue

@@ -6,11 +6,11 @@
           ref="editableSpan"
           contenteditable="true"
           class="toggle-breadcrumb-editable-input"
-          @input="updateContent($event)"
+          @input="handleInput"
+          @keypress="handleKeypress"
           @keydown.enter.prevent="handleEnterKey"
           @paste.prevent="handlePaste"
-          v-text="initialContent"
-        ></span>
+        >{{ crumb.name }}</span>
       </template>
       <template v-else>
         <router-link :to="{ name: crumb.link}" class="back-product" v-if="crumb.link && !isNuxt">{{ crumb.name }}</router-link>
@@ -24,7 +24,6 @@
 
 <script>
 export default {
-  mixins: [],
   props: {
     isNuxt: {
       type: Boolean,
@@ -48,10 +47,8 @@ export default {
 
   data() {
     return {
-      content: '',
-      initialContent: '',
-      lastSelection: null
-    };
+      lastValidContent: ''
+    }
   },
 
   computed: {
@@ -61,96 +58,93 @@ export default {
   },
 
   mounted() {
-    if (this.breadcrumb_computed && this.breadcrumb_computed.length > 0) {
-      const lastCrumb = this.breadcrumb_computed[this.breadcrumb_computed.length - 1];
-      this.content = lastCrumb.name;
-      this.initialContent = lastCrumb.name;
-    }
+    this.updateContent();
   },
 
   methods: {
-    saveSelection() {
-      if (window.getSelection) {
-        const sel = window.getSelection();
-        if (sel.getRangeAt && sel.rangeCount) {
-          const range = sel.getRangeAt(0);
-          this.lastSelection = {
-            start: range.startOffset,
-            end: range.endOffset
-          };
+    updateContent() {
+      if (this.$refs.editableSpan && this.breadcrumb_computed?.length) {
+        const lastCrumb = this.breadcrumb_computed[this.breadcrumb_computed.length - 1];
+        if (this.$refs.editableSpan.textContent !== lastCrumb.name) {
+          this.$refs.editableSpan.textContent = lastCrumb.name;
+          this.lastValidContent = lastCrumb.name;
         }
       }
     },
 
-    restoreSelection() {
-      if (!this.lastSelection || !this.$refs.editableSpan) return;
-      
-      const el = this.$refs.editableSpan;
-      if (!el.firstChild && typeof el.textContent === 'string') {
-        el.textContent = this.content || '';
+    handleKeypress(event) {
+      if (event.key.length !== 1) return;
+
+      const currentLength = this.$refs.editableSpan.textContent.length;
+      const selection = window.getSelection();
+      const selectedLength = selection.toString().length;
+
+      if (currentLength - selectedLength >= this.maxChars) {
+        event.preventDefault();
+        return false;
       }
+    },
+
+    handleInput(event) {
+      const newText = event.target.textContent;
       
-      try {
+      if (newText.length <= this.maxChars) {
+        this.lastValidContent = newText;
+        this.$emit('update:lastCrumb', newText);
+      } else {
+        // Get cursor position before restoring text
+        const selection = window.getSelection();
+        const cursorPosition = selection.getRangeAt(0).startOffset;
+
+        // Restore previous content
+        event.target.textContent = this.lastValidContent;
+
+        // Restore cursor position
         const range = document.createRange();
-        const sel = window.getSelection();
-        const textNode = el.firstChild || el;
-        
-        // Ensure we don't exceed the text length
-        const start = Math.min(this.lastSelection.start, textNode.length);
-        const end = Math.min(this.lastSelection.end, textNode.length);
-        
-        range.setStart(textNode, start);
-        range.setEnd(textNode, end);
-        sel.removeAllRanges();
-        sel.addRange(range);
-      } catch (e) {
-        console.warn('Failed to restore selection:', e);
+        const textNode = event.target.firstChild;
+        if (textNode) {
+          range.setStart(textNode, Math.min(cursorPosition, this.lastValidContent.length));
+          range.collapse(true);
+          selection.removeAllRanges();
+          selection.addRange(range);
+        }
       }
     },
 
     handlePaste(event) {
+      event.preventDefault();
       const text = (event.clipboardData || window.clipboardData).getData('text');
       const cleanText = text.replace(/[\r\n\s]+/g, ' ').trim();
       
-      this.saveSelection();
       const selection = window.getSelection();
+      const range = selection.getRangeAt(0);
+      const currentLength = this.$refs.editableSpan.textContent.length;
       const selectionLength = selection.toString().length;
-      const currentLength = this.content.length;
       
-      if (currentLength - selectionLength + cleanText.length <= this.maxChars && selection.rangeCount) {
-        const range = selection.getRangeAt(0);
+      const availableSpace = this.maxChars - (currentLength - selectionLength);
+      if (availableSpace > 0) {
+        const truncatedText = cleanText.slice(0, availableSpace);
         range.deleteContents();
-        range.insertNode(document.createTextNode(cleanText));
-        
+        range.insertNode(document.createTextNode(truncatedText));
         range.collapse(false);
-        selection.removeAllRanges();
-        selection.addRange(range);
-        
-        this.content = event.target.innerText;
-        this.$emit('update:lastCrumb', this.content);
+        this.lastValidContent = this.$refs.editableSpan.textContent;
+        this.$emit('update:lastCrumb', this.lastValidContent);
       }
     },
 
     handleEnterKey(event) {
       event.preventDefault();
       event.target.blur();
-    },
+    }
+  },
 
-    updateContent(event) {
-      this.saveSelection();
-      const newText = event.target.innerText;
-      
-      if (newText.length > this.maxChars) {
-        event.target.innerText = this.content;
-        this.restoreSelection();
-      } else {
-        this.content = newText;
-        this.$emit('update:lastCrumb', this.content);
-        this.$nextTick(() => {
-          this.restoreSelection();
-        });
-      }
+  watch: {
+    'breadcrumb_computed': {
+      handler() {
+        this.$nextTick(this.updateContent);
+      },
+      deep: true
     }
   }
-};
+}
 </script>