overtype 2.0.0 → 2.0.2

package/README.md

@@ -1,6 +1,6 @@
 # OverType
 
-A lightweight markdown editor library with perfect WYSIWYG alignment using an invisible textarea overlay technique. Includes optional toolbar. ~91KB minified with all features.
+A lightweight markdown editor library with perfect WYSIWYG alignment using an invisible textarea overlay technique. Includes optional toolbar. ~92KB minified with all features.
 
 ## Live Examples
 
@@ -19,7 +19,7 @@ A lightweight markdown editor library with perfect WYSIWYG alignment using an in
 - ⌨️ **Keyboard shortcuts** - Common markdown shortcuts (Cmd/Ctrl+B for bold, etc.)
 - 📱 **Mobile optimized** - Responsive design with mobile-specific styles
 - 🔄 **DOM persistence aware** - Recovers from existing DOM (perfect for HyperClay and similar platforms)
-- 🚀 **Lightweight** - ~91KB minified
+- 🚀 **Lightweight** - ~92KB minified
 - 🎯 **Optional toolbar** - Clean, minimal toolbar with all essential formatting
 - ✨ **Smart shortcuts** - Keyboard shortcuts with selection preservation
 - 📝 **Smart list continuation** - GitHub-style automatic list continuation on Enter
@@ -35,7 +35,7 @@ We overlap an invisible textarea on top of styled output, giving the illusion of
 
 | Feature | OverType | HyperMD | Milkdown | TUI Editor | EasyMDE |
 |---------|----------|---------|----------|------------|---------|
-| **Size** | ~91KB | 364.02 KB | 344.51 KB | 560.99 KB | 323.69 KB |
+| **Size** | ~92KB | 364.02 KB | 344.51 KB | 560.99 KB | 323.69 KB |
 | **Dependencies** | Bundled | CodeMirror | ProseMirror + plugins | Multiple libs | CodeMirror |
 | **Setup** | Single file | Complex config | Build step required | Complex config | Moderate |
 | **Approach** | Invisible textarea | ContentEditable | ContentEditable | ContentEditable | CodeMirror |
