HtmlEditor: Apply converter on init

DevExpress · Nov 7, 2024 · 3a2cbbd · 3a2cbbd
1 parent a4df88c
commit 3a2cbbd
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 20 deletions.
diff --git a/packages/devextreme/js/__internal/ui/html_editor/m_html_editor.ts b/packages/devextreme/js/__internal/ui/html_editor/m_html_editor.ts
@@ -70,6 +70,15 @@ const HtmlEditor = Editor.inherit({
     this.callBase();
     this._cleanCallback = Callbacks();
     this._contentInitializedCallback = Callbacks();
+    this._prepareHtmlConverter();
+  },
+
+  _prepareHtmlConverter(): void {
+    const { converter } = this.option();
+
+    if (converter) {
+      this._htmlConverter = converter;
+    }
   },
 
   _getAnonymousTemplateName() {
@@ -230,10 +239,14 @@ const HtmlEditor = Editor.inherit({
   _updateContainerMarkup() {
     const { value } = this.option();
 
-    if (value) {
-      const sanitizedMarkup = this._removeXSSVulnerableHtml(value);
-      this._$htmlContainer.html(sanitizedMarkup);
+    if (!value) {
+      return;
     }
+
+    const html = this._htmlConverter?.toHtml?.(value) || value;
+    const sanitizedHtml = this._removeXSSVulnerableHtml(html);
+
+    this._$htmlContainer.html(sanitizedHtml);
   },
 
   _render() {
@@ -262,12 +275,6 @@ const HtmlEditor = Editor.inherit({
         this._deltaConverter = new DeltaConverter();
       }
     }
-
-    const { converter } = this.option();
-
-    if (converter) {
-      this._htmlConverter = converter;
-    }
   },
 
   _renderContentImpl() {

diff --git a/packages/devextreme/playground/jquery.html b/packages/devextreme/playground/jquery.html
@@ -16,27 +16,45 @@
         document.getElementsByTagName("head")[0].appendChild(link);
     </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>
+
     <script type="text/javascript" src="../artifacts/js/jquery.js"></script>
     <!-- HtmlEditor -->
-    <!-- <script type="text/javascript" src="../artifacts/js/dx-quill.min.js"></script> -->
+    <script type="text/javascript" src="../artifacts/js/dx-quill.min.js"></script>
 
-    <!--<script type="text/javascript" src="../artifacts/js/cldr.js"></script>
+    <script type="text/javascript" src="../artifacts/js/cldr.js"></script>
     <script type="text/javascript" src="../artifacts/js/cldr/event.js"></script>
     <script type="text/javascript" src="../artifacts/js/cldr/supplemental.js"></script>
     <script type="text/javascript" src="../artifacts/js/cldr/unresolved.js"></script>
     <script type="text/javascript" src="../artifacts/js/globalize.js"></script>
     <script type="text/javascript" src="../artifacts/js/globalize/message.js"></script>
     <script type="text/javascript" src="../artifacts/js/globalize/number.js"></script>
     <script type="text/javascript" src="../artifacts/js/globalize/currency.js"></script>
-    <script type="text/javascript" src="../artifacts/js/globalize/date.js"></script>-->
+    <script type="text/javascript" src="../artifacts/js/globalize/date.js"></script>
 
-    <!--
+
     <script type="text/javascript" src="../artifacts/js/exceljs.min.js"></script>
     <script type="text/javascript" src="../artifacts/js/FileSaver.min.js"></script>
     <script type="text/javascript" src="../artifacts/js/jszip.min.js"></script>
     <script type="text/javascript" src="../artifacts/js/jspdf.umd.min.js"></script>
     <script type="text/javascript" src="../artifacts/js/jspdf.plugin.autotable.min.js"></script>
-    -->
+
 
     <script type="text/javascript" src="../artifacts/js/dx.all.debug.js" charset="utf-8"></script>
     <script type="text/javascript" src="./themeSelector.js"></script>
@@ -51,12 +69,37 @@ <h1 style="position: fixed; left: 0; top: 0; clip: rect(1px, 1px, 1px, 1px);">Te
         <br />
         <div id="button"></div>
         <script>
-            $(function() {
-                $("#button").dxButton({
-                    text: 'Click me!',
-                    onClick: function() { alert("clicked"); }
-                });
-            });
+          $(() => {
+            const converter = {
+              toHtml(value) {
+                const result = unified()
+                  .use(remarkParse)
+                  .use(remarkRehype)
+                  .use(rehypeStringify)
+                  .processSync(value)
+                  .toString();
+
+                return result;
+              },
+              fromHtml(value) {
+                const result = window.unified()
+                  .use(rehypeParse, { fragment: true })
+                  .use(rehypeRemark)
+                  .use(remarkStringify)
+                  .processSync(value)
+                  .toString();
+
+                return result;
+              }
+            };
+
+            const editorInstance = $('#button').dxHtmlEditor({
+              height: 300,
+              converter,
+              value: '**value**',
+              // value: '<div>value</div>',
+            }).dxHtmlEditor('instance');
+          });
         </script>
     </div>
 </body>