autumnnote 1.0.6 → 1.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "autumnnote",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "A modern, lightweight WYSIWYG editor — built with vanilla JavaScript, no jQuery required.",
   "main": "dist/autumnnote.umd.js",
   "module": "dist/autumnnote.es.js",
@@ -45,9 +45,10 @@
   "license": "MIT",
   "devDependencies": {
     "@vitest/browser": "^4.1.2",
+    "@vitest/coverage-v8": "^4.1.2",
     "cross-env": "^10.1.0",
     "eslint": "^10.2.0",
-    "jsdom": "^29.0.1",
+    "jsdom": "^25.0.1",
     "rollup-plugin-visualizer": "^7.0.1",
     "sass": "^1.99.0",
     "typescript": "^6.0.2",

package/src/js/Context.js

@@ -444,9 +444,15 @@ export class Context {
     if (disabled) {
       editable.setAttribute('contenteditable', 'false');
       this.layoutInfo.container.classList.add('an-disabled');
+      editable.querySelectorAll('ul.an-checklist input[type="checkbox"]').forEach((cb) => {
+        cb.setAttribute('disabled', '');
+      });
     } else {
       editable.setAttribute('contenteditable', 'true');
       this.layoutInfo.container.classList.remove('an-disabled');
+      editable.querySelectorAll('ul.an-checklist input[type="checkbox"]').forEach((cb) => {
+        cb.removeAttribute('disabled');
+      });
     }
   }
 

package/src/js/core/sanitise.js

@@ -6,7 +6,7 @@
  */
 
 /** Tags that are unconditionally removed from editor content. */
-const PROHIBITED_TAGS = ['script', 'style', 'iframe', 'object', 'embed', 'form', 'input', 'button'];
+const PROHIBITED_TAGS = ['script', 'style', 'iframe', 'object', 'embed', 'form', 'button'];
 
 /** Attributes whose values must be sanitised as URLs. */
 const URL_ATTRS = ['href', 'src', 'action', 'formaction'];
@@ -26,7 +26,8 @@ const TRUSTED_IFRAME_HOSTS = new Set([
  * Uses DOMParser so the sanitisation follows normal browser parsing rules —
  * no regex shortcuts that can be bypassed by encoding tricks.
  *
- * - Strips PROHIBITED_TAGS (script, style, iframe, object, embed, form, input, button)
+ * - Strips PROHIBITED_TAGS (script, style, iframe, object, embed, form, button)
+ * - Allows input[type="checkbox"] only inside ul.an-checklist li; removes all other <input>
  * - Removes all on* event-handler attributes
  * - Rejects javascript: and vbscript: URLs in URL attributes
  * - Rejects data: URIs everywhere except img[src] (base64 uploads)
@@ -81,6 +82,23 @@ export function sanitiseHTML(html, { allowIframes = false } = {}) {
     });
   });
 
+  // Allow only input[type="checkbox"] inside ul.an-checklist li; strip everything else.
+  // This preserves checklist state while blocking arbitrary <input> injection.
+  doc.querySelectorAll('input').forEach((el) => {
+    const inChecklist = el.closest('ul.an-checklist') !== null &&
+                        el.closest('li') !== null;
+    if (!inChecklist || el.getAttribute('type') !== 'checkbox') {
+      el.remove();
+    } else {
+      // Harden: keep only safe attributes on checklist checkboxes
+      Array.from(el.attributes).forEach((attr) => {
+        if (!['type', 'checked', 'contenteditable'].includes(attr.name)) {
+          el.removeAttribute(attr.name);
+        }
+      });
+    }
+  });
+
   return doc.body.innerHTML;
 }
 

package/src/js/editing/Style.js

