Skip to main content

UnderlineExtension

Summary

The extension for adding underline marks to the editor.

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 { UnderlineExtension } from 'remirror/extensions';

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

Examples

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

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

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

const UnderlineButton = () => {
const commands = useCommands();
const active = useActive(true);
return (
<button
onMouseDown={(event) => event.preventDefault()}
onClick={() => commands.toggleUnderline()}
className={cx(active.underline() && 'active')}
>
Underline
</button>
);
};

const Basic = (): JSX.Element => {
const { manager, state, onChange } = useRemirror({
extensions: extensions,
content: '<p>Text in <u>underline</u></p>',
stringHandler: htmlToProsemirrorNode,
});

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

export default Basic;

API