{"action":"closed","issue":{"url":"https://api.github.com/repos/draft-js-plugins/draft-js-plugins/issues/530","repository_url":"https://api.github.com/repos/draft-js-plugins/draft-js-plugins","labels_url":"https://api.github.com/repos/draft-js-plugins/draft-js-plugins/issues/530/labels{/name}","comments_url":"https://api.github.com/repos/draft-js-plugins/draft-js-plugins/issues/530/comments","events_url":"https://api.github.com/repos/draft-js-plugins/draft-js-plugins/issues/530/events","html_url":"https://github.com/draft-js-plugins/draft-js-plugins/issues/530","id":187606581,"number":530,"title":"How to render these plugins from raw content state in \"readOnly\" mode","user":{"login":"kevinleeTCA","id":6743660,"avatar_url":"https://avatars.githubusercontent.com/u/6743660?v=3","gravatar_id":"","url":"https://api.github.com/users/kevinleeTCA","html_url":"https://github.com/kevinleeTCA","followers_url":"https://api.github.com/users/kevinleeTCA/followers","following_url":"https://api.github.com/users/kevinleeTCA/following{/other_user}","gists_url":"https://api.github.com/users/kevinleeTCA/gists{/gist_id}","starred_url":"https://api.github.com/users/kevinleeTCA/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/kevinleeTCA/subscriptions","organizations_url":"https://api.github.com/users/kevinleeTCA/orgs","repos_url":"https://api.github.com/users/kevinleeTCA/repos","events_url":"https://api.github.com/users/kevinleeTCA/events{/privacy}","received_events_url":"https://api.github.com/users/kevinleeTCA/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":4,"created_at":"2016-11-07T01:23:49Z","updated_at":"2016-11-07T05:09:49Z","closed_at":"2016-11-07T05:09:49Z","body":"I made the plugins work under the **Editor** tag, and I can type inline block like bold, underline,.. etc.\r\nI also install plugins like **Linkify**, **Mentions** and **Emoji**, it shows correctly in the editing box. \r\n\r\nBut 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.\r\n\r\nWhat I did is that converting editor state to raw state \r\n`let rawState = convertToRaw(this.state.editorState.getCurrentContent()`\r\nthen, create a editorState for rendering as follows\r\n`const blocks = convertFromRaw(rawState);`\r\n  `this.state = {editorState: EditorState.createWithContent(blocks)};`\r\nand try to rendering it using `Editor` with `readOnly={true}`, \r\nDefining the rendering component like\r\n\r\n\r\n    render(){\r\n        return <div className=\"RichEditor-root message-display-root\">\r\n                <div className=\"RichEditor-editor message-display-editor\">\r\n                    <Editor\r\n                        blockStyleFn={getBlockStyle}\r\n                        customStyleMap={styleMap}\r\n                        editorState = {this.state.editorState}\r\n                        readOnly={true}\r\n                        plugins={plugins}\r\n                        onChange={()=>{}}\r\n                        />\r\n                </div>\r\n        </div>;\r\n    }\r\n\r\n\r\nAll 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.\r\nWhen 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.\r\n"}}
{"actor":{"display_login":"kevinleeTCA"}}