autumnnote 1.8.0 → 1.8.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "autumnnote",
-  "version": "1.8.0",
+  "version": "1.8.2",
   "description": "WYSIWYG rich-text editor built with vanilla JavaScript — zero dependencies, no jQuery. Dark mode, @mention, markdown shortcuts, bubble toolbar. React and Vue 3 wrappers included.",
   "main": "dist/autumnnote.umd.js",
   "module": "dist/autumnnote.es.js",
@@ -78,7 +78,7 @@
     "rtl",
     "autosave"
   ],
-  "homepage": "https://cmm-cmm.github.io/Autumn-Note/",
+  "homepage": "https://autumn.konexforge.com/",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/cmm-cmm/Autumn-Note.git"

package/src/js/core/markdown.js

@@ -89,7 +89,16 @@ function _domToMd(node, depth = 0) {
       const items = Array.from(el.querySelectorAll(':scope > li'));
       if (!items.length) return inner();
       const indent = '  '.repeat(depth);
-      const lines = items.map((li) => `${indent}- ${_domToMd(li, depth + 1).trim()}`).join('\n');
+      const isChecklist = el.classList.contains('an-checklist');
+      const lines = items.map((li) => {
+        let prefix = '- ';
+        if (isChecklist) {
+          const cb = /** @type {HTMLInputElement | null} */ (li.querySelector('input[type="checkbox"]'));
+          const checked = cb ? cb.checked : false;
+          prefix = checked ? '- [x] ' : '- [ ] ';
+        }
+        return `${indent}${prefix}${_domToMd(li, depth + 1).trim()}`;
+      }).join('\n');
       return depth === 0 ? `\n\n${lines}\n\n` : `\n${lines}`;
     }
     case 'ol': {
@@ -130,7 +139,7 @@ function _domToMd(node, depth = 0) {
  * @returns {boolean} `true` if any Markdown-like pattern is present, `false` otherwise.
  */
 export function isMarkdown(text) {
-  return /^#{1,6} \S|^\s*[-*+] \S|^\s*\d+\. \S|^> \S|^```|^\*{2}.+?\*{2}/m.test(text);
+  return /^#{1,6} [^\s]|^[ \t]*[-*+] [^\s]|^[ \t]*\d+\. [^\s]|^> [^\s]|^```|^\*{2}[^*\n]+\*{2}/m.test(text);
 }
 
 /**
@@ -189,14 +198,31 @@ export function markdownToHTML(text) {
       continue;
     }
 
-    // ---- Unordered list  - / * / + item  ------------------------------------
+    // ---- Checklist or Unordered list  - / * / + item  ----------------------
     if (/^[-*+] /.test(line)) {
       const items = [];
+      const isChecklist = /^[-*+]\s+\[[ xX]\]\s+/.test(line);
+      const listTag = isChecklist ? 'ul class="an-checklist"' : 'ul';
       while (i < lines.length && /^[-*+] /.test(lines[i])) {
-        items.push(`<li>${_inline(lines[i].slice(2))}</li>`);
+        const nextLineIsChecklist = /^[-*+]\s+\[[ xX]\]\s+/.test(lines[i]);
+        if (nextLineIsChecklist !== isChecklist) {
+          break;
+        }
+        const itemLine = lines[i];
+        const content = itemLine.slice(2);
+        if (isChecklist) {
+          const cbMatch = /^\[([ xX])\][ \t]+/.exec(content);
+          const checked = cbMatch?.[1]?.toLowerCase() === 'x';
+          const checkedAttr = checked ? ' checked' : '';
+          const cbHtml = `<input type="checkbox" contenteditable="false"${checkedAttr}>`;
+          const textContent = cbMatch ? content.slice(cbMatch[0].length) : content;
+          items.push(`<li>${cbHtml}${_inline(textContent)}</li>`);
+        } else {
+          items.push(`<li>${_inline(content)}</li>`);
+        }
         i++;
       }
-      out.push(`<ul>${items.join('')}</ul>`);
+      out.push(`<${listTag}>${items.join('')}</${listTag.split(' ')[0]}>`);
       continue;
     }
 
@@ -290,7 +316,7 @@ function _inline(text) {
   text = text.replace(/\*([^*\n]+?)\*/g, (_, c) => `<em>${_esc(c)}</em>`);
   text = text.replace(/_([^_\n]+?)_/g,   (_, c) => `<em>${_esc(c)}</em>`);
   // Strikethrough  ~~text~~
-  text = text.replace(/~~([^\n]+?)~~/g, (_, c) => `<del>${_esc(c)}</del>`);
+  text = text.replace(/~~([^~\n]+?)~~/g, (_, c) => `<del>${_esc(c)}</del>`);
   // Inline code  `code`
   text = text.replace(/`([^`]+)`/g, (_, c) => `<code>${_esc(c)}</code>`);
   return text;

package/src/js/editing/Style.js

@@ -294,14 +294,99 @@ function _checklistItemToP(checkLi) {
 }
 
 /**
- * Inserts an unordered list or converts selection.
+ * Inserts an unordered (bulleted) list, or converts the current list to `<ul>`.
+ *
+ * When the cursor is already inside a list, direct DOM manipulation is used to
+ * transition between list types — `execCommand` alone cannot handle checklist →
+ * UL/OL conversions because it has no awareness of the `an-checklist` class or
+ * the checkbox `<input>` elements.
+ *
+ * Transition paths:
+ * - **Checklist → UL**: strips `an-checklist` class and all checkbox inputs;
+ *   converts `<ol>` container to `<ul>` via `changeTagName()` if needed.
+ * - **OL → UL**: swaps the container tag via `changeTagName()`.
+ * - **UL → paragraphs**: falls back to `execCommand('insertUnorderedList')`
+ *   which toggles the list off (browser-native behaviour).
+ * - **No list → UL**: falls back to `execCommand('insertUnorderedList')`.
+ */
+/**
+ * Helper to get the closest ul/ol element containing the current selection.
+ * @returns {Element|null}
+ */
+function getSelectedList() {
+  const sel = globalThis.getSelection();
+  if (!sel?.rangeCount) return null;
+  let container = sel.getRangeAt(0).commonAncestorContainer;
+  if (container.nodeType === 3) container = container.parentElement;
+  return /** @type {Element|null} */ (container)?.closest('ul, ol') || null;
+}
+
+/**
+ * Strips the checklist class and checkbox inputs from a list element.
+ * @param {Element} listEl
  */
-export const insertUnorderedList = () => execCommand('insertUnorderedList');
+function stripChecklist(listEl) {
+  listEl.classList.remove('an-checklist');
+  listEl.querySelectorAll('input[type="checkbox"]').forEach(cb => cb.remove());
+}
+
+export function insertUnorderedList() {
+  const listEl = getSelectedList();
+  if (listEl) {
+    if (listEl.classList.contains('an-checklist')) {
+      // Checklist → UL: strip checkboxes and class, swap tag if needed
+      stripChecklist(listEl);
+      if (listEl.tagName === 'OL') {
+        changeTagName(listEl, 'ul');
+      }
+    } else if (listEl.tagName === 'OL') {
+      // OL → UL: swap container tag
+      changeTagName(listEl, 'ul');
+    } else {
+      // Already UL → toggle off via execCommand
+      execCommand('insertUnorderedList');
+    }
+  } else {
+    // Not in a list → create new UL via execCommand
+    execCommand('insertUnorderedList');
+  }
+}
 
 /**
- * Inserts an ordered list or converts selection.
+ * Inserts an ordered (numbered) list, or converts the current list to `<ol>`.
+ *
+ * When the cursor is already inside a list, direct DOM manipulation is used to
+ * transition between list types — `execCommand` alone cannot handle checklist →
+ * UL/OL conversions because it has no awareness of the `an-checklist` class or
+ * the checkbox `<input>` elements.
+ *
+ * Transition paths:
+ * - **Checklist → OL**: strips `an-checklist` class and all checkbox inputs;
+ *   converts container to `<ol>` via `changeTagName()`.
+ * - **UL → OL**: swaps the container tag via `changeTagName()`.
+ * - **OL → paragraphs**: falls back to `execCommand('insertOrderedList')`
+ *   which toggles the list off (browser-native behaviour).
+ * - **No list → OL**: falls back to `execCommand('insertOrderedList')`.
  */
-export const insertOrderedList = () => execCommand('insertOrderedList');
+export function insertOrderedList() {
+  const listEl = getSelectedList();
+  if (listEl) {
+    if (listEl.classList.contains('an-checklist')) {
+      // Checklist → OL: strip checkboxes and class, swap to <ol>
+      stripChecklist(listEl);
+      changeTagName(listEl, 'ol');
+    } else if (listEl.tagName === 'UL') {
+      // UL → OL: swap container tag
+      changeTagName(listEl, 'ol');
+    } else {
+      // Already OL → toggle off via execCommand
+      execCommand('insertOrderedList');
+    }
+  } else {
+    // Not in a list → create new OL via execCommand
+    execCommand('insertOrderedList');
+  }
+}
 
 // ---------------------------------------------------------------------------
 // Line-height helper
@@ -490,19 +575,42 @@ export function isInlineCode() {
 // Checklist (task list)
 // ---------------------------------------------------------------------------
 
+/**
+ * Changes the tag name of an element in the DOM while preserving attributes and children.
+ * @param {Element} el
+ * @param {string} newTagName
+ * @returns {HTMLElement}
+ */
+function changeTagName(el, newTagName) {
+  const newEl = document.createElement(newTagName);
+  for (const attr of el.attributes) {
+    newEl.setAttribute(attr.name, attr.value);
+  }
+  while (el.firstChild) {
+    newEl.appendChild(el.firstChild);
+  }
+  el.parentNode.replaceChild(newEl, el);
+  return newEl;
+}
+
+/**
+ * Ensures all list items under the list element have a checkbox.
+ * @param {Element} listEl
+ */
+function ensureCheckboxes(listEl) {
+  listEl.querySelectorAll('li').forEach(li => {
+    const existingCb = li.querySelector('input[type="checkbox"]');
+    if (!existingCb) {
+      const cb = document.createElement('input');
+      cb.type = 'checkbox';
+      cb.contentEditable = 'false';
+      li.insertBefore(cb, li.firstChild);
+    }
+  });
+}
+
 /**
  * Toggle a checklist at the current selection or caret.
- *
- * When the selection is inside an existing checklist `<ul class="an-checklist">`,
- * converts the selected `<li>` items back into `<p>` paragraphs and places the caret
- * at the start of the first converted paragraph. Otherwise creates a checklist:
- * - If the selection is collapsed, converts the nearest block-level ancestor (or inserts
- *   a single checklist item at the editable root) into a checklist with one item containing
- *   that block's text and places the caret inside the new item.
- * - If the selection is a range, converts each intersecting block element into one checklist
- *   item (preserving textual content) and places the caret at the end of the last item.
- *
- * Empty or whitespace-only selections do not create a checklist.
  */
 export function toggleChecklist() {
   const sel = globalThis.getSelection();
@@ -511,162 +619,183 @@ export function toggleChecklist() {
   let container = range.commonAncestorContainer;
   if (container.nodeType === 3) container = container.parentElement;
 
-  const ul = /** @type {Element|null} */ (container)?.closest('.an-checklist');
-  if (ul) {
-    // If selection covers multiple <li>, convert them all
-    const selectedLis = Array.from(ul.querySelectorAll('li')).filter((li) =>
-      sel.containsNode(li, true),
-    );
-    if (selectedLis.length > 0) {
-      /** @type {HTMLElement|null} */ let firstP = null;
-      selectedLis.forEach((li) => {
-        const p = document.createElement('p');
-        for (const child of li.childNodes) {
-          if (child.nodeType === 1 && /** @type {Element} */ (child).tagName === 'INPUT') continue;
-          p.appendChild(child.cloneNode(true));
-        }
-        p.innerHTML = p.innerHTML.replaceAll('\u200b', '');
-        if (!p.hasChildNodes() || !p.textContent.trim()) {
-          p.innerHTML = '';
-          p.appendChild(document.createTextNode('\u00a0'));
+  const listEl = /** @type {Element|null} */ (container)?.closest('ul, ol');
+  if (listEl) {
+    if (listEl.classList.contains('an-checklist')) {
+      // Transition from Checklist to Paragraphs (Toggle off checklist entirely)
+      const parent = listEl.parentNode;
+      if (parent) {
+        const lis = Array.from(listEl.children);
+        let /** @type {HTMLParagraphElement|null} */ firstP = null;
+        lis.forEach(li => {
+          const p = document.createElement('p');
+          for (const child of li.childNodes) {
+            if (child.nodeType === 1 && /** @type {Element} */ (child).tagName === 'INPUT') continue;
+            p.appendChild(child.cloneNode(true));
+          }
+          p.innerHTML = p.innerHTML.replaceAll('\u200b', '').replaceAll('\u200B', '');
+          if (!p.hasChildNodes() || !p.textContent.trim()) {
+            p.innerHTML = '';
+            p.appendChild(document.createTextNode('\u00a0'));
+          }
+          listEl.before(p);
+          if (!firstP) firstP = p;
+        });
+        listEl.remove();
+        
+        if (firstP) {
+          const nr = document.createRange();
+          nr.setStart(firstP.firstChild || firstP, 0);
+          nr.collapse(true);
+          sel.removeAllRanges();
+          sel.addRange(nr);
         }
-        ul.parentNode.insertBefore(p, ul);
-        if (!firstP) firstP = p;
-        li.remove();
-      });
-      if (ul.children.length === 0) ul.remove();
-      // Move caret to first converted paragraph
-      if (firstP) {
+      }
+    } else {
+      // Transition from standard UL/OL to Checklist
+      const targetUl = changeTagName(listEl, 'ul');
+      targetUl.classList.add('an-checklist');
+      ensureCheckboxes(targetUl);
+      
+      // Place caret inside the first LI
+      const firstLi = targetUl.querySelector('li');
+      if (firstLi) {
         const nr = document.createRange();
-        nr.setStart(firstP.firstChild || firstP, 0);
-        nr.collapse(true);
+        nr.selectNodeContents(firstLi);
+        nr.collapse(false);
         sel.removeAllRanges();
         sel.addRange(nr);
       }
-      return;
     }
-  }
+  } else {
+    // Selection is not in a list: build the checklist directly via DOM
+    // manipulation. execCommand('insertUnorderedList') is intentionally
+    // avoided here — its behaviour on collapsed/empty selections and
+    // non-standard blocks (e.g. <section>) is too inconsistent across
+    // browsers (and a no-op in jsdom), which left toggleChecklist() as a
+    // silent no-op in those cases.
+    // The editable root itself is a <div> and must never be treated as a
+    // "block" to convert/replace/remove — otherwise selections that include
+    // raw text nodes sitting directly inside it (e.g. the first line typed
+    // into an empty editor) would destroy the .an-editable element.
+    const editableRoot = /** @type {Element|null} */ (container)?.closest('[contenteditable="true"]');
+    const isCollapsed = range.collapsed;
+    if (isCollapsed) {
+      // Find the nearest block-level ancestor (p, div, li, h1-h6, blockquote,
+      // etc.) and convert it into a single checklist item.
+      const BLOCK_TAGS = new Set(['P', 'DIV', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'BLOCKQUOTE', 'LI']);
+      let block = /** @type {Element|null} */ (container);
+      while (block?.parentNode && block !== editableRoot && !BLOCK_TAGS.has(block.tagName)) {
+        block = /** @type {Element|null} */ (block.parentNode);
+      }
+      if (block === editableRoot) block = null;
+      // Fallback: if no block element found (e.g. cursor directly in editable
+      // root), insert a fresh item with a zero-width-space so the cursor ends
+      // up inside it.
+      const itemText = (block && BLOCK_TAGS.has(block.tagName))
+        ? Array.from(block.childNodes)
+            .map((n) => n.textContent)
+            .join('')
+            .replaceAll('\u00a0', ' ')
+        : '';
+
+      const newUl = document.createElement('ul');
+      newUl.className = 'an-checklist';
+      const li = document.createElement('li');
+      const checkbox = document.createElement('input');
+      checkbox.type = 'checkbox';
+      checkbox.contentEditable = 'false';
+      li.appendChild(checkbox);
+      li.appendChild(document.createTextNode(itemText || '\u200B'));
+      newUl.appendChild(li);
+
+      if (block && BLOCK_TAGS.has(block.tagName)) {
+        block.parentNode.replaceChild(newUl, block);
+      } else {
+        // Cursor directly in editable root — insert via Range API.
+        const nativeRange = sel.getRangeAt(0);
+        nativeRange.deleteContents();
+        nativeRange.insertNode(newUl);
+      }
 
-  // Otherwise: insert new checklist from selected text (or current block when collapsed).
-  const isCollapsed = range.collapsed;
-  if (isCollapsed) {
-    // Find the nearest block-level ancestor (p, div, li, h1-h6, blockquote, etc.)
-    // and convert it into a single checklist item.
-    const BLOCK_TAGS = new Set(['P', 'DIV', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'BLOCKQUOTE', 'LI']);
-    let block = /** @type {Element|null} */ (container);
-    while (block?.parentNode && !BLOCK_TAGS.has(block.tagName)) {
-      block = /** @type {Element|null} */ (block.parentNode);
-    }
-    // Fallback: if no block element found (e.g. cursor directly in editable root), use the
-    // insertion approach with a zero-width-space item so the cursor ends up inside.
-    const itemText = (block && BLOCK_TAGS.has(block.tagName))
-      ? Array.from(block.childNodes)
-          .map((n) => n.textContent)
-          .join('')
-          .replaceAll('\u00a0', ' ')
-      : '';
-
-    const ul = document.createElement('ul');
-    ul.className = 'an-checklist';
-    const li = document.createElement('li');
-    const checkbox = document.createElement('input');
-    checkbox.type = 'checkbox';
-    checkbox.contentEditable = 'false';
-    li.appendChild(checkbox);
-    li.appendChild(document.createTextNode(itemText || '\u200B'));
-    ul.appendChild(li);
-
-    if (block && BLOCK_TAGS.has(block.tagName)) {
-      block.parentNode.replaceChild(ul, block);
-    } else {
-      // Cursor directly in editable root — insert via Range API
-      const nativeRange = sel.getRangeAt(0);
-      nativeRange.deleteContents();
-      nativeRange.insertNode(ul);
+      // Move caret to the text node inside the new <li>.
+      const textNode = li.lastChild;
+      const nr = document.createRange();
+      const offset = textNode.nodeType === Node.TEXT_NODE ? textNode.textContent.length : 0;
+      nr.setStart(textNode, offset);
+      nr.collapse(true);
+      sel.removeAllRanges();
+      sel.addRange(nr);
+      return;
     }
 
-    // Move caret to the text node inside the new <li>
-    const textNode = li.lastChild;
-    const nr = document.createRange();
-    const offset = textNode.nodeType === Node.TEXT_NODE ? textNode.textContent.length : 0;
-    nr.setStart(textNode, offset);
-    nr.collapse(true);
-    sel.removeAllRanges();
-    sel.addRange(nr);
-    return;
-  }
-
-  // G-4: Non-collapsed, non-checklist selection — convert each intersected
-  // block element into a checklist item using direct DOM manipulation.
-  // execCommand('insertHTML') is avoided here because in modern browsers it
-  // deletes the selection but may silently fail to insert when the selection
-  // spans multiple block elements, causing text to disappear.
-
-  // Guard: if the raw selection is entirely whitespace, do nothing (mirrors
-  // the old line-filter behaviour that prevented empty checklist creation).
-  const rawSelText = sel.toString().replace(/[\u00a0\u200B]/g, ' ').trim();
-  if (!rawSelText) return;
-
-  const BLOCK_TAGS_MULTI = new Set(['P', 'DIV', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'BLOCKQUOTE', 'PRE', 'LI']);
-
-  // Collect block-level ancestors of every node in the selection, in order.
-  const blocks = [];
-  const seenBlocks = new Set();
-  const commonAncestor = range.commonAncestorContainer;
-  const iter = document.createNodeIterator(
-    commonAncestor.nodeType === Node.TEXT_NODE ? commonAncestor.parentNode : commonAncestor,
-    NodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT,
-    null,
-  );
-  let node;
-  while ((node = iter.nextNode())) {
-    if (!range.intersectsNode(node)) continue;
-    let block = /** @type {Element|null} */ (node.nodeType === Node.TEXT_NODE ? node.parentElement : node);
-    while (block && !BLOCK_TAGS_MULTI.has(block.tagName)) {
-      block = block.parentElement;
-    }
-    if (block && !seenBlocks.has(block)) {
-      seenBlocks.add(block);
-      blocks.push(block);
+    // Non-collapsed selection — convert each intersected block element into
+    // a checklist item using direct DOM manipulation.
+    const rawSelText = sel.toString().replace(/[\u00a0\u200B]/g, ' ').trim();
+    if (!rawSelText) return;
+
+    const BLOCK_TAGS_MULTI = new Set(['P', 'DIV', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'BLOCKQUOTE', 'PRE', 'LI']);
+
+    // Collect block-level ancestors of every node in the selection, in order.
+    const blocks = [];
+    const seenBlocks = new Set();
+    const commonAncestor = range.commonAncestorContainer;
+    const iter = document.createNodeIterator(
+      commonAncestor.nodeType === Node.TEXT_NODE ? commonAncestor.parentNode : commonAncestor,
+      NodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT,
+      null,
+    );
+    let node;
+    while ((node = iter.nextNode())) {
+      if (!range.intersectsNode(node)) continue;
+      let blockEl = /** @type {Element|null} */ (node.nodeType === Node.TEXT_NODE ? node.parentElement : node);
+      while (blockEl && blockEl !== editableRoot && !BLOCK_TAGS_MULTI.has(blockEl.tagName)) {
+        blockEl = blockEl.parentElement;
+      }
+      if (blockEl === editableRoot) blockEl = null;
+      if (blockEl && !seenBlocks.has(blockEl)) {
+        seenBlocks.add(blockEl);
+        blocks.push(blockEl);
+      }
     }
-  }
-
-  if (blocks.length === 0) return;
-
-  // Build checklist and replace collected blocks.
-  const newUl = document.createElement('ul');
-  newUl.className = 'an-checklist';
-  /** @type {Text|null} */ let lastTextNode = null;
-  blocks.forEach((block) => {
-    const li = document.createElement('li');
-    const cb = document.createElement('input');
-    cb.type = 'checkbox';
-    cb.setAttribute('contenteditable', 'false');
-    li.appendChild(cb);
-    // Preserve plain text content; ZWS/NBSP are stripped for display.
-    const blockText = Array.from(block.childNodes)
-      .map((n) => n.textContent)
-      .join('')
-      .replace(/[\u00a0\u200B]/g, ' ')
-      .trim();
-    const tn = document.createTextNode(blockText || '\u200B');
-    li.appendChild(tn);
-    newUl.appendChild(li);
-    lastTextNode = tn;
-  });
 
-  // Insert the new list before the first block, then remove all source blocks.
-  const firstBlock = blocks[0];
-  firstBlock.parentNode.insertBefore(newUl, firstBlock);
-  blocks.forEach((block) => block.remove());
+    if (blocks.length === 0) return;
 
-  // Move caret to end of the last checklist item.
-  if (lastTextNode) {
-    const nr = document.createRange();
-    nr.setStart(lastTextNode, lastTextNode.textContent.length);
-    nr.collapse(true);
-    sel.removeAllRanges();
-    sel.addRange(nr);
+    // Build checklist and replace collected blocks.
+    const newUl = document.createElement('ul');
+    newUl.className = 'an-checklist';
+    /** @type {Text|null} */ let lastTextNode = null;
+    blocks.forEach((block) => {
+      const li = document.createElement('li');
+      const cb = document.createElement('input');
+      cb.type = 'checkbox';
+      cb.contentEditable = 'false';
+      li.appendChild(cb);
+      // Preserve plain text content; ZWS/NBSP are stripped for display.
+      const blockText = Array.from(block.childNodes)
+        .map((n) => n.textContent)
+        .join('')
+        .replace(/[\u00a0\u200B]/g, ' ')
+        .trim();
+      const tn = document.createTextNode(blockText || '\u200B');
+      li.appendChild(tn);
+      newUl.appendChild(li);
+      lastTextNode = tn;
+    });
+
+    // Insert the new list before the first block, then remove all source blocks.
+    const firstBlock = blocks[0];
+    firstBlock.parentNode.insertBefore(newUl, firstBlock);
+    blocks.forEach((block) => block.remove());
+
+    // Move caret to end of the last checklist item.
+    if (lastTextNode) {
+      const nr = document.createRange();
+      nr.setStart(lastTextNode, lastTextNode.textContent.length);
+      nr.collapse(true);
+      sel.removeAllRanges();
+      sel.addRange(nr);
+    }
   }
 }
 

package/src/js/editing/Table.js

@@ -59,7 +59,11 @@ export function insertTable(cols, rows, opts = {}) {
   const sel = globalThis.getSelection();
   if (!sel || sel.rangeCount === 0) return;
   const range = sel.getRangeAt(0);
-  range.deleteContents();
+  try {
+    range.deleteContents();
+  } catch (_) {
+    return;
+  }
 
   // Walk up to find the nearest block-level ancestor to insert after
   const BLOCK = new Set(['P', 'DIV', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'BLOCKQUOTE', 'LI', 'PRE']);
@@ -82,7 +86,11 @@ export function insertTable(cols, rows, opts = {}) {
       anchor.remove();
     }
   } else {
-    range.insertNode(table);
+    try {
+      range.insertNode(table);
+    } catch (_) {
+      return;
+    }
   }
 
   // Place cursor in the first cell

package/src/js/editing/Typing.js

@@ -17,6 +17,25 @@ const _FA_PATTERN = /\bfa-/;
 const isFAIcon = (n) => !!(n?.nodeName === 'I' && _FA_PATTERN.test(n.className || ''));
 const isZwsAnchor = (n) => !!(n?.nodeType === Node.TEXT_NODE && (n.textContent === '\u200B' || n.textContent === ''));
 
+/**
+ * Extracts the content from `startContainer:startOffset` to the end of `li`.
+ * Returns an empty fragment if the range is invalid (e.g. detached node).
+ * @param {Range} nativeRange
+ * @param {Element} li
+ * @returns {DocumentFragment}
+ */
+function extractAfterContent(nativeRange, li) {
+  try {
+    const r = document.createRange();
+    r.setStart(nativeRange.startContainer, nativeRange.startOffset);
+    r.setEnd(li, li.childNodes.length);
+    return r.extractContents();
+  } catch (_) {
+    void _;
+    return document.createDocumentFragment();
+  }
+}
+
 /**
  * Handles special keydown behaviour inside the editor.
  * @param {KeyboardEvent} event
@@ -312,16 +331,14 @@ export function handleKeydown(event, editable, options = {}) {
       if (!nativeRange.collapsed) {
         nativeRange.deleteContents();
         // nativeRange is now collapsed at the deletion point; re-read it
+        if (sel.rangeCount === 0 || !checkLi.isConnected) return true;
         nativeRange = sel.getRangeAt(0);
       }
 
       // 3. Extract everything from cursor to end of li into afterFrag.
       //    Use startContainer/startOffset (cursor position after potential delete),
       //    NOT endContainer/endOffset which is wrong for non-collapsed ranges.
-      const afterRange = document.createRange();
-      afterRange.setStart(nativeRange.startContainer, nativeRange.startOffset);
-      afterRange.setEnd(checkLi, checkLi.childNodes.length);
-      const afterFrag = afterRange.extractContents();
+      const afterFrag = extractAfterContent(nativeRange, checkLi);
 
       // 4. Build the new checklist item with the extracted "after" content.
       const newLi = document.createElement('li');