overtype 2.1.0 → 2.2.0

package/src/shortcuts.js

@@ -1,18 +1,14 @@
 /**
  * Keyboard shortcuts handler for OverType editor
- * Uses the same handleAction method as toolbar for consistency
+ * Delegates to editor.performAction for consistent behavior
  */
 
-import * as markdownActions from 'markdown-actions';
-
 /**
  * ShortcutsManager - Handles keyboard shortcuts for the editor
  */
 export class ShortcutsManager {
   constructor(editor) {
     this.editor = editor;
-    this.textarea = editor.textarea;
-    // No need to add our own listener - OverType will call handleKeydown
   }
 
   /**
@@ -26,100 +22,39 @@ export class ShortcutsManager {
 
     if (!modKey) return false;
 
-    let action = null;
+    let actionId = null;
 
-    // Map keyboard shortcuts to toolbar actions
-    switch(event.key.toLowerCase()) {
+    switch (event.key.toLowerCase()) {
       case 'b':
-        if (!event.shiftKey) {
-          action = 'toggleBold';
-        }
+        if (!event.shiftKey) actionId = 'toggleBold';
         break;
-
       case 'i':
-        if (!event.shiftKey) {
-          action = 'toggleItalic';
-        }
+        if (!event.shiftKey) actionId = 'toggleItalic';
         break;
-
       case 'k':
-        if (!event.shiftKey) {
-          action = 'insertLink';
-        }
+        if (!event.shiftKey) actionId = 'insertLink';
         break;
-
       case '7':
-        if (event.shiftKey) {
-          action = 'toggleNumberedList';
-        }
+        if (event.shiftKey) actionId = 'toggleNumberedList';
         break;
-
       case '8':
-        if (event.shiftKey) {
-          action = 'toggleBulletList';
-        }
+        if (event.shiftKey) actionId = 'toggleBulletList';
         break;
     }
 
-    // If we have an action, handle it exactly like the toolbar does
-    if (action) {
+    if (actionId) {
       event.preventDefault();
-      
-      // If toolbar exists, use its handleAction method (exact same code path)
-      if (this.editor.toolbar) {
-        this.editor.toolbar.handleAction(action);
-      } else {
-        // Fallback: duplicate the toolbar's handleAction logic
-        this.handleAction(action);
-      }
-      
+      this.editor.performAction(actionId, event);
       return true;
     }
 
     return false;
   }
 
-  /**
-   * Handle action - fallback when no toolbar exists
-   * This duplicates toolbar.handleAction for consistency
-   */
-  async handleAction(action) {
-    const textarea = this.textarea;
-    if (!textarea) return;
-
-    // Focus textarea
-    textarea.focus();
-    
-    try {
-      switch (action) {
-        case 'toggleBold':
-          markdownActions.toggleBold(textarea);
-          break;
-        case 'toggleItalic':
-          markdownActions.toggleItalic(textarea);
-          break;
-        case 'insertLink':
-          markdownActions.insertLink(textarea);
-          break;
-        case 'toggleBulletList':
-          markdownActions.toggleBulletList(textarea);
-          break;
-        case 'toggleNumberedList':
-          markdownActions.toggleNumberedList(textarea);
-          break;
-      }
-
-      // Trigger input event to update preview
-      textarea.dispatchEvent(new Event('input', { bubbles: true }));
-    } catch (error) {
-      console.error('Error in markdown action:', error);
-    }
-  }
-
   /**
    * Cleanup
    */
   destroy() {
     // Nothing to clean up since we don't add our own listener
   }
-}
+}

package/src/styles.js

@@ -211,17 +211,36 @@ export function generateStyles(options = {}) {
       /* Prevent mobile zoom on focus */
       touch-action: manipulation !important;
       
-      /* Disable autofill and spellcheck */
+      /* Disable autofill */
       autocomplete: off !important;
       autocorrect: off !important;
       autocapitalize: off !important;
-      spellcheck: false !important;
     }
 
     .overtype-wrapper .overtype-input::selection {
       background-color: var(--selection, rgba(244, 211, 94, 0.4));
     }
 
