@inshapardaz/likhari-react 0.1.25-dev.230 → 0.1.25-dev.234

package/dist/autocomplete/AutocompletePlugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AutocompletePlugin.d.ts","sourceRoot":"","sources":["../../src/autocomplete/AutocompletePlugin.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAGrE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAsB1D;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,MAAM,EACN,QAAQ,EAAE,cAAc,GACzB,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,eAAe,EAAE,CAAC;IAC1B,8EAA8E;IAC9E,QAAQ,EAAE,aAAa,GAAG,MAAM,CAAC;CAClC,sCAgNA"}
+{"version":3,"file":"AutocompletePlugin.d.ts","sourceRoot":"","sources":["../../src/autocomplete/AutocompletePlugin.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAGrE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAyB1D;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,MAAM,EACN,QAAQ,EAAE,cAAc,GACzB,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,eAAe,EAAE,CAAC;IAC1B,8EAA8E;IAC9E,QAAQ,EAAE,aAAa,GAAG,MAAM,CAAC;CAClC,sCAuMA"}

package/dist/autocomplete/AutocompletePlugin.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { $getSelection, $isRangeSelection, $isTextNode, COMMAND_PRIORITY_HIGH, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ENTER_COMMAND, KEY_TAB_COMMAND, } from 'lexical';
+import { $getSelection, $isRangeSelection, $isTextNode, COMMAND_PRIORITY_HIGH, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ENTER_COMMAND, KEY_ESCAPE_COMMAND, KEY_TAB_COMMAND, } from 'lexical';
 import { $replaceMatch } from '../find/findReplaceActions.js';
 import { onSpellWordsChange } from '../spellcheck/userWords.js';
 import { WordIndex } from './wordIndex.js';
@@ -99,7 +99,7 @@ export function AutocompletePlugin({ label, stores, language: chosenLanguage, })
                 if (items.length === 0)
                     return hide();
                 const rect = caretRect(editor);
-                show({ prefix, language, items, index: 0, selected: false, x: rect.left, y: rect.bottom, dir: rtl ? 'rtl' : 'ltr' });
+                show({ prefix, language, items, index: 0, selected: false, ...rect, dir: rtl ? 'rtl' : 'ltr' });
             });
         };
         // Handles an arrow key for the list, and cancels the browser's own caret movement.
@@ -123,11 +123,6 @@ export function AutocompletePlugin({ label, stores, language: chosenLanguage, })
                 return;
             if ((event.key === 'ArrowUp' || event.key === 'ArrowDown') && (current || prefixAtCaret(editor) !== null))
                 return;
-            if (event.key === 'Escape' && popupRef.current) {
-                event.preventDefault();
-                show(null);
-                return;
-            }
             // Left, Right, Home and End move the caret away from the word, so the list closes.
             if (MOVEMENT_KEYS.has(event.key)) {
                 typing.current = false;
@@ -139,6 +134,11 @@ export function AutocompletePlugin({ label, stores, language: chosenLanguage, })
                 hide();
             setTimeout(refresh, 0);
         };
