How to render these plugins from raw content state in "readOnly" mode

I made the plugins work under the Editor tag, and I can type inline block like bold, underline,… etc. I also install plugins like Linkify, Mentions and Emoji, it shows correctly in the editing box.

But it just show a plain text when rendering it in HTML for the links and mentions, and some of the Emoji did not show correctly, for the one shows correctly, the CSS looks very different.

What I did is that converting editor state to raw state let rawState = convertToRaw(this.state.editorState.getCurrentContent() then, create a editorState for rendering as follows const blocks = convertFromRaw(rawState); this.state = {editorState: EditorState.createWithContent(blocks)}; and try to rendering it using Editor with readOnly={true}, Defining the rendering component like

render(){
    return <div className="RichEditor-root message-display-root">
            <div className="RichEditor-editor message-display-editor">
                <Editor
                    blockStyleFn={getBlockStyle}
                    customStyleMap={styleMap}
                    editorState = {this.state.editorState}
                    readOnly={true}
                    plugins={plugins}
                    onChange={()=>{}}
                    />
            </div>
    </div>;
}

All the inline style show correctly (Bold, Underline, Blockquote, UL, OL, …etc), just these plugins does not show correctly when trying to render it in HTML. When inspecting the element, some of the class and element shows quite different, like there will be draftJsMentionPlugin__mention__29BEd class for the mention shown in editing box, but not shown in the readOnly part of the HTML page.

[mzbac]

it may sounds silly, but draftjs-plugin editor is using onchange to mount the decorators to editorState. so I think even your editor is on readOnly you still need to pass onchange ={ (editorState) => this.setState({editorState}}

[danieloi]

I had to pass the decorators from my plugins to the editor when it was in readOnly mode to make sure my links and mentions rendered properly

const plugins = [mentionPlugin, linkifyPlugin, hashtagPlugin]; const decorators = flattenDeep(plugins.map((plugin) => plugin.decorators)); const decorator = new CompositeDecorator( decorators.filter((decorator, index) => index !== 1) );

and then I create my editor state like so

const content = convertFromRaw(editorContent); const editorState = EditorState.createWithContent(content, decorator);