add heading toggle resolve #96

nhn · Jan 6, 2020 · d551e49 · d551e49
1 parent 1c21c6b
commit d551e49
Show file tree

Hide file tree

Showing 5 changed files with 127 additions and 5 deletions.
diff --git a/apps/editor/src/js/wysiwygCommands/heading.js b/apps/editor/src/js/wysiwygCommands/heading.js
@@ -22,13 +22,33 @@ var Heading = CommandManager.command('wysiwyg',/** @lends Heading */{
      */
     exec: function(wwe) {
         var sq = wwe.getEditor(),
-            range = sq.getSelection();
+            range = sq.getSelection(),
+            foundedHeading = wwe.hasFormatWithRx(/h[\d]/i),
+            depth = 1,
+            beforeDepth;
 
-        if (range.collapsed) {
-            return;
+        if (foundedHeading) {
+            beforeDepth = parseInt(foundedHeading[0].replace(/h/i, ''), 10);
         }
 
-        sq.changeFormat({tag: 'H3'}, null, range);
+        if (beforeDepth && beforeDepth < 6) {
+            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;
+        });
+
         sq.focus();
     }
 });

diff --git a/apps/editor/src/js/wysiwygEditor.js b/apps/editor/src/js/wysiwygEditor.js
@@ -121,6 +121,18 @@ WysiwygEditor.prototype._keyEventHandler = function(event) {
         if (this.getEditor().hasFormat('li')) {
             this._removeTaskInputIfNeed();
         }
+        if (this.getEditor().hasFormat('h1')) {
+
+            //todo 프로토타입한거임 다시 만들기
+            var selection, $selected, $heading;
+
+            selection = this.getEditor().getSelection().cloneRange();
+            $selected = $(selection.startContainer);
+            $heading = $selected.closest('h1');
+            if (!$li[0].textContent) {
+                $li.replaceWith('<br />');
+            }
+        }
     }
 };
 
@@ -399,5 +411,9 @@ WysiwygEditor.prototype.get$Body = function() {
     return $(this.getEditor().getDocument().body);
 };
 
+WysiwygEditor.prototype.hasFormatWithRx = function(rx) {
+    return this.getEditor().getPath().match(rx);
+}
+
 module.exports = WysiwygEditor;
 
diff --git a/apps/editor/test/wysiwygCommands/bold.spec.js b/apps/editor/test/wysiwygCommands/bold.spec.js
@@ -4,7 +4,7 @@ var Bold = require('../../src/js/wysiwygCommands/bold'),
     WysiwygEditor = require('../../src/js/wysiwygEditor'),
     EventManager = require('../../src/js/eventManager');
 
-describe('Task', function() {
+describe('Bold', function() {
     var wwe, sq;
 
     beforeEach(function(done) {

diff --git a/apps/editor/test/wysiwygCommands/heading.spec.js b/apps/editor/test/wysiwygCommands/heading.spec.js
@@ -0,0 +1,74 @@
+'use strict';
+
+var Heading = require('../../src/js/wysiwygCommands/heading'),
+    WysiwygEditor = require('../../src/js/wysiwygEditor'),
+    EventManager = require('../../src/js/eventManager');
+
+describe('Heading', function() {
+    var wwe, sq;
+
+    beforeEach(function(done) {
+        var $container = $('<div />');
+
+        $('body').append($container);
+
+        wwe = new WysiwygEditor($container, null, new EventManager());
+
+        wwe.init(300, function() {
+            sq = wwe.getEditor();
+            done();
+        });
+    });
+
+    afterEach(function() {
+        $('body').empty();
+    });
+
+    it('add heading to current selection or cursor', function() {
+        var range = wwe.getEditor().getSelection().cloneRange();
+
+        wwe.setValue('text');
+
+        range.selectNodeContents(wwe.getEditor().getDocument().body.childNodes[0]);
+        wwe.getEditor().setSelection(range);
+
+        Heading.exec(wwe);
+
+        expect(wwe.getValue().replace(/<br \/>/g, '')).toEqual('<h1>text</h1>');
+    });
+
+    it('heading tag toggle', function() {
+        var range = wwe.getEditor().getSelection().cloneRange();
+
+        wwe.setValue('text');
+
+        range.selectNodeContents(wwe.getEditor().getDocument().body.childNodes[0]);
+        range.collapse();
+        wwe.getEditor().setSelection(range);
+
+        Heading.exec(wwe);
+        Heading.exec(wwe);
+
+        expect(wwe.getValue().replace(/<br \/>/g, '')).toEqual('<h2>text</h2>');
+    });
+
+    it('heading tag toggle 1~6 rotation', function() {
+        var range = wwe.getEditor().getSelection().cloneRange();
+
+        wwe.setValue('text');
+
+        range.selectNodeContents(wwe.getEditor().getDocument().body.childNodes[0]);
+        range.collapse();
+        wwe.getEditor().setSelection(range);
+
+        Heading.exec(wwe);
+        Heading.exec(wwe);
+        Heading.exec(wwe);
+        Heading.exec(wwe);
+        Heading.exec(wwe);
+        Heading.exec(wwe);
+        Heading.exec(wwe);
+
+        expect(wwe.getValue().replace(/<br \/>/g, '')).toEqual('<h1>text</h1>');
+    });
+});
diff --git a/apps/editor/test/wysiwygEditor.spec.js b/apps/editor/test/wysiwygEditor.spec.js
@@ -139,6 +139,18 @@ describe('WysiwygEditor', function() {
         });
     });
 
+    it('hasFormat with RegExp', function(done) {
+        var wwe;
+
+        wwe = new WysiwygEditor($container, null, em);
+
+        wwe.init(300, function() {
+            wwe.setValue('<h1>hasHeading</h1>');
+            expect(wwe.hasFormatWithRx(/h[\d]/i)[0]).toEqual('H1');
+            done();
+        });
+    });
+
     it('remove task if current selection\'s have', function(done) {
         var wwe;