autumnnote 1.0.6 → 1.0.8

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,59 @@ 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.
+      // 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(); }),
+    );
+
+    // 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 +311,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 +337,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
   // ---------------------------------------------------------------------------
@@ -309,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/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.',
       );

package/src/js/module/ImageDialog.js

@@ -118,12 +118,15 @@ 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
+      const fileHint = createElement('p', { class: 'an-dialog-hint' });
+      this._fileHint = fileHint;
       const d = on(fileInput, 'change', () => this._onFileChange());
       this._disposers.push(d);
-      box.append(fileLabel, fileInput);
+      box.append(fileLabel, fileInput, fileHint);
     }
 
     // Buttons
@@ -156,10 +159,26 @@ export class ImageDialog {
     const file = this._fileInput && this._fileInput.files && this._fileInput.files[0];
     if (!file || !file.type.startsWith('image/')) return;
 
+    // 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 = '';
+      return;
+    }
+    if (this._fileHint) this._fileHint.textContent = '';
+
     // Validate file size (max 5 MB by default)
     const maxSize = (this.options.maxImageSize || 5) * 1024 * 1024;
     if (file.size > maxSize) {
       const message = `Image file is too large. Maximum allowed size is ${this.options.maxImageSize || 5} MB.`;
+      if (this._fileHint) this._fileHint.textContent = message;
       console.warn('[AutumnNote] ImageDialog:', message);
       this.context.triggerEvent('imageError', { file, message });
       this._fileInput.value = '';
@@ -168,7 +187,7 @@ export class ImageDialog {
 
     const reader = new FileReader();
     reader.onload = (e) => {
-      this._urlInput.value = e.target.result;
+      this._urlInput.value = /** @type {string} */ (e.target.result);
     };
     reader.readAsDataURL(file);
   }

package/src/js/module/ImageResizer.js

@@ -50,6 +50,7 @@ export class ImageResizer {
       on(editable, 'click', (e) => this._onEditorClick(e)),
       // Also select on right-click so the highlight shows before the context menu
       on(editable, 'contextmenu', (e) => {
+        if (this.context.layoutInfo.container.classList.contains('an-disabled')) return;
         const img = e.target.closest('img');
         if (img) this._select(img);
       }),
@@ -127,6 +128,7 @@ export class ImageResizer {
   }
 
   _onEditorClick(e) {
+    if (this.context.layoutInfo.container.classList.contains('an-disabled')) return;
     const img = e.target.closest('img');
     if (img) {
       // Prevent browser from deselecting the current text selection / opening native resize

package/src/js/module/ImageTooltip.js

@@ -38,6 +38,7 @@ export class ImageTooltip {
 
     this._disposers.push(
       on(editable, 'mouseover', (e) => {
+        if (this.context.layoutInfo.container.classList.contains('an-disabled')) return;
         const img = e.target.closest('img');
         // Skip when the image is inside a link — LinkTooltip takes priority there
         if (img && editable.contains(img) && !img.closest('a[href]')) {
@@ -227,6 +228,8 @@ export class ImageTooltip {
     const target = img.closest('figure.an-figure') || img;
     target.style.float = value;
     target.style.display = '';
+    // Clear explicit width set for centering so the figure is free to float
+    if (target !== img) target.style.width = '';
     target.style.marginLeft  = value === 'right' ? '12px' : '';
     target.style.marginRight = value === 'left'  ? '12px' : '';
     this.context.invoke('editor.afterCommand');
@@ -240,6 +243,9 @@ export class ImageTooltip {
     const target = img.closest('figure.an-figure') || img;
     target.style.float        = '';
     target.style.display      = 'block';
+    // C1/C3: use fit-content so the block figure shrinks to the image width;
+    // without an explicit width, margin:auto has no effect on a 100%-wide block.
+    if (target !== img) target.style.width = 'fit-content';
     target.style.marginLeft   = 'auto';
     target.style.marginRight  = 'auto';
     this.context.invoke('editor.afterCommand');
@@ -335,7 +341,10 @@ export class ImageTooltip {
       img.style.marginLeft  = '';
       img.style.marginRight = '';
     } else if (img.style.display === 'block' && img.style.marginLeft === 'auto') {
+      // C1/C3: use fit-content so the centered block figure tightly wraps the
+      // image, making margin:auto actually centre it regardless of image width.
       figure.style.display      = 'block';
+      figure.style.width        = 'fit-content';
       figure.style.marginLeft   = 'auto';
       figure.style.marginRight  = 'auto';
       img.style.display     = '';

package/src/js/module/LinkTooltip.js

@@ -125,9 +125,13 @@ export class LinkTooltip {
   }
 
   _show(anchor) {
+    const isReadOnly = this.context.layoutInfo.container.classList.contains('an-disabled');
     const url = anchor.getAttribute('href') || '';
     this._urlLabel.textContent = this._truncateUrl(url);
     this._urlLabel.title = url;
+    // In read-only mode keep only open + copy; hide edit and unlink
+    this._editBtn.style.display   = isReadOnly ? 'none' : '';
+    this._unlinkBtn.style.display = isReadOnly ? 'none' : '';
     this._el.style.display = 'flex';
     this._positionNear(anchor);
   }

package/src/js/module/Placeholder.js

@@ -39,7 +39,13 @@ export class Placeholder {
   _update() {
     const editable = this.context.layoutInfo.editable;
     const isFocused = document.activeElement === editable;
-    const isEmpty = !editable.textContent.trim() && !editable.querySelector('img, table, hr');
+    // 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);
   }
 }