autumnnote 1.0.1 → 1.0.4

package/src/js/module/VideoResizer.js

@@ -21,14 +21,23 @@ export class VideoResizer {
     this._activeWrapper = null;
     this._overlay = null;
     this._disposers = [];
+    this._positionRaf = null;
   }
 
   initialize() {
     this._overlay = this._buildOverlay();
-    document.body.appendChild(this._overlay);
+    const container = this.context.layoutInfo.editable.closest('.an-container') || document.body;
+    container.appendChild(this._overlay);
+    this._container = container;
 
     const editable = this.context.layoutInfo.editable;
 
+    let _resizeDebounce = null;
+    const onWindowResize = () => {
+      clearTimeout(_resizeDebounce);
+      _resizeDebounce = setTimeout(() => this._updateOverlayPosition(), 100);
+    };
+
     this._disposers.push(
       on(editable, 'click', (e) => this._onEditorClick(e)),
       on(editable, 'contextmenu', (e) => {
@@ -37,7 +46,7 @@ export class VideoResizer {
       }),
       on(document, 'click', (e) => this._onDocClick(e)),
       on(window, 'scroll', () => this._updateOverlayPosition(), { passive: true }),
-      on(window, 'resize', () => this._updateOverlayPosition()),
+      on(window, 'resize', onWindowResize),
       on(editable, 'scroll', () => this._updateOverlayPosition(), { passive: true }),
     );
 
@@ -51,6 +60,10 @@ export class VideoResizer {
       this._dragDisposers.forEach((d) => d());
       this._dragDisposers = null;
     }
+    if (this._positionRaf) {
+      cancelAnimationFrame(this._positionRaf);
+      this._positionRaf = null;
+    }
     this._deselect();
     if (this._overlay && this._overlay.parentNode) {
       this._overlay.parentNode.removeChild(this._overlay);
@@ -152,10 +165,22 @@ export class VideoResizer {
   }
 
   _updateOverlayPosition() {
+    if (this._positionRaf) cancelAnimationFrame(this._positionRaf);
+    this._positionRaf = requestAnimationFrame(() => {
+      this._positionRaf = null;
+      this._updateOverlayPositionNow();
+    });
+  }
+
+  _updateOverlayPositionNow() {
     if (!this._activeWrapper || !this._overlay) return;
+    const offsetParent = this._overlay.offsetParent || this._container;
+    const containerRect = offsetParent.getBoundingClientRect();
     const rect = this._activeWrapper.getBoundingClientRect();
-    this._overlay.style.left   = `${rect.left}px`;
-    this._overlay.style.top    = `${rect.top}px`;
+    const left = rect.left - containerRect.left + offsetParent.scrollLeft;
+    const top = rect.top - containerRect.top + offsetParent.scrollTop;
+    this._overlay.style.left   = `${left}px`;
+    this._overlay.style.top    = `${top}px`;
     this._overlay.style.width  = `${rect.width}px`;
     this._overlay.style.height = `${rect.height}px`;
   }
@@ -173,43 +198,49 @@ export class VideoResizer {
     const isCorner = pos.length === 2;
 
     const editable = this.context.layoutInfo.editable;
+    let _raf = null; // rAF handle — at most one write per paint frame
+
     const onMove = (me) => {
-      const dx = me.clientX - startX;
-      const dy = me.clientY - startY;
-      const maxW = editable.clientWidth || Infinity;
-      let newW = startW;
-      let newH = startH;
-
-      if (pos.includes('e')) newW = Math.max(80, startW + dx);
-      if (pos.includes('w')) newW = Math.max(80, startW - dx);
-      if (pos.includes('s')) newH = Math.max(45, startH + dy);
-      if (pos.includes('n')) newH = Math.max(45, startH - dy);
-
-      // Clamp to container width
-      newW = Math.min(newW, maxW);
-
-      if (isCorner) {
-        if (Math.abs(dx) >= Math.abs(dy)) {
-          newH = Math.max(45, Math.round(newW / aspectRatio));
-        } else {
-          newW = Math.min(Math.max(80, Math.round(newH * aspectRatio)), maxW);
-          newH = Math.max(45, Math.round(newW / aspectRatio));
+      if (_raf !== null) return;
+      const clientX = me.clientX;
+      const clientY = me.clientY;
+      _raf = requestAnimationFrame(() => {
+        _raf = null;
+        const dx = clientX - startX;
+        const dy = clientY - startY;
+        const maxW = editable.clientWidth || Infinity;
+        let newW = startW;
+        let newH = startH;
+
+        if (pos.includes('e')) newW = Math.max(80, startW + dx);
+        if (pos.includes('w')) newW = Math.max(80, startW - dx);
+        if (pos.includes('s')) newH = Math.max(45, startH + dy);
+        if (pos.includes('n')) newH = Math.max(45, startH - dy);
+
+        newW = Math.min(newW, maxW);
+
+        if (isCorner) {
+          if (Math.abs(dx) >= Math.abs(dy)) {
+            newH = Math.max(45, Math.round(newW / aspectRatio));
+          } else {
+            newW = Math.min(Math.max(80, Math.round(newH * aspectRatio)), maxW);
+            newH = Math.max(45, Math.round(newW / aspectRatio));
+          }
+        }
+
+        // Resize wrapper and inner embed via CSS only — attribute writes are redundant
+        wrapper.style.width  = `${newW}px`;
+        wrapper.style.height = `${newH}px`;
+        if (embed) {
+          embed.style.width  = `${newW}px`;
+          embed.style.height = `${newH}px`;
         }
-      }
-
-      // Resize both the wrapper and the inner embed element
-      wrapper.style.width  = `${newW}px`;
-      wrapper.style.height = `${newH}px`;
-      if (embed) {
-        embed.width  = newW;
-        embed.height = newH;
-        embed.style.width  = `${newW}px`;
-        embed.style.height = `${newH}px`;
-      }
-      this._updateOverlayPosition();
+        this._updateOverlayPosition();
+      });
     };
 
     const onUp = () => {
+      if (_raf !== null) { cancelAnimationFrame(_raf); _raf = null; }
       document.removeEventListener('mousemove', onMove);
       document.removeEventListener('mouseup', onUp);
       this._dragDisposers = null;

package/src/js/module/VideoTooltip.js

@@ -10,6 +10,7 @@ const ICONS = {
   alignCenter: `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="7" y="4" width="10" height="8" rx="1"/><line x1="3" y1="16" x2="21" y2="16"/><line x1="6" y1="20" x2="18" y2="20"/></svg>`,
   originalSize:`<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/></svg>`,
   deleteVideo: `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/></svg>`,
+  preview:     `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"/></svg>`,
 };
 
 const SHOW_DELAY = 100;
@@ -24,6 +25,8 @@ export class VideoTooltip {
     this._showTimer = null;
     this._hideTimer = null;
     this._disposers = [];
+    this._previewMode = false;
+    this._previewClickOff = null;
   }
 
   initialize() {
@@ -39,13 +42,13 @@ export class VideoTooltip {
         if (wrapper && editable.contains(wrapper)) {
           this._scheduleShow(wrapper);
         }
-      }),
+      }, { passive: true }),
       on(editable, 'mouseout', (e) => {
         const to = e.relatedTarget;
         if (!to || (!editable.contains(to) && !this._el.contains(to))) {
           this._scheduleHide();
         }
-      }),
+      }, { passive: true }),
       on(document, 'click', (e) => {
         if (
           this._activeWrapper &&
@@ -61,6 +64,7 @@ export class VideoTooltip {
   }
 
   destroy() {
+    if (this._previewMode) this._exitPreview();
     this._clearTimers();
     this._disposers.forEach((d) => d());
     this._disposers = [];
@@ -105,6 +109,11 @@ export class VideoTooltip {
 
     el.appendChild(createElement('div', { class: 'an-link-tooltip-sep' }));
 
+    this._previewBtn = this._makeBtn(ICONS.preview, 'Preview Video', () => this._togglePreview());
+    el.appendChild(this._previewBtn);
+
+    el.appendChild(createElement('div', { class: 'an-link-tooltip-sep' }));
+
     this._deleteBtn = this._makeBtn(ICONS.deleteVideo, 'Delete Video', () => this._delete(), true);
 
     el.appendChild(this._deleteBtn);
@@ -155,6 +164,8 @@ export class VideoTooltip {
   }
 
   _scheduleHide() {
+    // Keep tooltip alive while preview mode is active
+    if (this._previewMode) return;
     clearTimeout(this._showTimer);
     this._showTimer = null;
     if (this._hideTimer) return;
@@ -163,10 +174,14 @@ export class VideoTooltip {
 
   _show(wrapper) {
     this._el.style.display = 'flex';
-    this._positionNear(wrapper);
+    // Defer: offsetWidth on a newly-visible element forces synchronous layout
+    requestAnimationFrame(() => {
+      if (this._activeWrapper) this._positionNear(this._activeWrapper);
+    });
   }
 
   _hide() {
+    if (this._previewMode) this._exitPreview();
     this._el.style.display = 'none';
     this._activeWrapper = null;
     this._clearTimers();
@@ -209,7 +224,7 @@ export class VideoTooltip {
     wrapper.style.marginRight  = value === 'left'  ? '12px' : '';
     this.context.invoke('editor.afterCommand');
     this.context.invoke('videoResizer.updateOverlay');
-    this._positionNear(wrapper);
+    requestAnimationFrame(() => { if (this._activeWrapper) this._positionNear(this._activeWrapper); });
   }
 
   _setCenter() {
@@ -221,7 +236,7 @@ export class VideoTooltip {
     wrapper.style.marginRight = 'auto';
     this.context.invoke('editor.afterCommand');
     this.context.invoke('videoResizer.updateOverlay');
-    this._positionNear(wrapper);
+    requestAnimationFrame(() => { if (this._activeWrapper) this._positionNear(this._activeWrapper); });
   }
 
   _resetSize() {
@@ -238,7 +253,7 @@ export class VideoTooltip {
     }
     this.context.invoke('editor.afterCommand');
     this.context.invoke('videoResizer.updateOverlay');
-    this._positionNear(wrapper);
+    requestAnimationFrame(() => { if (this._activeWrapper) this._positionNear(this._activeWrapper); });
   }
 
   _delete() {
@@ -249,4 +264,65 @@ export class VideoTooltip {
     if (wrapper.parentNode) wrapper.parentNode.removeChild(wrapper);
     this.context.invoke('editor.afterCommand');
   }
+
+  // ---------------------------------------------------------------------------
+  // Preview mode — temporarily disables the shield so the video is interactive
+  // ---------------------------------------------------------------------------
+
+  _togglePreview() {
+    if (this._previewMode) {
+      this._exitPreview();
+    } else {
+      this._enterPreview();
+    }
+  }
+
+  _enterPreview() {
+    const wrapper = this._activeWrapper;
+    if (!wrapper) return;
+    this._previewMode = true;
+
+    // Hide the shield so the iframe / video receives pointer events directly
+    const shield = wrapper.querySelector('.an-video-shield');
+    if (shield) shield.style.display = 'none';
+
+    // Hide the resize overlay — it would block interaction with the embed
+    this.context.invoke('videoResizer.deselect');
+
+    // Visual feedback: button turns primary-coloured
+    this._previewBtn.classList.add('an-link-tooltip-btn--copied');
+    this._previewBtn.title = 'Exit Preview';
+
+    // Exit preview on mousedown outside the wrapper.
+    // Using 'mousedown' (not 'click') so clicks inside an iframe
+    // — which never bubble to the outer document — don't accidentally
+    // leave preview mode stuck. For <video> elements, mousedown on the
+    // video is inside the wrapper so contains() returns true → no exit.
+    this._previewClickOff = (e) => {
+      if (!wrapper.contains(e.target) && !this._el.contains(e.target)) {
+        this._exitPreview();
+      }
+    };
+    document.addEventListener('mousedown', this._previewClickOff, true);
+  }
+
+  _exitPreview() {
+    this._previewMode = false;
+
+    const wrapper = this._activeWrapper;
+    if (wrapper) {
+      // Restore the shield
+      const shield = wrapper.querySelector('.an-video-shield');
+      if (shield) shield.style.display = '';
+    }
+
+    // Reset button appearance
+    this._previewBtn.classList.remove('an-link-tooltip-btn--copied');
+    this._previewBtn.title = 'Preview Video';
+
+    if (this._previewClickOff) {
+      document.removeEventListener('mousedown', this._previewClickOff, true);
+      this._previewClickOff = null;
+    }
+  }
 }

package/src/js/renderer.js

@@ -99,6 +99,11 @@ export function renderLayout(targetEl, options) {
     }
   }
 
+  // Custom focus ring colour
+  if (options.focusColor) {
+    container.style.setProperty('--an-focus-color', options.focusColor);
+  }
+
   // Hide the original element; keep it in DOM for form submission
   targetEl.style.display = 'none';
   targetEl.insertAdjacentElement('afterend', container);

package/src/js/settings.js

@@ -45,6 +45,7 @@ import { defaultToolbar } from './module/Buttons.js';
  * @property {Function} [onDestroy]            - Callback fired when the editor is destroyed: (context) => void
  * @property {Function} [onCharLimitReached]   - Callback fired when the character limit is hit: (context) => void
  * @property {Function} [onWordLimitReached]   - Callback fired when the word limit is hit: (context) => void
+ * @property {string}   [focusColor]            - Custom focus ring colour, e.g. '#f97316'. Overrides the default blue.
  */
 
 /** @type {AsnOptions} */
@@ -131,4 +132,7 @@ export const defaultOptions = {
   onCharLimitReached: null,
   // Callback fired when the word limit is reached: function(context)
   onWordLimitReached: null,
+  // Custom focus ring colour — overrides the default blue when set.
+  // Accepts any valid CSS colour string, e.g. '#f97316', 'hsl(25,90%,55%)'.
+  focusColor: null,
 };

package/src/styles/autumnnote.scss

@@ -12,13 +12,13 @@
 .an-container {
   display: flex;
   flex-direction: column;
+  position: relative;
   border: 1px solid $an-border;
   border-radius: $an-radius;
   font-family: $an-font-family;
   font-size: $an-font-size;
   box-sizing: border-box;
   background: $an-bg;
-  overflow: hidden;
   // Prevent the container from participating in ancestor layout recalculations.
   // This limits reflow thrashing when editing large documents.
   contain: layout;
@@ -30,14 +30,27 @@
   }
 
   &.an-focused {
-    border-color: $an-primary;
-    box-shadow: 0 0 0 3px rgba($an-primary, 0.15);
+    border-color: var(--an-focus-color, #{$an-primary});
+    // color-mix() blends the focus colour with transparent for the glow ring.
+    // Falls back gracefully to the default blue glow in older browsers.
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--an-focus-color, #{$an-primary}) 18%, transparent);
   }
 
   &.an-disabled {
-    opacity: 0.6;
-    pointer-events: none;
-    user-select: none;
+    // Hide toolbar only — read-only view has no editing controls.
+    .an-toolbar {
+      display: none;
+    }
+
+    // Allow the user to select and copy text but block actual editing.
+    // Do NOT set pointer-events:none or user-select:none on the container —
+    // that would prevent text selection inside the editable area.
+    .an-editable {
+      cursor: text;
+      user-select: text;
+      // Subtle visual cue that the area is read-only.
+      background: #fafafa;
+    }
   }
 
   &.an-fullscreen {
@@ -234,9 +247,9 @@
 
 // Swatch popup panel
 .an-color-popup {
-  position: absolute;
-  top: calc(100% + 4px);
-  left: 0;
+  position: fixed;
+  // top / left are set dynamically by JS (getBoundingClientRect) so the popup
+  // escapes overflow:hidden / overflow:auto ancestors (toolbar scroll mode, etc.)
   z-index: 1100;
   background: $an-bg;
   border: 1px solid $an-border;
@@ -377,19 +390,25 @@
 .an-editable {
   flex: 1;
   padding: $an-editable-pad;
-  min-height: 200px;
+  min-height: 0;
   outline: none;
   line-height: $an-line-height;
   color: $an-text;
   overflow-y: auto;
   word-break: break-word;
 
-  // Placeholder
-  &.an-placeholder::before {
+  // 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.
+  &.an-placeholder:not(:focus)::before {
     content: attr(data-placeholder);
     color: $an-muted;
     pointer-events: none;
-    position: absolute;
+    float: left;
   }
 
   // Content styles
@@ -435,7 +454,7 @@
 
   .an-video-wrapper {
     position: relative;
-    display: inline-block;
+    display: block;
     max-width: 100%;
     margin: 4px 0;
 
@@ -667,6 +686,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+  flex-shrink: 0;
   height: $an-statusbar-h;
   padding: 0 8px;
   background: $an-statusbar-bg;
@@ -919,7 +939,7 @@
 // ---------------------------------------------------------------------------
 
 .an-image-resizer {
-  position: fixed;
+  position: absolute;
   z-index: 10000;
   box-sizing: border-box;
   border: 2px solid $an-primary;
@@ -956,7 +976,7 @@
 $an-video-accent: #8b5cf6; // violet-500
 
 .an-video-resizer {
-  position: fixed;
+  position: absolute;
   z-index: 10000;
   box-sizing: border-box;
   border: 2px solid $an-video-accent;
@@ -986,11 +1006,10 @@ $an-video-accent: #8b5cf6; // violet-500
   .an-resize-w  { top: calc(50% - 4px);  left: -4px;             cursor: w-resize;  }
 }
 
-// Selected video wrapper highlight (applied to .an-video-wrapper)
-.an-video-selected {
-  outline: 2px solid $an-video-accent;
-  outline-offset: 1px;
-}
+// .an-video-selected is applied by VideoResizer for JS state tracking.
+// Visual selection is handled entirely by the .an-video-resizer overlay,
+// so no CSS outline is needed here (two visible frames would appear otherwise).
+.an-video-selected {}
 
 // ---------------------------------------------------------------------------
 // Icon dialog
@@ -1082,7 +1101,7 @@ $an-video-accent: #8b5cf6; // violet-500
   display: grid;
   grid-template-columns: repeat(auto-fill, 56px);
   gap: 3px;
-  max-height: 256px;
+  height: 256px;
   overflow-y: auto;
   margin-bottom: 10px;
   padding: 4px;
@@ -1244,7 +1263,7 @@ $an-video-accent: #8b5cf6; // violet-500
   display: grid;
   grid-template-columns: repeat(auto-fill, 42px);
   gap: 2px;
-  max-height: 288px;
+  height: 288px;
   overflow-y: auto;
   margin-bottom: 10px;
   padding: 4px;
@@ -1572,6 +1591,11 @@ $an-video-accent: #8b5cf6; // violet-500
   .an-table-cell {
     background: #24273a;
     border-color: #3f3f5f;
+
+    &.active {
+      background: rgba(99, 102, 241, 0.3);
+      border-color: #6366f1;
+    }
   }
 
   .an-context-item { color: #cdd6f4; }
@@ -1670,25 +1694,31 @@ $an-video-accent: #8b5cf6; // violet-500
 .an-editable {
   ul.an-checklist {
     list-style: none;
-    padding-left: 0.5em;
+    padding-left: 0;
     margin: 0.5em 0;
 
     li {
-      display: flex;
-      align-items: baseline;
-      gap: 6px;
-      padding: 2px 0;
+      // Use padding-left + absolute checkbox so text is a normal inline flow
+      // (not an anonymous flex item). This ensures font-size, line-height and
+      // all inline formats are identical to regular paragraph text.
+      position: relative;
+      padding-left: 22px;
+      padding-top: 1px;
+      padding-bottom: 1px;
+      min-height: 1.4em;
       line-height: inherit;
+      font-size: inherit;
+      font-family: inherit;
 
       input[type='checkbox'] {
-        flex-shrink: 0;
+        position: absolute;
+        left: 0;
+        top: 0.25em;
         width: 14px;
         height: 14px;
         margin: 0;
         cursor: pointer;
         accent-color: $an-primary;
-        position: relative;
-        top: 2px;
       }
 
       // Checked item: dim + strike-through the text node

package/types/index.d.ts

@@ -43,7 +43,7 @@ export interface AsnOptions {
   /** Number of spaces inserted when Tab is pressed (outside a list). */
   tabSize?: number;
   /** Callback on content change. */
-  onChange?: (context: Context) => void;
+  onChange?: (html: string) => void;
   /** Callback on editor focus. */
   onFocus?: (context: Context) => void;
   /** Callback fired on editor blur. */
@@ -59,9 +59,9 @@ export interface AsnOptions {
   /** Callback fired when the word limit is reached. */
   onWordLimitReached?: (context: Context) => void;
   /** Custom image upload handler. */
-  onImageUpload?: (files: FileList) => void;
+  onImageUpload?: (files: File[]) => void;
   /** Callback when an image upload error occurs. */
-  onImageError?: (error: Error) => void;
+  onImageError?: (error: { file?: File; message: string; error?: unknown }) => void;
   /** Stick the toolbar to the viewport top when scrolling. */
   stickyToolbar?: boolean;
   /** Top offset in px for sticky toolbar (e.g. height of a fixed nav bar). */
@@ -101,7 +101,7 @@ export interface AsnOptions {
   /** Insert a header row (<thead>) when creating new tables. */
   tableHeaderRow?: boolean;
   /** Callback fired after every paste event. */
-  onPaste?: (data: { text: string; html: string }) => void;
+  onPaste?: (data: { text: string; html: string | null }) => void;
   /** Additional color swatches shown at the top of the color picker. */
   colorSwatches?: string[];
 }