autumnnote 1.0.6 → 1.0.7

package/src/js/module/ImageDialog.js

@@ -121,9 +121,12 @@ export class ImageDialog {
         accept: 'image/*',
       });
       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,22 @@ 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.`;
+      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 +183,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,8 @@ 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');
+    const isEmpty = !editable.textContent.trim() &&
+      !editable.querySelector('img, table, hr, .an-video-wrapper');
     editable.classList.toggle('an-placeholder', isEmpty && !isFocused);
   }
 }

package/src/js/module/TableTooltip.js

@@ -105,6 +105,7 @@ export class TableTooltip {
 
     this._disposers.push(
       on(editable, 'mouseover', (e) => {
+        if (this.context.layoutInfo.container.classList.contains('an-disabled')) return;
         const table = e.target.closest('table');
         if (table && editable.contains(table)) {
           const cell = e.target.closest('td, th');
@@ -169,6 +170,10 @@ export class TableTooltip {
 
     const onEditorMove = (e) => {
       if (_resizing) return;
+      if (this.context.layoutInfo.container.classList.contains('an-disabled')) {
+        clearHover();
+        return;
+      }
       // Throttle to one check per animation frame — getBoundingClientRect forces reflow
       if (_rafEditorMove !== null) return;
       const target  = e.target;
@@ -195,6 +200,7 @@ export class TableTooltip {
     };
 
     const onEditorDown = (e) => {
+      if (this.context.layoutInfo.container.classList.contains('an-disabled')) return;
       if (!_nearCell || !_nearEdge) return;
       _resizing = true;
       _edge     = _nearEdge;

package/src/js/module/Toolbar.js

@@ -513,16 +513,34 @@ export class Toolbar {
       select.appendChild(opt);
     });
 
+    // Save the editor selection when the user starts interacting with the
+    // dropdown (mousedown fires before the editor loses focus).  When the
+    // change handler runs, focus has moved to the <select>; we restore the
+    // saved range so execCommand / fontSize() act on the intended text.
+    /** @type {Range|null} */
+    let _savedRange = null;
+    const dMousedown = on(select, 'mousedown', () => {
+      const sel = window.getSelection();
+      _savedRange = (sel && sel.rangeCount) ? sel.getRangeAt(0).cloneRange() : null;
+    });
+
     const disposer = on(select, 'change', (e) => {
-      const value = e.target.value;
-      const selectedOpt = e.target.options[e.target.selectedIndex];
+      const value = /** @type {HTMLSelectElement} */ (e.target).value;
+      const selectedOpt = /** @type {HTMLSelectElement} */ (e.target).options[/** @type {HTMLSelectElement} */ (e.target).selectedIndex];
       if (!value || selectedOpt.disabled) return;
       this.context.invoke('editor.focus');
+      // Restore selection saved on mousedown so the action targets the correct text.
+      if (_savedRange) {
+        try {
+          const sel = window.getSelection();
+          if (sel) { sel.removeAllRanges(); sel.addRange(_savedRange); }
+        } catch (_) { /* range may be stale if DOM changed */ }
+      }
       def.action(this.context, value);
       this.context.invoke('editor.afterCommand');
     });
 
-    this._disposers.push(disposer);
+    this._disposers.push(dMousedown, disposer);
     return select;
   }
 

package/src/js/module/VideoDialog.js

@@ -73,12 +73,12 @@ export class VideoDialog {
     // URL input
     const urlLabel = createElement('label', { class: 'an-label' });
     urlLabel.textContent = 'Video URL';
-    const urlInput = createElement('input', {
+    const urlInput = /** @type {HTMLInputElement} */ (createElement('input', {
       type: 'url',
       class: 'an-input',
       placeholder: 'YouTube, Vimeo, or direct .mp4 URL',
       autocomplete: 'off',
-    });
+    }));
     this._urlInput = urlInput;
 
     // Hint (detected source)
@@ -88,14 +88,14 @@ export class VideoDialog {
     // Width
     const widthLabel = createElement('label', { class: 'an-label' });
     widthLabel.textContent = 'Width (px)';
-    const widthInput = createElement('input', {
+    const widthInput = /** @type {HTMLInputElement} */ (createElement('input', {
       type: 'number',
       class: 'an-input',
       placeholder: '560',
       min: '80',
       max: '1920',
       value: '560',
-    });
+    }));
     this._widthInput = widthInput;
 
     // Buttons
@@ -119,7 +119,7 @@ export class VideoDialog {
     const d1 = on(insertBtn, 'click', () => this._onInsert());
     const d2 = on(cancelBtn, 'click', () => this._close());
     const d3 = on(overlay, 'click', (e) => { if (e.target === overlay) this._close(); });
-    const d4 = on(urlInput, 'keydown', (e) => { if (e.key === 'Enter') { e.preventDefault(); this._onInsert(); } });
+    const d4 = on(urlInput, 'keydown', (e) => { if (/** @type {KeyboardEvent} */ (e).key === 'Enter') { e.preventDefault(); this._onInsert(); } });
     this._disposers.push(d0, d1, d2, d3, d4);
 
     return overlay;

package/src/js/module/VideoResizer.js

@@ -41,6 +41,7 @@ export class VideoResizer {
     this._disposers.push(
       on(editable, 'click', (e) => this._onEditorClick(e)),
       on(editable, 'contextmenu', (e) => {
+        if (this.context.layoutInfo.container.classList.contains('an-disabled')) return;
         const wrapper = this._findWrapper(e.target);
         if (wrapper) this._select(wrapper);
       }),
@@ -48,6 +49,15 @@ export class VideoResizer {
       on(window, 'scroll', () => this._updateOverlayPosition(), { passive: true }),
       on(window, 'resize', onWindowResize),
       on(editable, 'scroll', () => this._updateOverlayPosition(), { passive: true }),
+      // D1: Prevent native browser drag of video wrappers. Without this, a user
+      // can hold-and-drag to produce a "copy" that lands outside .an-editable,
+      // where the .an-video-shield CSS loses its containing context so the
+      // copied video becomes directly playable.
+      on(editable, 'dragstart', (e) => {
+        if (e.target instanceof Element && e.target.closest('.an-video-wrapper')) {
+          e.preventDefault();
+        }
+      }),
     );
 
     return this;
@@ -131,6 +141,7 @@ export class VideoResizer {
   }
 
   _onEditorClick(e) {
+    if (this.context.layoutInfo.container.classList.contains('an-disabled')) return;
     const wrapper = this._findWrapper(e.target);
     if (wrapper) {
       e.preventDefault();

package/src/js/module/VideoTooltip.js

@@ -37,6 +37,7 @@ export class VideoTooltip {
 
     this._disposers.push(
       on(editable, 'mouseover', (e) => {
+        if (this.context.layoutInfo.container.classList.contains('an-disabled')) return;
         // The shield div sits on top of iframes — we detect hover via it or the wrapper
         const wrapper = e.target.closest('.an-video-wrapper');
         if (wrapper && editable.contains(wrapper)) {

package/src/js/renderer.js

@@ -78,6 +78,9 @@ export function renderLayout(targetEl, options) {
   // Read-only mode
   if (options.readOnly) {
     container.classList.add('an-disabled');
+    editable.querySelectorAll('ul.an-checklist input[type="checkbox"]').forEach((cb) => {
+      cb.setAttribute('disabled', '');
+    });
   }
 
   // Text direction

package/src/styles/autumnnote.scss

@@ -50,6 +50,20 @@
       user-select: text;
       // Subtle visual cue that the area is read-only.
       background: #fafafa;
+
+      // Block checklist checkbox interaction in read-only mode.
+      ul.an-checklist input[type='checkbox'] {
+        pointer-events: none;
+        cursor: default;
+      }
+
+      // Prevent images and videos from being dragged out.
+      img,
+      .an-video-wrapper {
+        -webkit-user-drag: none;
+        user-drag: none;
+        pointer-events: none;
+      }
     }
   }
 
@@ -87,6 +101,12 @@
   align-items: center;
   gap: 2px;
 
+  // Icon-only toolbar buttons should not have horizontal padding so all
+  // buttons appear consistently square (min-width = height = $an-btn-height).
+  // Dialog buttons (.an-dialog-actions .an-btn) keep their padding via the
+  // lower-specificity .an-btn rule.
+  > .an-btn { padding: 0; }
+
   // Separator between groups
   & + .an-btn-group {
     position: relative;
@@ -388,6 +408,7 @@
 // =============================================================================
 
 .an-editable {
+  position: relative; // Establishes containing block for the ::before placeholder
   flex: 1;
   padding: $an-editable-pad;
   min-height: 0;
@@ -397,18 +418,18 @@
   overflow-y: auto;
   word-break: break-word;
 
-  // Placeholder — only shown when not focused.
-  // float:left is the standard contenteditable placeholder technique (used by
-  // Quill.js): the pseudo-element is out of normal flow so it never shifts the
-  // cursor, yet it renders visually at the start of the empty editing area.
-  // Avoid position:absolute here — without position:relative on the parent it
-  // would be positioned relative to .an-container (contain:layout) and overlap
-  // the toolbar.
+  // Placeholder — shown only when the editable is empty and not focused.
+  // Uses position:absolute so it never shifts the cursor or block content,
+  // and requires position:relative on this element (added above) so it is
+  // scoped to the editable area and never overlaps the toolbar.
   &.an-placeholder:not(:focus)::before {
     content: attr(data-placeholder);
     color: $an-muted;
     pointer-events: none;
-    float: left;
+    position: absolute;
+    top: 12px;   // matches top padding from $an-editable-pad (12px 14px)
+    left: 14px;  // matches left padding
+    right: 14px;
   }
 
   // Content styles
@@ -472,9 +493,21 @@
       inset: 0;
       z-index: 2;
       cursor: default;
+      pointer-events: all; // Explicitly block pointer events reaching the iframe
     }
   }
 
+  // Ensure video shield stays effective even when a video copy moves outside
+  // .an-editable temporarily (e.g. native drag-and-drop).
+  // This global rule mirrors the scoped one above.
+  @at-root .an-video-wrapper .an-video-shield {
+    position: absolute;
+    inset: 0;
+    z-index: 2;
+    cursor: default;
+    pointer-events: all;
+  }
+
   // Table styles — target both classed and unclassed tables
   table, .an-table {
     border-collapse: collapse;
@@ -934,6 +967,91 @@
   background: $an-border;
 }
 
+// Color-strip variant — SVG stacked above a thin color bar (matches toolbar)
+.an-context-icon--color {
+  flex-direction: column;
+  gap: 2px;
+  width: 16px;
+  align-items: center;
+
+  .an-context-icon-svg {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 0;
+  }
+}
+
+.an-context-color-strip {
+  display: block;
+  width: 100%;
+  height: 3px;
+  border-radius: 1px;
+  flex-shrink: 0;
+}
+
+// Color palette inside context menu
+.an-context-color-palette {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 3px;
+  padding: 6px 12px 2px;
+}
+
+.an-context-color-swatch {
+  width: 15px;
+  height: 15px;
+  border-radius: 3px;
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  cursor: pointer;
+  flex-shrink: 0;
+  position: relative;
+  transition: transform 0.1s;
+
+  &:hover {
+    transform: scale(1.28);
+    z-index: 1;
+    border-color: rgba(0, 0, 0, 0.4);
+  }
+}
+
+.an-context-color-none {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #fff !important;
+  color: #999;
+
+  svg { display: block; }
+
+  &:hover { color: #333; }
+}
+
+.an-context-color-custom {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 12px 8px;
+  font-size: 12px;
+  color: $an-muted;
+  cursor: pointer;
+
+  input[type='color'] {
+    width: 18px;
+    height: 18px;
+    padding: 0;
+    border: 1px solid $an-border;
+    border-radius: 3px;
+    cursor: pointer;
+    background: transparent;
+    -webkit-appearance: none;
+    appearance: none;
+  }
+
+  span { flex: 1; }
+  &:hover span { color: $an-text; }
+}
+
 // ---------------------------------------------------------------------------
 // Image resize overlay
 // ---------------------------------------------------------------------------
@@ -1378,7 +1496,11 @@ $an-video-accent: #8b5cf6; // violet-500
     margin: 0.75em 0;
     text-align: center;
 
-    img { display: block; max-width: 100%; }
+    img {
+      display: block;
+      max-width: 100%;
+      margin: 0 auto; // Centers img when figure uses fit-content or explicit width
+    }
   }
 
   figcaption.an-figcaption {
@@ -1650,6 +1772,21 @@ $an-video-accent: #8b5cf6; // violet-500
   .an-context-item { color: #cdd6f4; }
   .an-context-sep { background: #3f3f5f; }
 
+  .an-context-color-swatch {
+    border-color: rgba(255, 255, 255, 0.15);
+    &:hover { border-color: rgba(255, 255, 255, 0.5); }
+  }
+
+  .an-context-color-none {
+    background: #1e1e2e !important;
+    color: #888;
+    &:hover { color: #ccc; }
+  }
+
+  .an-context-color-custom {
+    input[type='color'] { border-color: #3f3f5f; }
+  }
+
   .an-icon-cat {
     border-color: #3f3f5f;
     color: #a6adc8;