rich-input 1.1.1 → 1.2.1

package/README.md

@@ -37,8 +37,9 @@ The visual below illustrates the internal Shadow DOM elements, exposed CSS Shado
 - `<rich-input>`: The host custom element wrapping the control, datalists, and suggestions popover.
 - `::part(control)`: The outer input container enclosing the icon, input, and clear button.
 - `::part(icon)`: The default leading search magnifying glass SVG icon (fallback in `slot="leading"`).
-- `::part(input)`: The native `<input type="text">` where users type.
 - `::highlight(<keyword>)`: Target pseudo-element for styling keyword values via the CSS Custom Highlight API (e.g. `::highlight(label)`, `::highlight(year)`).
+- `::highlight(rich-input-keyword)`: Target pseudo-element for styling keyword prefixes (e.g. `label:`, `year:`).
+- `::highlight(rich-input-invalid)`: Target pseudo-element for marking unrecognized keywords or invalid keyword values (not in datalist) with a squiggly underline.
 - `::part(clear-button)`: The clear button (visible when text is present).
 - `::part(popover)`: The autocomplete dropdown popover container anchored to the start of the active range via `OpaqueRange` (or mirror-div fallback).
 - `::part(suggestions-header)`: The header bar at the top of the suggestions popover.
@@ -85,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>
@@ -148,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
@@ -244,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);
@@ -268,6 +274,12 @@ Values corresponding to configured keywords are registered into the global `CSS.
   color: #64748b;
   text-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
 }
+
+/* Invalid highlight (squiggly underline for unrecognized keywords or values not present in datalist) */
+::highlight(rich-input-invalid) {
+  text-decoration: underline wavy #ef4444;
+  text-decoration-skip-ink: none;
+}
 ```
 
 In browsers using the `[contenteditable]` fallback inside Shadow DOM (such as Safari and Firefox), `<rich-input>` automatically syncs document-level `::highlight()` rules into its shadow stylesheet so that highlighting works across shadow boundaries without extra markup.
@@ -275,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/components/rich-input.js

@@ -3,7 +3,7 @@
  * Keyword-based autocomplete input field powered by OpaqueRange and Custom Highlight API.
  */
 
-import { parseSearchTokens, parseSearchQuery, getCaretContext, getSuggestions, applySuggestion } from '../utils/query-parser.js';
+import { parseSearchTokens, parseSearchQuery, getCaretContext, getSuggestions, applySuggestion, isDatalistValue } from '../utils/query-parser.js';
 import { highlightManager, isOpaqueRangeSupported, isHighlightSupported } from '../utils/highlights.js';
 import { getCaretCoordinates, positionPopover } from '../utils/positioning.js';
 import { setupContentEditableAdapter, isContentEditableFallbackActive } from '../utils/contenteditable-adapter.js';
