DecorationExtension

Summary

DecorationExtension is a builtin extension that simplifies the process of adding decorations to the editor. It provides a persistent selection feature that can be used to preserve the marker for the selection when the editor loses focus.

Examples

Source code

import 'remirror/styles/all.css';

import React from 'react';
import { Remirror, ThemeProvider, useRemirror } from '@remirror/react';

function Editor({ initialText }: { initialText: string }): JSX.Element {
  const { manager } = useRemirror({ builtin: { persistentSelectionClass: 'selection' } });
  return (
    <ThemeProvider>
      <Remirror
        manager={manager}
        initialContent={{
          type: 'doc',
          content: [{ type: 'paragraph', content: [{ type: 'text', text: initialText }] }],
        }}
      />
    </ThemeProvider>
  );
}

function PersistentSelection(): JSX.Element {
  return (
    <>
      <p>
        Try to selected some text in one editor and then select some text in another editor, you
        will find the selection is persisted in the previous editor!
      </p>
      <Editor initialText={'Hello world'} />
      <Editor initialText={'Hello world'} />
    </>
  );
}

export default PersistentSelection;