@aquera/nile-elements 0.1.67-beta-1.2 → 0.1.67-beta-1.3

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-1.2",
+  "version": "0.1.67-beta-1.3",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

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

@@ -42,7 +42,9 @@ nile-rte-toolbar-item > nile-button::part(base) {
       .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; }
+      .editor { min-height:160px; padding:12px; border:1px solid #e5e7eb; border-radius:0 0 8px 8px; background:#fff; outline:none;   white-space: pre-wrap;
+  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; }
 
       .rte-color-trigger {

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

@@ -159,7 +159,7 @@ private bgSwatchEl: HTMLElement | null = null;
   private ensureEditor() {
     this.editorEl = this.querySelector('.editor') as HTMLElement;
     if (!this.editorEl) {
-      const editor = document.createElement('div');
+      const editor = document.createElement('article');
       editor.className = 'editor';
       editor.setAttribute('contenteditable','true');
       if (this.toolbarEl?.nextSibling) {
@@ -178,14 +178,65 @@ private bgSwatchEl: HTMLElement | null = null;
   }
 
   private wireEditor() {
-    // Input & selection preservation
     this.editorEl.addEventListener('input', () => { 
       this.ensureAtLeastOneParagraph();
       this.updateContent();
     });
     this.editorEl.addEventListener('mouseup', () => this.saveSelection());
-    this.editorEl.addEventListener('keyup', () => this.saveSelection()); 
+    this.editorEl.addEventListener('keyup', () => this.saveSelection());
+    this.editorEl.addEventListener('keydown', this.onEditorKeydown);   
   }
+  
+ 
+  private onEditorKeydown = (e: KeyboardEvent) => {
+    if (e.key !== 'Tab') return;
+  
+    e.preventDefault();
+    this.focusAndRestore();
+  
+    const sel = window.getSelection();
+    if (!sel || sel.rangeCount === 0) return;
+    const range = sel.getRangeAt(0);
+  
+   
+    if (e.shiftKey) {
+      if (range.collapsed && range.startContainer.nodeType === Node.TEXT_NODE) {
+        const t = range.startContainer as Text;
+        const off = range.startOffset;
+        const before = t.data.slice(0, off);
+  
+      
+        const removed = before.replace(/(\t|[ \u00a0]{2})$/, '');
+        if (removed.length !== before.length) {
+          t.data = removed + t.data.slice(off);
+          const r = document.createRange();
+          r.setStart(t, removed.length);
+          r.collapse(true);
+          sel.removeAllRanges();
+          sel.addRange(r);
+          this.updateContent();
+          this.updateToolbarState();
+        }
+      }
+      return;
+    }
+  
+ 
+    range.deleteContents();
+    const tabNode = document.createTextNode('\t');  
+    range.insertNode(tabNode);
+  
+ 
+    const r = document.createRange();
+    r.setStartAfter(tabNode);
+    r.collapse(true);
+    sel.removeAllRanges();
+    sel.addRange(r);
+  
+    this.updateContent();
+    this.updateToolbarState();
+  };
+  
 
   private wireAuthoredToolbar(tb: HTMLElement) {
    
@@ -239,7 +290,6 @@ private bgSwatchEl: HTMLElement | null = null;
           }
           child.innerHTML = '';
         } else {
-          // Author provided custom content (could be a <nile-icon> already)
           btn.innerHTML = child.innerHTML;
           child.innerHTML = '';
         }
@@ -252,12 +302,12 @@ private bgSwatchEl: HTMLElement | null = null;
         btn.addEventListener('mousedown', e => e.preventDefault());
         btn.addEventListener('click', () => this.onToolbarCommand(cmd));
       
-        // Register for active reflection
+     
         const arr = this.buttonMap.get(cmd) ?? [];
         arr.push(btn);
         this.buttonMap.set(cmd, arr);
       
-        return; // done with this child
+        return; 
       }
       if (tag === 'nile-rte-select') {
              const type = child.getAttribute('type') || '';
@@ -621,15 +671,43 @@ private ensureAtLeastOneParagraph() {
   private updateContent() {
     if (!this.editorEl) return;
     this.ensureAtLeastOneParagraph();
-    this.content = this.editorEl.innerHTML;
-
-    // live preview on the authored node (kept in place)
+  
+    // Clone content for safe manipulation
+    const clone = this.editorEl.cloneNode(true) as HTMLElement;
+  
+    // Walk the original DOM and the clone in parallel
+    const origWalker = document.createTreeWalker(this.editorEl, NodeFilter.SHOW_ELEMENT);
+    const cloneWalker = document.createTreeWalker(clone, NodeFilter.SHOW_ELEMENT);
+  
+    while (origWalker.nextNode() && cloneWalker.nextNode()) {
+      const origEl = origWalker.currentNode as HTMLElement;
+      const cloneEl = cloneWalker.currentNode as HTMLElement;
+      const computed = window.getComputedStyle(origEl);
+  
+      // Dump *all* computed styles into a single inline style attribute
+      const cssText = Array.from(computed)
+        .map(prop => `${prop}:${computed.getPropertyValue(prop)}`)
+        .join(';');
+  
+      cloneEl.setAttribute('style', cssText);
+    }
+  
+    // Store the fully inlined HTML
+    this.content = clone.innerHTML;
+  
+    // Live preview updates
     if (this.previewEl) this.previewEl.innerHTML = this.content;
-
+  
+    // Emit event with full inline styles
     this.dispatchEvent(new CustomEvent('content-changed', {
-      detail: { content: this.content }, bubbles: true, composed: true
+      detail: { content: this.content },
+      bubbles: true,
+      composed: true
     }));
   }
+  
+  
+  
 }
 
 declare global {

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

@@ -103,39 +103,261 @@ export function closestBlock(node: Node | null, root: HTMLElement): HTMLElement
     surroundInline(range, 'span', { style: `font-family:${family}` });
   }
 
-export function setBackColor(rootEl: HTMLElement, color: string) {
+ 
+function enclosingStyledSpan(
+  editor: HTMLElement,
+  node: Node | null,
+  dataAttr: 'data-rte-color' | 'data-rte-bg'
+): HTMLSpanElement | null {
+  while (node && node !== editor) {
+    if (node instanceof HTMLSpanElement && node.hasAttribute(dataAttr)) {
+      return node;
+    }
+    node = node.parentNode;
+  }
+  return null;
+}
+
+ 
+function applyInlineStyle(
+  editor: HTMLElement,
+  cssProp: 'color' | 'backgroundColor',
+  value: string,
+  dataAttr: 'data-rte-color' | 'data-rte-bg'
+) {
   const sel = window.getSelection();
   if (!sel || sel.rangeCount === 0) return;
-  const range = sel.getRangeAt(0);
-  if (!rootEl.contains(range.commonAncestorContainer) || range.collapsed) return;
-
-  const span = document.createElement('span');
-  span.style.backgroundColor = color;
-  span.appendChild(range.extractContents());
-  range.insertNode(span);
-  const after = document.createRange();
-  after.setStartAfter(span);
-  after.collapse(true);
-  sel.removeAllRanges();
-  sel.addRange(after);
-}
+  const r0 = sel.getRangeAt(0);
+  if (!editor.contains(r0.commonAncestorContainer)) return;
 
-  
-  export function setForeColor(root: HTMLElement, color: string) {
-    const sel = document.getSelection(); if (!sel || sel.rangeCount === 0) return;
-    const range = sel.getRangeAt(0);
-    if (range.collapsed) {
-      const span = document.createElement('span');
-      span.style.color = color;
-      span.appendChild(document.createTextNode('\u200b'));
-      range.insertNode(span);
-      const r = document.createRange(); r.setStart(span.firstChild!, 1); r.collapse(true);
-      sel.removeAllRanges(); sel.addRange(r);
+  const range = r0.cloneRange();
+
+   
+  if (range.collapsed) {
+    const enclosing = enclosingStyledSpan(editor, range.startContainer, dataAttr);
+    if (enclosing) {
+      (enclosing.style as any)[cssProp] = value;
+      mergeAdjacentStyledSpans(editor, dataAttr, cssProp);
       return;
     }
-    surroundInline(range, 'span', { style: `color:${color}` });
+
+    const s = document.createElement('span');
+    s.setAttribute(dataAttr, '1');
+    (s.style as any)[cssProp] = value;
+    s.appendChild(document.createTextNode('\u200B'));  
+    range.insertNode(s);
+
+  
+    const caret = document.createRange();
+    caret.setStart(s.firstChild!, 1);
+    caret.collapse(true);
+    sel.removeAllRanges(); sel.addRange(caret);
+
+    mergeAdjacentStyledSpans(editor, dataAttr, cssProp);
+    return;
   }
+
+ 
+  const leftEdge = enclosingStyledSpan(editor, range.startContainer, dataAttr);
+  const rightEdge = enclosingStyledSpan(editor, range.endContainer, dataAttr);
+  if (leftEdge && leftEdge === rightEdge) {
+   
+    if (rangeCoversWholeNode(range, leftEdge)) {
+      (leftEdge.style as any)[cssProp] = value;
+    } else {
+     
+      const mid = splitAndRecolorWithinSpan(
+        leftEdge,
+        range,
+        dataAttr,
+        cssProp,
+        value
+      );
   
+ 
+      const sel = window.getSelection();
+      const r = document.createRange();
+      r.selectNodeContents(mid);
+      sel?.removeAllRanges();
+      sel?.addRange(r);
+    }
+    mergeAdjacentStyledSpans(editor, dataAttr, cssProp);
+    return;
+  }
+
+  
+  const commonEl = (() => {
+    let n: Node | null = range.commonAncestorContainer;
+    while (n && !(n instanceof HTMLElement)) n = n.parentNode;
+    return n as HTMLElement | null;
+  })();
+
+  const walker = document.createTreeWalker(
+    commonEl || editor,
+    NodeFilter.SHOW_TEXT,
+    {
+      acceptNode: (n) => {
+        if (!n.nodeValue || !n.nodeValue.trim()) return NodeFilter.FILTER_REJECT;
+        const nodeRange = document.createRange();
+        nodeRange.selectNodeContents(n);
+        const intersects =
+          range.compareBoundaryPoints(Range.END_TO_START, nodeRange) < 0 &&
+          range.compareBoundaryPoints(Range.START_TO_END, nodeRange) > 0;
+        return intersects ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
+      }
+    }
+  );
+
+  const toProcess: Text[] = [];
+  let t: Node | null;
+  while ((t = walker.nextNode())) toProcess.push(t as Text);
+
+  toProcess.forEach((text) => {
+    
+    let start = 0, end = text.length;
+    if (text === range.startContainer) start = range.startOffset;
+    if (text === range.endContainer)   end   = range.endOffset;
+    if (start > 0) text = text.splitText(start);
+    if (end   < text.length) text.splitText(end);
+
+    // If this slice already sits in a styled span → update it, don’t nest.
+    const existing = enclosingStyledSpan(editor, text, dataAttr);
+    if (existing) {
+      (existing.style as any)[cssProp] = value;
+      return;
+    }
+
+    // Create a new, single-purpose span
+    const span = document.createElement('span');
+    span.setAttribute(dataAttr, '1');
+    (span.style as any)[cssProp] = value;
+    const parent = text.parentElement!;
+    parent.replaceChild(span, text);
+    span.appendChild(text);
+  });
+
+  mergeAdjacentStyledSpans(editor, dataAttr, cssProp);
+
+  // restore selection
+  sel.removeAllRanges(); sel.addRange(range);
+}
+
+ // Is the range covering the entire node's contents?
+function rangeCoversWholeNode(range: Range, node: Node): boolean {
+  const all = document.createRange();
+  all.selectNodeContents(node);
+  return (
+    range.compareBoundaryPoints(Range.START_TO_START, all) <= 0 &&
+    range.compareBoundaryPoints(Range.END_TO_END, all) >= 0
+  );
+}
+
+function hasRangeContent(r: Range): boolean {
+  if (r.collapsed) return false;
+  const text = r.cloneContents().textContent || '';
+  return text.length > 0;
+}
+
+// Split one styled span into [left][middle][right]; recolor only middle
+function splitAndRecolorWithinSpan(
+  span: HTMLSpanElement,
+  range: Range,
+  dataAttr: 'data-rte-color' | 'data-rte-bg',
+  cssProp: 'color' | 'backgroundColor',
+  newValue: string
+): HTMLSpanElement {
+  const oldValue = (span.style as any)[cssProp];
+
+  const left = document.createRange();
+  left.setStart(span, 0);
+  left.setEnd(range.startContainer, range.startOffset);
+
+  const right = document.createRange();
+  right.setStart(range.endContainer, range.endOffset);
+  right.setEnd(span, span.childNodes.length);
+
+  // Build replacement fragment
+  const frag = document.createDocumentFragment();
+
+  // helper to make a styled clone shell
+  const makeShell = (val: string) => {
+    const s = document.createElement('span');
+    s.setAttribute(dataAttr, '1');
+    (s.style as any)[cssProp] = val;
+    return s;
+  };
+
+  if (hasRangeContent(left)) {
+    const sLeft = makeShell(oldValue);
+    sLeft.appendChild(left.cloneContents());
+    frag.appendChild(sLeft);
+  }
+
+  const mid = makeShell(newValue);
+  mid.appendChild(range.cloneContents());
+  frag.appendChild(mid);
+
+  if (hasRangeContent(right)) {
+    const sRight = makeShell(oldValue);
+    sRight.appendChild(right.cloneContents());
+    frag.appendChild(sRight);
+  }
+
+  // Replace original span
+  span.replaceWith(frag);
+  return mid; // return the middle span so caller can restore selection
+}
+
+
+function mergeAdjacentStyledSpans(
+  root: HTMLElement,
+  dataAttr: 'data-rte-color' | 'data-rte-bg',
+  cssProp: 'color' | 'backgroundColor'
+) {
+  const spans = Array.from(root.querySelectorAll<HTMLSpanElement>(`span[${dataAttr}]`));
+
+  const valOf = (el: HTMLElement) => (el.style as any)[cssProp];
+
+  spans.forEach((s) => {
+ 
+    const nested = Array.from(s.querySelectorAll<HTMLSpanElement>(`span[${dataAttr}]`));
+    nested.forEach((child) => {
+      if (valOf(child) === valOf(s)) {
+        while (child.firstChild) s.insertBefore(child.firstChild, child);
+        child.remove();
+      }
+    });
+
+    
+    const prev = s.previousSibling;
+    if (prev instanceof HTMLSpanElement &&
+        prev.hasAttribute(dataAttr) &&
+        valOf(prev) === valOf(s)) {
+      while (s.firstChild) prev.appendChild(s.firstChild);
+      s.remove();
+      return; // s is gone, next checks not needed
+    }
+
+    // 3) Merge with next sibling if identical
+    const next = s.nextSibling;
+    if (next instanceof HTMLSpanElement &&
+        next.hasAttribute(dataAttr) &&
+        valOf(next) === valOf(s)) {
+      while (next.firstChild) s.appendChild(next.firstChild);
+      next.remove();
+    }
+  });
+}
+
+
+export function setForeColor(editor: HTMLElement, hex: string) {
+  applyInlineStyle(editor, 'color', hex, 'data-rte-color');
+}
+export function setBackColor(editor: HTMLElement, hex: string) {
+  applyInlineStyle(editor, 'backgroundColor', hex, 'data-rte-bg');
+}
+
+
   export function toggleList(root: HTMLElement, kind: 'ul'|'ol') {
     const sel = document.getSelection(); if (!sel || sel.rangeCount === 0) return;
     const range = sel.getRangeAt(0);

package/vscode-html-custom-data.json

@@ -2820,7 +2820,7 @@
     },
     {
       "name": "nile-rich-text-editor",
-      "description": "Events:\n\n  * `content-changed` {`CustomEvent<{ content: string; }>`} - \n\nAttributes:\n\n  * `value` {`string`} - Initial HTML content\n\n  * `mentions` - Optional mentions config (can also be on <nile-rte-mentions mentions=\"...\">)\n\nProperties:\n\n  * `value` {`string`} - Initial HTML content\n\n  * `mentions` - Optional mentions config (can also be on <nile-rte-mentions mentions=\"...\">)\n\n  * `content` {`string`} - \n\n  * `editorEl` {`HTMLElement`} - \n\n  * `previewEl` {`HTMLElement | null`} - \n\n  * `toolbarEl` {`HTMLElement | null`} - \n\n  * `lastRange` {`Range | null`} - \n\n  * `buttonMap` {`Map<string, HTMLElement[]>`} - \n\n  * `headingSelect` {`HTMLSelectElement | null`} - \n\n  * `fontSelect` {`HTMLSelectElement | null`} - \n\n  * `colorInput` {`HTMLInputElement | null`} - \n\n  * `bgColorInput` {`HTMLInputElement | null`} - \n\n  * `colorSwatchEl` {`HTMLElement | null`} - \n\n  * `bgSwatchEl` {`HTMLElement | null`} - \n\n  * `mentionsEl` {`HTMLElement | null`} - \n\n  * `onSelectionChange` - ",
+      "description": "Events:\n\n  * `content-changed` {`CustomEvent<{ content: string; }>`} - \n\nAttributes:\n\n  * `value` {`string`} - Initial HTML content\n\n  * `mentions` - Optional mentions config (can also be on <nile-rte-mentions mentions=\"...\">)\n\nProperties:\n\n  * `value` {`string`} - Initial HTML content\n\n  * `mentions` - Optional mentions config (can also be on <nile-rte-mentions mentions=\"...\">)\n\n  * `content` {`string`} - \n\n  * `editorEl` {`HTMLElement`} - \n\n  * `previewEl` {`HTMLElement | null`} - \n\n  * `toolbarEl` {`HTMLElement | null`} - \n\n  * `lastRange` {`Range | null`} - \n\n  * `buttonMap` {`Map<string, HTMLElement[]>`} - \n\n  * `headingSelect` {`HTMLSelectElement | null`} - \n\n  * `fontSelect` {`HTMLSelectElement | null`} - \n\n  * `colorInput` {`HTMLInputElement | null`} - \n\n  * `bgColorInput` {`HTMLInputElement | null`} - \n\n  * `colorSwatchEl` {`HTMLElement | null`} - \n\n  * `bgSwatchEl` {`HTMLElement | null`} - \n\n  * `mentionsEl` {`HTMLElement | null`} - \n\n  * `onEditorKeydown` - \n\n  * `onSelectionChange` - ",
       "attributes": [
         {
           "name": "value",