ItalicExtension
Summary
The extension for adding italic 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 { ItalicExtension } from 'remirror/extensions';
The extension is provided by the @remirror/extension-italic
package.
Examples
Source code
import 'remirror/styles/all.css';
import './styles.css';
import { cx, htmlToProsemirrorNode } from 'remirror';
import { ItalicExtension } from 'remirror/extensions';
import { Remirror, ThemeProvider, useActive, useCommands, useRemirror } from '@remirror/react';
const extensions = () => [new ItalicExtension()];
const ItalicButton = () => {
const commands = useCommands();
const active = useActive(true);
return (
<button
onMouseDown={(event) => event.preventDefault()}
onClick={() => commands.toggleItalic()}
className={cx(active.italic() && 'active')}
>
Italic
</button>
);
};
const Basic = (): JSX.Element => {
const { manager, state, onChange } = useRemirror({
extensions: extensions,
content: '<p>Text in <i>italic</i></p>',
stringHandler: htmlToProsemirrorNode,
});
return (
<ThemeProvider>
<Remirror
manager={manager}
autoFocus
onChange={onChange}
initialContent={state}
autoRender='end'
>
<ItalicButton />
</Remirror>
</ThemeProvider>
);
};
export default Basic;