Tiptap Docs

CharacterCount extension

VersionDownloads

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,
})

autoTrim

Sets whether the content will be automatically trimmed when programmatically setting content over the limit. If set to false, the content will not be trimmed automatically, allowing you to handle the excess content manually.

Default: true

CharacterCount.configure({
  limit: 240,
  autoTrim: false,
})

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/extension-character-count'

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