autumnnote 1.0.7 → 1.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "autumnnote",
-  "version": "1.0.7",
+  "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",

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.
@@ -101,8 +122,35 @@ export function fontSize(size, editable = document) {
   const sel = window.getSelection();
   const wasCollapsed = !sel || !sel.rangeCount || sel.getRangeAt(0).collapsed;
 
-  execCommand('fontSize', '7'); // placeholder
-  // Replace font elements with spans, scoped to the active editable
+  // 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) => {
@@ -114,36 +162,20 @@ export function fontSize(size, editable = document) {
     newSpans.push(span);
   });
 
-  // Restore the selection inside the new span(s) so:
-  // 1. The toolbar getValue() correctly reflects the new font size.
-  // 2. For a collapsed (caret) selection, subsequent typing inherits the
-  //    chosen size rather than the browser's stale execCommand state (which
-  //    would produce size 7 = 48 px instead of the requested value).
-  if (sel && newSpans.length > 0) {
+  // 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 {
-      if (wasCollapsed) {
-        // Ensure the span has a text anchor so the cursor can live inside it.
-        if (!first.firstChild) {
-          first.appendChild(document.createTextNode('\u200B'));
-        }
-        const nr = document.createRange();
-        const anchor = first.firstChild;
-        nr.setStart(anchor, anchor.textContent.length);
-        nr.collapse(true);
-        sel.removeAllRanges();
-        sel.addRange(nr);
-      } else {
-        // Re-select all replaced content so toolbar refresh reads the new size.
-        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);
-      }
+      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 */ }
   }
 }
@@ -185,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 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
  */
-export const outdent = () => execCommand('outdent');
+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.
@@ -471,20 +564,78 @@ export function toggleChecklist() {
     return;
   }
 
