overtype 2.3.10 → 2.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "overtype",
-  "version": "2.3.10",
+  "version": "2.4.0",
   "description": "A lightweight markdown editor library with perfect WYSIWYG alignment using an invisible textarea overlay",
   "main": "dist/overtype.cjs",
   "module": "dist/overtype.esm.js",
@@ -13,7 +13,7 @@
       "types": "./dist/overtype.d.ts",
       "import": "./dist/overtype.esm.js",
       "require": "./dist/overtype.cjs",
-      "browser": "./dist/overtype.iife.min.js"
+      "browser": "./dist/overtype.min.js"
     },
     "./parser": {
       "import": "./src/parser.js",
@@ -31,7 +31,7 @@
     "build:prod": "npm test && npm run build",
     "dev": "http-server website -p 8080 -c-1",
     "watch": "node scripts/build.js --watch",
-    "test": "node test/overtype.test.js && node test/preview-mode.test.js && node test/links.test.js && node test/api-methods.test.js && node test/comprehensive-alignment.test.js && node test/sanctuary-parsing.test.js && node test/mode-switching.test.js && node test/syntax-highlighting.test.js && node test/webcomponent.test.js && node test/custom-syntax.test.js && node test/auto-theme.test.js && npm run test:types",
+    "test": "node test/overtype.test.js && node test/preview-mode.test.js && node test/links.test.js && node test/api-methods.test.js && node test/keyboard-accessibility.test.js && node test/comprehensive-alignment.test.js && node test/sanctuary-parsing.test.js && node test/mode-switching.test.js && node test/toolbar.test.js && node test/syntax-highlighting.test.js && node test/webcomponent.test.js && node test/custom-syntax.test.js && node test/auto-theme.test.js && npm run test:types",
     "test:main": "node test/overtype.test.js",
     "test:preview": "node test/preview-mode.test.js",
     "test:links": "node test/links.test.js",

package/src/link-tooltip.js

@@ -4,6 +4,7 @@
  */
 
 import { computePosition, offset, shift, flip } from '@floating-ui/dom';
+import { MarkdownParser } from './parser.js';
 
 export class LinkTooltip {
   constructor(editor) {
@@ -85,7 +86,10 @@ export class LinkTooltip {
       e.preventDefault();
       e.stopPropagation();
       if (this.currentLink) {
-        window.open(this.currentLink.url, '_blank');
+        const safeUrl = MarkdownParser.sanitizeUrl(this.currentLink.url);
+        if (safeUrl !== '#') {
+          window.open(safeUrl, '_blank');
+        }
         this.hide();
       }
     });
@@ -123,7 +127,7 @@ export class LinkTooltip {
       if (position >= start && position <= end) {
         return {
           text: match[1],
-          url: match[2],
+          url: this.transformUrl(match[2]),
           index: linkIndex,
           start: start,
           end: end
@@ -135,6 +139,18 @@ export class LinkTooltip {
     return null;
   }
 
+  transformUrl(url) {
+    const transform = this.editor.options.transformLinkUrl;
+    if (typeof transform !== 'function') return url;
+    try {
+      const result = transform(url);
+      return typeof result === 'string' ? result : url;
+    } catch (e) {
+      console.warn('transformLinkUrl threw:', e);
+      return url;
+    }
+  }
+
   async show(linkInfo) {
     this.currentLink = linkInfo;
     this.cancelHide();

package/src/overtype.d.ts

@@ -84,6 +84,15 @@ export interface ToolbarButton {
     setValue: (value: string) => void;
     event: MouseEvent;
   }) => void | Promise<void>;
+
+  /** Canonical action identifier used by shortcuts and performAction */
+  actionId?: string;
+
+  /** Return true when this button should be announced as pressed */
+  isActive?: (context: {
+    editor: OverType;
+    activeFormats: string[];
+  }) => boolean;
 }
 
 export interface MobileOptions {
@@ -122,6 +131,7 @@ export interface Options {
   spellcheck?: boolean;       // Browser spellcheck (default: false)
   statsFormatter?: (stats: Stats) => string;
   codeHighlighter?: ((code: string, language: string) => string) | null;  // Per-instance code highlighter
+  transformLinkUrl?: ((url: string) => string) | null;  // Transform URLs shown/opened in the link tooltip
 
   // Theme (deprecated in favor of global theme)
   theme?: string | Theme;
@@ -208,6 +218,8 @@ export interface OverTypeInstance {
   showToolbar(): void;
   hideToolbar(): void;
   insertAtCursor(text: string): void;
+  indentSelection(): void;
+  outdentSelection(): void;
 
   // HTML output methods
   getRenderedHTML(options?: RenderOptions): string;

package/src/overtype.js

@@ -12,6 +12,25 @@ import { Toolbar } from './toolbar.js';
 import { LinkTooltip } from './link-tooltip.js';
 import { defaultToolbarButtons, toolbarButtons as builtinToolbarButtons } from './toolbar-buttons.js';
 
+let _isSafariCache;
+/**
+ * Detect Safari (desktop, iOS, and iPadOS), excluding Chromium/Firefox-on-iOS.
+ * Memoized; guards against non-browser environments.
+ * @returns {boolean}
+ */
+function isSafariBrowser() {
+  if (_isSafariCache !== undefined) return _isSafariCache;
+  _isSafariCache = false;
+  if (typeof navigator !== 'undefined') {
+    const ua = navigator.userAgent || '';
+    _isSafariCache =
+      /^((?!chrome|android|crios|fxios|edg|opr).)*safari/i.test(ua) ||
+      /iPad|iPhone|iPod/.test(ua) ||
+      (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1 && /Safari/.test(ua));
+  }
+  return _isSafariCache;
+}
+
 /**
  * Build action map from toolbar button configurations
  * @param {Array} buttons - Array of button config objects
@@ -131,6 +150,8 @@ class OverType {
       this.options = this._mergeOptions(options);
       this.instanceId = ++OverType.instanceCount;
       this.initialized = false;
+      this._isSafari = isSafariBrowser();
+      this._safariReflowRaf = null;
 
       // Inject styles if needed
       OverType.injectStyles();
@@ -225,7 +246,8 @@ class OverType {
         statsFormatter: null,
         smartLists: true,  // Enable smart list continuation
         codeHighlighter: null,  // Per-instance code highlighter
-        spellcheck: false  // Browser spellcheck (disabled by default)
+        spellcheck: false,  // Browser spellcheck (disabled by default)
+        transformLinkUrl: null  // Transform URLs shown/opened in the link tooltip
       };
       
       // Remove theme and colors from options - these are now global
@@ -296,6 +318,9 @@ class OverType {
 
       // Disable autofill, spellcheck, and extensions
       this._configureTextarea();
+      this._ensureTextareaId();
+
+      this._syncPreviewInteractivity();
 
       // Apply any new options
       this._applyOptions();
@@ -390,6 +415,8 @@ class OverType {
         });
       }
 
+      this._ensureTextareaId();
+
       // Create preview div
       this.preview = document.createElement('div');
       this.preview.className = 'overtype-preview';
@@ -429,6 +456,8 @@ class OverType {
         // Ensure auto-resize class is removed if not using auto-resize
         this.container.classList.remove('overtype-auto-resize');
       }
+
+      this._syncPreviewInteractivity();
     }
 
     /**
@@ -445,6 +474,35 @@ class OverType {
       this.textarea.setAttribute('data-enable-grammarly', 'false');
     }
 
+    /**
+     * Ensure the textarea can be referenced by aria-controls
+     * @private
+     */
+    _ensureTextareaId() {
+      if (!this.textarea.id) {
+        this.textarea.id = `overtype-${this.instanceId}-input`;
+      }
+    }
+
+    /**
+     * Keep rendered preview content out of keyboard navigation until Preview mode.
+     * @private
+     */
+    _syncPreviewInteractivity() {
+      if (!this.preview || !this.container) return;
+
+      const isPreviewMode = this.container.dataset.mode === 'preview';
+      this.preview.inert = !isPreviewMode;
+      this.preview.toggleAttribute('inert', !isPreviewMode);
+
+      if (isPreviewMode) {
+        this.preview.removeAttribute('aria-hidden');
+        return;
+      }
+
+      this.preview.setAttribute('aria-hidden', 'true');
+    }
+
     /**
      * Create and setup toolbar
      * @private
@@ -850,6 +908,28 @@ class OverType {
     handleInput(event) {
       this.updatePreview();
       this._notifyChange();
+      this._scheduleSafariReflow();
+    }
+
+    /**
+     * Force Safari to re-shape stale textarea text after an edit.
+     * Safari can leave a textarea's glyph layout cached after incremental edits,
+     * desyncing the caret/wrap from the styled preview overlay. Toggling
+     * letter-spacing (with !important to beat the stylesheet rule) and reading
+     * offsetHeight forces a synchronous re-shape. Safari-only, coalesced to one
+     * run per animation frame.
+     * @private
+     */
+    _scheduleSafariReflow() {
+      if (!this._isSafari || this._safariReflowRaf) return;
+      this._safariReflowRaf = requestAnimationFrame(() => {
+        this._safariReflowRaf = null;
+        const ta = this.textarea;
+        if (!ta) return;
+        ta.style.setProperty('letter-spacing', '-0.001px', 'important');
+        void ta.offsetHeight;
+        ta.style.removeProperty('letter-spacing');
+      });
     }
 
     /**
@@ -877,75 +957,16 @@ class OverType {
      * @private
      */
     handleKeydown(event) {
-      // Handle Tab key to prevent focus loss and insert spaces
+      // Let collapsed Tab/Shift+Tab use native focus traversal.
       if (event.key === 'Tab') {
         const start = this.textarea.selectionStart;
         const end = this.textarea.selectionEnd;
-        const value = this.textarea.value;
 
-        // If Shift+Tab without a selection, allow default behavior (navigate to previous element)
-        if (event.shiftKey && start === end) {
+        if (start !== end && this._canEditTextarea()) {
+          event.preventDefault();
+          event.shiftKey ? this.outdentSelection() : this.indentSelection();
           return;
         }
-
-        event.preventDefault();
-
-        // If there's a selection, indent/outdent based on shift key
-        if (start !== end && event.shiftKey) {
-          // Outdent: remove 2 spaces from start of each selected line
-          const before = value.substring(0, start);
-          const selection = value.substring(start, end);
-          const after = value.substring(end);
-          
-          const lines = selection.split('\n');
-          const outdented = lines.map(line => line.replace(/^  /, '')).join('\n');
-          
-          // Try to use execCommand first to preserve undo history
-          if (document.execCommand) {
-            // Select the text that needs to be replaced
-            this.textarea.setSelectionRange(start, end);
-            document.execCommand('insertText', false, outdented);
-          } else {
-            // Fallback to direct manipulation
-            this.textarea.value = before + outdented + after;
-            this.textarea.selectionStart = start;
-            this.textarea.selectionEnd = start + outdented.length;
-          }
-        } else if (start !== end) {
-          // Indent: add 2 spaces to start of each selected line
-          const before = value.substring(0, start);
-          const selection = value.substring(start, end);
-          const after = value.substring(end);
-          
-          const lines = selection.split('\n');
-          const indented = lines.map(line => '  ' + line).join('\n');
-          
-          // Try to use execCommand first to preserve undo history
-          if (document.execCommand) {
-            // Select the text that needs to be replaced
-            this.textarea.setSelectionRange(start, end);
-            document.execCommand('insertText', false, indented);
-          } else {
-            // Fallback to direct manipulation
-            this.textarea.value = before + indented + after;
-            this.textarea.selectionStart = start;
-            this.textarea.selectionEnd = start + indented.length;
-          }
-        } else {
-          // No selection: just insert 2 spaces
-          // Use execCommand to preserve undo history
-          if (document.execCommand) {
-            document.execCommand('insertText', false, '  ');
-          } else {
-            // Fallback to direct manipulation
-            this.textarea.value = value.substring(0, start) + '  ' + value.substring(end);
-            this.textarea.selectionStart = this.textarea.selectionEnd = start + 2;
-          }
-        }
-        
-        // Trigger input event to update preview
-        this.textarea.dispatchEvent(new Event('input', { bubbles: true }));
-        return;
       }
       
       // Handle Enter key for smart list continuation
@@ -1134,6 +1155,7 @@ class OverType {
 
       if (didChange) {
         this._notifyChange();
+        this._scheduleSafariReflow();
       }
     }
 
@@ -1205,6 +1227,77 @@ class OverType {
     getPreviewHTML() {
       return this.preview.innerHTML;
     }
+
+    /**
+     * Indent the current line or selected lines by two spaces.
+     */
+    indentSelection() {
+      this._replaceSelectedLines(line => `  ${line}`);
+    }
+
+    /**
+     * Outdent the current line or selected lines by up to two spaces or one tab.
+     */
+    outdentSelection() {
+      this._replaceSelectedLines(line => line.replace(/^( {1,2}|\t)/, ''));
+    }
+
+    /**
+     * Replace full lines touched by the current selection.
+     * @private
+     */
+    _replaceSelectedLines(transformLine) {
+      if (!this._canEditTextarea()) return false;
+
+      const textarea = this.textarea;
+      const { selectionStart, selectionEnd, value } = textarea;
+      const lineStart = value.lastIndexOf('\n', selectionStart - 1) + 1;
+      const effectiveEnd = this._effectiveSelectionEnd(value, selectionStart, selectionEnd);
+      const lineEndOffset = value.indexOf('\n', effectiveEnd);
+      const lineEnd = lineEndOffset === -1 ? value.length : lineEndOffset;
+      const selectedLines = value.slice(lineStart, lineEnd);
+      const replacement = selectedLines
+        .split('\n')
+        .map(transformLine)
+        .join('\n');
+
+      if (replacement === selectedLines) return false;
+
+      // Replace via execCommand to preserve native undo history (matches
+      // insertAtCursor); fall back to setRangeText where execCommand is unavailable.
+      textarea.setSelectionRange(lineStart, lineEnd);
+      let inserted = false;
+      try {
+        inserted = document.execCommand('insertText', false, replacement);
+      } catch (_) {}
+
+      if (!inserted) {
+        textarea.setRangeText(replacement, lineStart, lineEnd, 'preserve');
+      }
+
+      textarea.setSelectionRange(lineStart, lineStart + replacement.length);
+      textarea.dispatchEvent(new Event('input', { bubbles: true }));
+
+      return true;
+    }
+
+    /**
+     * @private
+     */
+    _effectiveSelectionEnd(value, selectionStart, selectionEnd) {
+      if (selectionEnd > selectionStart && value[selectionEnd - 1] === '\n') {
+        return selectionEnd - 1;
+      }
+
+      return selectionEnd;
+    }
+
+    /**
+     * @private
+     */
+    _canEditTextarea() {
+      return this.textarea && !this.textarea.disabled && !this.textarea.readOnly;
+    }
     
     /**
      * Get clean HTML without any OverType-specific markup
@@ -1495,6 +1588,7 @@ class OverType {
      */
     showNormalEditMode() {
       this.container.dataset.mode = 'normal';
+      this._syncPreviewInteractivity();
       this.updatePreview(); // Re-render with normal mode (e.g., show syntax markers)
       this._updateAutoHeight();
 
@@ -1513,6 +1607,7 @@ class OverType {
      */
     showPlainTextarea() {
       this.container.dataset.mode = 'plain';
+      this._syncPreviewInteractivity();
       this._updateAutoHeight();
 
       // Update toolbar button if exists
@@ -1533,6 +1628,7 @@ class OverType {
      */
     showPreviewMode() {
       this.container.dataset.mode = 'preview';
+      this._syncPreviewInteractivity();
       this.updatePreview(); // Re-render with preview mode (e.g., checkboxes)
       this._updateAutoHeight();
       return this;
@@ -1558,11 +1654,17 @@ class OverType {
         this.shortcuts.destroy();
       }
 
+      // Cancel any pending Safari reflow nudge
+      if (this._safariReflowRaf) {
+        cancelAnimationFrame(this._safariReflowRaf);
+        this._safariReflowRaf = null;
+      }
+
       // Remove DOM if created by us
       if (this.wrapper) {
         const content = this.getValue();
         this.wrapper.remove();
-        
+
         // Restore original content
         this.element.textContent = content;
       }
@@ -1598,11 +1700,19 @@ class OverType {
 
         // Parse data-ot-* attributes (kebab-case to camelCase)
         for (const attr of el.attributes) {
-          if (attr.name.startsWith('data-ot-')) {
-            const kebab = attr.name.slice(8); // Remove 'data-ot-'
-            const key = kebab.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
-            options[key] = OverType._parseDataValue(attr.value);
+          if (!attr.name.startsWith('data-ot-')) continue;
+          const kebab = attr.name.slice(8); // Remove 'data-ot-'
+
+          // data-ot-textarea-<attr> maps onto textareaProps (e.g. data-ot-textarea-required).
+          // data-ot-textarea-props is the whole-object JSON form, handled generically below.
+          if (kebab.startsWith('textarea-') && kebab !== 'textarea-props') {
+            const propKey = kebab.slice(9).replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+            options.textareaProps = { ...(options.textareaProps || {}), [propKey]: OverType._parseDataValue(attr.value) };
+            continue;
           }
+
+          const key = kebab.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+          options[key] = OverType._parseDataValue(attr.value);
         }
 
         return new OverType(el, options)[0];
@@ -1647,6 +1757,14 @@ class OverType {
       if (value === 'false') return false;
       if (value === 'null') return null;
       if (value !== '' && !isNaN(Number(value))) return Number(value);
+      const trimmed = value.trim();
+      if (trimmed[0] === '{' || trimmed[0] === '[') {
+        try {
+          return JSON.parse(trimmed);
+        } catch (e) {
+          return value;
+        }
+      }
       return value;
     }
 
@@ -1855,7 +1973,15 @@ class OverType {
      * Initialize global event listeners
      */
     static initGlobalListeners() {
-      if (OverType.globalListenersInitialized) return;
+      const globalScope = typeof window !== 'undefined' ? window : globalThis;
+      const globalListenersKey = '__overtypeGlobalListenersInitialized';
+
+      if (OverType.globalListenersInitialized || globalScope[globalListenersKey]) {
+        OverType.globalListenersInitialized = true;
+        return;
+      }
+
+      globalScope[globalListenersKey] = true;
 
       // Input event
       document.addEventListener('input', (e) => {

package/src/shortcuts.js

@@ -22,6 +22,18 @@ export class ShortcutsManager {
 
     if (!modKey) return false;
 
+    if (event.key === ']') {
+      event.preventDefault();
+      this.editor.indentSelection();
+      return true;
+    }
+
+    if (event.key === '[') {
+      event.preventDefault();
+      this.editor.outdentSelection();
+      return true;
+    }
+
     let actionId = null;
 
     switch (event.key.toLowerCase()) {

package/src/toolbar-buttons.js

@@ -19,6 +19,7 @@ export const toolbarButtons = {
     actionId: 'toggleBold',
     icon: icons.boldIcon,
     title: 'Bold (Ctrl+B)',
+    isActive: ({ activeFormats }) => activeFormats.includes('bold'),
     action: ({ editor }) => {
       markdownActions.toggleBold(editor.textarea);
       editor.textarea.dispatchEvent(new Event('input', { bubbles: true }));
@@ -30,6 +31,7 @@ export const toolbarButtons = {
     actionId: 'toggleItalic',
     icon: icons.italicIcon,
     title: 'Italic (Ctrl+I)',
+    isActive: ({ activeFormats }) => activeFormats.includes('italic'),
     action: ({ editor }) => {
       markdownActions.toggleItalic(editor.textarea);
       editor.textarea.dispatchEvent(new Event('input', { bubbles: true }));
@@ -41,6 +43,7 @@ export const toolbarButtons = {
     actionId: 'toggleCode',
     icon: icons.codeIcon,
     title: 'Inline Code',
+    isActive: () => false,
     action: ({ editor }) => {
       markdownActions.toggleCode(editor.textarea);
       editor.textarea.dispatchEvent(new Event('input', { bubbles: true }));
@@ -68,6 +71,7 @@ export const toolbarButtons = {
     actionId: 'toggleH1',
     icon: icons.h1Icon,
     title: 'Heading 1',
+    isActive: ({ activeFormats }) => activeFormats.includes('header'),
     action: ({ editor }) => {
       markdownActions.toggleH1(editor.textarea);
       editor.textarea.dispatchEvent(new Event('input', { bubbles: true }));
@@ -79,6 +83,7 @@ export const toolbarButtons = {
     actionId: 'toggleH2',
     icon: icons.h2Icon,
     title: 'Heading 2',
+    isActive: ({ activeFormats }) => activeFormats.includes('header-2'),
     action: ({ editor }) => {
       markdownActions.toggleH2(editor.textarea);
       editor.textarea.dispatchEvent(new Event('input', { bubbles: true }));
@@ -90,6 +95,7 @@ export const toolbarButtons = {
     actionId: 'toggleH3',
     icon: icons.h3Icon,
     title: 'Heading 3',
+    isActive: ({ activeFormats }) => activeFormats.includes('header-3'),
     action: ({ editor }) => {
       markdownActions.toggleH3(editor.textarea);
       editor.textarea.dispatchEvent(new Event('input', { bubbles: true }));
@@ -101,6 +107,7 @@ export const toolbarButtons = {
     actionId: 'toggleBulletList',
     icon: icons.bulletListIcon,
     title: 'Bullet List',
+    isActive: ({ activeFormats }) => activeFormats.includes('bullet-list'),
     action: ({ editor }) => {
       markdownActions.toggleBulletList(editor.textarea);
       editor.textarea.dispatchEvent(new Event('input', { bubbles: true }));
@@ -112,6 +119,7 @@ export const toolbarButtons = {
     actionId: 'toggleNumberedList',
     icon: icons.orderedListIcon,
     title: 'Numbered List',
+    isActive: ({ activeFormats }) => activeFormats.includes('numbered-list'),
     action: ({ editor }) => {
       markdownActions.toggleNumberedList(editor.textarea);
       editor.textarea.dispatchEvent(new Event('input', { bubbles: true }));
@@ -123,6 +131,7 @@ export const toolbarButtons = {
     actionId: 'toggleTaskList',
     icon: icons.taskListIcon,
     title: 'Task List',
+    isActive: ({ activeFormats }) => activeFormats.includes('task-list'),
     action: ({ editor }) => {
       if (markdownActions.toggleTaskList) {
         markdownActions.toggleTaskList(editor.textarea);
@@ -136,6 +145,7 @@ export const toolbarButtons = {
     actionId: 'toggleQuote',
     icon: icons.quoteIcon,
     title: 'Quote',
+    isActive: ({ activeFormats }) => activeFormats.includes('quote'),
     action: ({ editor }) => {
       markdownActions.toggleQuote(editor.textarea);
       editor.textarea.dispatchEvent(new Event('input', { bubbles: true }));