draft js(react js) decorators ,after 1000 words text background should be colored tweeter tweet box like

Question

i have done it with decorators ,if i didn't enter while writing(creating new block) ,it works fine enter image description here

but when we text with new line decorator call as many time new line created and it didn't work please if anyone have solution please help ,thanks in advance

enter image description here

my react component code below:

import React, { useState, useRef } from "react"; import { Editor,
EditorState, ContentState, CompositeDecorator, convertToRaw, } from "draft-js";

const Decorated = ({ children }) => { return {children}; };

function findWithRegex(contentBlock, callback) { const text = contentBlock.getText(); callback(1000, text.length > 1000 ? text.length : 1001); }

const styles = { editor: { // border: "1px solid gray", // minHeight: "6em", }, };

function handleStrategy(contentBlock, callback) {
findWithRegex(contentBlock, callback); }

const createDecorator = () => new CompositeDecorator([ { strategy: handleStrategy, component: Decorated, }, ]);

function TextArea(props) { const [editorState, setEditorState] = useState( EditorState.createWithContent( ContentState.createFromText(props.value), createDecorator() ) );

const editor = useRef(null);

function focusEditor() { editor.current.focus(); }

const onChnage = (editState) => { const blocks = convertToRaw(editState.getCurrentContent()).blocks; let value = blocks .map((block) => (!block.text.trim() && "\n") || block.text) .join("\n"); setEditorState(editState); props.formik.setFieldValue(props.name, value !== "\n" ? value : "") };

React.useEffect(() => { focusEditor(); }, []);

return ( ); }

export default TextArea;