overtype 2.1.0 → 2.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "overtype",
-  "version": "2.1.0",
+  "version": "2.2.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",
@@ -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 && 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/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:main": "node test/overtype.test.js",
     "test:preview": "node test/preview-mode.test.js",
     "test:links": "node test/links.test.js",
@@ -45,8 +45,7 @@
     "preversion": "npm test",
     "size": "gzip-size dist/overtype.min.js",
     "serve": "http-server -p 8080 -c-1",
-    "deploy:website": "npm run build",
-    "release": "./release.sh"
+    "deploy:website": "npm run build"
   },
   "keywords": [
     "markdown",
@@ -88,6 +87,7 @@
   },
   "homepage": "https://github.com/panphora/overtype#readme",
   "dependencies": {
+    "@floating-ui/dom": "^1.7.4",
     "markdown-actions": "^1.1.2"
   }
 }

package/src/icons.js

@@ -72,6 +72,12 @@ export const taskListIcon = `<svg viewBox="0 0 18 18">
   <polyline stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" points="2.65 9.5 3.5 10.5 5 8.5"></polyline>
 </svg>`;
 
+export const uploadIcon = `<svg viewBox="0 0 18 18">
+  <path stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.25 12.375v1.688A1.688 1.688 0 0 0 3.938 15.75h10.124a1.688 1.688 0 0 0 1.688-1.688V12.375"></path>
+  <path stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.063 6.188L9 2.25l3.938 3.938"></path>
+  <path stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 2.25v10.125"></path>
+</svg>`;
+
 export const eyeIcon = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
   <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" fill="none"></path>
   <circle cx="12" cy="12" r="3" fill="none"></circle>

package/src/link-tooltip.js

@@ -1,9 +1,10 @@
 /**
- * Link Tooltip - CSS Anchor Positioning with Floating UI fallback
- * Shows a clickable tooltip when cursor is within a link
- * Uses CSS anchor positioning for modern browsers, Floating UI for older browsers
+ * Link Tooltip - Shows a clickable tooltip when cursor is within a link
+ * Uses Floating UI for positioning across all browsers
  */
 
