From 541fdcb2019d3d2e608ef098ebd0b83ad3ae99d1 Mon Sep 17 00:00:00 2001 From: Cheruiyot Collins Date: Tue, 13 Oct 2020 18:05:41 +0300 Subject: [PATCH] now accepts draftjs model as input, stringified model --- draftjs-html-source/draftjs-source.html | 7 ++++--- draftjs-web/src/App.tsx | 12 +++++++++++- 2 files changed, 15 insertions(+), 4 deletions(-) diff --git a/draftjs-html-source/draftjs-source.html b/draftjs-html-source/draftjs-source.html index 974e84a..ce78a0c 100644 --- a/draftjs-html-source/draftjs-source.html +++ b/draftjs-html-source/draftjs-source.html @@ -1,3 +1,4 @@ -React App
+React App
diff --git a/draftjs-web/src/App.tsx b/draftjs-web/src/App.tsx index 608aae4..528fa04 100644 --- a/draftjs-web/src/App.tsx +++ b/draftjs-web/src/App.tsx @@ -7,6 +7,9 @@ import { DefaultDraftBlockRenderMap, DraftHandleValue, convertToRaw, + ContentState, + convertFromRaw, + convertFromHTML, } from 'draft-js'; import { stateFromHTML } from 'draft-js-import-html'; import { stateToHTML } from 'draft-js-export-html'; @@ -17,6 +20,8 @@ import EditorController from './Components/EditorController/EditorController'; import { ICustomWindow } from './types/ICustomWindow'; declare let window: ICustomWindow; +const blob = + '{"blocks":[{"key":"bkha4","text":"This is a Main Heading","type":"header-one","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}},{"key":"76ipm","text":"This is a text block.","type":"unstyled","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}},{"key":"ascg","text":"This is a list","type":"unordered-list-item","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}},{"key":"9um5u","text":"With multiple items","type":"unordered-list-item","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}},{"key":"5l5nn","text":"In it","type":"unordered-list-item","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}},{"key":"c4p9a","text":"This is a sub-heading","type":"header-two","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}},{"key":"4vqhn","text":"And this is another text block","type":"unstyled","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}},{"key":"3vknd","text":"This is a numbered","type":"ordered-list-item","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}},{"key":"56mei","text":"List with about","type":"ordered-list-item","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}},{"key":"365ag","text":"3 items in it","type":"ordered-list-item","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}},{"key":"6mtqe","text":"This is a small heading","type":"header-three","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}},{"key":"78d5h","text":"And this is some formatted text","type":"unstyled","depth":0,"inlineStyleRanges":[{"offset":4,"length":4,"style":"SUPERSCRIPT"},{"offset":9,"length":2,"style":"STRIKETHROUGH"},{"offset":12,"length":4,"style":"ITALIC"},{"offset":17,"length":9,"style":"BOLD"},{"offset":27,"length":4,"style":"UNDERLINE"}],"entityRanges":[],"data":{}}],"entityMap":{}}'; /** * For testing the post messages @@ -29,10 +34,13 @@ declare let window: ICustomWindow; export type defaultSourceType = 'string'; function App() { + const _draftEditorRef = useRef(null); + const [editorState, setEditorState] = useState(() => EditorState.createEmpty() ); + const [placeholder, setPlaceholder] = useState(''); const [editorStyle, setEditorStyle] = useState(''); const [styleMap, setStyleMap] = useState({}); @@ -80,7 +88,8 @@ function App() { const setDefaultValue = (data: defaultSourceType) => { try { if (data) { - setEditorState(EditorState.createWithContent(stateFromHTML(data))); + const stateFromBlob = convertFromRaw(JSON.parse(data)); + setEditorState(EditorState.createWithContent(stateFromBlob)); } } catch (e) { console.error(e); @@ -146,6 +155,7 @@ function App() { JSON.stringify({ editorState: stateToHTML(editorState.getCurrentContent()), rawState: convertToRaw(editorState.getCurrentContent()), + plainText: editorState.getCurrentContent().getPlainText('\u0001'), markdownState: stateToMarkdown(editorState.getCurrentContent()), blockType: editorBlockType, styles: styleString,