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

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

@@ -0,0 +1,249 @@
+export function toggleInlineTag(
+  root: HTMLElement,
+  tag: 'strong' | 'em' | 'u' | 'span',
+  attrs?: Record<string, string>
+) {
+  const sel = window.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];
+  const isMatch = (el: HTMLElement) =>
+    candidates.includes(el.tagName.toLowerCase());
+
+  function unwrap(el: HTMLElement) {
+    const p = el.parentNode;
+    if (!p) return;
+    while (el.firstChild) p.insertBefore(el.firstChild, el);
+    p.removeChild(el);
+  }
+
+  function removeEmptyAndNested(root: HTMLElement) {
+    root.querySelectorAll(candidates.join(',')).forEach(el => {
+      if (!el.textContent?.trim()) {
+        el.remove();
+        return;
+      }
+      const nested = Array.from(el.querySelectorAll(candidates.join(',')));
+      nested.forEach(n => {
+        if (n === el) return;
+        while (n.firstChild) el.insertBefore(n.firstChild, n);
+        n.remove();
+      });
+    });
+  }
+
+  function mergeAdjacent(root: HTMLElement) {
+    const list = Array.from(root.querySelectorAll(candidates.join(',')));
+    list.forEach(el => {
+      const next = el.nextSibling;
+      if (next instanceof HTMLElement && isMatch(next)) {
+        while (next.firstChild) el.appendChild(next.firstChild);
+        next.remove();
+      }
+    });
+  }
+  if (range.collapsed) {
+    let inside = false;
+    let n: Node | null = range.startContainer;
+    while (n && n !== root) {
+      if (n instanceof HTMLElement && isMatch(n)) {
+        inside = true;
+        break;
+      }
+      n = n.parentNode;
+    }
+
+    if (inside && n instanceof HTMLElement) {
+      unwrap(n);
+    } else {
+      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);
+      range.setStart(elm.firstChild!, 1);
+      range.collapse(true);
+      sel.removeAllRanges();
+      sel.addRange(range);
+    }
+
+    removeEmptyAndNested(root);
+    mergeAdjacent(root);
+    return;
+  }
+  if (range.startContainer.nodeType === Node.TEXT_NODE)
+    (range.startContainer as Text).splitText(range.startOffset);
+  if (range.endContainer.nodeType === Node.TEXT_NODE)
+    (range.endContainer as Text).splitText(range.endOffset);
+  const walker = document.createTreeWalker(
+    range.commonAncestorContainer,
+    NodeFilter.SHOW_TEXT,
+    {
+      acceptNode: n => {
+        if (!n.nodeValue?.trim()) return NodeFilter.FILTER_REJECT;
+        const r = document.createRange();
+        r.selectNodeContents(n);
+        const inter =
+          range.compareBoundaryPoints(Range.END_TO_START, r) < 0 &&
+          range.compareBoundaryPoints(Range.START_TO_END, r) > 0;
+        return inter ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
+      },
+    }
+  );
+
+  const textNodes: Text[] = [];
+  let tn: Node | null;
+  while ((tn = walker.nextNode())) textNodes.push(tn as Text);
+
+  const allInside =
+    textNodes.length > 0 &&
+    textNodes.every(txt => {
+      let n: Node | null = txt;
+      while (n && n !== root) {
+        if (n instanceof HTMLElement && isMatch(n)) return true;
+        n = n.parentNode;
+      }
+      return false;
+    });
+
+  if (allInside) {
+    const first = textNodes[0];
+    const last = textNodes[textNodes.length - 1];
+    const common = first.parentElement?.closest(tag) as HTMLElement | null;
+    if (common && common.contains(last)) {
+      const parent = common.parentNode;
+      if (parent) {
+        const beforeRange = document.createRange();
+        beforeRange.setStartBefore(common);
+        beforeRange.setEndBefore(first);
+        const before = beforeRange.cloneContents();
+
+        const afterRange = document.createRange();
+        afterRange.setStartAfter(last);
+        afterRange.setEndAfter(common);
+        const after = afterRange.cloneContents();
+
+        const middleRange = document.createRange();
+        middleRange.setStartBefore(first);
+        middleRange.setEndAfter(last);
+        const middle = middleRange.extractContents();
+
+        const frag = document.createDocumentFragment();
+        if (before.childNodes.length) {
+          const b = document.createElement(tag);
+          while (before.firstChild) b.appendChild(before.firstChild);
+          frag.appendChild(b);
+        }
+        while (middle.firstChild) frag.appendChild(middle.firstChild);
+        if (after.childNodes.length) {
+          const a = document.createElement(tag);
+          while (after.firstChild) a.appendChild(after.firstChild);
+          frag.appendChild(a);
+        }
+        parent.insertBefore(frag, common);
+        parent.removeChild(common);
+      }
+    } else {
+      textNodes.forEach(txt => {
+        let n: Node | null = txt;
+        while (n && n !== root) {
+          if (n instanceof HTMLElement && isMatch(n)) {
+            unwrap(n);
+            break;
+          }
+          n = n.parentNode;
+        }
+      });
+    }
+  } else {
+    textNodes.forEach(txt => {
+      const skip = txt.parentElement?.closest('a, .mention, nile-mention');
+      if (skip) return;
+      const wrapper = document.createElement(tag);
+      if (attrs)
+        Object.entries(attrs).forEach(([k, v]) => wrapper.setAttribute(k, v));
+      txt.parentNode?.insertBefore(wrapper, txt);
+      wrapper.appendChild(txt);
+    });
+  }
+
+  removeEmptyAndNested(root);
+  mergeAdjacent(root);
+
+  sel.removeAllRanges();
+  sel.addRange(range);
+}
+
+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);
+  }
+}
+
+export function unwrap(node: HTMLElement) {
+  const p = node.parentNode;
+  if (!p) return;
+  while (node.firstChild) p.insertBefore(node.firstChild, node);
+  p.removeChild(node);
+}
+
+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 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 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}` });
+}

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

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

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

@@ -0,0 +1,147 @@
+export function toggleList(root: HTMLElement, kind: 'ul' | 'ol') {
+  const sel = document.getSelection();
+  if (!sel || sel.rangeCount === 0) return;
+  const range = sel.getRangeAt(0);
+  function styleList(list: HTMLElement) {
+    list.style.paddingInlineStart = '0';
+    list.style.margin = '0';
+  }
+
+  function isEmptyBlock(el: HTMLElement) {
+    return !el.textContent?.trim() && !el.querySelector('img,br');
+  }
+
+  function setCursorInside(el: HTMLElement) {
+    const selection = document.getSelection();
+    if (!selection) return;
+    const r = document.createRange();
+    r.selectNodeContents(el);
+    r.collapse(true);
+    selection.removeAllRanges();
+    selection.addRange(r);
+  }
+
+  function closestBlock(node: Node | null): HTMLElement | null {
+    while (node && node !== root) {
+      if (node instanceof HTMLElement) {
+        const display = getComputedStyle(node).display;
+        if (
+          node.tagName.match(/^(P|DIV|H[1-6]|LI)$/) ||
+          display === 'block' ||
+          display === 'list-item'
+        )
+          return node;
+      }
+      node = node.parentNode;
+    }
+    return null;
+  }
+
+  function unwrapList(list: HTMLElement) {
+    const frag = document.createDocumentFragment();
+    (Array.from(list.querySelectorAll('li')) as HTMLElement[]).forEach(li => {
+      const p = document.createElement('p');
+      if (li.style.textAlign) p.style.textAlign = li.style.textAlign;
+      while (li.firstChild) p.appendChild(li.firstChild);
+      frag.appendChild(p);
+    });
+    list.replaceWith(frag);
+  }
+
+  function unwrapListItem(block: HTMLElement) {
+    const li = block.closest('li');
+    if (!li) return;
+    const list = li.parentElement as HTMLElement;
+    const p = document.createElement('p');
+    if (li.style.textAlign) p.style.textAlign = li.style.textAlign;
+    while (li.firstChild) p.appendChild(li.firstChild);
+    list.parentNode?.insertBefore(p, list.nextSibling);
+    li.remove();
+    if (list.childNodes.length === 0) list.remove();
+    setCursorInside(p);
+  }
+
+  function switchListType(list: HTMLElement, newType: 'ul' | 'ol') {
+    const newList = document.createElement(newType);
+    styleList(newList);
+    while (list.firstChild) newList.appendChild(list.firstChild);
+    list.replaceWith(newList);
+  }
+  if (range.collapsed) {
+    const block = closestBlock(range.startContainer);
+    const insideList = block?.closest('ul,ol') as HTMLElement | null;
+    if (insideList && insideList.tagName.toLowerCase() === kind) {
+      unwrapListItem(block as HTMLElement);
+      return;
+    }
+
+    if (insideList && insideList.tagName.toLowerCase() !== kind) {
+      switchListType(insideList, kind);
+      return;
+    }
+    if (
+      !block ||
+      block === root ||
+      block.childNodes.length === 0 ||
+      isEmptyBlock(block)
+    ) {
+      const list = document.createElement(kind);
+      const li = document.createElement('li');
+      li.appendChild(document.createElement('br'));
+      list.appendChild(li);
+      styleList(list);
+      range.insertNode(list);
+      setCursorInside(li);
+      return;
+    }
+    const list = document.createElement(kind);
+    styleList(list);
+    const li = document.createElement('li');
+    if (block.style.textAlign) li.style.textAlign = block.style.textAlign;
+    while (block.firstChild) li.appendChild(block.firstChild);
+    list.appendChild(li);
+    block.replaceWith(list);
+    setCursorInside(li);
+    return;
+  }
+
+  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);
+    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) unwrapList(currentList);
+    else switchListType(currentList, kind);
+    return;
+  }
+  const newList = document.createElement(kind);
+  styleList(newList);
+  for (const block of blocks) {
+    const li = document.createElement('li');
+    if (block.style.textAlign) li.style.textAlign = block.style.textAlign;
+    while (block.firstChild) li.appendChild(block.firstChild);
+    newList.appendChild(li);
+  }
+  blocks[0].replaceWith(newList);
+  for (let i = 1; i < blocks.length; i++) blocks[i].remove();
+}