Html Editor - Markdown Support

@section ExternalDependencies { <script src="https://unpkg.com/devextreme-quill@1.7.1/dist/dx-quill.min.js"></script> <script type="module"> import { unified } from "https://esm.sh/unified@11?bundle"; import remarkParse from "https://esm.sh/remark-parse@11?bundle"; import remarkRehype from "https://esm.sh/remark-rehype@11?bundle"; import rehypeStringify from "https://esm.sh/rehype-stringify@10?bundle"; import rehypeParse from "https://esm.sh/rehype-parse@9?bundle"; import rehypeRemark from "https://esm.sh/rehype-remark@10?bundle"; import remarkStringify from "https://esm.sh/remark-stringify@11?bundle"; window.unified = unified; window.remarkParse = remarkParse; window.remarkRehype = remarkRehype; window.rehypeStringify = rehypeStringify; window.rehypeParse = rehypeParse; window.rehypeRemark = rehypeRemark; window.remarkStringify = remarkStringify; </script> } @functions { object GetInputAttr(string key, string value) { return new { inputAttr = new Dictionary<string, string>() { { key, value } } }; } } @(Html.DevExtreme().HtmlEditor() .ID("html_editor") .Height(300) .Converter(c => c .ToHtml("toHtml") .FromHtml("fromHtml") ) .Value(new JS("markup")) .OnValueChanged("valueChanged") .Toolbar(toolbar => toolbar.Items( items => { items.Add().Name(HtmlEditorToolbarItem.Undo); items.Add().Name(HtmlEditorToolbarItem.Redo); items.Add().Name(HtmlEditorToolbarItem.Separator); items.Add().Name(HtmlEditorToolbarItem.Bold); items.Add().Name(HtmlEditorToolbarItem.Italic); items.Add().Name(HtmlEditorToolbarItem.Separator); items.Add() .Name("header") .AcceptedValues(new JS("[false, 1, 2, 3, 4, 5]")) .Option("options", GetInputAttr("aria-label", "Header")); items.Add().Name(HtmlEditorToolbarItem.Separator); items.Add().Name(HtmlEditorToolbarItem.OrderedList); items.Add().Name(HtmlEditorToolbarItem.BulletList); }) ) ) <div class="options"> <div class="value-title">Markdown Preview</div> <div class="value-content" tabindex="0"></div> </div> <script> const updateValueContent = (value) => { $('.value-content').text(value); }; function toHtml(value) { const result = unified() .use(remarkParse) .use(remarkRehype) .use(rehypeStringify) .processSync(value) .toString(); return result; } function fromHtml(value) { const result = unified() .use(rehypeParse) .use(rehypeRemark) .use(remarkStringify) .processSync(value) .toString(); return result; }; function valueChanged({ value }) { updateValueContent(value); } var markup = `##  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**. `; updateValueContent(markup); </script>