From ac023d77530903b8294bf4a7a551e7a5fb264319 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=A5=98=EC=84=A0=EC=9E=84?= Date: Mon, 20 Jul 2020 09:10:42 +0900 Subject: [PATCH] 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 --- .../src/js/mergedTableRemoveCol.js | 4 ++ .../src/js/mergedTableRemoveRow.js | 4 ++ plugins/table-merged-cell/src/js/renderer.js | 4 +- .../table-merged-cell/src/js/tableRenderer.js | 4 +- .../test/mergedTableParser.spec.js | 47 +++++++++++++++++++ .../test/tableRenderer.spec.js | 32 +++++++++++++ 6 files changed, 93 insertions(+), 2 deletions(-) diff --git a/plugins/table-merged-cell/src/js/mergedTableRemoveCol.js b/plugins/table-merged-cell/src/js/mergedTableRemoveCol.js index 951a27ad80..9ba8d35f3f 100644 --- 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 index b240966486..4a557f9774 100644 --- 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 index 933385254d..4c8bb6b9a1 100644 --- 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 index 76534d6b39..7e3a559f3d 100644 --- 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 */ +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}`; diff --git a/plugins/table-merged-cell/test/mergedTableParser.spec.js b/plugins/table-merged-cell/test/mergedTableParser.spec.js index 0893e21b23..3c5e456ead 100644 --- 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', () => { ` + }, + { + no: 8, + content: source` + | @cols=2:foo"bar" | @cols=2:baz | + | --- | --- | --- | --- | + | @cols=2:foo"bar" | cell1-2 | cell1-3 | + | @rows=2:baz | cell2-2 | cell2-3 | cell2-4 | + | cell3-1 | cell3-2 | cell3-3 | cell3-4 | + | @cols=3:@rows=2:foo"bar"baz | cell4-2 | cell4-3 | cell4-4 | + | cell5-1 | cell5-2 | cell5-3 | cell5-4 | + `, + result: source` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
foo"bar"baz
foo"bar"cell1-2cell1-3
bazcell2-2cell2-3cell2-4
cell3-1cell3-2cell3-3
foo"bar"bazcell4-2
cell5-1
+ ` } ]; diff --git a/plugins/table-merged-cell/test/tableRenderer.spec.js b/plugins/table-merged-cell/test/tableRenderer.spec.js index 9ff26de65d..61e693039f 100644 --- 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 */ 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('
'); }); + + it('if the html entities (", <, >) are included in the cell data, the table is created correctly', () => { + const tableHtml = source` + + + + + + + +
foo"bar"
baz
+ `; + 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:baz' + ); + }); }); });