@inshapardaz/likhari-react 0.1.18-dev.175 → 0.1.18-dev.179

package/dist/components/FindReplaceBar.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { IconChevronDown, IconChevronRight, IconRepeat, IconReplace, IconX } from '@tabler/icons-react';
 import { $findMatches, $replaceAll, $replaceMatch, $selectMatch } from '../find/findReplaceActions.js';
@@ -17,7 +17,6 @@ export function FindReplaceBar({ strings, dir, onClose }) {
     const [showReplace, setShowReplace] = useState(false);
     const [index, setIndex] = useState(0);
     const [count, setCount] = useState(0);
-    const findInput = useRef(null);
     // Runs `action` against the current matches inside a committed update, then
     // syncs the count and index. Selecting a match is up to the action, so
     // typing never moves the editor's selection.
@@ -33,8 +32,10 @@ export function FindReplaceBar({ strings, dir, onClose }) {
         setIndex(result.nextIndex);
         const match = result.matches[result.nextIndex];
         if (result.select && match) {
+            // Lexical only draws the selection while the editor has focus, so focus it
+            // here; the match stays selected and visible.
             editor.getElementByKey(match.anchorKey)?.scrollIntoView({ block: 'center' });
-            findInput.current?.focus();
+            editor.focus();
         }
     };
     useEffect(() => {
@@ -59,12 +60,12 @@ export function FindReplaceBar({ strings, dir, onClose }) {
     });
     const status = query === '' ? '' : count === 0 ? t.noMatches : `${index + 1} / ${count}`;
     const Chevron = showReplace ? IconChevronDown : IconChevronRight;
-    return (_jsxs("div", { className: "likhari-find-widget", role: "search", dir: dir, children: [_jsxs("div", { className: "likhari-find-row", children: [_jsx("button", { type: "button", className: "likhari-find-icon", onClick: () => setShowReplace((v) => !v), "aria-label": t.replace, "aria-expanded": showReplace, title: t.replace, children: _jsx(Chevron, { size: 14, stroke: 1.75 }) }), _jsx("input", { ref: findInput, "aria-label": t.find, placeholder: t.findPlaceholder, value: query, onChange: (e) => setQuery(e.target.value), onKeyDown: (e) => {
+    return (_jsxs("div", { className: "likhari-find-widget", role: "search", dir: dir, children: [_jsxs("div", { className: "likhari-find-row", children: [_jsx("button", { type: "button", className: "likhari-find-icon", onClick: () => setShowReplace((v) => !v), "aria-label": t.replace, "aria-expanded": showReplace, title: t.replace, children: _jsx(Chevron, { size: 14, stroke: 1.75 }) }), _jsx("input", { "aria-label": t.find, placeholder: t.findPlaceholder, value: query, onChange: (e) => setQuery(e.target.value), onKeyDown: (e) => {
                             if (e.key === 'Enter')
                                 step(e.shiftKey ? -1 : 1);
                             if (e.key === 'Escape')
                                 onClose();
-                        }, autoFocus: true }), _jsx("span", { className: "likhari-find-status", "aria-live": "polite", children: status }), _jsx("button", { type: "button", className: "likhari-find-icon", onClick: () => step(-1), disabled: count === 0, "aria-label": t.previous, title: t.previous, children: _jsx(IconChevronDown, { size: 14, stroke: 1.75, style: { transform: 'rotate(180deg)' } }) }), _jsx("button", { type: "button", className: "likhari-find-icon", onClick: () => step(1), disabled: count === 0, "aria-label": t.next, title: t.next, children: _jsx(IconChevronDown, { size: 14, stroke: 1.75 }) }), _jsx("button", { type: "button", className: "likhari-find-icon", onClick: onClose, "aria-label": t.close, title: t.close, children: _jsx(IconX, { size: 14, stroke: 1.75 }) })] }), showReplace && (_jsxs("div", { className: "likhari-find-row", children: [_jsx("span", { className: "likhari-find-icon-spacer", "aria-hidden": "true" }), _jsx("input", { className: "likhari-find-replace-input", "aria-label": t.replace, placeholder: t.replacePlaceholder, value: replacement, onChange: (e) => setReplacement(e.target.value), onKeyDown: (e) => {
+                        }, autoFocus: true }), _jsx("span", { className: "likhari-find-status", "aria-live": "polite", children: status }), _jsx("button", { type: "button", className: "likhari-find-icon likhari-find-prev", onClick: () => step(-1), disabled: count === 0, "aria-label": t.previous, title: t.previous, children: _jsx(IconChevronDown, { size: 14, stroke: 1.75, style: { transform: 'rotate(180deg)' } }) }), _jsx("button", { type: "button", className: "likhari-find-icon likhari-find-next", onClick: () => step(1), disabled: count === 0, "aria-label": t.next, title: t.next, children: _jsx(IconChevronDown, { size: 14, stroke: 1.75 }) }), _jsx("button", { type: "button", className: "likhari-find-icon likhari-find-close", onClick: onClose, "aria-label": t.close, title: t.close, children: _jsx(IconX, { size: 14, stroke: 1.75 }) })] }), showReplace && (_jsxs("div", { className: "likhari-find-row", children: [_jsx("span", { className: "likhari-find-icon-spacer", "aria-hidden": "true" }), _jsx("input", { className: "likhari-find-replace-input", "aria-label": t.replace, placeholder: t.replacePlaceholder, value: replacement, onChange: (e) => setReplacement(e.target.value), onKeyDown: (e) => {
                             if (e.key === 'Enter' && count > 0)
                                 replaceCurrent();
                         } }), _jsx("button", { type: "button", className: "likhari-find-icon likhari-find-replace-one", onClick: replaceCurrent, disabled: count === 0, "aria-label": t.replaceOne, title: t.replaceOne, children: _jsx(IconReplace, { size: 14, stroke: 1.75 }) }), _jsx("button", { type: "button", className: "likhari-find-icon likhari-find-replace-all", onClick: replaceEverything, disabled: count === 0, "aria-label": t.replaceAll, title: t.replaceAll, children: _jsx(IconRepeat, { size: 14, stroke: 1.75 }) })] }))] }));

package/dist/theme/editor.css

@@ -783,12 +783,12 @@
   font-size: 13px;
 }
 
-/* Both rows share one grid. The replace input sits under the search input and
-   its two buttons follow it directly. Columns are chevron, input, status, prev,
-   next, close. */
+/* Both rows share one grid. Columns: chevron, input, then two narrow tracks
+   that hold either the match count (search row) or the two replace buttons
+   (replace row), then prev, next and close. */
 .likhari-find-row {
   display: grid;
-  grid-template-columns: 24px 180px 56px 24px 24px 24px;
+  grid-template-columns: 24px 180px 24px 24px 24px 24px 24px;
   align-items: center;
   column-gap: 4px;
 }
@@ -797,14 +797,28 @@
   grid-column: 2;
 }
 
+.likhari-find-status {
+  grid-column: 3 / span 2;
+}
+
+.likhari-find-prev {
+  grid-column: 5;
+}
+
+.likhari-find-next {
+  grid-column: 6;
+}
+
+.likhari-find-close {
+  grid-column: 7;
+}
+
 .likhari-find-replace-one {
   grid-column: 3;
-  justify-self: start;
 }
 
 .likhari-find-replace-all {
   grid-column: 4;
-  justify-self: start;
 }
 
 .likhari-find-widget[dir='rtl'] {
@@ -852,7 +866,7 @@
 }
 
 .likhari-find-status {
-  min-width: 56px;
   text-align: end;
   opacity: 0.8;
+  white-space: nowrap;
 }

package/package.json

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