overtype 2.1.1 → 2.3.0

package/src/styles.js

@@ -37,7 +37,7 @@ export function generateStyles(options = {}) {
   ` : '';
 
   // Generate theme variables if provided
-  const themeVars = theme && theme.colors ? themeToCSSVars(theme.colors) : '';
+  const themeVars = theme && theme.colors ? themeToCSSVars(theme.colors, theme.previewColors) : '';
 
   return `
     /* OverType Editor Styles */
@@ -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;
@@ -687,27 +710,29 @@ export function generateStyles(options = {}) {
     }
 
     /* Headers - restore proper sizing in preview mode */
-    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview h1, 
-    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview h2, 
+    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview h1,
+    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview h2,
     .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview h3 {
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
       font-weight: 600 !important;
       margin: 0 !important;
       display: block !important;
-      color: inherit !important; /* Use parent text color */
-      line-height: 1 !important; /* Tight line height for headings */
+      line-height: 1 !important;
     }
-    
-    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview h1 { 
-      font-size: 2em !important; 
+
+    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview h1 {
+      font-size: 2em !important;
+      color: var(--preview-h1, #222) !important;
     }
-    
-    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview h2 { 
-      font-size: 1.5em !important; 
+
+    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview h2 {
+      font-size: 1.5em !important;
+      color: var(--preview-h2, #333) !important;
     }
-    
-    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview h3 { 
-      font-size: 1.17em !important; 
+
+    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview h3 {
+      font-size: 1.17em !important;
+      color: var(--preview-h3, #444) !important;
     }
 
     /* Lists - restore list styling in preview mode */
@@ -757,25 +782,20 @@ export function generateStyles(options = {}) {
     .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview a {
       pointer-events: auto !important;
       cursor: pointer !important;
-      color: var(--link, #0066cc) !important;
+      color: var(--preview-link, #0066cc) !important;
       text-decoration: underline !important;
     }
 
     /* 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(--preview-code-bg, rgba(135, 131, 120, 0.15)) !important;
+      color: var(--preview-code, #333) !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;
@@ -798,7 +818,8 @@ export function generateStyles(options = {}) {
     /* Blockquotes - enhanced styling in preview mode */
     .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview .blockquote {
       display: block !important;
-      border-left: 4px solid var(--blockquote, #ddd) !important;
+      border-left: 4px solid var(--preview-blockquote, #666) !important;
+      color: var(--preview-blockquote, #666) !important;
       padding-left: 1em !important;
       margin: 1em 0 !important;
       font-style: italic !important;
@@ -809,14 +830,16 @@ export function generateStyles(options = {}) {
       font-family: Georgia, 'Times New Roman', serif !important;
       font-size: 16px !important;
       line-height: 1.8 !important;
-      color: var(--text, #333) !important; /* Consistent text color */
+      color: var(--preview-text, #333) !important;
+      background: var(--preview-bg, transparent) !important;
     }
 
     /* Inline code in preview mode - keep monospace */
     .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview code {
       font-family: ${fontFamily} !important;
       font-size: 0.9em !important;
-      background: rgba(135, 131, 120, 0.15) !important;
+      background: var(--preview-code-bg, rgba(135, 131, 120, 0.15)) !important;
+      color: var(--preview-code, #333) !important;
       padding: 0.2em 0.4em !important;
       border-radius: 3px !important;
     }
@@ -824,32 +847,33 @@ export function generateStyles(options = {}) {
     /* Strong and em elements in preview mode */
     .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview strong {
       font-weight: 700 !important;
-      color: inherit !important; /* Use parent text color */
+      color: var(--preview-strong, inherit) !important;
     }
 
     .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview em {
       font-style: italic !important;
-      color: inherit !important; /* Use parent text color */
+      color: var(--preview-em, inherit) !important;
     }
 
     /* HR in preview mode */
     .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview .hr-marker {
       display: block !important;
-      border-top: 2px solid var(--hr, #ddd) !important;
+      border-top: 2px solid var(--preview-hr, #ddd) !important;
       text-indent: -9999px !important;
       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 +881,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,21 @@ 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
+  },
+  previewColors: {
+    text: '#1a1a1a',
+    h1: '#1a1a1a',
+    h2: '#2a2a2a',
+    h3: '#3a3a3a',
+    strong: 'inherit',
+    em: 'inherit',
+    link: '#0066cc',
+    code: '#1a1a1a',
+    codeBg: 'rgba(135, 131, 120, 0.15)',
+    blockquote: '#555',
+    hr: '#ddd',
+    bg: 'transparent',
   }
 };
 
@@ -78,6 +93,21 @@ 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
+  },
+  previewColors: {
+    text: '#c5dde8',
+    h1: '#e0e0e0',
+    h2: '#d0d0d0',
+    h3: '#c0c0c0',
+    strong: 'inherit',
+    em: 'inherit',
+    link: '#6cb6e0',
+    code: '#c5dde8',
+    codeBg: 'rgba(255, 255, 255, 0.08)',
+    blockquote: '#9aa8b4',
+    hr: 'rgba(255, 255, 255, 0.15)',
+    bg: 'transparent',
   }
 };
 
@@ -87,6 +117,7 @@ export const cave = {
 export const themes = {
   solar,
   cave,
+  auto: solar,
   // Aliases for backward compatibility
   light: solar,
   dark: cave
@@ -106,18 +137,34 @@ 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
  * @returns {string} CSS custom properties string
  */
-export function themeToCSSVars(colors) {
+export function themeToCSSVars(colors, previewColors) {
   const vars = [];
   for (const [key, value] of Object.entries(colors)) {
-    // Convert camelCase to kebab-case
     const varName = key.replace(/([A-Z])/g, '-$1').toLowerCase();
     vars.push(`--${varName}: ${value};`);
   }
+  if (previewColors) {
+    for (const [key, value] of Object.entries(previewColors)) {
+      const varName = key.replace(/([A-Z])/g, '-$1').toLowerCase();
+      vars.push(`--preview-${varName}: ${value};`);
+    }
+  }
   return vars.join('\n');
 }
 
@@ -127,12 +174,16 @@ export function themeToCSSVars(colors) {
  * @param {Object} customColors - Custom color overrides
  * @returns {Object} Merged theme object
  */
-export function mergeTheme(baseTheme, customColors = {}) {
+export function mergeTheme(baseTheme, customColors = {}, customPreviewColors = {}) {
   return {
     ...baseTheme,
     colors: {
       ...baseTheme.colors,
       ...customColors
+    },
+    previewColors: {
+      ...baseTheme.previewColors,
+      ...customPreviewColors
     }
   };
 }

package/src/toolbar-buttons.js

@@ -142,6 +142,29 @@ export const toolbarButtons = {
     }
   },
 
+  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

@@ -287,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
    */