autumnnote 1.0.6 → 1.0.8

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

@@ -48,8 +48,36 @@
     .an-editable {
       cursor: text;
       user-select: text;
-      // Subtle visual cue that the area is read-only.
-      background: #fafafa;
+      // No background change — keep the same appearance as editable mode
+      // so read-only content looks identical to the live editor.
+
+      // Block checklist checkbox interaction in read-only mode.
+      // Keep opacity:1 so disabled checkboxes are still clearly visible.
+      ul.an-checklist input[type='checkbox'] {
+        pointer-events: none;
+        cursor: default;
+        opacity: 1;
+      }
+
+      // Prevent images from being dragged out.
+      img {
+        -webkit-user-drag: none;
+        user-drag: none;
+      }
+
+      // Prevent video wrapper itself from being dragged, but keep pointer-events
+      // active so the video shield works and the iframe is visible/interactive.
+      .an-video-wrapper {
+        -webkit-user-drag: none;
+        user-drag: none;
+      }
+
+      // D-3: In read-only mode, disable the video shield so clicks reach the
+      // underlying <iframe> / <video> and users can play videos normally.
+      // The shield is only needed in edit mode to prevent accidental interaction.
+      .an-video-wrapper .an-video-shield {
+        pointer-events: none;
+      }
     }
   }
 
@@ -87,6 +115,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 +422,7 @@
 // =============================================================================
 
 .an-editable {
+  position: relative; // Establishes containing block for the ::before placeholder
   flex: 1;
   padding: $an-editable-pad;
   min-height: 0;
@@ -397,24 +432,24 @@
   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
   p       { margin: 0 0 0.75em; }
   h1, h2, h3, h4, h5, h6 { margin: 0.5em 0; line-height: 1.3; }
-  ul, ol  { margin: 0 0 0.75em 1.5em; padding: 0; }
+  ul, ol  { margin: 0 0 0.75em 0; padding-left: 1.5em; list-style-position: inside; }
   li      { margin-bottom: 0.25em; }
   blockquote {
     margin: 0.5em 0 0.5em 1em;
@@ -472,9 +507,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;
@@ -605,6 +652,26 @@
   letter-spacing: 0.02em;
 }
 
+// Active state for toggle buttons in tooltips (e.g. Select Cells)
+.an-link-tooltip-btn--active {
+  background: rgba(#3b82f6, 0.12) !important;
+  color: #3b82f6 !important;
+  svg { stroke: #3b82f6; }
+}
+
+// Cells highlighted when select mode is active
+.an-cell-selected {
+  background-color: rgba(#3b82f6, 0.18) !important;
+  outline: 2px solid #3b82f6;
+  outline-offset: -2px;
+}
+
+// Cursor hint for all cells when select mode is on
+.an-table-select-mode td,
+.an-table-select-mode th {
+  cursor: cell;
+}
+
 // Size popover (column width / row height)
 .an-size-popover {
   position: fixed;
@@ -934,6 +1001,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 +1530,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 {
@@ -1637,6 +1793,17 @@ $an-video-accent: #8b5cf6; // violet-500
     color: #cdd6f4;
   }
 
+  .an-link-tooltip-btn--active {
+    background: rgba(#6366f1, 0.2) !important;
+    color: #818cf8 !important;
+    svg { stroke: #818cf8; }
+  }
+
+  .an-cell-selected {
+    background-color: rgba(#6366f1, 0.25) !important;
+    outline-color: #6366f1;
+  }
+
   .an-table-cell {
     background: #24273a;
     border-color: #3f3f5f;
@@ -1650,6 +1817,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;