update: change character_limit to be passed as a props( maxlength) (#…

…3649)
facebook · Dec 31, 2022 · e107039 · e107039 · vercel · Dec 31, 2022
1 parent 6e65c98
commit e107039
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/packages/lexical-playground/src/Editor.tsx b/packages/lexical-playground/src/Editor.tsx
@@ -214,7 +214,10 @@ export default function Editor(): JSX.Element {
           </>
         )}
         {(isCharLimit || isCharLimitUtf8) && (
-          <CharacterLimitPlugin charset={isCharLimit ? 'UTF-16' : 'UTF-8'} />
+          <CharacterLimitPlugin
+            charset={isCharLimit ? 'UTF-16' : 'UTF-8'}
+            maxLength={5}
+          />
         )}
         {isAutocomplete && <AutocompletePlugin />}
         <div>{showTableOfContents && <TableOfContentsPlugin />}</div>

diff --git a/packages/lexical-react/src/LexicalCharacterLimitPlugin.tsx b/packages/lexical-react/src/LexicalCharacterLimitPlugin.tsx
@@ -41,12 +41,14 @@ function utf8Length(text: string) {
 
 export function CharacterLimitPlugin({
   charset = 'UTF-16',
+  maxLength = CHARACTER_LIMIT,
 }: {
   charset: 'UTF-8' | 'UTF-16';
+  maxLength: number;
 }): JSX.Element {
   const [editor] = useLexicalComposerContext();
 
-  const [remainingCharacters, setRemainingCharacters] = useState(0);
+  const [remainingCharacters, setRemainingCharacters] = useState(maxLength);
 
   const characterLimitProps = useMemo(
     () => ({
@@ -64,7 +66,7 @@ export function CharacterLimitPlugin({
     [charset],
   );
 
-  useCharacterLimit(editor, CHARACTER_LIMIT, characterLimitProps);
+  useCharacterLimit(editor, maxLength, characterLimitProps);
 
   return (
     <span