+    /* Placeholder shim - visible when textarea is empty */
+    .overtype-wrapper .overtype-placeholder {
+      position: absolute !important;
+      top: 0 !important;
+      left: 0 !important;
+      width: 100% !important;
+      z-index: 0 !important;
+      pointer-events: none !important;
+      user-select: none !important;
+      font-family: ${fontFamily} !important;
+      font-size: var(--instance-font-size, ${fontSize}) !important;
+      line-height: var(--instance-line-height, ${lineHeight}) !important;
+      padding: var(--instance-padding, ${padding}) !important;
+      box-sizing: border-box !important;
+      color: var(--placeholder, #999) !important;
+      overflow: hidden !important;
+      white-space: nowrap !important;
+      text-overflow: ellipsis !important;
+    }
+
     /* Preview layer styles */
     .overtype-wrapper .overtype-preview {
       /* Layer positioning */
@@ -489,6 +508,10 @@ export function generateStyles(options = {}) {
     
 
     /* Toolbar Styles */
+    .overtype-toolbar.overtype-toolbar-hidden {
+      display: none !important;
+    }
+
     .overtype-toolbar {
       display: flex !important;
       align-items: center !important;
@@ -763,19 +786,14 @@ export function generateStyles(options = {}) {
 
     /* Code blocks - proper pre/code styling in preview mode */
     .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview pre.code-block {
-      background: #2d2d2d !important;
-      color: #f8f8f2 !important;
+      background: var(--code-bg, rgba(244, 211, 94, 0.4)) !important;
+      color: var(--code, #0d3b66) !important;
       padding: 1.2em !important;
       border-radius: 3px !important;
       overflow-x: auto !important;
       margin: 0 !important;
       display: block !important;
     }
-    
-    /* Cave theme code block background in preview mode */
-    .overtype-container[data-theme="cave"][data-mode="preview"] .overtype-wrapper .overtype-preview pre.code-block {
-      background: #11171F !important;
-    }
 
     .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview pre.code-block code {
       background: transparent !important;
@@ -840,16 +858,17 @@ export function generateStyles(options = {}) {
       height: 2px !important;
     }
 
-    /* Link Tooltip - Base styles (all browsers) */
+    /* Link Tooltip */
     .overtype-link-tooltip {
-      /* Visual styles that work for both positioning methods */
       background: #333 !important;
       color: white !important;
       padding: 6px 10px !important;
       border-radius: 16px !important;
       font-size: 12px !important;
       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
-      display: none !important;
+      display: flex !important;
+      visibility: hidden !important;
+      pointer-events: none !important;
       z-index: 10000 !important;
       cursor: pointer !important;
       box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
@@ -857,25 +876,14 @@ export function generateStyles(options = {}) {
       white-space: nowrap !important;
       overflow: hidden !important;
       text-overflow: ellipsis !important;
-
-      /* Base positioning for Floating UI fallback */
-      position: absolute;
+      position: fixed;
+      top: 0;
+      left: 0;
     }
 
     .overtype-link-tooltip.visible {
-      display: flex !important;
-    }
-
-    /* CSS Anchor Positioning (modern browsers only) */
-    @supports (position-anchor: --x) and (position-area: center) {
-      .overtype-link-tooltip {
-        /* Only anchor positioning specific properties */
-        position-anchor: var(--target-anchor, --link-0);
-        position-area: block-end center;
-        margin-top: 8px !important;
-        position-try: most-width block-end inline-end, flip-inline, block-start center;
-        position-visibility: anchors-visible;
-      }
+      visibility: visible !important;
+      pointer-events: auto !important;
     }
 
     ${mobileStyles}

package/src/themes.js

@@ -39,6 +39,7 @@ export const solar = {
     toolbarIcon: '#0d3b66',      // Yale Blue - icon color
     toolbarHover: '#f5f5f5',     // Light gray - hover background
     toolbarActive: '#faf0ca',    // Lemon Chiffon - active button background
+    placeholder: '#999999',      // Gray - placeholder text
   }
 };
 
@@ -78,6 +79,7 @@ export const cave = {
     toolbarIcon: '#c5dde8',      // Light blue-gray - icon color
     toolbarHover: '#243546',     // Slightly lighter charcoal - hover background
     toolbarActive: '#2a3f52',    // Even lighter - active button background
+    placeholder: '#6a7a88',      // Muted blue-gray - placeholder text
   }
 };
 
@@ -87,6 +89,7 @@ export const cave = {
 export const themes = {
   solar,
   cave,
+  auto: solar,
   // Aliases for backward compatibility
   light: solar,
   dark: cave
@@ -106,6 +109,17 @@ export function getTheme(theme) {
   return theme;
 }
 
+/**
+ * Resolve auto theme to actual theme based on system color scheme
+ * @param {string} themeName - Theme name to resolve
+ * @returns {string} Resolved theme name ('solar' or 'cave' if auto, otherwise unchanged)
+ */
+export function resolveAutoTheme(themeName) {
+  if (themeName !== 'auto') return themeName;
+  const mq = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)');
+  return mq?.matches ? 'cave' : 'solar';
+}
+
 /**
  * Apply theme colors to CSS variables
  * @param {Object} colors - Theme colors object

package/src/toolbar-buttons.js

@@ -8,15 +8,18 @@ import * as markdownActions from 'markdown-actions';
 
 /**
  * Built-in toolbar button definitions
- * Each button has: name, icon, title, action
+ * Each button has: name, actionId, icon, title, action
+ * - name: DOM identifier for the button element
+ * - actionId: Canonical action identifier used by performAction
  * Action signature: ({ editor, getValue, setValue, event }) => void
  */
 export const toolbarButtons = {
   bold: {
     name: 'bold',
+    actionId: 'toggleBold',
     icon: icons.boldIcon,
     title: 'Bold (Ctrl+B)',
-    action: ({ editor, event }) => {
+    action: ({ editor }) => {
       markdownActions.toggleBold(editor.textarea);
       editor.textarea.dispatchEvent(new Event('input', { bubbles: true }));
     }
@@ -24,9 +27,10 @@ export const toolbarButtons = {
 
   italic: {
     name: 'italic',
+    actionId: 'toggleItalic',
     icon: icons.italicIcon,
     title: 'Italic (Ctrl+I)',
-    action: ({ editor, event }) => {
+    action: ({ editor }) => {
       markdownActions.toggleItalic(editor.textarea);
       editor.textarea.dispatchEvent(new Event('input', { bubbles: true }));
     }
@@ -34,9 +38,10 @@ export const toolbarButtons = {
 
   code: {
     name: 'code',
+    actionId: 'toggleCode',
     icon: icons.codeIcon,
     title: 'Inline Code',
-    action: ({ editor, event }) => {
+    action: ({ editor }) => {
       markdownActions.toggleCode(editor.textarea);
       editor.textarea.dispatchEvent(new Event('input', { bubbles: true }));
     }
@@ -49,9 +54,10 @@ export const toolbarButtons = {
 
   link: {
     name: 'link',
+    actionId: 'insertLink',
     icon: icons.linkIcon,
     title: 'Insert Link',
-    action: ({ editor, event }) => {
+    action: ({ editor }) => {
       markdownActions.insertLink(editor.textarea);
       editor.textarea.dispatchEvent(new Event('input', { bubbles: true }));
     }
@@ -59,9 +65,10 @@ export const toolbarButtons = {
 
   h1: {
     name: 'h1',
+    actionId: 'toggleH1',
     icon: icons.h1Icon,
     title: 'Heading 1',
-    action: ({ editor, event }) => {
+    action: ({ editor }) => {
       markdownActions.toggleH1(editor.textarea);
       editor.textarea.dispatchEvent(new Event('input', { bubbles: true }));
     }
@@ -69,9 +76,10 @@ export const toolbarButtons = {
 
   h2: {
     name: 'h2',
+    actionId: 'toggleH2',
     icon: icons.h2Icon,
     title: 'Heading 2',
-    action: ({ editor, event }) => {
+    action: ({ editor }) => {
       markdownActions.toggleH2(editor.textarea);
       editor.textarea.dispatchEvent(new Event('input', { bubbles: true }));
     }
@@ -79,9 +87,10 @@ export const toolbarButtons = {
 
   h3: {
     name: 'h3',
+    actionId: 'toggleH3',
     icon: icons.h3Icon,
     title: 'Heading 3',
-    action: ({ editor, event }) => {
+    action: ({ editor }) => {
       markdownActions.toggleH3(editor.textarea);
       editor.textarea.dispatchEvent(new Event('input', { bubbles: true }));
     }
@@ -89,9 +98,10 @@ export const toolbarButtons = {
 
   bulletList: {
     name: 'bulletList',
+    actionId: 'toggleBulletList',
     icon: icons.bulletListIcon,
     title: 'Bullet List',
-    action: ({ editor, event }) => {
+    action: ({ editor }) => {
       markdownActions.toggleBulletList(editor.textarea);
       editor.textarea.dispatchEvent(new Event('input', { bubbles: true }));
     }
@@ -99,9 +109,10 @@ export const toolbarButtons = {
 
   orderedList: {
     name: 'orderedList',
+    actionId: 'toggleNumberedList',
     icon: icons.orderedListIcon,
     title: 'Numbered List',
-    action: ({ editor, event }) => {
+    action: ({ editor }) => {
       markdownActions.toggleNumberedList(editor.textarea);
       editor.textarea.dispatchEvent(new Event('input', { bubbles: true }));
     }
@@ -109,9 +120,10 @@ export const toolbarButtons = {
 
   taskList: {
     name: 'taskList',
+    actionId: 'toggleTaskList',
     icon: icons.taskListIcon,
     title: 'Task List',
-    action: ({ editor, event }) => {
+    action: ({ editor }) => {
       if (markdownActions.toggleTaskList) {
         markdownActions.toggleTaskList(editor.textarea);
         editor.textarea.dispatchEvent(new Event('input', { bubbles: true }));
@@ -121,14 +133,38 @@ export const toolbarButtons = {
 
   quote: {
     name: 'quote',
+    actionId: 'toggleQuote',
     icon: icons.quoteIcon,
     title: 'Quote',
-    action: ({ editor, event }) => {
+    action: ({ editor }) => {
       markdownActions.toggleQuote(editor.textarea);
       editor.textarea.dispatchEvent(new Event('input', { bubbles: true }));
     }
   },
 
+  upload: {
+    name: 'upload',
+    actionId: 'uploadFile',
+    icon: icons.uploadIcon,
+    title: 'Upload File',
+    action: ({ editor }) => {
+      if (!editor.options.fileUpload?.enabled) return;
+      const input = document.createElement('input');
+      input.type = 'file';
+      input.multiple = true;
+      if (editor.options.fileUpload.mimeTypes?.length > 0) {
+        input.accept = editor.options.fileUpload.mimeTypes.join(',');
+      }
+      input.onchange = () => {
+        if (!input.files?.length) return;
+        const dt = new DataTransfer();
+        for (const f of input.files) dt.items.add(f);
+        editor._handleDataTransfer(dt);
+      };
+      input.click();
+    }
+  },
+
   viewMode: {
     name: 'viewMode',
     icon: icons.eyeIcon,

package/src/toolbar.js

@@ -73,39 +73,11 @@ export class Toolbar {
       return button;
     }
 
-    // Standard button click handler
-    button._clickHandler = async (e) => {
+    // Standard button click handler - delegate to performAction
+    button._clickHandler = (e) => {
       e.preventDefault();
-
-      // Focus textarea before action
-      this.editor.textarea.focus();
-
-      try {
-        if (buttonConfig.action) {
-          // Call action with consistent context object
-          await buttonConfig.action({
-            editor: this.editor,
-            getValue: () => this.editor.getValue(),
-            setValue: (value) => this.editor.setValue(value),
-            event: e
-          });
-        }
-      } catch (error) {
-        console.error(`Button "${buttonConfig.name}" error:`, error);
-
-        // Dispatch error event
-        this.editor.wrapper.dispatchEvent(new CustomEvent('button-error', {
-          detail: { buttonName: buttonConfig.name, error }
-        }));
-
-        // Visual feedback
-        button.classList.add('button-error');
-        button.style.animation = 'buttonError 0.3s';
-        setTimeout(() => {
-          button.classList.remove('button-error');
-          button.style.animation = '';
-        }, 300);
-      }
+      const actionId = buttonConfig.actionId || buttonConfig.name;
+      this.editor.performAction(actionId, e);
     };
 
     button.addEventListener('click', button._clickHandler);
@@ -113,31 +85,38 @@ export class Toolbar {
   }
 
   /**
-   * Handle button action programmatically (used by keyboard shortcuts)
-   * @param {Object} buttonConfig - Button configuration object with action function
+   * Handle button action programmatically
+   * Accepts either an actionId string or a buttonConfig object (backwards compatible)
+   * @param {string|Object} actionIdOrConfig - Action identifier string or button config object
+   * @returns {Promise<boolean>} Whether the action was executed
    */
-  async handleAction(buttonConfig) {
-    // Focus textarea before action
-    this.editor.textarea.focus();
-
-    try {
-      if (buttonConfig.action) {
-        // Call action with consistent context object
-        await buttonConfig.action({
+  async handleAction(actionIdOrConfig) {
+    // Old style: buttonConfig object with .action function - execute directly
+    if (actionIdOrConfig && typeof actionIdOrConfig === 'object' && typeof actionIdOrConfig.action === 'function') {
+      this.editor.textarea.focus();
+      try {
+        await actionIdOrConfig.action({
           editor: this.editor,
           getValue: () => this.editor.getValue(),
           setValue: (value) => this.editor.setValue(value),
           event: null
         });
+        return true;
+      } catch (error) {
+        console.error(`Action "${actionIdOrConfig.name}" error:`, error);
+        this.editor.wrapper.dispatchEvent(new CustomEvent('button-error', {
+          detail: { buttonName: actionIdOrConfig.name, error }
+        }));
+        return false;
       }
-    } catch (error) {
-      console.error(`Action "${buttonConfig.name}" error:`, error);
+    }
 
-      // Dispatch error event
-      this.editor.wrapper.dispatchEvent(new CustomEvent('button-error', {
-        detail: { buttonName: buttonConfig.name, error }
-      }));
+    // New style: string actionId - delegate to performAction
+    if (typeof actionIdOrConfig === 'string') {
+      return this.editor.performAction(actionIdOrConfig, null);
     }
+
+    return false;
   }
 
   /**
@@ -308,6 +287,18 @@ export class Toolbar {
     }
   }
 
+  show() {
+    if (this.container) {
+      this.container.classList.remove('overtype-toolbar-hidden');
+    }
+  }
+
+  hide() {
+    if (this.container) {
+      this.container.classList.add('overtype-toolbar-hidden');
+    }
+  }
+
   /**
    * Destroy toolbar and cleanup
    */