Skip to main content

Find & Replace

note

"Replace" feature is not yet supported

Installation#

npm install @udecode/plate
# or
npm install @udecode/plate-find-replace
npm install @udecode/plate-ui-find-replace

Usage#

import React, { useMemo, useState } from 'react';
import { Search } from '@styled-icons/material/Search';
import {
  createFindReplacePlugin,
  Plate,
  SearchHighlightToolbar,
} from '@udecode/plate';
import { basicNodesPlugins } from './basic-nodes/basicNodesPlugins';
import { editableProps } from './common/editableProps';
import { plateUI } from './common/plateUI';
import { findReplaceValue } from './find-replace/findReplaceValue';
import { createMyPlugins, MyValue } from './typescript/plateTypes';

export default () => {
  const [search, setSearch] = useState('');

  const plugins = useMemo(
    () =>
      createMyPlugins(
        [
          ...basicNodesPlugins,
          createFindReplacePlugin({ options: { search } }),
        ],
        {
          components: plateUI,
        }
      ),
    [search]
  );

  return (
    <>
      <SearchHighlightToolbar icon={Search} setSearch={setSearch} />

      <Plate<MyValue>
        editableProps={editableProps}
        plugins={plugins}
        initialValue={findReplaceValue}
      />
    </>

Options#

export interface FindReplacePlugin {
/**
* Searching text to highlight
*/
search?: string;
}

Source Code#

Edit this page