@inshapardaz/likhari-react 0.1.18-dev.165 → 0.1.18-dev.167

package/dist/components/FindReplaceBar.d.ts

@@ -1,6 +1,10 @@
 import type { Strings } from '../i18n/strings.js';
-/** Find-and-replace controls shown above the canvas. Matches are recomputed
- * from the document on every action, so edits made in between are respected. */
+/**
+ * A compact find widget, right-aligned above the canvas (VS Code style). The
+ * first row is search; a chevron reveals the second row for replace. Typing
+ * only counts matches — the editor's selection moves to a match only when the
+ * user asks (next, previous, replace), so typing keeps going into the bar.
+ */
 export declare function FindReplaceBar({ strings, onClose }: {
     strings: Strings;
     onClose: () => void;

package/dist/components/FindReplaceBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FindReplaceBar.d.ts","sourceRoot":"","sources":["../../src/components/FindReplaceBar.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAG/C;gFACgF;AAChF,wBAAgB,cAAc,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE;IAAE,OAAO,EAAE,OAAO,CAAC;IAAC,OAAO,EAAE,MAAM,IAAI,CAAA;CAAE,+BA2F7F"}
+{"version":3,"file":"FindReplaceBar.d.ts","sourceRoot":"","sources":["../../src/components/FindReplaceBar.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAG/C;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE;IAAE,OAAO,EAAE,OAAO,CAAC;IAAC,OAAO,EAAE,MAAM,IAAI,CAAA;CAAE,+BAyH7F"}

package/dist/components/FindReplaceBar.js

@@ -1,57 +1,71 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { IconX } from '@tabler/icons-react';
+import { IconChevronDown, IconChevronRight, IconX } from '@tabler/icons-react';
 import { $findMatches, $replaceAll, $replaceMatch, $selectMatch } from '../find/findReplaceActions.js';
-/** Find-and-replace controls shown above the canvas. Matches are recomputed
- * from the document on every action, so edits made in between are respected. */
+/**
+ * A compact find widget, right-aligned above the canvas (VS Code style). The
+ * first row is search; a chevron reveals the second row for replace. Typing
+ * only counts matches — the editor's selection moves to a match only when the
+ * user asks (next, previous, replace), so typing keeps going into the bar.
+ */
 export function FindReplaceBar({ strings, onClose }) {
     const [editor] = useLexicalComposerContext();
     const t = strings.findReplace;
     const [query, setQuery] = useState('');
     const [replacement, setReplacement] = useState('');
+    const [showReplace, setShowReplace] = useState(false);
     const [index, setIndex] = useState(0);
     const [count, setCount] = useState(0);
-    // Runs `action` against the current matches and returns the new count, then
-    // syncs the index and selection. `discrete` makes the update commit before
-    // the next read, so the count reflects this action's changes.
+    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.
     const run = (action) => {
-        let result = { nextIndex: 0, matches: [] };
+        let result = { nextIndex: 0, matches: [], select: false };
         editor.update(() => {
             result = action($findMatches(query));
-            if (result.matches[result.nextIndex])
-                $selectMatch(result.matches[result.nextIndex]);
+            const match = result.matches[result.nextIndex];
+            if (result.select && match)
+                $selectMatch(match);
         }, { discrete: true });
         setCount(result.matches.length);
         setIndex(result.nextIndex);
-        const anchor = result.matches[result.nextIndex];
-        if (anchor)
-            editor.getElementByKey(anchor.anchorKey)?.scrollIntoView({ block: 'center' });
+        const match = result.matches[result.nextIndex];
+        if (result.select && match) {
+            editor.getElementByKey(match.anchorKey)?.scrollIntoView({ block: 'center' });
+            findInput.current?.focus();
+        }
     };
     useEffect(() => {
-        run((matches) => ({ nextIndex: 0, matches }));
-        // Re-run when the query changes; `run` closes over it.
+        run((matches) => ({ nextIndex: 0, matches, select: false }));
+        // Re-count when the query changes; `run` closes over it.
     }, [query]);
     const step = (delta) => run((matches) => ({
         matches,
         nextIndex: matches.length === 0 ? 0 : (index + delta + matches.length) % matches.length,
+        select: true,
     }));
     const replaceCurrent = () => run((matches) => {
         const match = matches[index];
         if (match)
             $replaceMatch(match, replacement);
         const after = $findMatches(query);
-        return { matches: after, nextIndex: Math.min(index, Math.max(0, after.length - 1)) };
+        return { matches: after, nextIndex: Math.min(index, Math.max(0, after.length - 1)), select: true };
     });
     const replaceEverything = () => run(() => {
         $replaceAll(query, replacement);
-        return { matches: $findMatches(query), nextIndex: 0 };
+        return { matches: $findMatches(query), nextIndex: 0, select: false };
     });
     const status = query === '' ? '' : count === 0 ? t.noMatches : `${index + 1} / ${count}`;
-    return (_jsxs("div", { className: "likhari-find-bar", role: "search", children: [_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();
-                } }), _jsx("span", { className: "likhari-find-status", "aria-live": "polite", children: status }), _jsx("button", { type: "button", onClick: () => step(-1), disabled: count === 0, children: t.previous }), _jsx("button", { type: "button", onClick: () => step(1), disabled: count === 0, children: t.next }), _jsx("input", { "aria-label": t.replace, placeholder: t.replacePlaceholder, value: replacement, onChange: (e) => setReplacement(e.target.value) }), _jsx("button", { type: "button", onClick: replaceCurrent, disabled: count === 0, children: t.replaceOne }), _jsx("button", { type: "button", onClick: replaceEverything, disabled: count === 0, children: t.replaceAll }), _jsx("button", { type: "button", className: "likhari-find-close", onClick: onClose, "aria-label": t.close, title: t.close, children: _jsx(IconX, { size: 16, stroke: 1.75 }) })] }));
+    const Chevron = showReplace ? IconChevronDown : IconChevronRight;
+    return (_jsxs("div", { className: "likhari-find-widget", role: "search", 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) => {
+                            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", { "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", onClick: replaceCurrent, disabled: count === 0, children: t.replaceOne }), _jsx("button", { type: "button", onClick: replaceEverything, disabled: count === 0, children: t.replaceAll })] }))] }));
 }

package/dist/theme/editor.css

@@ -756,19 +756,32 @@
   outline-offset: 1px;
 }
 
-.likhari-find-bar {
+/* A compact widget, sized to its controls and pushed to the inline end — not a
+   full-width bar. margin-inline-start: auto works in block and flex parents. */
+.likhari-find-widget {
   display: flex;
-  flex-wrap: wrap;
-  align-items: center;
+  flex-direction: column;
   gap: 6px;
-  padding: 6px 10px;
-  border-bottom: 1px solid var(--editor-line);
+  width: fit-content;
+  margin-inline: auto 10px;
+  margin-block: 6px;
+  padding: 6px;
+  border: 1px solid var(--editor-line);
+  border-radius: 6px;
   background: var(--editor-paper-dim);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
   font-size: 13px;
 }
 
-.likhari-find-bar input {
-  min-width: 140px;
+.likhari-find-row {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 4px;
+}
+
+.likhari-find-widget input {
+  width: 180px;
   padding: 3px 6px;
   border: 1px solid var(--editor-line);
   border-radius: 4px;
@@ -776,27 +789,39 @@
   color: inherit;
 }
 
-.likhari-find-bar button {
-  padding: 3px 8px;
+.likhari-find-widget button {
+  padding: 2px 8px;
   border: 1px solid var(--editor-line);
   border-radius: 4px;
   background: transparent;
   color: inherit;
   cursor: pointer;
+  white-space: nowrap;
 }
 
-.likhari-find-bar button:disabled {
+.likhari-find-widget button:disabled {
   opacity: 0.5;
   cursor: default;
 }
 
-.likhari-find-status {
-  min-width: 64px;
-  color: var(--editor-ink-muted, inherit);
-}
-
-.likhari-find-close {
+.likhari-find-widget .likhari-find-icon {
   display: inline-flex;
   align-items: center;
-  margin-inline-start: auto;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: none;
+}
+
+.likhari-find-icon-spacer {
+  display: inline-block;
+  width: 24px;
+  flex: 0 0 24px;
+}
+
+.likhari-find-status {
+  min-width: 56px;
+  text-align: end;
+  opacity: 0.8;
 }

package/package.json

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