Skip to content

Feature: Request for Adding useCharacterCount Hook #7063

Open
@h1un

Description

@h1un

Description

I have implemented a new useCharacterCount hook inspired by the existing useCharacterLimit functionality. This hook helps track the number of characters in real-time within text input fields or rich text editors.

Although useCharacterLimit and useCharacterCount are not typically used together, an issue arises when both hooks are used simultaneously, causing the following error:

ToolbarContext.tsx:100 Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.
I am currently facing difficulties resolving this issue and would appreciate help fixing it so that both hooks can work together. Also, I would like to ask whether it would be appropriate to submit a pull request for this.

You can find the implementation of the useCharacterCount hook here.

Impact

Text Input Validation: Track the number of characters a user types in real-time and display an alert when the character count exceeds a set limit.
Rich Text Editing: Track character count in a rich text editor as users type, which can be useful for applications like document editing.
Form Validation: Dynamically validate form inputs based on character count, ensuring the form is only submitted if the character count is within the allowed range.

I request that the useCharacterCount hook be improved to work seamlessly alongside useCharacterLimit, resolving the issue when both hooks are used together.

Activity

etrepum

etrepum commented on Jan 20, 2025

@etrepum
Collaborator

It sounds like your useCharacterCount hook is doing things it shouldn't do, you don't need to use editor.update at all to count the characters.

linked a pull request that will close this issue on Jan 21, 2025
h1un

h1un commented on Jan 21, 2025

@h1un
Author

I’ve made the necessary updates based on your feedback. The useCharacterCount hook has been refactored to separate the character counting logic from editor state modification. I’ve removed the usage of editor.update and ensured that the hook only listens for text content changes and updates the character count accordingly.

Thank you for your suggestions!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementImprovement over existing feature

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Participants

    @etrepum@h1un

    Issue actions

      Feature: Request for Adding useCharacterCount Hook · Issue #7063 · facebook/lexical