autumnnote 1.0.0

package/src/js/module/VideoTooltip.js

@@ -0,0 +1,252 @@
+// VideoTooltip.js - Hover tooltip for video wrappers inside the editor
+// Displays a horizontal action bar below (or above) the selected video,
+// similar in appearance and interaction to LinkTooltip.
+import { createElement, on } from '../core/dom.js';
+
+const ICONS = {
+  floatLeft:   `<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="2" y="4" width="8" height="8" rx="1"/><line x1="12" y1="6" x2="22" y2="6"/><line x1="12" y1="9" x2="22" y2="9"/><line x1="12" y1="12" x2="22" y2="12"/><line x1="2" y1="16" x2="22" y2="16"/><line x1="2" y1="20" x2="18" y2="20"/></svg>`,
+  floatRight:  `<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="14" y="4" width="8" height="8" rx="1"/><line x1="2" y1="6" x2="12" y2="6"/><line x1="2" y1="9" x2="12" y2="9"/><line x1="2" y1="12" x2="12" y2="12"/><line x1="2" y1="16" x2="22" y2="16"/><line x1="2" y1="20" x2="18" y2="20"/></svg>`,
+  floatNone:   `<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="3" y="3" width="8" height="8" rx="1"/><line x1="3" y1="15" x2="21" y2="15"/><line x1="3" y1="19" x2="17" y2="19"/></svg>`,
+  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>`,
+};
+
+const SHOW_DELAY = 100;
+const HIDE_DELAY = 180;
+
+export class VideoTooltip {
+  /** @param {import('../Context.js').Context} context */
+  constructor(context) {
+    this.context = context;
+    this._el = null;
+    this._activeWrapper = null;
+    this._showTimer = null;
+    this._hideTimer = null;
+    this._disposers = [];
+  }
+
+  initialize() {
+    this._el = this._buildTooltip();
+    document.body.appendChild(this._el);
+
+    const editable = this.context.layoutInfo.editable;
+
+    this._disposers.push(
+      on(editable, 'mouseover', (e) => {
+        // 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)) {
+          this._scheduleShow(wrapper);
+        }
+      }),
+      on(editable, 'mouseout', (e) => {
+        const to = e.relatedTarget;
+        if (!to || (!editable.contains(to) && !this._el.contains(to))) {
+          this._scheduleHide();
+        }
+      }),
+      on(document, 'click', (e) => {
+        if (
+          this._activeWrapper &&
+          !this._activeWrapper.contains(e.target) &&
+          !this._el.contains(e.target)
+        ) {
+          this._hide();
+        }
+      }),
+    );
+
+    return this;
+  }
+
+  destroy() {
+    this._clearTimers();
+    this._disposers.forEach((d) => d());
+    this._disposers = [];
+    if (this._el && this._el.parentNode) this._el.parentNode.removeChild(this._el);
+    this._el = null;
+  }
+
+  // ---------------------------------------------------------------------------
+  // Build
+  // ---------------------------------------------------------------------------
+
+  _buildTooltip() {
+    const el = createElement('div', {
+      class: 'an-link-tooltip an-video-tooltip',
+      role: 'toolbar',
+      'aria-label': 'Video actions',
+    });
+    el.style.display = 'none';
+
+    // Label
+    this._label = createElement('span', { class: 'an-link-tooltip-url' });
+    this._label.textContent = 'Video';
+    el.appendChild(this._label);
+
+    el.appendChild(createElement('div', { class: 'an-link-tooltip-sep' }));
+
+    this._floatLeftBtn  = this._makeBtn(ICONS.floatLeft,    'Float Left',     () => this._setFloat('left'));
+    this._floatNoneBtn  = this._makeBtn(ICONS.floatNone,    'No Float',       () => this._setFloat(''));
+    this._alignCenterBtn = this._makeBtn(ICONS.alignCenter, 'Align Center',   () => this._setCenter());
+    this._floatRightBtn = this._makeBtn(ICONS.floatRight,   'Float Right',    () => this._setFloat('right'));
+
+    el.appendChild(this._floatLeftBtn);
+    el.appendChild(this._floatNoneBtn);
+    el.appendChild(this._alignCenterBtn);
+    el.appendChild(this._floatRightBtn);
+
+    el.appendChild(createElement('div', { class: 'an-link-tooltip-sep' }));
+
+    this._originalBtn = this._makeBtn(ICONS.originalSize, 'Original Size', () => this._resetSize());
+
+    el.appendChild(this._originalBtn);
+
+    el.appendChild(createElement('div', { class: 'an-link-tooltip-sep' }));
+
+    this._deleteBtn = this._makeBtn(ICONS.deleteVideo, 'Delete Video', () => this._delete(), true);
+
+    el.appendChild(this._deleteBtn);
+
+    // Keep tooltip alive while hovering it
+    this._disposers.push(
+      on(el, 'mouseenter', () => this._clearTimers()),
+      on(el, 'mouseleave', () => this._scheduleHide()),
+    );
+
+    return el;
+  }
+
+  /**
+   * @param {string} icon
+   * @param {string} title
+   * @param {Function} handler
+   * @param {boolean} [isDanger]
+   */
+  _makeBtn(icon, title, handler, isDanger = false) {
+    const btn = createElement('button', {
+      type: 'button',
+      class: isDanger ? 'an-link-tooltip-btn an-link-tooltip-btn--danger' : 'an-link-tooltip-btn',
+      title,
+    });
+    btn.innerHTML = icon;
+    this._disposers.push(on(btn, 'click', (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      handler();
+    }));
+    return btn;
+  }
+
+  // ---------------------------------------------------------------------------
+  // Show / Hide
+  // ---------------------------------------------------------------------------
+
+  _scheduleShow(wrapper) {
+    if (this._activeWrapper === wrapper && this._el.style.display !== 'none') return;
+    clearTimeout(this._hideTimer);
+    this._hideTimer = null;
+    clearTimeout(this._showTimer);
+    this._showTimer = setTimeout(() => {
+      this._activeWrapper = wrapper;
+      this._show(wrapper);
+    }, SHOW_DELAY);
+  }
+
+  _scheduleHide() {
+    clearTimeout(this._showTimer);
+    this._showTimer = null;
+    if (this._hideTimer) return;
+    this._hideTimer = setTimeout(() => this._hide(), HIDE_DELAY);
+  }
+
+  _show(wrapper) {
+    this._el.style.display = 'flex';
+    this._positionNear(wrapper);
+  }
+
+  _hide() {
+    this._el.style.display = 'none';
+    this._activeWrapper = null;
+    this._clearTimers();
+  }
+
+  _clearTimers() {
+    clearTimeout(this._showTimer);
+    clearTimeout(this._hideTimer);
+    this._showTimer = null;
+    this._hideTimer = null;
+  }
+
+  _positionNear(wrapper) {
+    const rect   = wrapper.getBoundingClientRect();
+    const tipW   = this._el.offsetWidth  || 220;
+    const tipH   = this._el.offsetHeight || 32;
+    const margin = 6;
+
+    let top  = rect.bottom + margin;
+    let left = rect.left + (rect.width - tipW) / 2;
+
+    if (top + tipH > window.innerHeight - margin) top = rect.top - tipH - margin;
+    if (left + tipW > window.innerWidth  - margin) left = window.innerWidth - tipW - margin;
+    if (left < margin) left = margin;
+
+    this._el.style.top  = `${top}px`;
+    this._el.style.left = `${left}px`;
+  }
+
+  // ---------------------------------------------------------------------------
+  // Actions
+  // ---------------------------------------------------------------------------
+
+  _setFloat(value) {
+    const wrapper = this._activeWrapper;
+    if (!wrapper) return;
+    wrapper.style.float        = value;
+    wrapper.style.display      = value ? 'inline-block' : '';
+    wrapper.style.marginLeft   = value === 'right' ? '12px' : '';
+    wrapper.style.marginRight  = value === 'left'  ? '12px' : '';
+    this.context.invoke('editor.afterCommand');
+    this.context.invoke('videoResizer.updateOverlay');
+    this._positionNear(wrapper);
+  }
+
+  _setCenter() {
+    const wrapper = this._activeWrapper;
+    if (!wrapper) return;
+    wrapper.style.float       = '';
+    wrapper.style.display     = 'block';
+    wrapper.style.marginLeft  = 'auto';
+    wrapper.style.marginRight = 'auto';
+    this.context.invoke('editor.afterCommand');
+    this.context.invoke('videoResizer.updateOverlay');
+    this._positionNear(wrapper);
+  }
+
+  _resetSize() {
+    const wrapper = this._activeWrapper;
+    if (!wrapper) return;
+    const embed = wrapper.querySelector('iframe, video');
+    wrapper.style.width  = '';
+    wrapper.style.height = '';
+    if (embed) {
+      embed.removeAttribute('width');
+      embed.removeAttribute('height');
+      embed.style.width  = '';
+      embed.style.height = '';
+    }
+    this.context.invoke('editor.afterCommand');
+    this.context.invoke('videoResizer.updateOverlay');
+    this._positionNear(wrapper);
+  }
+
+  _delete() {
+    const wrapper = this._activeWrapper;
+    if (!wrapper) return;
+    this._hide();
+    this.context.invoke('videoResizer.deselect');
+    if (wrapper.parentNode) wrapper.parentNode.removeChild(wrapper);
+    this.context.invoke('editor.afterCommand');
+  }
+}

package/src/js/renderer.js

@@ -0,0 +1,107 @@
+/**
+ * renderer.js - Builds the editor DOM structure
+ * Inspired by Summernote's renderer.js
+ */
+
+import { createElement } from './core/dom.js';
+import { sanitiseHTML } from './core/sanitise.js';
+
+/**
+ * Renders the editor layout around the original element.
+ *
+ * Structure:
+ *   <div class="an-container">
+ *     <div class="an-toolbar">...</div>
+ *     <div class="an-editable" contenteditable="true">...</div>
+ *     <div class="an-statusbar">...</div>
+ *   </div>
+ *
+ * @param {HTMLElement} targetEl - the original element to replace/wrap
+ * @param {import('./settings.js').AsnOptions} options
+ * @returns {{ container: HTMLElement, editable: HTMLElement }}
+ */
+export function renderLayout(targetEl, options) {
+  const container = createElement('div', { class: 'an-container' });
+
+  // Editable area
+  const editable = createElement('div', {
+    class: 'an-editable',
+    contenteditable: options.readOnly ? 'false' : 'true',
+    spellcheck: String(options.spellcheck !== false),
+    'aria-multiline': 'true',
+    'aria-label': 'Rich text editor',
+    role: 'textbox',
+  });
+
+  // Restore auto-saved content when available; fall back to element content
+  let initialContent = '';
+  if (options.autoSave && options.autoSaveKey) {
+    try { initialContent = localStorage.getItem(options.autoSaveKey) || ''; } catch (_) {}
+  }
+  if (!initialContent) {
+    initialContent = targetEl.tagName === 'TEXTAREA'
+      ? (targetEl.value || '').trim()
+      : (targetEl.innerHTML || '').trim();
+  }
+  editable.innerHTML = sanitiseHTML(initialContent, { allowIframes: true });
+
+  // Apply default font family so the editable renders in the configured font
+  const defaultFont = options.defaultFontFamily || (options.fontFamilies && options.fontFamilies[0]);
+  if (defaultFont) {
+    editable.style.fontFamily = defaultFont;
+  }
+
+  // Apply default font size so the size dropdown shows the correct value on startup
+  if (options.defaultFontSize) {
+    editable.style.fontSize = options.defaultFontSize;
+  }
+
+  // Apply height options.
+  // `height` sets the initial visible height (takes priority).
+  // `minHeight` is the drag-resize floor — only applied when no explicit `height` is given.
+  if (options.height) {
+    editable.style.minHeight = `${options.height}px`;
+  } else if (options.minHeight) {
+    editable.style.minHeight = `${options.minHeight}px`;
+  }
+  if (options.maxHeight) {
+    editable.style.maxHeight = `${options.maxHeight}px`;
+  }
+
+  container.appendChild(editable);
+
+  // Apply dark theme
+  if (options.theme === 'dark') {
+    container.classList.add('an-theme-dark');
+  }
+
+  // Read-only mode
+  if (options.readOnly) {
+    container.classList.add('an-disabled');
+  }
+
+  // Text direction
+  if (options.direction === 'rtl') {
+    editable.setAttribute('dir', 'rtl');
+    container.classList.add('an-dir-rtl');
+  }
+
+  // Toolbar overflow
+  if (options.toolbarOverflow === 'scroll') {
+    container.classList.add('an-toolbar-overflow-scroll');
+  }
+
+  // Configure sticky toolbar
+  if (options.stickyToolbar) {
+    container.classList.add('an-sticky-toolbar');
+    if (options.stickyToolbarOffset) {
+      container.style.setProperty('--an-sticky-top', `${options.stickyToolbarOffset}px`);
+    }
+  }
+
+  // Hide the original element; keep it in DOM for form submission
+  targetEl.style.display = 'none';
+  targetEl.insertAdjacentElement('afterend', container);
+
+  return { container, editable };
+}

package/src/js/settings.js

@@ -0,0 +1,134 @@
+/**
+ * settings.js - Default editor options
+ * Inspired by Summernote's settings.js
+ */
+
+import { defaultToolbar } from './module/Buttons.js';
+
+/**
+ * @typedef {object} AsnOptions
+ * @property {string}   [placeholder]       - Placeholder text when editor is empty
+ * @property {number}   [height]            - Editor height in px (min)
+ * @property {number}   [minHeight]         - Minimum height in px
+ * @property {number}   [maxHeight]         - Maximum height in px (0 = unlimited)
+ * @property {boolean}  [focus]             - Auto-focus on init
+ * @property {boolean}  [resizable]         - Show resize handle
+ * @property {Array}    [toolbar]           - Toolbar button group config
+ * @property {boolean}  [pasteAsPlainText]  - Force plain-text paste
+ * @property {boolean}  [pasteCleanHTML]    - Sanitise HTML on paste
+ * @property {boolean}  [pasteStripAttributes] - Strip class/style/data-* from pasted HTML (default: false)
+ * @property {boolean}  [allowImageUpload]  - Allow file upload in image dialog
+ * @property {number}   [maxImageSize]      - Max upload size in MB
+ * @property {number}   [tabSize]           - Spaces per tab in non-list context
+ * @property {Function} [onChange]          - Callback on content change
+ * @property {Function} [onFocus]           - Callback on focus
+ * @property {Function} [onBlur]            - Callback on blur
+ * @property {Function} [onImageUpload]     - Custom upload handler: (files) => void
+ * @property {boolean}  [stickyToolbar]     - Stick the toolbar to the viewport top when scrolling
+ * @property {number}   [stickyToolbarOffset] - Top offset in px for sticky toolbar (e.g. fixed nav height)
+ * @property {string}   [theme]             - 'light' (default) | 'dark'
+ * @property {boolean}  [codeHighlight]     - Auto-load Prism.js for syntax highlighting of code blocks
+ * @property {string}   [codeHighlightCDN]  - CDN base URL for Prism assets (defaults to cdnjs)
+ * @property {boolean}  [markdownPaste]     - Convert pasted Markdown text to HTML (default: true)
+ * @property {boolean}  [readOnly]          - Start editor in read-only / non-editable mode
+ * @property {boolean}  [spellcheck]        - Enable browser spellcheck in the editable area (default: true)
+ * @property {string}   [direction]         - Text direction: 'ltr' (default) | 'rtl'
+ * @property {string}   [toolbarOverflow]   - Toolbar overflow strategy: 'wrap' (default) | 'scroll'
+ * @property {boolean}  [autoSave]          - Auto-save content to localStorage on change
+ * @property {string}   [autoSaveKey]       - localStorage key used for auto-save (default: 'autumnnote-autosave')
+ * @property {number}   [maxChars]          - Maximum character count (0 = unlimited). Shows warning in statusbar.
+ * @property {number}   [maxWords]          - Maximum word count (0 = unlimited). Shows warning in statusbar.
+ * @property {boolean}  [tableHeaderRow]    - Insert a header row (<thead><th>) when creating tables
+ * @property {Function} [onPaste]           - Callback fired on every paste: ({ text, html }) => void
+ * @property {Function} [onSelectionChange]   - Callback fired on cursor/selection change: (context) => void
+ * @property {string[]}  [colorSwatches]       - Custom brand colour swatches prepended to the colour-picker palette
+ * @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
+ */
+
+/** @type {AsnOptions} */
+export const defaultOptions = {
+  placeholder: '',
+  height: 200,
+  minHeight: 100,
+  maxHeight: 0,
+  focus: false,
+  resizable: true,
+  toolbar: defaultToolbar,
+  // UI integration options
+  // If `useBootstrap` is true, toolbar buttons will use the Bootstrap button classes
+  // (set `toolbarButtonClass` to customize). Works with Bootstrap 4 and 5.
+  useBootstrap: false,
+  toolbarButtonClass: 'btn btn-sm btn-light',
+  // Icon options — uses Font Awesome by default. Consumers must include Font Awesome CSS.
+  useFontAwesome: true,
+  // Default FontAwesome prefix — 'fas' for FA5, 'fa-solid' for FA6. Change if needed.
+  fontAwesomeClass: 'fas',
+  pasteAsPlainText: false,
+  pasteCleanHTML: true,
+  pasteStripAttributes: false,
+  allowImageUpload: true,
+  maxImageSize: 5,
+  tabSize: 4,
+  onChange: null,
+  onFocus: null,
+  onBlur: null,
+  onInit: null,
+  onImageUpload: null,
+  onImageError: null,
+  stickyToolbar: false,
+  stickyToolbarOffset: 0,
+  theme: 'light',
+  codeHighlight: true,
+  codeHighlightCDN: 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0',
+  markdownPaste: true,
+  historyLimit: 100,
+  // Default font family applied to the editor and shown in the dropdown when no explicit font is set
+  defaultFontFamily: 'Arial',
+  // Default font size applied to the editor and shown in the size dropdown when no explicit size is set
+  defaultFontSize: '14px',
+  // Font families shown in the toolbar font-family dropdown
+  fontFamilies: [
+    'Arial',
+    'Arial Black',
+    'Comic Sans MS',
+    'Courier New',
+    'Georgia',
+    'Impact',
+    'Tahoma',
+    'Times New Roman',
+    'Trebuchet MS',
+    'Verdana',
+  ],
+  // Read-only mode — disables all editing when true
+  readOnly: false,
+  // Enable/disable browser spell-check on the editable area
+  spellcheck: true,
+  // Text direction: 'ltr' (default) or 'rtl'
+  direction: 'ltr',
+  // How the toolbar handles overflow: 'wrap' (default, wraps to next line) or 'scroll' (single scrollable row)
+  toolbarOverflow: 'wrap',
+  // Auto-save content to localStorage on every change
+  autoSave: false,
+  // localStorage key used when autoSave is enabled
+  autoSaveKey: 'autumnnote-autosave',
+  // Maximum character count (0 = unlimited)
+  maxChars: 0,
+  // Maximum word count (0 = unlimited)
+  maxWords: 0,
+  // Insert a header row (<thead>) when creating new tables
+  tableHeaderRow: false,
+  // Callback fired on every cursor/selection change inside the editor
+  onSelectionChange: null,
+  // Custom brand colour swatches to prepend to the toolbar colour-picker palette
+  colorSwatches: [],
+  // Callback fired after a paste event: function({ text, html })
+  onPaste: null,
+  // Callback fired just before the editor instance is destroyed
+  onDestroy: null,
+  // Callback fired when the character limit is reached: function(context)
+  onCharLimitReached: null,
+  // Callback fired when the word limit is reached: function(context)
+  onWordLimitReached: null,
+};

package/src/styles/_variables.scss

@@ -0,0 +1,48 @@
+// AutumnNote — SCSS variables
+// Inspired by Summernote's variables
+
+// Colors
+$an-primary:        #3b82f6 !default;   // blue-500
+$an-primary-hover:  #2563eb !default;   // blue-600
+$an-border:         #d1d5db !default;   // gray-300
+$an-bg:             #ffffff !default;
+$an-bg-toolbar:     #f9fafb !default;   // gray-50
+$an-bg-btn-hover:   #f3f4f6 !default;   // gray-100
+$an-bg-btn-active:  #dbeafe !default;   // blue-100
+$an-text:           #111827 !default;   // gray-900
+$an-muted:          #6b7280 !default;   // gray-500
+$an-statusbar-bg:   #f9fafb !default;
+
+// Dark theme color overrides  (applied via .an-theme-dark on .an-container)
+$an-dark-bg:             #1e1e2e !default;
+$an-dark-bg-toolbar:     #181825 !default;
+$an-dark-bg-btn-hover:   #313244 !default;
+$an-dark-bg-btn-active:  #1e3a5f !default;
+$an-dark-border:         #45475a !default;
+$an-dark-text:           #cdd6f4 !default;
+$an-dark-muted:          #6c7086 !default;
+$an-dark-statusbar-bg:   #181825 !default;
+
+// Fonts
+$an-font-family:    system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif !default;
+$an-font-size:      14px !default;
+$an-line-height:    1.6 !default;
+
+// Sizing
+$an-radius:         6px !default;
+$an-radius-sm:      4px !default;
+$an-btn-height:     30px !default;
+$an-btn-padding:    0 8px !default;
+$an-toolbar-gap:    4px !default;
+$an-toolbar-pad:    6px 8px !default;
+$an-editable-pad:   12px 14px !default;
+$an-statusbar-h:    24px !default;
+
+// Dialog
+$an-dialog-z:       9999 !default;
+$an-dialog-bg:      rgba(0, 0, 0, 0.45) !default;
+$an-dialog-width:   420px !default;
+$an-dialog-radius:  8px !default;
+
+// Transitions
+$an-transition:     0.15s ease !default;