rich-input 1.2.0 → 1.2.1

package/README.md

@@ -86,6 +86,7 @@ Nest `<datalist>` elements inside `<rich-input>` to configure keywords and autoc
     <option value="Kranky"></option>
     <option value="Madhouse Records"></option>
     <option value="Ninja Tune"></option>
+    <option value="Warp Records"></option>
     <option value="We Play House Recordings"></option>
     <option value="XL Recordings"></option>
   </datalist>
@@ -149,6 +150,10 @@ Datalists can be added, updated, or removed dynamically at runtime; `<rich-input
       <img src="assets/ninja-tune.jpg" height="50" width="50" alt="Ninja Tune Logo">
       Ninja Tune
     </option>
+    <option value="Warp Records">
+      <img src="assets/warp-records.png" height="50" width="50" alt="Warp Records Logo">
+      Warp Records
+    </option>
     <option value="We Play House Recordings">
       <img src="assets/we-play-house-recordings.jpg" height="50" width="50" alt="We Play House Recordings Logo">
       We Play House Recordings
@@ -245,7 +250,7 @@ In browsers without `OpaqueRange` that support the CSS Custom Highlight API (suc
 Values corresponding to configured keywords are registered into the global `CSS.highlights` registry and styled using standard CSS `::highlight(keyword)` pseudo-elements in your stylesheet:
 
 ```css
-/* Style the value set in label:"XL Recordings" */
+/* Style the value set in label:"Warp Records" */
 ::highlight(label) {
   background-color: oklch(0.92 0.08 240);
   color: oklch(0.28 0.14 240);
@@ -282,7 +287,7 @@ In browsers using the `[contenteditable]` fallback inside Shadow DOM (such as Sa
 For self-contained widgets or instance-specific style overrides, `<rich-input>` also supports an optional embedded `<style>` block as a direct child, which is automatically injected into the shadow root:
 
 ```html
-<rich-input value='artist:"Aphex Twin" label:"XL Recordings"'>
+<rich-input value='artist:"Aphex Twin" label:"Warp Records"'>
   <style>
     ::highlight(label) {
       background-color: #dbeafe;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rich-input",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "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/query-parser.js

@@ -181,8 +181,8 @@ export function getCaretContext(inputStr, caretPos, configuredKeywords) {
   // 1. Caret is within a keyword token
   if (activeToken.type === 'keyword') {
     if (caretPos <= activeToken.colonIndex) {
-      // User is editing the keyword name
-      const query = inputStr.slice(activeToken.start, caretPos);
+      // User is editing the keyword name (filter based on full keyword name, not caret position)
+      const query = activeToken.keyword;
       return {
         mode: 'keyword',
         query,
@@ -193,17 +193,16 @@ export function getCaretContext(inputStr, caretPos, configuredKeywords) {
         tokens,
       };
     } else {
-      // User is editing the keyword value
+      // User is editing the keyword value (filter based on full value string, not caret position)
       const isQuoted = activeToken.quoted;
-      const innerStart = activeToken.innerStart;
-      const innerEnd = activeToken.innerEnd;
-      const valuePrefix = inputStr.slice(innerStart, Math.min(caretPos, innerEnd));
+      const value = activeToken.innerValue;
 
       return {
         mode: 'value',
         keyword: activeToken.keyword,
         keywordLower: activeToken.keywordLower,
-        valuePrefix,
+        valuePrefix: value,
+        query: value,
         quoted: isQuoted,
         quoteChar: activeToken.quoteChar || '"',
         isClosed: activeToken.isClosed,
@@ -216,9 +215,9 @@ export function getCaretContext(inputStr, caretPos, configuredKeywords) {
     }
   }
 
-  // 2. Caret is within a plain text token
+  // 2. Caret is within a plain text token (filter based on full word, not caret position)
   if (activeToken.type === 'text') {
-    const query = inputStr.slice(activeToken.start, caretPos);
+    const query = activeToken.raw;
     return {
       mode: 'keyword',
       query,