Skip to main content

TextColorExtension

Summary

Wraps text with a styled span using the color css property.

Usage

Installation

This extension is installed for you when you install the main remirror package.

You can use the imports in the following way:

import { TextColorExtension } from 'remirror/extensions';

The extension is provided by the @remirror/extension-textcolor package.

Examples

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

import { cx, htmlToProsemirrorNode } from 'remirror';
import { TextColorExtension } from 'remirror/extensions';
import { Remirror, ThemeProvider, useActive, useCommands, useRemirror } from '@remirror/react';

const extensions = () => [new TextColorExtension()];

const TextColorButton = () => {
const commands = useCommands();
const active = useActive();
return (
<>
<button
onMouseDown={(event) => event.preventDefault()}
onClick={() => commands.setTextColor('red')}
className={cx(active.textColor({ color: 'red' }) && 'active')}
>
Red
</button>
<button
onMouseDown={(event) => event.preventDefault()}
onClick={() => commands.setTextColor('green')}
className={cx(active.textColor({ color: 'green' }) && 'active')}
>
Green
</button>
<button
onMouseDown={(event) => event.preventDefault()}
onClick={() => commands.removeTextColor()}
>
Remove
</button>
</>
);
};

const Basic = (): JSX.Element => {
const { manager, state, onChange } = useRemirror({
extensions: extensions,
content: `<p>Text in <span data-text-color-mark="red">red</span></p>`,
stringHandler: htmlToProsemirrorNode,
});

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

export default Basic;

API