[lexical-react]Feature : CharacterCountPlugin

packages/lexical-playground/src/Editor.tsx

@@ -7,6 +7,7 @@
  */
 
 import {AutoFocusPlugin} from '@lexical/react/LexicalAutoFocusPlugin';
+import {CharacterCountPlugin} from '@lexical/react/LexicalCharacterCountPlugin';
 import {CharacterLimitPlugin} from '@lexical/react/LexicalCharacterLimitPlugin';
 import {CheckListPlugin} from '@lexical/react/LexicalCheckListPlugin';
 import {ClearEditorPlugin} from '@lexical/react/LexicalClearEditorPlugin';
@@ -85,8 +86,10 @@ export default function Editor(): JSX.Element {
       isCollab,
       isAutocomplete,
       isMaxLength,
+      isCharCount,
       isCharLimit,
       hasLinkAttributes,
+      isCharCountUtf8,
       isCharLimitUtf8,
       isRichText,
       showTreeView,
@@ -257,6 +260,9 @@ export default function Editor(): JSX.Element {
             maxLength={5}
           />
         )}
+        {(isCharCount || isCharCountUtf8) && (
+          <CharacterCountPlugin charset={isCharCount ? 'UTF-16' : 'UTF-8'} />
+        )}
         {isAutocomplete && <AutocompletePlugin />}
         <div>{showTableOfContents && <TableOfContentsPlugin />}</div>
         {shouldUseLexicalContextMenu && <ContextMenuPlugin />}

packages/lexical-playground/src/appSettings.ts

@@ -16,6 +16,8 @@ export const DEFAULT_SETTINGS = {
   emptyEditor: isDevPlayground,
   hasLinkAttributes: false,
   isAutocomplete: false,
+  isCharCount: false,
+  isCharCountUtf8: false,
   isCharLimit: false,
   isCharLimitUtf8: false,
   isCollab: false,

packages/lexical-playground/src/index.css

@@ -734,6 +734,16 @@ i.page-break,
   color: red;
 }
 
+.characters-count {
+  color: #888;
+  font-size: 12px;
+  text-align: right;
+  display: block;
+  position: absolute;
+  left: 55px;
+  bottom: 5px;
+}
+
 .dropdown {
   z-index: 100;
   display: block;

packages/lexical-react/package.json

@@ -161,6 +161,36 @@
         "default": "./LexicalBlockWithAlignableContents.js"
       }
     },
+    "./LexicalCharacterCountPlugin": {
+      "import": {
+        "types": "./LexicalCharacterCountPlugin.d.ts",
+        "development": "./LexicalCharacterCountPlugin.dev.mjs",
+        "production": "./LexicalCharacterCountPlugin.prod.mjs",
+        "node": "./LexicalCharacterCountPlugin.node.mjs",
+        "default": "./LexicalCharacterCountPlugin.mjs"
+      },
+      "require": {
+        "types": "./LexicalCharacterCountPlugin.d.ts",
+        "development": "./LexicalCharacterCountPlugin.dev.js",
+        "production": "./LexicalCharacterCountPlugin.prod.js",
+        "default": "./LexicalCharacterCountPlugin.js"
+      }
+    },
+    "./LexicalCharacterCountPlugin.js": {
+      "import": {
+        "types": "./LexicalCharacterCountPlugin.d.ts",
+        "development": "./LexicalCharacterCountPlugin.dev.mjs",
+        "production": "./LexicalCharacterCountPlugin.prod.mjs",
+        "node": "./LexicalCharacterCountPlugin.node.mjs",
+        "default": "./LexicalCharacterCountPlugin.mjs"
+      },
+      "require": {
+        "types": "./LexicalCharacterCountPlugin.d.ts",
+        "development": "./LexicalCharacterCountPlugin.dev.js",
+        "production": "./LexicalCharacterCountPlugin.prod.js",
+        "default": "./LexicalCharacterCountPlugin.js"
+      }
+    },
     "./LexicalCharacterLimitPlugin": {
       "import": {
         "types": "./LexicalCharacterLimitPlugin.d.ts",

packages/lexical-react/src/LexicalCharacterCountPlugin.tsx

@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+import * as React from 'react';
+
+import {useCharacterCount} from './shared/useCharacterCount';
+
+function utf8Length(text: string) {
+  const textEncoder = new TextEncoder();
+  return textEncoder.encode(text).length;
+}
+
+export function CharacterCountPlugin({
+  charset = 'UTF-16',
+  render = DefaultRenderer,
+}: {
+  charset?: 'UTF-16' | 'UTF-8';
+  render?: (characterCount: number) => JSX.Element;
+}): JSX.Element {
+  const [editor] = useLexicalComposerContext();
+
+  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

@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import type {LexicalEditor} from 'lexical';
+
+import {useEffect, useState} from 'react';
+
+type OptionalProps = {
+  strlen?: (input: string) => number;
+};
+
+export function useCharacterCount(
+  editor: LexicalEditor,
+  optional: OptionalProps = Object.freeze({}),
+): number {
+  const {strlen = (input) => input.length} = optional;
+  const [characterCount, setCharacterCount] = useState(0);
+
+  useEffect(() => {
+    const unregisterTextContentListener = editor.registerTextContentListener(
+      (currentText: string) => {
+        setCharacterCount(strlen(currentText));
+      },
+    );
+
+    return () => {
+      unregisterTextContentListener();
+    };
+  }, [editor, strlen]);
+
+  return characterCount;
+}

tsconfig.json

@@ -48,6 +48,9 @@
       "@lexical/react/LexicalBlockWithAlignableContents": [
         "./packages/lexical-react/src/LexicalBlockWithAlignableContents.tsx"
       ],
+      "@lexical/react/LexicalCharacterCountPlugin": [
+        "packages/lexical-react/src/LexicalCharacterCountPlugin.tsx"
+      ],
       "@lexical/react/LexicalCharacterLimitPlugin": [
         "./packages/lexical-react/src/LexicalCharacterLimitPlugin.tsx"
       ],