overtype 1.0.6 → 1.1.1

package/src/link-tooltip.js

@@ -0,0 +1,195 @@
+/**
+ * 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
+ */
+
+export class LinkTooltip {
+  constructor(editor) {
+    this.editor = editor;
+    this.tooltip = null;
+    this.currentLink = null;
+    this.hideTimeout = null;
+    
+    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('keyup', (e) => {
+      if (e.key.includes('Arrow') || e.key === 'Home' || e.key === 'End') {
+        this.checkCursorPosition();
+      }
+    });
+    
+    // Hide tooltip when typing or scrolling
+    this.editor.textarea.addEventListener('input', () => this.hide());
+    this.editor.textarea.addEventListener('scroll', () => this.hide());
+    
+    // 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';
+    
+    // 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 = `
+      <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>
+    `;
+    
+    // Click handler to open link
+    this.tooltip.addEventListener('click', (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (this.currentLink) {
+        window.open(this.currentLink.url, '_blank');
+        this.hide();
+      }
+    });
+    
+    // Append tooltip to editor container
+    this.editor.container.appendChild(this.tooltip);
+  }
+  
+  checkCursorPosition() {
+    const cursorPos = this.editor.textarea.selectionStart;
+    const text = this.editor.textarea.value;
+    
+    // Find if cursor is within a markdown link
+    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) {
+    // 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;
+      const end = match.index + match[0].length;
+      
+      if (position >= start && position <= end) {
+        return {
+          text: match[1],
+          url: match[2],
+          index: linkIndex,
+          start: start,
+          end: end
+        };
+      }
+      linkIndex++;
+    }
+    
+    return null;
+  }
+  
+  show(linkInfo) {
+    this.currentLink = linkInfo;
+    this.cancelHide();
+    
+    // Update tooltip content
+    const urlSpan = this.tooltip.querySelector('.overtype-link-tooltip-url');
+    urlSpan.textContent = linkInfo.url;
+    
+    // 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');
+  }
+  
+  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;
+  }
+}

package/src/overtype.js

@@ -9,6 +9,7 @@ import { ShortcutsManager } from './shortcuts.js';
 import { generateStyles } from './styles.js';
 import { getTheme, mergeTheme, solar, themeToCSSVars } from './themes.js';
 import { Toolbar } from './toolbar.js';
+import { LinkTooltip } from './link-tooltip.js';
 
 /**
  * OverType Editor Class
@@ -97,6 +98,9 @@ class OverType {
 
       // Setup shortcuts manager
       this.shortcuts = new ShortcutsManager(this);
+      
+      // Setup link tooltip
+      this.linkTooltip = new LinkTooltip(this);
 
       // Setup toolbar if enabled
       if (this.options.toolbar) {
@@ -471,7 +475,52 @@ class OverType {
      * @private
      */
     handleKeydown(event) {
-      // Let shortcuts manager handle it first
+      // Handle Tab key to prevent focus loss and insert spaces
+      if (event.key === 'Tab') {
+        event.preventDefault();
+        
+        // Insert 2 spaces at cursor position
+        const start = this.textarea.selectionStart;
+        const end = this.textarea.selectionEnd;
+        const value = this.textarea.value;
+        
+        // If there's a selection, indent/outdent based on shift key
+        if (start !== end && event.shiftKey) {
+          // Outdent: remove 2 spaces from start of each selected line
+          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) {
+          // Indent: add 2 spaces to start of each selected line
+          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 {
+          // No selection: just insert 2 spaces
+          this.textarea.value = value.substring(0, start) + '  ' + value.substring(end);
+          this.textarea.selectionStart = this.textarea.selectionEnd = start + 2;
+        }
+        
+        // Trigger input event to update preview
+        this.textarea.dispatchEvent(new Event('input', { bubbles: true }));
+        return;
+      }
+      
+      // Let shortcuts manager handle other keys
       const handled = this.shortcuts.handleKeydown(event);
       
       // Call user callback if provided

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
@@ -143,7 +153,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>`;
+    });
   }
 
   /**
@@ -155,9 +168,28 @@ export class MarkdownParser {
     let html = text;
     // Order matters: parse code first to avoid conflicts
     html = this.parseInlineCode(html);
+    // Use placeholders to protect inline code while preserving formatting spans
+    // We use Unicode Private Use Area (U+E000-U+F8FF) as placeholders because:
+    // 1. These characters are reserved for application-specific use
+    // 2. They'll never appear in user text
+    // 3. They maintain single-character width (important for alignment)
+    // 4. They're invisible if accidentally rendered
+    // This allows formatting like *text `code` text* to span across code blocks
+    // while preventing formatting inside code like `__init__` from being bolded
+    const codeBlocks = new Map();
+    html = html.replace(/(<code>.*?<\/code>)/g, (match) => {
+      const placeholder = `\uE000${codeBlocks.size}\uE001`;
+      codeBlocks.set(placeholder, match);
+      return placeholder;
+    });
+    // Process other inline elements on text with placeholders
     html = this.parseLinks(html);
     html = this.parseBold(html);
     html = this.parseItalic(html);
+    // Restore code blocks
+    codeBlocks.forEach((codeBlock, placeholder) => {
+      html = html.replace(placeholder, codeBlock);
+    });
     return html;
   }
 
@@ -204,6 +236,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

package/src/styles.js

@@ -235,6 +235,8 @@ export 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;
     }