@aquera/nile-elements 0.1.67-beta-1.5 → 0.1.67-beta-1.7

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

@@ -1,189 +1,189 @@
 // src/nile-rich-text-editor/utils.ts
 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;
+    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;
     }
-    node = node?.parentNode || null;
+    return root;
   }
-  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);
+  
+  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 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);
-
-  if (range.collapsed) {
-    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;
+  
+  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}`;
   }
-
-  let n: Node | null = range.startContainer;
-  let target: HTMLElement | null = null;
-  while (n && n !== root) {
-    if (n instanceof HTMLElement && n.tagName.toLowerCase() === tag) { target = n; break; }
-    n = n.parentNode;
+  
+  export function unwrap(node: HTMLElement) {
+    const p = node.parentNode; if (!p) return;
+    while (node.firstChild) p.insertBefore(node.firstChild, node);
+    p.removeChild(node);
   }
-  if (target) unwrap(target); else surroundInline(range, tag, attrs);
-}
-
-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);
-  const block = closestBlock(range.startContainer, root); if (!block) return;
-  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);
+  
+  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 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);
+  
+    if (range.collapsed) {
+      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;
+    }
+  
+    let n: Node | null = range.startContainer;
+    let target: HTMLElement | null = null;
+    while (n && n !== root) {
+      if (n instanceof HTMLElement && n.tagName.toLowerCase() === tag) { target = n; break; }
+      n = n.parentNode;
+    }
+    if (target) unwrap(target); else surroundInline(range, tag, attrs);
+  }
+  
+  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);
-    return;
   }
-  surroundInline(range, 'span', { style: `font-family:${family}` });
-}
-
+  
+  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);
+    const block = closestBlock(range.startContainer, root); if (!block) return;
+    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'
+  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;
+  while (node && node !== editor) {
+    if (node instanceof HTMLSpanElement && node.hasAttribute(dataAttr)) {
+      return node;
+    }
+    node = node.parentNode;
   }
-  node = node.parentNode;
-}
-return null;
+  return null;
 }
 
-
+ 
 function applyInlineStyle(
-editor: HTMLElement,
-cssProp: 'color' | 'backgroundColor',
-value: string,
-dataAttr: 'data-rte-color' | 'data-rte-bg'
+  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 sel = window.getSelection();
+  if (!sel || sel.rangeCount === 0) return;
+  const r0 = sel.getRangeAt(0);
+  if (!editor.contains(r0.commonAncestorContainer)) 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 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 caret = document.createRange();
-  caret.setStart(s.firstChild!, 1);
-  caret.collapse(true);
-  sel.removeAllRanges(); sel.addRange(caret);
+    const s = document.createElement('span');
+    s.setAttribute(dataAttr, '1');
+    (s.style as any)[cssProp] = value;
+    s.appendChild(document.createTextNode('\u200B'));  
+    range.insertNode(s);
 
-  mergeAdjacentStyledSpans(editor, dataAttr, cssProp);
-  return;
-}
+  
+    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 leftEdge = enclosingStyledSpan(editor, range.startContainer, dataAttr);
+  const rightEdge = enclosingStyledSpan(editor, range.endContainer, dataAttr);
+  if (leftEdge && leftEdge === rightEdge) {
    
-    const mid = splitAndRecolorWithinSpan(
-      leftEdge,
-      range,
-      dataAttr,
-      cssProp,
-      value
-    );
-
-
-    const sel = window.getSelection();
-    const r = document.createRange();
-    r.selectNodeContents(mid);
-    sel?.removeAllRanges();
-    sel?.addRange(r);
+    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;
   }
-  mergeAdjacentStyledSpans(editor, dataAttr, cssProp);
-  return;
-}
 
   
   const commonEl = (() => {
@@ -192,227 +192,228 @@ if (leftEdge && leftEdge === rightEdge) {
     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 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;
     }
-  }
-);
-
-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);
-});
+    // 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);
+  mergeAdjacentStyledSpans(editor, dataAttr, cssProp);
 
-// restore selection
-sel.removeAllRanges(); sel.addRange(range);
+  // restore selection
+  sel.removeAllRanges(); sel.addRange(range);
 }
 
-// Is the range covering the entire node's contents?
+ // 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
-);
+  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;
+  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
+  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 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);
+  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);
-}
+  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
+  // 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'
+  root: HTMLElement,
+  dataAttr: 'data-rte-color' | 'data-rte-bg',
+  cssProp: 'color' | 'backgroundColor'
 ) {
-const spans = Array.from(root.querySelectorAll<HTMLSpanElement>(`span[${dataAttr}]`));
+  const spans = Array.from(root.querySelectorAll<HTMLSpanElement>(`span[${dataAttr}]`));
 
-const valOf = (el: HTMLElement) => (el.style as any)[cssProp];
+  const valOf = (el: HTMLElement) => (el.style as any)[cssProp];
 
-spans.forEach((s) => {
+  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
+    }
 
-  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();
+    // 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();
     }
   });
-
-  
-  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');
+  applyInlineStyle(editor, 'color', hex, 'data-rte-color');
 }
 export function setBackColor(editor: HTMLElement, hex: string) {
-applyInlineStyle(editor, 'backgroundColor', hex, 'data-rte-bg');
+  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 block = closestBlock(range.startContainer, root); if (!block) return;
-
-  let li = block.closest('li');
-  if (li) {
-    const list = li.closest('ul,ol') as HTMLElement | null;
-    if (!list) return;
-    if (list.tagName.toLowerCase() === kind) {
-      const parent = list.parentElement!;
-      const frag = document.createDocumentFragment();
-      for (const child of Array.from(list.children)) {
-        if (child.tagName.toLowerCase() === 'li') {
-          const p = document.createElement('p');
-          while (child.firstChild) p.appendChild(child.firstChild);
-          frag.appendChild(p);
+  export function toggleList(root: HTMLElement, kind: 'ul'|'ol') {
+    const sel = document.getSelection(); if (!sel || sel.rangeCount === 0) return;
+    const range = sel.getRangeAt(0);
+    const block = closestBlock(range.startContainer, root); if (!block) return;
+  
+    let li = block.closest('li');
+    if (li) {
+      const list = li.closest('ul,ol') as HTMLElement | null;
+      if (!list) return;
+      if (list.tagName.toLowerCase() === kind) {
+        const parent = list.parentElement!;
+        const frag = document.createDocumentFragment();
+        for (const child of Array.from(list.children)) {
+          if (child.tagName.toLowerCase() === 'li') {
+            const p = document.createElement('p');
+            while (child.firstChild) p.appendChild(child.firstChild);
+            frag.appendChild(p);
+          }
         }
+        parent.replaceChild(frag, list);
+      } else {
+        const newList = document.createElement(kind);
+        while (list.firstChild) newList.appendChild(list.firstChild);
+        list.replaceWith(newList);
       }
-      parent.replaceChild(frag, list);
-    } else {
-      const newList = document.createElement(kind);
-      while (list.firstChild) newList.appendChild(list.firstChild);
-      list.replaceWith(newList);
+      return;
     }
-    return;
+  
+    const list = document.createElement(kind);
+    const item = document.createElement('li'); list.appendChild(item);
+    while (block.firstChild) item.appendChild(block.firstChild);
+    block.replaceWith(list);
   }
-
-  const list = document.createElement(kind);
-  const item = document.createElement('li'); list.appendChild(item);
-  while (block.firstChild) item.appendChild(block.firstChild);
-  block.replaceWith(list);
-}
-
-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;
+  
+  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); }
   }
-
-  const link = document.createElement('a'); link.href = url;
-  try { range.surroundContents(link); }
-  catch { const frag = range.extractContents(); link.appendChild(frag); range.insertNode(link); }
-}
+