overtype 1.0.6 → 1.1.1

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2024 Demo User
+Copyright (c) 2025 David Miranda
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -383,6 +383,27 @@ Check the `examples` folder for complete examples:
 - `custom-theme.html` - Theme customization
 - `dynamic.html` - Dynamic creation/destruction
 
+## Limitations
+
+Due to the transparent textarea overlay approach, OverType has some intentional design limitations:
+
+### Images Not Supported
+Images (`![alt](url)`) are not rendered. Variable-height images would break the character alignment between textarea and preview.
+
+### Monospace Font Required
+All text must use a monospace font to maintain alignment. Variable-width fonts would cause the textarea cursor position to drift from the visual text position.
+
+### Fixed Font Size
+All content must use the same font size. Different sizes for headers or other elements would break vertical alignment.
+
+### Visible Markdown Syntax
+All markdown formatting characters remain visible (e.g., `**bold**` shows the asterisks). This is intentional - hiding them would break the 1:1 character mapping.
+
+### Links Require Modifier Key
+Links are clickable with Cmd/Ctrl+Click only. Direct clicking would interfere with text editing since clicks need to position the cursor in the textarea.
+
+These limitations are what enable OverType's core benefits: perfect native textarea behavior, tiny size, and zero complexity.
+
 ## Development
 
 ```bash
@@ -431,6 +452,11 @@ OverType uses a unique invisible textarea overlay approach:
    - Textarea content drives everything
    - One-way data flow: textarea → parser → preview
 
+## Contributors
+
+Special thanks to:
+- [Josh Doman](https://github.com/joshdoman) - Fixed inline code formatting preservation ([#6](https://github.com/panphora/overtype/pull/6))
+
 ## License
 
 MIT

package/dist/overtype.esm.js

@@ -1,5 +1,5 @@
 /**
- * OverType v1.0.6
+ * OverType v1.1.0
  * A lightweight markdown editor library with perfect WYSIWYG alignment
  * @license MIT
  * @author Demo User
@@ -14,6 +14,12 @@ var __publicField = (obj, key, value) => {
 
 // src/parser.js
 var MarkdownParser = class {
+  /**
+   * Reset link index (call before parsing a new document)
+   */
+  static resetLinkIndex() {
+    this.linkIndex = 0;
+  }
   /**
    * Escape HTML special characters
    * @param {string} text - Raw text to escape
@@ -139,7 +145,10 @@ var MarkdownParser = class {
    * @returns {string} HTML with link styling
    */
   static parseLinks(html) {
-    return html.replace(/\[(.+?)\]\((.+?)\)/g, '<a href="$2"><span class="syntax-marker">[</span>$1<span class="syntax-marker">](</span><span class="syntax-marker">$2</span><span class="syntax-marker">)</span></a>');
+    return html.replace(/\[(.+?)\]\((.+?)\)/g, (match, text, url) => {
+      const anchorName = `--link-${this.linkIndex++}`;
+      return `<a href="${url}" style="anchor-name: ${anchorName}"><span class="syntax-marker">[</span>${text}<span class="syntax-marker">](</span><span class="syntax-marker">${url}</span><span class="syntax-marker">)</span></a>`;
+    });
   }
   /**
    * Parse all inline elements in correct order
@@ -149,9 +158,18 @@ var MarkdownParser = class {
   static parseInlineElements(text) {
     let html = text;
     html = this.parseInlineCode(html);
+    const codeBlocks = /* @__PURE__ */ new Map();
+    html = html.replace(/(<code>.*?<\/code>)/g, (match) => {
+      const placeholder = `\uE000${codeBlocks.size}\uE001`;
+      codeBlocks.set(placeholder, match);
+      return placeholder;
+    });
     html = this.parseLinks(html);
     html = this.parseBold(html);
     html = this.parseItalic(html);
+    codeBlocks.forEach((codeBlock, placeholder) => {
+      html = html.replace(placeholder, codeBlock);
+    });
     return html;
   }
   /**
@@ -186,6 +204,7 @@ var MarkdownParser = class {
    * @returns {string} Parsed HTML
    */
   static parse(text, activeLine = -1, showActiveLineRaw = false) {
+    this.resetLinkIndex();
     const lines = text.split("\n");
     const parsedLines = lines.map((line, index) => {
       if (showActiveLineRaw && index === activeLine) {
@@ -197,6 +216,8 @@ var MarkdownParser = class {
     return parsedLines.join("");
   }
 };
+// Track link index for anchor naming
+__publicField(MarkdownParser, "linkIndex", 0);
 
 // node_modules/markdown-actions/dist/markdown-actions.esm.js
 var __defProp2 = Object.defineProperty;
@@ -1487,6 +1508,8 @@ function generateStyles(options = {}) {
       padding: 0 !important;
       border-radius: 2px !important;
       font-family: inherit !important;
+      font-size: inherit !important;
+      line-height: inherit !important;
       font-weight: normal !important;
     }
 
@@ -1962,6 +1985,152 @@ var Toolbar = class {
   }
 };
 
+// src/link-tooltip.js
+var LinkTooltip = class {
+  constructor(editor) {
+    this.editor = editor;
+    this.tooltip = null;
+    this.currentLink = null;
+    this.hideTimeout = null;
+    this.init();
+  }
+  init() {
+    const supportsAnchor = CSS.supports("position-anchor: --x") && CSS.supports("position-area: center");
+    if (!supportsAnchor) {
+      return;
+    }
+    this.createTooltip();
+    this.editor.textarea.addEventListener("selectionchange", () => this.checkCursorPosition());
+    this.editor.textarea.addEventListener("keyup", (e) => {
+      if (e.key.includes("Arrow") || e.key === "Home" || e.key === "End") {
+        this.checkCursorPosition();
+      }
+    });
+    this.editor.textarea.addEventListener("input", () => this.hide());
+    this.editor.textarea.addEventListener("scroll", () => this.hide());
+    this.tooltip.addEventListener("mouseenter", () => this.cancelHide());
+    this.tooltip.addEventListener("mouseleave", () => this.scheduleHide());
+  }
+  createTooltip() {
+    this.tooltip = document.createElement("div");
+    this.tooltip.className = "overtype-link-tooltip";
+    const tooltipStyles = document.createElement("style");
+    tooltipStyles.textContent = `
+      @supports (position-anchor: --x) and (position-area: center) {
+        .overtype-link-tooltip {
+          position: absolute;
+          position-anchor: var(--target-anchor, --link-0);
+          position-area: block-end center;
+          margin-top: 8px;
+          
+          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;
+          
+          position-try: most-width block-end inline-end, flip-inline, block-start center;
+          position-visibility: anchors-visible;
+        }
+        
+        .overtype-link-tooltip.visible {
+          display: flex;
+        }
+      }
+    `;
+    document.head.appendChild(tooltipStyles);
+    this.tooltip.innerHTML = `
+      <span style="display: flex; align-items: center; gap: 6px;">
+        <svg width="12" height="12" viewBox="0 0 20 20" fill="currentColor" style="flex-shrink: 0;">
+          <path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z"></path>
+          <path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z"></path>
+        </svg>
+        <span class="overtype-link-tooltip-url"></span>
+      </span>
+    `;
+    this.tooltip.addEventListener("click", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (this.currentLink) {
+        window.open(this.currentLink.url, "_blank");
+        this.hide();
+      }
+    });
+    this.editor.container.appendChild(this.tooltip);
+  }
+  checkCursorPosition() {
+    const cursorPos = this.editor.textarea.selectionStart;
+    const text = this.editor.textarea.value;
+    const linkInfo = this.findLinkAtPosition(text, cursorPos);
+    if (linkInfo) {
+      if (!this.currentLink || this.currentLink.url !== linkInfo.url || this.currentLink.index !== linkInfo.index) {
+        this.show(linkInfo);
+      }
+    } else {
+      this.scheduleHide();
+    }
+  }
+  findLinkAtPosition(text, position) {
+    const linkRegex = /\[([^\]]+)\]\(([^)]+)\)/g;
+    let match;
+    let linkIndex = 0;
+    while ((match = linkRegex.exec(text)) !== null) {
+      const start = match.index;
+      const end = match.index + match[0].length;
+      if (position >= start && position <= end) {
+        return {
+          text: match[1],
+          url: match[2],
+          index: linkIndex,
+          start,
+          end
+        };
+      }
+      linkIndex++;
+    }
+    return null;
+  }
+  show(linkInfo) {
+    this.currentLink = linkInfo;
+    this.cancelHide();
+    const urlSpan = this.tooltip.querySelector(".overtype-link-tooltip-url");
+    urlSpan.textContent = linkInfo.url;
+    this.tooltip.style.setProperty("--target-anchor", `--link-${linkInfo.index}`);
+    this.tooltip.classList.add("visible");
+  }
+  hide() {
+    this.tooltip.classList.remove("visible");
+    this.currentLink = null;
+  }
+  scheduleHide() {
+    this.cancelHide();
+    this.hideTimeout = setTimeout(() => this.hide(), 300);
+  }
+  cancelHide() {
+    if (this.hideTimeout) {
+      clearTimeout(this.hideTimeout);
+      this.hideTimeout = null;
+    }
+  }
+  destroy() {
+    this.cancelHide();
+    if (this.tooltip && this.tooltip.parentNode) {
+      this.tooltip.parentNode.removeChild(this.tooltip);
+    }
+    this.tooltip = null;
+    this.currentLink = null;
+  }
+};
+
 // src/overtype.js
 var _OverType = class _OverType {
   /**
@@ -2020,6 +2189,7 @@ var _OverType = class _OverType {
       this._buildFromScratch();
     }
     this.shortcuts = new ShortcutsManager(this);
+    this.linkTooltip = new LinkTooltip(this);
     if (this.options.toolbar) {
       this.toolbar = new Toolbar(this);
       this.toolbar.create();
@@ -2290,6 +2460,36 @@ var _OverType = class _OverType {
    * @private
    */
   handleKeydown(event) {
+    if (event.key === "Tab") {
+      event.preventDefault();
+      const start = this.textarea.selectionStart;
+      const end = this.textarea.selectionEnd;
+      const value = this.textarea.value;
+      if (start !== end && event.shiftKey) {
+        const before = value.substring(0, start);
+        const selection = value.substring(start, end);
+        const after = value.substring(end);
+        const lines = selection.split("\n");
+        const outdented = lines.map((line) => line.replace(/^  /, "")).join("\n");
+        this.textarea.value = before + outdented + after;
+        this.textarea.selectionStart = start;
+        this.textarea.selectionEnd = start + outdented.length;
+      } else if (start !== end) {
+        const before = value.substring(0, start);
+        const selection = value.substring(start, end);
+        const after = value.substring(end);
+        const lines = selection.split("\n");
+        const indented = lines.map((line) => "  " + line).join("\n");
+        this.textarea.value = before + indented + after;
+        this.textarea.selectionStart = start;
+        this.textarea.selectionEnd = start + indented.length;
+      } else {
+        this.textarea.value = value.substring(0, start) + "  " + value.substring(end);
+        this.textarea.selectionStart = this.textarea.selectionEnd = start + 2;
+      }
+      this.textarea.dispatchEvent(new Event("input", { bubbles: true }));
+      return;
+    }
     const handled = this.shortcuts.handleKeydown(event);
     if (!handled && this.options.onKeydown) {
       this.options.onKeydown(event, this);