[lexical-react]Feature : CharacterCountPlugin #7075

h1un · 2025-01-21T07:16:44Z

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.

Closes #7063

vercel · 2025-01-21T07:16:49Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
lexical	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 22, 2025 1:31am
lexical-playground	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 22, 2025 1:31am

facebook-github-bot · 2025-01-21T07:16:49Z

Hi @h1un!

Thank you for your pull request and welcome to our community.

Action Required

In order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you.

Process

In order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with CLA signed. The tagging process may take up to 1 hour after signing. Please give it that time before contacting us about it.

If you have received this in error or have any questions, please contact us at [email protected]. Thanks!

github-actions · 2025-01-21T07:19:11Z

size-limit report 📦

Path	Size
lexical - cjs	29.07 KB (0%)
lexical - esm	28.86 KB (0%)
@lexical/rich-text - cjs	38.04 KB (0%)
@lexical/rich-text - esm	30.92 KB (0%)
@lexical/plain-text - cjs	36.55 KB (0%)
@lexical/plain-text - esm	28.22 KB (0%)
@lexical/react - cjs	39.85 KB (0%)
@lexical/react - esm	32.28 KB (+0.06% 🔺)

etrepum · 2025-01-21T17:16:44Z

packages/lexical-react/src/shared/useCharacterCount.ts

+  useEffect(() => {
+    // Check if OverflowNode is registered
+    if (!editor.hasNodes([OverflowNode])) {
+      invariant(
+        false,
+        'useCharacterCount: OverflowNode not registered on editor',
+      );
+    }
+  }, [editor]);


Counting characters doesn't need OverflowNode

etrepum · 2025-01-21T17:21:04Z

packages/lexical-react/src/LexicalCharacterCountPlugin.tsx

+  const characterCount = useCharacterCount(editor, {
+    strlen: (text: string) => {
+      if (charset === 'UTF-8') {
+        return utf8Length(text);
+      } else if (charset === 'UTF-16') {
+        return text.length;
+      } else {
+        throw new Error('Unrecognized charset');
+      }
+    },
+  });


This will cause the text content listener to be unregistered every time the editor changes because strlen changes causing the effect to re-fire every time. The options object or at least strlen should be computed with useMemo with this design.

etrepum · 2025-01-21T17:24:00Z

packages/lexical-react/src/LexicalCharacterCountPlugin.tsx

+    },
+  });
+
+  return <span className="characters-count">{characterCount}</span>;


It would be better to return <>{characterCount}</> so the tag and class are entirely up to the user, lexical generally doesn't have any hard-coded class names.

The only code in lexical that hard-codes class names is the playground, which is not published as a reusable module like this. Otherwise classes come from the editor theme (which is generally for nodes, not plug-ins). I think this should just be headless, where if you don't specify a render function it returns only the text.

h1un · 2025-01-22T01:37:19Z

@etrepum
I received your feedback and modified the code. Thank you.

etrepum · 2025-01-22T02:20:39Z

I’ll take a look after you sign the CLA. This project can not accept PRs without a signed CLA.

facebook-github-bot · 2025-01-22T03:06:13Z

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks!

etrepum

Looks very close, mostly just needs API documentation

etrepum · 2025-01-22T04:43:11Z

packages/lexical-react/src/LexicalCharacterCountPlugin.tsx

+    },
+  });
+
+  return <span className="characters-count">{characterCount}</span>;


The only code in lexical that hard-codes class names is the playground, which is not published as a reusable module like this. Otherwise classes come from the editor theme (which is generally for nodes, not plug-ins). I think this should just be headless, where if you don't specify a render function it returns only the text.

etrepum · 2025-01-22T04:45:46Z

packages/lexical-react/src/shared/useCharacterCount.ts

