@inshapardaz/likhari-react 0.1.25-dev.226 → 0.1.25-dev.228

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;AAmB1D;;;;;;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,sCA6KA"}
+{"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;AAqB1D;;;;;;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,sCAsLA"}

package/dist/autocomplete/AutocompletePlugin.js

@@ -67,26 +67,37 @@ export function AutocompletePlugin({ label, stores, language: chosenLanguage, })
             const { prefix, rtl } = target;
             const language = languageRef.current === 'auto' ? (rtl ? 'ur' : 'en') : languageRef.current;
             void indexFor(language).then((loaded) => {
+                // Same word as the open list: keep the user's highlight rather than resetting it.
+                const open = popupRef.current;
+                if (open && open.prefix === prefix && open.dir === (rtl ? 'rtl' : 'ltr'))
+                    return;
                 const items = loaded.complete(prefix);
                 if (items.length === 0)
                     return hide();
                 const rect = caretRect(editor);
-                show({ items, index: 0, selected: false, x: rect.left, y: rect.bottom, dir: rtl ? 'rtl' : 'ltr' });
+                show({ prefix, items, index: 0, selected: false, x: rect.left, y: rect.bottom, dir: rtl ? 'rtl' : 'ltr' });
             });
         };
-        const move = (delta) => {
+        // Handles an arrow key for the list, and cancels the browser's own caret movement.
+        const move = (delta, event) => {
             const current = popupRef.current;
-            if (!current)
+            // Still loading the list for the word being typed: the arrow is for the list, not the caret.
+            if (!current && prefixAtCaret(editor) === null)
                 return false;
-            const count = current.items.length;
-            show({ ...current, index: (current.index + delta + count) % count, selected: true });
+            event?.preventDefault();
+            if (current) {
+                const count = current.items.length;
+                show({ ...current, index: (current.index + delta + count) % count, selected: true });
+            }
             return true;
         };
         const onKeyDown = (event) => {
             // Up, Down, Tab and Enter act on the list through their editor commands, which
             // run after this listener, so the list must stay open for them.
             const current = popupRef.current;
-            if (current && (event.key === 'ArrowUp' || event.key === 'ArrowDown' || event.key === 'Tab' || (event.key === 'Enter' && current.selected)))
+            if (current && (event.key === 'Tab' || (event.key === 'Enter' && current.selected)))
+                return;
+            if ((event.key === 'ArrowUp' || event.key === 'ArrowDown') && (current || prefixAtCaret(editor) !== null))
                 return;
             if (event.key === 'Escape' && popupRef.current) {
                 event.preventDefault();
@@ -129,8 +140,8 @@ export function AutocompletePlugin({ label, stores, language: chosenLanguage, })
                 setTimeout(refresh, 0);
         });
         const unregisterCommands = [
-            editor.registerCommand(KEY_ARROW_DOWN_COMMAND, () => move(1), COMMAND_PRIORITY_HIGH),
-            editor.registerCommand(KEY_ARROW_UP_COMMAND, () => move(-1), COMMAND_PRIORITY_HIGH),
+            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),
             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),
         ];
@@ -163,6 +174,25 @@ export function AutocompletePlugin({ label, stores, language: chosenLanguage, })
                 acceptItem(editor, 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. */
+function prefixAtCaret(editor) {
+    let prefix = null;
+    editor.getEditorState().read(() => {
+        const selection = $getSelection();
+        if (!$isRangeSelection(selection) || !selection.isCollapsed())
+            return;
+        const node = selection.anchor.getNode();
+        if (!$isTextNode(node))
+            return;
+        const text = node.getTextContent();
+        const before = text.slice(0, selection.anchor.offset);
+        const word = WORD_END.exec(before)?.[0];
+        const after = text.charAt(selection.anchor.offset);
+        if (word && word.length >= MIN_PREFIX && !(after !== '' && LETTER.test(after)))
+            prefix = word;
+    });
+    return prefix;
+}
 /** Where to put the popup: under the caret, or the editor's top-left if the caret has no position yet. */
 function caretRect(editor) {
     const selection = window.getSelection();

package/package.json

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