overtype 1.2.3 → 1.2.4

package/dist/overtype.d.ts

@@ -0,0 +1,169 @@
+// Type definitions for OverType
+// Project: https://github.com/panphora/overtype
+// Definitions generated from JSDoc comments and implementation
+
+export interface Theme {
+  name: string;
+  colors: {
+    bgPrimary?: string;
+    bgSecondary?: string;
+    text?: string;
+    textSecondary?: string;
+    h1?: string;
+    h2?: string;
+    h3?: string;
+    strong?: string;
+    em?: string;
+    link?: string;
+    code?: string;
+    codeBg?: string;
+    blockquote?: string;
+    hr?: string;
+    syntaxMarker?: string;
+    listMarker?: string;
+    cursor?: string;
+    selection?: string;
+    rawLine?: string;
+    // Toolbar theme colors
+    toolbarBg?: string;
+    toolbarIcon?: string;
+    toolbarHover?: string;
+    toolbarActive?: string;
+    border?: string;
+  };
+}
+
+export interface Stats {
+  words: number;
+  chars: number;
+  lines: number;
+  line: number;
+  column: number;
+}
+
+export interface MobileOptions {
+  fontSize?: string;
+  padding?: string;
+  lineHeight?: string | number;
+}
+
+export interface Options {
+  // Typography
+  fontSize?: string;
+  lineHeight?: string | number;
+  fontFamily?: string;
+  padding?: string;
+
+  // Mobile responsive
+  mobile?: MobileOptions;
+
+  // Native textarea attributes (v1.1.2+)
+  textareaProps?: Record<string, any>;
+
+  // Behavior
+  autofocus?: boolean;
+  autoResize?: boolean;      // v1.1.2+ Auto-expand height with content
+  minHeight?: string;         // v1.1.2+ Minimum height for autoResize mode
+  maxHeight?: string | null;  // v1.1.2+ Maximum height for autoResize mode
+  placeholder?: string;
+  value?: string;
+
+  // Features
+  showActiveLineRaw?: boolean;
+  showStats?: boolean;
+  toolbar?: boolean | {
+    buttons?: Array<{
+      name?: string;
+      icon?: string;
+      title?: string;
+      action?: string;
+      separator?: boolean;
+    }>;
+  };
+  smartLists?: boolean;       // v1.2.3+ Smart list continuation
+  statsFormatter?: (stats: Stats) => string;
+
+  // Theme (deprecated in favor of global theme)
+  theme?: string | Theme;
+  colors?: Partial<Theme['colors']>;
+
+  // Callbacks
+  onChange?: (value: string, instance: OverTypeInstance) => void;
+  onKeydown?: (event: KeyboardEvent, instance: OverTypeInstance) => void;
+}
+
+// Interface for constructor that returns array
+export interface OverTypeConstructor {
+  new(target: string | Element | NodeList | Element[], options?: Options): OverTypeInstance[];
+  // Static members
+  instances: WeakMap<Element, OverTypeInstance>;
+  stylesInjected: boolean;
+  globalListenersInitialized: boolean;
+  instanceCount: number;
+  currentTheme: Theme;
+  themes: {
+    solar: Theme;
+    cave: Theme;
+  };
+  MarkdownParser: any;
+  ShortcutsManager: any;
+  init(target: string | Element | NodeList | Element[], options?: Options): OverTypeInstance[];
+  getInstance(element: Element): OverTypeInstance | null;
+  destroyAll(): void;
+  injectStyles(force?: boolean): void;
+  setTheme(theme: string | Theme, customColors?: Partial<Theme['colors']>): void;
+  initGlobalListeners(): void;
+  getTheme(name: string): Theme;
+}
+
+export interface RenderOptions {
+  cleanHTML?: boolean;
+}
+
+export interface OverTypeInstance {
+  // Public properties
+  container: HTMLElement;
+  wrapper: HTMLElement;
+  textarea: HTMLTextAreaElement;
+  preview: HTMLElement;
+  statsBar?: HTMLElement;
+  toolbar?: any; // Toolbar instance
+  shortcuts?: any; // ShortcutsManager instance
+  linkTooltip?: any; // LinkTooltip instance
+  options: Options;
+  initialized: boolean;
+  instanceId: number;
+  element: Element;
+
+  // Public methods
+  getValue(): string;
+  setValue(value: string): void;
+  getStats(): Stats;
+  getContainer(): HTMLElement;
+  focus(): void;
+  blur(): void;
+  destroy(): void;
+  isInitialized(): boolean;
+  reinit(options: Options): void;
+  showStats(show: boolean): void;
+  setTheme(theme: string | Theme): void;
+  updatePreview(): void;
+  
+  // HTML output methods
+  getRenderedHTML(options?: RenderOptions): string;
+  getCleanHTML(): string;
+  getPreviewHTML(): string;
+  
+  // View mode methods
+  showPlainTextarea(show: boolean): void;
+  showPreviewMode(show: boolean): void;
+}
+
+// Declare the constructor as a constant with proper typing
+declare const OverType: OverTypeConstructor;
+
+// Export the instance type under a different name for clarity
+export type OverType = OverTypeInstance;
+
+// Module exports - default export is the constructor
+export default OverType;

