@moldable-ai/editor 0.1.7 → 0.1.8

package/dist/components/markdown-editor.d.ts

@@ -1,4 +1,5 @@
-interface MarkdownEditorProps {
+import { type MarkdownEditorHandle } from '../lib/lexical/find-replace-plugin';
+export interface MarkdownEditorProps {
     value: string;
     onChange: (value: string) => void;
     placeholder?: string;
@@ -9,7 +10,10 @@ interface MarkdownEditorProps {
     minHeight?: string;
     maxHeight?: string;
     hideMarkdownHint?: boolean;
+    findQuery?: string;
+    currentFindMatch?: number;
+    onFindMatchCountChange?: (count: number) => void;
 }
-export declare function MarkdownEditor({ value, onChange, placeholder, disabled, autoFocus, className, contentClassName, minHeight, maxHeight, hideMarkdownHint, }: MarkdownEditorProps): import("react/jsx-runtime").JSX.Element;
-export {};
+export declare const MarkdownEditor: import("react").ForwardRefExoticComponent<MarkdownEditorProps & import("react").RefAttributes<MarkdownEditorHandle>>;
+export type { MarkdownEditorHandle };
 //# sourceMappingURL=markdown-editor.d.ts.map

package/dist/components/markdown-editor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"markdown-editor.d.ts","sourceRoot":"","sources":["../../src/components/markdown-editor.tsx"],"names":[],"mappings":"AAsCA,UAAU,mBAAmB;IAC3B,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAA;CAC3B;AAED,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,QAAQ,EACR,WAAkC,EAClC,QAAgB,EAChB,SAAiB,EACjB,SAAS,EACT,gBAAgB,EAChB,SAAmB,EACnB,SAAkB,EAClB,gBAAwB,GACzB,EAAE,mBAAmB,2CAsGrB"}
+{"version":3,"file":"markdown-editor.d.ts","sourceRoot":"","sources":["../../src/components/markdown-editor.tsx"],"names":[],"mappings":"AAoBA,OAAO,EAGL,KAAK,oBAAoB,EAC1B,MAAM,oCAAoC,CAAA;AAoB3C,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,sBAAsB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACjD;AAED,eAAO,MAAM,cAAc,sHAmIzB,CAAA;AAEF,YAAY,EAAE,oBAAoB,EAAE,CAAA"}

package/dist/components/markdown-editor.js

@@ -13,11 +13,12 @@ import { MarkdownShortcutPlugin } from '@lexical/react/LexicalMarkdownShortcutPl
 import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
 import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
 import { TabIndentationPlugin } from '@lexical/react/LexicalTabIndentationPlugin';
-import { useCallback, useRef } from 'react';
+import { forwardRef, useCallback, useRef } from 'react';
 import { cn } from '@moldable-ai/ui';
 import { LINK_MATCHERS } from '../lib/lexical/auto-link-config';
 import { ClickableLinkPlugin } from '../lib/lexical/clickable-link-plugin';
 import { editorTheme } from '../lib/lexical/editor-theme';
+import { FIND_REPLACE_UPDATE_TAG, FindReplacePlugin, } from '../lib/lexical/find-replace-plugin';
 import { $convertFromMarkdownString, $convertToMarkdownString, markdownTransformers, } from '../lib/lexical/markdown-transformers';
 import { SyncPlugin } from '../lib/lexical/sync-plugin';
 import { FloatingToolbar } from './floating-toolbar';
@@ -25,9 +26,10 @@ import { CodeHighlightNode, CodeNode } from '@lexical/code';
 import { HorizontalRuleNode } from '@lexical/extension';
 import { AutoLinkNode, LinkNode } from '@lexical/link';
 import { ListItemNode, ListNode } from '@lexical/list';
+import { MarkNode } from '@lexical/mark';
 import { HeadingNode, QuoteNode } from '@lexical/rich-text';
 import { $createParagraphNode, $getRoot } from 'lexical';
-export function MarkdownEditor({ value, onChange, placeholder = 'Write something...', disabled = false, autoFocus = false, className, contentClassName, minHeight = '150px', maxHeight = '50vh', hideMarkdownHint = false, }) {
+export const MarkdownEditor = forwardRef(function MarkdownEditor({ value, onChange, placeholder = 'Write something...', disabled = false, autoFocus = false, className, contentClassName, minHeight = '150px', maxHeight = '50vh', hideMarkdownHint = false, findQuery = '', currentFindMatch = 0, onFindMatchCountChange, }, ref) {
     const initialValueRef = useRef(value);
     const initialConfig = {
         namespace: 'MarkdownEditor',
@@ -54,6 +56,7 @@ export function MarkdownEditor({ value, onChange, placeholder = 'Write something
             CodeHighlightNode,
             AutoLinkNode,
             LinkNode,
+            MarkNode,
             HorizontalRuleNode,
         ],
         onError: (error) => {
@@ -62,7 +65,9 @@ export function MarkdownEditor({ value, onChange, placeholder = 'Write something
         theme: editorTheme,
         editable: !disabled,
     };
-    const handleChange = useCallback((editorState) => {
+    const handleChange = useCallback((editorState, _editor, tags) => {
+        if (tags.has(FIND_REPLACE_UPDATE_TAG))
+            return;
         editorState.read(() => {
             // Use shouldPreserveNewLines: true to preserve empty paragraphs as extra newlines
             const markdown = $convertToMarkdownString({
@@ -76,5 +81,5 @@ export function MarkdownEditor({ value, onChange, placeholder = 'Write something
             }
         });
     }, [onChange]);
-    return (_jsx(LexicalComposer, { initialConfig: initialConfig, children: _jsxs("div", { className: cn('relative h-full', className), "data-lexical-editor-container": true, children: [_jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: cn('prose prose-sm caret-primary dark:prose-invert max-w-none resize-none overflow-auto bg-transparent outline-none', disabled && 'cursor-not-allowed opacity-50', contentClassName), style: { minHeight, maxHeight }, "aria-placeholder": placeholder, "data-lexical-editor": "true", placeholder: _jsx("div", { className: "text-muted-foreground pointer-events-none absolute left-0 top-1 text-sm opacity-75", children: placeholder }) }), ErrorBoundary: LexicalErrorBoundary }), _jsx(HistoryPlugin, {}), autoFocus && _jsx(AutoFocusPlugin, {}), _jsx(ListPlugin, {}), _jsx(CheckListPlugin, {}), _jsx(TabIndentationPlugin, {}), _jsx(LinkPlugin, {}), _jsx(AutoLinkPlugin, { matchers: LINK_MATCHERS }), _jsx(ClickableLinkPlugin, {}), _jsx(FloatingToolbar, {}), _jsx(MarkdownShortcutPlugin, { transformers: markdownTransformers }), _jsx(OnChangePlugin, { onChange: handleChange, ignoreSelectionChange: true }), _jsx(SyncPlugin, { value: value, initialValueRef: initialValueRef }), !hideMarkdownHint && (_jsx("div", { className: "mt-1 flex justify-end", children: _jsx("span", { className: "text-muted-foreground/60 text-xs", children: "Markdown supported" }) }))] }) }));
-}
+    return (_jsx(LexicalComposer, { initialConfig: initialConfig, children: _jsxs("div", { className: cn('relative h-full', className), "data-lexical-editor-container": true, children: [_jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: cn('prose prose-sm caret-primary dark:prose-invert max-w-none resize-none overflow-auto bg-transparent outline-none', disabled && 'cursor-not-allowed opacity-50', contentClassName), style: { minHeight, maxHeight }, "aria-placeholder": placeholder, "data-lexical-editor": "true", placeholder: _jsx("div", { className: "text-muted-foreground pointer-events-none absolute left-0 top-1 text-sm opacity-75", children: placeholder }) }), ErrorBoundary: LexicalErrorBoundary }), _jsx(HistoryPlugin, {}), autoFocus && _jsx(AutoFocusPlugin, {}), _jsx(ListPlugin, {}), _jsx(CheckListPlugin, {}), _jsx(TabIndentationPlugin, {}), _jsx(LinkPlugin, {}), _jsx(AutoLinkPlugin, { matchers: LINK_MATCHERS }), _jsx(ClickableLinkPlugin, {}), _jsx(FloatingToolbar, {}), _jsx(MarkdownShortcutPlugin, { transformers: markdownTransformers }), _jsx(OnChangePlugin, { onChange: handleChange, ignoreSelectionChange: true }), _jsx(FindReplacePlugin, { query: findQuery, currentIndex: currentFindMatch, onMatchCountChange: onFindMatchCountChange, editorRef: ref }), _jsx(SyncPlugin, { value: value, initialValueRef: initialValueRef }), !hideMarkdownHint && (_jsx("div", { className: "mt-1 flex justify-end", children: _jsx("span", { className: "text-muted-foreground/60 text-xs", children: "Markdown supported" }) }))] }) }));
+});

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { MarkdownEditor } from './components/markdown-editor';
+export { MarkdownEditor, type MarkdownEditorHandle, type MarkdownEditorProps, } from './components/markdown-editor';
 export { FloatingToolbar } from './components/floating-toolbar';
 export { $convertFromMarkdownString, $convertToMarkdownString, markdownTransformers, HR, } from './lib/lexical/markdown-transformers';
 export { editorTheme } from './lib/lexical/editor-theme';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAA;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAG/D,OAAO,EACL,0BAA0B,EAC1B,wBAAwB,EACxB,oBAAoB,EACpB,EAAE,GACH,MAAM,qCAAqC,CAAA;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAA;AACxD,OAAO,EACL,aAAa,EACb,SAAS,EACT,WAAW,GACZ,MAAM,gCAAgC,CAAA;AACvC,OAAO,EACL,kBAAkB,EAClB,KAAK,oBAAoB,GAC1B,MAAM,uCAAuC,CAAA;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAA;AACtD,OAAO,EACL,mBAAmB,EACnB,SAAS,GACV,MAAM,qCAAqC,CAAA;AAG5C,OAAO,EAAE,4BAA4B,EAAE,MAAM,+BAA+B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,cAAc,EACd,KAAK,oBAAoB,EACzB,KAAK,mBAAmB,GACzB,MAAM,8BAA8B,CAAA;AACrC,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAG/D,OAAO,EACL,0BAA0B,EAC1B,wBAAwB,EACxB,oBAAoB,EACpB,EAAE,GACH,MAAM,qCAAqC,CAAA;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAA;AACxD,OAAO,EACL,aAAa,EACb,SAAS,EACT,WAAW,GACZ,MAAM,gCAAgC,CAAA;AACvC,OAAO,EACL,kBAAkB,EAClB,KAAK,oBAAoB,GAC1B,MAAM,uCAAuC,CAAA;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAA;AACtD,OAAO,EACL,mBAAmB,EACnB,SAAS,GACV,MAAM,qCAAqC,CAAA;AAG5C,OAAO,EAAE,4BAA4B,EAAE,MAAM,+BAA+B,CAAA"}

package/dist/index.js

@@ -1,5 +1,5 @@
 // Components
-export { MarkdownEditor } from './components/markdown-editor';
+export { MarkdownEditor, } from './components/markdown-editor';
 export { FloatingToolbar } from './components/floating-toolbar';
 // Lexical utilities (for advanced use cases)
 export { $convertFromMarkdownString, $convertToMarkdownString, markdownTransformers, HR, } from './lib/lexical/markdown-transformers';

package/dist/lib/lexical/editor-theme.d.ts

@@ -32,6 +32,8 @@ export declare const editorTheme: {
         listitemUnchecked: string;
     };
     link: string;
+    mark: string;
+    markOverlap: string;
     quote: string;
     code: string;
 };

package/dist/lib/lexical/editor-theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"editor-theme.d.ts","sourceRoot":"","sources":["../../../src/lib/lexical/editor-theme.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCvB,CAAA"}
+{"version":3,"file":"editor-theme.d.ts","sourceRoot":"","sources":["../../../src/lib/lexical/editor-theme.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkCvB,CAAA"}

package/dist/lib/lexical/editor-theme.js

@@ -32,6 +32,8 @@ export const editorTheme = {
         listitemUnchecked: 'lexical-listitem-unchecked',
     },
     link: 'text-primary underline hover:text-primary/80 cursor-pointer',
+    mark: 'lexical-mark',
+    markOverlap: 'lexical-mark-overlap',
     quote: 'border-l-4 border-muted px-4 py-2 my-2 text-muted-foreground',
     code: 'bg-muted p-3 my-4 rounded-md overflow-x-auto font-mono text-sm leading-loose text-muted-foreground',
 };

package/dist/lib/lexical/find-replace-plugin.d.ts

@@ -0,0 +1,31 @@
+import { type ForwardedRef } from 'react';
+import { type LexicalEditor } from 'lexical';
+export interface MarkdownEditorHandle {
+    replaceCurrentFindMatch: (replacement: string) => boolean;
+    replaceAllFindMatches: (replacement: string) => number;
+    focus: () => void;
+}
+interface FindReplacePluginProps {
+    query: string;
+    currentIndex: number;
+    onMatchCountChange?: (count: number) => void;
+    editorRef: ForwardedRef<MarkdownEditorHandle>;
+}
+export interface FindMatch {
+    start: number;
+    end: number;
+}
+export declare const FIND_MATCH_MARK_ID = "moldable-find-match";
+export declare const FIND_CURRENT_MARK_ID = "moldable-find-current";
+export declare const FIND_REPLACE_UPDATE_TAG = "moldable-find-replace";
+export declare function getTextMatches(text: string, query: string): FindMatch[];
+export declare function $clearFindMarks(): void;
+export declare function $getFindMatches(query: string): FindMatch[];
+export declare function $applyFindHighlights(query: string, currentIndex: number): number;
+export declare function updateFindHighlights(editor: LexicalEditor, query: string, currentIndex: number): number;
+export declare function registerFindMarkResolver(editor: LexicalEditor): () => void;
+export declare function replaceFindMatch(editor: LexicalEditor, query: string, replacement: string, currentIndex: number): boolean;
+export declare function replaceAllFindMatches(editor: LexicalEditor, query: string, replacement: string): number;
+export declare function FindReplacePlugin({ query, currentIndex, onMatchCountChange, editorRef, }: FindReplacePluginProps): null;
+export {};
+//# sourceMappingURL=find-replace-plugin.d.ts.map

package/dist/lib/lexical/find-replace-plugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"find-replace-plugin.d.ts","sourceRoot":"","sources":["../../../src/lib/lexical/find-replace-plugin.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,YAAY,EAKlB,MAAM,OAAO,CAAA;AASd,OAAO,EAML,KAAK,aAAa,EAGnB,MAAM,SAAS,CAAA;AAEhB,MAAM,WAAW,oBAAoB;IACnC,uBAAuB,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,OAAO,CAAA;IACzD,qBAAqB,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,MAAM,CAAA;IACtD,KAAK,EAAE,MAAM,IAAI,CAAA;CAClB;AAED,UAAU,sBAAsB;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb,YAAY,EAAE,MAAM,CAAA;IACpB,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAC5C,SAAS,EAAE,YAAY,CAAC,oBAAoB,CAAC,CAAA;CAC9C;AAaD,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,EAAE,MAAM,CAAA;CACZ;AAED,eAAO,MAAM,kBAAkB,wBAAwB,CAAA;AACvD,eAAO,MAAM,oBAAoB,0BAA0B,CAAA;AAC3D,eAAO,MAAM,uBAAuB,0BAA0B,CAAA;AAM9D,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,CAiBvE;AAwDD,wBAAgB,eAAe,SAgB9B;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,eAG5C;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,UAoBvE;AAED,wBAAgB,oBAAoB,CAClC,MAAM,EAAE,aAAa,EACrB,KAAK,EAAE,MAAM,EACb,YAAY,EAAE,MAAM,UAcrB;AAeD,wBAAgB,wBAAwB,CAAC,MAAM,EAAE,aAAa,cAa7D;AAED,wBAAgB,gBAAgB,CAC9B,MAAM,EAAE,aAAa,EACrB,KAAK,EAAE,MAAM,EACb,WAAW,EAAE,MAAM,EACnB,YAAY,EAAE,MAAM,WAsBrB;AAED,wBAAgB,qBAAqB,CACnC,MAAM,EAAE,aAAa,EACrB,KAAK,EAAE,MAAM,EACb,WAAW,EAAE,MAAM,UAsBpB;AAED,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,YAAY,EACZ,kBAAkB,EAClB,SAAS,GACV,EAAE,sBAAsB,QAqDxB"}

package/dist/lib/lexical/find-replace-plugin.js

@@ -0,0 +1,205 @@
+'use client';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { useCallback, useEffect, useImperativeHandle, useRef, } from 'react';
+import { $createMarkNode, $isMarkNode, $unwrapMarkNode, $wrapSelectionInMarkNode, MarkNode, } from '@lexical/mark';
+import { mergeRegister, registerNestedElementResolver } from '@lexical/utils';
+import { $createRangeSelection, $getRoot, $getSelection, $nodesOfType, $setSelection, } from 'lexical';
+export const FIND_MATCH_MARK_ID = 'moldable-find-match';
+export const FIND_CURRENT_MARK_ID = 'moldable-find-current';
+export const FIND_REPLACE_UPDATE_TAG = 'moldable-find-replace';
+function getNormalizedQuery(query) {
+    return query.trim().toLocaleLowerCase();
+}
+export function getTextMatches(text, query) {
+    const normalizedQuery = getNormalizedQuery(query);
+    if (!normalizedQuery)
+        return [];
+    const normalizedText = text.toLocaleLowerCase();
+    const matches = [];
+    let searchFrom = 0;
+    while (searchFrom <= normalizedText.length - normalizedQuery.length) {
+        const start = normalizedText.indexOf(normalizedQuery, searchFrom);
+        if (start === -1)
+            break;
+        matches.push({ start, end: start + normalizedQuery.length });
+        searchFrom = start + normalizedQuery.length;
+    }
+    return matches;
+}
+function $collectTextEntries() {
+    const entries = [];
+    let text = '';
+    for (const node of $getRoot().getAllTextNodes()) {
+        const value = node.getTextContent();
+        const start = text.length;
+        text += value;
+        entries.push({ node, start, end: text.length });
+    }
+    return { entries, text };
+}
+function getTextPosition(entries, offset, bias) {
+    if (bias === 'next') {
+        for (const entry of entries) {
+            if (offset >= entry.start && offset < entry.end) {
+                return { node: entry.node, offset: offset - entry.start };
+            }
+        }
+    }
+    else {
+        for (const entry of entries) {
+            if (offset > entry.start && offset <= entry.end) {
+                return { node: entry.node, offset: offset - entry.start };
+            }
+        }
+    }
+    const fallback = bias === 'next' ? entries[0] : entries.at(-1);
+    if (!fallback)
+        return null;
+    return {
+        node: fallback.node,
+        offset: bias === 'next' ? 0 : fallback.node.getTextContentSize(),
+    };
+}
+function $createSelectionForMatch(match) {
+    const { entries } = $collectTextEntries();
+    const start = getTextPosition(entries, match.start, 'next');
+    const end = getTextPosition(entries, match.end, 'previous');
+    if (!start || !end)
+        return null;
+    const selection = $createRangeSelection();
+    selection.setTextNodeRange(start.node, start.offset, end.node, end.offset);
+    return selection;
+}
+export function $clearFindMarks() {
+    for (const markNode of $nodesOfType(MarkNode)) {
+        let nextNode = markNode;
+        if (nextNode.hasID(FIND_MATCH_MARK_ID)) {
+            nextNode = nextNode.deleteID(FIND_MATCH_MARK_ID);
+        }
+        if (nextNode.hasID(FIND_CURRENT_MARK_ID)) {
+            nextNode = nextNode.deleteID(FIND_CURRENT_MARK_ID);
+        }
+        if (nextNode.getIDs().length === 0) {
+            $unwrapMarkNode(nextNode);
+        }
+    }
+}
+export function $getFindMatches(query) {
+    const { text } = $collectTextEntries();
+    return getTextMatches(text, query);
+}
+export function $applyFindHighlights(query, currentIndex) {
+    $clearFindMarks();
+    const matches = $getFindMatches(query);
+    for (let index = matches.length - 1; index >= 0; index -= 1) {
+        const selection = $createSelectionForMatch(matches[index]);
+        if (selection) {
+            $wrapSelectionInMarkNode(selection, false, FIND_MATCH_MARK_ID);
+        }
+    }
+    const currentMatch = matches[currentIndex] ?? matches[0];
+    if (currentMatch) {
+        const selection = $createSelectionForMatch(currentMatch);
+        if (selection) {
+            $wrapSelectionInMarkNode(selection, false, FIND_CURRENT_MARK_ID);
+        }
+    }
+    return matches.length;
+}
+export function updateFindHighlights(editor, query, currentIndex) {
+    let matchCount = 0;
+    editor.update(() => {
+        const previousSelection = $getSelection()?.clone() ?? null;
+        matchCount = $applyFindHighlights(query, currentIndex);
+        $setSelection(previousSelection);
+    }, { discrete: true, tag: FIND_REPLACE_UPDATE_TAG });
+    return matchCount;
+}
+function scrollCurrentMatchIntoView(editor) {
+    const editorRoot = editor.getRootElement();
+    const currentMatch = editorRoot?.querySelector('.lexical-mark-overlap');
+    currentMatch?.scrollIntoView({
+        behavior: 'smooth',
+        block: 'center',
+        inline: 'nearest',
+    });
+}
+export function registerFindMarkResolver(editor) {
+    return registerNestedElementResolver(editor, MarkNode, (from) => $createMarkNode(from.getIDs()), (from, to) => {
+        if (!$isMarkNode(to))
+            return;
+        for (const id of from.getIDs()) {
+            to.addID(id);
+        }
+    });
+}
+export function replaceFindMatch(editor, query, replacement, currentIndex) {
+    let replaced = false;
+    editor.update(() => {
+        $clearFindMarks();
+        const matches = $getFindMatches(query);
+        const match = matches[currentIndex] ?? matches[0];
+        if (!match)
+            return;
+        const selection = $createSelectionForMatch(match);
+        if (!selection)
+            return;
+        $setSelection(selection);
+        selection.insertText(replacement);
+        replaced = true;
+    }, { discrete: true });
+    return replaced;
+}
+export function replaceAllFindMatches(editor, query, replacement) {
+    let replacedCount = 0;
+    editor.update(() => {
+        $clearFindMarks();
+        const matches = $getFindMatches(query);
+        for (let index = matches.length - 1; index >= 0; index -= 1) {
+            const selection = $createSelectionForMatch(matches[index]);
+            if (!selection)
+                continue;
+            $setSelection(selection);
+            selection.insertText(replacement);
+            replacedCount += 1;
+        }
+    }, { discrete: true });
+    return replacedCount;
+}
+export function FindReplacePlugin({ query, currentIndex, onMatchCountChange, editorRef, }) {
+    const [editor] = useLexicalComposerContext();
+    const onMatchCountChangeRef = useRef(onMatchCountChange);
+    useEffect(() => {
+        onMatchCountChangeRef.current = onMatchCountChange;
+    }, [onMatchCountChange]);
+    useImperativeHandle(editorRef, () => ({
+        replaceCurrentFindMatch: (replacement) => replaceFindMatch(editor, query, replacement, currentIndex),
+        replaceAllFindMatches: (replacement) => replaceAllFindMatches(editor, query, replacement),
+        focus: () => editor.focus(),
+    }), [currentIndex, editor, query]);
+    const applyHighlights = useCallback(() => {
+        const matchCount = updateFindHighlights(editor, query, currentIndex);
+        onMatchCountChangeRef.current?.(matchCount);
+        if (getNormalizedQuery(query) && matchCount > 0) {
+            window.requestAnimationFrame(() => scrollCurrentMatchIntoView(editor));
+        }
+    }, [currentIndex, editor, query]);
+    useEffect(() => {
+        return registerFindMarkResolver(editor);
+    }, [editor]);
+    useEffect(() => {
+        applyHighlights();
+        const unregister = mergeRegister(editor.registerUpdateListener(({ tags }) => {
+            if (tags.has(FIND_REPLACE_UPDATE_TAG))
+                return;
+            applyHighlights();
+        }), () => {
+            editor.update(() => $clearFindMarks(), {
+                discrete: true,
+                tag: FIND_REPLACE_UPDATE_TAG,
+            });
+        });
+        return unregister;
+    }, [applyHighlights, editor]);
+    return null;
+}

package/dist/lib/lexical/headless-editor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"headless-editor.d.ts","sourceRoot":"","sources":["../../../src/lib/lexical/headless-editor.ts"],"names":[],"mappings":"AAQA;;;GAGG;AACH,wBAAgB,4BAA4B,oCAkB3C"}
+{"version":3,"file":"headless-editor.d.ts","sourceRoot":"","sources":["../../../src/lib/lexical/headless-editor.ts"],"names":[],"mappings":"AASA;;;GAGG;AACH,wBAAgB,4BAA4B,oCAmB3C"}

