rich-input 1.1.0 → 1.2.0

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.
@@ -268,6 +269,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.

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, {
@@ -764,7 +802,7 @@ export class RichInput extends HTMLElement {
         const start = highlightQuotes ? token.valueStart : token.innerStart;
         const end = highlightQuotes ? token.valueEnd : token.innerEnd;
 
-        if (end >= start && end <= text.length) {
+        if (end > start && end <= text.length) {
           try {
             const valRange = this._input.createValueRange(start, end);
             this._ownedRanges.push(valRange);
@@ -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.0",
+  "version": "1.2.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

@@ -13,6 +13,17 @@ export const isHighlightSupported =
   typeof CSS !== 'undefined' &&
   'highlights' in CSS;
 
+function isRangeCollapsed(range) {
+  if (!range) return true;
+  if (range.collapsed === true) return true;
+  if (typeof range.startOffset === 'number' && typeof range.endOffset === 'number') {
+    if (range.startOffset === range.endOffset && range.startContainer === range.endContainer) {
+      return true;
+    }
+  }
+  return false;
+}
+
 class HighlightRegistryManager {
   constructor() {
     this.instances = new Set();
@@ -41,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();
@@ -61,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))
@@ -77,6 +96,7 @@ class HighlightRegistryManager {
         hl.clear();
         for (const r of ranges) {
           try {
+            if (isRangeCollapsed(r)) continue;
             hl.add(r);
           } catch (e) {}
         }
@@ -95,6 +115,7 @@ class HighlightRegistryManager {
       kwHl.clear();
       for (const r of allKeywordRanges) {
         try {
+          if (isRangeCollapsed(r)) continue;
           kwHl.add(r);
         } catch (e) {}
       }
@@ -111,10 +132,32 @@ class HighlightRegistryManager {
       valHl.clear();
       for (const r of allValueRanges) {
         try {
+          if (isRangeCollapsed(r)) continue;
           valHl.add(r);
         } 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

@@ -342,3 +342,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;
+  });
+}