How to implement find and replace functions?

[newproplus]

For example, I want to highlight all the "AAA" in the editor, or replace all the "AAA" in the editor with "BBB".

Is there any available code or method?

thanks

[2wheeh]

I would use COMMAND if that function is fired on event like button click.

here is a simple implementation.

2024-04-22.6.36.13.mov

import type {LexicalCommand, LexicalEditor} from 'lexical';

import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
import {
  $nodesOfType,
  COMMAND_PRIORITY_EDITOR,
  createCommand,
  TextNode,
} from 'lexical';
import React, {useEffect} from 'react';

interface Payload {
  from: string;
  to: string;
}

const FIND_REPLACE_COMMAND: LexicalCommand<Payload> = createCommand(
  'FIND_REPLACE_COMMAND',
);

const listener = ({from, to}: Payload, editor: LexicalEditor) => {
  editor.update(() => {
    const textNodes = $nodesOfType(TextNode);

    for (const node of textNodes) {
      const text = node.getTextContent();

      node.setTextContent(text.replaceAll(from, to));
    }
  });

  return true;
};

export default function FindReplacePlugin() {
  const [editor] = useLexicalComposerContext();

  useEffect(() => {
    return editor.registerCommand(
      FIND_REPLACE_COMMAND,
      listener,
      COMMAND_PRIORITY_EDITOR,
    );
  }, [editor]);

  return (
    <button
      onClick={() => {
        editor.dispatchCommand(FIND_REPLACE_COMMAND, {from: 'aaa', to: 'bbb'});
      }}>
      aaa to bbb
    </button>
  );
}

I think you could tweak from here or find better approach.

[2wheeh]

If you want to replace browser's default finder with lexical's, KeywordsPlugin implementation from the playground or useLexicalTextEntity could give you some idea.

They use nodeTransfrom for TextNode essentially.
It splits and replaces TextNode with targetNode (which could be FindResultNode ?) while iterating the matches from the given regex.

[tipycalFlow]

is there a command to replace a specific instance of a match instead of all?

[newproplus]

@2wheeh Thank you

[rolandsaven]

$nodesOfType is deprecated, what other built-in function could work instead?