fix: cannot convert details, summary block using useDefaultHTMLSanitizer: false option

apps/editor/src/js/convertor.js

@@ -19,6 +19,7 @@ const attribute = `(?:\\s+${attrName}(?:\\s*=\\s*${attrValue})?)*\\s*`;
 const openingTag = `(\\\\<|<)([A-Za-z][A-Za-z0-9\\-]*${attribute})(\\/?>)`;
 const HTML_TAG_RX = new RegExp(openingTag, 'g');
 const FRONT_MATTER_RX = /^\s?\\-\\-\\-([\s\S]+?)\\-\\-\\-/;
+const NBSP_RX = /&nbsp;/g;
 
 /**
  * Class Convertor
@@ -180,7 +181,7 @@ class Convertor {
       result[index] = line;
     });
 
-    return result.join('\n');
+    return result.join('\n').replace(NBSP_RX, ' ');
   }
 
   _removeNewlinesBeforeAfterAndBlockElement(markdown) {

apps/editor/src/js/mdPreview.js

@@ -166,14 +166,14 @@ class MarkdownPreview extends Preview {
         startEl.insertAdjacentHTML('beforebegin', newHtml);
         let el = startEl;
 
-        while (el !== endEl) {
+        while (el && el !== endEl) {
           const nextEl = el.nextElementSibling;
 
           el.parentNode.removeChild(el);
           removeOffsetInfoByNode(el);
           el = nextEl;
         }
-        if (el.parentNode) {
+        if (el && el.parentNode) {
           domUtils.remove(el);
           removeOffsetInfoByNode(el);
         }

apps/editor/src/js/wysiwygEditor.js

@@ -30,6 +30,7 @@ import KeyMapper from './keyMapper';
 import WwTextObject from './wwTextObject';
 import ComponentManager from './componentManager';
 import CodeBlockGadget from './ui/codeBlockGadget';
+import htmlSanitizer from './htmlSanitizer';
 
 const keyMapper = KeyMapper.getSharedInstance();
 
@@ -83,7 +84,8 @@ class WysiwygEditor {
       leafNodeNames: {
         HR: false
       },
-      allowedBlocks: this._sanitizer ? [] : ['details', 'summary']
+      allowedBlocks:
+        this._sanitizer && this._sanitizer === htmlSanitizer ? [] : ['details', 'summary']
     });
     this.editor.blockCommandShortcuts();
 

apps/editor/test/unit/convertor.spec.js

@@ -744,3 +744,22 @@ describe('Convertor', () => {
     });
   });
 });
+
+describe('Convertor without default sanitizer', () => {
+  let convertor, em;
+
+  beforeEach(() => {
+    em = new EventManager();
+    convertor = new Convertor(em);
+    convertor.initHtmlSanitizer(html => html);
+  });
+
+  it('should convert details block without default sanitizer', () => {
+    const markdown = '<details><summary>2021</summary>test</details>';
+    const html =
+      '<details data-tomark-pass=""><summary data-tomark-pass="">2021</summary>test</details>\n';
+
+    expect(convertor.toHTML(markdown)).toBe(html);
+    expect(convertor.toMarkdown(html)).toBe(markdown);
+  });
+});

apps/editor/test/unit/wysiwygEditor.spec.js

@@ -753,4 +753,13 @@ describe('WysiwygEditor', () => {
   it('getSanitizer()', () => {
     expect(wwe.getSanitizer()).toEqual(sanitizer);
   });
+
+  it('should render details block without default sanitizer', () => {
+    const html = '<details><summary>2021</summary>test</details>';
+    const result = '<details><summary>2021</summary>test<br /></details><br />';
+
+    wwe.setValue(html);
+
+    expect(wwe.getValue()).toEqual(result);
+  });
 });

libs/toastmark/src/__sample__/index.ts

@@ -57,12 +57,14 @@ cm.on('change', (editor, changeObj) => {
       if (startEl) {
         startEl.insertAdjacentHTML('beforebegin', newHtml);
         let el: Element = startEl;
-        while (el !== endEl) {
+        while (el && el !== endEl) {
           const nextEl: Element | null = el.nextElementSibling;
           el.remove();
           el = nextEl!;
         }
-        el.remove();
+        if (el) {
+          el.remove();
+        }
       }
     }