CODEWITHSUNDEEP
reactjsdraftjs
Kal
Kal

Reputation: 1774

DraftJs: Invariant Violation: block is not a BlockNode when using convertToRaw

I am getting Invariant Violation: block is not a BlockNode when using convertToRaw in draft js.

Unfortunately, it works fine in code sandbox but not in local which makes it hard for me to debug the issue: https://codesandbox.io/s/vibrant-ramanujan-c6h4u?file=/src/App.js:0-1194

The line that throws the error in my local is:

const v2 = convertToRaw(v1);

Here is the complete code:

import { useState, useRef } from "react";
import { Editor, createEditorState } from "medium-draft";
import Button from "@material-ui/core/Button";
import { convertToRaw } from "draft-js";

export default function PostEditor() {
  const [editorState, setEditorState] = useState(createEditorState());

  //update medium editor
  const changeEditor = (editorState) => {
    setEditorState(editorState);
  };
  const editorRef = useRef();
  const handleSubmit = async (event) => {
    console.log(editorState.getCurrentContent());
    const v1 = editorRef.current.props.editorState.getCurrentContent();
    const v2 = convertToRaw(v1);
    console.log(v2);
  };
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      <Editor
        ref={editorRef}
        editorState={editorState}
        onChange={changeEditor}
      />

      <Button
        variant="contained"
        color="primary"
        size="large"
        onClick={(event) => {
          handleSubmit(event);
        }}
      >
        Submit
      </Button>
    </div>
  );
}

Upvotes: 5

Views: 2255

Answers (3)

Jay Surya
Jay Surya

Reputation: 570

In my case, I was deep cloning an object that contains editorState object (using a utility function), while passing from one function to another. It was fixed once I passed the original object that is returned in onChange.

Upvotes: 1

Марсианский Пончик
Марсианский Пончик

Reputation: 27

If u have 2 package.json files try to remove draft-js from the child one.

Upvotes: 0

Hamza Boukhtam
Hamza Boukhtam

Reputation: 91

Did you downgrade to draft-js v0.10.4, it seems to solve the problem to me. see https://github.com/HubSpot/draft-convert/issues/143

Upvotes: 3

Related Questions