Skip to main content

FontSizeExtension

Summary

Add a font size 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 { FontSizeExtension } from 'remirror/extensions';

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

Examples

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

import { htmlToProsemirrorNode } from 'remirror';
import { FontSizeExtension } from 'remirror/extensions';
import {
Remirror,
ThemeProvider,
useCommands,
useHelpers,
useRemirror,
useRemirrorContext,
} from '@remirror/react';

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

const FontSizeButtons = () => {
const commands = useCommands();
const helpers = useHelpers();
const { view } = useRemirrorContext({ autoUpdate: true });

return (
<>
<button
onMouseDown={(event) => event.preventDefault()}
onClick={() => commands.setFontSize(8)}
>
Small
</button>
<button
onMouseDown={(event) => event.preventDefault()}
onClick={() => commands.setFontSize(24)}
>
Large
</button>

<button
onMouseDown={(event) => event.preventDefault()}
onClick={() => commands.decreaseFontSize()}
>
-
</button>

<button onMouseDown={(event) => event.preventDefault()}>
current fontSize: {helpers.getFontSizeForSelection(view.state.selection)}
</button>

<button
onMouseDown={(event) => event.preventDefault()}
onClick={() => commands.increaseFontSize()}
>
+
</button>
</>
);
};

const Basic = (): JSX.Element => {
const { manager, state, onChange } = useRemirror({
extensions: extensions,
content: '<p>Some text to resize</p>',
stringHandler: htmlToProsemirrorNode,
});

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

export default Basic;

JSON Content

Initial content can be provided as JSON instead of HTML. Here is how you would provide the size mark.

import { FontSizeExtension } from 'remirror/extensions';
import { useRemirror } from '@remirror/react';

const { manager, state } = useRemirror({
extensions: () => [new FontSizeExtension()],

content: {
type: 'doc',
content: [
{
type: 'paragraph',
content: [
{ type: 'text', text: 'Hello ', marks: [{ type: 'fontSize', attrs: { size: '20pt' } }] },
],
},
],
},
});

Make sure you include the size unit in the mark because it can throw an error without a unit.

API