@trustquery/browser 0.2.8 → 0.2.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trustquery/browser",
-  "version": "0.2.8",
+  "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/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/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);
+  }
+}