Getting overtype to work... (#1)

Author: nedtwigg

browser-extension/biome.json

@@ -10,7 +10,7 @@
   },
   "files": {
     "ignoreUnknown": false,
-    "includes": [".*", "src/**", "tests/**"]
+    "includes": [".*", "src/**", "tests/**", "!src/overtype", "!src/playgrounds"]
   },
   "formatter": {
     "enabled": true,

browser-extension/package-lock.json

@@ -2,6 +2,7 @@
   "author": "DiffPlug",
   "dependencies": {
     "@wxt-dev/webextension-polyfill": "^1.0.0",
+    "highlight.js": "^11.11.1",
     "webextension-polyfill": "^0.12.0"
   },
   "description": "Syntax highlighting and autosave for comments on GitHub (and other other markdown-friendly websites).",

browser-extension/package.json

@@ -1,12 +1,17 @@
 import { CONFIG } from '../lib/config'
 import { logger } from '../lib/logger'
 import { EnhancerRegistry, TextareaRegistry } from '../lib/registries'
+import { githubPrNewCommentContentScript } from '../playgrounds/github-playground'
 
 const enhancers = new EnhancerRegistry()
 const enhancedTextareas = new TextareaRegistry()
 
 export default defineContentScript({
   main() {
+    if (CONFIG.MODE === 'PLAYGROUNDS_PR') {
+      githubPrNewCommentContentScript()
+      return
+    }
     const textAreasOnPageLoad = document.querySelectorAll<HTMLTextAreaElement>(`textarea`)
     for (const textarea of textAreasOnPageLoad) {
       enhanceMaybe(textarea)

browser-extension/src/entrypoints/content.ts

@@ -1,9 +1,10 @@
-// Configuration constants for the extension
+const MODES = ['PROD', 'PLAYGROUNDS_PR'] as const
+
+export type ModeType = (typeof MODES)[number]
+
 export const CONFIG = {
   ADDED_OVERTYPE_CLASS: 'gitcasso-overtype',
-  // Debug settings
-  DEBUG: true, // Set to true to enable debug logging
-  EXTENSION_NAME: 'gitcasso',
-  INITIAL_SCAN_DELAY_MS: 100,
-  MUTATION_OBSERVER_DELAY_MS: 100,
+  DEBUG: true, // enabled debug logging
+  EXTENSION_NAME: 'gitcasso', // decorates logs
+  MODE: 'PLAYGROUNDS_PR' satisfies ModeType,
 } as const

browser-extension/src/lib/config.ts

@@ -0,0 +1,204 @@
+/**
+ * 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;
+  }
+}