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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "toggle-components-library",
-    "version": "1.37.0-beta.2",
+    "version": "1.37.0-beta.3",
     "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,15 +57,47 @@ 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) {
         event.target.innerText = this.content;
-        
+
         // Move the cursor to the end of the input
         document.getSelection().modify("move", "forward", "documentboundary");
-    
+
       } else {
         this.content = event.target.innerText;
         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 {