FontFamilyExtension
Summary
Add a font family to the selected text (or text within a specified range).
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 { FontFamilyExtension } from 'remirror/extensions';
The extension is provided by the @remirror/extension-font-family
package.
Examples
Source code
import 'remirror/styles/all.css';
import { htmlToProsemirrorNode } from 'remirror';
import { FontFamilyExtension } from 'remirror/extensions';
import { Remirror, ThemeProvider, useCommands, useRemirror } from '@remirror/react';
const extensions = () => [new FontFamilyExtension()];
const FontFamilyButtons = () => {
const commands = useCommands();
return (
<>
<button
onMouseDown={(event) => event.preventDefault()}
onClick={() => commands.setFontFamily('serif')}
>
Serif
</button>
<button
onMouseDown={(event) => event.preventDefault()}
onClick={() => commands.setFontFamily('sans-serif')}
>
Sans serif
</button>
</>
);
};
const Basic = (): JSX.Element => {
const { manager, state, onChange } = useRemirror({
extensions: extensions,
content:
'<p>Some text in <span style=" font-family:serif" data-font-family="serif">serif</span></p>',
stringHandler: htmlToProsemirrorNode,
});
return (
<ThemeProvider>
<Remirror
manager={manager}
autoFocus
onChange={onChange}
initialContent={state}
autoRender='end'
>
<FontFamilyButtons />
</Remirror>
</ThemeProvider>
);
};
export default Basic;