overtype 1.2.6 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "overtype",
-  "version": "1.2.6",
+  "version": "2.0.0",
   "description": "A lightweight markdown editor library with perfect WYSIWYG alignment using an invisible textarea overlay",
   "main": "dist/overtype.cjs",
   "module": "dist/overtype.esm.js",
@@ -10,24 +10,35 @@
   "jsdelivr": "dist/overtype.min.js",
   "exports": {
     ".": {
+      "types": "./dist/overtype.d.ts",
       "import": "./dist/overtype.esm.js",
       "require": "./dist/overtype.cjs",
       "browser": "./dist/overtype.iife.min.js"
+    },
+    "./parser": {
+      "import": "./src/parser.js",
+      "require": "./src/parser.js"
+    },
+    "./webcomponent": {
+      "import": "./dist/overtype-webcomponent.esm.js",
+      "browser": "./dist/overtype-webcomponent.min.js"
     }
   },
   "type": "module",
   "scripts": {
     "build": "node build.js",
     "build:prod": "npm test && npm run build",
-    "dev": "http-server -p 8080 -c-1",
+    "dev": "http-server website -p 8080 -c-1",
     "watch": "node build.js --watch",
-    "test": "node test/overtype.test.js && node test/preview-mode.test.js && node test/links.test.js && node test/api-methods.test.js && node test/comprehensive-alignment.test.js && node test/sanctuary-parsing.test.js && npm run test:types",
+    "test": "node test/overtype.test.js && node test/preview-mode.test.js && node test/links.test.js && node test/api-methods.test.js && node test/comprehensive-alignment.test.js && node test/sanctuary-parsing.test.js && node test/mode-switching.test.js && node test/syntax-highlighting.test.js && node test/webcomponent.test.js && npm run test:types",
     "test:main": "node test/overtype.test.js",
     "test:preview": "node test/preview-mode.test.js",
     "test:links": "node test/links.test.js",
     "test:api": "node test/api-methods.test.js",
     "test:alignment": "node test/comprehensive-alignment.test.js",
     "test:sanctuary": "node test/sanctuary-parsing.test.js",
+    "test:modes": "node test/mode-switching.test.js",
+    "test:webcomponent": "node test/webcomponent.test.js",
     "test:types": "tsc --noEmit test-types.ts",
     "preversion": "npm test",
     "size": "gzip-size dist/overtype.min.js",
@@ -40,7 +51,10 @@
     "lightweight",
     "ghost-caret",
     "textarea",
-    "markdown-editor"
+    "markdown-editor",
+    "web-components",
+    "custom-elements",
+    "shadow-dom"
   ],
   "author": "David Miranda",
   "license": "MIT",

package/src/link-tooltip.js

@@ -10,82 +10,50 @@ export class LinkTooltip {
     this.tooltip = null;
     this.currentLink = null;
     this.hideTimeout = null;
-    
+    this.visibilityChangeHandler = 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
+    // Note: Styles are now in the main stylesheet (styles.js) with @supports wrapper
     this.createTooltip();
-    
+
     // Listen for cursor position changes
     this.editor.textarea.addEventListener('selectionchange', () => this.checkCursorPosition());
-    this.editor.textarea.addEventListener('keyup', (e) => {
+    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());
-    
+
+    // Hide tooltip when textarea loses focus
+    this.editor.textarea.addEventListener('blur', () => this.hide());
+
+    // Hide tooltip when page loses visibility (tab switch, minimize, etc.)
+    this.visibilityChangeHandler = () => {
+      if (document.hidden) {
+        this.hide();
+      }
+    };
+    document.addEventListener('visibilitychange', this.visibilityChangeHandler);
+
     // Keep tooltip visible on hover
     this.tooltip.addEventListener('mouseenter', () => this.cancelHide());
     this.tooltip.addEventListener('mouseleave', () => this.scheduleHide());
   }
-  
+
   createTooltip() {
     // Create tooltip element
+    // Styles are now included in the main stylesheet (styles.js)
     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 !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;
-        }
-      }
-    `;
-    document.head.appendChild(tooltipStyles);
-    
+
     // Add link icon and text container
     this.tooltip.innerHTML = `
       <span style="display: flex; align-items: center; gap: 6px;">
@@ -96,9 +64,9 @@ export class LinkTooltip {
         <span class="overtype-link-tooltip-url"></span>
       </span>
     `;
-    
+
     // Click handler to open link
-    this.tooltip.addEventListener('click', (e) => {
+    this.tooltip.addEventListener('click', e => {
       e.preventDefault();
       e.stopPropagation();
       if (this.currentLink) {
@@ -106,18 +74,18 @@ export class LinkTooltip {
         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);
@@ -126,17 +94,17 @@ export class LinkTooltip {
       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],
@@ -148,48 +116,55 @@ export class LinkTooltip {
       }
       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();
+
+    // Remove visibility change listener
+    if (this.visibilityChangeHandler) {
+      document.removeEventListener('visibilitychange', this.visibilityChangeHandler);
+      this.visibilityChangeHandler = null;
+    }
+
     if (this.tooltip && this.tooltip.parentNode) {
       this.tooltip.parentNode.removeChild(this.tooltip);
     }
     this.tooltip = null;
     this.currentLink = null;
   }
-}
+}