package/dist/overtype.esm.js

@@ -1,5 +1,5 @@
 /**
- * OverType v1.2.2
+ * OverType v1.2.4
  * A lightweight markdown editor library with perfect WYSIWYG alignment
  * @license MIT
  * @author Demo User
@@ -131,6 +131,17 @@ var MarkdownParser = class {
     html = html.replace(new RegExp("(?<!_)_(?!_)(.+?)(?<!_)_(?!_)", "g"), '<em><span class="syntax-marker">_</span>$1<span class="syntax-marker">_</span></em>');
     return html;
   }
+  /**
+   * Parse strikethrough text
+   * Supports both single (~) and double (~~) tildes, but rejects 3+ tildes
+   * @param {string} html - HTML with potential strikethrough markdown
+   * @returns {string} HTML with strikethrough styling
+   */
+  static parseStrikethrough(html) {
+    html = html.replace(new RegExp("(?<!~)~~(?!~)(.+?)(?<!~)~~(?!~)", "g"), '<del><span class="syntax-marker">~~</span>$1<span class="syntax-marker">~~</span></del>');
+    html = html.replace(new RegExp("(?<!~)~(?!~)(.+?)(?<!~)~(?!~)", "g"), '<del><span class="syntax-marker">~</span>$1<span class="syntax-marker">~</span></del>');
+    return html;
+  }
   /**
    * Parse inline code
    * @param {string} html - HTML with potential code markdown
@@ -193,6 +204,7 @@ var MarkdownParser = class {
       sanctuaries.set(placeholder, match);
       return placeholder;
     });
+    html = this.parseStrikethrough(html);
     html = this.parseBold(html);
     html = this.parseItalic(html);
     sanctuaries.forEach((content, placeholder) => {
@@ -327,6 +339,17 @@ var MarkdownParser = class {
           container.insertBefore(currentList, child);
           listType = newType;
         }
+        const indentationNodes = [];
+        for (const node of child.childNodes) {
+          if (node.nodeType === 3 && node.textContent.match(/^\u00A0+$/)) {
+            indentationNodes.push(node.cloneNode(true));
+          } else if (node === listItem) {
+            break;
+          }
+        }
+        indentationNodes.forEach((node) => {
+          listItem.insertBefore(node, listItem.firstChild);
+        });
         currentList.appendChild(listItem);
         child.remove();
       } else {
@@ -344,15 +367,35 @@ var MarkdownParser = class {
   static postProcessHTMLManual(html) {
     let processed = html;
     processed = processed.replace(/((?:<div>(?:&nbsp;)*<li class="bullet-list">.*?<\/li><\/div>\s*)+)/gs, (match) => {
-      const items = match.match(/<li class="bullet-list">.*?<\/li>/gs) || [];
-      if (items.length > 0) {
+      const divs = match.match(/<div>(?:&nbsp;)*<li class="bullet-list">.*?<\/li><\/div>/gs) || [];
+      if (divs.length > 0) {
+        const items = divs.map((div) => {
+          const indentMatch = div.match(/<div>((?:&nbsp;)*)<li/);
+          const listItemMatch = div.match(/<li class="bullet-list">.*?<\/li>/);
+          if (indentMatch && listItemMatch) {
+            const indentation = indentMatch[1];
+            const listItem = listItemMatch[0];
+            return listItem.replace(/<li class="bullet-list">/, `<li class="bullet-list">${indentation}`);
+          }
+          return listItemMatch ? listItemMatch[0] : "";
+        }).filter(Boolean);
         return "<ul>" + items.join("") + "</ul>";
       }
       return match;
     });
     processed = processed.replace(/((?:<div>(?:&nbsp;)*<li class="ordered-list">.*?<\/li><\/div>\s*)+)/gs, (match) => {
-      const items = match.match(/<li class="ordered-list">.*?<\/li>/gs) || [];
-      if (items.length > 0) {
+      const divs = match.match(/<div>(?:&nbsp;)*<li class="ordered-list">.*?<\/li><\/div>/gs) || [];
+      if (divs.length > 0) {
+        const items = divs.map((div) => {
+          const indentMatch = div.match(/<div>((?:&nbsp;)*)<li/);
+          const listItemMatch = div.match(/<li class="ordered-list">.*?<\/li>/);
+          if (indentMatch && listItemMatch) {
+            const indentation = indentMatch[1];
+            const listItem = listItemMatch[0];
+            return listItem.replace(/<li class="ordered-list">/, `<li class="ordered-list">${indentation}`);
+          }
+          return listItemMatch ? listItemMatch[0] : "";
+        }).filter(Boolean);
         return "<ol>" + items.join("") + "</ol>";
       }
       return match;
@@ -1894,6 +1937,14 @@ function generateStyles(options = {}) {
       font-style: italic !important;
     }
 
+    /* Strikethrough text */
+    .overtype-wrapper .overtype-preview del {
+      color: var(--del, #ee964b) !important;
+      text-decoration: line-through !important;
+      text-decoration-color: var(--del, #ee964b) !important;
+      text-decoration-thickness: 1px !important;
+    }
+
     /* Inline code */
     .overtype-wrapper .overtype-preview code {
       background: var(--code-bg, rgba(244, 211, 94, 0.4)) !important;
@@ -2037,10 +2088,10 @@ function generateStyles(options = {}) {
       height: 8px !important;
       background: #4caf50 !important;
       border-radius: 50% !important;
-      animation: pulse 2s infinite !important;
+      animation: overtype-pulse 2s infinite !important;
     }
     
-    @keyframes pulse {
+    @keyframes overtype-pulse {
       0%, 100% { opacity: 1; transform: scale(1); }
       50% { opacity: 0.6; transform: scale(1.2); }
     }
@@ -2048,19 +2099,19 @@ function generateStyles(options = {}) {
 
     /* Toolbar Styles */
     .overtype-toolbar {
-      display: flex;
-      align-items: center;
-      gap: 4px;
+      display: flex !important;
+      align-items: center !important;
+      gap: 4px !important;
       padding: 8px !important; /* Override reset */
       background: var(--toolbar-bg, var(--bg-primary, #f8f9fa)) !important; /* Override reset */
       overflow-x: auto !important; /* Allow horizontal scrolling */
       overflow-y: hidden !important; /* Hide vertical overflow */
-      -webkit-overflow-scrolling: touch;
-      flex-shrink: 0;
+      -webkit-overflow-scrolling: touch !important;
+      flex-shrink: 0 !important;
       height: auto !important;
       grid-row: 1 !important; /* Always first row in grid */
       position: relative !important; /* Override reset */
-      z-index: 100; /* Ensure toolbar is above wrapper */
+      z-index: 100 !important; /* Ensure toolbar is above wrapper */
       scrollbar-width: thin; /* Thin scrollbar on Firefox */
     }
     
@@ -2442,20 +2493,67 @@ var eyeIcon = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke
 
 // src/toolbar.js
 var Toolbar = class {
-  constructor(editor) {
+  constructor(editor, buttonConfig = null) {
     this.editor = editor;
     this.container = null;
     this.buttons = {};
+    this.buttonConfig = buttonConfig;
+  }
+  /**
+   * Check if cursor/selection is inside a markdown link
+   * @param {HTMLTextAreaElement} textarea - The textarea element
+   * @returns {boolean} True if inside a link
+   */
+  isInsideLink(textarea) {
+    const value = textarea.value;
+    const start = textarea.selectionStart;
+    const end = textarea.selectionEnd;
+    let insideLink = false;
+    let openBracket = -1;
+    let closeBracket = -1;
+    for (let i = start - 1; i >= 0; i--) {
+      if (value[i] === "[") {
+        openBracket = i;
+        break;
+      }
+      if (value[i] === "\n") {
+        break;
+      }
+    }
+    if (openBracket >= 0) {
+      for (let i = end; i < value.length - 1; i++) {
+        if (value[i] === "]" && value[i + 1] === "(") {
+          closeBracket = i;
+          break;
+        }
+        if (value[i] === "\n") {
+          break;
+        }
+      }
+    }
+    if (openBracket >= 0 && closeBracket >= 0) {
+      for (let i = closeBracket + 2; i < value.length; i++) {
+        if (value[i] === ")") {
+          insideLink = true;
+          break;
+        }
+        if (value[i] === "\n" || value[i] === " ") {
+          break;
+        }
+      }
+    }
+    return insideLink;
   }
   /**
    * Create and attach toolbar to editor
    */
   create() {
+    var _a;
     this.container = document.createElement("div");
     this.container.className = "overtype-toolbar";
     this.container.setAttribute("role", "toolbar");
     this.container.setAttribute("aria-label", "Text formatting");
-    const buttonConfig = [
+    const buttonConfig = (_a = this.buttonConfig) != null ? _a : [
       { name: "bold", icon: boldIcon, title: "Bold (Ctrl+B)", action: "toggleBold" },
       { name: "italic", icon: italicIcon, title: "Italic (Ctrl+I)", action: "toggleItalic" },
       { separator: true },
@@ -2549,6 +2647,9 @@ var Toolbar = class {
           insertLink(textarea);
           break;
         case "toggleCode":
+          if (this.isInsideLink(textarea)) {
+            return;
+          }
           toggleCode(textarea);
           break;
         case "toggleBulletList":
@@ -2764,29 +2865,29 @@ var LinkTooltip = class {
           position: absolute;
           position-anchor: var(--target-anchor, --link-0);
           position-area: block-end center;
-          margin-top: 8px;
+          margin-top: 8px !important;
           
-          background: #333;
-          color: white;
-          padding: 6px 10px;
-          border-radius: 16px;
-          font-size: 12px;
-          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-          display: none;
-          z-index: 10000;
-          cursor: pointer;
-          box-shadow: 0 2px 8px rgba(0,0,0,0.3);
-          max-width: 300px;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
+          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;
+          z-index: 10000 !important;
+          cursor: pointer !important;
+          box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
+          max-width: 300px !important;
+          white-space: nowrap !important;
+          overflow: hidden !important;
+          text-overflow: ellipsis !important;
           
           position-try: most-width block-end inline-end, flip-inline, block-start center;
           position-visibility: anchors-visible;
         }
         
         .overtype-link-tooltip.visible {
-          display: flex;
+          display: flex !important;
         }
       }
     `;
@@ -2934,7 +3035,8 @@ var _OverType = class _OverType {
     this.shortcuts = new ShortcutsManager(this);
     this.linkTooltip = new LinkTooltip(this);
     if (this.options.toolbar) {
-      this.toolbar = new Toolbar(this);
+      const toolbarButtons = typeof this.options.toolbar === "object" ? this.options.toolbar.buttons : null;
+      this.toolbar = new Toolbar(this, toolbarButtons);
       this.toolbar.create();
       this.textarea.addEventListener("selectionchange", () => {
         this.toolbar.updateButtonStates();
@@ -3416,24 +3518,36 @@ var _OverType = class _OverType {
   }
   /**
    * Get the rendered HTML of the current content
-   * @param {boolean} processForPreview - If true, post-processes HTML for preview mode (consolidates lists/code blocks)
+   * @param {Object} options - Rendering options
+   * @param {boolean} options.cleanHTML - If true, removes syntax markers and OverType-specific classes
    * @returns {string} Rendered HTML
    */
-  getRenderedHTML(processForPreview = false) {
+  getRenderedHTML(options = {}) {
     const markdown = this.getValue();
     let html = MarkdownParser.parse(markdown);
-    if (processForPreview) {
-      html = MarkdownParser.postProcessHTML(html);
+    if (options.cleanHTML) {
+      html = html.replace(/<span class="syntax-marker[^"]*">.*?<\/span>/g, "");
+      html = html.replace(/\sclass="(bullet-list|ordered-list|code-fence|hr-marker|blockquote|url-part)"/g, "");
+      html = html.replace(/\sclass=""/g, "");
     }
     return html;
   }
   /**
    * Get the current preview element's HTML
+   * This includes all syntax markers and OverType styling
    * @returns {string} Current preview HTML (as displayed)
    */
   getPreviewHTML() {
     return this.preview.innerHTML;
   }
+  /**
+   * Get clean HTML without any OverType-specific markup
+   * Useful for exporting to other formats or storage
+   * @returns {string} Clean HTML suitable for export
+   */
+  getCleanHTML() {
+    return this.getRenderedHTML({ cleanHTML: true });
+  }
   /**
    * Focus the editor
    */
@@ -3752,9 +3866,6 @@ OverType.ShortcutsManager = ShortcutsManager;
 OverType.themes = { solar, cave: getTheme("cave") };
 OverType.getTheme = getTheme;
 OverType.currentTheme = solar;
-if (typeof window !== "undefined" && typeof window.document !== "undefined") {
-  window.OverType = OverType;
-}
 var overtype_default = OverType;
 export {
   OverType,