fix: the editor cannot apply empty string attributes to wysiwyg node (#…

…1781) * fix: add controls attribute for video * fix: set attritutes properly with empty string * chore: add test case(empty string attributes) * fix: remove attribute when value is null or undefined * chore: apply code review
nhn · Aug 31, 2021 · 8bcc287 · 8bcc287
1 parent 25d095c
commit 8bcc287
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 5 deletions.
diff --git a/apps/editor/src/__test__/unit/editor.spec.ts b/apps/editor/src/__test__/unit/editor.spec.ts
@@ -864,6 +864,24 @@ describe('editor', () => {
 
         expect(wwEditor.innerHTML).toContain(result);
       });
+
+      it('should keep the html attributes with an empty string after changing the mode', () => {
+        createEditor({
+          el: container,
+          initialValue: '<iframe width="" height="" src=""></iframe>',
+          previewHighlight: false,
+          // add iframe html block renderer
+          customHTMLRenderer: createHTMLrenderer(),
+        });
+
+        editor.changeMode('wysiwyg');
+
+        const result = oneLineTrim`
+          <iframe width="" height="" src="" class="html-block"></iframe>
+        `;
+
+        expect(wwEditor.innerHTML).toContain(result);
+      });
     });
 
     describe('hooks option', () => {

diff --git a/apps/editor/src/sanitizer/htmlSanitizer.ts b/apps/editor/src/sanitizer/htmlSanitizer.ts
@@ -16,7 +16,7 @@ const reHTMLAttr = new RegExp(
     'ismap|lang|language|nohref|nowrap|rel|rev|rows|rules|' +
     'scope|scrolling|shape|size|span|start|summary|tabindex|target|title|type|' +
     'valign|value|vspace|width|checked|mathvariant|encoding|id|name|' +
-    'background|cite|href|longdesc|src|usemap|xlink:href|data-+|checked|style)',
+    'background|cite|href|longdesc|src|usemap|xlink:href|data-+|checked|style|controls)',
   'g'
 );
 

diff --git a/apps/editor/src/utils/common.ts b/apps/editor/src/utils/common.ts
@@ -108,7 +108,7 @@ export function quote(text: string) {
   return result[0] + text + result[1];
 }
 
-function isNil(value: unknown): value is null | undefined {
+export function isNil(value: unknown): value is null | undefined {
   return isNull(value) || isUndefined(value);
 }
 

diff --git a/apps/editor/src/utils/dom.ts b/apps/editor/src/utils/dom.ts
@@ -7,6 +7,7 @@ import addClass from 'tui-code-snippet/domUtil/addClass';
 import removeClass from 'tui-code-snippet/domUtil/removeClass';
 import matches from 'tui-code-snippet/domUtil/matches';
 import { HTML_TAG, OPEN_TAG } from './constants';
+import { isNil } from './common';
 
 export function isPositionInBox(style: CSSStyleDeclaration, offsetX: number, offsetY: number) {
   const left = parseInt(style.left, 10);
@@ -229,10 +230,10 @@ export function prependNode(node: Element, appended: string | ArrayLike<Element>
 
 export function setAttributes(attributes: Record<string, any>, element: HTMLElement) {
   Object.keys(attributes).forEach((attrName) => {
-    if (attributes[attrName]) {
-      element.setAttribute(attrName, attributes[attrName]);
-    } else {
+    if (isNil(attributes[attrName])) {
       element.removeAttribute(attrName);
+    } else {
+      element.setAttribute(attrName, attributes[attrName]);
     }
   });
 }