Wysiwyg editor gives an error when the editor is empty no text is written in it and i hit the backspace button in the editor

50 Views Asked by At

I use Nextjs with Typescipt. This is my code of editor component

import {EditorState, ContentState, convertFromHTML} from 'draft-js'
import {EditorWrapper} from "src/@core/styles/libs/react-draft-wysiwyg";
import ReactDraftWysiwyg from 'src/@core/components/react-draft-wysiwyg'
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";

interface MainProps {
  handleFaq: any;
  setHandleFaq: any;
}

const AnswerTextEditorControlled = (props: MainProps) =>{

  const {handleFaq,setHandleFaq} = props

  const [editorState, setEditorState] = useState(EditorState.createEmpty());

  useEffect(() => {
    if (handleFaq?.answer !== null && handleFaq?.answer !== undefined) {

      const textToConvert = handleFaq?.answer;
      const blocksFromHTML = convertFromHTML(textToConvert);

      const contentState = ContentState.createFromBlockArray(blocksFromHTML.contentBlocks, blocksFromHTML.entityMap);

      // const contentState = ContentState.createFromBlockArray(
      //   convertFromHTML(handleFaq?.answer)
      // );

      setEditorState(EditorState.createWithContent(contentState));
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const refEditor = useRef<HTMLDivElement | null>(null);

  const handleGetValue = () => {
    const htmlContent = refEditor.current;
    if(htmlContent){
      setHandleFaq({...handleFaq, answer: htmlContent.innerHTML});
    }
  };

  const handleEditorRef = (ref: any) => {
    if (ref) {
      // Store the editor instance reference in the refEditor
      refEditor.current = ref;
    }
  };

  return (
    <EditorWrapper>
      <ReactDraftWysiwyg editorState={editorState} onEditorStateChange={setEditorState} editorRef={handleEditorRef} onChange={handleGetValue}/>
    </EditorWrapper>
  );
}

export default AnswerTextEditorControlled

when I click backspace button to go the start of the editor and remove any text from the editor i recieve an error that says Unhandled Runtime Error TypeError: Cannot read properties of undefined (reading •getln • )

This error i got when the editor is empty and i press the backspace button

I also try this method

const handleGetValue = () => {
  const htmlContent = refEditor.current;

  if (htmlContent) {
    const answer = htmlContent.innerHTML.trim(); // Remove leading/trailing whitespace

    if (answer === '') {
      setHandleFaq({ ...handleFaq, answer: null });
    } else {
      setHandleFaq({ ...handleFaq, answer });
    }
  }
};
0

There are 0 best solutions below