fix: broken cell redering with span tag using table-merged-cell plugin (

fix #1059) (#1060) * fix: broken cell redering with span tag using table-merged-cell plugin (fix #1059) * feat: add test case * feat: apply code review * fix: 800a025e script error occurs when removing column or row on ie
nhn · Jul 20, 2020 · ac023d7 · ac023d7
1 parent f98ffc4
commit ac023d7
Show file tree

Hide file tree

Showing 6 changed files with 93 additions and 2 deletions.
diff --git a/plugins/table-merged-cell/src/js/mergedTableRemoveCol.js b/plugins/table-merged-cell/src/js/mergedTableRemoveCol.js
@@ -147,6 +147,10 @@ export function getWwRemoveColumnCommand(editor) {
         const beforeCellLength = tableData[0].length;
 
         sq.saveUndoState(selectionRange);
+
+        selectionRange.collapse(true);
+        sq.setSelection(selectionRange);
+
         _removeColumns(tableData, tableRange);
 
         if (tableData[0].length === 0) {

diff --git a/plugins/table-merged-cell/src/js/mergedTableRemoveRow.js b/plugins/table-merged-cell/src/js/mergedTableRemoveRow.js
@@ -154,6 +154,10 @@ export function getWwRemoveRowCommand(editor) {
         );
 
         sq.saveUndoState(selectionRange);
+
+        selectionRange.collapse(true);
+        sq.setSelection(selectionRange);
+
         _removeRow(tableData, tableRange);
 
         if (tableData.length < 2) {

diff --git a/plugins/table-merged-cell/src/js/renderer.js b/plugins/table-merged-cell/src/js/renderer.js
@@ -1,3 +1,5 @@
+import encodeHTMLEntity from 'tui-code-snippet/string/encodeHTMLEntity';
+
 export const renderer = {
   tableRow(node, { entering, origin }) {
     if (entering) {
@@ -47,7 +49,7 @@ export const renderer = {
       const { attributes = {} } = result;
 
       if (node.orgStringContent) {
-        attributes['data-org-content'] = node.orgStringContent;
+        attributes['data-org-content'] = encodeHTMLEntity(node.orgStringContent);
       }
       if (node.colspan) {
         attributes.colspan = node.colspan;

diff --git a/plugins/table-merged-cell/src/js/tableRenderer.js b/plugins/table-merged-cell/src/js/tableRenderer.js
@@ -2,6 +2,8 @@
  * @fileoverview Implements tableRenderer
  * @author NHN FE Development Lab <dl_javascript@nhn.com>
  */
+import encodeHTMLEntity from 'tui-code-snippet/string/encodeHTMLEntity';
+
 import tableDataHandler from './tableDataHandler';
 
 /**
@@ -27,7 +29,7 @@ function _createCellHtml(cell) {
 
   if (orgContent) {
     orgContent += content;
-    attrs += ` data-org-content="${orgContent}"`;
+    attrs += ` data-org-content="${encodeHTMLEntity(orgContent)}"`;
   }
 
   return `<${nodeName}${attrs}>${content}</${nodeName}>`;

diff --git a/plugins/table-merged-cell/test/mergedTableParser.spec.js b/plugins/table-merged-cell/test/mergedTableParser.spec.js
@@ -499,6 +499,53 @@ describe('should render the merged table properly', () => {
         </tbody>
         </table>
       `
+      },
+      {
+        no: 8,
+        content: source`
+        | @cols=2:foo"bar" | @cols=2:<span style="color: red;">baz</span> |
+        | --- | --- | --- | --- |
+        | @cols=2:foo"bar" | cell1-2 | cell1-3 |
+        | @rows=2:<span style="color: red;">baz</span> | cell2-2 | cell2-3 | cell2-4 |
+        | cell3-1 | cell3-2 | cell3-3 | cell3-4 |
+        | @cols=3:@rows=2:foo"bar"<span style="color: red;">baz</span> | cell4-2 | cell4-3 | cell4-4 |
+        | cell5-1 | cell5-2 | cell5-3 | cell5-4 |
+      `,
+        result: source`
+        <table>
+        <thead>
+        <tr>
+        <th data-org-content="@cols=2:foo&quot;bar&quot;" colspan="2">foo&quot;bar&quot;</th>
+        <th data-org-content="@cols=2:&lt;span style=&quot;color: red;&quot;&gt;baz&lt;/span&gt;" colspan="2"><span style="color: red;">baz</span></th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr>
+        <td data-org-content="@cols=2:foo&quot;bar&quot;" colspan="2">foo&quot;bar&quot;</td>
+        <td data-org-content="cell1-2">cell1-2</td>
+        <td data-org-content="cell1-3">cell1-3</td>
+        </tr>
+        <tr>
+        <td data-org-content="@rows=2:&lt;span style=&quot;color: red;&quot;&gt;baz&lt;/span&gt;" rowspan="2"><span style="color: red;">baz</span></td>
+        <td data-org-content="cell2-2">cell2-2</td>
+        <td data-org-content="cell2-3">cell2-3</td>
+        <td data-org-content="cell2-4">cell2-4</td>
+        </tr>
+        <tr>
+        <td data-org-content="cell3-1">cell3-1</td>
+        <td data-org-content="cell3-2">cell3-2</td>
+        <td data-org-content="cell3-3">cell3-3</td>
+        </tr>
+        <tr>
+        <td data-org-content="@cols=3:@rows=2:foo&quot;bar&quot;&lt;span style=&quot;color: red;&quot;&gt;baz&lt;/span&gt;" colspan="3" rowspan="2">foo&quot;bar&quot;<span style="color: red;">baz</span></td>
+        <td data-org-content="cell4-2">cell4-2</td>
+        </tr>
+        <tr>
+        <td data-org-content="cell5-1">cell5-1</td>
+        </tr>
+        </tbody>
+        </table>
+      `
       }
     ];
 

diff --git a/plugins/table-merged-cell/test/tableRenderer.spec.js b/plugins/table-merged-cell/test/tableRenderer.spec.js
@@ -3,10 +3,19 @@
  * @author NHN FE Development Lab <dl_javascript@nhn.com>
  */
 import $ from 'jquery';
+import { source } from 'common-tags';
 
 import tableDataHandler from '@/tableDataHandler';
 import tableRenderer from '@/tableRenderer';
 
+function createElement(html) {
+  const container = document.createElement('div');
+
+  container.innerHTML = html;
+
+  return container;
+}
+
 describe('tableRenderer', () => {
   describe('createTableHtml()', () => {
     it('when correct contents in table tag', () => {
@@ -35,5 +44,28 @@ describe('tableRenderer', () => {
 
       expect(result).toBe('<table></table>');
     });
+
+    it('if the html entities (", <, >) are included in the cell data, the table is created correctly', () => {
+      const tableHtml = source`
+        <table>
+        <thead>
+        <tr><th colspan="2">foo"bar"</th></tr>
+        </thead>
+        <tbody>
+        <tr><td colspan="2"><span style="color: red;">baz</span></td></tr>
+        </tbody>
+        </table>
+      `;
+      const renderData = tableDataHandler.createTableData(createElement(tableHtml));
+      const result = tableRenderer.createTableHtml(renderData);
+      const tableElement = createElement(result);
+
+      expect(tableElement.querySelector('th').getAttribute('data-org-content')).toBe(
+        '@cols=2:foo"bar"'
+      );
+      expect(tableElement.querySelector('td').getAttribute('data-org-content')).toBe(
+        '@cols=2:<span style="color: red;">baz</span>'
+      );
+    });
   });
 });