A brand new CharacterCount extension

[philippkuehn]

With this PR we introduce the redesigned CharacterCount extension. It’s a full re-write and fixes some bugs.

New features

Add mode option

You can now choose between textSize and nodeSize for calculating the character size. Defaults to textSize.

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

Add characters() storage method

Get the number of characters for the current document with this new storage method. This deprecates editor.getCharacterCount().

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

Add words() storage method

Get the number of words for the current document with this new storage method.

editor.storage.characterCount.words()

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

Preview

https://deploy-preview-2256--tiptap-embed.netlify.app/preview/Extensions/CharacterCount

Fixes #1049
Fixes #1550
Fixes #1839
Fixes #2245

[netlify]

✔️ Deploy Preview for tiptap-embed ready!

🔨 Explore the source changes: 04ca755

🔍 Inspect the deploy log: https://app.netlify.com/sites/tiptap-embed/deploys/61b0f23062da120007b4bac3

😎 Browse the preview: https://deploy-preview-2256--tiptap-embed.netlify.app

[hanspagel]

So cool! Thanks for putting so much effort into it!

[caroillemann]

Hi :) I just tested your deploy-preview url and it seems that the first word on a new line isn't added to the total number of words. As you can see here the word 'And' is word number 4 and 'more' is number 5 - but the total count is only 4.

[philippkuehn]

@caroillemann Oh you are right. Should be fixed with this patch.

[rfgamaral]

@philippkuehn Just noticed editor.getCharacterCount was deprecated, and arrived here after trying to implement the new options. I'm using this with TypeScript, and I'm not sure about some decisions, here are my suggestions:

1. Although the docs have editor.storage.characterCount.characters() as an example, the characters function is expecting a required options object:
   

   tiptap/packages/extension-character-count/src/character-count.ts

   Lines 20 to 23 in 49a99a0

   	characters?: (options: {
   	node?: ProseMirrorNode,
   	mode?: 'textSize' | 'nodeSize',
   	}) => number,

   
   I think options should be made optional so that you can actually call characters() without arguments.
2. I'm wondering if we can avoid having characters and words being optional by moving the functions from onBeforeCreate to addStorage instead (that way they wouldn't be undefined)

With both of these changes, we couldn't need to call characters?.({}) || 0 like this, it would be much better if we could just call .characters().

To finish, I have a question about this issue:

The only I can think of to work around this is:

const count = (editor.storage.characterCount as CharacterCountStorage).characters?.({}) || 0

And I'm wondering if there's a better way without casting?

[philippkuehn]

Oh, the first bug should be fixed with this patch.

We can’t move these methods to addStorage because there is no editor instance at this moment. That’s why it’s technically correct that these methods are optional. But I agree that it can be a bit confusing. I already thought about making the storage type required, even if it wouldn't be technically correct. Probably the DX would be a bit better anyway.

[rfgamaral]

We can’t move these methods to addStorage because there is no editor instance at this moment.

Granted that you have a lot more context than me, what if you check for this.editor first, and if it's not available, return 0? Wouldn't that work? 🤔

[philippkuehn]

@rfgamaral There is no this.editor context within addStorage at all so this won’t work.

[rfgamaral]

@philippkuehn Got it! What about having dummy functions that just return 0 instead of being set as undefined? Once onBeforeCreate is called, these dummy functions would be replaced.

[philippkuehn]

@rfgamaral yeah, I like that 👍 Fixed.

[rfgamaral]

Awesome, thanks!