title: How to get the links in Draft js in read only mode?
body: <p>I am creating a simple blog writing application. I am using Draft.js as an editor. I am able to create the link while writing the blog but when I go into read mode all the links are missing.  Here are the React code for writing and reading the blogs. For simplicity I am storing the editorState/data in localStorage. Here is WriteBlog.js file</p>
  
  <pre><code>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 =&gt; {
      let contentRaw = convertToRaw(this.state.editorState.getCurrentContent());
      const stringyfyRawContent = JSON.stringify(contentRaw);
      localStorage.setItem("blogcontent", JSON.stringify(contentRaw));
      this.setState({
        editorState
      });
    };
    handleSave = async e =&gt; {
      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 = () =&gt; this.editor.focus();
  
    render() {
      return (
        &lt;div className={editorStyles.editor} onClick={this.focus}&gt;
          &lt;form onSubmit={this.handleSave}&gt;
            &lt;Editor
              editorState={this.state.editorState}
              onChange={this.onChange}
              plugins={plugins}
              ref={element =&gt; {
                this.editor = element;
              }}
            /&gt;
            &lt;Toolbar&gt;
              {// may be use React.Fragment instead of div to improve perfomance after React 16
              externalProps =&gt; (
                &lt;div&gt;
                  &lt;BoldButton {...externalProps} /&gt;
                  &lt;ItalicButton {...externalProps} /&gt;
                  &lt;UnderlineButton {...externalProps} /&gt;
                  &lt;linkPlugin.LinkButton {...externalProps} /&gt;
                &lt;/div&gt;
              )}
            &lt;/Toolbar&gt;
  
            &lt;button
              type="submit"
              className="btn btn-primary"
              style={{ margin: "10px" }}
            &gt;
              Save
            &lt;/button&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>and here is ReadBlog.js file</p>
  
  <pre><code>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 = () =&gt; {
      const rawContentFromdb = convertFromRaw(
        JSON.parse(localStorage.getItem("blogcontent"))
      );
      const initialEditorStatedb = EditorState.createWithContent(
        rawContentFromdb
      );
      this.setState({ editorState: initialEditorStatedb });
    };
  
  
  
    focus = () =&gt; this.editor.focus();
  
    render() {
      return (
        &lt;div className={editorStyles.editor} onClick={this.focus}&gt;
          &lt;Editor
            editorState={this.state.editorState}
            plugins={plugins}
            readOnly={true}
            ref={element =&gt; {
              this.editor = element;
            }}
          /&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>