+  editor: LexicalEditor,
+  optional: OptionalProps = Object.freeze({}),
+): number {
+  const {strlen = (input) => input.length} = optional;


This has the same useMemo type problem, if this default is used a new function will be created each time the hook is called. If you extract this to a separate function it won't have that problem.

etrepum · 2025-01-22T04:51:47Z

packages/lexical-react/src/shared/useCharacterCount.ts

+
+import {useEffect, useState} from 'react';
+
+type OptionalProps = {


It would be easier to use and produce better API documentation if this was exported and had a more descriptive name like UseCharacterCountOptions

etrepum · 2025-01-22T04:52:03Z

packages/lexical-react/src/shared/useCharacterCount.ts

+  strlen?: (input: string) => number;
+};
+
+export function useCharacterCount(


This should have a /** API documentation */

etrepum · 2025-01-22T04:52:10Z

packages/lexical-react/src/LexicalCharacterCountPlugin.tsx

+  return textEncoder.encode(text).length;
+}
+
+export function CharacterCountPlugin({


This should have a /** API documentation */

etrepum · 2025-01-22T04:53:28Z

packages/lexical-playground/src/Editor.tsx

@@ -257,6 +260,9 @@ export default function Editor(): JSX.Element {
            maxLength={5}
          />
        )}
+        {(isCharCount || isCharCountUtf8) && (
+          <CharacterCountPlugin charset={isCharCount ? 'UTF-16' : 'UTF-8'} />


This is what it would look like when the output of the plugin is headless

Suggested change

<CharacterCountPlugin charset={isCharCount ? 'UTF-16' : 'UTF-8'} />

<span className="character-count">

<CharacterCountPlugin charset={isCharCount ? 'UTF-16' : 'UTF-8'} />

</span>

etrepum · 2025-01-22T04:53:54Z

packages/lexical-playground/src/index.css

@@ -734,6 +734,16 @@ i.page-break,
  color: red;
 }

+.characters-count {


Suggested change

.characters-count {

.character-count {

feat : CharacterCountPlugin

f715bd3

h1un requested review from zurfyx, fantactuka, acywatson, Fetz, ivailop7, Sahejkm and potatowagon as code owners January 21, 2025 07:16

h1un changed the title ~~[]Feature : CharacterCountPlugin~~ [lexical-react]Feature : CharacterCountPlugin Jan 21, 2025

vercel bot deployed to Preview – lexical-playground January 21, 2025 07:18 View deployment

vercel bot deployed to Preview – lexical January 21, 2025 07:18 View deployment

etrepum reviewed Jan 21, 2025

View reviewed changes

feat: Address feedback for CharacterCountPlugin

539bc41

vercel bot deployed to Preview – lexical-playground January 22, 2025 01:31 View deployment

vercel bot deployed to Preview – lexical January 22, 2025 01:31 View deployment

facebook-github-bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Jan 22, 2025

etrepum reviewed Jan 22, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[lexical-react]Feature : CharacterCountPlugin #7075

[lexical-react]Feature : CharacterCountPlugin #7075

h1un commented Jan 21, 2025 •

edited

Loading

vercel bot commented Jan 21, 2025 •

edited

Loading

facebook-github-bot commented Jan 21, 2025

github-actions bot commented Jan 21, 2025 •

edited

Loading

etrepum Jan 21, 2025

etrepum Jan 21, 2025

etrepum Jan 21, 2025

etrepum Jan 22, 2025

h1un commented Jan 22, 2025

etrepum commented Jan 22, 2025

facebook-github-bot commented Jan 22, 2025

etrepum left a comment

etrepum Jan 22, 2025

etrepum Jan 22, 2025

etrepum Jan 22, 2025

etrepum Jan 22, 2025

etrepum Jan 22, 2025

etrepum Jan 22, 2025

etrepum Jan 22, 2025


		import {useEffect, useState} from 'react';

		type OptionalProps = {

[lexical-react]Feature : CharacterCountPlugin #7075

Are you sure you want to change the base?

[lexical-react]Feature : CharacterCountPlugin #7075

Conversation

h1un commented Jan 21, 2025 • edited Loading

Description

vercel bot commented Jan 21, 2025 • edited Loading

facebook-github-bot commented Jan 21, 2025

Action Required

Process

github-actions bot commented Jan 21, 2025 • edited Loading

size-limit report 📦

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

h1un commented Jan 22, 2025

etrepum commented Jan 22, 2025

facebook-github-bot commented Jan 22, 2025

etrepum left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

h1un commented Jan 21, 2025 •

edited

Loading

vercel bot commented Jan 21, 2025 •

edited

Loading

github-actions bot commented Jan 21, 2025 •

edited

Loading