React Html Editor - Markdown Support

The DevExtreme HTML Editor uses HTML markup to format document content. This demo module converts content to Markdown using the unified plugin library.

This sample implementation sets the HTML Editor's converter property to an object that implements two functions: toHtml and fromHtml.

To review our implementation, edit or format text within the HTML Editor control and see how the Markdown Preview section reflects changes.

TS JS

Backend API

import React, { useCallback, useState } from 'react'; import { unified } from "unified"; import remarkParse from "remark-parse"; import remarkRehype from "remark-rehype"; import remarkStringify from "remark-stringify"; import rehypeParse from "rehype-parse"; import rehypeRemark from "rehype-remark"; import rehypeStringify from "rehype-stringify"; import HtmlEditor, { Toolbar, Item } from 'devextreme-react/html-editor'; import { markup } from './data.ts'; const headerValues = [false, 1, 2, 3, 4, 5]; const headerOptions = { inputAttr: { 'aria-label': 'Header', }, }; const converter = { toHtml(value) { const result = unified() .use(remarkParse) .use(remarkRehype) .use(rehypeStringify) .processSync(value) .toString(); return result; }, fromHtml(value) { const result = unified() .use(rehypeParse) .use(rehypeRemark) .use(remarkStringify) .processSync(value) .toString(); return result; }, }; export default function App() { const [valueContent, setValueContent] = useState(markup); const valueChanged = useCallback((e: { value?: string; }) => { setValueContent(e.value); }, [setValueContent]); return ( <div className="widget-container"> <HtmlEditor converter={converter} height={300} defaultValue={valueContent} onValueChanged={valueChanged} > <Toolbar> <Item name="undo" /> <Item name="redo" /> <Item name="separator" /> <Item name="bold" /> <Item name="italic" /> <Item name="separator" /> <Item name="header" acceptedValues={headerValues} options={headerOptions} /> <Item name="separator" /> <Item name="orderedList" /> <Item name="bulletList" /> </Toolbar> </HtmlEditor> <div className="options"> <div className="value-title"> Markdown Preview </div> <div className="value-content" tabIndex={0}> {valueContent} </div> </div> </div> ); }

import React, { useCallback, useState } from 'react'; import { unified } from 'unified'; import remarkParse from 'remark-parse'; import remarkRehype from 'remark-rehype'; import remarkStringify from 'remark-stringify'; import rehypeParse from 'rehype-parse'; import rehypeRemark from 'rehype-remark'; import rehypeStringify from 'rehype-stringify'; import HtmlEditor, { Toolbar, Item } from 'devextreme-react/html-editor'; import { markup } from './data.js'; const headerValues = [false, 1, 2, 3, 4, 5]; const headerOptions = { inputAttr: { 'aria-label': 'Header', }, }; const converter = { toHtml(value) { const result = unified() .use(remarkParse) .use(remarkRehype) .use(rehypeStringify) .processSync(value) .toString(); return result; }, fromHtml(value) { const result = unified() .use(rehypeParse) .use(rehypeRemark) .use(remarkStringify) .processSync(value) .toString(); return result; }, }; export default function App() { const [valueContent, setValueContent] = useState(markup); const valueChanged = useCallback( (e) => { setValueContent(e.value); }, [setValueContent], ); return ( <div className="widget-container"> <HtmlEditor converter={converter} height={300} defaultValue={valueContent} onValueChanged={valueChanged} > <Toolbar> <Item name="undo" /> <Item name="redo" /> <Item name="separator" /> <Item name="bold" /> <Item name="italic" /> <Item name="separator" /> <Item name="header" acceptedValues={headerValues} options={headerOptions} /> <Item name="separator" /> <Item name="orderedList" /> <Item name="bulletList" /> </Toolbar> </HtmlEditor> <div className="options"> <div className="value-title">Markdown Preview</div> <div className="value-content" tabIndex={0} > {valueContent} </div> </div> </div> ); }

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.tsx'; ReactDOM.render( <App />, document.getElementById('app'), );

export const markup = `## ![HtmlEditor](../../../../images/widgets/HtmlEditor.svg) Formatted Text Editor (HTML Editor) Lists: 1. Use numbers followed by a period for an ordered list. 1. Use a single asterisk for a bullet list. Formats: * Enclose a word in single asterisks for *italic*. * Enclose a word in double asterisks for **bold**. `;

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render(<App />, document.getElementById('app'));

<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/25.1.7/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="https://cdn.jsdelivr.net/npm/core-js@2.6.12/client/shim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.tsx"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>

.dx-htmleditor-content img { vertical-align: middle; padding-right: 10px; margin-bottom: 22px; } .value-title { font-size: var(--dx-font-size-sm); font-weight: 500; } .value-content { margin-top: 20px; overflow: auto; height: 210px; white-space: pre-wrap; border: 1px solid var(--dx-color-border); padding: 16px; background-color: var(--dx-color-main-bg); } .options { margin-top: 20px; padding: 20px; background-color: rgba(191, 191, 191, 0.15); box-sizing: border-box; width: 100%; }