Как получить ссылки в Draft js в режиме только для чтения?

Question

Я создаю простое приложение для записи блогов. Я использую черновик. js в качестве редактора. Я могу создать ссылку во время написания блога, но когда я go в режиме чтения, все ссылки отсутствуют. Вот код React для написания и чтения блогов. Для простоты я храню editorState / data в localStorage. Вот WriteBlog. js file

import React, { Component } from "react";
import Editor, { createEditorStateWithText } from "draft-js-plugins-editor";
import createInlineToolbarPlugin from "draft-js-inline-toolbar-plugin";
import createLinkPlugin from "draft-js-anchor-plugin";
import createToolbarPlugin, { Separator } from "draft-js-static-toolbar-plugin";
import {
  convertFromRaw,
  EditorState,
  RichUtils,
  AtomicBlockUtils,
  convertToRaw
} from "draft-js";
import { ItalicButton, BoldButton, UnderlineButton } from "draft-js-buttons";
import editorStyles from "./editorStyles.css";
import buttonStyles from "./buttonStyles.css";
import toolbarStyles from "./toolbarStyles.css";
import linkStyles from "./linkStyles.css";
import "draft-js-alignment-plugin/lib/plugin.css";
const staticToolbarPlugin = createToolbarPlugin();

const linkPlugin = createLinkPlugin({
  theme: linkStyles,
  placeholder: "http://…"
});
const inlineToolbarPlugin = createInlineToolbarPlugin({
  theme: { buttonStyles, toolbarStyles }
});
const { Toolbar } = staticToolbarPlugin;

const { InlineToolbar } = inlineToolbarPlugin;
const plugins = [staticToolbarPlugin, linkPlugin];
const text =
  "Try selecting a part of this text and click on the link button in the toolbar that appears …";

export default class WriteBlog extends Component {
  state = {
    editorState: createEditorStateWithText(text)
  };

  onChange = editorState => {
    let contentRaw = convertToRaw(this.state.editorState.getCurrentContent());
    const stringyfyRawContent = JSON.stringify(contentRaw);
    localStorage.setItem("blogcontent", JSON.stringify(contentRaw));
    this.setState({
      editorState
    });
  };
  handleSave = async e => {
    e.preventDefault();

    // await this.setState({
    //     saveblog: 1,
    //     publish: 0
    // });
    // this.props.create_post(this.state);

    // console.log("save state", this.state);
    localStorage.setItem(
      "blogsaveblog",
      JSON.stringify(this.state.editorState)
    );
  };
  focus = () => this.editor.focus();

  render() {
    return (
      <div className={editorStyles.editor} onClick={this.focus}>
        <form onSubmit={this.handleSave}>
          <Editor
            editorState={this.state.editorState}
            onChange={this.onChange}
            plugins={plugins}
            ref={element => {
              this.editor = element;
            }}
          />
          <Toolbar>
            {// may be use React.Fragment instead of div to improve perfomance after React 16
            externalProps => (
              <div>
                <BoldButton {...externalProps} />
                <ItalicButton {...externalProps} />
                <UnderlineButton {...externalProps} />
                <linkPlugin.LinkButton {...externalProps} />
              </div>
            )}
          </Toolbar>

          <button
            type="submit"
            className="btn btn-primary"
            style={{ margin: "10px" }}
          >
            Save
          </button>
        </form>
      </div>
    );
  }
}

, а вот ReadBlog. js file

import React, { Component } from "react";
import Editor, { createEditorStateWithText } from "draft-js-plugins-editor";
import createInlineToolbarPlugin from "draft-js-inline-toolbar-plugin";
import createLinkPlugin from "draft-js-anchor-plugin";
import createToolbarPlugin, { Separator } from "draft-js-static-toolbar-plugin";
import { convertFromRaw, EditorState, convertToRaw } from "draft-js";
import { ItalicButton, BoldButton, UnderlineButton } from "draft-js-buttons";
import editorStyles from "./editorStyles.css";
import buttonStyles from "./buttonStyles.css";
import toolbarStyles from "./toolbarStyles.css";
import linkStyles from "./linkStyles.css";
import "draft-js-alignment-plugin/lib/plugin.css";
const staticToolbarPlugin = createToolbarPlugin();

const linkPlugin = createLinkPlugin({
  theme: linkStyles,
  placeholder: "http://…"
});
const inlineToolbarPlugin = createInlineToolbarPlugin({
  theme: { buttonStyles, toolbarStyles }
});
const { Toolbar } = staticToolbarPlugin;

const { InlineToolbar } = inlineToolbarPlugin;
const plugins = [staticToolbarPlugin, linkPlugin];
const text =
  "Try selecting a part of this text and click on the link button in the toolbar that appears …";

export default class ReadBlog extends Component {
  state = {
    editorState: createEditorStateWithText(text)
  };
  componentDidMount = () => {
    const rawContentFromdb = convertFromRaw(
      JSON.parse(localStorage.getItem("blogcontent"))
    );
    const initialEditorStatedb = EditorState.createWithContent(
      rawContentFromdb
    );
    this.setState({ editorState: initialEditorStatedb });
  };



  focus = () => this.editor.focus();

  render() {
    return (
      <div className={editorStyles.editor} onClick={this.focus}>
        <Editor
          editorState={this.state.editorState}
          plugins={plugins}
          readOnly={true}
          ref={element => {
            this.editor = element;
          }}
        />
      </div>
    );
  }
}