@trustquery/browser 0.2.6 → 0.2.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trustquery/browser",
-  "version": "0.2.6",
+  "version": "0.2.9",
   "description": "Turn any textarea into an interactive trigger-based editor with inline styling",
   "type": "module",
   "main": "dist/trustquery.js",

package/src/CommandHandlers.js

@@ -17,6 +17,8 @@ export class CommandHandlerRegistry {
     this.register('user-select-oneOf', new UserSelectHandler());
     this.register('api-json-table', new ApiJsonTableHandler());
     this.register('api-md-table', new ApiMdTableHandler());
+    this.register('display-menu', new DisplayMenuHandler());
+    this.register('display-menu-with-uri', new DisplayMenuWithUriHandler());
   }
 
   /**
@@ -347,4 +349,46 @@ class ApiMdTableHandler extends CommandHandler {
   }
 }
 
+/**
+ * Handler for display-menu category
+ * Shows dropdown menu with selectable options
+ */
+class DisplayMenuHandler extends CommandHandler {
+  getStyles() {
+    return {
+      backgroundColor: 'rgba(16, 185, 129, 0.15)', // Green background
+      color: '#065f46', // Dark green text
+      textDecoration: 'none',
+      borderBottom: '2px solid #10b981', // Green underline
+      cursor: 'pointer'
+    };
+  }
+
+  getBubbleContent(matchData) {
+    // Display menu shows dropdown, not bubble
+    return null;
+  }
+}
+
+/**
+ * Handler for display-menu-with-uri category
+ * Shows dropdown menu with selectable options and clickable URI links
+ */
+class DisplayMenuWithUriHandler extends CommandHandler {
+  getStyles() {
+    return {
+      backgroundColor: 'rgba(16, 185, 129, 0.15)', // Green background
+      color: '#065f46', // Dark green text
+      textDecoration: 'none',
+      borderBottom: '2px solid #10b981', // Green underline
+      cursor: 'pointer'
+    };
+  }
+
+  getBubbleContent(matchData) {
+    // Display menu with URI shows dropdown, not bubble
+    return null;
+  }
+}
+
 export default CommandHandlerRegistry;

package/src/DropdownManager.js

@@ -1,5 +1,7 @@
 // DropdownManager - Handles dropdown menus with filtering, keyboard navigation, and selection
 