+import { computePosition, offset, shift, flip } from '@floating-ui/dom';
+
 export class LinkTooltip {
   constructor(editor) {
     this.editor = editor;
@@ -11,37 +12,13 @@ export class LinkTooltip {
     this.currentLink = null;
     this.hideTimeout = null;
     this.visibilityChangeHandler = null;
-    this.useFloatingUI = false;
-    this.floatingUI = null;
+    this.isTooltipHovered = false;
 
     this.init();
   }
 
-  async init() {
-    // Detect CSS anchor positioning support
-    const supportsAnchorPositioning = CSS.supports('position-anchor: --x') &&
-                                      CSS.supports('position-area: center');
-
-    // Load Floating UI if needed
-    if (!supportsAnchorPositioning) {
-      try {
-        // Use indirect eval to prevent bundler from processing the import
-        const importFn = new Function('url', 'return import(url)');
-        const { computePosition, offset, shift, flip } = await importFn(
-          'https://cdn.jsdelivr.net/npm/@floating-ui/dom@1.7.4/+esm'
-        );
-        this.floatingUI = { computePosition, offset, shift, flip };
-        this.useFloatingUI = true;
-      } catch (error) {
-        // If dynamic import fails, tooltips simply won't show
-        console.warn('Failed to load Floating UI fallback:', error);
-        this.floatingUI = null;
-        this.useFloatingUI = false;
-      }
-    }
-
+  init() {
     // Create tooltip element
-    // Note: Styles are now in the main stylesheet (styles.js) with @supports wrapper
     this.createTooltip();
 
     // Listen for cursor position changes
@@ -55,19 +32,19 @@ export class LinkTooltip {
     // Hide tooltip when typing
     this.editor.textarea.addEventListener('input', () => this.hide());
 
-    // Reposition or hide tooltip when scrolling
+    // Reposition tooltip when scrolling
     this.editor.textarea.addEventListener('scroll', () => {
-      if (this.useFloatingUI && this.currentLink) {
-        // Reposition the tooltip for Floating UI
-        this.showWithFloatingUI(this.currentLink);
-      } else {
-        // Hide for CSS anchor positioning (native browser behavior handles this)
-        this.hide();
+      if (this.currentLink) {
+        this.positionTooltip(this.currentLink);
       }
     });
 
-    // Hide tooltip when textarea loses focus
-    this.editor.textarea.addEventListener('blur', () => this.hide());
+    // Hide tooltip when textarea loses focus (unless hovering tooltip)
+    this.editor.textarea.addEventListener('blur', () => {
+      if (!this.isTooltipHovered) {
+        this.hide();
+      }
+    });
 
     // Hide tooltip when page loses visibility (tab switch, minimize, etc.)
     this.visibilityChangeHandler = () => {
@@ -77,13 +54,18 @@ export class LinkTooltip {
     };
     document.addEventListener('visibilitychange', this.visibilityChangeHandler);
 
-    // Keep tooltip visible on hover (only prevent hide, don't schedule hide on leave)
-    this.tooltip.addEventListener('mouseenter', () => this.cancelHide());
+    // Track hover state to prevent hiding when clicking tooltip
+    this.tooltip.addEventListener('mouseenter', () => {
+      this.isTooltipHovered = true;
+      this.cancelHide();
+    });
+    this.tooltip.addEventListener('mouseleave', () => {
+      this.isTooltipHovered = false;
+      this.scheduleHide();
+    });
   }
 
   createTooltip() {
-    // Create tooltip element
-    // Styles are now included in the main stylesheet (styles.js)
     this.tooltip = document.createElement('div');
     this.tooltip.className = 'overtype-link-tooltip';
 
@@ -153,7 +135,7 @@ export class LinkTooltip {
     return null;
   }
 
-  show(linkInfo) {
+  async show(linkInfo) {
     this.currentLink = linkInfo;
     this.cancelHide();
 
@@ -161,72 +143,61 @@ export class LinkTooltip {
     const urlSpan = this.tooltip.querySelector('.overtype-link-tooltip-url');
     urlSpan.textContent = linkInfo.url;
 
-    if (this.useFloatingUI) {
-      this.showWithFloatingUI(linkInfo);
-    } else {
-      this.showWithAnchorPositioning(linkInfo);
-    }
+    // Position first (tooltip is always rendered but invisible, so Floating UI can measure it)
+    await this.positionTooltip(linkInfo);
 
-    this.tooltip.classList.add('visible');
-  }
-
-  showWithAnchorPositioning(linkInfo) {
-    // Set the CSS variable to point to the correct anchor
-    this.tooltip.style.setProperty('--target-anchor', `--link-${linkInfo.index}`);
+    // Only reveal if we're still showing this link
+    if (this.currentLink === linkInfo) {
+      this.tooltip.classList.add('visible');
+    }
   }
 
-  async showWithFloatingUI(linkInfo) {
-    // Find the <a> element in preview that corresponds to this link
+  async positionTooltip(linkInfo) {
     const anchorElement = this.findAnchorElement(linkInfo.index);
 
     if (!anchorElement) {
       return;
     }
 
-    // Check if anchor element is visible and in viewport
     const rect = anchorElement.getBoundingClientRect();
     if (rect.width === 0 || rect.height === 0) {
       return;
     }
 
     try {
-      // Compute position using Floating UI
-      const { x, y } = await this.floatingUI.computePosition(
+      const { x, y } = await computePosition(
         anchorElement,
         this.tooltip,
         {
+          strategy: 'fixed',
           placement: 'bottom',
           middleware: [
-            this.floatingUI.offset(8),
-            this.floatingUI.shift({ padding: 8 }),
-            this.floatingUI.flip()
+            offset(8),
+            shift({ padding: 8 }),
+            flip()
           ]
         }
       );
 
-      // Apply position
       Object.assign(this.tooltip.style, {
         left: `${x}px`,
         top: `${y}px`,
-        position: 'absolute'
+        position: 'fixed'
       });
     } catch (error) {
-      // If Floating UI computation fails, don't show tooltip
       console.warn('Floating UI positioning failed:', error);
-      return;
     }
   }
 
   findAnchorElement(linkIndex) {
-    // Find the <a> element with the matching anchor-name style
     const preview = this.editor.preview;
-    // Direct query for the specific link - more efficient than iterating
     return preview.querySelector(`a[style*="--link-${linkIndex}"]`);
   }
 
   hide() {
     this.tooltip.classList.remove('visible');
     this.currentLink = null;
+    this.isTooltipHovered = false;
   }
 
   scheduleHide() {
@@ -244,7 +215,6 @@ export class LinkTooltip {
   destroy() {
     this.cancelHide();
 
-    // Remove visibility change listener
     if (this.visibilityChangeHandler) {
       document.removeEventListener('visibilitychange', this.visibilityChangeHandler);
       this.visibilityChangeHandler = null;
@@ -255,7 +225,6 @@ export class LinkTooltip {
     }
     this.tooltip = null;
     this.currentLink = null;
-    this.floatingUI = null;
-    this.useFloatingUI = false;
+    this.isTooltipHovered = false;
   }
 }

package/src/overtype-webcomponent.js

@@ -15,7 +15,7 @@ const DEFAULT_PLACEHOLDER = 'Start typing...';
 const OBSERVED_ATTRIBUTES = [
   'value', 'theme', 'toolbar', 'height', 'min-height', 'max-height', 
   'placeholder', 'font-size', 'line-height', 'padding', 'auto-resize', 
-  'autofocus', 'show-stats', 'smart-lists', 'readonly'
+  'autofocus', 'show-stats', 'smart-lists', 'readonly', 'spellcheck'
 ];
 
 /**
@@ -261,6 +261,7 @@ class OverTypeEditor extends HTMLElement {
       autoResize: this.hasAttribute('auto-resize'),
       showStats: this.hasAttribute('show-stats'),
       smartLists: !this.hasAttribute('smart-lists') || this.getAttribute('smart-lists') !== 'false',
+      spellcheck: this.hasAttribute('spellcheck') && this.getAttribute('spellcheck') !== 'false',
       onChange: this._handleChange,
       onKeydown: this._handleKeydown
     };
@@ -324,8 +325,14 @@ class OverTypeEditor extends HTMLElement {
         break;
 
       case 'placeholder':
-        if (this._editor.textarea) {
-          this._editor.textarea.placeholder = value || '';
+        if (this._editor) {
+          this._editor.options.placeholder = value || '';
+          if (this._editor.textarea) {
+            this._editor.textarea.placeholder = value || '';
+          }
+          if (this._editor.placeholderEl) {
+            this._editor.placeholderEl.textContent = value || '';
+          }
         }
         break;
 
@@ -382,6 +389,16 @@ class OverTypeEditor extends HTMLElement {
         this._reinitializeEditor();
         break;
       }
+
+      case 'spellcheck':
+        if (this._editor) {
+          const enabled = this.hasAttribute('spellcheck') && this.getAttribute('spellcheck') !== 'false';
+          this._editor.options.spellcheck = enabled;
+          if (this._editor.textarea) {
+            this._editor.textarea.setAttribute('spellcheck', String(enabled));
+          }
+        }
+        break;
     }
   }
 
@@ -670,6 +687,18 @@ class OverTypeEditor extends HTMLElement {
   getEditor() {
     return this._editor;
   }
+
+  showToolbar() {
+    if (this._editor) {
+      this._editor.showToolbar();
+    }
+  }
+
+  hideToolbar() {
+    if (this._editor) {
+      this._editor.hideToolbar();
+    }
+  }
 }
 
 // Register the custom element

package/src/overtype.d.ts

@@ -22,6 +22,7 @@ export interface Theme {
     hr?: string;
     link?: string;
     listMarker?: string;
+    placeholder?: string;
     primary?: string;
     rawLine?: string;
     selection?: string;
@@ -102,6 +103,7 @@ export interface Options {
   toolbar?: boolean;
   toolbarButtons?: ToolbarButton[];  // Custom toolbar button configuration
   smartLists?: boolean;       // v1.2.3+ Smart list continuation
+  spellcheck?: boolean;       // Browser spellcheck (default: false)
   statsFormatter?: (stats: Stats) => string;
   codeHighlighter?: ((code: string, language: string) => string) | null;  // Per-instance code highlighter
 
@@ -109,6 +111,15 @@ export interface Options {
   theme?: string | Theme;
   colors?: Partial<Theme['colors']>;
 
+  // File upload
+  fileUpload?: {
+    enabled: boolean;
+    maxSize?: number;
+    mimeTypes?: string[];
+    batch?: boolean;
+    onInsertFile: (file: File | File[]) => Promise<string | string[]>;
+  };
+
   // Callbacks
   onChange?: (value: string, instance: OverTypeInstance) => void;
   onKeydown?: (event: KeyboardEvent, instance: OverTypeInstance) => void;
@@ -172,6 +183,10 @@ export interface OverTypeInstance {
   setTheme(theme: string | Theme): this;
   setCodeHighlighter(highlighter: ((code: string, language: string) => string) | null): void;
   updatePreview(): void;
+  performAction(actionId: string, event?: Event | null): Promise<boolean>;
+  showToolbar(): void;
+  hideToolbar(): void;
+  insertAtCursor(text: string): void;
 
   // HTML output methods
   getRenderedHTML(options?: RenderOptions): string;
@@ -209,6 +224,7 @@ export const toolbarButtons: {
   orderedList: ToolbarButton;
   taskList: ToolbarButton;
   quote: ToolbarButton;
+  upload: ToolbarButton;
   viewMode: ToolbarButton;
 };