@@ -119,6 +119,19 @@ TEMPLATE.innerHTML = `
     text-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
   }
 
+  /* Squiggly line underneath invalid keyword values */
+  ::highlight(rich-input-invalid) {
+    text-decoration: underline wavy var(--ri-invalid-color, var(--rs-invalid-color, #ef4444));
+    -webkit-text-decoration: underline wavy var(--ri-invalid-color, var(--rs-invalid-color, #ef4444));
+    text-decoration-line: underline;
+    -webkit-text-decoration-line: underline;
+    text-decoration-style: wavy;
+    -webkit-text-decoration-style: wavy;
+    text-decoration-color: var(--ri-invalid-color, var(--rs-invalid-color, #ef4444));
+    -webkit-text-decoration-color: var(--ri-invalid-color, var(--rs-invalid-color, #ef4444));
+    text-decoration-skip-ink: none;
+  }
+
   /* Visually hide datalists and custom style tags in slot */
   ::slotted(datalist),
   ::slotted(style) {
@@ -389,7 +402,10 @@ export class RichInput extends HTMLElement {
     this._selectedIndex = -1;
     this._context = null;
     this._ownedRanges = [];
+    this._invalidRanges = [];
     this._activeKeywordHighlightMap = new Map();
+    this._isFocused = false;
+    this._lastCaretPosition = -1;
 
     // Bound listeners for easy cleanup
     this._onInput = this._onInput.bind(this);
@@ -398,6 +414,7 @@ export class RichInput extends HTMLElement {
     this._onFocus = this._onFocus.bind(this);
     this._onBlur = this._onBlur.bind(this);
     this._onClick = this._onClick.bind(this);
+    this._onSelectionChange = this._onSelectionChange.bind(this);
     this._onClearClick = this._onClearClick.bind(this);
     this._onSlotChange = this._onSlotChange.bind(this);
     this._onGlobalClick = this._onGlobalClick.bind(this);
@@ -409,6 +426,14 @@ export class RichInput extends HTMLElement {
     syncDocumentHighlightStyles(this.shadowRoot);
     highlightManager.register(this);
 
+    // Track initial focus state
+    this._isFocused = Boolean(
+      this.shadowRoot?.activeElement === this._input ||
+      document.activeElement === this ||
+      document.activeElement === this._input ||
+      this.matches?.(':focus-within')
+    );
+
     // Parse initial datalists
     this._loadDatalists();
 
@@ -432,6 +457,7 @@ export class RichInput extends HTMLElement {
 
     // Global events
     document.addEventListener('click', this._onGlobalClick);
+    document.addEventListener('selectionchange', this._onSelectionChange);
     window.addEventListener('resize', this._onGlobalResizeOrScroll);
     window.addEventListener('scroll', this._onGlobalResizeOrScroll, { passive: true });
 
@@ -471,6 +497,7 @@ export class RichInput extends HTMLElement {
     this._clearBtn.removeEventListener('click', this._onClearClick);
 
     document.removeEventListener('click', this._onGlobalClick);
+    document.removeEventListener('selectionchange', this._onSelectionChange);
     window.removeEventListener('resize', this._onGlobalResizeOrScroll);
     window.removeEventListener('scroll', this._onGlobalResizeOrScroll);
 
@@ -603,10 +630,12 @@ export class RichInput extends HTMLElement {
 
   // --- Public Methods ---
   focus(options) {
+    this._isFocused = true;
     this._input.focus(options);
   }
 
   blur() {
+    this._isFocused = false;
     this._input.blur();
   }
 
@@ -722,6 +751,7 @@ export class RichInput extends HTMLElement {
       } catch (e) {}
     }
     this._ownedRanges = [];
+    this._invalidRanges = [];
     this._activeKeywordHighlightMap.clear();
   }
 
@@ -747,9 +777,17 @@ export class RichInput extends HTMLElement {
     const tokens = parseSearchTokens(text);
     const highlightQuotes = this.getAttribute('highlight-quotes') !== 'exclude';
 
+    const isFocused = this._isFocused;
+
+    const caretStart = typeof this._input.selectionStart === 'number' ? this._input.selectionStart : null;
+    const caretEnd = typeof this._input.selectionEnd === 'number' ? this._input.selectionEnd : null;
+    const selMin = caretStart !== null ? Math.min(caretStart, caretEnd ?? caretStart) : -1;
+    const selMax = caretEnd !== null ? Math.max(caretStart ?? caretEnd, caretEnd) : -1;
+
     for (const token of tokens) {
       if (token.type === 'keyword' && this._configuredKeywords.has(token.keywordLower)) {
         const kw = token.keywordLower;
+        const kwConfig = this._configuredKeywords.get(kw);
 
         if (!this._activeKeywordHighlightMap.has(kw)) {
           this._activeKeywordHighlightMap.set(kw, {
@@ -782,6 +820,42 @@ export class RichInput extends HTMLElement {
             bucket.keywordRanges.push(kwRange);
           } catch (e) {}
         }
+
+        // 3. Validation: Check if value is part of the datalist
+        // Don't mark as invalid if:
+        // - Value is empty (user hasn't entered a value yet)
+        // - Input is focused and user is currently editing this token (caret is on/within this token)
+        const isEditingToken = isFocused && selMin !== -1 && selMax >= token.start && selMin <= token.end;
+        const hasValue = Boolean(token.innerValue && token.innerValue.trim().length > 0);
+
+        if (hasValue && !isEditingToken && !isDatalistValue(kwConfig, token.innerValue)) {
+          if (end > start && end <= text.length) {
+            try {
+              const invRange = this._input.createValueRange(start, end);
+              this._ownedRanges.push(invRange);
+              this._invalidRanges.push(invRange);
+            } catch (e) {
+              console.warn('[rich-input] Invalid range creation error:', e);
+            }
+          }
+        }
+      } else if (token.type === 'keyword') {
+        // Unrecognized key:value pair (keyword is not in configured datalists)
+        const isEditingToken = isFocused && selMin !== -1 && selMax >= token.start && selMin <= token.end;
+
+        if (!isEditingToken) {
+          const start = token.start;
+          const end = token.end;
+          if (end > start && end <= text.length) {
+            try {
+              const invRange = this._input.createValueRange(start, end);
+              this._ownedRanges.push(invRange);
+              this._invalidRanges.push(invRange);
+            } catch (e) {
+              console.warn('[rich-input] Invalid range creation error:', e);
+            }
+          }
+        }
       }
     }
 
@@ -792,8 +866,13 @@ export class RichInput extends HTMLElement {
     return this._activeKeywordHighlightMap;
   }
 
+  getActiveInvalidRanges() {
+    return this._invalidRanges;
+  }
+
   // --- Suggestions Popover Handling ---
   _onInput(e) {
+    this._lastCaretPosition = this._input.selectionStart;
     this._updateClearButton();
     this.updateHighlights();
     this.updateSuggestions('input');
@@ -847,12 +926,17 @@ export class RichInput extends HTMLElement {
   }
 
   _onKeyUp(e) {
+    this._lastCaretPosition = this._input.selectionStart;
     if (['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(e.key)) {
+      this.updateHighlights();
       this.updateSuggestions('caret');
     }
   }
 
   _onFocus() {
+    this._isFocused = true;
+    this._lastCaretPosition = this._input.selectionStart;
+    this.updateHighlights();
     // Optionally open suggestions if context matches
     if (this._input.value.length > 0) {
       this.updateSuggestions('focus');
@@ -860,6 +944,9 @@ export class RichInput extends HTMLElement {
   }
 
   _onBlur() {
+    this._isFocused = false;
+    this._lastCaretPosition = -1;
+    this.updateHighlights();
     // Delay closing so click events on popover items can fire
     setTimeout(() => {
       this.hideSuggestions();
@@ -868,12 +955,25 @@ export class RichInput extends HTMLElement {
   }
 
   _onClick(e) {
+    this._isFocused = true;
     if (e && typeof e.clientX === 'number' && typeof this._input?.updateCaretFromPoint === 'function') {
       this._input.updateCaretFromPoint(e.clientX, e.clientY);
     }
+    this._lastCaretPosition = this._input.selectionStart;
+    this.updateHighlights();
     this.updateSuggestions('click');
   }
 
+  _onSelectionChange() {
+    if (!this._isFocused) return;
+
+    const caret = this._input.selectionStart;
+    if (this._lastCaretPosition !== caret) {
+      this._lastCaretPosition = caret;
+      this.updateHighlights();
+    }
+  }
+
   _onClearClick() {
     this.value = '';
     this._input.focus();

package/index.js

@@ -4,7 +4,7 @@
  */
 
 import { RichInput } from './components/rich-input.js';
-import { parseSearchTokens, parseSearchQuery, getCaretContext, getSuggestions, applySuggestion } from './utils/query-parser.js';
+import { 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';
@@ -22,6 +22,7 @@ export {
   getCaretContext,
   getSuggestions,
   applySuggestion,
+  isDatalistValue,
   highlightManager,
   isOpaqueRangeSupported,
   isHighlightSupported,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rich-input",
-  "version": "1.1.1",
+  "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/highlights.js

@@ -52,6 +52,7 @@ class HighlightRegistryManager {
     const rangesByKeyword = new Map();
     const allKeywordRanges = [];
     const allValueRanges = [];
+    const allInvalidRanges = [];
 
     for (const inst of this.instances) {
       const instanceRanges = inst.getActiveHighlightRanges();
@@ -72,6 +73,13 @@ class HighlightRegistryManager {
           allKeywordRanges.push(...data.keywordRanges);
         }
       }
+
+      if (typeof inst.getActiveInvalidRanges === 'function') {
+        const invRanges = inst.getActiveInvalidRanges();
+        if (invRanges && invRanges.length > 0) {
+          allInvalidRanges.push(...invRanges);
+        }
+      }
     }
 
     // 1. Set/update individual keyword highlights (e.g. ::highlight(label))
@@ -129,6 +137,27 @@ class HighlightRegistryManager {
         } catch (e) {}
       }
     }
+
+    // 3. Set invalid highlights (rich-input-invalid)
+    let invHl = CSS.highlights.get('rich-input-invalid');
+    if (!invHl) {
+      try {
+        invHl = new Highlight();
+        CSS.highlights.set('rich-input-invalid', invHl);
+      } catch (e) {}
+    }
+    if (invHl) {
+      try {
+        invHl.priority = 10;
+      } catch (e) {}
+      invHl.clear();
+      for (const r of allInvalidRanges) {
+        try {
+          if (isRangeCollapsed(r)) continue;
+          invHl.add(r);
+        } catch (e) {}
+      }
+    }
   }
 }
 

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,
@@ -342,3 +341,25 @@ export function applySuggestion(inputStr, suggestion, context) {
   const newCaret = before.length + insertText.length;
   return { newValue, newCaret };
 }
+
+/**
+ * Checks whether a given value matches any option in the keyword configuration.
+ * @param {Object} kwConfig
+ * @param {string} value
+ * @returns {boolean}
+ */
+export function isDatalistValue(kwConfig, value) {
+  if (!kwConfig || !Array.isArray(kwConfig.options) || kwConfig.options.length === 0) {
+    return true;
+  }
+  const val = (value ?? '').trim().toLowerCase();
+  if (!val) {
+    return true;
+  }
+  return kwConfig.options.some((opt) => {
+    const optVal = (opt.value ?? '').trim().toLowerCase();
+    const optLabel = (opt.label ?? '').trim().toLowerCase();
+    const optText = (opt.text ?? '').trim().toLowerCase();
+    return optVal === val || optLabel === val || optText === val;
+  });
+}