rich-input 1.2.2 → 1.4.0

package/index.js

@@ -4,7 +4,7 @@
  */
 
 import { RichInput } from './components/rich-input.js';
-import { parseSearchTokens, parseSearchQuery, getCaretContext, getSuggestions, applySuggestion, isDatalistValue } from './utils/query-parser.js';
+import { DEFAULT_OPERATORS, normalizeOperators, DEFAULT_COMBINATORS, normalizeCombinators, DEFAULT_DELIMITERS, normalizeDelimiters, parseSearchTokens, parseSearchQuery, getCaretContext, getSuggestions, applySuggestion, isDatalistValue } from './utils/query-parser.js';
 import { highlightManager, isOpaqueRangeSupported, isHighlightSupported } from './utils/highlights.js';
 import { getCaretCoordinates, getRangeCoordinates, positionPopover, getCaretLeftWithMirrorDiv } from './utils/positioning.js';
 import { setupContentEditableAdapter, isContentEditableFallbackActive } from './utils/contenteditable-adapter.js';
@@ -17,6 +17,12 @@ if (typeof customElements !== 'undefined') {
 
 export {
   RichInput,
+  DEFAULT_OPERATORS,
+  normalizeOperators,
+  DEFAULT_COMBINATORS,
+  normalizeCombinators,
+  DEFAULT_DELIMITERS,
+  normalizeDelimiters,
   parseSearchTokens,
   parseSearchQuery,
   getCaretContext,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rich-input",
-  "version": "1.2.2",
+  "version": "1.4.0",
   "description": "A rich input field with keyword-based autocomplete and in-input highlighting powered by <datalist>, OpaqueRange, and the Custom Highlight API",
   "type": "module",
   "main": "./index.js",
@@ -31,5 +31,8 @@
   "bugs": {
     "url": "https://github.com/bramus/rich-input/issues"
   },
-  "homepage": "https://github.com/bramus/rich-input#readme"
+  "homepage": "https://github.com/bramus/rich-input#readme",
+  "devDependencies": {
+    "puppeteer": "^25.11.0"
+  }
 }

package/utils/highlights.js

@@ -52,6 +52,9 @@ class HighlightRegistryManager {
     const rangesByKeyword = new Map();
     const allKeywordRanges = [];
     const allValueRanges = [];
+    const allOperatorRanges = [];
+    const allCombinatorRanges = [];
+    const allDelimiterRanges = [];
     const allInvalidRanges = [];
 
     for (const inst of this.instances) {
@@ -74,6 +77,27 @@ class HighlightRegistryManager {
         }
       }
 
+      if (typeof inst.getActiveOperatorRanges === 'function') {
+        const opRanges = inst.getActiveOperatorRanges();
+        if (opRanges && opRanges.length > 0) {
+          allOperatorRanges.push(...opRanges);
+        }
+      }
+
+      if (typeof inst.getActiveCombinatorRanges === 'function') {
+        const combRanges = inst.getActiveCombinatorRanges();
+        if (combRanges && combRanges.length > 0) {
+          allCombinatorRanges.push(...combRanges);
+        }
+      }
+
+      if (typeof inst.getActiveDelimiterRanges === 'function') {
+        const delimRanges = inst.getActiveDelimiterRanges();
+        if (delimRanges && delimRanges.length > 0) {
+          allDelimiterRanges.push(...delimRanges);
+        }
+      }
+
       if (typeof inst.getActiveInvalidRanges === 'function') {
         const invRanges = inst.getActiveInvalidRanges();
         if (invRanges && invRanges.length > 0) {
@@ -104,6 +128,57 @@ class HighlightRegistryManager {
     }
 
     // 2. Set generic highlights
+    let opHl = CSS.highlights.get('rich-input-operator');
+    if (!opHl) {
+      try {
+        opHl = new Highlight();
+        CSS.highlights.set('rich-input-operator', opHl);
+      } catch (e) {}
+    }
+    if (opHl) {
+      opHl.clear();
+      for (const r of allOperatorRanges) {
+        try {
+          if (isRangeCollapsed(r)) continue;
+          opHl.add(r);
+        } catch (e) {}
+      }
+    }
+
+    let combHl = CSS.highlights.get('rich-input-combinator');
+    if (!combHl) {
+      try {
+        combHl = new Highlight();
+        CSS.highlights.set('rich-input-combinator', combHl);
+      } catch (e) {}
+    }
+    if (combHl) {
+      combHl.clear();
+      for (const r of allCombinatorRanges) {
+        try {
+          if (isRangeCollapsed(r)) continue;
+          combHl.add(r);
+        } catch (e) {}
+      }
+    }
+
+    let delimHl = CSS.highlights.get('rich-input-delimiter');
+    if (!delimHl) {
+      try {
+        delimHl = new Highlight();
+        CSS.highlights.set('rich-input-delimiter', delimHl);
+      } catch (e) {}
+    }
+    if (delimHl) {
+      delimHl.clear();
+      for (const r of allDelimiterRanges) {
+        try {
+          if (isRangeCollapsed(r)) continue;
+          delimHl.add(r);
+        } catch (e) {}
+      }
+    }
+
     let kwHl = CSS.highlights.get('rich-input-keyword');
     if (!kwHl) {
       try {