Merge remote-tracking branch 'origin/master' into develop

modules/snooker/src/main/ts/ephox/snooker/api/TableLookup.ts

@@ -28,9 +28,15 @@ const cell = (element: SugarElement, isRoot?: (e: SugarElement) => boolean) => l
 
 const cells = (ancestor: SugarElement): SugarElement<HTMLTableCellElement>[] => LayerSelector.firstLayer(ancestor, 'th,td');
 
-const columns = (ancestor: SugarElement): SugarElement<HTMLTableColElement>[] => Arr.bind(columnGroups(ancestor), (columnGroup) =>
-  SelectorFilter.children<HTMLTableColElement>(columnGroup, 'col')
-);
+const columns = (ancestor: SugarElement): SugarElement<HTMLTableColElement>[] => {
+  if (Selectors.is(ancestor, 'colgroup')) {
+    return SelectorFilter.children<HTMLTableColElement>(ancestor, 'col');
+  } else {
+    return Arr.bind(columnGroups(ancestor), (columnGroup) =>
+      SelectorFilter.children<HTMLTableColElement>(columnGroup, 'col')
+    );
+  }
+};
 
 const notCell = (element: SugarElement, isRoot?: (e: SugarElement) => boolean) => lookup<Element>([ 'caption', 'tr', 'tbody', 'tfoot', 'thead' ], element, isRoot);
 

modules/snooker/src/test/ts/browser/TableLookupTest.ts

@@ -194,6 +194,14 @@ UnitTest.test('TableLookupTest - columns', () => {
     });
   };
 
+  const testDetachedColumn = (label: string, triggerSelector: string, expectedCount: number) => {
+    testWithSelector(html, triggerSelector, (triggerElement) => {
+      Remove.remove(triggerElement);
+      const columns = TableLookup.columns(triggerElement);
+      Assert.eq(label, expectedCount, columns.length);
+    });
+  };
+
   testColumnGroup('Column group from table', 'body > table', 1);
   testColumnGroup('Column group from table cell', 'body > table > tbody > tr > td', 1);
   testColumnGroup('Column group from nested table', 'body > table > tbody > tr > td:nth-child(1) > table', 2);
@@ -205,4 +213,6 @@ UnitTest.test('TableLookupTest - columns', () => {
   testColumn('Column from nested table', 'body > table > tbody > tr > td:nth-child(1) > table', 1);
   testColumn('Column from nested table colgroup', 'body > table > tbody > tr > td:nth-child(1) > table > colgroup', 1);
   testColumn('Column from nested table cell ', 'body > table > tbody > tr > td:nth-child(1) > table > tbody > tr > td', 1);
+
+  testDetachedColumn('Column from detached table colgroup', 'body > table > colgroup', 2);
 });

modules/tinymce/changelog.txt

@@ -1,5 +1,9 @@
 Version 5.7.0 (TBD)
     Changed the `advlist` plugin to log a console error message when the `list` plugin isn't enabled #TINY-6585
+Version 5.6.1 (TBD)
+    Fixed the HTML5 `s` element not recognized when editing or clearing text formatting #TINY-6681
+    Fixed an issue where copying and pasting table columns resulted in invalid HTML when using colgroups #TINY-6684
+    Fixed an issue where the toolbar would render with the wrong width for inline editors in some situations #TINY-6683
 Version 5.6.0 (2020-11-18)
     Added new `BeforeOpenNotification` and `OpenNotification` events which allow internal notifications to be captured and modified before display #TINY-6528
     Added support for `block` and `unblock` methods on inline dialogs #TINY-6487

modules/tinymce/src/core/main/ts/fmt/DefaultFormats.ts

