toggle-components-library 1.37.0-beta.2 → 1.37.0-beta.4

package/package.json

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

package/src/components/breadcrumb/ToggleBreadCrumb.vue

@@ -6,6 +6,8 @@
           contenteditable="true"
           class="toggle-breadcrumb-editable-input"
           @input="updateContent($event);"
+          @keydown.enter.prevent="handleEnterKey"
+          @paste.prevent="handlePaste"
         >{{ crumb.name }}</span>
       </template>
       <template v-else>
@@ -55,17 +57,60 @@ export default {
   },
 
   methods: {
+    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
+      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);
+      }
+    },
+
+    handleEnterKey(event) {
+      event.preventDefault();
+      event.target.blur();
+    },
 
+    
     updateContent(event) {
-      // Limit the input to 50 characters
-      if (event.target.innerText.length >= this.maxChars) {
+      const newText = event.target.innerText;
+      
+      // If text exceeds maxChars, prevent the change
+      if (newText.length > this.maxChars) {
+        // Save current selection
+        const selection = window.getSelection();
+        const range = selection.getRangeAt(0);
+        const cursorOffset = range.startOffset;
+
+        // Restore previous content
         event.target.innerText = this.content;
-        
-        // Move the cursor to the end of the input
-        document.getSelection().modify("move", "forward", "documentboundary");
-    
+
+        // Restore cursor position
+        const newRange = document.createRange();
+        newRange.setStart(event.target.firstChild || event.target, Math.min(cursorOffset, this.content.length));
+        newRange.collapse(true);
+        selection.removeAllRanges();
+        selection.addRange(newRange);
       } else {
-        this.content = event.target.innerText;
+        this.content = newText;
         this.$emit('update:lastCrumb', this.content);
       }
     }

package/src/sass/includes/_as_breadcrumb.scss

@@ -27,6 +27,7 @@
         line-height: 1;
         border: 1px solid transparent;
         margin: -1px 0 0 -10px;
+        white-space: nowrap
       }
 
       .toggle-breadcrumb-editable-input:hover {