+import EdgeDetectionHelper from './dropdown-manager-helpers/EdgeDetectionHelper.js';
+
 export default class DropdownManager {
   /**
    * Create dropdown manager
@@ -53,9 +55,10 @@ export default class DropdownManager {
     const dropdown = document.createElement('div');
     dropdown.className = 'tq-dropdown';
 
-    // Apply inline styles via StyleManager
+    // Apply inline styles via StyleManager (pass category for width adjustment)
+    const category = matchData.intent?.category || '';
     if (this.options.styleManager) {
-      this.options.styleManager.applyDropdownStyles(dropdown);
+      this.options.styleManager.applyDropdownStyles(dropdown, category);
     }
 
     // Add header container based on message-state
@@ -239,6 +242,10 @@ export default class DropdownManager {
    * @param {Object} matchData - Match data
    */
   createDropdownItems(dropdown, options, matchData) {
+    // Check if this is a display-menu-with-uri category
+    const category = matchData.intent?.category || '';
+    const hasUriSupport = category === 'display-menu-with-uri';
+
     options.forEach((option, index) => {
       // Check if this is a user-input option
       if (typeof option === 'object' && option['user-input'] === true) {
@@ -248,7 +255,82 @@ export default class DropdownManager {
 
       const item = document.createElement('div');
       item.className = 'tq-dropdown-item';
-      item.textContent = typeof option === 'string' ? option : option.label || option.value;
+
+      // Create label text
+      const labelText = typeof option === 'string' ? option : option.label || option.value;
+
+      // If display-menu-with-uri and option has uri, create label + link icon
+      if (hasUriSupport && typeof option === 'object' && option.uri) {
+        // Create label span
+        const labelSpan = document.createElement('span');
+        labelSpan.className = 'tq-dropdown-item-label';
+        labelSpan.textContent = labelText;
+        labelSpan.style.flex = '1';
+        labelSpan.style.cursor = 'pointer';
+
+        // Create link with truncated URI text
+        const linkIcon = document.createElement('a');
+        linkIcon.className = 'tq-dropdown-item-link';
+        linkIcon.href = option.uri;
+        linkIcon.target = '_blank';
+        linkIcon.rel = 'noopener noreferrer';
+
+        // Truncate URI to 20 characters
+        let displayUri = option.uri;
+        if (displayUri.length > 20) {
+          displayUri = displayUri.substring(0, 20) + '...';
+        }
+        linkIcon.textContent = displayUri;
+
+        linkIcon.style.marginLeft = '8px';
+        linkIcon.style.fontSize = '12px';
+        linkIcon.style.color = '#3b82f6';
+        linkIcon.style.textDecoration = 'underline';
+        linkIcon.style.opacity = '0.7';
+        linkIcon.style.transition = 'opacity 0.2s';
+        linkIcon.style.whiteSpace = 'nowrap';
+        linkIcon.title = option.uri;
+        linkIcon.setAttribute('aria-label', `Open ${labelText} documentation`);
+
+        // Hover effect for link icon
+        linkIcon.addEventListener('mouseenter', () => {
+          linkIcon.style.opacity = '1';
+        });
+        linkIcon.addEventListener('mouseleave', () => {
+          linkIcon.style.opacity = '0.6';
+        });
+
+        // Prevent link click from selecting the option
+        linkIcon.addEventListener('click', (e) => {
+          e.stopPropagation();
+          // Link will open naturally via href
+        });
+
+        // Set item to flex layout
+        item.style.display = 'flex';
+        item.style.alignItems = 'center';
+        item.style.justifyContent = 'space-between';
+
+        item.appendChild(labelSpan);
+        item.appendChild(linkIcon);
+
+        // Only label click should select the option
+        labelSpan.addEventListener('click', (e) => {
+          e.stopPropagation();
+          this.handleDropdownSelect(option, matchData);
+          this.hideDropdown();
+        });
+      } else {
+        // Regular option without URI
+        item.textContent = labelText;
+
+        // Click anywhere on item to select
+        item.addEventListener('click', (e) => {
+          e.stopPropagation();
+          this.handleDropdownSelect(option, matchData);
+          this.hideDropdown();
+        });
+      }
 
       // Highlight first item by default
       if (index === 0) {
@@ -260,11 +342,6 @@ export default class DropdownManager {
         this.options.styleManager.applyDropdownItemStyles(item);
       }
 
-      item.addEventListener('click', (e) => {
-        e.stopPropagation();
-        this.handleDropdownSelect(option, matchData);
-        this.hideDropdown();
-      });
       dropdown.appendChild(item);
     });
   }
@@ -372,26 +449,49 @@ export default class DropdownManager {
    * @param {HTMLElement} matchEl - Match element
    */
   positionDropdown(dropdown, matchEl) {
-    const rect = matchEl.getBoundingClientRect();
-    const dropdownRect = dropdown.getBoundingClientRect();
-    const offset = this.options.dropdownOffset;
+    const matchRect = matchEl.getBoundingClientRect();
 
-    // Position above match by default (since input is at bottom)
-    let top = rect.top + window.scrollY - dropdownRect.height - offset;
-    let left = rect.left + window.scrollX;
+    // Force a layout calculation by accessing offsetWidth
+    // This ensures we get the correct dropdown dimensions after styles are applied
+    const _ = dropdown.offsetWidth;
 
-    // If dropdown goes off top edge, position below instead
-    if (top < window.scrollY) {
-      top = rect.bottom + window.scrollY + offset;
-    }
+    const dropdownRect = dropdown.getBoundingClientRect();
 
-    // Check if dropdown goes off right edge
-    if (left + dropdownRect.width > window.innerWidth) {
-      left = window.innerWidth - dropdownRect.width - 10;
-    }
+    console.log('[DropdownManager] Positioning Debug:');
+    console.log('  Trigger position (x, y):', matchRect.left, matchRect.top);
+    console.log('  Dropdown width:', dropdownRect.width);
+    console.log('  Viewport width:', window.innerWidth);
+
+    // Use EdgeDetectionHelper to calculate optimal position
+    // Increased padding to account for body margins/transforms and ensure visible clearance
+    const position = EdgeDetectionHelper.calculatePosition({
+      matchRect,
+      dropdownRect,
+      offset: this.options.dropdownOffset,
+      padding: 35
+    });
 
-    dropdown.style.top = `${top}px`;
-    dropdown.style.left = `${left}px`;
+    console.log('  Calculated dropdown position (x, y):', position.left, position.top);
+
+    dropdown.style.top = `${position.top}px`;
+    dropdown.style.left = `${position.left}px`;
+
+    // Verify the position was actually applied
+    const computedStyle = window.getComputedStyle(dropdown);
+    const actualRect = dropdown.getBoundingClientRect();
+    console.log('  Verified applied styles:');
+    console.log('    styleTop:', dropdown.style.top);
+    console.log('    styleLeft:', dropdown.style.left);
+    console.log('    computedPosition:', computedStyle.position);
+    console.log('    actualBoundingRect:', JSON.stringify({
+      left: actualRect.left,
+      top: actualRect.top,
+      right: actualRect.right,
+      bottom: actualRect.bottom,
+      width: actualRect.width,
+      height: actualRect.height
+    }));
+    console.log('  Dropdown right edge:', actualRect.left + actualRect.width, 'vs viewport width:', window.innerWidth);
   }
 
   /**

package/src/InteractionHandler.js

@@ -139,16 +139,42 @@ export default class InteractionHandler {
     const behavior = matchEl.getAttribute('data-behavior');
     const matchData = this.getMatchData(matchEl);
 
-    console.log('[InteractionHandler] Match clicked:', matchData);
+    console.log('[InteractionHandler] ===== CLICK EVENT START =====');
+    console.log('[InteractionHandler] Click details:', {
+      behavior: behavior,
+      matchText: matchData.text,
+      eventType: e.type,
+      target: e.target.tagName,
+      currentTarget: e.currentTarget.tagName,
+      button: e.button,
+      buttons: e.buttons,
+      clientX: e.clientX,
+      clientY: e.clientY,
+      offsetX: e.offsetX,
+      offsetY: e.offsetY
+    });
+    console.log('[InteractionHandler] Match element:', {
+      textContent: matchEl.textContent,
+      offsetWidth: matchEl.offsetWidth,
+      offsetHeight: matchEl.offsetHeight,
+      attributes: {
+        'data-line': matchEl.getAttribute('data-line'),
+        'data-col': matchEl.getAttribute('data-col'),
+        'data-behavior': behavior
+      }
+    });
+    console.log('[InteractionHandler] Active element before click:', document.activeElement.tagName, document.activeElement.id || '(no id)');
 
     // For non-interactive elements (bubbles), manually pass click to textarea
     if (behavior !== 'dropdown' && behavior !== 'action') {
+      console.log('[InteractionHandler] Non-interactive match - manually focusing textarea');
       e.preventDefault();
       e.stopPropagation();
 
       // Focus textarea and position cursor at click location
       if (this.options.textarea) {
         this.options.textarea.focus();
+        console.log('[InteractionHandler] Textarea focused. Active element now:', document.activeElement.tagName, document.activeElement.id || '(no id)');
 
         // Get the character offset by finding the match position
         const line = parseInt(matchEl.getAttribute('data-line'));
@@ -160,15 +186,33 @@ export default class InteractionHandler {
         for (let i = 0; i < line; i++) {
           offset += lines[i].length + 1; // +1 for newline
         }
-        offset += col + (e.offsetX / matchEl.offsetWidth * matchEl.textContent.length);
+        const clickOffsetInMatch = (e.offsetX / matchEl.offsetWidth * matchEl.textContent.length);
+        offset += col + clickOffsetInMatch;
+
+        console.log('[InteractionHandler] Cursor positioning:', {
+          line: line,
+          col: col,
+          clickOffsetInMatch: clickOffsetInMatch,
+          finalOffset: offset,
+          textareaValue: this.options.textarea.value,
+          textareaValueLength: this.options.textarea.value.length
+        });
 
         // Set cursor position
         this.options.textarea.setSelectionRange(offset, offset);
+
+        console.log('[InteractionHandler] Selection set:', {
+          selectionStart: this.options.textarea.selectionStart,
+          selectionEnd: this.options.textarea.selectionEnd,
+          selectedText: this.options.textarea.value.substring(this.options.textarea.selectionStart, this.options.textarea.selectionEnd)
+        });
       }
 
+      console.log('[InteractionHandler] ===== CLICK EVENT END (non-interactive) =====');
       return; // Don't process further for bubbles
     }
 
+    console.log('[InteractionHandler] Interactive match - handling dropdown/action');
     // Prevent default for interactive elements (dropdown/action)
     e.preventDefault();
     e.stopPropagation();
@@ -192,6 +236,8 @@ export default class InteractionHandler {
     if (this.options.onWordClick && !(behavior === 'dropdown' && this.dropdownManager.activeDropdownMatch === matchEl)) {
       this.options.onWordClick(matchData);
     }
+
+    console.log('[InteractionHandler] ===== CLICK EVENT END (interactive) =====');
   }
 
   /**

package/src/StyleManager.js

@@ -272,8 +272,12 @@ export default class StyleManager {
   /**
    * Apply dropdown (menu) styles
    * @param {HTMLElement} dropdown - Dropdown element
+   * @param {string} category - Optional category to adjust styles
    */
-  applyDropdownStyles(dropdown) {
+  applyDropdownStyles(dropdown, category = '') {
+    // Use wider maxWidth for display-menu-with-uri to accommodate links
+    const maxWidth = category === 'display-menu-with-uri' ? '450px' : '300px';
+
     Object.assign(dropdown.style, {
       position: 'absolute',
       background: '#ffffff',
@@ -282,7 +286,7 @@ export default class StyleManager {
       boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
       zIndex: '10000',
       minWidth: '150px',
-      maxWidth: '300px',
+      maxWidth: maxWidth,
       overflow: 'hidden',
       fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
       fontSize: '14px',

package/src/TrustQuery.js

@@ -284,12 +284,121 @@ export default class TrustQuery {
       this.overlay.scrollLeft = this.textarea.scrollLeft;
     });
 
+    // Keyboard event logging for debugging selection issues
+    this.textarea.addEventListener('keydown', (e) => {
+      const isCmdOrCtrl = e.metaKey || e.ctrlKey;
+      const isSelectAll = (e.metaKey || e.ctrlKey) && e.key === 'a';
+
+      if (isCmdOrCtrl || isSelectAll) {
+        console.log('[TrustQuery] ===== KEYBOARD EVENT =====');
+        console.log('[TrustQuery] Key pressed:', {
+          key: e.key,
+          code: e.code,
+          metaKey: e.metaKey,
+          ctrlKey: e.ctrlKey,
+          shiftKey: e.shiftKey,
+          altKey: e.altKey,
+          isSelectAll: isSelectAll
+        });
+        console.log('[TrustQuery] Active element:', document.activeElement.tagName, document.activeElement.id || '(no id)');
+        console.log('[TrustQuery] Textarea state BEFORE:', {
+          value: this.textarea.value,
+          valueLength: this.textarea.value.length,
+          selectionStart: this.textarea.selectionStart,
+          selectionEnd: this.textarea.selectionEnd,
+          selectedText: this.textarea.value.substring(this.textarea.selectionStart, this.textarea.selectionEnd)
+        });
+
+        if (isSelectAll) {
+          // Log state after select all (use setTimeout to let browser process the event)
+          setTimeout(() => {
+            console.log('[TrustQuery] Textarea state AFTER CMD+A:', {
+              selectionStart: this.textarea.selectionStart,
+              selectionEnd: this.textarea.selectionEnd,
+              selectedText: this.textarea.value.substring(this.textarea.selectionStart, this.textarea.selectionEnd),
+              selectedLength: this.textarea.selectionEnd - this.textarea.selectionStart
+            });
+            console.log('[TrustQuery] ===== KEYBOARD EVENT END =====');
+          }, 0);
+        } else {
+          console.log('[TrustQuery] ===== KEYBOARD EVENT END =====');
+        }
+      }
+    });
+
+    // Selection change event
+    this.textarea.addEventListener('select', (e) => {
+      console.log('[TrustQuery] ===== SELECTION CHANGE EVENT =====');
+      console.log('[TrustQuery] Selection:', {
+        selectionStart: this.textarea.selectionStart,
+        selectionEnd: this.textarea.selectionEnd,
+        selectedText: this.textarea.value.substring(this.textarea.selectionStart, this.textarea.selectionEnd),
+        selectedLength: this.textarea.selectionEnd - this.textarea.selectionStart
+      });
+    });
+
+    // Context menu event - prevent keyboard-triggered context menu
+    this.textarea.addEventListener('contextmenu', (e) => {
+      console.log('[TrustQuery] ===== CONTEXTMENU EVENT =====');
+      console.log('[TrustQuery] Context menu triggered:', {
+        type: e.type,
+        isTrusted: e.isTrusted,
+        button: e.button,
+        buttons: e.buttons,
+        clientX: e.clientX,
+        clientY: e.clientY,
+        ctrlKey: e.ctrlKey,
+        metaKey: e.metaKey,
+        target: e.target.tagName
+      });
+
+      // Prevent context menu if triggered by keyboard (button === -1)
+      // This prevents the macOS context menu from opening after CMD+A
+      if (e.button === -1 && e.buttons === 0) {
+        console.log('[TrustQuery] Preventing keyboard-triggered context menu');
+        e.preventDefault();
+        e.stopPropagation();
+        return;
+      }
+
+      console.log('[TrustQuery] Allowing mouse-triggered context menu');
+    });
+
+    // Also prevent context menu on overlay (it interferes with text selection)
+    this.overlay.addEventListener('contextmenu', (e) => {
+      console.log('[TrustQuery] ===== CONTEXTMENU EVENT ON OVERLAY =====');
+      console.log('[TrustQuery] Context menu on overlay - preventing');
+
+      // Always prevent context menu on overlay
+      // The overlay should be transparent to user interactions
+      e.preventDefault();
+      e.stopPropagation();
+    });
+
     // Focus/blur events - add/remove focus class
-    this.textarea.addEventListener('focus', () => {
+    this.textarea.addEventListener('focus', (e) => {
+      console.log('[TrustQuery] ===== FOCUS EVENT =====');
+      console.log('[TrustQuery] Textarea focused. Active element:', document.activeElement.tagName, document.activeElement.id || '(no id)');
+      console.log('[TrustQuery] Current selection:', {
+        selectionStart: this.textarea.selectionStart,
+        selectionEnd: this.textarea.selectionEnd
+      });
       this.wrapper.classList.add('tq-focused');
     });
 
     this.textarea.addEventListener('blur', (e) => {
+      console.log('[TrustQuery] ===== BLUR EVENT =====');
+      console.log('[TrustQuery] Textarea blurred. Related target:', e.relatedTarget?.tagName || '(none)');
+      console.log('[TrustQuery] Blur event details:', {
+        type: e.type,
+        isTrusted: e.isTrusted,
+        eventPhase: e.eventPhase,
+        target: e.target.tagName,
+        currentTarget: e.currentTarget.tagName
+      });
+      console.log('[TrustQuery] Stack trace at blur:');
+      console.trace();
+
       // Close dropdown when textarea loses focus (unless interacting with dropdown)
       if (this.interactionHandler) {
         // Use setTimeout to let the new focus target be set and check if clicking on dropdown
@@ -300,6 +409,8 @@ export default class TrustQuery {
             activeElement.closest('.tq-dropdown') // Check if clicking anywhere in dropdown
           );
 
+          console.log('[TrustQuery] After blur - active element:', activeElement?.tagName || '(none)', 'isDropdownRelated:', isDropdownRelated);
+
           // Only close if not interacting with dropdown
           if (!isDropdownRelated) {
             this.interactionHandler.hideDropdown();

package/src/dropdown-manager-helpers/EdgeDetectionHelper.js

@@ -0,0 +1,113 @@
+// EdgeDetectionHelper - Calculates dropdown positioning to prevent overflow off viewport edges
+
+export default class EdgeDetectionHelper {
+  /**
+   * Calculate optimal position for dropdown to prevent viewport overflow
+   * @param {Object} options - Positioning options
+   * @param {DOMRect} options.matchRect - Bounding rect of the match element
+   * @param {DOMRect} options.dropdownRect - Bounding rect of the dropdown
+   * @param {number} options.offset - Offset from match element (default: 28)
+   * @param {number} options.padding - Padding from viewport edges (default: 10)
+   * @returns {Object} - { top, left } position in pixels
+   */
+  static calculatePosition({ matchRect, dropdownRect, offset = 28, padding = 10 }) {
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+
+    console.log('[EdgeDetectionHelper] Calculation inputs:');
+    console.log('  Match rect:', { left: matchRect.left, top: matchRect.top, width: matchRect.width });
+    console.log('  Dropdown rect:', { width: dropdownRect.width, height: dropdownRect.height });
+    console.log('  Viewport:', { width: viewportWidth, height: viewportHeight });
+    console.log('  Scroll:', { x: window.scrollX, y: window.scrollY });
+
+    // Calculate initial position (above match by default, since input is at bottom)
+    let top = matchRect.top + window.scrollY - dropdownRect.height - offset;
+    let left = matchRect.left + window.scrollX;
+
+    console.log('  Initial position:', { left, top });
+
+    // Vertical positioning: Check if dropdown goes off top edge
+    if (top < window.scrollY) {
+      // Position below match instead
+      top = matchRect.bottom + window.scrollY + offset;
+      console.log('  Adjusted for top overflow, new top:', top);
+    }
+
+    // Horizontal positioning: Check if dropdown goes off right edge
+    const rightEdge = left + dropdownRect.width;
+    const viewportRightEdge = viewportWidth + window.scrollX;
+
+    console.log('  Right edge check:', { rightEdge, viewportRightEdge: viewportRightEdge - padding });
+
+    if (rightEdge > viewportRightEdge - padding) {
+      // Calculate how much we overflow past the right edge
+      const overflow = rightEdge - (viewportRightEdge - padding);
+      console.log('  Right overflow detected:', overflow, 'px');
+
+      // Shift left by the overflow amount
+      left = left - overflow;
+      console.log('  Adjusted left position:', left);
+
+      // Ensure we don't go off the left edge either
+      const minLeft = window.scrollX + padding;
+      if (left < minLeft) {
+        console.log('  Hit left edge, clamping to:', minLeft);
+        left = minLeft;
+      }
+    }
+
+    // Also check left edge (in case match is near left edge)
+    const minLeft = window.scrollX + padding;
+    if (left < minLeft) {
+      console.log('  Left edge adjustment:', minLeft);
+      left = minLeft;
+    }
+
+    console.log('[EdgeDetectionHelper] Final position:', { left, top });
+
+    return { top, left };
+  }
+
+  /**
+   * Check if dropdown would overflow the right edge
+   * @param {DOMRect} matchRect - Match element rect
+   * @param {DOMRect} dropdownRect - Dropdown rect
+   * @param {number} padding - Padding from edge
+   * @returns {boolean} - True if would overflow
+   */
+  static wouldOverflowRight(matchRect, dropdownRect, padding = 10) {
+    const left = matchRect.left + window.scrollX;
+    const rightEdge = left + dropdownRect.width;
+    const viewportRightEdge = window.innerWidth + window.scrollX;
+
+    return rightEdge > viewportRightEdge - padding;
+  }
+
+  /**
+   * Check if dropdown would overflow the top edge
+   * @param {DOMRect} matchRect - Match element rect
+   * @param {DOMRect} dropdownRect - Dropdown rect
+   * @param {number} offset - Offset from match
+   * @returns {boolean} - True if would overflow
+   */
+  static wouldOverflowTop(matchRect, dropdownRect, offset = 28) {
+    const top = matchRect.top + window.scrollY - dropdownRect.height - offset;
+    return top < window.scrollY;
+  }
+
+  /**
+   * Calculate overflow amount on the right edge
+   * @param {DOMRect} matchRect - Match element rect
+   * @param {DOMRect} dropdownRect - Dropdown rect
+   * @param {number} padding - Padding from edge
+   * @returns {number} - Overflow amount in pixels (0 if no overflow)
+   */
+  static calculateRightOverflow(matchRect, dropdownRect, padding = 10) {
+    const left = matchRect.left + window.scrollX;
+    const rightEdge = left + dropdownRect.width;
+    const viewportRightEdge = window.innerWidth + window.scrollX;
+
+    const overflow = rightEdge - (viewportRightEdge - padding);
+    return Math.max(0, overflow);
+  }
+}