@@ -147,7 +147,8 @@ const get = function (dom: DOMUtils) {
 
     strikethrough: [
       { inline: 'span', styles: { textDecoration: 'line-through' }, exact: true },
-      { inline: 'strike', remove: 'all', preserve_attributes: [ 'class', 'style' ] }
+      { inline: 'strike', remove: 'all', preserve_attributes: [ 'class', 'style' ] },
+      { inline: 's', remove: 'all', preserve_attributes: [ 'class', 'style' ] }
     ],
 
     forecolor: { inline: 'span', styles: { color: '%value' }, links: true, remove_similar: true, clear_child_styles: true },
@@ -176,7 +177,7 @@ const get = function (dom: DOMUtils) {
 
     removeformat: [
       {
-        selector: 'b,strong,em,i,font,u,strike,sub,sup,dfn,code,samp,kbd,var,cite,mark,q,del,ins',
+        selector: 'b,strong,em,i,font,u,strike,s,sub,sup,dfn,code,samp,kbd,var,cite,mark,q,del,ins',
         remove: 'all',
         split: true,
         expand: false,

modules/tinymce/src/core/test/ts/browser/FormattingCommandsTest.ts

@@ -429,11 +429,12 @@ UnitTest.asynctest('browser.tinymce.core.FormattingCommandsTest', function (succ
 
     editor.setContent(
       '<p><dfn>dfn tag </dfn> <code>code tag </code> <samp>samp tag</samp> ' +
-      '<kbd> kbd tag</kbd> <var> var tag</var> <cite> cite tag</cite> <mark> mark tag</mark> <q> q tag</q></p>'
+      '<kbd> kbd tag</kbd> <var> var tag</var> <cite> cite tag</cite> <mark> mark tag</mark> <q> q tag</q> ' +
+      '<strike>strike tag</strike> <s>s tag</s></p>'
     );
     editor.execCommand('SelectAll');
     editor.execCommand('RemoveFormat');
-    LegacyUnit.equal(editor.getContent(), '<p>dfn tag code tag samp tag kbd tag var tag cite tag mark tag q tag</p>');
+    LegacyUnit.equal(editor.getContent(), '<p>dfn tag code tag samp tag kbd tag var tag cite tag mark tag q tag strike tag s tag</p>');
   });
 
   TinyLoader.setupLight(function (editor, onSuccess, onFailure) {

modules/tinymce/src/plugins/table/test/ts/browser/ClipboardTest.ts

@@ -35,6 +35,16 @@ UnitTest.asynctest('browser.tinymce.plugins.table.ClipboardTest', (success, fail
     LegacyUnit.setSelection(editor, end, 0);
   };
 
+  const createRow = (editor: Editor, cellContents: string[]) => {
+    const tr = editor.dom.create('tr');
+
+    Tools.each(cellContents, (html) => {
+      tr.appendChild(editor.dom.create('td', null, html));
+    });
+
+    return tr;
+  };
+
   suite.test('selection.getContent with format equal to text', (editor) => {
     editor.focus();
     editor.setContent(
@@ -60,12 +70,13 @@ UnitTest.asynctest('browser.tinymce.plugins.table.ClipboardTest', (success, fail
       '<table>' +
       '<tr><td>1</td><td>2</td></tr>' +
       '<tr><td>2</td><td>3</td></tr>' +
+      '<tr><td>3</td><td>4</td></tr>' +
       '</table>'
     );
 
     selectOne(editor, 'tr:nth-child(1) td');
     editor.execCommand('mceTableCopyRow');
-    selectOne(editor, 'tr:nth-child(2) td');
+    selectOne(editor, 'tr:nth-child(3) td');
     editor.execCommand('mceTablePasteRowBefore');
 
     LegacyUnit.equal(
@@ -74,13 +85,14 @@ UnitTest.asynctest('browser.tinymce.plugins.table.ClipboardTest', (success, fail
       '<table>' +
       '<tbody>' +
       '<tr><td>1</td><td>2</td></tr>' +
-      '<tr><td>1</td><td>2</td></tr>' +
       '<tr><td>2</td><td>3</td></tr>' +
+      '<tr><td>1</td><td>2</td></tr>' +
+      '<tr><td>3</td><td>4</td></tr>' +
       '</tbody>' +
       '</table>'
     );
 
-    selectOne(editor, 'tr:nth-child(2) td');
+    selectOne(editor, 'tr:nth-child(3) td');
     editor.execCommand('mceTablePasteRowBefore');
 
     LegacyUnit.equal(
@@ -89,9 +101,10 @@ UnitTest.asynctest('browser.tinymce.plugins.table.ClipboardTest', (success, fail
       '<table>' +
       '<tbody>' +
       '<tr><td>1</td><td>2</td></tr>' +
+      '<tr><td>2</td><td>3</td></tr>' +
       '<tr><td>1</td><td>2</td></tr>' +
       '<tr><td>1</td><td>2</td></tr>' +
-      '<tr><td>2</td><td>3</td></tr>' +
+      '<tr><td>3</td><td>4</td></tr>' +
       '</tbody>' +
       '</table>'
     );
@@ -373,16 +386,6 @@ UnitTest.asynctest('browser.tinymce.plugins.table.ClipboardTest', (success, fail
   });
 
   suite.test('TestCase-TBA: Table: row clipboard api', (editor) => {
-    const createRow = (cellContents: string[]) => {
-      const tr = editor.dom.create('tr');
-
-      Tools.each(cellContents, (html) => {
-        tr.appendChild(editor.dom.create('td', null, html));
-      });
-
-      return tr;
-    };
-
     editor.setContent(
       '<table>' +
       '<tr><td>1</td><td>2</td></tr>' +
@@ -399,8 +402,8 @@ UnitTest.asynctest('browser.tinymce.plugins.table.ClipboardTest', (success, fail
     LegacyUnit.equal(clipboardRows[0].tagName, 'TR');
 
     editor.plugins.table.setClipboardRows(clipboardRows.concat([
-      createRow([ 'a', 'b' ]),
-      createRow([ 'c', 'd' ])
+      createRow(editor, [ 'a', 'b' ]),
+      createRow(editor, [ 'c', 'd' ])
     ]));
 
     LegacyUnit.setSelection(editor, 'tr:nth-child(2) td', 0);
@@ -421,6 +424,182 @@ UnitTest.asynctest('browser.tinymce.plugins.table.ClipboardTest', (success, fail
     );
   });
 
+  suite.test('TestCase-TINY-6006: Table: mceTablePasteColBefore command', (editor) => {
+    editor.setContent(
+      '<table>' +
+      '<tr><td>1</td><td>2</td><td>3</td></tr>' +
+      '<tr><td>2</td><td>3</td><td>4</td></tr>' +
+      '</table>'
+    );
+
+    selectOne(editor, 'tr td:nth-child(1)');
+    editor.execCommand('mceTableCopyCol');
+    selectOne(editor, 'tr td:nth-child(3)');
+    editor.execCommand('mceTablePasteColBefore');
+
+    LegacyUnit.equal(
+      cleanTableHtml(editor.getContent()),
+
+      '<table>' +
+      '<tbody>' +
+      '<tr><td>1</td><td>2</td><td>1</td><td>3</td></tr>' +
+      '<tr><td>2</td><td>3</td><td>2</td><td>4</td></tr>' +
+      '</tbody>' +
+      '</table>'
+    );
+  });
+
+  suite.test('TestCase-TINY-6006: Table: mceTablePasteColAfter command', (editor) => {
+    editor.setContent(
+      '<table>' +
+      '<tr><td>1</td><td>2</td><td>3</td></tr>' +
+      '<tr><td>2</td><td>3</td><td>4</td></tr>' +
+      '</table>'
+    );
+
+    selectOne(editor, 'tr td:nth-child(2)');
+    editor.execCommand('mceTableCopyCol');
+    selectOne(editor, 'tr td:nth-child(3)');
+    editor.execCommand('mceTablePasteColAfter');
+
+    LegacyUnit.equal(
+      cleanTableHtml(editor.getContent()),
+
+      '<table>' +
+      '<tbody>' +
+      '<tr><td>1</td><td>2</td><td>3</td><td>2</td></tr>' +
+      '<tr><td>2</td><td>3</td><td>4</td><td>3</td></tr>' +
+      '</tbody>' +
+      '</table>'
+    );
+  });
+
+  suite.test('TestCase-TINY-6006: Table: Copy/paste several cols with colspans', (editor) => {
+    editor.setContent(
+      '<table>' +
+      '<tbody>' +
+      '<tr><td colspan="2">1</td><td>3</td></tr>' +
+      '<tr><td>1</td><td colspan="2">2</td></tr>' +
+      '<tr><td>1</td><td>2</td><td>3</td></tr>' +
+      '</tbody>' +
+      '</table>'
+    );
+
+    selectRangeXY(editor, 'table tr:nth-child(1) td:nth-child(1)', 'table tr:nth-child(2) td:nth-child(2)');
+    editor.execCommand('mceTableCopyCol');
+
+    selectOne(editor, 'table tr:nth-child(1) td:nth-child(2)');
+    editor.execCommand('mceTablePasteColAfter');
+
+    LegacyUnit.equal(
+      cleanTableHtml(editor.getContent()),
+      '<table>' +
+      '<tbody>' +
+      '<tr><td colspan="2">1</td><td>3</td><td colspan="2">1</td><td>3</td></tr>' +
+      '<tr><td>1</td><td colspan="2">2</td><td>1</td><td colspan="2">2</td></tr>' +
+      '<tr><td>1</td><td>2</td><td>3</td><td>1</td><td>2</td><td>3</td></tr>' +
+      '</tbody>' +
+      '</table>'
+    );
+  });
+
+  suite.test('TestCase-TINY-6006: Table: col clipboard api', (editor) => {
+    editor.setContent(
+      '<table>' +
+      '<tr><td>1</td><td>2</td></tr>' +
+      '<tr><td>2</td><td>3</td></tr>' +
+      '</table>'
+    );
+
+    LegacyUnit.setSelection(editor, 'tr td:nth-child(1)', 0);
+    editor.execCommand('mceTableCopyCol');
+
+    const clipboardCols = editor.plugins.table.getClipboardCols();
+
+    LegacyUnit.equal(clipboardCols.length, 2);
+    LegacyUnit.equal(clipboardCols[0].tagName, 'TR');
+    const cells = clipboardCols[0].childNodes;
+    LegacyUnit.equal(cells.length, 1);
+    LegacyUnit.equal(cells[0].nodeName, 'TD');
+
+    editor.plugins.table.setClipboardCols([
+      createRow(editor, [ 'a', 'b' ]),
+      createRow(editor, [ 'c', 'd' ])
+    ]);
+
+    LegacyUnit.setSelection(editor, 'tr td:nth-child(2)', 0);
+    editor.execCommand('mceTablePasteColAfter');
+
+    LegacyUnit.equal(
+      cleanTableHtml(editor.getContent()),
+
+      '<table>' +
+      '<tbody>' +
+      '<tr><td>1</td><td>2</td><td>a</td><td>b</td></tr>' +
+      '<tr><td>2</td><td>3</td><td>c</td><td>d</td></tr>' +
+      '</tbody>' +
+      '</table>'
+    );
+  });
+
+  suite.test('TestCase-TINY-6684: Table: mceTablePasteColBefore command with colgroups', (editor) => {
+    editor.setContent(
+      '<table>' +
+      '<colgroup><col><col></colgroup>' +
+      '<tbody>' +
+      '<tr><td>1</td><td>2</td></tr>' +
+      '<tr><td>2</td><td>3</td></tr>' +
+      '</tbody>' +
+      '</table>'
+    );
+
+    selectOne(editor, 'tr td:nth-child(2)');
+    editor.execCommand('mceTableCopyCol');
+    selectOne(editor, 'tr td:nth-child(1)');
+    editor.execCommand('mceTablePasteColBefore');
+
+    LegacyUnit.equal(
+      cleanTableHtml(editor.getContent()),
+
+      '<table>' +
+      '<colgroup><col /><col /><col /></colgroup>' +
+      '<tbody>' +
+      '<tr><td>2</td><td>1</td><td>2</td></tr>' +
+      '<tr><td>3</td><td>2</td><td>3</td></tr>' +
+      '</tbody>' +
+      '</table>'
+    );
+  });
+
+  suite.test('TestCase-TINY-6684: Table: mceTablePasteColAfter command with colgroups', (editor) => {
+    editor.setContent(
+      '<table>' +
+      '<colgroup><col><col><col></colgroup>' +
+      '<tbody>' +
+      '<tr><td>1</td><td>2</td><td>3</td></tr>' +
+      '<tr><td>2</td><td>3</td><td>4</td></tr>' +
+      '</tbody>' +
+      '</table>'
+    );
+
+    selectOne(editor, 'tr td:nth-child(1)');
+    editor.execCommand('mceTableCopyCol');
+    selectOne(editor, 'tr td:nth-child(2)');
+    editor.execCommand('mceTablePasteColAfter');
+
+    LegacyUnit.equal(
+      cleanTableHtml(editor.getContent()),
+
+      '<table>' +
+      '<colgroup><col /><col /><col /><col /></colgroup>' +
+      '<tbody>' +
+      '<tr><td>1</td><td>2</td><td>1</td><td>3</td></tr>' +
+      '<tr><td>2</td><td>3</td><td>2</td><td>4</td></tr>' +
+      '</tbody>' +
+      '</table>'
+    );
+  });
+
   TinyLoader.setupLight((editor, onSuccess, onFailure) => {
     Pipeline.async({}, Log.steps('TBA', 'Table: Test Clipboard', suite.toSteps(editor)), onSuccess, onFailure);
   }, {