CODEWITHSUNDEEP
javascriptnode.jsreactjsrich-text-editor
Alamin
Alamin

Reputation: 2165

Not showing data from localStorage

I am using ReactJs for my project, and I'm using a rich text editor, when I write something in the content aria then I'm able to save data inside localStorage, but when I want to have data inside content body after refresh the whole page, It doesn't show data in the content aria but I have saved data succesfully in the localStorage

I don't know where is problem,

I have tried by this way:

  const blogFromLS = () => {
    if (typeof window === "undefined") {
      return false;
    }

    if (localStorage.getItem("blog")) {
      return JSON.parse(localStorage.getItem("blog"));
    } else {
      return false;
    }
  };

  const [body, setBody] = useState({
    editorState: EditorState.createEmpty(),
    blogFromLS: blogFromLS(),
  });

  const { editorState } = body;

  const onEditorStateChange = (editorState) => {
    setBody({ editorState });
    formData.set(
      "body",
      draftToHtml(convertToRaw(editorState.getCurrentContent()))
    );
    if (typeof window !== "undefined") {
      localStorage.setItem(
        "blog",
        JSON.stringify(
          draftToHtml(convertToRaw(editorState.getCurrentContent()))
        )
      );
    }
  };

  <div className="form-group">
          <Editor
            className="editorCustom"
            editorState={editorState}
            wrapperClassName="demo-wrapper"
            editorClassName="demo-editor"
            onEditorStateChange={onEditorStateChange}
            placeholder="write something..."
            // onChange={handleBody}
            // value={body}
          />
        </div>

Any Suggestion please.

Upvotes: 1

Views: 116

Answers (1)

chuve
chuve

Reputation: 728

You close to aim what you want to achieve. What you have to tweak is the way how you initialize the editor's state. You have to pass the state which you store in localStorage during the initialization editor component. To do so you have to use EditorState.createWithContent static method.

const [editorState, setEditorState] = useState({
editorState: blogFromLS()
  ? EditorState.createWithContent(blogFromLS())
  : EditorState.createEmpty()
});

Also it seems that you don't need to use draftToHtml, because we need to save a raw content state and not an html or whatever.

Here is the complete solution:

import "./styles.css";
import { Editor, EditorState, convertToRaw, convertFromRaw } from "draft-js";
import "draft-js/dist/Draft.css";
import { useState } from "react";

const blogFromLS = () => {
  if (typeof window === "undefined") {
    return false;
  }

  if (localStorage.getItem("blog")) {
    return convertFromRaw(JSON.parse(localStorage.getItem("blog")));
  } else {
    return false;
  }
};

export default function App() {
  const [editorState, setEditorState] = useState({
    editorState: blogFromLS()
      ? EditorState.createWithContent(blogFromLS())
      : EditorState.createEmpty()
  });
  const onChange = (editorState) => {
    setEditorState({ editorState });
    if (typeof window !== "undefined") {
      localStorage.setItem(
        "blog",
        JSON.stringify(convertToRaw(editorState.getCurrentContent()))
      );
    }
  };
  return (
    <div className="App">
      <Editor editorState={editorState.editorState} onChange={onChange} />
    </div>
  );
}

The code snippet is also available here in sandbox.

Upvotes: 1

Related Questions