overtype 2.0.1 → 2.0.2

package/src/link-tooltip.js

@@ -1,7 +1,7 @@
 /**
- * Link Tooltip - CSS Anchor Positioning with index-based anchors
+ * Link Tooltip - CSS Anchor Positioning with Floating UI fallback
  * Shows a clickable tooltip when cursor is within a link
- * Uses CSS anchor positioning with dynamically selected anchor
+ * Uses CSS anchor positioning for modern browsers, Floating UI for older browsers
  */
 
 export class LinkTooltip {
@@ -11,11 +11,35 @@ export class LinkTooltip {
     this.currentLink = null;
     this.hideTimeout = null;
     this.visibilityChangeHandler = null;
+    this.useFloatingUI = false;
+    this.floatingUI = null;
 
     this.init();
   }
 
-  init() {
+  async init() {
+    // Detect CSS anchor positioning support
+    const supportsAnchorPositioning = CSS.supports('position-anchor: --x') &&
+                                      CSS.supports('position-area: center');
+
+    // Load Floating UI if needed
+    if (!supportsAnchorPositioning) {
+      try {
+        // Use indirect eval to prevent bundler from processing the import
+        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) {
+        // If dynamic import fails, tooltips simply won't show
+        console.warn('Failed to load Floating UI fallback:', error);
+        this.floatingUI = null;
+        this.useFloatingUI = false;
+      }
+    }
+
     // Create tooltip element
     // Note: Styles are now in the main stylesheet (styles.js) with @supports wrapper
     this.createTooltip();
@@ -28,9 +52,19 @@ export class LinkTooltip {
       }
     });
 
-    // Hide tooltip when typing or scrolling
+    // Hide tooltip when typing
     this.editor.textarea.addEventListener('input', () => this.hide());
-    this.editor.textarea.addEventListener('scroll', () => this.hide());
+
+    // Reposition or hide tooltip when scrolling
+    this.editor.textarea.addEventListener('scroll', () => {
+      if (this.useFloatingUI && this.currentLink) {
+        // Reposition the tooltip for Floating UI
+        this.showWithFloatingUI(this.currentLink);
+      } else {
+        // Hide for CSS anchor positioning (native browser behavior handles this)
+        this.hide();
+      }
+    });
 
     // Hide tooltip when textarea loses focus
     this.editor.textarea.addEventListener('blur', () => this.hide());
@@ -43,9 +77,8 @@ export class LinkTooltip {
     };
     document.addEventListener('visibilitychange', this.visibilityChangeHandler);
 
-    // Keep tooltip visible on hover
+    // Keep tooltip visible on hover (only prevent hide, don't schedule hide on leave)
     this.tooltip.addEventListener('mouseenter', () => this.cancelHide());
-    this.tooltip.addEventListener('mouseleave', () => this.scheduleHide());
   }
 
   createTooltip() {
@@ -128,11 +161,67 @@ export class LinkTooltip {
     const urlSpan = this.tooltip.querySelector('.overtype-link-tooltip-url');
     urlSpan.textContent = linkInfo.url;
 
+    if (this.useFloatingUI) {
+      this.showWithFloatingUI(linkInfo);
+    } else {
+      this.showWithAnchorPositioning(linkInfo);
+    }
+
+    this.tooltip.classList.add('visible');
+  }
+
+  showWithAnchorPositioning(linkInfo) {
     // Set the CSS variable to point to the correct anchor
     this.tooltip.style.setProperty('--target-anchor', `--link-${linkInfo.index}`);
+  }
 
-    // Show tooltip (CSS anchor positioning handles the rest)
-    this.tooltip.classList.add('visible');
+  async showWithFloatingUI(linkInfo) {
+    // Find the <a> element in preview that corresponds to this link
+    const anchorElement = this.findAnchorElement(linkInfo.index);
+
+    if (!anchorElement) {
+      return;
+    }
+
+    // Check if anchor element is visible and in viewport
+    const rect = anchorElement.getBoundingClientRect();
+    if (rect.width === 0 || rect.height === 0) {
+      return;
+    }
+
+    try {
+      // Compute position using Floating UI
+      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()
+          ]
+        }
+      );
+
+      // Apply position
+      Object.assign(this.tooltip.style, {
+        left: `${x}px`,
+        top: `${y}px`,
+        position: 'absolute'
+      });
+    } catch (error) {
+      // If Floating UI computation fails, don't show tooltip
+      console.warn('Floating UI positioning failed:', error);
+      return;
+    }
+  }
+
+  findAnchorElement(linkIndex) {
+    // Find the <a> element with the matching anchor-name style
+    const preview = this.editor.preview;
+    // Direct query for the specific link - more efficient than iterating
+    return preview.querySelector(`a[style*="--link-${linkIndex}"]`);
   }
 
   hide() {
@@ -166,5 +255,7 @@ export class LinkTooltip {
     }
     this.tooltip = null;
     this.currentLink = null;
+    this.floatingUI = null;
+    this.useFloatingUI = false;
   }
 }

package/src/overtype.js

@@ -362,27 +362,12 @@ class OverType {
       // Add container to element
       this.element.appendChild(this.container);
       
-      // Debug logging
-      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
-        });
-      }
-      
       // Setup auto-resize if enabled
       if (this.options.autoResize) {
         this._setupAutoResize();
       } else {
         // Ensure auto-resize class is removed if not using auto-resize
         this.container.classList.remove('overtype-auto-resize');
-        
-        if (window.location.pathname.includes('demo.html')) {
-          console.log('Removed auto-resize class from:', this.element.id);
-        }
       }
     }
 

package/src/styles.js

@@ -72,8 +72,8 @@ export 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 */
@@ -93,10 +93,10 @@ export 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;
@@ -105,11 +105,10 @@ export 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 */
     }
 
@@ -444,7 +443,7 @@ export 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;
@@ -456,7 +455,7 @@ export 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 */
@@ -499,7 +498,6 @@ export 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 */
@@ -569,9 +567,6 @@ export function generateStyles(options = {}) {
     }
 
     /* Adjust wrapper when toolbar is present */
-    .overtype-container .overtype-toolbar + .overtype-wrapper {
-    }
-
     /* Mobile toolbar adjustments */
     @media (max-width: 640px) {
       .overtype-toolbar {
@@ -842,36 +837,42 @@ export 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}

package/src/toolbar.js

@@ -36,7 +36,8 @@ export class Toolbar {
       }
     });
 
-    this.editor.wrapper.insertBefore(this.container, this.editor.wrapper.firstChild);
+    // Insert toolbar before the wrapper (as sibling, not child)
+    this.editor.container.insertBefore(this.container, this.editor.wrapper);
   }
 
   /**