fix: heading removed when changing to paragraph in wysiwyg (fix #878) (…

…#1040)
nhn · Jun 11, 2020 · 7c00b60 · 7c00b60
1 parent 52104fb
commit 7c00b60
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 6 deletions.
diff --git a/apps/editor/src/js/wwHeadingManager.js b/apps/editor/src/js/wwHeadingManager.js
@@ -57,6 +57,7 @@ class WwHeadingManager {
 
     this.wwe.addKeyEventHandler('BACK_SPACE', (ev, range) => {
       if (this.wwe.hasFormatWithRx(FIND_HEADING_RX)) {
+        this._addBrToEmptyBlock(range);
         this._removePrevTopNodeIfNeed(ev, range);
 
         return false;
@@ -155,6 +156,27 @@ class WwHeadingManager {
     return isHandled;
   }
 
+  _getHeadingElement(element) {
+    const isHeading = FIND_HEADING_RX.test(domUtils.getNodeName(element));
+
+    return isHeading ? element : domUtils.parents(element, 'h1,h2,h3,h4,h5,h6')[0];
+  }
+
+  _addBrToEmptyBlock(range) {
+    const { collapsed, startOffset, startContainer } = range;
+
+    if (collapsed && startOffset === 1) {
+      const headingElement = this._getHeadingElement(startContainer);
+      const brs = domUtils.children(headingElement.firstChild, 'br');
+
+      if (!brs.length) {
+        const br = document.createElement('br');
+
+        startContainer.parentNode.appendChild(br);
+      }
+    }
+  }
+
   /**
    * Remove heading and change selection
    * @param {object} event Event object
@@ -167,10 +189,7 @@ class WwHeadingManager {
     const { startContainer } = range;
     const sq = this.wwe.getEditor();
     const body = this.wwe.getBody();
-    const isHeading = FIND_HEADING_RX.test(domUtils.getNodeName(startContainer));
-    const headingElement = isHeading
-      ? startContainer
-      : domUtils.parents(startContainer, 'h1,h2,h3,h4,h5,h6')[0];
+    const headingElement = this._getHeadingElement(startContainer);
     let targetNode = prevTopNode;
     let offset = 1;
 

diff --git a/apps/editor/test/unit/wwHeadingManager.spec.js b/apps/editor/test/unit/wwHeadingManager.spec.js
@@ -7,7 +7,7 @@ import EventManager from '@/eventManager';
 import WwHeadingManager from '@/wwHeadingManager';
 
 describe('WwHeadingManager', () => {
-  let container, em, wwe;
+  let container, em, wwe, mgr;
 
   beforeEach(() => {
     container = document.createElement('div');
@@ -19,7 +19,7 @@ describe('WwHeadingManager', () => {
 
     wwe.init();
 
-    wwe._headingMgr = new WwHeadingManager(wwe);
+    mgr = new WwHeadingManager(wwe);
   });
 
   // we need to wait squire input event process
@@ -37,4 +37,17 @@ describe('WwHeadingManager', () => {
     expect(wwe.getBody().querySelectorAll('h1 div').length).toEqual(1);
     expect(wwe.getBody().querySelectorAll('h1 div')[0].textContent).toEqual('text1');
   });
+
+  it('_addBrToEmptyBlock()', () => {
+    wwe.getEditor().setHTML('<h1><div></div></h1>');
+
+    const range = wwe.getEditor().getSelection();
+
+    range.setStart(wwe.getBody().querySelector('h1'), 1);
+    range.collapse(true);
+
+    mgr._addBrToEmptyBlock(range);
+
+    expect(wwe.getBody().querySelector('h1').innerHTML).toBe('<div><br></div>');
+  });
 });