feat: Address feedback for CharacterCountPlugin

packages/lexical-react/src/LexicalCharacterCountPlugin.tsx

@@ -17,21 +17,30 @@ function utf8Length(text: string) {
 
 export function CharacterCountPlugin({
   charset = 'UTF-16',
+  render = DefaultRenderer,
 }: {
   charset?: 'UTF-16' | 'UTF-8';
+  render?: (characterCount: number) => JSX.Element;
 }): JSX.Element {
   const [editor] = useLexicalComposerContext();
-  const characterCount = useCharacterCount(editor, {
-    strlen: (text: string) => {
+
+  const strlen = React.useMemo(() => {
+    return (text: string) => {
       if (charset === 'UTF-8') {
         return utf8Length(text);
       } else if (charset === 'UTF-16') {
         return text.length;
       } else {
         throw new Error('Unrecognized charset');
       }
-    },
-  });
+    };
+  }, [charset]);
+
+  const characterCount = useCharacterCount(editor, {strlen});
+
+  return render(characterCount);
+}
 
+function DefaultRenderer(characterCount: number) {
   return <span className="characters-count">{characterCount}</span>;
 }

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

@@ -7,9 +7,7 @@
  */
 import type {LexicalEditor} from 'lexical';
 
-import {OverflowNode} from '@lexical/overflow';
 import {useEffect, useState} from 'react';
-import invariant from 'shared/invariant';
 
 type OptionalProps = {
   strlen?: (input: string) => number;
@@ -23,17 +21,6 @@ export function useCharacterCount(
   const [characterCount, setCharacterCount] = useState(0);
 
   useEffect(() => {
-    // Check if OverflowNode is registered
-    if (!editor.hasNodes([OverflowNode])) {
-      invariant(
-        false,
-        'useCharacterCount: OverflowNode not registered on editor',
-      );
-    }
-  }, [editor]);
-
-  useEffect(() => {
-    // Update character count whenever the text content changes
     const unregisterTextContentListener = editor.registerTextContentListener(
       (currentText: string) => {
         setCharacterCount(strlen(currentText));