package/dist/lib/lexical/headless-editor.js

@@ -4,6 +4,7 @@ import { HorizontalRuleNode } from '@lexical/extension';
 import { createHeadlessEditor } from '@lexical/headless';
 import { AutoLinkNode, LinkNode } from '@lexical/link';
 import { ListItemNode, ListNode } from '@lexical/list';
+import { MarkNode } from '@lexical/mark';
 import { HeadingNode, QuoteNode } from '@lexical/rich-text';
 /**
  * Creates a headless Lexical editor for server-side operations.
@@ -20,6 +21,7 @@ export function createMoldableHeadlessEditor() {
             CodeHighlightNode,
             AutoLinkNode,
             LinkNode,
+            MarkNode,
             HorizontalRuleNode,
         ],
         theme: editorTheme,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moldable-ai/editor",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "Rich text markdown editor for Moldable applications",
   "author": "Desiderata LLC",
   "license": "SEE LICENSE IN LICENSE",
@@ -32,18 +32,28 @@
     "src/styles",
     "LICENSE"
   ],
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "lint": "eslint . --ext .ts,.tsx --max-warnings 0",
+    "format": "prettier --write . --ignore-path ../../.prettierignore",
+    "check-types": "tsc --noEmit"
+  },
   "dependencies": {
     "@lexical/clipboard": "^0.39.0",
     "@lexical/code": "^0.39.0",
     "@lexical/extension": "^0.39.0",
+    "@lexical/headless": "^0.39.0",
     "@lexical/html": "^0.39.0",
     "@lexical/link": "^0.39.0",
     "@lexical/list": "^0.39.0",
+    "@lexical/mark": "^0.39.0",
     "@lexical/markdown": "^0.39.0",
     "@lexical/react": "^0.39.0",
     "@lexical/rich-text": "^0.39.0",
     "@lexical/selection": "^0.39.0",
-    "@lexical/headless": "^0.39.0",
     "@lexical/utils": "^0.39.0",
     "lexical": "^0.39.0",
     "lucide-react": "^0.473.0",
@@ -52,30 +62,21 @@
     "remark-gfm": "^4.0.1"
   },
   "devDependencies": {
+    "@moldable-ai/eslint-config": "workspace:*",
+    "@moldable-ai/prettier-config": "workspace:*",
+    "@moldable-ai/typescript-config": "workspace:*",
+    "@moldable-ai/ui": "workspace:^",
     "@types/jsdom": "^27.0.0",
     "@types/node": "^24.0.3",
     "@types/react": "^19.1.6",
     "@types/react-dom": "^19.1.6",
     "jsdom": "^27.4.0",
     "typescript": "^5.8.3",
-    "vitest": "^4.0.16",
-    "@moldable-ai/eslint-config": "0.1.4",
-    "@moldable-ai/typescript-config": "0.1.3",
-    "@moldable-ai/prettier-config": "0.1.3",
-    "@moldable-ai/ui": "^0.2.7"
+    "vitest": "^4.0.16"
   },
   "peerDependencies": {
     "@moldable-ai/ui": ">=0.2.7",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
-  },
-  "scripts": {
-    "build": "tsc",
-    "dev": "tsc --watch",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "lint": "eslint . --ext .ts,.tsx --max-warnings 0",
-    "format": "prettier --write . --ignore-path ../../.prettierignore",
-    "check-types": "tsc --noEmit"
   }
-}
+}

package/src/styles/index.css

@@ -80,6 +80,19 @@
   word-break: break-word;
 }
 
+/* Find/replace highlights */
+.lexical-mark {
+  border-radius: 0.2em;
+  background-color: color-mix(in oklch, var(--primary) 24%, transparent);
+  color: inherit;
+  padding: 0 0.05em;
+}
+
+.lexical-mark-overlap {
+  background-color: color-mix(in oklch, var(--primary) 48%, transparent);
+  box-shadow: 0 0 0 1px color-mix(in oklch, var(--primary) 45%, transparent);
+}
+
 /* Mention styles */
 .mention {
   color: hsl(var(--primary));

package/dist/lib/lexical/translation.test.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=translation.test.d.ts.map

package/dist/lib/lexical/translation.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"translation.test.d.ts","sourceRoot":"","sources":["../../../src/lib/lexical/translation.test.ts"],"names":[],"mappings":""}