-  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>`,
+  // 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/Editor.js

@@ -153,8 +153,19 @@ export class Editor {
       on(editable, 'click', onCheckboxClick),
       on(editable, 'mouseup', fixChecklistCursor),
       on(editable, 'keyup',   fixChecklistCursor),
-      // Block drag-out and external drops in read-only mode
-      on(editable, 'dragstart', (e) => { if (isReadOnly()) e.preventDefault(); }),
+      // Block drag-out and external drops in read-only mode.
+      // D-1: Also block dragging of iframes and .an-video-wrapper elements in
+      // edit mode — a user can inadvertently drag the iframe out of its wrapper
+      // (making it playable/removable from contenteditable protection) by holding
+      // the mouse and moving outside the wrapper before releasing.
+      on(editable, 'dragstart', (e) => {
+        if (isReadOnly()) { e.preventDefault(); return; }
+        const target = e.target;
+        if (target && (target.nodeName === 'IFRAME' ||
+            (target.closest && target.closest('.an-video-wrapper')))) {
+          e.preventDefault();
+        }
+      }),
       on(editable, 'drop',      (e) => { if (isReadOnly()) e.preventDefault(); }),
     );
 
@@ -370,7 +381,7 @@ export class Editor {
    * @param {string} html - HTML string (will be sanitised)
    */
   setHTML(html) {
-    this.context.layoutInfo.editable.innerHTML = sanitiseHTML(html);
+    this.context.layoutInfo.editable.innerHTML = sanitiseHTML(html, { allowIframes: true });
     if (this._history) this._history.reset();
     this.afterCommand();
   }

package/src/js/module/EmojiDialog.js

@@ -688,7 +688,18 @@ export class EmojiDialog {
 
     // 2. Insert emoji as a plain text node — no ZWS or execCommand needed.
     //    Text nodes are natively navigable so the caret lands cleanly after.
+    //
+    // E-1: When the range covers the entire content of a <td>/<th>,
+    // deleteContents() can drift the range endpoint outside the cell in some
+    // browsers.  Save the cell reference first and re-anchor after deletion.
+    const _sc = range.startContainer;
+    const _tdAnchor = (_sc.nodeType === 1 ? _sc : _sc.parentElement)
+      ?.closest?.('td, th');
     range.deleteContents();
+    if (_tdAnchor && _tdAnchor.isConnected && !_tdAnchor.contains(range.startContainer)) {
+      range.setStart(_tdAnchor, 0);
+      range.collapse(true);
+    }
     const textNode = document.createTextNode(char);
     range.insertNode(textNode);
 

package/src/js/module/IconDialog.js

@@ -575,7 +575,18 @@ export class IconDialog {
 
     // 3. Insert the <i> node directly — never via execCommand/insertHTML
     //    (execCommand leaves the caret inside the inserted element)
+    //
+    // E-1: When the range covers the entire content of a <td>/<th>,
+    // deleteContents() can drift the range endpoint outside the cell in some
+    // browsers.  Save the cell reference first and re-anchor after deletion.
+    const _sc = range.startContainer;
+    const _tdAnchor = (_sc.nodeType === 1 ? _sc : _sc.parentElement)
+      ?.closest?.('td, th');
     range.deleteContents();
+    if (_tdAnchor && _tdAnchor.isConnected && !_tdAnchor.contains(range.startContainer)) {
+      range.setStart(_tdAnchor, 0);
+      range.collapse(true);
+    }
     range.insertNode(iconEl);
 
     // 4. Place cursor after the icon.

package/src/js/module/ImageDialog.js

@@ -118,7 +118,7 @@ export class ImageDialog {
       const fileInput = createElement('input', {
         type: 'file',
         class: 'an-input',
-        accept: 'image/*',
+        accept: 'image/jpeg,image/png,image/gif,image/webp,image/svg+xml,image/avif',
       });
       this._fileInput = fileInput;
       // Hint line shown below the file input for format errors
@@ -159,10 +159,14 @@ export class ImageDialog {
     const file = this._fileInput && this._fileInput.files && this._fileInput.files[0];
     if (!file || !file.type.startsWith('image/')) return;
 
-    // C2: Reject image formats browsers cannot display (TIFF, BMP, etc.).
-    const UNSUPPORTED = ['image/tiff', 'image/x-tiff', 'image/bmp', 'image/x-bmp', 'image/x-ms-bmp'];
-    if (UNSUPPORTED.includes(file.type)) {
-      const message = `Format "${file.type}" is not supported for display in web browsers. Please convert to PNG, JPEG, or WebP first.`;
+    // C2: Only allow web-displayable formats. TIFF, BMP, RAW and similar
+    // formats are not rendered by browsers — reject them with a clear message.
+    const SUPPORTED = new Set([
+      'image/jpeg', 'image/png', 'image/gif',
+      'image/webp', 'image/svg+xml', 'image/avif',
+    ]);
+    if (!SUPPORTED.has(file.type)) {
+      const message = `Format "${file.type}" is not supported for display in web browsers. Please convert to JPEG, PNG, or WebP first.`;
       if (this._fileHint) this._fileHint.textContent = message;
       this.context.triggerEvent('imageError', { file, message });
       this._fileInput.value = '';

package/src/js/module/Placeholder.js

@@ -39,7 +39,12 @@ export class Placeholder {
   _update() {
     const editable = this.context.layoutInfo.editable;
     const isFocused = document.activeElement === editable;
-    const isEmpty = !editable.textContent.trim() &&
+    // Strip ZWS (\u200B) cursor anchors used by checklist/icon insertion in
+    // addition to regular whitespace before deciding if the editor is empty.
+    // Without this, a freshly-created checklist item or icon leaves a ZWS in
+    // the DOM that causes the placeholder to overlap real content (A-1).
+    const hasText = editable.textContent.replace(/\u200B/g, '').trim().length > 0;
+    const isEmpty = !hasText &&
       !editable.querySelector('img, table, hr, .an-video-wrapper');
     editable.classList.toggle('an-placeholder', isEmpty && !isFocused);
   }