CharacterCount counts non-existing characters

[martinthenth]

What happens?
CharacterCount extension counts non-existing characters.

An empty editor with CharacterCount enabled will show +2 for every newline, and + 4 for every list; even though there are no characters. When adding characters, the count increments on top of those non-existing counted characters.

I haven't tested "Code" and "CodeBlock", but I expect a similar result.

Steps to reproduce the behavior:

1. Go to the editor on https://next.tiptap.dev/api/extensions/character-count/
2. On a newline, type "Enter".
3. See count + 2, where it should be + 0.

1. Create a default editor with "Ordered List" or "Unordered List".
2. Add "CharacterCount" extension.
2. On a newline, create a list.
3. See count + 4, where it should be + 0.

Create a new Codesandbox replicating your error
Try in the documentation editor: https://next.tiptap.dev/api/extensions/character-count/

What behavior did you expect?
Count +0 on newlines and lists.

What’s your environment?

• macOS
• Chrome
• Desktop

Anything else?
I haven't tested "Code" and "CodeBlock", but I expect a similar result.

[BrianHung]

A quick fix to this would maybe be to replace state.doc.content.size with state.doc.textContent.length in both https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-character-count/src/character-count.ts and https://github.com/ueberdosis/tiptap-next/blob/main/packages/core/src/Editor.ts#L426.

[hanspagel]

Thanks for chiming in @BrianHung!

Both use cases are probably relevant, for example this is Twitter (they should know how to count characters):

[martinthenth]

Thanks for the quick responses. I believe the Twitter example is very sensible. End-users can intuitively understand that a newline counts as a character (they're making a typing action). Maybe count +0 can feel unnatural from that perspective.

The same goes for creating List Items, which are currently counted as +4.

I'm thinking the HTML elements are miscounted (lists require two elements <ul> + <li> and newlines require one <p>).

[BrianHung]

I'm thinking the HTML elements are miscounted (lists require two elements <ul> + <li> and newlines require one <p>).

Your intuition is close but off by a multiplier of 2 -- lists uses 4 instead of 2, paragraphs uses 2 instead of 1 -- because each nested semantic element needs a start and an end position, e.g. for a list, you will have <ul>start<li>start<p>{content}</p>end</li>end</ul>.

I'm not sure if there's a universal way to count text characters, but implementing custom behavior is simple and involves recursively descending on the doc to count the number of nodes or textContent, etc.

[philippkuehn]

Maybe we could add an option { mode: 'nodeSize' | 'textSize' }?

[hanspagel]

This is used in the Editor too, so that would require us to add the ability to register helper functions through extensions. 👀

https://github.com/ueberdosis/tiptap-next/blob/main/packages/core/src/Editor.ts#L426