package/dist/lib/lexical/translation.test.js

@@ -1,329 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { createMoldableHeadlessEditor } from './headless-editor';
-import { $extractTranslatableSegments, $applyTranslations, $getTextSegmentsForTranslation, translateEditorState, } from './translation';
-import { $convertFromMarkdownString, $convertToMarkdownString, markdownTransformers } from './markdown-transformers';
-describe('Translation Utilities', () => {
-    describe('$extractTranslatableSegments', () => {
-        it('extracts text from a simple paragraph', async () => {
-            const editor = createMoldableHeadlessEditor();
-            await new Promise((resolve) => {
-                editor.update(() => {
-                    $convertFromMarkdownString({ markdown: 'Hello world' });
-                    resolve();
-                });
-            });
-            const segments = await new Promise((resolve) => {
-                editor.getEditorState().read(() => {
-                    resolve($extractTranslatableSegments());
-                });
-            });
-            expect(segments).toHaveLength(1);
-            expect(segments[0].text).toBe('Hello world');
-        });
-        it('extracts text from multiple paragraphs', async () => {
-            const editor = createMoldableHeadlessEditor();
-            await new Promise((resolve) => {
-                editor.update(() => {
-                    $convertFromMarkdownString({ markdown: 'First paragraph\n\nSecond paragraph' });
-                    resolve();
-                });
-            });
-            const segments = await new Promise((resolve) => {
-                editor.getEditorState().read(() => {
-                    resolve($extractTranslatableSegments());
-                });
-            });
-            expect(segments).toHaveLength(2);
-            expect(segments[0].text).toBe('First paragraph');
-            expect(segments[1].text).toBe('Second paragraph');
-        });
-        it('extracts text from headings', async () => {
-            const editor = createMoldableHeadlessEditor();
-            await new Promise((resolve) => {
-                editor.update(() => {
-                    $convertFromMarkdownString({ markdown: '# Title\n\nContent' });
-                    resolve();
-                });
-            });
-            const segments = await new Promise((resolve) => {
-                editor.getEditorState().read(() => {
-                    resolve($extractTranslatableSegments());
-                });
-            });
-            expect(segments).toHaveLength(2);
-            expect(segments[0].text).toBe('Title');
-            expect(segments[1].text).toBe('Content');
-        });
-        it('extracts text from list items', async () => {
-            const editor = createMoldableHeadlessEditor();
-            await new Promise((resolve) => {
-                editor.update(() => {
-                    $convertFromMarkdownString({ markdown: '- Item 1\n- Item 2\n- Item 3' });
-                    resolve();
-                });
-            });
-            const segments = await new Promise((resolve) => {
-                editor.getEditorState().read(() => {
-                    resolve($extractTranslatableSegments());
-                });
-            });
-            expect(segments).toHaveLength(3);
-            expect(segments[0].text).toBe('Item 1');
-            expect(segments[1].text).toBe('Item 2');
-            expect(segments[2].text).toBe('Item 3');
-        });
-        it('handles bold and italic text as separate segments', async () => {
-            const editor = createMoldableHeadlessEditor();
-            await new Promise((resolve) => {
-                editor.update(() => {
-                    $convertFromMarkdownString({ markdown: 'This is **bold** and *italic* text' });
-                    resolve();
-                });
-            });
-            const segments = await new Promise((resolve) => {
-                editor.getEditorState().read(() => {
-                    resolve($extractTranslatableSegments());
-                });
-            });
-            // Bold and italic are separate text nodes
-            expect(segments.length).toBeGreaterThanOrEqual(3);
-            const allText = segments.map(s => s.text).join('');
-            expect(allText).toContain('bold');
-            expect(allText).toContain('italic');
-        });
-        it('extracts text from blockquotes', async () => {
-            const editor = createMoldableHeadlessEditor();
-            await new Promise((resolve) => {
-                editor.update(() => {
-                    $convertFromMarkdownString({ markdown: '> This is a quote' });
-                    resolve();
-                });
-            });
-            const segments = await new Promise((resolve) => {
-                editor.getEditorState().read(() => {
-                    resolve($extractTranslatableSegments());
-                });
-            });
-            expect(segments).toHaveLength(1);
-            expect(segments[0].text).toBe('This is a quote');
-        });
-    });
-    describe('$applyTranslations', () => {
-        it('applies translations to text nodes', async () => {
-            const editor = createMoldableHeadlessEditor();
-            // Set up initial content
-            await new Promise((resolve) => {
-                editor.update(() => {
-                    $convertFromMarkdownString({ markdown: 'Hello world' });
-                    resolve();
-                });
-            });
-            // Get segments
-            const segments = await new Promise((resolve) => {
-                editor.getEditorState().read(() => {
-                    resolve($extractTranslatableSegments());
-                });
-            });
-            // Apply translations
-            const translationMap = new Map();
-            translationMap.set(segments[0].nodeKey, 'Hej verden');
-            await new Promise((resolve) => {
-                editor.update(() => {
-                    $applyTranslations(translationMap);
-                    resolve();
-                });
-            });
-            // Verify translation was applied
-            const result = await new Promise((resolve) => {
-                editor.getEditorState().read(() => {
-                    resolve($convertToMarkdownString({ transformers: markdownTransformers }));
-                });
-            });
-            expect(result).toBe('Hej verden');
-        });
-        it('preserves structure when applying translations', async () => {
-            const editor = createMoldableHeadlessEditor();
-            await new Promise((resolve) => {
-                editor.update(() => {
-                    $convertFromMarkdownString({ markdown: '# Title\n\n- Item 1\n- Item 2' });
-                    resolve();
-                });
-            });
-            const segments = await new Promise((resolve) => {
-                editor.getEditorState().read(() => {
-                    resolve($extractTranslatableSegments());
-                });
-            });
-            // Translate each segment
-            const translationMap = new Map();
-            segments.forEach((seg) => {
-                if (seg.text === 'Title')
-                    translationMap.set(seg.nodeKey, 'Titel');
-                if (seg.text === 'Item 1')
-                    translationMap.set(seg.nodeKey, 'Element 1');
-                if (seg.text === 'Item 2')
-                    translationMap.set(seg.nodeKey, 'Element 2');
-            });
-            await new Promise((resolve) => {
-                editor.update(() => {
-                    $applyTranslations(translationMap);
-                    resolve();
-                });
-            });
-            const result = await new Promise((resolve) => {
-                editor.getEditorState().read(() => {
-                    resolve($convertToMarkdownString({ transformers: markdownTransformers }));
-                });
-            });
-            expect(result).toContain('# Titel');
-            expect(result).toContain('- Element 1');
-            expect(result).toContain('- Element 2');
-        });
-    });
-    describe('$getTextSegmentsForTranslation', () => {
-        it('returns parallel arrays of texts and keys', async () => {
-            const editor = createMoldableHeadlessEditor();
-            await new Promise((resolve) => {
-                editor.update(() => {
-                    $convertFromMarkdownString({ markdown: 'Hello\n\nWorld' });
-                    resolve();
-                });
-            });
-            const result = await new Promise((resolve) => {
-                editor.getEditorState().read(() => {
-                    resolve($getTextSegmentsForTranslation());
-                });
-            });
-            expect(result.texts).toHaveLength(2);
-            expect(result.nodeKeys).toHaveLength(2);
-            expect(result.texts[0]).toBe('Hello');
-            expect(result.texts[1]).toBe('World');
-        });
-    });
-    describe('translateEditorState', () => {
-        it('translates content and returns markdown', async () => {
-            const editor = createMoldableHeadlessEditor();
-            await new Promise((resolve) => {
-                editor.update(() => {
-                    $convertFromMarkdownString({ markdown: '# Hello\n\nWorld' });
-                    resolve();
-                });
-            });
-            // Mock translate function
-            const translateFn = async (texts) => {
-                return texts.map((t) => {
-                    if (t === 'Hello')
-                        return 'Bonjour';
-                    if (t === 'World')
-                        return 'Monde';
-                    return t;
-                });
-            };
-            const result = await translateEditorState(editor, translateFn);
-            expect(result).toContain('# Bonjour');
-            expect(result).toContain('Monde');
-        });
-        it('preserves formatting during translation', async () => {
-            const editor = createMoldableHeadlessEditor();
-            await new Promise((resolve) => {
-                editor.update(() => {
-                    $convertFromMarkdownString({
-                        markdown: '**Bold text** and *italic text*'
-                    });
-                    resolve();
-                });
-            });
-            const translateFn = async (texts) => {
-                return texts.map((t) => `[${t}]`); // Just wrap for testing
-            };
-            const result = await translateEditorState(editor, translateFn);
-            // Should preserve bold and italic markers
-            expect(result).toContain('**');
-            expect(result).toContain('*');
-        });
-        it('handles complex medical note structure', async () => {
-            const editor = createMoldableHeadlessEditor();
-            const medicalNote = `# Patient Notes
-
-## Chief Complaint
-Patient presents with chest pain.
-
-## Assessment
-- Stable condition
-- No immediate concerns
-
-> Doctor's note: Follow up in 2 weeks`;
-            await new Promise((resolve) => {
-                editor.update(() => {
-                    $convertFromMarkdownString({ markdown: medicalNote });
-                    resolve();
-                });
-            });
-            // Simple translation that uppercases everything
-            const translateFn = async (texts) => {
-                return texts.map((t) => t.toUpperCase());
-            };
-            const result = await translateEditorState(editor, translateFn);
-            // Should preserve structure
-            expect(result).toContain('# PATIENT NOTES');
-            expect(result).toContain('## CHIEF COMPLAINT');
-            expect(result).toContain('- STABLE CONDITION');
-            expect(result).toContain('>');
-        });
-        it('handles empty content', async () => {
-            const editor = createMoldableHeadlessEditor();
-            await new Promise((resolve) => {
-                editor.update(() => {
-                    $convertFromMarkdownString({ markdown: '' });
-                    resolve();
-                });
-            });
-            const translateFn = async (texts) => texts;
-            const result = await translateEditorState(editor, translateFn);
-            expect(result).toBe('');
-        });
-    });
-    describe('round-trip translation', () => {
-        const testCases = [
-            { name: 'simple paragraph', markdown: 'Hello world' },
-            { name: 'heading', markdown: '# Title' },
-            { name: 'multiple headings', markdown: '# H1\n\n## H2\n\n### H3' },
-            { name: 'bullet list', markdown: '- Item 1\n- Item 2\n- Item 3' },
-            { name: 'numbered list', markdown: '1. First\n2. Second\n3. Third' },
-            { name: 'blockquote', markdown: '> This is a quote' },
-            { name: 'bold text', markdown: '**bold**' },
-            { name: 'italic text', markdown: '*italic*' },
-            { name: 'mixed formatting', markdown: 'Normal **bold** and *italic*' },
-            { name: 'code inline', markdown: 'Use `code` here' },
-            { name: 'horizontal rule', markdown: 'Before\n\n***\n\nAfter' },
-        ];
-        testCases.forEach(({ name, markdown }) => {
-            it(`preserves structure for ${name}`, async () => {
-                const editor = createMoldableHeadlessEditor();
-                await new Promise((resolve) => {
-                    editor.update(() => {
-                        $convertFromMarkdownString({ markdown });
-                        resolve();
-                    });
-                });
-                // Identity translation (no change)
-                const translateFn = async (texts) => texts;
-                const result = await translateEditorState(editor, translateFn);
-                // Re-import and re-export to normalize
-                const editor2 = createMoldableHeadlessEditor();
-                await new Promise((resolve) => {
-                    editor2.update(() => {
-                        $convertFromMarkdownString({ markdown });
-                        resolve();
-                    });
-                });
-                const expected = await new Promise((resolve) => {
-                    editor2.getEditorState().read(() => {
-                        resolve($convertToMarkdownString({ transformers: markdownTransformers }));
-                    });
-                });
-                expect(result).toBe(expected);
-            });
-        });
-    });
-});