facebook / facebook/lexical

Feature: Request for Adding useCharacterCount Hook

Open
#7,063 4 comments 0 reactions 0 assignees View on GitHub
enhancement
Dominant language
TypeScript
Stars
23.9k
Forks
2.2k
Avg merge
1d 14h
Merged PRs (30d)
55

Description

## 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](https://github.com/h1un/lexical/commit/843a8693562a709f3c58dfa8cdb105b1adcdf424).

## 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.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.