How do i display the html code in react-draft-wysiwyg style?

[TimonPeng]

There may be some conflict of style.

I want to display html with react-draft-wysiwyg component.

What is your input, what is you see. Wysiwyg.

[jpuri]

Hey @TimonPeng do you need to display html generated at some other place in editor while also allowing user to edit it ?

Can you make your use case more clear ?

[LuisUrrutia]

@jpuri I need to do exactly what you described! How can I make that?

[zdsfwy]

Hi, any progress about this question?

[kovloq]

Hi, any progress about this question?

[chapter247-yash]

Please help me with this ?

[Lars-Nijboer]

Have you taken a look at the demo page? It shows this exact usecase in html, draft, json

[juanlanus]

You might want to check this:
https://jpuri.github.io/react-draft-wysiwyg/#/docs
(scroll to the end of the page, to the "HTML" heading)

[M-Umais-Hassan]

import { useEffect, useState, cloneElement } from 'react'; import { Button, message, Modal, Typography } from 'antd'; import { EditorState, ContentState, convertFromHTML, convertToRaw, } from 'draft-js'; import { getSelectedTranslation } from '../../gqlOperations/assessmentText/queries'; import { Editor } from 'react-draft-wysiwyg'; import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'; import { updateInstructionTranslation } from '../../gqlOperations/assessmentText/mutations'; import draftToHtml from 'draftjs-to-html'; import htmlToDraft from 'html-to-draftjs'; import { useMutation, useLazyQuery } from '@apollo/client';

const { Title } = Typography; const ModalTitle = () => ( <> <Title level={2} className="mb-0"> Edit </Title> </> );

const ViewCode = ({ toggleEditorCode, showCode }) => { return ( <Button onClick={toggleEditorCode}> {showCode ? 'Hide' : 'Show'} Code </Button> ); };

const EditInstruction = ({ children, data, updateInstructions, selectedLanguageId, getTitle, getStatement, }) => { const [ updateTranslation, { data: updatingData, loading: updatingLoading, error: updatingError }, ] = useMutation(updateInstructionTranslation); const getHtmlFormat = (data) => { return data ? EditorState?.createWithContent( ContentState?.createFromBlockArray(convertFromHTML(data)), ) : ''; }; const [selectedTranslations] = useLazyQuery(getSelectedTranslation); const [visible, setVisible] = useState(false); const [editorState, setEditorState] = useState(); const [editorHTML, setEditorHTML] = useState(''); const [showCode, setShowCode] = useState(false);

const onVisible = (e) => { e.stopPropagation(); setVisible(true); };

const onEditorStateChange = (editor) => { const editorHTML = draftToHtml(convertToRaw(editor.getCurrentContent())); setEditorState(editor); setEditorHTML(editorHTML); };

const onEditEditorHTML = (e) => { let editor; const editorHTML = e.target.value; const contentBlock = htmlToDraft(editorHTML); if (contentBlock) { const contentState = ContentState.createFromBlockArray( contentBlock.contentBlocks, ); editor = EditorState.createWithContent(contentState); } else { editor = EditorState.createEmpty(); } setEditorState(editor); setEditorHTML(editorHTML); };

const toggleEditorCode = () => { setShowCode(!showCode); };

function validateHTML(htmlString) { let parser = new DOMParser(); let doc = parser.parseFromString(htmlString, 'application/xml'); let errorNode = doc.querySelector('parsererror'); if (errorNode) { console.log(errorNode); return { errorMsg: errorNode, hasError: true, }; } else { return { errorMsg: '', hasError: false, }; } }

const handleOk = async () => { let currentTranslation = data?.page_title_question?.page_title_question_translations?.find( (el) => el.language_id == selectedLanguageId, ); const text = draftToHtml(convertToRaw(editorState?.getCurrentContent())); console.log('validate html', validateHTML(text)); // await updateTranslation({ // variables: { // translationData: { // title: getTitle(data), // statement: text, // page_title_question_translation_id: currentTranslation?.is_edited // ? currentTranslation?.page_title_question_translation_id // : currentTranslation?.id, // page_id: data?.id, // ...(currentTranslation?.is_edited // ? { // id: currentTranslation?.id, // } // : []), // }, // }, // }) // .then(async (res) => { // setVisible(false); // await selectedTranslations({ // variables: { // page_id: data?.id, // code: data?.page_title_question?.code, // }, // }).then((res) => { // updateInstructions(res, data?.id); // }); // }) // .catch((err) => message.error('Something went wrong')); };

useEffect(() => { console.log(data); data && setEditorState(getHtmlFormat(getStatement(data, selectedLanguageId))); data && setEditorHTML(getStatement(data, selectedLanguageId)); }, [selectedLanguageId]);

return ( <> {children && cloneElement(children, { onClick: onVisible, })} <Modal width={'100%'} className="add-leader-modal" closeIcon={<i className="icon-close">} title={<ModalTitle />} visible={visible} onOk={handleOk} confirmLoading={updatingLoading} onCancel={() => { setVisible(false); }} cancelButtonProps={{ type: 'link', }} okButtonProps={{ size: 'large', }} > <Editor wrapperClassName="editor-wrapper" toolbarClassName="toolbar-wrapper" editorClassName="text-editor-wrapper" editorState={editorState} onEditorStateChange={onEditorStateChange} toolbarCustomButtons={[ <ViewCode toggleEditorCode={toggleEditorCode} showCode={showCode} />, ]} /> {showCode && ( <> <h3 className="html-code-heading"> HTML Code <textarea className="html-code-style" value={editorHTML} onChange={onEditEditorHTML} style={{ width: '100%', padding: '20px' }} rows={6} /> </> )} </Modal> </> ); }; export default EditInstruction;