Skip to content
This repository was archived by the owner on Dec 29, 2022. It is now read-only.

now accepts draftjs model as input, stringified model #32

Open
cherucole wants to merge 1 commit into
base: setup-bob
Choose a base branch
from
Open

now accepts draftjs model as input, stringified model #32

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions draftjs-html-source/draftjs-source.html
View file
Open in desktop

Large diffs are not rendered by default.

12 changes: 11 additions & 1 deletion draftjs-web/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -17,6 +20,8 @@ import EditorController from './Components/EditorController/EditorController';
import { ICustomWindow } from './types/ICustomWindow';

declare let window: ICustomWindow;
const blob =
Copy link
Copy Markdown
Member

@DaniAkash DaniAkash Oct 14, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure why we need this data for...

'{"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
Expand All @@ -29,10 +34,13 @@ declare let window: ICustomWindow;
export type defaultSourceType = 'string';

function App() {

const _draftEditorRef = useRef<Editor>(null);

const [editorState, setEditorState] = useState(() =>
EditorState.createEmpty()
);

const [placeholder, setPlaceholder] = useState('');
const [editorStyle, setEditorStyle] = useState('');
const [styleMap, setStyleMap] = useState({});
Expand Down Expand Up @@ -80,7 +88,8 @@ function App() {
const setDefaultValue = (data: defaultSourceType) => {
try {
if (data) {
setEditorState(EditorState.createWithContent(stateFromHTML(data)));
const stateFromBlob = convertFromRaw(JSON.parse(data));
Copy link
Copy Markdown
Member

@DaniAkash DaniAkash Oct 14, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We already have the text editor running for other people that uses HTML as the default input.

We probably have to keep using html as the default data for the inputs. However, provide an additional layer that will accept default value using different formats.

For eg:
If the user provides defaultValue as a string, it will accept the value as HTML.
To provide defaultValue as Markdown, Raw or HTML, we can have an object, that receives the data as

{type: "md", value: "value as markdown"}
{type: "raw", value: "value as raw stringified object"}
{type: "html", value: "value as html"}

setEditorState(EditorState.createWithContent(stateFromBlob));
}
} catch (e) {
console.error(e);
Expand Down Expand Up @@ -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,
Expand Down