overtype 1.2.3 → 1.2.4

package/dist/overtype.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
@@ -155,6 +155,17 @@ var OverType = (() => {
       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
@@ -217,6 +228,7 @@ var OverType = (() => {
         sanctuaries.set(placeholder, match);
         return placeholder;
       });
+      html = this.parseStrikethrough(html);
       html = this.parseBold(html);
       html = this.parseItalic(html);
       sanctuaries.forEach((content, placeholder) => {
@@ -351,6 +363,17 @@ var OverType = (() => {
             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 {
@@ -368,15 +391,35 @@ var OverType = (() => {
     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;
@@ -1918,6 +1961,14 @@ ${blockSuffix}` : suffix;
       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;
@@ -2061,10 +2112,10 @@ ${blockSuffix}` : suffix;
       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); }
     }
@@ -2072,19 +2123,19 @@ ${blockSuffix}` : suffix;
 
     /* 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 */
     }
     
@@ -2466,20 +2517,67 @@ ${blockSuffix}` : suffix;
 
   // 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 },
@@ -2573,6 +2671,9 @@ ${blockSuffix}` : suffix;
             insertLink(textarea);
             break;
           case "toggleCode":
+            if (this.isInsideLink(textarea)) {
+              return;
+            }
             toggleCode(textarea);
             break;
           case "toggleBulletList":
@@ -2788,29 +2889,29 @@ ${blockSuffix}` : suffix;
           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;
         }
       }
     `;
@@ -2958,7 +3059,8 @@ ${blockSuffix}` : suffix;
       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();
@@ -3440,24 +3542,36 @@ ${blockSuffix}` : suffix;
     }
     /**
      * 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
      */
@@ -3776,9 +3890,6 @@ ${blockSuffix}` : suffix;
   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;
   return __toCommonJS(overtype_exports);
 })();
@@ -3787,4 +3898,9 @@ ${blockSuffix}` : suffix;
  * @version 1.0.0
  * @license MIT
  */
+
+if (typeof window !== "undefined" && typeof window.document !== "undefined") {
+  window.OverType = OverType.default ? OverType.default : OverType;
+}
+    
 //# sourceMappingURL=overtype.js.map