autumnnote 1.0.6 → 1.0.7

package/package.json

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

@@ -98,15 +98,54 @@ 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) {
+  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
-  editable.querySelectorAll('font[size="7"]').forEach((el) => {
+  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);
   });
+
+  // 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) {
+    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);
+      }
+    } catch (_) { /* ignore range errors on unusual DOM structures */ }
+  }
 }
 
 // ---------------------------------------------------------------------------
@@ -263,11 +302,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 +360,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,7 +424,53 @@ export function toggleChecklist() {
     }
   }
 
-  // Otherwise: insert new checklist from selected text
+  // 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;
+  }
+
   const text = sel.toString();
   const lines = text.split(/\r?\n/).filter((l) => l.trim().length > 0);
   if (lines.length === 0) return;

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);

package/src/js/module/ContextMenu.js

@@ -30,12 +30,31 @@ const ICONS = {
   removeFormat:`<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m7 21-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21"/><path d="M22 21H7"/><path d="m5 11 9 9"/></svg>`,
   // Table
   table:       `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="1"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="3" y1="15" x2="21" y2="15"/><line x1="9" y1="3" x2="9" y2="21"/><line x1="15" y1="3" x2="15" y2="21"/></svg>`,
+  // Color
+  textColor:      `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20L12 4L20 20"/><line x1="7.5" y1="14" x2="16.5" y2="14"/></svg>`,
+  highlightColor: `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 21v-4l9-9 4 4-9 9z"/><path d="M12 8l4 4"/><line x1="3" y1="21" x2="21" y2="21"/></svg>`,
+  noColor:        `<svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="4" y1="4" x2="20" y2="20"/><line x1="20" y1="4" x2="4" y2="20"/></svg>`,
+  back:           `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>`,
 };
 