+        // Text that arrives without a keydown (input methods, some keyboard layouts) is typing too.
+        const onInput = () => {
+            typing.current = true;
+            setTimeout(refresh, 0);
+        };
         const onMouseDown = () => {
             typing.current = false;
             hide();
@@ -147,9 +147,11 @@ export function AutocompletePlugin({ label, stores, language: chosenLanguage, })
         const attach = (next) => {
             root?.removeEventListener('keydown', onKeyDown);
             root?.removeEventListener('mousedown', onMouseDown);
+            root?.removeEventListener('input', onInput);
             root = next;
             root?.addEventListener('keydown', onKeyDown);
             root?.addEventListener('mousedown', onMouseDown);
+            root?.addEventListener('input', onInput);
         };
         const unregisterRoot = editor.registerRootListener((next) => attach(next));
         const unregisterUpdate = editor.registerUpdateListener(() => {
@@ -166,6 +168,13 @@ export function AutocompletePlugin({ label, stores, language: chosenLanguage, })
         const unregisterCommands = [
             editor.registerCommand(KEY_ARROW_DOWN_COMMAND, (event) => move(1, event), COMMAND_PRIORITY_HIGH),
             editor.registerCommand(KEY_ARROW_UP_COMMAND, (event) => move(-1, event), COMMAND_PRIORITY_HIGH),
+            // While the list is open, Escape only closes it. Lexical would otherwise blur the editor.
+            editor.registerCommand(KEY_ESCAPE_COMMAND, () => {
+                if (!popupRef.current)
+                    return false;
+                show(null);
+                return true;
+            }, COMMAND_PRIORITY_HIGH),
             editor.registerCommand(KEY_TAB_COMMAND, (event) => acceptHighlighted(event), COMMAND_PRIORITY_HIGH),
             editor.registerCommand(KEY_ENTER_COMMAND, (event) => (popupRef.current?.selected ? acceptHighlighted(event) : false), COMMAND_PRIORITY_HIGH),
         ];
@@ -195,11 +204,34 @@ export function AutocompletePlugin({ label, stores, language: chosenLanguage, })
     }, [stores]);
     if (!popup)
         return null;
-    return (_jsx("div", { className: "likhari-autocomplete", role: "listbox", "aria-label": label, dir: popup.dir, style: { position: 'fixed', left: popup.x, top: popup.y + 4 }, children: popup.items.map((item, i) => (_jsx("div", { role: "option", "aria-selected": i === popup.index, className: i === popup.index ? 'likhari-autocomplete-item likhari-autocomplete-item--active' : 'likhari-autocomplete-item', onMouseDown: (event) => {
+    return _jsx(SuggestionList, { popup: popup, label: label, onPick: (item) => {
+            acceptItem(editor, item);
+            recordAcceptance(popup.language, item);
+            show(null);
+        } });
+}
+function SuggestionList({ popup, label, onPick }) {
+    const ref = useRef(null);
+    // Placed after it is drawn, so its real size is known: kept inside the window, on the side of the
+    // caret that has room, and right-to-left lists align their right edge with the caret.
+    useLayoutEffect(() => {
+        const element = ref.current;
+        if (!element)
+            return;
+        const margin = 8;
+        const width = element.offsetWidth;
+        const height = element.offsetHeight;
+        const preferredLeft = popup.dir === 'rtl' ? popup.right - width : popup.left;
+        const left = Math.min(Math.max(preferredLeft, margin), window.innerWidth - width - margin);
+        const below = popup.bottom + 4;
+        const fitsBelow = below + height <= window.innerHeight - margin;
+        const top = fitsBelow ? below : Math.max(popup.top - height - 4, margin);
+        element.style.left = `${Math.max(left, margin)}px`;
+        element.style.top = `${top}px`;
+    });
+    return (_jsx("div", { ref: ref, className: "likhari-autocomplete", role: "listbox", "aria-label": label, dir: popup.dir, style: { position: 'fixed' }, children: popup.items.map((item, i) => (_jsx("div", { role: "option", "aria-selected": i === popup.index, className: i === popup.index ? 'likhari-autocomplete-item likhari-autocomplete-item--active' : 'likhari-autocomplete-item', onMouseDown: (event) => {
                 event.preventDefault();
-                acceptItem(editor, item);
-                recordAcceptance(popup.language, item);
-                show(null);
+                onPick(item);
             }, children: item }, item))) }));
 }
 /** The typed part of the word at the caret, when the caret is at its end and the word is long enough to complete. */
@@ -227,10 +259,12 @@ function caretRect(editor) {
     if (selection && selection.rangeCount > 0) {
         const rect = selection.getRangeAt(0).getBoundingClientRect();
         if (rect.width > 0 || rect.height > 0)
-            return { left: rect.left, bottom: rect.bottom };
+            return { left: rect.left, right: rect.right, top: rect.top, bottom: rect.bottom };
     }
     const root = editor.getRootElement()?.getBoundingClientRect();
-    return { left: root?.left ?? 0, bottom: root?.top ?? 0 };
+    const left = root?.left ?? 0;
+    const top = root?.top ?? 0;
+    return { left, right: left, top, bottom: top };
 }
 function acceptItem(editor, item) {
     editor.update(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inshapardaz/likhari-react",
-  "version": "0.1.25-dev.230",
+  "version": "0.1.25-dev.234",
   "description": "React implementation of the Likhari editor, built on @lexical/react.",
   "license": "MIT",
   "repository": {