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

package/package.json

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

package/src/components/breadcrumb/ToggleBreadCrumb.vue

@@ -3,12 +3,14 @@
     <div v-for="(crumb, index) in breadcrumb_computed" :key="index">
       <template v-if="index === breadcrumb_computed.length - 1 && editable">
         <span
+          ref="editableSpan"
           contenteditable="true"
           class="toggle-breadcrumb-editable-input"
-          @input="updateContent($event);"
+          @input="updateContent($event)"
           @keydown.enter.prevent="handleEnterKey"
           @paste.prevent="handlePaste"
-        >{{ crumb.name }}</span>
+          v-text="initialContent"
+        ></span>
       </template>
       <template v-else>
         <router-link :to="{ name: crumb.link}" class="back-product" v-if="crumb.link && !isNuxt">{{ crumb.name }}</router-link>
@@ -44,41 +46,86 @@ export default {
     }
   },
 
-  data: function () {
+  data() {
     return {
-      content: ''
+      content: '',
+      initialContent: '',
+      lastSelection: null
     };
   },
 
   computed: {
     breadcrumb_computed() {
-      return this.isNuxt ? this.breadcrumb : this.$route.meta.breadcrumb
-    },
+      return this.isNuxt ? this.breadcrumb : this.$route.meta.breadcrumb;
+    }
+  },
+
+  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;
+    }
   },
 
   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
+          };
+        }
+      }
+    },
+
+    restoreSelection() {
+      if (!this.lastSelection || !this.$refs.editableSpan) return;
+      
+      const el = this.$refs.editableSpan;
+      if (!el.firstChild && typeof el.textContent === 'string') {
+        el.textContent = this.content || '';
+      }
+      
+      try {
+        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);
+      }
+    },
+
     handlePaste(event) {
-      // Get plain text from clipboard and clean it
       const text = (event.clipboardData || window.clipboardData).getData('text');
       const cleanText = text.replace(/[\r\n\s]+/g, ' ').trim();
       
-      // Get current selection information
+      this.saveSelection();
       const selection = window.getSelection();
       const selectionLength = selection.toString().length;
       const currentLength = this.content.length;
       
-      // Check if adding the pasted text would exceed maxChars
       if (currentLength - selectionLength + cleanText.length <= this.maxChars && selection.rangeCount) {
         const range = selection.getRangeAt(0);
         range.deleteContents();
         range.insertNode(document.createTextNode(cleanText));
         
-        // Move cursor to end of inserted text
         range.collapse(false);
         selection.removeAllRanges();
         selection.addRange(range);
         
-        // Update content
         this.content = event.target.innerText;
         this.$emit('update:lastCrumb', this.content);
       }
@@ -89,20 +136,21 @@ export default {
       event.target.blur();
     },
 
-    
     updateContent(event) {
-      // Limit the input to 50 characters
-      if (event.target.innerText.length >= this.maxChars) {
+      this.saveSelection();
+      const newText = event.target.innerText;
+      
+      if (newText.length > this.maxChars) {
         event.target.innerText = this.content;
-
-        // Move the cursor to the end of the input
-        document.getSelection().modify("move", "forward", "documentboundary");
-
+        this.restoreSelection();
       } else {
-        this.content = event.target.innerText;
+        this.content = newText;
         this.$emit('update:lastCrumb', this.content);
+        this.$nextTick(() => {
+          this.restoreSelection();
+        });
       }
     }
   }
-}
+};
 </script>