Skip to main content

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;