fix: colorsync on selected cells in table in ww (fix #232) (#233)

nhn · Jan 6, 2020 · 86d2976 · 86d2976
1 parent d7e11d3
commit 86d2976
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 16 deletions.
diff --git a/apps/editor/src/js/extensions/colorSyntax.js b/apps/editor/src/js/extensions/colorSyntax.js
@@ -6,6 +6,7 @@ import $ from 'jquery';
 import ColorPicker from 'tui-color-picker';
 
 import Editor from './editorProxy';
+import domUtils from '../domUtils';
 
 const colorSyntaxRx = /\{color:(.+?)}(.*?)\{color}/g;
 const colorHtmlRx = /<span (?:class="colour" )?style="color:(.+?)"(?: class="colour")?>(.*?)/g;
@@ -95,31 +96,49 @@ function colorSyntaxExtension(editor) {
     editor.addCommand('wysiwyg', {
       name: 'color',
       exec(wwe, color) {
-        const sq = wwe.getEditor();
-
         if (!color) {
           return;
         }
 
-        if (!sq.hasFormat('PRE')) {
-          if (color === RESET_COLOR) {
-            sq.changeFormat(null, {
-              class: 'colour',
-              tag: 'span'
-            });
-          } else {
-            sq.setTextColour(color);
-          }
+        const sq = wwe.getEditor();
+        const tableSelectionManager = wwe.componentManager.getManager('tableSelection');
+        if (sq.hasFormat('table') && tableSelectionManager.getSelectedCells().length) {
+          tableSelectionManager.styleToSelectedCells(styleColor, color);
+        } else {
+          styleColor(sq, color);
         }
 
-        wwe.focus();
+        const range = sq.getSelection();
+        if (sq.hasFormat('table') && !domUtils.isTextNode(range.commonAncestorContainer)) {
+          range.collapse(true);
+          sq.setSelection(range);
+        }
       }
     });
 
     initUI(editor, preset);
   }
 }
 
+/**
+ * style color
+ * @param {SquireExt} sq - squire ext instance
+ * @param {string} color - color sting value
+ * @ignore
+ */
+function styleColor(sq, color) {
+  if (!sq.hasFormat('PRE')) {
+    if (color === RESET_COLOR) {
+      sq.changeFormat(null, {
+        class: 'colour',
+        tag: 'span'
+      });
+    } else {
+      sq.setTextColour(color);
+    }
+  }
+}
+
 /**
  * Initialize UI
  * @param {object} editor - Editor instance

diff --git a/apps/editor/src/js/extensions/table/wwMergedTableSelectionManager.js b/apps/editor/src/js/extensions/table/wwMergedTableSelectionManager.js
@@ -100,8 +100,9 @@ class WwMergedTableSelectionManager extends WwTableSelectionManager {
   /**
    * Style to selected cells.
    * @param {function} onStyle - function for styling
+   * @param {Object} [options] - options to be passed into onStyle
    */
-  styleToSelectedCells(onStyle) {
+  styleToSelectedCells(onStyle, options) {
     const sq = this.wwe.getEditor();
     const range = sq.getSelection().cloneRange();
     const $table = $(range.startContainer).closest('[contenteditable=true] table');
@@ -118,7 +119,7 @@ class WwMergedTableSelectionManager extends WwTableSelectionManager {
       range.setStart(firstSelectedCell, 0);
       range.setEnd(lastSelectedCell, lastSelectedCell.childNodes.length);
       sq.setSelection(range);
-      onStyle(sq);
+      onStyle(sq, options);
     });
   }
 

diff --git a/apps/editor/src/js/wwTableSelectionManager.js b/apps/editor/src/js/wwTableSelectionManager.js
@@ -399,10 +399,11 @@ class WwTableSelectionManager {
   /**
      * Style to selected cells.
      * @param {function} onStyle - function for styling
+     * @param {Object} [options] - options to be passed into onStyle
      */
-  styleToSelectedCells(onStyle) {
+  styleToSelectedCells(onStyle, options) {
     this.createRangeBySelectedCells();
-    onStyle(this.wwe.getEditor());
+    onStyle(this.wwe.getEditor(), options);
   }
 
   /**

diff --git a/apps/editor/test/unit/extensions/colorSyntax.spec.js b/apps/editor/test/unit/extensions/colorSyntax.spec.js
@@ -190,6 +190,38 @@ describe('colorSyntax', () => {
 
       expect($span.hasClass('colour')).toBe(false);
     });
+
+    it('add color in selected table cell in wysiwyg', () => {
+      ned.changeMode('wysiwyg');
+
+      const wwe = ned.wwEditor;
+      const sq = ned.getSquire();
+
+      sq.setHTML([
+        '<table>',
+        '<thead>',
+        '<tr><th></th><th></th></tr>',
+        '</thead>',
+        '<tbody>',
+        '<tr><td class="te-cell-selected">text 1</td><td class="te-cell-selected">text 2</td></tr>',
+        '</tbody>',
+        '</table>'
+      ].join(''));
+
+      let range = sq.getSelection();
+      range.setStart(wwe.get$Body().find('th')[0], 0);
+      range.collapse(true);
+      sq.setSelection(range);
+
+      ned.exec('color', '#f0f');
+
+      const $span = wwe.get$Body().find('span');
+
+      expect($span.eq(0).hasClass('colour')).toBe(true);
+      expect($span.eq(0).css('color')).toEqual('rgb(255, 0, 255)');
+      expect($span.eq(1).hasClass('colour')).toBe(true);
+      expect($span.eq(1).css('color')).toEqual('rgb(255, 0, 255)');
+    });
   });
 
   describe('initializer', () => {