Extensions
Character Count
Count characters and words, and optionally limit them.
The CharacterCount extension counts the characters and words in the editor and can enforce a character limit. It is headless: it adds nothing to the toolbar. Use the useCharacterCount hook to build your own UI, or drop in the ready-made CharacterCountUI component.
Import
import { CharacterCount, useCharacterCount, CharacterCountUI } from 'ritext/extension/charactercount';Usage
const extensions = [
CharacterCount.configure({ limit: 280 }),
];
<Editor extensions={extensions}>
<Toolbar />
<Content />
<CharacterCountUI />
</Editor>Configuration
CharacterCount.configure({
limit: 280,
mode: 'textSize',
autoTrim: true,
textCounter: (text) => [...new Intl.Segmenter().segment(text)].length,
wordCounter: (text) => text.split(/\s+/).filter((word) => word !== '').length,
})Options
Prop
Type
useCharacterCount
Returns the live counts. Use it inside <Editor> to build your own counter.
const MyCounter = () => {
const { charactersCount, wordsCount, percentage, limit } = useCharacterCount();
return <span>{charactersCount} / {limit} ({percentage}%)</span>;
};Prop
Type
CharacterCountUI
A ready-made counter with a progress ring. Place it anywhere inside <Editor>. The ring only shows when a limit is set, and turns to the warning color once the limit is reached.
<CharacterCountUI
color="#2563eb"
warningColor="#dc2626"
trackColor="#e5e7eb"
size={24}
showWords={false}
className="ritext:mt-2"
/>Replace the text with your own content:
<CharacterCountUI
content={({ charactersCount, limit }) => <span>{(limit ?? 0) - charactersCount} left</span>}
/>Prop
Type