React-draft-wysiwyg editor contents not editable

1 year ago

#333538

DeonV

I'm building a simple blog app, and have a working editor to publish posts. I am now trying to implement one for the user to update a previous post. The editor state gets updated to the correct content, but it is not editable. I have also tried using a different editor and had the same problem. Does anyone have an idea as to what can be causing this? My best guess is that it has to do with how the data is loaded into the editor.

This is the function to update editorstate passed into the component using useContext

  const updateTextDescription = (state) => {
    setEditorState(state);
  };

This is the update page.

import React from "react";
import classes from "./UpdateModal.module.css";
import './UpdateModal.css';
import { useBlogCtx } from "../../context/BlogContext";
import { EditorState, ContentState, convertFromHTML } from "draft-js";
import "../../../node_modules/draft-js/dist/Draft.css";
import { Editor } from "react-draft-wysiwyg";
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
import './UpdateModal.css';
import 'draft-js/dist/Draft.css';

function UpdateModal(props) {
  const {
    updatePost,
    updateModalHandler,
    setTitle,
    setImage,
    setPost,
    currentId,
    title,
    image,
    post,
    updateTextDescription,
  } = useBlogCtx();

  const blocksFromHTML = convertFromHTML(post);

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

  const editorDataState = EditorState.createWithContent(content);

  return (
    <div
      onClick={() => {
        updateModalHandler();
      }}
      className={classes.backdrop}
    >
      <form onClick={(e) => e.stopPropagation()} className={classes.form}>
        <label htmlFor="title">Title</label>
        <input
          id="title"
          type="text"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
        />
        <label htmlFor="image">Image(URL)</label>
        <input
          id="image"
          type="text"
          value={image}
          onChange={(e) => setImage(e.target.value)}
        />
        <label htmlFor="post">Post</label>
        <Editor
          editorState={editorDataState}
          onEditorStateChange={updateTextDescription}
          wrapperClassName="rich-editor demo-wrapper"
          editorClassName="demo-editor"
        />
        <div className={classes.buttons}>
          <button className={classes.cancel} onClick={updateModalHandler}>
            Cancel
          </button>
          <button
            className={classes.update}
            onClick={() => {
              updatePost(currentId);
            }}
          >
            Update
          </button>
        </div>
      </form>
    </div>
  );
}

export default UpdateModal;

This is what the editor looks like. editor

Content correctly gets set to editor state, just not editable.

javascript

reactjs

rich-text-editor

draftjs

0 Answers

Your Answer

Posts

Questions

Blogs

Jobs