Skip to main content

CountExtension

Summary

Adds ability to count characters or words in your editor, and optionally highlight to a user when they have exceeded a specified limit.

Usage

Installation

This extension is not included in the main remirror package.

import { CountExtension } from '@remirror/extension-count';

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

Examples

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

import { FC } from 'react';
import { CountExtension } from '@remirror/extension-count';
import { Remirror, ThemeProvider, useHelpers, useRemirror } from '@remirror/react';

const Counter: FC = () => {
const { getCharacterCount } = useHelpers(true);
const count = getCharacterCount();

return (
<p>
{count} {count === 1 ? 'character' : 'characters'}
</p>
);
};

const Basic: FC = () => {
const { manager } = useRemirror({ extensions: () => [new CountExtension()] });

return (
<ThemeProvider>
<Remirror manager={manager} autoRender='start'>
<Counter />
</Remirror>
</ThemeProvider>
);
};

export default Basic;
Source code
import 'remirror/styles/all.css';
import 'react-circular-progressbar/dist/styles.css';

import { FC } from 'react';
import { CircularProgressbar } from 'react-circular-progressbar';
import { CountExtension } from '@remirror/extension-count';
import { Remirror, ThemeProvider, useHelpers, useRemirror } from '@remirror/react';

const TWEET_MAX_CHARS = 280;
const INITIAL_CONTENT = `<p>In my younger and more vulnerable years my father gave me some advice that I’ve been turning over in my mind ever since.</p>
<p>“Whenever you feel like criticizing any one,” he told me, “just remember that all the people in this world haven’t had the advantages that you’ve had.”</p>
<p></p>`;

const Counter: FC<{ max: number }> = ({ max }) => {
const { getCharacterCount, isCountValid } = useHelpers(true);
const count = getCharacterCount();
const remaining = max - count;

if (!isCountValid()) {
return <p style={{ color: 'red' }}>{remaining}</p>;
}

return (
<div style={{ width: '2rem', margin: '0.5rem 0' }}>
<CircularProgressbar
value={(count / max) * 100}
text={`${remaining}`}
styles={{
text: {
fontSize: '2.5rem',
},
}}
/>
</div>
);
};

const CharacterLimit: FC = () => {
const { manager, state } = useRemirror({
extensions: () => [new CountExtension({ maximum: TWEET_MAX_CHARS })],
content: INITIAL_CONTENT,
stringHandler: 'html',
selection: 'end',
});

return (
<ThemeProvider>
<p>
A Twitter inspired character counter showing the{' '}
<strong>number of characters remaining</strong> (using{' '}
<code>react-circular-progressbar</code>).
</p>
<p>
Note how when we go over the character limit ({TWEET_MAX_CHARS} characters), the text is
highlighted.
</p>
<Remirror manager={manager} initialContent={state} autoRender='start' autoFocus>
<Counter max={TWEET_MAX_CHARS} />
</Remirror>
</ThemeProvider>
);
};

export default CharacterLimit;
Source code
import 'remirror/styles/all.css';

import { FC } from 'react';
import { CountExtension } from '@remirror/extension-count';
import { Remirror, ThemeProvider, useHelpers, useRemirror } from '@remirror/react';

const Counter: FC = () => {
const { getWordCount } = useHelpers(true);
const count = getWordCount();

return (
<p>
{count} {count === 1 ? 'word' : 'words'}
</p>
);
};

const WordCount: FC = () => {
const { manager } = useRemirror({
extensions: () => [new CountExtension()],
});

return (
<ThemeProvider>
<Remirror manager={manager} autoRender='start'>
<Counter />
</Remirror>
</ThemeProvider>
);
};

export default WordCount;
Source code
import 'remirror/styles/all.css';

import { FC } from 'react';
import { CountExtension, CountStrategy } from '@remirror/extension-count';
import { Remirror, ThemeProvider, useHelpers, useRemirror } from '@remirror/react';

const MAX_WORDS = 10;
const INITIAL_CONTENT = '<p>One Two Three Four Five Six Seven Eight Nine Ten Eleven</p>';

const Counter: FC<{ max: number }> = ({ max }) => {
const { getWordCount, isCountValid } = useHelpers(true);
const count = getWordCount();

return (
<p style={{ color: isCountValid() ? 'inherit' : 'red' }}>
{count} / {max} words
</p>
);
};

const WordLimit: FC = () => {
const { manager, state } = useRemirror({
extensions: () => [
new CountExtension({ maximumStrategy: CountStrategy.WORDS, maximum: MAX_WORDS }),
],
content: INITIAL_CONTENT,
stringHandler: 'html',
});

return (
<ThemeProvider>
<p>An editor limited to 10 words.</p>
<p>Note how when we go over the word limit, the text is highlighted.</p>
<Remirror manager={manager} initialContent={state} autoRender='start'>
<Counter max={MAX_WORDS} />
</Remirror>
</ThemeProvider>
);
};

export default WordLimit;

API