@aquera/nile-elements 1.2.1-beta-1.0 → 1.2.1-beta-1.1

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

@@ -21,7 +21,7 @@ import {
   setForeColor,
   setBackColor,
   toggleList,
-} from './utils';
+} from './utils/index';
 
 import { styles } from './nile-rich-text-editor.css';
 
@@ -48,6 +48,7 @@ export class NileRichTextEditor extends LitElement {
   }
 
   @property({ type: String, attribute: true, reflect: true }) value = '';
+  @property({ type: Boolean, attribute: true, reflect: true }) noStyles = false;
   @property({ type: Boolean, attribute: 'singlelineeditor', reflect: true }) singleLineEditor =
     false;
 
@@ -494,7 +495,15 @@ export class NileRichTextEditor extends LitElement {
     this.editorEl?.focus();
     this.restoreSelection();
   }
-
+  private getCleanContent(): string {
+    const clone = this.editorEl.cloneNode(true) as HTMLElement;
+    clone.querySelectorAll<HTMLElement>('*').forEach(el => {
+      el.removeAttribute('style');
+    });
+  
+    return clone.innerHTML;
+  }
+  
   private insertList(type: 'ul' | 'ol') {
     this.restoreSelection();
     if (!this.lastRange) return;
@@ -772,53 +781,56 @@ export class NileRichTextEditor extends LitElement {
   private updateContent() {
     if (!this.editorEl) return;
     this.ensureAtLeastOneParagraph();
-
     const clone = this.editorEl.cloneNode(true) as HTMLElement;
-
-    const origWalker = document.createTreeWalker(
-      this.editorEl,
-      NodeFilter.SHOW_ELEMENT
-    );
-    const cloneWalker = document.createTreeWalker(
-      clone,
-      NodeFilter.SHOW_ELEMENT
-    );
-
-    const importantProps = [
-      'font-weight',
-      'font-style',
-      'text-decoration',
-      'color',
-      'background-color',
-      'font-size',
-      'font-family',
-      'text-align',
-      'line-height',
-      'letter-spacing',
-      'white-space',
-      'vertical-align',
-      'list-style-position',
-      'padding-inline-start',
-    ];
-
-    while (origWalker.nextNode() && cloneWalker.nextNode()) {
-      const origEl = origWalker.currentNode as HTMLElement;
-      const cloneEl = cloneWalker.currentNode as HTMLElement;
-      const computed = window.getComputedStyle(origEl);
-
-      const cssText = importantProps
-        .map(prop => `${prop}:${computed.getPropertyValue(prop)}`)
-        .join(';');
-
-      if (cssText.trim()) {
-        cloneEl.setAttribute('style', cssText);
+  
+    if (!this.noStyles) {
+      const origWalker = document.createTreeWalker(
+        this.editorEl,
+        NodeFilter.SHOW_ELEMENT
+      );
+      const cloneWalker = document.createTreeWalker(
+        clone,
+        NodeFilter.SHOW_ELEMENT
+      );
+  
+      const importantProps = [
+        'font-weight',
+        'font-style',
+        'text-decoration',
+        'color',
+        'background-color',
+        'font-size',
+        'font-family',
+        'text-align',
+        'line-height',
+        'letter-spacing',
+        'white-space',
+        'vertical-align',
+        'list-style-position',
+        'padding-inline-start',
+      ];
+  
+      while (origWalker.nextNode() && cloneWalker.nextNode()) {
+        const origEl = origWalker.currentNode as HTMLElement;
+        const cloneEl = cloneWalker.currentNode as HTMLElement;
+        const computed = window.getComputedStyle(origEl);
+  
+        const cssText = importantProps
+          .map(prop => `${prop}:${computed.getPropertyValue(prop)}`)
+          .join(';');
+  
+        if (cssText.trim()) {
+          cloneEl.setAttribute('style', cssText);
+        }
       }
+    } else {
+      clone.querySelectorAll<HTMLElement>('[style]').forEach(el =>
+        el.removeAttribute('style')
+      );
     }
-
-    this.content = clone.innerHTML;
-
+    this.content = clone.innerHTML;  
     if (this.previewEl) this.previewEl.innerHTML = this.content;
-
+  
     this.dispatchEvent(
       new CustomEvent('nile-change', {
         detail: { content: this.content },
@@ -827,6 +839,7 @@ export class NileRichTextEditor extends LitElement {
       })
     );
   }
+  
 }
 
 declare global {

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

@@ -325,10 +325,7 @@ export class NileRteMentions extends LitElement {
     sel.removeAllRanges();
     sel.addRange(this.lastRange);
   }
-  private focusAndRestore() {
-    this.editorEl?.focus();
-    this.restoreSelection();
-  }
+ 
 
   private getCaretClientRect(): DOMRect | null {
     const sel = document.getSelection();
@@ -358,19 +355,55 @@ export class NileRteMentions extends LitElement {
   }
 
   private onEditorInput = () => {
-    if (this.mentionOpen) this.handleMention();
+    
+    if (this.mentionOpen) {
+      this.handleMention();
+      return;
+    }
+    const sel = window.getSelection();
+    if (!sel || !sel.anchorNode) return;
+  
+    let node: Node | null = sel.anchorNode;
+    if (node.nodeType !== Node.TEXT_NODE && node.firstChild?.nodeType === Node.TEXT_NODE) {
+      node = node.firstChild;
+    }
+  
+    if (!node || node.nodeType !== Node.TEXT_NODE) return;
+  
+    const text = node.textContent || '';
+    const cfg = this.config;
+  
+    
+    for (const trigger of Object.keys(cfg)) {
+      const triggerIndex = text.lastIndexOf(trigger);
+      if (triggerIndex !== -1) {
+        const caretPos = sel.focusOffset;
+        if (caretPos >= triggerIndex + trigger.length && caretPos <= triggerIndex + trigger.length + 1) {
+          this.openMention(trigger);
+          return;
+        }
+      }
+    }
   };
+  
+  
 
   private onEditorKeyUp = (e: KeyboardEvent) => {
     this.saveSelection();
     const key = e.key;
     const cfg = this.config;
-    if (!this.mentionOpen && key && cfg[key]) {
+    if (key && cfg[key]) {
+      if (this.mentionOpen && this.mentionTrigger !== key) {
+        this.closeMention();
+      }
       this.openMention(key);
       return;
     }
-    if (this.mentionOpen) this.handleMention();
+    if (this.mentionOpen) {
+      this.handleMention();
+    }
   };
+  
 
   private onEditorKeyDown = (e: KeyboardEvent) => {
     if (!this.mentionOpen) return;

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

@@ -0,0 +1,79 @@
+export function closestBlock(
+  node: Node | null,
+  root: HTMLElement
+): HTMLElement | null {
+  while (node && node !== root) {
+    if (node instanceof HTMLElement) {
+      const display = getComputedStyle(node).display;
+      if (
+        node.tagName.match(/^(P|DIV|H1|H2|H3|H4|H5|H6|LI)$/) ||
+        display === 'block' ||
+        display === 'list-item'
+      ) {
+        return node;
+      }
+    }
+    node = node?.parentNode || null;
+  }
+  return root;
+}
+
+export function setBlockTag(root: HTMLElement, tag: 'p' | 'h1' | 'h2' | 'h3') {
+  const sel = document.getSelection();
+  if (!sel || sel.rangeCount === 0) return;
+  const range = sel.getRangeAt(0);
+  const block = closestBlock(range.startContainer, root);
+  if (!block) return;
+  if (block.tagName.toLowerCase() === tag) return;
+  const nb = document.createElement(tag);
+  while (block.firstChild) nb.appendChild(block.firstChild);
+  block.replaceWith(nb);
+  const r = document.createRange();
+  r.selectNodeContents(nb);
+  r.collapse(true);
+  sel.removeAllRanges();
+  sel.addRange(r);
+}
+export function setAlignment(root: HTMLElement, alignment: string) {
+  const selection = window.getSelection();
+  if (!selection || selection.rangeCount === 0) return;
+
+  const range = selection.getRangeAt(0);
+  const commonAncestor = range.commonAncestorContainer;
+  const blocks: HTMLElement[] = [];
+  const walker = document.createTreeWalker(
+    commonAncestor,
+    NodeFilter.SHOW_ELEMENT,
+    {
+      acceptNode: node => {
+        const el = node as HTMLElement;
+        if (
+          range.intersectsNode(el) &&
+          /^(P|DIV|LI|H[1-6])$/.test(el.tagName)
+        ) {
+          return NodeFilter.FILTER_ACCEPT;
+        }
+        return NodeFilter.FILTER_SKIP;
+      },
+    }
+  );
+
+  let node = walker.nextNode();
+  while (node) {
+    blocks.push(node as HTMLElement);
+    node = walker.nextNode();
+  }
+
+  if (blocks.length === 0) {
+    const block = closestBlock(selection.focusNode, root);
+    if (block) blocks.push(block);
+  }
+  blocks.forEach(block => {
+    block.style.textAlign = alignment;
+  });
+}
+
+export function nearestElement(n: Node | null): HTMLElement | null {
+  while (n && !(n instanceof HTMLElement)) n = n.parentNode as Node | null;
+  return n as HTMLElement | null;
+}

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

@@ -0,0 +1,251 @@
+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');
+}
+
+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 r0 = sel.getRangeAt(0);
+  if (!editor.contains(r0.commonAncestorContainer)) return;
+
+  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;
+    }
+
+    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);
+
+    const existing = enclosingStyledSpan(editor, text, dataAttr);
+    if (existing) {
+      (existing.style as any)[cssProp] = value;
+      return;
+    }
+
+    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
+  );
+}
+
+// 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);
+  }
+
+  span.replaceWith(frag);
+  return mid;
+}
+
+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;
+    }
+
+    const next = s.nextSibling;
+    if (
+      next instanceof HTMLSpanElement &&
+      next.hasAttribute(dataAttr) &&
+      valOf(next) === valOf(s)
+    ) {
+      while (next.firstChild) s.appendChild(next.firstChild);
+      next.remove();
+    }
+  });
+}
+
+function hasRangeContent(r: Range): boolean {
+  if (r.collapsed) return false;
+  const text = r.cloneContents().textContent || '';
+  return text.length > 0;
+}

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

@@ -0,0 +1,5 @@
+export * from './block-utils';
+export * from './inline-utils';
+export * from './color-utils';
+export * from './list-utils';
+export * from './link-utils';