rich-input 1.3.0 → 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.3.0",
+  "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",

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 {

package/utils/query-parser.js

@@ -3,14 +3,187 @@
  * Handles keyword:value tokenization, caret context inspection, and suggestion application.
  */
 
+export const DEFAULT_OPERATORS = ['-'];
+export const DEFAULT_COMBINATORS = [];
+
+/**
+ * Normalizes an operators configuration (string or array) into an array of non-empty operator strings.
+ * @param {string|string[]|null|undefined} operators
+ * @returns {string[]}
+ */
+export function normalizeOperators(operators) {
+  if (operators === undefined) {
+    return [...DEFAULT_OPERATORS];
+  }
+  if (operators === null || operators === '') {
+    return [];
+  }
+  const rawList = Array.isArray(operators)
+    ? operators
+    : typeof operators === 'string'
+      ? operators.split(/\s+/)
+      : [];
+
+  const result = [];
+  const seen = new Set();
+  for (const item of rawList) {
+    if (typeof item !== 'string') continue;
+    const parts = item.trim().split(/\s+/).filter(Boolean);
+    for (let part of parts) {
+      part = part.replace(/^(.)\1+$/, '$1');
+      if (!seen.has(part)) {
+        seen.add(part);
+        result.push(part);
+      }
+    }
+  }
+  return result;
+}
+
+/**
+ * Normalizes a combinators configuration (string or array) into an array of non-empty combinator strings.
+ * @param {string|string[]|null|undefined} combinators
+ * @returns {string[]}
+ */
+export function normalizeCombinators(combinators) {
+  if (combinators === undefined) {
+    return [...DEFAULT_COMBINATORS];
+  }
+  if (combinators === null || combinators === '') {
+    return [];
+  }
+  const rawList = Array.isArray(combinators)
+    ? combinators
+    : typeof combinators === 'string'
+      ? combinators.split(/\s+/)
+      : [];
+
+  const result = [];
+  const seen = new Set();
+  for (const item of rawList) {
+    if (typeof item !== 'string') continue;
+    const parts = item.trim().split(/\s+/).filter(Boolean);
+    for (const part of parts) {
+      if (!seen.has(part)) {
+        seen.add(part);
+        result.push(part);
+      }
+    }
+  }
+  return result;
+}
+
+/**
+ * Matches if a string starts with any of the configured operators (longest match first).
+ * @param {string} str
+ * @param {string[]} normalizedOperators
+ * @returns {string|null}
+ */
+function matchOperator(str, normalizedOperators) {
+  if (!str || !normalizedOperators || normalizedOperators.length === 0) {
+    return null;
+  }
+  const sorted = [...normalizedOperators].sort((a, b) => b.length - a.length);
+  for (const op of sorted) {
+    if (str.startsWith(op)) {
+      return op;
+    }
+  }
+  return null;
+}
+
+export const DEFAULT_DELIMITERS = ['()'];
+
+/**
+ * Normalizes delimiters input into a deduplicated array of delimiter pair strings (e.g. ['()', '{}', '[]']).
+ * @param {string|string[]|null|undefined} delimiters
+ * @returns {string[]}
+ */
+export function normalizeDelimiters(delimiters) {
+  if (delimiters === undefined) {
+    return [...DEFAULT_DELIMITERS];
+  }
+  if (delimiters === null || delimiters === '') {
+    return [];
+  }
+  const rawList = Array.isArray(delimiters)
+    ? delimiters
+    : typeof delimiters === 'string'
+      ? delimiters.split(/\s+/)
+      : [];
+
+  const flatTokens = [];
+  for (const item of rawList) {
+    if (typeof item !== 'string') continue;
+    const parts = item.trim().split(/\s+/).filter(Boolean);
+    flatTokens.push(...parts);
+  }
+
+  const result = [];
+  const seen = new Set();
+
+  for (let i = 0; i < flatTokens.length; i++) {
+    let token = flatTokens[i];
+    if (token.length === 1 && i + 1 < flatTokens.length && flatTokens[i + 1].length === 1) {
+      token = token + flatTokens[i + 1];
+      i++;
+    } else if (token.length > 2) {
+      token = token.replace(/(.)\1+/g, '$1');
+    }
+    if (token.length >= 2 && !seen.has(token)) {
+      seen.add(token);
+      result.push(token);
+    }
+  }
+
+  return result;
+}
+
+function buildDelimiterEntries(normalizedDelims) {
+  const entries = [];
+  if (!normalizedDelims || normalizedDelims.length === 0) return entries;
+  for (const pair of normalizedDelims) {
+    if (typeof pair !== 'string' || pair.length < 2) continue;
+    const open = pair[0];
+    const close = pair[pair.length - 1];
+    entries.push({ delimiter: open, role: 'open', pair });
+    if (close !== open) {
+      entries.push({ delimiter: close, role: 'close', pair });
+    }
+  }
+  return entries;
+}
+
+function matchDelimiter(str, delimEntries) {
+  if (!str || !delimEntries || delimEntries.length === 0) return null;
+  for (const entry of delimEntries) {
+    if (str.startsWith(entry.delimiter)) {
+      return entry;
+    }
+  }
+  return null;
+}
+
 /**
  * Parses raw search input into token objects.
  * @param {string} inputStr
+ * @param {string|string[]} [operators=DEFAULT_OPERATORS]
+ * @param {string|string[]} [combinators=DEFAULT_COMBINATORS]
+ * @param {string|string[]} [delimiters=DEFAULT_DELIMITERS]
  * @returns {Array<Object>}
  */
-export function parseSearchTokens(inputStr) {
+export function parseSearchTokens(
+  inputStr,
+  operators = DEFAULT_OPERATORS,
+  combinators = DEFAULT_COMBINATORS,
+  delimiters = DEFAULT_DELIMITERS
+) {
   if (typeof inputStr !== 'string') return [];
 
+  const normalizedOps = normalizeOperators(operators);
+  const normalizedCombs = normalizeCombinators(combinators);
+  const normalizedDelims = normalizeDelimiters(delimiters);
+  const delimEntries = buildDelimiterEntries(normalizedDelims);
   const tokens = [];
   let i = 0;
   const len = inputStr.length;
@@ -31,17 +204,49 @@ export function parseSearchTokens(inputStr) {
       continue;
     }
 
+    // 1b. Delimiter
+    const matchedDelim = matchDelimiter(inputStr.slice(i), delimEntries);
+    if (matchedDelim) {
+      tokens.push({
+        type: 'delimiter',
+        delimiter: matchedDelim.delimiter,
+        role: matchedDelim.role,
+        pair: matchedDelim.pair,
+        raw: matchedDelim.delimiter,
+        start: i,
+        end: i + matchedDelim.delimiter.length,
+      });
+      i += matchedDelim.delimiter.length;
+      continue;
+    }
+
     const tokenStart = i;
 
-    // 2. Check for keyword pattern: [a-zA-Z0-9_-]+:
+    // 2. Check for optional operator followed by keyword pattern: [a-zA-Z0-9][a-zA-Z0-9_-]*:
     const remaining = inputStr.slice(i);
-    const colonMatch = remaining.match(/^([a-zA-Z0-9_-]+):/);
+    const matchedOp = matchOperator(remaining, normalizedOps);
+    let colonMatch = null;
+    let opLen = 0;
+
+    if (matchedOp) {
+      const afterOp = remaining.slice(matchedOp.length);
+      const afterOpMatch = afterOp.match(/^([a-zA-Z0-9][a-zA-Z0-9_-]*):/);
+      if (afterOpMatch) {
+        colonMatch = afterOpMatch;
+        opLen = matchedOp.length;
+      }
+    } else {
+      colonMatch = remaining.match(/^([a-zA-Z0-9][a-zA-Z0-9_-]*):/);
+    }
 
     if (colonMatch) {
       const keyword = colonMatch[1];
-      const keywordStart = i;
-      const colonIndex = i + keyword.length;
-      i += colonMatch[0].length; // Move index past ':'
+      const operator = matchedOp || null;
+      const operatorStart = operator ? tokenStart : null;
+      const operatorEnd = operator ? tokenStart + opLen : null;
+      const keywordStart = tokenStart + opLen;
+      const colonIndex = keywordStart + keyword.length;
+      i = colonIndex + 1; // Move index past ':'
 
       const valueStart = i;
       let quoted = false;
@@ -67,9 +272,13 @@ export function parseSearchTokens(inputStr) {
           i++; // skip closing quote
         }
       } else {
-        // Unquoted value: until next whitespace or end
+        // Unquoted value: until next whitespace, delimiter, or end
         innerStart = i;
-        while (i < len && !/\s/.test(inputStr[i])) {
+        while (
+          i < len &&
+          !/\s/.test(inputStr[i]) &&
+          !matchDelimiter(inputStr.slice(i), delimEntries)
+        ) {
           i++;
         }
         innerEnd = i;
@@ -84,6 +293,9 @@ export function parseSearchTokens(inputStr) {
         raw: inputStr.slice(tokenStart, i),
         start: tokenStart,
         end: i,
+        operator,
+        operatorStart,
+        operatorEnd,
         keyword,
         keywordLower: keyword.toLowerCase(),
         keywordStart,
@@ -100,16 +312,38 @@ export function parseSearchTokens(inputStr) {
         isClosed,
       });
     } else {
-      // 3. Plain text token (single word or unfinished keyword)
-      while (i < len && !/\s/.test(inputStr[i])) {
+      // 3. Standalone word token (combinator or plain text)
+      while (
+        i < len &&
+        !/\s/.test(inputStr[i]) &&
+        !matchDelimiter(inputStr.slice(i), delimEntries)
+      ) {
         i++;
       }
-      tokens.push({
-        type: 'text',
-        raw: inputStr.slice(tokenStart, i),
-        start: tokenStart,
-        end: i,
-      });
+      const raw = inputStr.slice(tokenStart, i);
+      if (normalizedCombs.includes(raw)) {
+        tokens.push({
+          type: 'combinator',
+          combinator: raw,
+          raw,
+          start: tokenStart,
+          end: i,
+        });
+      } else {
+        const textOp = matchOperator(raw, normalizedOps);
+        const textToken = {
+          type: 'text',
+          raw,
+          start: tokenStart,
+          end: i,
+        };
+        if (textOp) {
+          textToken.operator = textOp;
+          textToken.operatorStart = tokenStart;
+          textToken.operatorEnd = tokenStart + textOp.length;
+        }
+        tokens.push(textToken);
+      }
     }
   }
 
@@ -117,31 +351,23 @@ export function parseSearchTokens(inputStr) {
 }
 
 /**
- * Parses search query into a structured object with keywords and free text.
+ * Parses search query into a structured object with the raw string and lexical tokens.
  * @param {string} inputStr
- * @returns {{ raw: string, text: string, keywords: Record<string, string[]>, tokens: Array<Object> }}
+ * @param {string|string[]} [operators=DEFAULT_OPERATORS]
+ * @param {string|string[]} [combinators=DEFAULT_COMBINATORS]
+ * @param {string|string[]} [delimiters=DEFAULT_DELIMITERS]
+ * @returns {{ raw: string, tokens: Array<Object> }}
  */
-export function parseSearchQuery(inputStr) {
-  const tokens = parseSearchTokens(inputStr);
-  const keywords = {};
-  const textWords = [];
-
-  for (const token of tokens) {
-    if (token.type === 'keyword') {
-      const kw = token.keywordLower;
-      if (!keywords[kw]) {
-        keywords[kw] = [];
-      }
-      keywords[kw].push(token.innerValue);
-    } else if (token.type === 'text') {
-      textWords.push(token.raw);
-    }
-  }
+export function parseSearchQuery(
+  inputStr,
+  operators = DEFAULT_OPERATORS,
+  combinators = DEFAULT_COMBINATORS,
+  delimiters = DEFAULT_DELIMITERS
+) {
+  const tokens = parseSearchTokens(inputStr, operators, combinators, delimiters);
 
   return {
     raw: inputStr,
-    text: textWords.join(' '),
-    keywords,
     tokens,
   };
 }
@@ -151,25 +377,36 @@ export function parseSearchQuery(inputStr) {
  * @param {string} inputStr
  * @param {number} caretPos
  * @param {Map<string, Object>|Object} configuredKeywords
+ * @param {string|string[]} [operators=DEFAULT_OPERATORS]
+ * @param {string|string[]} [combinators=DEFAULT_COMBINATORS]
+ * @param {string|string[]} [delimiters=DEFAULT_DELIMITERS]
  * @returns {Object}
  */
-export function getCaretContext(inputStr, caretPos, configuredKeywords) {
+export function getCaretContext(
+  inputStr,
+  caretPos,
+  configuredKeywords,
+  operators = DEFAULT_OPERATORS,
+  combinators = DEFAULT_COMBINATORS,
+  delimiters = DEFAULT_DELIMITERS
+) {
   if (typeof inputStr !== 'string') inputStr = '';
   caretPos = Math.max(0, Math.min(caretPos || 0, inputStr.length));
 
-  const tokens = parseSearchTokens(inputStr);
+  const tokens = parseSearchTokens(inputStr, operators, combinators, delimiters);
 
-  // Find token at caret
+  // Find token at caret (skip whitespace and delimiter boundary tokens)
   let activeToken = null;
   for (const token of tokens) {
+    if (token.type === 'whitespace' || token.type === 'delimiter') continue;
     if (caretPos >= token.start && caretPos <= token.end) {
       activeToken = token;
       break;
     }
   }
 
-  // If caret is in whitespace or empty input (at the start of a new token)
-  if (!activeToken || activeToken.type === 'whitespace') {
+  // If caret is in whitespace, delimiter, or empty input (at the start of a new token)
+  if (!activeToken || activeToken.type === 'whitespace' || activeToken.type === 'delimiter') {
     return {
       mode: 'keyword',
       query: '',
@@ -185,21 +422,25 @@ export function getCaretContext(inputStr, caretPos, configuredKeywords) {
     if (caretPos <= activeToken.colonIndex) {
       // User is editing the keyword name (filter based on full keyword name, not caret position)
       const query = activeToken.keyword;
-      return {
+      const context = {
         mode: 'keyword',
         query,
-        replaceStart: activeToken.start,
+        replaceStart: activeToken.keywordStart,
         replaceEnd: activeToken.colonIndex + 1,
         caretPos,
         token: activeToken,
         tokens,
       };
+      if (activeToken.operator) {
+        context.operator = activeToken.operator;
+      }
+      return context;
     } else {
       // User is editing the keyword value (filter based on full value string, not caret position)
       const isQuoted = activeToken.quoted;
       const value = activeToken.innerValue;
 
-      return {
+      const context = {
         mode: 'value',
         keyword: activeToken.keyword,
         keywordLower: activeToken.keywordLower,
@@ -214,11 +455,41 @@ export function getCaretContext(inputStr, caretPos, configuredKeywords) {
         token: activeToken,
         tokens,
       };
+      if (activeToken.operator) {
+        context.operator = activeToken.operator;
+      }
+      return context;
     }
   }
 
-  // 2. Caret is within a plain text token (filter based on full word, not caret position)
+  // 2. Caret is within a combinator token
+  if (activeToken.type === 'combinator') {
+    return {
+      mode: 'keyword',
+      query: activeToken.raw,
+      replaceStart: activeToken.start,
+      replaceEnd: activeToken.end,
+      caretPos,
+      token: activeToken,
+      tokens,
+    };
+  }
+
+  // 3. Caret is within a plain text token (filter based on full word, not caret position)
   if (activeToken.type === 'text') {
+    if (activeToken.operator) {
+      const query = activeToken.raw.slice(activeToken.operator.length);
+      return {
+        mode: 'keyword',
+        operator: activeToken.operator,
+        query,
+        replaceStart: activeToken.operatorEnd,
+        replaceEnd: activeToken.end,
+        caretPos,
+        token: activeToken,
+        tokens,
+      };
+    }
     const query = activeToken.raw;
     return {
       mode: 'keyword',
@@ -242,9 +513,10 @@ export function getCaretContext(inputStr, caretPos, configuredKeywords) {
  * Generates suggestions for the given caret context.
  * @param {Object} context
  * @param {Map<string, Object>} configuredKeywords
+ * @param {string|string[]} [configuredCombinators=DEFAULT_COMBINATORS]
  * @returns {Array<Object>}
  */
-export function getSuggestions(context, configuredKeywords) {
+export function getSuggestions(context, configuredKeywords, configuredCombinators = DEFAULT_COMBINATORS) {
   if (!context || context.mode === 'none') return [];
 
   const suggestions = [];
@@ -268,6 +540,44 @@ export function getSuggestions(context, configuredKeywords) {
         });
       }
     }
+
+    if (!context.operator) {
+      const normalizedCombs = normalizeCombinators(configuredCombinators);
+      if (normalizedCombs.length > 0) {
+        let shouldIncludeCombinators = true;
+        if (!q && Array.isArray(context.tokens)) {
+          const precedingTokens = context.tokens.filter(
+            (t) => t.type !== 'whitespace' && t.end <= context.replaceStart
+          );
+          const lastPreceding = precedingTokens[precedingTokens.length - 1];
+          // Don't suggest combinators at the very start of an empty query (unless typing a query prefix),
+          // immediately after another combinator, or immediately after an opening delimiter
+          if (
+            precedingTokens.length === 0 ||
+            lastPreceding?.type === 'combinator' ||
+            (lastPreceding?.type === 'delimiter' && lastPreceding?.role === 'open')
+          ) {
+            shouldIncludeCombinators = false;
+          }
+        }
+        if (shouldIncludeCombinators) {
+          for (const comb of normalizedCombs) {
+            const combLower = comb.toLowerCase();
+            if (!q || combLower.startsWith(q)) {
+              suggestions.push({
+                type: 'combinator',
+                id: comb,
+                combinator: comb,
+                label: comb,
+                display: comb,
+                insertText: comb,
+                description: 'Combinator',
+              });
+            }
+          }
+        }
+      }
+    }
   } else if (context.mode === 'value') {
     const kwConfig = configuredKeywords.get(context.keywordLower);
     if (!kwConfig) return [];
@@ -322,12 +632,23 @@ export function applySuggestion(inputStr, suggestion, context) {
   let after = inputStr.slice(replaceEnd);
   let insertText = suggestion.insertText;
 
+  const followingToken = Array.isArray(context.tokens)
+    ? context.tokens.find((t) => t.start === replaceEnd)
+    : null;
+  const isFollowedByCloseDelimiter =
+    followingToken?.type === 'delimiter' && followingToken?.role === 'close';
+
   if (suggestion.type === 'keyword') {
     // When inserting a keyword like `mix:`, do not add trailing space so user can immediately type value
     // If after text starts with colon, remove it to avoid `mix::`
     if (after.startsWith(':')) {
       after = after.slice(1);
-    } else if (context.token?.type !== 'keyword' && after.length > 0 && !/^\s/.test(after)) {
+    } else if (
+      context.token?.type !== 'keyword' &&
+      after.length > 0 &&
+      !/^\s/.test(after) &&
+      !isFollowedByCloseDelimiter
+    ) {
       // Ensure space before following token so it doesn't become the value of this keyword
       after = ' ' + after;
     }
@@ -337,9 +658,9 @@ export function applySuggestion(inputStr, suggestion, context) {
   }
 
   // When inserting a value (e.g. `"We Play House Recordings"`)
-  // Add a trailing space if after does not already start with whitespace
+  // Add a trailing space if after does not already start with whitespace or a closing delimiter
   const hasLeadingSpaceAfter = /^\s/.test(after);
-  if (after.length === 0 || !hasLeadingSpaceAfter) {
+  if ((after.length === 0 || !hasLeadingSpaceAfter) && !isFollowedByCloseDelimiter) {
     insertText += ' ';
   }