@trustquery/browser 0.2.5 → 0.2.8

package/package.json

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

package/src/InteractionHandler.js

@@ -139,15 +139,84 @@ 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)');
 
-    // Only prevent default for interactive elements (dropdown/action)
-    // Let bubbles (error/warning/info messages) pass through for normal cursor positioning
-    if (behavior === 'dropdown' || behavior === 'action') {
+    // 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'));
+        const col = parseInt(matchEl.getAttribute('data-col'));
+
+        // Calculate absolute position in textarea
+        const lines = this.options.textarea.value.split('\n');
+        let offset = 0;
+        for (let i = 0; i < line; i++) {
+          offset += lines[i].length + 1; // +1 for newline
+        }
+        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();
+
     // Handle different behaviors
     if (behavior === 'dropdown') {
       // Toggle dropdown - close if already open for this match, otherwise show
@@ -167,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/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();