title: Adding image draft-js-image-plugin
body: <p>I've tried multiple different ways to try to attach an image in draft-js.</p>
  <p>My attempts followed the example in the tutorial <a href="https://www.draft-js-plugins.com/plugin/image" rel="nofollow noreferrer">https://www.draft-js-plugins.com/plugin/image</a>. For the &quot;Add Image Button Example&quot;, the full source of which can be found here <a href="https://github.com/draft-js-plugins/draft-js-plugins/tree/master/docs/client/components/pages/Image/AddImageEditor" rel="nofollow noreferrer">https://github.com/draft-js-plugins/draft-js-plugins/tree/master/docs/client/components/pages/Image/AddImageEditor</a>. I have also tried to follow this medium article that does not use the image plugin to do a similar thing <a href="https://medium.com/@siobhanpmahoney/building-a-rich-text-editor-with-react-and-draft-js-part-2-4-persisting-data-to-server-cd68e81c820" rel="nofollow noreferrer">https://medium.com/@siobhanpmahoney/building-a-rich-text-editor-with-react-and-draft-js-part-2-4-persisting-data-to-server-cd68e81c820</a>.</p>
  <p>If I set the initial state with the image already embedded it renders. However, when using a mechanism that adds it later on it doesn't seem to work. I've read some mentions of various version of plugins / draft.js having issues.<br />
  My versions:</p>
  <p>&quot;draft-js-image-plugin&quot;: &quot;^2.0.7&quot;,
  &quot;draft-js&quot;: &quot;^0.11.6&quot;,</p>
  <pre><code>import { EditorState } from 'draft-js';
  import Editor from 'draft-js-plugins-editor';
  import createInlineToolbarPlugin, { Separator } from 'draft-js-inline-toolbar-plugin';
  import createImagePlugin from 'draft-js-image-plugin';
  import 'draft-js/dist/Draft.css';
  import 'draft-js-inline-toolbar-plugin/lib/plugin.css';
  import {
    ItalicButton,
    BoldButton,
    UnderlineButton,
    HeadlineOneButton,
    CodeButton,
    UnorderedListButton,
    OrderedListButton,
    BlockquoteButton,
  } from 'draft-js-buttons';
  
  interface TextEditorProps {
    label?: string;
    value: EditorState;
    onChange?: (editorState: EditorState) =&gt; void;
    className?: string;
    disabled?: boolean;
  }
  
  const useStyles = makeStyles((theme) =&gt; ({
    label: {
      margin: theme.spacing(1)
    },
    editor: {
      boxSizing: 'border-box',
      border: '1px solid #ddd',
      cursor: 'text',
      padding: '16px',
      borderRadius: '2px',
      marginBottom: '2em',
      boxShadow: 'inset 0px 1px 8px -3px #ABABAB',
      background: '#fefefe',
      minHeight: '50vh'
    }
  }));
  const inlineToolbarPlugin = createInlineToolbarPlugin();
  const imagePlugin = createImagePlugin();
  const { InlineToolbar } = inlineToolbarPlugin;
  const plugins = [inlineToolbarPlugin, imagePlugin];
  const TextEditor:React.FunctionComponent&lt;TextEditorProps&gt; = ({label, value, onChange, className, disabled }: TextEditorProps) =&gt; {
    const editor = React.useRef(null);
    const focusEditor = () =&gt; {
      editor.current.focus();
    }
    React.useEffect(() =&gt; {
      focusEditor()
    }, []);
    const classes = useStyles();
    const insertImage = () =&gt; {
      onChange(imagePlugin.addImage(value, &quot;https://ichef.bbci.co.uk/news/976/cpsprodpb/12A9B/production/_111434467_gettyimages-1143489763.jpg&quot;));
    }
    return (
      &lt;Box className={className} onClick={focusEditor}&gt;
        {label &amp;&amp; &lt;InputLabel className={classes.label}&gt;{label}&lt;/InputLabel&gt;}
        &lt;div className=&quot;menuButtons&quot;&gt;
            &lt;button className=&quot;inline styleButton&quot;&gt;
              &lt;i
                className=&quot;material-icons&quot;
                style={{
                  fontSize: &quot;16px&quot;,
                  textAlign: &quot;center&quot;,
                  padding: &quot;0px&quot;,
                  margin: &quot;0px&quot;
                }}
                onClick={insertImage}
              &gt;
                image
              &lt;/i&gt;
            &lt;/button&gt;
          &lt;/div&gt;
        &lt;Box className={!disabled &amp;&amp; classes.editor} &gt;
          &lt;Editor
            ref={editor}
            editorState={value}
            onChange={onChange}
            plugins={plugins}
            spellCheck={true}
            readOnly={disabled}
          /&gt;
          {&lt;InlineToolbar&gt;
            {(externalProps) =&gt; (
              &lt;&gt;
                &lt;BoldButton {...externalProps} /&gt;
                &lt;ItalicButton {...externalProps} /&gt;
                &lt;UnderlineButton {...externalProps} /&gt;
                &lt;CodeButton {...externalProps} /&gt;
                &lt;Separator {...externalProps} /&gt;
                &lt;UnorderedListButton {...externalProps} /&gt;
                &lt;OrderedListButton {...externalProps} /&gt;
                &lt;BlockquoteButton {...externalProps} /&gt;
                &lt;HeadlineOneButton {...externalProps} /&gt;
              &lt;/&gt;
            )}  
          &lt;/InlineToolbar&gt;}
        &lt;/Box&gt;
      &lt;/Box&gt;
    )
  }
  </code></pre>