@aquera/nile-elements 0.1.75-beta-1.1 → 0.1.75-beta-2.0

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

@@ -0,0 +1,643 @@
+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 nearestElement(n: Node | null): HTMLElement | null {
+  while (n && !(n instanceof HTMLElement)) n = n.parentNode as Node | null;
+  return n as HTMLElement | null;
+}
+
+export function rgbToHex(rgb: string): string {
+  const m = rgb.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/i);
+  if (!m) return '#000000';
+  const r = Number(m[1]).toString(16).padStart(2, '0');
+  const g = Number(m[2]).toString(16).padStart(2, '0');
+  const b = Number(m[3]).toString(16).padStart(2, '0');
+  return `#${r}${g}${b}`;
+}
+
+export function unwrap(node: HTMLElement) {
+  const p = node.parentNode;
+  if (!p) return;
+  while (node.firstChild) p.insertBefore(node.firstChild, node);
+  p.removeChild(node);
+}
+
+export function surroundInline(
+  range: Range,
+  tag: string,
+  attrs?: Record<string, string>
+) {
+  const wrap = document.createElement(tag);
+  if (attrs) Object.entries(attrs).forEach(([k, v]) => wrap.setAttribute(k, v));
+  try {
+    range.surroundContents(wrap);
+  } catch {
+    const frag = range.extractContents();
+    wrap.appendChild(frag);
+    range.insertNode(wrap);
+  }
+}
+
+function unwrapAllMatching(
+  node: Node,
+  root: HTMLElement,
+  matcher: (el: HTMLElement) => boolean
+) {
+  let n: Node | null = node.parentNode;
+  while (n && n !== root) {
+    if (n instanceof HTMLElement && matcher(n)) {
+      unwrap(n);
+
+      n = node.parentNode;
+      continue;
+    }
+    n = n.parentNode;
+  }
+}
+
+export function toggleInlineTag(
+  root: HTMLElement,
+  tag: 'strong' | 'em' | 'u' | 'span',
+  attrs?: Record<string, string>
+) {
+  const sel = document.getSelection();
+  if (!sel || sel.rangeCount === 0) {
+    return;
+  }
+  const range = sel.getRangeAt(0);
+
+  const aliases: Record<string, string[]> = {
+    strong: ['strong', 'b'],
+    em: ['em', 'i'],
+    u: ['u'],
+    span: ['span'],
+  };
+  const candidates = aliases[tag] ?? [tag];
+
+  function isMatchingInline(el: HTMLElement): boolean {
+    return candidates.includes(el.tagName.toLowerCase());
+  }
+
+  if (range.collapsed) {
+    let n: Node | null = range.startContainer;
+    while (n && n !== root) {
+      if (n instanceof HTMLElement && isMatchingInline(n)) {
+        unwrapAllMatching(range.startContainer, root, isMatchingInline);
+        return;
+      }
+      n = n.parentNode;
+    }
+
+    const elm = document.createElement(tag);
+    if (attrs)
+      Object.entries(attrs).forEach(([k, v]) => elm.setAttribute(k, v));
+    elm.appendChild(document.createTextNode('\u200b'));
+    range.insertNode(elm);
+
+    const r = document.createRange();
+    r.setStart(elm.firstChild!, 1);
+    r.collapse(true);
+    sel.removeAllRanges();
+    sel.addRange(r);
+
+    return;
+  }
+
+  const startBlock = closestBlock(range.startContainer, root);
+  const endBlock = closestBlock(range.endContainer, root);
+  if (startBlock && endBlock && startBlock !== endBlock) {
+    const blocks: HTMLElement[] = [];
+    let node: Node | null = startBlock;
+    while (node) {
+      if (node instanceof HTMLElement) blocks.push(node);
+      if (node === endBlock) break;
+      node = node.nextSibling;
+    }
+
+    blocks.forEach((block, i) => {
+      const r = document.createRange();
+      r.selectNodeContents(block);
+
+      const textNodes: Text[] = [];
+      const tw = document.createTreeWalker(block, NodeFilter.SHOW_TEXT, null);
+      let tn: Node | null;
+      while ((tn = tw.nextNode())) {
+        if (tn.nodeValue?.trim()) textNodes.push(tn as Text);
+      }
+
+      const allWrapped =
+        textNodes.length > 0 &&
+        textNodes.every(txt => {
+          let n: Node | null = txt;
+          while (n && n !== block) {
+            if (n instanceof HTMLElement && isMatchingInline(n)) return true;
+            n = n.parentNode;
+          }
+          return false;
+        });
+
+      if (allWrapped) {
+        textNodes.forEach(txt =>
+          unwrapAllMatching(txt, block, isMatchingInline)
+        );
+      } else {
+        surroundInline(r, tag, attrs);
+      }
+    });
+    return;
+  }
+  const walker = document.createTreeWalker(
+    range.commonAncestorContainer,
+    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 textNodes: Text[] = [];
+  let t: Node | null;
+  while ((t = walker.nextNode())) textNodes.push(t as Text);
+
+  if (textNodes.length === 0) {
+    let n: Node | null = range.startContainer;
+    while (n && n !== root) {
+      if (n instanceof HTMLElement && isMatchingInline(n)) {
+        unwrapAllMatching(range.startContainer, root, isMatchingInline);
+        return;
+      }
+      n = n.parentNode;
+    }
+  }
+
+  const allWrapped =
+    textNodes.length > 0 &&
+    textNodes.every(txt => {
+      let n: Node | null = txt;
+      while (n && n !== root) {
+        if (n instanceof HTMLElement && isMatchingInline(n)) {
+          return true;
+        }
+        n = n.parentNode;
+      }
+      return false;
+    });
+
+  if (allWrapped) {
+    textNodes.forEach(txt => unwrapAllMatching(txt, root, isMatchingInline));
+  } else {
+    surroundInline(range, tag, attrs);
+  }
+
+  // restore selection
+  const selRange = document.createRange();
+  selRange.setStart(range.startContainer, range.startOffset);
+  selRange.setEnd(range.endContainer, range.endOffset);
+  sel.removeAllRanges();
+  sel.addRange(selRange);
+}
+
+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,
+  align: 'left' | 'center' | 'right' | 'justify'
+) {
+  const sel = document.getSelection();
+  if (!sel || sel.rangeCount === 0) return;
+  const range = sel.getRangeAt(0);
+
+  let block = closestBlock(range.startContainer, root);
+  if (!block) return;
+
+  if (block.tagName.toLowerCase() === 'li') {
+    block.style.textAlign = align;
+    const list = block.closest('ul,ol') as HTMLElement | null;
+    if (list) list.style.textAlign = align;
+  } else {
+    block.style.textAlign = align === 'justify' ? 'justify' : align;
+  }
+}
+
+export function setFontFamily(root: HTMLElement, family: 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.fontFamily = family;
+    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);
+    return;
+  }
+  surroundInline(range, 'span', { style: `font-family:${family}` });
+}
+
+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
+  );
+}
+
+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);
+  }
+
+  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();
+    }
+  });
+}
+
+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);
+
+  const blocks: HTMLElement[] = [];
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, {
+    acceptNode: n => {
+      if (!(n instanceof HTMLElement)) return NodeFilter.FILTER_SKIP;
+      if (!/^(P|DIV|LI|H[1-6])$/.test(n.tagName)) return NodeFilter.FILTER_SKIP;
+
+      const r = document.createRange();
+      r.selectNodeContents(n);
+      const intersects =
+        range.compareBoundaryPoints(Range.END_TO_START, r) < 0 &&
+        range.compareBoundaryPoints(Range.START_TO_END, r) > 0;
+      return intersects ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
+    },
+  });
+
+  let n: Node | null;
+  while ((n = walker.nextNode())) {
+    blocks.push(n as HTMLElement);
+  }
+
+  if (blocks.length === 0) {
+    const block = closestBlock(range.startContainer, root);
+    if (block) blocks.push(block);
+  }
+
+  const firstLi = blocks[0].closest('li');
+  if (firstLi) {
+    const currentList = firstLi.closest('ul,ol') as HTMLElement | null;
+    if (!currentList) return;
+
+    if (currentList.tagName.toLowerCase() === kind) {
+      const frag = document.createDocumentFragment();
+      for (const li of Array.from(currentList.querySelectorAll('li'))) {
+        const p = document.createElement('p');
+        while (li.firstChild) p.appendChild(li.firstChild);
+        frag.appendChild(p);
+      }
+      currentList.replaceWith(frag);
+    } else {
+      const newList = document.createElement(kind);
+      while (currentList.firstChild)
+        newList.appendChild(currentList.firstChild);
+      currentList.replaceWith(newList);
+    }
+    return;
+  }
+
+  const newList = document.createElement(kind);
+  for (const block of blocks) {
+    const li = document.createElement('li');
+    while (block.firstChild) li.appendChild(block.firstChild);
+    newList.appendChild(li);
+    block.replaceWith(newList);
+  }
+}
+
+export function insertOrEditLink(root: HTMLElement, href?: string) {
+  const sel = document.getSelection();
+  if (!sel || sel.rangeCount === 0) return;
+  const range = sel.getRangeAt(0);
+
+  let n: Node | null = range.startContainer;
+  let a: HTMLAnchorElement | null = null;
+  while (n && n !== root) {
+    if (n instanceof HTMLAnchorElement) {
+      a = n;
+      break;
+    }
+    n = n.parentNode;
+  }
+
+  const url =
+    href ??
+    (typeof window !== 'undefined'
+      ? window.prompt('Enter URL', a?.href || 'https://') || ''
+      : '');
+  if (!url) return;
+
+  if (a) {
+    a.href = url;
+    return;
+  }
+
+  if (range.collapsed) {
+    const link = document.createElement('a');
+    link.href = url;
+    link.textContent = url;
+    range.insertNode(link);
+    const r = document.createRange();
+    r.setStartAfter(link);
+    r.collapse(true);
+    sel.removeAllRanges();
+    sel.addRange(r);
+    return;
+  }
+
+  const link = document.createElement('a');
+  link.href = url;
+  try {
+    range.surroundContents(link);
+  } catch {
+    const frag = range.extractContents();
+    link.appendChild(frag);
+    range.insertNode(link);
+  }
+}