overtype 1.2.2 → 1.2.4

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;
@@ -373,9 +416,147 @@ var MarkdownParser = class {
     });
     return processed;
   }
+  /**
+   * Get list context at cursor position
+   * @param {string} text - Full text content
+   * @param {number} cursorPosition - Current cursor position
+   * @returns {Object} List context information
+   */
+  static getListContext(text, cursorPosition) {
+    const lines = text.split("\n");
+    let currentPos = 0;
+    let lineIndex = 0;
+    let lineStart = 0;
+    for (let i = 0; i < lines.length; i++) {
+      const lineLength = lines[i].length;
+      if (currentPos + lineLength >= cursorPosition) {
+        lineIndex = i;
+        lineStart = currentPos;
+        break;
+      }
+      currentPos += lineLength + 1;
+    }
+    const currentLine = lines[lineIndex];
+    const lineEnd = lineStart + currentLine.length;
+    const checkboxMatch = currentLine.match(this.LIST_PATTERNS.checkbox);
+    if (checkboxMatch) {
+      return {
+        inList: true,
+        listType: "checkbox",
+        indent: checkboxMatch[1],
+        marker: "-",
+        checked: checkboxMatch[2] === "x",
+        content: checkboxMatch[3],
+        lineStart,
+        lineEnd,
+        markerEndPos: lineStart + checkboxMatch[1].length + checkboxMatch[2].length + 5
+        // indent + "- [ ] "
+      };
+    }
+    const bulletMatch = currentLine.match(this.LIST_PATTERNS.bullet);
+    if (bulletMatch) {
+      return {
+        inList: true,
+        listType: "bullet",
+        indent: bulletMatch[1],
+        marker: bulletMatch[2],
+        content: bulletMatch[3],
+        lineStart,
+        lineEnd,
+        markerEndPos: lineStart + bulletMatch[1].length + bulletMatch[2].length + 1
+        // indent + marker + space
+      };
+    }
+    const numberedMatch = currentLine.match(this.LIST_PATTERNS.numbered);
+    if (numberedMatch) {
+      return {
+        inList: true,
+        listType: "numbered",
+        indent: numberedMatch[1],
+        marker: parseInt(numberedMatch[2]),
+        content: numberedMatch[3],
+        lineStart,
+        lineEnd,
+        markerEndPos: lineStart + numberedMatch[1].length + numberedMatch[2].length + 2
+        // indent + number + ". "
+      };
+    }
+    return {
+      inList: false,
+      listType: null,
+      indent: "",
+      marker: null,
+      content: currentLine,
+      lineStart,
+      lineEnd,
+      markerEndPos: lineStart
+    };
+  }
+  /**
+   * Create a new list item based on context
+   * @param {Object} context - List context from getListContext
+   * @returns {string} New list item text
+   */
+  static createNewListItem(context) {
+    switch (context.listType) {
+      case "bullet":
+        return `${context.indent}${context.marker} `;
+      case "numbered":
+        return `${context.indent}${context.marker + 1}. `;
+      case "checkbox":
+        return `${context.indent}- [ ] `;
+      default:
+        return "";
+    }
+  }
+  /**
+   * Renumber all numbered lists in text
+   * @param {string} text - Text containing numbered lists
+   * @returns {string} Text with renumbered lists
+   */
+  static renumberLists(text) {
+    const lines = text.split("\n");
+    const numbersByIndent = /* @__PURE__ */ new Map();
+    let inList = false;
+    const result = lines.map((line) => {
+      const match = line.match(this.LIST_PATTERNS.numbered);
+      if (match) {
+        const indent = match[1];
+        const indentLevel = indent.length;
+        const content = match[3];
+        if (!inList) {
+          numbersByIndent.clear();
+        }
+        const currentNumber = (numbersByIndent.get(indentLevel) || 0) + 1;
+        numbersByIndent.set(indentLevel, currentNumber);
+        for (const [level] of numbersByIndent) {
+          if (level > indentLevel) {
+            numbersByIndent.delete(level);
+          }
+        }
+        inList = true;
+        return `${indent}${currentNumber}. ${content}`;
+      } else {
+        if (line.trim() === "" || !line.match(/^\s/)) {
+          inList = false;
+          numbersByIndent.clear();
+        }
+        return line;
+      }
+    });
+    return result.join("\n");
+  }
 };
 // Track link index for anchor naming
 __publicField(MarkdownParser, "linkIndex", 0);
+/**
+ * List pattern definitions
+ */
+__publicField(MarkdownParser, "LIST_PATTERNS", {
+  bullet: /^(\s*)([-*+])\s+(.*)$/,
+  numbered: /^(\s*)(\d+)\.\s+(.*)$/,
+  checkbox: /^(\s*)-\s+\[([ x])\]\s+(.*)$/
+});
 
 // node_modules/markdown-actions/dist/markdown-actions.esm.js
 var __defProp2 = Object.defineProperty;
@@ -1756,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;
@@ -1899,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); }
     }
@@ -1910,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 */
     }
     
