Skip to main content

FindExtension

Summary​

This extension add find and replace functionality to your editor.

Usage​

Installation​

You can use the imports in the following way:

import { FindExtension } from '@remirror/extensions';

You will likely want to import the FindReplaceComponent from the optional @remirror/react-ui package.

Examples​

Source code
import 'remirror/styles/all.css';

import React from 'react';
import { wysiwygPreset } from 'remirror/extensions';
import { Remirror, ThemeProvider, useRemirror } from '@remirror/react';
import { FindButton, Toolbar } from '@remirror/react-ui';

const Basic: React.FC = () => {
  const { manager, state, onChange } = useRemirror({
    extensions: wysiwygPreset,
    content: '<p>Using the <code>&lt;FindButton /&gt;</code> from <code>@remirror/react-ui</code>.',
    stringHandler: 'html',
  });

  return (
    <ThemeProvider>
      <Remirror
        manager={manager}
        autoFocus
        onChange={onChange}
        initialContent={state}
        autoRender='end'
      >
        <Toolbar>
          <FindButton />
        </Toolbar>
      </Remirror>
    </ThemeProvider>
  );
};

export default Basic;
Source code
import 'remirror/styles/all.css';

import React from 'react';
import { wysiwygPreset } from 'remirror/extensions';
import { EditorComponent, Remirror, ThemeProvider, useRemirror } from '@remirror/react';
import { FindReplaceComponent } from '@remirror/react-ui';

const WithFindReplaceComponent: React.FC = () => {
  const { manager, state } = useRemirror({
    extensions: wysiwygPreset,
    content: {
      type: 'doc',
      attrs: { version: 5 },
      content: [
        {
          type: 'paragraph',
          content: [
            { type: 'text', text: 'You can also directly use the ' },
            { type: 'text', marks: [{ type: 'code' }], text: '<FindReplaceComponent/>' },
            { type: 'text', text: ' from ' },
            { type: 'text', marks: [{ type: 'code' }], text: '@remirror/react' },
          ],
        },
        { type: 'paragraph' },
      ],
    },
    selection: 'end',
  });

  return (
    <ThemeProvider>
      <Remirror manager={manager} initialContent={state} autoFocus placeholder='Enter your text'>
        <FindReplaceComponent />
        <EditorComponent />
      </Remirror>
    </ThemeProvider>
  );
};

export default WithFindReplaceComponent;

API​