@overlap/rte 1.0.15 → 1.0.16

package/dist/index.js

@@ -232,32 +232,6 @@ function findClosestListItem(node) {
         : node;
     return element?.closest("li") || null;
 }
-/**
- * Sets cursor position in a text node after an async DOM update.
- */
-function setCursorInTextNode(textNode, position, editor) {
-    requestAnimationFrame(() => {
-        requestAnimationFrame(() => {
-            try {
-                const range = document.createRange();
-                const maxPos = textNode.textContent?.length || 0;
-                const safePos = Math.min(Math.max(0, position), maxPos);
-                range.setStart(textNode, safePos);
-                range.collapse(true);
-                const selection = window.getSelection();
-                if (selection) {
-                    selection.removeAllRanges();
-                    selection.addRange(range);
-                    if (editor)
-                        editor.focus();
-                }
-            }
-            catch (_) {
-                // Silently fail - cursor positioning is best-effort
-            }
-        });
-    });
-}
 
 /**
  * Pure checkbox utility functions for checkbox lists.
@@ -592,21 +566,39 @@ function useCheckbox({ editorRef, isUpdatingRef, pushToHistory, notifyChange, ge
             }
             return true;
         }
-        // Normal case: create a new checkbox item
+        // Normal case: split content at cursor and create a new checkbox item
+        const afterRange = document.createRange();
+        afterRange.setStart(range.startContainer, range.startOffset);
+        if (listItem.lastChild) {
+            afterRange.setEndAfter(listItem.lastChild);
+        }
+        else {
+            afterRange.setEnd(listItem, listItem.childNodes.length);
+        }
+        const afterFragment = afterRange.extractContents();
         const newLi = document.createElement("li");
         updateListItemChecked(newLi, false);
-        const textNode = document.createTextNode(" ");
-        newLi.appendChild(textNode);
+        const hasContent = afterFragment.textContent?.trim();
+        if (hasContent) {
+            newLi.appendChild(afterFragment);
+        }
+        else {
+            newLi.appendChild(document.createTextNode(" "));
+        }
         if (listItem.nextSibling) {
             checkboxList.insertBefore(newLi, listItem.nextSibling);
         }
         else {
             checkboxList.appendChild(newLi);
         }
+        if (!listItem.firstChild) {
+            listItem.appendChild(document.createTextNode(" "));
+        }
         if (editor)
             ensureAllCheckboxes(editor);
+        const cursorNode = newLi.firstChild || newLi;
         const newRange = document.createRange();
-        newRange.setStart(textNode, 0);
+        newRange.setStart(cursorNode, 0);
         newRange.collapse(true);
         selection.removeAllRanges();
         selection.addRange(newRange);
@@ -638,8 +630,16 @@ function useCheckbox({ editorRef, isUpdatingRef, pushToHistory, notifyChange, ge
             isUpdatingRef.current = false;
             return false;
         }
-        // Already in a checkbox list? Remove it.
-        const existingList = findClosestCheckboxList(element);
+        // Resolve the element at the start of the selection as well,
+        // because when selecting across multiple list items the
+        // commonAncestorContainer is the editor root (above the list).
+        const startNode = range.startContainer;
+        const startElement = startNode.nodeType === Node.TEXT_NODE
+            ? startNode.parentElement
+            : startNode;
+        // Already in a checkbox list? Remove it (convert back to bullet list).
+        const existingList = findClosestCheckboxList(element) ||
+            (startElement ? findClosestCheckboxList(startElement) : null);
         if (existingList) {
             existingList.classList.remove("rte-checkbox-list");
             existingList
@@ -652,48 +652,65 @@ function useCheckbox({ editorRef, isUpdatingRef, pushToHistory, notifyChange, ge
             isUpdatingRef.current = false;
             return true;
         }
-        // Create new checkbox list
-        const ul = document.createElement("ul");
-        ul.classList.add("rte-checkbox-list");
-        const li = document.createElement("li");
-        updateListItemChecked(li, false);
-        const textNode = document.createTextNode(" ");
-        li.appendChild(textNode);
-        ul.appendChild(li);
-        // Find block element to replace
-        const blockElement = element.closest("p, div, h1, h2, h3, h4, h5, h6, blockquote");
-        const isValidBlockElement = blockElement &&
-            blockElement !== editor &&
-            editor.contains(blockElement) &&
-            blockElement.parentElement;
-        if (isValidBlockElement) {
-            const textContent = blockElement.textContent || "";
-            blockElement.parentElement.replaceChild(ul, blockElement);
-            const finalTextNode = li.firstChild;
-            if (finalTextNode) {
-                finalTextNode.textContent = textContent || " ";
-                const cursorPos = textContent ? textContent.length : 0;
-                setCursorInTextNode(finalTextNode, cursorPos, editor);
-            }
+        // Already in a <ul> (bullet list)? Convert in-place to checkbox.
+        const existingUl = element.closest("ul") ||
+            startElement?.closest("ul");
+        if (existingUl && editor.contains(existingUl)) {
+            existingUl.classList.add("rte-checkbox-list");
+            existingUl.querySelectorAll(":scope > li").forEach((li) => {
+                updateListItemChecked(li, false);
+            });
+            ensureAllCheckboxes(editor);
+            isUpdatingRef.current = false;
+            const content = getDomContent();
+            pushToHistory(content);
+            notifyChange(content);
+            return true;
         }
-        else {
-            try {
-                range.deleteContents();
-                range.insertNode(ul);
-                const finalTextNode = li.firstChild;
-                if (finalTextNode) {
-                    setCursorInTextNode(finalTextNode, 0, editor);
-                }
+        // Already in an <ol> (numbered list)? Convert to <ul> first,
+        // then make it a checkbox list.
+        const existingOl = element.closest("ol") ||
+            startElement?.closest("ol");
+        if (existingOl && editor.contains(existingOl)) {
+            const ul = document.createElement("ul");
+            ul.classList.add("rte-checkbox-list");
+            while (existingOl.firstChild) {
+                ul.appendChild(existingOl.firstChild);
             }
-            catch (_) {
-                editor.appendChild(ul);
-                const finalTextNode = li.firstChild;
-                if (finalTextNode) {
-                    setCursorInTextNode(finalTextNode, 0, editor);
-                }
+            existingOl.parentNode?.replaceChild(ul, existingOl);
+            ul.querySelectorAll(":scope > li").forEach((li) => {
+                updateListItemChecked(li, false);
+            });
+            ensureAllCheckboxes(editor);
+            isUpdatingRef.current = false;
+            const content = getDomContent();
+            pushToHistory(content);
+            notifyChange(content);
+            return true;
+        }
+        // Not in any list: use the browser's insertUnorderedList command
+        // to properly handle single paragraphs and multi-paragraph selections,
+        // then convert the resulting <ul> to a checkbox list.
+        if (document.activeElement !== editor) {
+            editor.focus();
+        }
+        document.execCommand("insertUnorderedList", false);
+        // Find the <ul> the cursor is now inside
+        const sel = window.getSelection();
+        if (sel && sel.rangeCount > 0) {
+            const r = sel.getRangeAt(0);
+            const node = r.commonAncestorContainer.nodeType === Node.TEXT_NODE
+                ? r.commonAncestorContainer.parentElement
+                : r.commonAncestorContainer;
+            const newUl = node?.closest("ul");
+            if (newUl && editor.contains(newUl)) {
+                newUl.classList.add("rte-checkbox-list");
+                newUl.querySelectorAll(":scope > li").forEach((li) => {
+                    updateListItemChecked(li, false);
+                });
             }
         }
-        // After insertion: ensure attributes and save to history
+        // Finalize: ensure attributes and save to history
         setTimeout(() => {
             if (!editor)
                 return;
@@ -2656,18 +2673,25 @@ function createBlockFormatPlugin(headings = defaultHeadings$2, blockOptions = {}
             : container;
         if (!element)
             return undefined;
+        // When the selection spans multiple blocks, commonAncestorContainer
+        // may be the editor root. Fall back to startContainer to detect
+        // formats from an element that is actually inside the content.
+        const startNode = range.startContainer;
+        const startEl = startNode.nodeType === Node.TEXT_NODE
+            ? startNode.parentElement
+            : startNode;
         const tagName = element.tagName.toLowerCase();
         if (headings.includes(tagName))
             return tagName;
-        if (element.closest("pre"))
+        if (element.closest("pre") || startEl?.closest("pre"))
             return "code";
-        if (element.closest("blockquote"))
+        if (element.closest("blockquote") || startEl?.closest("blockquote"))
             return "blockquote";
-        if (findClosestCheckboxList(element))
+        if (findClosestCheckboxList(element) || (startEl && findClosestCheckboxList(startEl)))
             return "checkbox-list";
-        if (element.closest("ul"))
+        if (element.closest("ul") || startEl?.closest("ul"))
             return "ul";
-        if (element.closest("ol"))
+        if (element.closest("ol") || startEl?.closest("ol"))
             return "ol";
         if (tagName === "p")
             return "p";
@@ -2703,6 +2727,32 @@ function createBlockFormatPlugin(headings = defaultHeadings$2, blockOptions = {}
                     ? container.parentElement
                     : container;
             };
+            // When the selection spans multiple blocks, commonAncestorContainer
+            // is the editor root. Use startContainer to reach elements inside
+            // the actual selected content.
+            const getStartElement = () => {
+                const sel = editor.getSelection();
+                if (!sel || sel.rangeCount === 0)
+                    return null;
+                const start = sel.getRangeAt(0).startContainer;
+                return start.nodeType === Node.TEXT_NODE
+                    ? start.parentElement
+                    : start;
+            };
+            const stripCheckboxAttributes = (list) => {
+                list.classList.remove("rte-checkbox-list");
+                list.querySelectorAll("li[role='checkbox']").forEach((li) => {
+                    li.removeAttribute("role");
+                    li.removeAttribute("tabIndex");
+                    li.removeAttribute("aria-checked");
+                });
+            };
+            const findCheckboxInSelection = () => {
+                const el = getCursorElement();
+                const startEl = getStartElement();
+                return ((el ? findClosestCheckboxList(el) : null) ||
+                    (startEl ? findClosestCheckboxList(startEl) : null));
+            };
             // Helper: merge all adjacent <pre> elements in the editor into one
             const mergeAdjacentPre = () => {
                 const root = document.activeElement;
@@ -2726,20 +2776,12 @@ function createBlockFormatPlugin(headings = defaultHeadings$2, blockOptions = {}
             // Helper: if cursor is inside a list, remove the list first
             const escapeListIfNeeded = () => {
                 const el = getCursorElement();
-                if (!el)
-                    return;
-                const inCheckbox = findClosestCheckboxList(el);
-                const inUl = el.closest("ul");
-                const inOl = el.closest("ol");
+                const startEl = getStartElement();
+                const inCheckbox = findCheckboxInSelection();
+                const inUl = el?.closest("ul") || startEl?.closest("ul");
+                const inOl = el?.closest("ol") || startEl?.closest("ol");
                 if (inCheckbox) {
-                    inCheckbox.classList.remove("rte-checkbox-list");
-                    inCheckbox
-                        .querySelectorAll("li[role='checkbox']")
-                        .forEach((li) => {
-                        li.removeAttribute("role");
-                        li.removeAttribute("tabIndex");
-                        li.removeAttribute("aria-checked");
-                    });
+                    stripCheckboxAttributes(inCheckbox);
                     editor.executeCommand("insertUnorderedList");
                 }
                 else if (inUl) {
@@ -2750,29 +2792,36 @@ function createBlockFormatPlugin(headings = defaultHeadings$2, blockOptions = {}
                 }
             };
             if (value === "checkbox-list") {
-                const el = getCursorElement();
-                if (!el)
-                    return;
-                const checkboxList = findClosestCheckboxList(el);
+                const checkboxList = findCheckboxInSelection();
                 if (checkboxList) {
-                    checkboxList.classList.remove("rte-checkbox-list");
-                    checkboxList
-                        .querySelectorAll("li[role='checkbox']")
-                        .forEach((li) => {
-                        li.removeAttribute("role");
-                        li.removeAttribute("tabIndex");
-                        li.removeAttribute("aria-checked");
-                    });
+                    stripCheckboxAttributes(checkboxList);
                 }
                 else {
                     editor.executeCommand("insertCheckboxList");
                 }
             }
             else if (value === "ul") {
-                editor.executeCommand("insertUnorderedList");
+                const checkboxList = findCheckboxInSelection();
+                if (checkboxList) {
+                    stripCheckboxAttributes(checkboxList);
+                }
+                else {
+                    editor.executeCommand("insertUnorderedList");
+                }
             }
             else if (value === "ol") {
-                editor.executeCommand("insertOrderedList");
+                const checkboxList = findCheckboxInSelection();
+                if (checkboxList) {
+                    stripCheckboxAttributes(checkboxList);
+                    const ol = document.createElement("ol");
+                    while (checkboxList.firstChild) {
+                        ol.appendChild(checkboxList.firstChild);
+                    }
+                    checkboxList.parentNode?.replaceChild(ol, checkboxList);
+                }
+                else {
+                    editor.executeCommand("insertOrderedList");
+                }
             }
             else if (value === "blockquote") {
                 const el = getCursorElement();
@@ -2812,13 +2861,17 @@ function createBlockFormatPlugin(headings = defaultHeadings$2, blockOptions = {}
                 : container;
             if (!element)
                 return false;
+            const startNode = range.startContainer;
+            const startEl = startNode.nodeType === Node.TEXT_NODE
+                ? startNode.parentElement
+                : startNode;
             const tagName = element.tagName.toLowerCase();
             return (headings.includes(tagName) ||
-                element.closest("pre") !== null ||
-                element.closest("blockquote") !== null ||
-                findClosestCheckboxList(element) !== null ||
-                element.closest("ul") !== null ||
-                element.closest("ol") !== null);
+                element.closest("pre") !== null || startEl?.closest("pre") !== null ||
+                element.closest("blockquote") !== null || startEl?.closest("blockquote") !== null ||
+                findClosestCheckboxList(element) !== null || (startEl != null && findClosestCheckboxList(startEl) !== null) ||
+                element.closest("ul") !== null || startEl?.closest("ul") !== null ||
+                element.closest("ol") !== null || startEl?.closest("ol") !== null);
         },
         canExecute: () => true,
     };