apply changeBlockFormatTo to wysiwyg block command resolve #210

nhn · Jan 2, 2020 · e3287dd · e3287dd
1 parent 224d54e
commit e3287dd
Show file tree

Hide file tree

Showing 7 changed files with 90 additions and 15 deletions.
diff --git a/apps/core/src/js/wysiwygCommands/blockquote.js b/apps/core/src/js/wysiwygCommands/blockquote.js
@@ -23,6 +23,7 @@ var Blockquote = CommandManager.command('wysiwyg',/** @lends Blockquote */{
     exec: function(wwe) {
         var sq = wwe.getEditor();
 
+        wwe.unwrapBlockTag();
         sq.increaseQuoteLevel();
         sq.focus();
     }

diff --git a/apps/core/src/js/wysiwygCommands/heading.js b/apps/core/src/js/wysiwygCommands/heading.js
@@ -35,19 +35,7 @@ var Heading = CommandManager.command('wysiwyg',/** @lends Heading */{
             depth = beforeDepth + 1;
         }
 
-        sq.modifyBlocks(function(frag) {
-            var newHeading, childrens;
-
-            if (beforeDepth) {
-                childrens = $(frag).find('h' + beforeDepth).children()[0];
-            } else {
-                childrens = frag;
-            }
-
-            newHeading = this.createElement('H' + depth, null, [childrens]);
-
-            return newHeading;
-        });
+        wwe.changeBlockFormatTo('H' + depth);
 
         sq.focus();
     }

diff --git a/apps/core/src/js/wysiwygCommands/ol.js b/apps/core/src/js/wysiwygCommands/ol.js
@@ -24,6 +24,7 @@ var OL = CommandManager.command('wysiwyg',/** @lends OL */{
     exec: function(wwe) {
         var sq = wwe.getEditor();
 
+        wwe.unwrapBlockTag();
         sq.makeOrderedList();
         sq.focus();
     }

diff --git a/apps/core/src/js/wysiwygCommands/task.js b/apps/core/src/js/wysiwygCommands/task.js
@@ -25,6 +25,7 @@ var Task = CommandManager.command('wysiwyg',/** @lends Task */{
             sq = wwe.getEditor();
 
         if (!sq.hasFormat('li')) {
+            wwe.unwrapBlockTag();
             sq.makeUnorderedList();
         }
 

diff --git a/apps/core/src/js/wysiwygCommands/ul.js b/apps/core/src/js/wysiwygCommands/ul.js
@@ -24,6 +24,7 @@ var UL = CommandManager.command('wysiwyg',/** @lends UL */{
     exec: function(wwe) {
         var sq = wwe.getEditor();
 
+        wwe.unwrapBlockTag();
         sq.makeUnorderedList();
         sq.focus();
     }

diff --git a/apps/core/src/js/wysiwygEditor.js b/apps/core/src/js/wysiwygEditor.js
@@ -8,7 +8,8 @@
 var Squire = window.Squire,
     util = ne.util;
 
-var FIND_HEADING_RX = /h[\d]/i;
+var FIND_HEADING_RX = /h[\d]/i,
+    FIND_BLOCK_TAGNAME_RX = /\b(H[\d]|LI|P|BLOCKQUOTE)\b/;
 
 /**
  * WysiwygEditor
@@ -147,7 +148,23 @@ WysiwygEditor.prototype._unwrapHeading = function() {
 };
 
 WysiwygEditor.prototype.unwrapBlockTag = function(condition) {
+    if (!condition) {
+        condition = function(tagName) {
+            return FIND_BLOCK_TAGNAME_RX.test(tagName);
+        };
+    }
+
     this.changeBlockFormat(condition);
+    this._removeTaskInputInWrongPlace();
+};
+
+
+WysiwygEditor.prototype._removeTaskInputInWrongPlace = function() {
+    this.get$Body().find('input:checkbox').each(function(index, node) {
+        if (node.parentNode.tagName !== 'LI') {
+            $(node).remove();
+        }
+    });
 };
 
 WysiwygEditor.prototype.changeBlockFormat = function(srcCondition, targetTagName) {
@@ -204,14 +221,20 @@ WysiwygEditor.prototype.changeBlockFormat = function(srcCondition, targetTagName
             current = current.parentNode;
         }
 
+        //if not source condition node not founded, we wrap current div node with node named targetTagName
+        if ((!newFrag || !srcCondition) && frag.childNodes[0].nodeType === Node.ELEMENT_NODE && frag.childNodes[0].tagName === 'DIV' && targetTagName) {
+            frag = self.getEditor().createElement(targetTagName, [frag.childNodes[0]]);
+        }
+
         return frag;
     });
 };
 
 WysiwygEditor.prototype.changeBlockFormatTo = function(targetTagName) {
     this.changeBlockFormat(function(tagName) {
-        return /\b(H[\d]|LI|P|BLOCKQUOTE)\b/.test(tagName);
+        return FIND_BLOCK_TAGNAME_RX.test(tagName);
     }, targetTagName);
+    this._removeTaskInputInWrongPlace();
 };
 
 WysiwygEditor.prototype.makeEmptyBlockCurrentSelection = function() {

diff --git a/apps/core/test/wysiwygEditor.spec.js b/apps/core/test/wysiwygEditor.spec.js
@@ -223,6 +223,26 @@ describe('WysiwygEditor', function() {
                 done();
             });
         });
+
+        it('remove unused inputbox when change from task to another', function(done) {
+            var wwe;
+
+            wwe = new WysiwygEditor($container, null, em);
+            wwe.init(300, function() {
+                var range = wwe.getEditor().getSelection().cloneRange();
+
+                wwe.setValue('<h1><div><input type="checkbox" />test<br></div></h1>');
+
+                range.selectNode(wwe.getEditor().getDocument().getElementsByTagName('div')[0].firstChild);
+                range.collapse(true);
+                wwe.getEditor().setSelection(range);
+
+                wwe.unwrapBlockTag();
+
+                expect(wwe.getValue().replace(/<br \/>/g, '')).toBe('test');
+                done();
+            });
+        });
     });
 
     describe('changeBlockFormat', function() {
@@ -285,6 +305,26 @@ describe('WysiwygEditor', function() {
                 done();
             });
         });
+
+        it('if not mached any condition, wrap targetTagName node to first div node', function(done) {
+            var wwe;
+
+            wwe = new WysiwygEditor($container, null, em);
+            wwe.init(300, function() {
+                var range = wwe.getEditor().getSelection().cloneRange();
+
+                wwe.setValue('<div>test<br></div>');
+
+                range.selectNode(wwe.getEditor().getDocument().getElementsByTagName('div')[0].firstChild);
+                range.collapse(true);
+                wwe.getEditor().setSelection(range);
+
+                wwe.changeBlockFormat('UL', 'P');
+
+                expect(wwe.getValue().replace(/<br \/>/g, '')).toBe('<p>test</p>');
+                done();
+            });
+        });
     });
 
     describe('changeBlockFormatTo', function() {
@@ -307,6 +347,26 @@ describe('WysiwygEditor', function() {
                 done();
             });
         });
+
+        it('remove unused inputbox when change from task to another', function(done) {
+            var wwe;
+
+            wwe = new WysiwygEditor($container, null, em);
+            wwe.init(300, function() {
+                var range = wwe.getEditor().getSelection().cloneRange();
+
+                wwe.setValue('<ul><li><div><input type="checkbox" />test<br></div></li></ul>');
+
+                range.selectNode(wwe.getEditor().getDocument().getElementsByTagName('div')[0].firstChild);
+                range.collapse(true);
+                wwe.getEditor().setSelection(range);
+
+                wwe.changeBlockFormatTo('H1');
+
+                expect(wwe.getValue().replace(/<br \/>/g, '')).toBe('<h1>test</h1>');
+                done();
+            });
+        });
     });
 
     describe('editing functions', function() {