+const COLOR_PRESETS = [
+  // Grayscale
+  '#000000', '#434343', '#666666', '#999999', '#b7b7b7', '#cccccc', '#efefef', '#ffffff',
+  // Saturated
+  '#ff0000', '#ff9900', '#ffff00', '#00ff00', '#00ffff', '#4a86e8', '#9900ff', '#ff00ff',
+  // Pastel
+  '#f4cccc', '#fce5cd', '#fff2cc', '#d9ead3', '#d0e0e3', '#c9daf8', '#d9d2e9', '#ead1dc',
+];
+
+function makeColorSubItems(colorType) {
+  const label = colorType === 'foreColor' ? 'Text Color' : 'Highlight Color';
+  return () => [
+    { back: true, label, navigate: () => defaultItems },
+    { colorPalette: true, colorType },
+  ];
+}
+
 const defaultItems = [
-  { name: 'undo',      label: 'Undo',         icon: ICONS.undo,      action: (ctx) => ctx.invoke('editor.undo') },
-  { name: 'redo',      label: 'Redo',         icon: ICONS.redo,      action: (ctx) => ctx.invoke('editor.redo') },
-  { separator: true },
   { name: 'cut',       label: 'Cut',          icon: ICONS.cut,       action: () => document.execCommand('cut') },
   { name: 'copy',      label: 'Copy',         icon: ICONS.copy,      action: () => document.execCommand('copy') },
   { name: 'paste',     label: 'Paste',        icon: ICONS.paste,     action: (ctx) => {
@@ -76,6 +95,9 @@ const defaultItems = [
   { name: 'italic',    label: 'Italic',       icon: ICONS.italic,    action: (ctx) => ctx.invoke('editor.italic') },
   { name: 'underline', label: 'Underline',    icon: ICONS.underline, action: (ctx) => ctx.invoke('editor.underline') },
   { separator: true },
+  { name: 'textColor',      label: 'Text Color',      icon: ICONS.textColor,      colorStrip: 'foreColor',  navigate: makeColorSubItems('foreColor') },
+  { name: 'highlightColor', label: 'Highlight Color', icon: ICONS.highlightColor, colorStrip: 'hiliteColor', navigate: makeColorSubItems('hiliteColor') },
+  { separator: true },
   { name: 'copyFormat',   label: 'Copy Format',   icon: ICONS.copyFormat,   action: (ctx) => ctx.invoke('contextMenu.copyFormat') },
   { name: 'pasteFormat',  label: 'Paste Format',  icon: ICONS.pasteFormat,  action: (ctx) => ctx.invoke('contextMenu.pasteFormat'), disabled: (ctx) => !ctx.invoke('contextMenu.hasCopiedFormat') },
   { name: 'removeFormat', label: 'Remove Format', icon: ICONS.removeFormat, action: (ctx) => ctx.invoke('contextMenu.removeFormat') },
@@ -152,8 +174,10 @@ export class ContextMenu {
         backBtn.appendChild(createElement('span', { class: 'an-context-label' }, [it.label || 'Back']));
         const off = on(backBtn, 'click', (e) => {
           e.stopPropagation();
+          const curLeft = parseFloat(this.el.style.left);
+          const curTop = parseFloat(this.el.style.top);
           this._renderItems(it.navigate());
-          this._reposition();
+          this._reposition(curLeft, curTop);
         });
         this._menuDisposers.push(off);
         this.el.appendChild(backBtn);
@@ -164,9 +188,21 @@ export class ContextMenu {
       if (it.navigate) {
         const btn = createElement('button', { type: 'button', class: 'an-context-item an-context-submenu', 'data-name': it.name || '' });
         if (it.icon) {
-          const iconSpan = createElement('span', { class: 'an-context-icon', 'aria-hidden': 'true' });
-          iconSpan.innerHTML = it.icon;
-          btn.appendChild(iconSpan);
+          if (it.colorStrip) {
+            // Toolbar-style icon: SVG stacked above a colored strip
+            const iconWrap = createElement('span', { class: 'an-context-icon an-context-icon--color', 'aria-hidden': 'true' });
+            const svgSpan = createElement('span', { class: 'an-context-icon-svg' });
+            svgSpan.innerHTML = it.icon;
+            const strip = createElement('span', { class: 'an-context-color-strip' });
+            strip.style.background = this._getSelectionColor(it.colorStrip);
+            iconWrap.appendChild(svgSpan);
+            iconWrap.appendChild(strip);
+            btn.appendChild(iconWrap);
+          } else {
+            const iconSpan = createElement('span', { class: 'an-context-icon', 'aria-hidden': 'true' });
+            iconSpan.innerHTML = it.icon;
+            btn.appendChild(iconSpan);
+          }
         }
         btn.appendChild(createElement('span', { class: 'an-context-label' }, [it.label || it.name]));
         const chevron = createElement('span', { class: 'an-context-chevron', 'aria-hidden': 'true' });
@@ -174,14 +210,62 @@ export class ContextMenu {
         btn.appendChild(chevron);
         const off = on(btn, 'click', (e) => {
           e.stopPropagation();
+          const curLeft = parseFloat(this.el.style.left);
+          const curTop = parseFloat(this.el.style.top);
           this._renderItems(it.navigate());
-          this._reposition();
+          this._reposition(curLeft, curTop);
         });
         this._menuDisposers.push(off);
         this.el.appendChild(btn);
         return;
       }
 
+      // Color palette item — renders inline color swatches
+      if (it.colorPalette) {
+        const palette = createElement('div', { class: 'an-context-color-palette' });
+        COLOR_PRESETS.forEach((color) => {
+          const sw = createElement('div', {
+            class: 'an-context-color-swatch',
+            title: color,
+            role: 'button',
+            'aria-label': color,
+          });
+          sw.style.background = color;
+          const offSw = on(sw, 'click', (e) => { e.stopPropagation(); this._applyColor(it.colorType, color); });
+          this._menuDisposers.push(offSw);
+          palette.appendChild(sw);
+        });
+        if (it.colorType === 'hiliteColor') {
+          const noColor = createElement('div', {
+            class: 'an-context-color-swatch an-context-color-none',
+            title: 'No highlight',
+            role: 'button',
+            'aria-label': 'No highlight',
+          });
+          noColor.innerHTML = ICONS.noColor;
+          const offNo = on(noColor, 'click', (e) => { e.stopPropagation(); this._applyColor('hiliteColor', 'transparent'); });
+          this._menuDisposers.push(offNo);
+          palette.appendChild(noColor);
+        }
+        this.el.appendChild(palette);
+
+        // Custom color row
+        const customRow = createElement('div', { class: 'an-context-color-custom' });
+        const colorInput = createElement('input', {
+          type: 'color',
+          value: it.colorType === 'foreColor' ? '#000000' : '#ffff00',
+          title: 'Custom color',
+          'aria-label': 'Custom color',
+        });
+        const customLabel = createElement('span', {}, ['Custom…']);
+        const offCustom = on(colorInput, 'change', () => this._applyColor(it.colorType, colorInput.value));
+        this._menuDisposers.push(offCustom);
+        customRow.appendChild(colorInput);
+        customRow.appendChild(customLabel);
+        this.el.appendChild(customRow);
+        return;
+      }
+
       // Table grid picker item — expands an inline grid panel when clicked
       if (it.tableGrid) {
         const GRID_ROWS = 8, GRID_COLS = 8;
@@ -289,6 +373,7 @@ export class ContextMenu {
     const editable = this.context.layoutInfo && this.context.layoutInfo.editable;
     if (!editable) return;
     if (!editable.contains(event.target)) return;
+    if (this.context.layoutInfo.container.classList.contains('an-disabled')) return;
     event.preventDefault();
     this._lastX = event.clientX;
     this._lastY = event.clientY;
@@ -318,7 +403,29 @@ export class ContextMenu {
     let left = rx;
     let top = ry;
     if (left + rect.width > window.innerWidth) left = window.innerWidth - rect.width - 8;
+    if (left < 8) left = 8;
     if (top + rect.height > window.innerHeight) top = window.innerHeight - rect.height - 8;
+    if (top < 8) top = 8;
+
+    // Avoid covering the saved selection range
+    if (this._savedRange) {
+      try {
+        const sel = this._savedRange.getBoundingClientRect();
+        if (sel.width > 0 || sel.height > 0) {
+          const overlaps = top < sel.bottom && (top + rect.height) > sel.top &&
+                           left < sel.right  && (left + rect.width)  > sel.left;
+          if (overlaps) {
+            const belowTop = sel.bottom + 6;
+            if (belowTop + rect.height <= window.innerHeight - 8) {
+              top = belowTop;
+            } else {
+              top = Math.max(8, sel.top - rect.height - 6);
+            }
+          }
+        }
+      } catch (_) { /* stale range — ignore */ }
+    }
+
     this.el.style.left = `${left}px`;
     this.el.style.top = `${top}px`;
   }
@@ -333,6 +440,37 @@ export class ContextMenu {
   // Format operations (Copy Format / Paste Format / Remove Format)
   // ---------------------------------------------------------------------------
 
+  /** Read the current selection's text or highlight color for the strip.
+   * @param {'foreColor'|'hiliteColor'} type
+   * @returns {string} CSS color string
+   */
+  _getSelectionColor(type) {
+    const range = this._savedRange;
+    if (!range) return type === 'foreColor' ? '#000000' : 'transparent';
+    let node = range.startContainer;
+    if (node.nodeType === Node.TEXT_NODE) node = node.parentElement;
+    if (!node) return type === 'foreColor' ? '#000000' : 'transparent';
+    const cs = window.getComputedStyle(node);
+    if (type === 'foreColor') {
+      return cs.color || '#000000';
+    }
+    const bg = cs.backgroundColor;
+    return (!bg || bg === 'rgba(0, 0, 0, 0)' || bg === 'transparent') ? 'transparent' : bg;
+  }
+
+  /** Restore selection, apply a color command, then hide the menu. */
+  _applyColor(type, color) {
+    const editable = this.context.layoutInfo && this.context.layoutInfo.editable;
+    if (!editable || !this._savedRange) return;
+    editable.focus();
+    const sel = window.getSelection();
+    sel.removeAllRanges();
+    sel.addRange(this._savedRange.cloneRange());
+    document.execCommand(type, false, color);
+    this.context.invoke('editor.afterCommand');
+    this.hide();
+  }
+
   /** Returns true if a format has been copied — used to disable Paste Format. */
   hasCopiedFormat() { return !!this._copiedFormat; }
 

package/src/js/module/Editor.js

@@ -143,6 +143,8 @@ export class Editor {
       sel.addRange(nr);
     };
 
+    const isReadOnly = () => this.context.layoutInfo.container.classList.contains('an-disabled');
+
     this._disposers.push(
       on(editable, 'keydown', onKeydown),
       on(editable, 'beforeinput', onBeforeInput),
@@ -151,6 +153,48 @@ 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(); }),
+      on(editable, 'drop',      (e) => { if (isReadOnly()) e.preventDefault(); }),
+    );
+
+    // B-V: Re-apply superscript / subscript after IME composition ends.
+    // Vietnamese and other IME-based inputs fire compositionstart/end around
+    // the inserted characters. During composition the browser may place the
+    // provisional text outside the current <sup>/<sub> element. When
+    // compositionend fires we detect whether the cursor escaped the sup/sub
+    // context and re-apply the command so the composed character stays inside.
+    /** @type {string|null} 'superscript' | 'subscript' | null */
+    let _compositionSupSub = null;
+    const onCompositionStart = () => {
+      const sel = window.getSelection();
+      if (!sel || !sel.rangeCount) { _compositionSupSub = null; return; }
+      let node = sel.getRangeAt(0).startContainer;
+      if (node.nodeType === Node.TEXT_NODE) node = node.parentElement;
+      if (node && node.closest) {
+        if (node.closest('sup')) _compositionSupSub = 'superscript';
+        else if (node.closest('sub')) _compositionSupSub = 'subscript';
+        else _compositionSupSub = null;
+      }
+    };
+    const onCompositionEnd = () => {
+      const tag = _compositionSupSub;
+      _compositionSupSub = null;
+      if (!tag) return;
+      const sel = window.getSelection();
+      if (!sel || !sel.rangeCount) return;
+      let node = sel.getRangeAt(0).startContainer;
+      if (node.nodeType === Node.TEXT_NODE) node = node.parentElement;
+      const inContext = node && node.closest &&
+        (tag === 'superscript' ? node.closest('sup') : node.closest('sub'));
+      if (!inContext) {
+        // The composed character escaped the sup/sub — re-apply the format.
+        document.execCommand(tag);
+      }
+    };
+    this._disposers.push(
+      on(editable, 'compositionstart', onCompositionStart),
+      on(editable, 'compositionend',   onCompositionEnd),
     );
   }
 
@@ -256,6 +300,9 @@ export class Editor {
   // ---------------------------------------------------------------------------
 
   afterCommand() {
+    // C4: Remove figure.an-figure elements whose <img> has been deleted so
+    // orphaned figcaptions do not accumulate in the DOM.
+    this._cleanOrphanedFigures();
     // Immediate: keep toolbar and statusbar in sync on every mutation.
     this.context.invoke('toolbar.refresh');
     this.context.invoke('statusbar.update');
@@ -279,6 +326,20 @@ export class Editor {
     }, 400);
   }
 
+  /**
+   * C4: Removes figure.an-figure elements that no longer contain an <img>.
+   * This happens when a user selects only the image (not the whole figure)
+   * and deletes or replaces it, leaving a dangling figcaption.
+   */
+  _cleanOrphanedFigures() {
+    const editable = this.context.layoutInfo.editable;
+    editable.querySelectorAll('figure.an-figure').forEach((fig) => {
+      if (!fig.querySelector('img')) {
+        fig.parentNode.removeChild(fig);
+      }
+    });
+  }
+
   // ---------------------------------------------------------------------------
   // Focus management
   // ---------------------------------------------------------------------------

package/src/js/module/ImageCropOverlay.js

@@ -66,7 +66,7 @@ function drawCropToCanvas(img, naturalRect, renderW, renderH) {
     if (
       img.src.startsWith('data:') ||
       img.src.startsWith('blob:') ||
-      img.src.startsWith(location.origin)
+      img.src.startsWith(window.location.origin)
     ) {
       tryDraw(img);
       return;
@@ -489,7 +489,7 @@ export class ImageCropOverlay {
 
     if (!canvas) {
       // Cross-origin failure — inform user and abort
-      alert(
+      window.alert(
         'Cannot crop this image: the image server does not allow cross-origin access.\n' +
         'Upload the image directly to use the crop tool.',
       );