overtype 1.1.0 → 1.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "overtype",
-  "version": "1.1.0",
+  "version": "1.1.3",
   "description": "A lightweight markdown editor library with perfect WYSIWYG alignment using an invisible textarea overlay",
   "main": "dist/overtype.js",
   "module": "dist/overtype.esm.js",
@@ -46,7 +46,6 @@
   },
   "homepage": "https://github.com/panphora/overtype#readme",
   "dependencies": {
-    "@floating-ui/dom": "^1.7.3",
     "markdown-actions": "^1.1.2"
   }
 }

package/src/link-tooltip.js

@@ -1,73 +1,90 @@
 /**
- * Link Tooltip - Gmail/Google Docs style link preview
+ * Link Tooltip - CSS Anchor Positioning with index-based anchors
  * Shows a clickable tooltip when cursor is within a link
+ * Uses CSS anchor positioning with dynamically selected anchor
  */
 
-import { computePosition, flip, shift, offset } from '@floating-ui/dom';
-
 export class LinkTooltip {
   constructor(editor) {
     this.editor = editor;
     this.tooltip = null;
     this.currentLink = null;
     this.hideTimeout = null;
-    this.isMouseInTooltip = false;
-    this.isMouseInLink = false;
     
     this.init();
   }
   
   init() {
+    // Check for CSS anchor positioning support
+    const supportsAnchor = 
+      CSS.supports('position-anchor: --x') &&
+      CSS.supports('position-area: center');
+    
+    if (!supportsAnchor) {
+      // Don't show anything if not supported
+      return;
+    }
+    
     // Create tooltip element
     this.createTooltip();
     
     // Listen for cursor position changes
     this.editor.textarea.addEventListener('selectionchange', () => this.checkCursorPosition());
-    this.editor.textarea.addEventListener('input', () => this.checkCursorPosition());
     this.editor.textarea.addEventListener('keyup', (e) => {
-      // Arrow keys might move cursor
-      if (e.key.includes('Arrow')) {
+      if (e.key.includes('Arrow') || e.key === 'Home' || e.key === 'End') {
         this.checkCursorPosition();
       }
     });
     
-    // Hide tooltip when scrolling
+    // Hide tooltip when typing or scrolling
+    this.editor.textarea.addEventListener('input', () => this.hide());
     this.editor.textarea.addEventListener('scroll', () => this.hide());
     
-    // Mouse events for tooltip persistence
-    this.tooltip.addEventListener('mouseenter', () => {
-      this.isMouseInTooltip = true;
-      this.cancelHide();
-    });
-    
-    this.tooltip.addEventListener('mouseleave', () => {
-      this.isMouseInTooltip = false;
-      this.scheduleHide();
-    });
+    // Keep tooltip visible on hover
+    this.tooltip.addEventListener('mouseenter', () => this.cancelHide());
+    this.tooltip.addEventListener('mouseleave', () => this.scheduleHide());
   }
   
   createTooltip() {
+    // Create tooltip element
     this.tooltip = document.createElement('div');
     this.tooltip.className = 'overtype-link-tooltip';
-    this.tooltip.style.cssText = `
-      position: absolute;
-      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;
-      transition: opacity 0.2s;
-      opacity: 0;
+    
+    // Add CSS anchor positioning styles
+    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);
     
     // Add link icon and text container
     this.tooltip.innerHTML = `
@@ -90,8 +107,8 @@ export class LinkTooltip {
       }
     });
     
-    // Append to document body for proper positioning
-    document.body.appendChild(this.tooltip);
+    // Append tooltip to editor container
+    this.editor.container.appendChild(this.tooltip);
   }
   
   checkCursorPosition() {
@@ -99,19 +116,13 @@ export class LinkTooltip {
     const text = this.editor.textarea.value;
     
     // Find if cursor is within a markdown link
-    const link = this.findLinkAtPosition(text, cursorPos);
+    const linkInfo = this.findLinkAtPosition(text, cursorPos);
     
-    if (link) {
-      this.isMouseInLink = true;
-      if (!this.currentLink || 
-          this.currentLink.start !== link.start || 
-          this.currentLink.url !== link.url) {
-        // New link or different link
-        this.show(link);
+    if (linkInfo) {
+      if (!this.currentLink || this.currentLink.url !== linkInfo.url || this.currentLink.index !== linkInfo.index) {
+        this.show(linkInfo);
       }
     } else {
-      // Not in a link
-      this.isMouseInLink = false;
       this.scheduleHide();
     }
   }
@@ -120,6 +131,7 @@ export class LinkTooltip {
     // Regex to find markdown links: [text](url)
     const linkRegex = /\[([^\]]+)\]\(([^)]+)\)/g;
     let match;
+    let linkIndex = 0;
     
     while ((match = linkRegex.exec(text)) !== null) {
       const start = match.index;
@@ -127,128 +139,42 @@ export class LinkTooltip {
       
       if (position >= start && position <= end) {
         return {
-          start: start,
-          end: end,
           text: match[1],
           url: match[2],
-          fullMatch: match[0]
+          index: linkIndex,
+          start: start,
+          end: end
         };
       }
+      linkIndex++;
     }
     
     return null;
   }
   
-  async show(link) {
-    this.currentLink = link;
+  show(linkInfo) {
+    this.currentLink = linkInfo;
     this.cancelHide();
     
     // Update tooltip content
     const urlSpan = this.tooltip.querySelector('.overtype-link-tooltip-url');
-    urlSpan.textContent = link.url;
+    urlSpan.textContent = linkInfo.url;
     
-    // Get the position of the link in the preview
-    const linkElement = this.findLinkElementInPreview(link);
-    
-    if (linkElement) {
-      // Use the link element as reference
-      await this.positionTooltip(linkElement);
-    } else {
-      // Fallback: position based on cursor
-      await this.positionTooltipAtCursor(link);
-    }
+    // Set the CSS variable to point to the correct anchor
+    this.tooltip.style.setProperty('--target-anchor', `--link-${linkInfo.index}`);
     
-    // Show tooltip with animation
-    this.tooltip.style.display = 'block';
-    // Force reflow
-    this.tooltip.offsetHeight;
-    this.tooltip.style.opacity = '1';
-  }
-  
-  findLinkElementInPreview(link) {
-    // Find the corresponding link element in the preview
-    const links = this.editor.preview.querySelectorAll('a');
-    
-    for (const linkEl of links) {
-      // Check if this link contains our URL
-      const urlSpans = linkEl.querySelectorAll('.syntax-marker');
-      for (const span of urlSpans) {
-        if (span.textContent === link.url) {
-          return linkEl;
-        }
-      }
-    }
-    
-    return null;
-  }
-  
-  async positionTooltip(referenceEl) {
-    const { x, y } = await computePosition(referenceEl, this.tooltip, {
-      placement: 'bottom',
-      middleware: [
-        offset(6),
-        flip(),
-        shift({ padding: 10 })
-      ]
-    });
-    
-    Object.assign(this.tooltip.style, {
-      left: `${x}px`,
-      top: `${y}px`
-    });
-  }
-  
-  async positionTooltipAtCursor(link) {
-    // Get cursor position in the textarea
-    const textarea = this.editor.textarea;
-    
-    // Create a temporary element to measure text position
-    const measurer = document.createElement('div');
-    measurer.style.cssText = window.getComputedStyle(textarea).cssText;
-    measurer.style.position = 'absolute';
-    measurer.style.visibility = 'hidden';
-    measurer.style.whiteSpace = 'pre-wrap';
-    measurer.style.wordWrap = 'break-word';
-    
-    // Get text up to cursor
-    const textBeforeCursor = textarea.value.substring(0, link.start + link.fullMatch.length / 2);
-    measurer.textContent = textBeforeCursor;
-    
-    document.body.appendChild(measurer);
-    const textHeight = measurer.offsetHeight;
-    document.body.removeChild(measurer);
-    
-    // Get textarea position
-    const rect = textarea.getBoundingClientRect();
-    
-    // Estimate position (this is approximate)
-    const x = rect.left + rect.width / 2;
-    const y = rect.top + Math.min(textHeight, rect.height - 50);
-    
-    Object.assign(this.tooltip.style, {
-      left: `${x}px`,
-      top: `${y}px`,
-      transform: 'translateX(-50%)'
-    });
+    // Show tooltip (CSS anchor positioning handles the rest)
+    this.tooltip.classList.add('visible');
   }
   
   hide() {
-    this.tooltip.style.opacity = '0';
-    setTimeout(() => {
-      if (this.tooltip.style.opacity === '0') {
-        this.tooltip.style.display = 'none';
-        this.currentLink = null;
-      }
-    }, 200);
+    this.tooltip.classList.remove('visible');
+    this.currentLink = null;
   }
   
   scheduleHide() {
     this.cancelHide();
-    this.hideTimeout = setTimeout(() => {
-      if (!this.isMouseInTooltip && !this.isMouseInLink) {
-        this.hide();
-      }
-    }, 300);
+    this.hideTimeout = setTimeout(() => this.hide(), 300);
   }
   
   cancelHide() {

package/src/overtype.js

@@ -144,8 +144,14 @@ class OverType {
           lineHeight: 1.5
         },
         
+        // Native textarea properties
+        textareaProps: {},
+        
         // Behavior
         autofocus: false,
+        autoResize: false,  // Auto-expand height with content
+        minHeight: '100px', // Minimum height for autoResize mode
+        maxHeight: null,    // Maximum height for autoResize mode (null = unlimited)
         placeholder: 'Start typing...',
         value: '',
         
@@ -307,10 +313,6 @@ class OverType {
       this.wrapper = document.createElement('div');
       this.wrapper.className = 'overtype-wrapper';
       
-      // Add stats wrapper class if stats are enabled
-      if (this.options.showStats) {
-        this.wrapper.classList.add('with-stats');
-      }
       
       // Apply instance-specific styles via CSS custom properties
       if (this.options.fontSize) {
@@ -330,6 +332,19 @@ class OverType {
       this.textarea.className = 'overtype-input';
       this.textarea.placeholder = this.options.placeholder;
       this._configureTextarea();
+      
+      // Apply any native textarea properties
+      if (this.options.textareaProps) {
+        Object.entries(this.options.textareaProps).forEach(([key, value]) => {
+          if (key === 'className' || key === 'class') {
+            this.textarea.className += ' ' + value;
+          } else if (key === 'style' && typeof value === 'object') {
+            Object.assign(this.textarea.style, value);
+          } else {
+            this.textarea.setAttribute(key, value);
+          }
+        });
+      }
 
       // Create preview div
       this.preview = document.createElement('div');
@@ -340,19 +355,42 @@ class OverType {
       this.wrapper.appendChild(this.textarea);
       this.wrapper.appendChild(this.preview);
       
-      // Add stats bar if enabled
+      // Add wrapper to container first
+      this.container.appendChild(this.wrapper);
+      
+      // Add stats bar at the end (bottom) if enabled
       if (this.options.showStats) {
         this.statsBar = document.createElement('div');
         this.statsBar.className = 'overtype-stats';
-        this.wrapper.appendChild(this.statsBar);
+        this.container.appendChild(this.statsBar);
         this._updateStats();
       }
       
-      // Add wrapper to container
-      this.container.appendChild(this.wrapper);
-      
       // 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);
+        }
+      }
     }
 
     /**
@@ -378,6 +416,16 @@ class OverType {
       if (this.options.autofocus) {
         this.textarea.focus();
       }
+      
+      // Setup or remove auto-resize
+      if (this.options.autoResize) {
+        if (!this.container.classList.contains('overtype-auto-resize')) {
+          this._setupAutoResize();
+        }
+      } else {
+        // Ensure auto-resize class is removed
+        this.container.classList.remove('overtype-auto-resize');
+      }
 
       // Update preview with initial content
       this.updatePreview();
@@ -554,6 +602,11 @@ class OverType {
     setValue(value) {
       this.textarea.value = value;
       this.updatePreview();
+      
+      // Update height if auto-resize is enabled
+      if (this.options.autoResize) {
+        this._updateAutoHeight();
+      }
     }
 
 
@@ -629,6 +682,89 @@ class OverType {
       }
     }
     
+    /**
+     * Setup auto-resize functionality
+     * @private
+     */
+    _setupAutoResize() {
+      // Add auto-resize class for styling
+      this.container.classList.add('overtype-auto-resize');
+      
+      // Store previous height for comparison
+      this.previousHeight = null;
+      
+      // Initial height update
+      this._updateAutoHeight();
+      
+      // Listen for input events
+      this.textarea.addEventListener('input', () => this._updateAutoHeight());
+      
+      // Listen for window resize
+      window.addEventListener('resize', () => this._updateAutoHeight());
+    }
+    
+    /**
+     * Update height based on scrollHeight
+     * @private
+     */
+    _updateAutoHeight() {
+      if (!this.options.autoResize) return;
+      
+      const textarea = this.textarea;
+      const preview = this.preview;
+      const wrapper = this.wrapper;
+      
+      // Get computed styles
+      const computed = window.getComputedStyle(textarea);
+      const paddingTop = parseFloat(computed.paddingTop);
+      const paddingBottom = parseFloat(computed.paddingBottom);
+      
+      // Store scroll positions
+      const scrollTop = textarea.scrollTop;
+      
+      // Reset height to get accurate scrollHeight
+      textarea.style.setProperty('height', 'auto', 'important');
+      
+      // Calculate new height based on scrollHeight
+      let newHeight = textarea.scrollHeight;
+      
+      // Apply min height constraint
+      if (this.options.minHeight) {
+        const minHeight = parseInt(this.options.minHeight);
+        newHeight = Math.max(newHeight, minHeight);
+      }
+      
+      // Apply max height constraint
+      let overflow = 'hidden';
+      if (this.options.maxHeight) {
+        const maxHeight = parseInt(this.options.maxHeight);
+        if (newHeight > maxHeight) {
+          newHeight = maxHeight;
+          overflow = 'auto';
+        }
+      }
+      
+      // Apply the new height to all elements with !important to override base styles
+      const heightPx = newHeight + 'px';
+      textarea.style.setProperty('height', heightPx, 'important');
+      textarea.style.setProperty('overflow-y', overflow, 'important');
+      
+      preview.style.setProperty('height', heightPx, 'important');
+      preview.style.setProperty('overflow-y', overflow, 'important');
+      
+      wrapper.style.setProperty('height', heightPx, 'important');
+      
+      // Restore scroll position
+      textarea.scrollTop = scrollTop;
+      preview.scrollTop = scrollTop;
+      
+      // Track if height changed
+      if (this.previousHeight !== newHeight) {
+        this.previousHeight = newHeight;
+        // Could dispatch a custom event here if needed
+      }
+    }
+    
     /**
      * Show or hide stats bar
      * @param {boolean} show - Whether to show stats
@@ -637,17 +773,15 @@ class OverType {
       this.options.showStats = show;
       
       if (show && !this.statsBar) {
-        // Create stats bar
+        // Create stats bar (add to container, not wrapper)
         this.statsBar = document.createElement('div');
         this.statsBar.className = 'overtype-stats';
-        this.wrapper.appendChild(this.statsBar);
-        this.wrapper.classList.add('with-stats');
+        this.container.appendChild(this.statsBar);
         this._updateStats();
       } else if (!show && this.statsBar) {
         // Remove stats bar
         this.statsBar.remove();
         this.statsBar = null;
-        this.wrapper.classList.remove('with-stats');
       }
     }
 

package/src/parser.js

@@ -7,6 +7,16 @@
  * - Markdown tokens remain visible but styled
  */
 export class MarkdownParser {
+  // Track link index for anchor naming
+  static linkIndex = 0;
+  
+  /**
+   * 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
@@ -99,7 +109,9 @@ export class MarkdownParser {
    * @returns {string|null} Parsed code fence or null
    */
   static parseCodeBlock(html) {
-    if (html.startsWith('```')) {
+    // Only treat as code block if ``` is alone or followed by a language identifier
+    // This prevents ```some code``` from being treated as a code fence
+    if (html.match(/^```(\s*|\w*)$/)) {
       return `<div><span class="code-fence">${html}</span></div>`;
     }
     return null;
@@ -143,7 +155,10 @@ export class MarkdownParser {
    * @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>`;
+    });
   }
 
   /**
@@ -223,6 +238,9 @@ export class MarkdownParser {
    * @returns {string} Parsed HTML
    */
   static parse(text, activeLine = -1, showActiveLineRaw = false) {
+    // Reset link counter for each parse
+    this.resetLinkIndex();
+    
     const lines = text.split('\n');
     const parsedLines = lines.map((line, index) => {
       // Show raw markdown on active line if requested