@@ -2304,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 },
@@ -2411,6 +2647,9 @@ var Toolbar = class {
           insertLink(textarea);
           break;
         case "toggleCode":
+          if (this.isInsideLink(textarea)) {
+            return;
+          }
           toggleCode(textarea);
           break;
         case "toggleBulletList":
@@ -2626,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;
         }
       }
     `;
@@ -2796,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();
@@ -2848,7 +3088,9 @@ var _OverType = class _OverType {
       showActiveLineRaw: false,
       showStats: false,
       toolbar: false,
-      statsFormatter: null
+      statsFormatter: null,
+      smartLists: true
+      // Enable smart list continuation
     };
     const { theme, colors, ...cleanOptions } = options;
     return {
@@ -3141,11 +3383,113 @@ var _OverType = class _OverType {
       this.textarea.dispatchEvent(new Event("input", { bubbles: true }));
       return;
     }
+    if (event.key === "Enter" && !event.shiftKey && !event.metaKey && !event.ctrlKey && this.options.smartLists) {
+      if (this.handleSmartListContinuation()) {
+        event.preventDefault();
+        return;
+      }
+    }
     const handled = this.shortcuts.handleKeydown(event);
     if (!handled && this.options.onKeydown) {
       this.options.onKeydown(event, this);
     }
   }
+  /**
+   * Handle smart list continuation
+   * @returns {boolean} Whether the event was handled
+   */
+  handleSmartListContinuation() {
+    const textarea = this.textarea;
+    const cursorPos = textarea.selectionStart;
+    const context = MarkdownParser.getListContext(textarea.value, cursorPos);
+    if (!context || !context.inList)
+      return false;
+    if (context.content.trim() === "" && cursorPos >= context.markerEndPos) {
+      this.deleteListMarker(context);
+      return true;
+    }
+    if (cursorPos > context.markerEndPos && cursorPos < context.lineEnd) {
+      this.splitListItem(context, cursorPos);
+    } else {
+      this.insertNewListItem(context);
+    }
+    if (context.listType === "numbered") {
+      this.scheduleNumberedListUpdate();
+    }
+    return true;
+  }
+  /**
+   * Delete list marker and exit list
+   * @private
+   */
+  deleteListMarker(context) {
+    this.textarea.setSelectionRange(context.lineStart, context.markerEndPos);
+    document.execCommand("delete");
+    this.textarea.dispatchEvent(new Event("input", { bubbles: true }));
+  }
+  /**
+   * Insert new list item
+   * @private
+   */
+  insertNewListItem(context) {
+    const newItem = MarkdownParser.createNewListItem(context);
+    document.execCommand("insertText", false, "\n" + newItem);
+    this.textarea.dispatchEvent(new Event("input", { bubbles: true }));
+  }
+  /**
+   * Split list item at cursor position
+   * @private
+   */
+  splitListItem(context, cursorPos) {
+    const textAfterCursor = context.content.substring(cursorPos - context.markerEndPos);
+    this.textarea.setSelectionRange(cursorPos, context.lineEnd);
+    document.execCommand("delete");
+    const newItem = MarkdownParser.createNewListItem(context);
+    document.execCommand("insertText", false, "\n" + newItem + textAfterCursor);
+    const newCursorPos = this.textarea.selectionStart - textAfterCursor.length;
+    this.textarea.setSelectionRange(newCursorPos, newCursorPos);
+    this.textarea.dispatchEvent(new Event("input", { bubbles: true }));
+  }
+  /**
+   * Schedule numbered list renumbering
+   * @private
+   */
+  scheduleNumberedListUpdate() {
+    if (this.numberUpdateTimeout) {
+      clearTimeout(this.numberUpdateTimeout);
+    }
+    this.numberUpdateTimeout = setTimeout(() => {
+      this.updateNumberedLists();
+    }, 10);
+  }
+  /**
+   * Update/renumber all numbered lists
+   * @private
+   */
+  updateNumberedLists() {
+    const value = this.textarea.value;
+    const cursorPos = this.textarea.selectionStart;
+    const newValue = MarkdownParser.renumberLists(value);
+    if (newValue !== value) {
+      let offset = 0;
+      const oldLines = value.split("\n");
+      const newLines = newValue.split("\n");
+      let charCount = 0;
+      for (let i = 0; i < oldLines.length && charCount < cursorPos; i++) {
+        if (oldLines[i] !== newLines[i]) {
+          const diff = newLines[i].length - oldLines[i].length;
+          if (charCount + oldLines[i].length < cursorPos) {
+            offset += diff;
+          }
+        }
+        charCount += oldLines[i].length + 1;
+      }
+      this.textarea.value = newValue;
+      const newCursorPos = cursorPos + offset;
+      this.textarea.setSelectionRange(newCursorPos, newCursorPos);
+      this.textarea.dispatchEvent(new Event("input", { bubbles: true }));
+    }
+  }
   /**
    * Handle scroll events
    * @private
@@ -3174,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
    */
@@ -3510,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,