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

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

@@ -1,643 +0,0 @@
-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);
-  }
-}