CharacterCount extension

The CharacterCount extension limits the number of allowed characters to a specific length and is able to return the number of characters and words. That’s it, that’s all.

Install

npm install @tiptap/extensions

Usage

import { Editor } from '@tiptap/core'
import { CharacterCount } from '@tiptap/extensions'

new Editor({
  extensions: [CharacterCount],
})

Settings

limit

The maximum number of characters that should be allowed.

Default: null

CharacterCount.configure({
  limit: 240,
})

mode

The mode by which the size is calculated.

Default: 'textSize'

CharacterCount.configure({
  mode: 'nodeSize',
})

textCounter

The text counter function to use. Defaults to a simple character count.

Default: (text) => text.length

CharacterCount.configure({
  textCounter: (text) => [...new Intl.Segmenter().segment(text)].length,
})

wordCounter

The word counter function to use. Defaults to a simple word count.

Default: (text) => text.split(' ').filter((word) => word !== '').length

CharacterCount.configure({
  wordCounter: (text) => text.split(/\s+/).filter((word) => word !== '').length,
})

Storage

characters()

Get the number of characters for the current document.

editor.storage.characterCount.characters()

// Get the size of a specific node.
editor.storage.characterCount.characters({ node: someCustomNode })

// Overwrite the default `mode`.
editor.storage.characterCount.characters({ mode: 'nodeSize' })

words()

Get the number of words for the current document.

editor.storage.characterCount.words()

// Get the number of words for a specific node.
editor.storage.characterCount.words({ node: someCustomNode })

Source code

packages/extensions/src/character-count/

Minimal Install

import { Editor } from '@tiptap/core'
import { CharacterCount } from '@tiptap/extensions/character-count'

new Editor({
  extensions: [CharacterCount],
})