@@ -740,6 +740,7 @@ Special thanks to:
 - [kbhomes](https://github.com/kbhomes) - Fixed text selection desynchronization during overscroll ([#17](https://github.com/panphora/overtype/pull/17))
 - [Kristián Kostecký](https://github.com/kristiankostecky) - Fixed toolbar option being ignored in reinit() ([#62](https://github.com/panphora/overtype/pull/62))
 - [Lyric Wai](https://github.com/lyricat) - Fixed double-escaping of links ([#64](https://github.com/panphora/overtype/pull/64)), reported code block alignment issues ([#65](https://github.com/panphora/overtype/issues/65))
+- [kozi](https://github.com/kozi) - Reported link tooltip issues in Firefox ([#68](https://github.com/panphora/overtype/issues/68)) and toolbar positioning ([#69](https://github.com/panphora/overtype/issues/69))
 
 ### TypeScript & Framework Support
 - [merlinz01](https://github.com/merlinz01) - Initial TypeScript definitions implementation ([#20](https://github.com/panphora/overtype/pull/20))
@@ -766,12 +767,12 @@ MIT
 
 Contributions are welcome! Please feel free to submit a Pull Request.
 
+<p>&nbsp;</p>
+
 ---
 
 Built with the radical idea that sometimes dumb ideas work.
 
----
-
 **Ready for another radical idea?**  
 Let's remove every layer of the web application stack.
 

package/dist/overtype-webcomponent.esm.js

@@ -1,5 +1,5 @@
 /**
- * OverType v2.0.0
+ * OverType v2.0.2
  * A lightweight markdown editor library with perfect WYSIWYG alignment
  * @license MIT
  * @author Demo User
@@ -105,7 +105,7 @@ var MarkdownParser = class {
     return html.replace(/^((?: )*)-\s+\[([ xX])\]\s+(.+)$/, (match, indent, checked, content) => {
       if (isPreviewMode) {
         const isChecked = checked.toLowerCase() === "x";
-        return `${indent}<li class="task-list"><input type="checkbox" disabled ${isChecked ? "checked" : ""}> ${content}</li>`;
+        return `${indent}<li class="task-list"><input type="checkbox" ${isChecked ? "checked" : ""}> ${content}</li>`;
       } else {
         return `${indent}<li class="task-list"><span class="syntax-marker">- [${checked}] </span>${content}</li>`;
       }
@@ -1839,8 +1839,8 @@ function generateStyles(options = {}) {
     
     /* Container base styles after reset */
     .overtype-container {
-      display: grid !important;
-      grid-template-rows: auto 1fr auto !important;
+      display: flex !important;
+      flex-direction: column !important;
       width: 100% !important;
       height: 100% !important;
       position: relative !important; /* Override reset - needed for absolute children */
@@ -1860,10 +1860,10 @@ function generateStyles(options = {}) {
     /* Auto-resize mode styles */
     .overtype-container.overtype-auto-resize {
       height: auto !important;
-      grid-template-rows: auto auto auto !important;
     }
-    
+
     .overtype-container.overtype-auto-resize .overtype-wrapper {
+      flex: 0 0 auto !important; /* Don't grow/shrink, use explicit height */
       height: auto !important;
       min-height: 60px !important;
       overflow: visible !important;
@@ -1872,11 +1872,10 @@ function generateStyles(options = {}) {
     .overtype-wrapper {
       position: relative !important; /* Override reset - needed for absolute children */
       width: 100% !important;
-      height: 100% !important; /* Take full height of grid cell */
+      flex: 1 1 0 !important; /* Grow to fill remaining space, with flex-basis: 0 */
       min-height: 60px !important; /* Minimum usable height */
       overflow: hidden !important;
       background: var(--bg-secondary, #ffffff) !important;
-      grid-row: 2 !important; /* Always second row in grid */
       z-index: 1; /* Below toolbar and dropdown */
     }
 
@@ -2211,7 +2210,7 @@ function generateStyles(options = {}) {
 
     /* Stats bar */
     
-    /* Stats bar - positioned by grid, not absolute */
+    /* Stats bar - positioned by flexbox */
     .overtype-stats {
       height: 40px !important;
       padding: 0 20px !important;
@@ -2223,7 +2222,7 @@ function generateStyles(options = {}) {
       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
       font-size: 0.85rem !important;
       color: #666 !important;
-      grid-row: 3 !important; /* Always third row in grid */
+      flex-shrink: 0 !important; /* Don't shrink */
     }
     
     /* Dark theme stats bar */
@@ -2266,7 +2265,6 @@ function generateStyles(options = {}) {
       -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 !important; /* Ensure toolbar is above wrapper */
       scrollbar-width: thin; /* Thin scrollbar on Firefox */
@@ -2336,9 +2334,6 @@ function generateStyles(options = {}) {
     }
 
     /* Adjust wrapper when toolbar is present */
-    .overtype-container .overtype-toolbar + .overtype-wrapper {
-    }
-
     /* Mobile toolbar adjustments */
     @media (max-width: 640px) {
       .overtype-toolbar {
@@ -2609,36 +2604,42 @@ function generateStyles(options = {}) {
       height: 2px !important;
     }
 
-    /* Link Tooltip - CSS Anchor Positioning */
+    /* Link Tooltip - Base styles (all browsers) */
+    .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;
+      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;
+
+      /* Base positioning for Floating UI fallback */
+      position: absolute;
+    }
+
+    .overtype-link-tooltip.visible {
+      display: flex !important;
+    }
+
+    /* CSS Anchor Positioning (modern browsers only) */
     @supports (position-anchor: --x) and (position-area: center) {
       .overtype-link-tooltip {
-        position: absolute;
+        /* Only anchor positioning specific properties */
         position-anchor: var(--target-anchor, --link-0);
         position-area: block-end center;
         margin-top: 8px !important;
-
-        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 !important;
-      }
     }
 
     ${mobileStyles}
@@ -2671,7 +2672,7 @@ var Toolbar = class {
         this.container.appendChild(button);
       }
     });
-    this.editor.wrapper.insertBefore(this.container, this.editor.wrapper.firstChild);
+    this.editor.container.insertBefore(this.container, this.editor.wrapper);
   }
   /**
    * Create a toolbar separator
@@ -2896,9 +2897,26 @@ var LinkTooltip = class {
     this.currentLink = null;
     this.hideTimeout = null;
     this.visibilityChangeHandler = null;
+    this.useFloatingUI = false;
+    this.floatingUI = null;
     this.init();
   }
-  init() {
+  async init() {
+    const supportsAnchorPositioning = CSS.supports("position-anchor: --x") && CSS.supports("position-area: center");
+    if (!supportsAnchorPositioning) {
+      try {
+        const importFn = new Function("url", "return import(url)");
+        const { computePosition, offset, shift, flip } = await importFn(
+          "https://cdn.jsdelivr.net/npm/@floating-ui/dom@1.7.4/+esm"
+        );
+        this.floatingUI = { computePosition, offset, shift, flip };
+        this.useFloatingUI = true;
+      } catch (error) {
+        console.warn("Failed to load Floating UI fallback:", error);
+        this.floatingUI = null;
+        this.useFloatingUI = false;
+      }
+    }
     this.createTooltip();
     this.editor.textarea.addEventListener("selectionchange", () => this.checkCursorPosition());
     this.editor.textarea.addEventListener("keyup", (e) => {
@@ -2907,7 +2925,13 @@ var LinkTooltip = class {
       }
     });
     this.editor.textarea.addEventListener("input", () => this.hide());
-    this.editor.textarea.addEventListener("scroll", () => this.hide());
+    this.editor.textarea.addEventListener("scroll", () => {
+      if (this.useFloatingUI && this.currentLink) {
+        this.showWithFloatingUI(this.currentLink);
+      } else {
+        this.hide();
+      }
+    });
     this.editor.textarea.addEventListener("blur", () => this.hide());
     this.visibilityChangeHandler = () => {
       if (document.hidden) {
@@ -2916,7 +2940,6 @@ var LinkTooltip = class {
     };
     document.addEventListener("visibilitychange", this.visibilityChangeHandler);
     this.tooltip.addEventListener("mouseenter", () => this.cancelHide());
-    this.tooltip.addEventListener("mouseleave", () => this.scheduleHide());
   }
   createTooltip() {
     this.tooltip = document.createElement("div");
@@ -2977,9 +3000,52 @@ var LinkTooltip = class {
     this.cancelHide();
     const urlSpan = this.tooltip.querySelector(".overtype-link-tooltip-url");
     urlSpan.textContent = linkInfo.url;
-    this.tooltip.style.setProperty("--target-anchor", `--link-${linkInfo.index}`);
+    if (this.useFloatingUI) {
+      this.showWithFloatingUI(linkInfo);
+    } else {
+      this.showWithAnchorPositioning(linkInfo);
+    }
     this.tooltip.classList.add("visible");
   }
+  showWithAnchorPositioning(linkInfo) {
+    this.tooltip.style.setProperty("--target-anchor", `--link-${linkInfo.index}`);
+  }
+  async showWithFloatingUI(linkInfo) {
+    const anchorElement = this.findAnchorElement(linkInfo.index);
+    if (!anchorElement) {
+      return;
+    }
+    const rect = anchorElement.getBoundingClientRect();
+    if (rect.width === 0 || rect.height === 0) {
+      return;
+    }
+    try {
+      const { x, y } = await this.floatingUI.computePosition(
+        anchorElement,
+        this.tooltip,
+        {
+          placement: "bottom",
+          middleware: [
+            this.floatingUI.offset(8),
+            this.floatingUI.shift({ padding: 8 }),
+            this.floatingUI.flip()
+          ]
+        }
+      );
+      Object.assign(this.tooltip.style, {
+        left: `${x}px`,
+        top: `${y}px`,
+        position: "absolute"
+      });
+    } catch (error) {
+      console.warn("Floating UI positioning failed:", error);
+      return;
+    }
+  }
+  findAnchorElement(linkIndex) {
+    const preview = this.editor.preview;
+    return preview.querySelector(`a[style*="--link-${linkIndex}"]`);
+  }
   hide() {
     this.tooltip.classList.remove("visible");
     this.currentLink = null;
@@ -3005,6 +3071,8 @@ var LinkTooltip = class {
     }
     this.tooltip = null;
     this.currentLink = null;
+    this.floatingUI = null;
+    this.useFloatingUI = false;
   }
 };
 
@@ -3459,22 +3527,10 @@ var _OverType = class _OverType {
       this._updateStats();
     }
     this.element.appendChild(this.container);
-    if (window.location.pathname.includes("demo.html")) {
-      console.log("_createDOM completed:", {
-        elementId: this.element.id,
-        autoResize: this.options.autoResize,
-        containerClasses: this.container.className,
-        hasStats: !!this.statsBar,
-        hasToolbar: this.options.toolbar
-      });
-    }
     if (this.options.autoResize) {
       this._setupAutoResize();
     } else {
       this.container.classList.remove("overtype-auto-resize");
-      if (window.location.pathname.includes("demo.html")) {
-        console.log("Removed auto-resize class from:", this.element.id);
-      }
     }
   }
   /**
@@ -3977,6 +4033,7 @@ var _OverType = class _OverType {
    */
   showNormalEditMode() {
     this.container.dataset.mode = "normal";
+    this.updatePreview();
     requestAnimationFrame(() => {
       this.textarea.scrollTop = this.preview.scrollTop;
       this.textarea.scrollLeft = this.preview.scrollLeft;
@@ -4004,6 +4061,7 @@ var _OverType = class _OverType {
    */
   showPreviewMode() {
     this.container.dataset.mode = "preview";
+    this.updatePreview();
     return this;
   }
   /**