feat(htmleditor): Add react demo && Add deps in script module for vue

apps/demos/Demos/HtmlEditor/MarkdownSupport/React/App.tsx

@@ -1,95 +1,80 @@
 import React, { useCallback, useState } from 'react';
 import HtmlEditor, { Toolbar, Item } from 'devextreme-react/html-editor';
-import ButtonGroup, { Item as ButtonItem } from 'devextreme-react/button-group';
-import prettier from 'prettier/standalone';
-import parserHtml from 'prettier/parser-html';
 import { markup } from './data.ts';
 
-const sizeValues = ['8pt', '10pt', '12pt', '14pt', '18pt', '24pt', '36pt'];
-const fontValues = ['Arial', 'Courier New', 'Georgia', 'Impact', 'Lucida Console', 'Tahoma', 'Times New Roman', 'Verdana'];
-const defaultSelectedItemKeys = ['Html'];
-const fontSizeOptions = {
+const headerValues = [false, 1, 2, 3, 4, 5];
+const headerOptions = {
   inputAttr: {
-    'aria-label': 'Font size',
+    'aria-label': 'Font family',
   },
 };
-const fontFamilyOptions = {
-  inputAttr: {
-    'aria-label': 'Font family',
+const converter = {
+  toHtml(value) {
+    // @ts-expect-error
+    const result = unified()
+      // @ts-expect-error
+      .use(remarkParse)
+      // @ts-expect-error
+      // eslint-disable-next-line spellcheck/spell-checker
+      .use(remarkRehype)
+      // @ts-expect-error
+      // eslint-disable-next-line spellcheck/spell-checker
+      .use(rehypeStringify)
+      .processSync(value)
+      .toString();
+
+    return result;
+  },
+  fromHtml(value) {
+    // @ts-expect-error
+    const result = unified()
+      // @ts-expect-error
+      // eslint-disable-next-line spellcheck/spell-checker
+      .use(rehypeParse)
+      // eslint-disable-next-line spellcheck/spell-checker
+      // @ts-expect-error
+      .use(rehypeRemark)
+      // @ts-expect-error
+      .use(remarkStringify)
+      .processSync(value)
+      .toString();
+
+    return result;
   },
 };
 
 export default function App() {
   const [valueContent, setValueContent] = useState(markup);
-  const [editorValueType, setEditorValueType] = useState<'html' | 'markdown'>('html');
 
   const valueChanged = useCallback((e: { value?: string; }) => {
     setValueContent(e.value);
   }, [setValueContent]);
 
-  const valueTypeChanged = useCallback((e: { addedItems: { text: string; }[]; }) => {
-    const newEditorValue = e.addedItems[0].text.toLowerCase() as 'html' | 'markdown';
-    setEditorValueType(newEditorValue);
-  }, [setEditorValueType]);
-
-  const prettierFormat = useCallback((text) => {
-    if (editorValueType === 'html') {
-      return prettier.format(text, {
-        parser: 'html',
-        plugins: [parserHtml],
-      });
-    }
-    return text;
-  }, [editorValueType]);
-
   return (
     <div className="widget-container">
       <HtmlEditor
+        converter={converter}
         height={300}
         defaultValue={valueContent}
-        valueType={editorValueType}
         onValueChanged={valueChanged}
       >
         <Toolbar>
           <Item name="undo" />
           <Item name="redo" />
           <Item name="separator" />
-          <Item
-            name="size"
-            acceptedValues={sizeValues}
-            options={fontSizeOptions}
-          />
-          <Item
-            name="font"
-            acceptedValues={fontValues}
-            options={fontFamilyOptions}
-          />
-          <Item name="separator" />
           <Item name="bold" />
           <Item name="italic" />
-          <Item name="strike" />
-          <Item name="underline" />
           <Item name="separator" />
-          <Item name="alignLeft" />
-          <Item name="alignCenter" />
-          <Item name="alignRight" />
-          <Item name="alignJustify" />
-          <Item name="separator" />
-          <Item name="color" />
-          <Item name="background" />
+          <Item name="header" acceptedValues={headerValues} options={headerOptions} />
         </Toolbar>
       </HtmlEditor>
 
       <div className="options">
-        <ButtonGroup
-          onSelectionChanged={valueTypeChanged}
-          defaultSelectedItemKeys={defaultSelectedItemKeys}
-        >
-          <ButtonItem text="Html" />
-          <ButtonItem text="Markdown" />
-        </ButtonGroup>
+        <div className="value-title">
+          Contents of the value option
+        </div>
         <div className="value-content" tabIndex={0}>
-          {prettierFormat(valueContent)}
+          {valueContent}
         </div>
       </div>
     </div>

apps/demos/Demos/HtmlEditor/MarkdownSupport/React/data.ts

@@ -1 +1,4 @@
-export const markup = '<h2><img src="../../../../images/widgets/HtmlEditor.svg" alt="HtmlEditor"> Formatted Text Editor (HTML Editor)</h2><p><br></p><p>DevExtreme JavaScript HTML Editor is a client-side WYSIWYG text editor that allows its users to format textual and visual content and store it as HTML or Markdown.</p>';
+export const markup = `## Formatted Text Editor (HTML Editor)
+
+DevExtreme JavaScript HTML Editor is a client-side WYSIWYG text editor that allows its users to format textual and visual content and store it as HTML.
+`;

apps/demos/Demos/HtmlEditor/MarkdownSupport/React/index.html

@@ -8,6 +8,24 @@
     <link rel="stylesheet" type="text/css" href="../../../../node_modules/devextreme-dist/css/dx.light.css" />
     <link rel="stylesheet" type="text/css" href="styles.css" />
 
+    <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>
+
     <script src="../../../../node_modules/core-js/client/shim.min.js"></script>
     <script src="../../../../node_modules/systemjs/dist/system.js"></script>
     <script type="text/javascript" src="config.js"></script>

apps/demos/Demos/HtmlEditor/MarkdownSupport/React/styles.css

@@ -1,6 +1,6 @@
-.dx-htmleditor-content img {
-  vertical-align: middle;
-  padding-right: 10px;
+.value-title {
+  font-size: 18px;
+  font-weight: 500;
 }
 
 .value-content {

apps/demos/Demos/HtmlEditor/MarkdownSupport/Vue/App.vue

@@ -40,28 +40,21 @@ import {
   DxToolbar,
   DxItem,
 } from 'devextreme-vue/html-editor';
-import { unified } from 'unified';
-import remarkParse from 'remark-parse';
-// eslint-disable-next-line spellcheck/spell-checker
-import remarkRehype from 'remark-rehype';
-// eslint-disable-next-line spellcheck/spell-checker
-import rehypeStringify from 'rehype-stringify';
-// eslint-disable-next-line spellcheck/spell-checker
-import rehypeParse from 'rehype-parse';
-// eslint-disable-next-line spellcheck/spell-checker
-import rehypeRemark from 'rehype-remark';
-import remarkStringify from 'remark-stringify';
 import { markup } from './data.ts';
 
 const valueContent = ref(markup);
 const headerValues = [false, 1, 2, 3, 4, 5];
 const headerOptions = { inputAttr: { 'aria-label': 'Font family' } };
 const converter = {
   toHtml(value) {
+    // @ts-expect-error
     const result = unified()
+      // @ts-expect-error
       .use(remarkParse)
+      // @ts-expect-error
       // eslint-disable-next-line spellcheck/spell-checker
       .use(remarkRehype)
+      // @ts-expect-error
       // eslint-disable-next-line spellcheck/spell-checker
       .use(rehypeStringify)
       .processSync(value)
@@ -70,11 +63,15 @@ const converter = {
     return result;
   },
   fromHtml(value) {
+    // @ts-expect-error
     const result = unified()
+      // @ts-expect-error
       // eslint-disable-next-line spellcheck/spell-checker
       .use(rehypeParse)
       // eslint-disable-next-line spellcheck/spell-checker
+      // @ts-expect-error
       .use(rehypeRemark)
+      // @ts-expect-error
       .use(remarkStringify)
       .processSync(value)
       .toString();

apps/demos/Demos/HtmlEditor/MarkdownSupport/Vue/index.html

@@ -10,8 +10,22 @@
     <script src="../../../../node_modules/typescript/lib/typescript.js"></script>
     <script type="module">
       import * as vueCompilerSFC from "../../../../node_modules/@vue/compiler-sfc/dist/compiler-sfc.esm-browser.js";
+      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.vueCompilerSFC = vueCompilerSFC;
+      window.unified = unified;
+      window.remarkParse = remarkParse;
+      window.remarkRehype = remarkRehype;
+      window.rehypeStringify = rehypeStringify;
+      window.rehypeParse = rehypeParse;
+      window.rehypeRemark = rehypeRemark;
+      window.remarkStringify = remarkStringify;
     </script>
     <script src="../../../../node_modules/core-js/client/shim.min.js"></script>
     <script src="../../../../node_modules/systemjs/dist/system.js"></script>