Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unhandled Runtime Error, Invariant Violation: Unknown DraftEntity key: null. #1405

Open
SaadAli11 opened this issue Oct 26, 2023 · 1 comment

Comments

@SaadAli11
Copy link

https://ibb.co/nLGLS0n

Why does my React application using 'react-draft-wysiwyg' crash when I set an embedded link in the editor, resulting in an error like 'Invariant Violation: Unknown DraftEntity key: null'? How can I troubleshoot and resolve this issue?
when i set the embedded link it not show any error but when i get the html again from the backend and set it to the editor it show error.

Here is my Code (check the useEffect that generate the error):

![error](https://github.com/jpuri/react-draft-wysiwyg/assets/89373992/ab5d4fdf-f918-406f-9a5c-afe6ba460545)

// ** React Imports
import React, {useEffect, useRef, useState} from 'react'

// ** Third Party Imports
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";
import convertFromHTMLtoContentBlocks from 'draft-js'

interface MainProps {
  handle: any;
  setHandle: any;
}

const DescriptionTextEditorControlled = (props: MainProps) =>{

  const {handle,setHandle} = props

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

  useEffect(() => {

    if (handle?.description !== null && handle?.description !== undefined) {

      const textToConvert = handle?.description;
      const blocksFromHTML = convertFromHTML(textToConvert);

      const contentState = ContentState.createFromBlockArray(blocksFromHTML.contentBlocks, blocksFromHTML.entityMap);
      
      setEditorState(EditorState.createWithContent(contentState));
    }
    else {
      // If handle.description is empty or undefined, clear the editor
      setEditorState(EditorState.createEmpty());
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

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

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

    if(htmlContent){
      setHandle({...handle, description: 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 DescriptionTextEditorControlled;
@SaadAli11
Copy link
Author

Screenshot_2

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant