@aquera/nile-elements 0.1.67-beta-2.0 → 0.1.67-beta-2.2

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.1.67-beta-2.0",
+  "version": "0.1.67-beta-2.2",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/nile-rich-text-editor/nile-rich-text-editor.css.ts

@@ -3,6 +3,8 @@ import { css } from 'lit';
 
 export const styles = css`
    
+   
+   .editor {all: revert;}
 
   nile-rich-text-editor { position: relative; display: block; font-family: inherit; }
 
@@ -21,6 +23,8 @@ nile-rte-preview {
 
 
       .toolbar, nile-rte-toolbar {
+        
+        width:486px;  
         display:flex; align-items:center; gap:6px; padding:8px; 
         border:1px solid #e5e7eb; border-bottom:none; border-radius:8px 8px 0 0; background:#fff;
       }
@@ -40,7 +44,7 @@ nile-rte-preview {
       nile-rte-divider { width:1px; height:20px; background:#e5e7eb; display:inline-block; margin:0 4px; }
 
        .editor p { margin:1em 0; }
-      .editor h1, .preview h1 { font-size:2em, all: revert; display: block;
+      .editor h1, .preview h1 {  all: revert; font-size:2em, display: block;
 font-size: 2em;
 margin-top: 0.67em;
 margin-bottom: 0.67em;
@@ -59,10 +63,12 @@ font-weight: bold;}
       .editor h5 { font-size:0.83em  }
       .editor h6 { font-size:0.67em  }
 
-      .editor { min-height:160px; padding:12px; border:1px solid #e5e7eb; border-radius:0 0 8px 8px; background:#fff; outline:none;   white-space: pre-wrap;
+      .editor {   min-height:160px; max-width:478px; padding:12px; border:1px solid #e5e7eb; border-radius:0 0 8px 8px; background:#fff; outline:none;  
   tab-size: 4;           
-  -moz-tab-size: 4;       }
-      nile-rte-preview { display:block; margin-top:10px; padding:10px; border:1px dashed #cbd5e1; border-radius:8px; background:#fafafa; }
+  -moz-tab-size: 4; 
+  word-break: break-word; 
+     }
+      nile-rte-preview { display:block; margin-top:10px; padding:10px; border:1px dashed #cbd5e1; border-radius:8px; background:#fafafa; max-width:478px; }
 
       .rte-color-trigger {
   display: inline-flex;

package/src/nile-rich-text-editor/nile-rich-text-editor.ts

@@ -196,10 +196,52 @@ private bgSwatchEl: HTMLElement | null = null;
     }
     this.ensureAtLeastOneParagraph();
   }
+ 
+  
+  private unwrapMention(span: HTMLElement, preserveText = true) {
+    const parent = span.parentNode;
+    if (!parent) return;
+  
+    const txt = preserveText ? (span.textContent ?? '').replace(/\u200B/g, '') : '';
+    const textNode = document.createTextNode(txt);
+    parent.insertBefore(textNode, span);
+    parent.removeChild(span);
+    const r = document.createRange();
+    r.setStartAfter(textNode);
+    r.collapse(true);
+    const sel = window.getSelection();
+    sel?.removeAllRanges();
+    sel?.addRange(r);
+  }
+  
+  private scrubBrokenMentions() {
+    if (!this.editorEl) return;
+    const mentions = this.editorEl.querySelectorAll('span.mention');
+  
+    mentions.forEach((m) => {
+      const span = m as HTMLElement;
+      const key = span.getAttribute('data-mention-key');
+      const label = span.getAttribute('data-mention-label');
+      const trigger = span.getAttribute('data-mention-trigger') || '';
+      const text = (span.textContent ?? '').replace(/\u200B/g, '').trim();
+  
+ 
+      const looksValid = !!key && !!label && text.length > 0 &&
+                         text.startsWith(trigger) && text.includes(label);
+  
+ 
+      if (!text || !looksValid) {
+        this.unwrapMention(span, true);
+        return;
+      }
+    });
+  }
 
+  
   private wireEditor() {
     this.editorEl.addEventListener('input', () => { 
       this.ensureAtLeastOneParagraph();
+      this.scrubBrokenMentions();
       this.updateContent();
     });
     this.editorEl.addEventListener('mouseup', () => this.saveSelection());