overtype 2.0.0 → 2.0.2

package/dist/overtype.cjs

@@ -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
@@ -131,7 +131,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>`;
       }
@@ -1865,8 +1865,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 */
@@ -1886,10 +1886,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;
@@ -1898,11 +1898,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 */
     }
 
@@ -2237,7 +2236,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;
@@ -2249,7 +2248,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 */
@@ -2292,7 +2291,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 */
@@ -2362,9 +2360,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 {
@@ -2635,36 +2630,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}
@@ -2697,7 +2698,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
@@ -2922,9 +2923,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) => {
@@ -2933,7 +2951,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) {
@@ -2942,7 +2966,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");
@@ -3003,9 +3026,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;
@@ -3031,6 +3097,8 @@ var LinkTooltip = class {
     }
     this.tooltip = null;
     this.currentLink = null;
+    this.floatingUI = null;
+    this.useFloatingUI = false;
   }
 };
 
@@ -3485,22 +3553,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);
-      }
     }
   }
   /**
@@ -4003,6 +4059,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;
@@ -4030,6 +4087,7 @@ var _OverType = class _OverType {
    */
   showPreviewMode() {
     this.container.dataset.mode = "preview";
+    this.updatePreview();
     return this;
   }
   /**