@@ -60,8 +60,29 @@ export function underline() {
 
 /**
  * Strikethrough / removes strikethrough.
+ * Falls back to manual DOM manipulation inside nested formats where
+ * execCommand's state detection is unreliable (mirrors underline() logic).
  */
-export const strikethrough = () => execCommand('strikeThrough');
+export function strikethrough() {
+  const sel = window.getSelection();
+  if (!sel || !sel.rangeCount) return;
+  // Use startContainer for consistent detection across collapsed and range
+  // selections — commonAncestorContainer can miss ancestor <s>/<strike> tags
+  // when the selection spans across nested inline elements.
+  let sc = sel.getRangeAt(0).startContainer;
+  if (sc.nodeType === 3) sc = sc.parentElement;
+  const sEl = sc && sc.closest && (sc.closest('s') || sc.closest('strike'));
+  const nativeState = document.queryCommandState('strikeThrough');
+  if (sEl && !nativeState) {
+    // Browser doesn’t recognise the strikethrough state (e.g. inside <code>
+    // or deeply nested inline formats). Manually unwrap the <s>/<strike>.
+    const parent = sEl.parentNode;
+    while (sEl.firstChild) parent.insertBefore(sEl.firstChild, sEl);
+    parent.removeChild(sEl);
+    return;
+  }
+  execCommand('strikeThrough');
+}
 
 /**
  * Superscript toggle.
@@ -98,15 +119,65 @@ export const fontName = (name) => execCommand('fontName', name);
  * @param {HTMLElement} [editable] - scoping element to avoid touching nodes outside this editor
  */
 export function fontSize(size, editable = document) {
-  execCommand('fontSize', '7'); // placeholder
-  // Replace font elements with spans, scoped to the active editable
-  editable.querySelectorAll('font[size="7"]').forEach((el) => {
+  const sel = window.getSelection();
+  const wasCollapsed = !sel || !sel.rangeCount || sel.getRangeAt(0).collapsed;
+
+  // B-I-3/4: For a collapsed (caret) selection the browser's execCommand
+  // 'fontSize' leaves an internal "pending" state of size-7 (=48px) instead of
+  // creating a <font> element, so the very next typed character comes out at
+  // 48px. Fix: bypass execCommand entirely for collapsed selections and directly
+  // insert a span with the requested size, placing the cursor inside it.
+  // Only applies when there IS an active selection (sel.rangeCount > 0); when
+  // there is no selection at all (e.g. jsdom unit tests) fall through to the
+  // execCommand path so the font-replacement logic still runs.
+  if (wasCollapsed && sel && sel.rangeCount > 0) {
+    try {
+      const range = sel.getRangeAt(0);
+      const span = document.createElement('span');
+      span.style.fontSize = size;
+      const zwsNode = document.createTextNode('\u200B');
+      span.appendChild(zwsNode);
+      range.insertNode(span);
+      const nr = document.createRange();
+      nr.setStart(zwsNode, zwsNode.textContent.length);
+      nr.collapse(true);
+      sel.removeAllRanges();
+      sel.addRange(nr);
+    } catch (_) { /* ignore range errors on unusual DOM structures */ }
+    return;
+  }
+
+  // Non-collapsed selection (or no selection — handles jsdom test setup where
+  // <font size="7"> elements are injected directly without a live selection):
+  // use execCommand placeholder approach then replace <font> with <span>.
+  execCommand('fontSize', '7');
+  const scope = editable instanceof HTMLElement ? editable : document;
+  const newSpans = [];
+  scope.querySelectorAll('font[size="7"]').forEach((el) => {
     const span = document.createElement('span');
     span.style.fontSize = size;
     el.parentNode.insertBefore(span, el);
     while (el.firstChild) span.appendChild(el.firstChild);
     el.parentNode.removeChild(el);
+    newSpans.push(span);
   });
+
+  // Re-select all replaced content so toolbar getValue() reads the new size
+  // (B-I-1/2: without this re-selection the toolbar dropdown stays on the old
+  // value until the next selectionchange event).
+  if (!wasCollapsed && sel && newSpans.length > 0) {
+    const first = newSpans[0];
+    const last  = newSpans[newSpans.length - 1];
+    try {
+      const nr = document.createRange();
+      const startNode = first.firstChild || first;
+      const endNode   = last.lastChild  || last;
+      nr.setStart(startNode, 0);
+      nr.setEnd(endNode, endNode.nodeType === Node.TEXT_NODE ? endNode.textContent.length : endNode.childNodes.length);
+      sel.removeAllRanges();
+      sel.addRange(nr);
+    } catch (_) { /* ignore range errors on unusual DOM structures */ }
+  }
 }
 
 // ---------------------------------------------------------------------------
@@ -146,8 +217,69 @@ export const indent = () => execCommand('indent');
 
 /**
  * Outdents the list or block.
+ * G.5: When cursor is inside a checklist item, "outdent" means converting
+ * that item back to a regular <p> element rather than calling execCommand
+ * (which would destroy the ul > li checklist structure).
  */
-export const outdent = () => execCommand('outdent');
+export function outdent() {
+  const sel = window.getSelection();
+  if (sel && sel.rangeCount) {
+    let container = sel.getRangeAt(0).commonAncestorContainer;
+    if (container.nodeType === 3) container = container.parentElement;
+    const checkLi = container && container.closest && container.closest('.an-checklist li');
+    if (checkLi) {
+      _checklistItemToP(checkLi);
+      return;
+    }
+  }
+  execCommand('outdent');
+}
+
+/**
+ * G.5 helper: splits a checklist at checkLi, converts it to a <p>,
+ * and keeps items before/after as separate checklists.
+ * @param {HTMLElement} checkLi
+ */
+function _checklistItemToP(checkLi) {
+  const checkUl = checkLi.closest('.an-checklist');
+  if (!checkUl) return;
+
+  const allLis  = Array.from(checkUl.children);
+  const liIndex = allLis.indexOf(checkLi);
+  const afterLis = allLis.slice(liIndex + 1);
+
+  // Build <p> from the item's text (skip the checkbox INPUT)
+  const p = document.createElement('p');
+  const text = Array.from(checkLi.childNodes)
+    .filter(n => !(n.nodeType === 1 && n.tagName === 'INPUT'))
+    .map(n => n.textContent).join('').replace(/\u200B/g, '').trim();
+  p.textContent = text || '\u00a0';
+
+  // Move items after the current li into a new checklist
+  if (afterLis.length > 0) {
+    const newUl = document.createElement('ul');
+    newUl.className = 'an-checklist';
+    afterLis.forEach(li => newUl.appendChild(li));
+    checkUl.parentNode.insertBefore(newUl, checkUl.nextSibling);
+  }
+
+  // Insert <p> after checkUl (before any newUl)
+  checkUl.parentNode.insertBefore(p, checkUl.nextSibling);
+
+  // Remove current li from checkUl; delete checkUl if now empty
+  checkUl.removeChild(checkLi);
+  if (checkUl.children.length === 0) checkUl.parentNode.removeChild(checkUl);
+
+  // Place caret at start of the new <p>
+  try {
+    const nr = document.createRange();
+    const firstChild = p.firstChild;
+    nr.setStart(firstChild && firstChild.nodeType === 3 ? firstChild : p, 0);
+    nr.collapse(true);
+    const s = window.getSelection();
+    if (s) { s.removeAllRanges(); s.addRange(nr); }
+  } catch {}
+}
 
 /**
  * Inserts an unordered list or converts selection.
@@ -263,11 +395,36 @@ export function toggleInlineCode(editable) {
   if (container.nodeType === 3) container = container.parentElement;
   const codeEl = container && container.closest ? container.closest('code') : null;
   if (codeEl && !codeEl.closest('pre')) {
-    // Unwrap
+    // Unwrap — save range endpoints relative to surrounding text so we can
+    // restore the selection after normalize() merges adjacent text nodes.
     const parent = codeEl.parentNode;
+    // Note the sibling before the code element so we can re-anchor later.
+    const prevSibling = codeEl.previousSibling;
+    const movedChildren = Array.from(codeEl.childNodes);
     while (codeEl.firstChild) parent.insertBefore(codeEl.firstChild, codeEl);
     parent.removeChild(codeEl);
-    if (editable) editable.normalize();
+    // Normalize only the immediate parent to merge adjacent text nodes without
+    // invalidating distant selection anchors (full editable.normalize() can
+    // cause selection offsets to shift, making subsequent format toggles miss).
+    if (parent && parent.normalize) parent.normalize();
+    // Restore selection to the text that was inside the unwrapped <code>.
+    if (movedChildren.length > 0) {
+      try {
+        // After normalize, find the merged text node that contains the content.
+        const firstMoved = movedChildren[0];
+        const lastMoved  = movedChildren[movedChildren.length - 1];
+        const nr = document.createRange();
+        // Use the (possibly merged) live node if still in the DOM.
+        const anchorNode = (firstMoved.parentNode === parent) ? firstMoved : (prevSibling ? prevSibling.nextSibling : parent.firstChild);
+        if (anchorNode) {
+          nr.setStart(anchorNode, 0);
+          const endAnchor = (lastMoved.parentNode === parent) ? lastMoved : anchorNode;
+          nr.setEnd(endAnchor, endAnchor.nodeType === Node.TEXT_NODE ? endAnchor.textContent.length : endAnchor.childNodes.length);
+          sel.removeAllRanges();
+          sel.addRange(nr);
+        }
+      } catch (_) { /* ignore */ }
+    }
   } else {
     if (range.collapsed) return;
     try {
@@ -296,14 +453,17 @@ export function toggleInlineCode(editable) {
 /**
  * Returns true when the cursor / selection is inside an inline <code>
  * (not nested in a <pre>).
+ * Uses startContainer for reliable cross-browser detection regardless of
+ * whether the selection is collapsed or a range (commonAncestorContainer
+ * can behave inconsistently for range selections on some browsers).
  * @returns {boolean}
  */
 export function isInlineCode() {
   const sel = window.getSelection();
   if (!sel || !sel.rangeCount) return false;
-  let container = sel.getRangeAt(0).commonAncestorContainer;
-  if (container.nodeType === 3) container = container.parentElement;
-  const code = container && container.closest ? container.closest('code') : null;
+  let sc = sel.getRangeAt(0).startContainer;
+  if (sc.nodeType === 3) sc = sc.parentElement;
+  const code = sc && sc.closest ? sc.closest('code') : null;
   return !!(code && !code.closest('pre'));
 }
 
@@ -357,21 +517,125 @@ export function toggleChecklist() {
     }
   }
 
-  // Otherwise: insert new checklist from selected text
-  const text = sel.toString();
-  const lines = text.split(/\r?\n/).filter((l) => l.trim().length > 0);
-  if (lines.length === 0) return;
-  const items = lines
-    .map(
-      (l) =>
-        `<li><input type="checkbox" contenteditable="false">${l || '\u200B'}</li>`,
-    )
-    .join('');
-  document.execCommand(
-    'insertHTML',
-    false,
-    `<ul class="an-checklist">${items}</ul>`,
+  // 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 = container;
+    while (block && block.parentNode && !BLOCK_TAGS.has(block.tagName)) {
+      block = 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('')
+          .replace(/\u00a0/g, ' ')
+      : '';
+
+    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 {
+      document.execCommand('insertHTML', false, ul.outerHTML);
+      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 = 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);
+    }
+  }
+
+  if (blocks.length === 0) return;
+
+  // Build checklist and replace collected blocks.
+  const newUl = document.createElement('ul');
+  newUl.className = 'an-checklist';
+  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.parentNode && block.parentNode.removeChild(block));
+
+  // 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/Typing.js

@@ -5,7 +5,7 @@
 
 import { key, isKey } from '../core/key.js';
 import { closestPara, isLi } from '../core/dom.js';
-import { execCommand } from './Style.js';
+import { execCommand, outdent } from './Style.js';
 import { currentRange } from '../core/range.js';
 
 // ---------------------------------------------------------------------------
@@ -199,7 +199,7 @@ export function handleKeydown(event, editable, options = {}) {
     if (para && isLi(para)) {
       event.preventDefault();
       if (event.shiftKey) {
-        execCommand('outdent');
+        outdent();
       } else {
         execCommand('indent');
       }

package/src/js/module/Buttons.js

@@ -59,13 +59,14 @@ export const boldBtn = btn('bold', 'bold', 'Bold (Ctrl+B)', () => Style.bold(),
 export const italicBtn = btn('italic', 'italic', 'Italic (Ctrl+I)', () => Style.italic(), () => document.queryCommandState('italic'));
 export const underlineBtn = btn('underline', 'underline', 'Underline (Ctrl+U)', () => Style.underline(), () => {
   // queryCommandState('underline') is unreliable inside <code> elements;
-  // also check for a <u> ancestor in the DOM.
+  // also check for a <u> ancestor in the DOM using startContainer for
+  // consistent behaviour across both collapsed and range selections.
   if (document.queryCommandState('underline')) return true;
   const sel = window.getSelection();
   if (!sel || !sel.rangeCount) return false;
-  let container = sel.getRangeAt(0).commonAncestorContainer;
-  if (container.nodeType === 3) container = container.parentElement;
-  return !!(container && container.closest && container.closest('u'));
+  let sc = sel.getRangeAt(0).startContainer;
+  if (sc.nodeType === 3) sc = sc.parentElement;
+  return !!(sc && sc.closest && sc.closest('u'));
 });
 export const strikeBtn = btn('strikethrough', 'strikethrough', 'Strikethrough', () => Style.strikethrough(), () => document.queryCommandState('strikeThrough'));
 export const superscriptBtn = btn('superscript', 'superscript', 'Superscript', () => Style.superscript(), () => document.queryCommandState('superscript'));

package/src/js/module/Clipboard.js

@@ -299,9 +299,17 @@ export class Clipboard {
       return;
     }
 
+    // C2: Reject image formats that browsers cannot decode/display.
+    const UNSUPPORTED = ['image/tiff', 'image/x-tiff', 'image/bmp', 'image/x-bmp', 'image/x-ms-bmp'];
     const maxBytes = (this.options.maxImageSize || 5) * 1024 * 1024;
     files.forEach((file) => {
       if (!file || !file.type.startsWith('image/')) return;
+      if (UNSUPPORTED.includes(file.type)) {
+        const message = `Image format "${file.type}" is not supported for display in web browsers. Please convert to PNG, JPEG, or WebP first.`;
+        this.context.triggerEvent('imageError', { file, message });
+        console.warn('[AutumnNote]', message);
+        return;
+      }
       if (file.size > maxBytes) {
         const message = `Image "${file.name}" exceeds the ${this.options.maxImageSize || 5} MB size limit.`;
         this.context.triggerEvent('imageError', { file, message });

package/src/js/module/CodeTooltip.js

@@ -39,6 +39,7 @@ export class CodeTooltip {
 
     this._disposers.push(
       on(editable, 'mouseover', (e) => {
+        if (this.context.layoutInfo.container.classList.contains('an-disabled')) return;
         const pre = e.target.closest('pre');
         if (pre && editable.contains(pre)) {
           this._scheduleShow(pre);