From 3192f377b1d4860ccba9db82a4ee78eb90d55cf0 Mon Sep 17 00:00:00 2001 From: LucasC Date: Thu, 1 Aug 2024 18:10:20 +0200 Subject: [PATCH 1/6] XWIKI-21782: Incentivize use of header rows for the WYSIWYG editor tables * Added a translation key-value for the warning message * Updated the default value of the table header to `top row` * Added a warning message (style from bootstrap, consistent with the color theme) that is displayed when the user chooses to have No headers for the table. --- .../src/main/webjar/xwiki-table/plugin.js | 14 ++++++++++++-- .../src/main/resources/CKEditor/EditSheet.xml | 14 ++++++++++++++ .../src/main/resources/CKEditor/Translations.xml | 2 ++ 3 files changed, 28 insertions(+), 2 deletions(-) diff --git a/xwiki-platform-core/xwiki-platform-ckeditor/xwiki-platform-ckeditor-plugins/src/main/webjar/xwiki-table/plugin.js b/xwiki-platform-core/xwiki-platform-ckeditor/xwiki-platform-ckeditor-plugins/src/main/webjar/xwiki-table/plugin.js index 8b1b81882493..2df547fad85d 100644 --- a/xwiki-platform-core/xwiki-platform-ckeditor/xwiki-platform-ckeditor-plugins/src/main/webjar/xwiki-table/plugin.js +++ b/xwiki-platform-core/xwiki-platform-ckeditor/xwiki-platform-ckeditor-plugins/src/main/webjar/xwiki-table/plugin.js @@ -20,7 +20,7 @@ (function() { 'use strict'; CKEDITOR.plugins.add('xwiki-table', { - requires: 'table', + requires: 'table,xwiki-localization', init: function(editor) { // The table plugin is using the deprecated align attribute for various reasons. See // https://dev.ckeditor.com/ticket/3762 . We could overwrite the table dialog to use the margin:auto style but it @@ -57,7 +57,7 @@ // Take the dialog window name and its definition from the event data. var dialogName = event.data.name; - var dialogDefinition = event.data.definition; + var dialogDefinition = event.data.definition; if (dialogName === 'table') { enhanceTableDialog(dialogDefinition, event.editor); } @@ -69,6 +69,16 @@ ['txtBorder', 'txtWidth', 'txtCellSpace', 'txtCellPad'].forEach(function(fieldId) { delete infoTab.get(fieldId)['default']; }); + // Set a new default for the Headers value + infoTab.get( 'selHeaders' )[ 'default' ] = 'row'; + // Create a warning message for the accessibility without headers + // We navigate the structure of the macro to insert this message exactly next to the header. + infoTab.elements[0].children[0].children.splice(4, 0,{ + type : 'html', + html : '' + + editor.localization.get('xwiki-table.header.accessibilitywarning') + + '' + }); }; // diff --git a/xwiki-platform-core/xwiki-platform-ckeditor/xwiki-platform-ckeditor-ui/src/main/resources/CKEditor/EditSheet.xml b/xwiki-platform-core/xwiki-platform-ckeditor/xwiki-platform-ckeditor-ui/src/main/resources/CKEditor/EditSheet.xml index 78c99edaee14..459f071c17aa 100644 --- a/xwiki-platform-core/xwiki-platform-ckeditor/xwiki-platform-ckeditor-ui/src/main/resources/CKEditor/EditSheet.xml +++ b/xwiki-platform-core/xwiki-platform-ckeditor/xwiki-platform-ckeditor-ui/src/main/resources/CKEditor/EditSheet.xml @@ -763,6 +763,20 @@ td.cke_dialog_contents_body { overflow-y: auto; } +/** + * Handle the layout and display of the warning message for headerless tables. + * Some of the default styles are just overridden by the CKEditor reset. + */ +.cke_dialog_container span.box.warningmessage { + .alert-warning; + white-space: break-spaces; + display: none; +} + +.cke_dialog_container tr:has(select [value=""]:checked) + tr span.box.warningmessage { + display: unset; +} + /** * Link Options Toggle */ diff --git a/xwiki-platform-core/xwiki-platform-ckeditor/xwiki-platform-ckeditor-ui/src/main/resources/CKEditor/Translations.xml b/xwiki-platform-core/xwiki-platform-ckeditor/xwiki-platform-ckeditor-ui/src/main/resources/CKEditor/Translations.xml index 3e33dd3a3849..64a039af570c 100644 --- a/xwiki-platform-core/xwiki-platform-ckeditor/xwiki-platform-ckeditor-ui/src/main/resources/CKEditor/Translations.xml +++ b/xwiki-platform-core/xwiki-platform-ckeditor/xwiki-platform-ckeditor-ui/src/main/resources/CKEditor/Translations.xml @@ -98,6 +98,8 @@ ckeditor.plugin.save.leaveConfirmationMessage=There are unsaved changes. Do you ckeditor.plugin.save.failed=The content cannot be saved because of a CKEditor internal error. You should try to copy your important changes and reload the editor. ckeditor.plugin.source.conversionFailed=Failed to perform the conversion. +ckeditor.plugin.table.header.accessibilitywarning=Your table content can be made easier to understand by using headers. + ckeditor.plugin.toolbar.basicStyles=Basic Styles ckeditor.plugin.toolbar.lists=Lists ckeditor.plugin.toolbar.bulletedlist=Bulleted List From 86d70378afc8133ef7c2dcfb70866c909b322c36 Mon Sep 17 00:00:00 2001 From: LucasC Date: Thu, 1 Aug 2024 18:25:58 +0200 Subject: [PATCH 2/6] XWIKI-21782: Incentivize use of header rows for the WYSIWYG editor tables * Updated test to take into account the new defaults --- .../src/test/it/org/xwiki/ckeditor/test/ui/QuickActionsIT.java | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/xwiki-platform-core/xwiki-platform-ckeditor/xwiki-platform-ckeditor-test/xwiki-platform-ckeditor-test-docker/src/test/it/org/xwiki/ckeditor/test/ui/QuickActionsIT.java b/xwiki-platform-core/xwiki-platform-ckeditor/xwiki-platform-ckeditor-test/xwiki-platform-ckeditor-test-docker/src/test/it/org/xwiki/ckeditor/test/ui/QuickActionsIT.java index d08e70e7f09c..66ade4491a3e 100644 --- a/xwiki-platform-core/xwiki-platform-ckeditor/xwiki-platform-ckeditor-test/xwiki-platform-ckeditor-test-docker/src/test/it/org/xwiki/ckeditor/test/ui/QuickActionsIT.java +++ b/xwiki-platform-core/xwiki-platform-ckeditor/xwiki-platform-ckeditor-test/xwiki-platform-ckeditor-test-docker/src/test/it/org/xwiki/ckeditor/test/ui/QuickActionsIT.java @@ -257,7 +257,7 @@ void table() // Write some text textArea.sendKeys(TEST_TEXT); - assertSourceEquals("|" + TEST_TEXT + "| \n| | \n| | \n\n "); + assertSourceEquals("|=" + TEST_TEXT + "|= \n| | \n| | \n\n "); } @Test From 22e7d4ba3a3f1eaedc71020f6702c66bb02ddb24 Mon Sep 17 00:00:00 2001 From: LucasC Date: Thu, 1 Aug 2024 18:30:48 +0200 Subject: [PATCH 3/6] XWIKI-21782: Incentivize use of header rows for the WYSIWYG editor tables * Fixed superfluous codestyle change * Improved the translation default value. --- .../src/main/webjar/xwiki-table/plugin.js | 6 +++--- .../src/main/resources/CKEditor/Translations.xml | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/xwiki-platform-core/xwiki-platform-ckeditor/xwiki-platform-ckeditor-plugins/src/main/webjar/xwiki-table/plugin.js b/xwiki-platform-core/xwiki-platform-ckeditor/xwiki-platform-ckeditor-plugins/src/main/webjar/xwiki-table/plugin.js index 2df547fad85d..0b58e1a1f947 100644 --- a/xwiki-platform-core/xwiki-platform-ckeditor/xwiki-platform-ckeditor-plugins/src/main/webjar/xwiki-table/plugin.js +++ b/xwiki-platform-core/xwiki-platform-ckeditor/xwiki-platform-ckeditor-plugins/src/main/webjar/xwiki-table/plugin.js @@ -20,7 +20,7 @@ (function() { 'use strict'; CKEDITOR.plugins.add('xwiki-table', { - requires: 'table,xwiki-localization', + requires: 'table, xwiki-localization', init: function(editor) { // The table plugin is using the deprecated align attribute for various reasons. See // https://dev.ckeditor.com/ticket/3762 . We could overwrite the table dialog to use the margin:auto style but it @@ -57,7 +57,7 @@ // Take the dialog window name and its definition from the event data. var dialogName = event.data.name; - var dialogDefinition = event.data.definition; + var dialogDefinition = event.data.definition; if (dialogName === 'table') { enhanceTableDialog(dialogDefinition, event.editor); } @@ -73,7 +73,7 @@ infoTab.get( 'selHeaders' )[ 'default' ] = 'row'; // Create a warning message for the accessibility without headers // We navigate the structure of the macro to insert this message exactly next to the header. - infoTab.elements[0].children[0].children.splice(4, 0,{ + infoTab.elements[0].children[0].children.splice(4, 0, { type : 'html', html : '' + editor.localization.get('xwiki-table.header.accessibilitywarning') + diff --git a/xwiki-platform-core/xwiki-platform-ckeditor/xwiki-platform-ckeditor-ui/src/main/resources/CKEditor/Translations.xml b/xwiki-platform-core/xwiki-platform-ckeditor/xwiki-platform-ckeditor-ui/src/main/resources/CKEditor/Translations.xml index 64a039af570c..c7d6496425fc 100644 --- a/xwiki-platform-core/xwiki-platform-ckeditor/xwiki-platform-ckeditor-ui/src/main/resources/CKEditor/Translations.xml +++ b/xwiki-platform-core/xwiki-platform-ckeditor/xwiki-platform-ckeditor-ui/src/main/resources/CKEditor/Translations.xml @@ -98,7 +98,7 @@ ckeditor.plugin.save.leaveConfirmationMessage=There are unsaved changes. Do you ckeditor.plugin.save.failed=The content cannot be saved because of a CKEditor internal error. You should try to copy your important changes and reload the editor. ckeditor.plugin.source.conversionFailed=Failed to perform the conversion. -ckeditor.plugin.table.header.accessibilitywarning=Your table content can be made easier to understand by using headers. +ckeditor.plugin.table.header.accessibilitywarning=Using headers will make your table easier to understand. ckeditor.plugin.toolbar.basicStyles=Basic Styles ckeditor.plugin.toolbar.lists=Lists From 471084c41083ada1e2f37a7c838de89ecac1d00a Mon Sep 17 00:00:00 2001 From: LucasC Date: Tue, 10 Dec 2024 11:10:51 +0100 Subject: [PATCH 4/6] XWIKI-21782: Incentivize use of header rows for the WYSIWYG editor tables * Comment improvements Co-authored-by: Marius Dumitru Florea --- .../src/main/webjar/xwiki-table/plugin.js | 6 +++--- .../src/main/resources/CKEditor/Translations.xml | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/xwiki-platform-core/xwiki-platform-ckeditor/xwiki-platform-ckeditor-plugins/src/main/webjar/xwiki-table/plugin.js b/xwiki-platform-core/xwiki-platform-ckeditor/xwiki-platform-ckeditor-plugins/src/main/webjar/xwiki-table/plugin.js index 0b58e1a1f947..beb9b24f521a 100644 --- a/xwiki-platform-core/xwiki-platform-ckeditor/xwiki-platform-ckeditor-plugins/src/main/webjar/xwiki-table/plugin.js +++ b/xwiki-platform-core/xwiki-platform-ckeditor/xwiki-platform-ckeditor-plugins/src/main/webjar/xwiki-table/plugin.js @@ -69,10 +69,10 @@ ['txtBorder', 'txtWidth', 'txtCellSpace', 'txtCellPad'].forEach(function(fieldId) { delete infoTab.get(fieldId)['default']; }); - // Set a new default for the Headers value + // Set a new default for the Headers value. infoTab.get( 'selHeaders' )[ 'default' ] = 'row'; - // Create a warning message for the accessibility without headers - // We navigate the structure of the macro to insert this message exactly next to the header. + // Create a warning message for the accessibility without headers. + // We navigate the structure of the tab to insert this message exactly next to the header. infoTab.elements[0].children[0].children.splice(4, 0, { type : 'html', html : '' + diff --git a/xwiki-platform-core/xwiki-platform-ckeditor/xwiki-platform-ckeditor-ui/src/main/resources/CKEditor/Translations.xml b/xwiki-platform-core/xwiki-platform-ckeditor/xwiki-platform-ckeditor-ui/src/main/resources/CKEditor/Translations.xml index c7d6496425fc..673c922f13ff 100644 --- a/xwiki-platform-core/xwiki-platform-ckeditor/xwiki-platform-ckeditor-ui/src/main/resources/CKEditor/Translations.xml +++ b/xwiki-platform-core/xwiki-platform-ckeditor/xwiki-platform-ckeditor-ui/src/main/resources/CKEditor/Translations.xml @@ -98,7 +98,7 @@ ckeditor.plugin.save.leaveConfirmationMessage=There are unsaved changes. Do you ckeditor.plugin.save.failed=The content cannot be saved because of a CKEditor internal error. You should try to copy your important changes and reload the editor. ckeditor.plugin.source.conversionFailed=Failed to perform the conversion. -ckeditor.plugin.table.header.accessibilitywarning=Using headers will make your table easier to understand. +ckeditor.plugin.table.header.accessibilityWarning=Using headers will make your table easier to understand. ckeditor.plugin.toolbar.basicStyles=Basic Styles ckeditor.plugin.toolbar.lists=Lists From 151a24f0743e14846e25eb3a453bcd4555bfff70 Mon Sep 17 00:00:00 2001 From: Sereza7 Date: Tue, 10 Dec 2024 12:23:36 +0100 Subject: [PATCH 5/6] XWIKI-21782: Incentivize use of header rows for the WYSIWYG editor tables * Escaped the translation for HTML * Added comments on the style --- .../src/main/webjar/xwiki-table/plugin.js | 10 ++++++---- .../src/main/resources/CKEditor/EditSheet.xml | 5 +++++ 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/xwiki-platform-core/xwiki-platform-ckeditor/xwiki-platform-ckeditor-plugins/src/main/webjar/xwiki-table/plugin.js b/xwiki-platform-core/xwiki-platform-ckeditor/xwiki-platform-ckeditor-plugins/src/main/webjar/xwiki-table/plugin.js index beb9b24f521a..ab5e404e5976 100644 --- a/xwiki-platform-core/xwiki-platform-ckeditor/xwiki-platform-ckeditor-plugins/src/main/webjar/xwiki-table/plugin.js +++ b/xwiki-platform-core/xwiki-platform-ckeditor/xwiki-platform-ckeditor-plugins/src/main/webjar/xwiki-table/plugin.js @@ -20,7 +20,7 @@ (function() { 'use strict'; CKEDITOR.plugins.add('xwiki-table', { - requires: 'table, xwiki-localization', + requires: 'table,xwiki-localization', init: function(editor) { // The table plugin is using the deprecated align attribute for various reasons. See // https://dev.ckeditor.com/ticket/3762 . We could overwrite the table dialog to use the margin:auto style but it @@ -72,12 +72,14 @@ // Set a new default for the Headers value. infoTab.get( 'selHeaders' )[ 'default' ] = 'row'; // Create a warning message for the accessibility without headers. + const warningMessage = document.createElement('span'); + warningMessage.classList.add('box', 'warningmessage'); + warningMessage.textContent = CKEDITOR.tools.htmlEncode( + editor.localization.get('xwiki-table.header.accessibilityWarning')); // We navigate the structure of the tab to insert this message exactly next to the header. infoTab.elements[0].children[0].children.splice(4, 0, { type : 'html', - html : '' + - editor.localization.get('xwiki-table.header.accessibilitywarning') + - '' + html : warningMessage.outerHTML }); }; diff --git a/xwiki-platform-core/xwiki-platform-ckeditor/xwiki-platform-ckeditor-ui/src/main/resources/CKEditor/EditSheet.xml b/xwiki-platform-core/xwiki-platform-ckeditor/xwiki-platform-ckeditor-ui/src/main/resources/CKEditor/EditSheet.xml index 6f60e8c132d7..0ced1a6191c9 100644 --- a/xwiki-platform-core/xwiki-platform-ckeditor/xwiki-platform-ckeditor-ui/src/main/resources/CKEditor/EditSheet.xml +++ b/xwiki-platform-core/xwiki-platform-ckeditor/xwiki-platform-ckeditor-ui/src/main/resources/CKEditor/EditSheet.xml @@ -765,14 +765,19 @@ td.cke_dialog_contents_body { /** * Handle the layout and display of the warning message for headerless tables. + * This message is added by the xwiki-table plugin. * Some of the default styles are just overridden by the CKEditor reset. */ .cke_dialog_container span.box.warningmessage { .alert-warning; + /* Default warning boxes are not meant to be used in a strict layout like the one of this table dialog. + * We need an extra customization to avoid breaking this layout. */ white-space: break-spaces; + /* By default, the warning is not shown. */ display: none; } +/* When the value of the previous field is the one we want to avoid, we show the warning. */ .cke_dialog_container tr:has(select [value=""]:checked) + tr span.box.warningmessage { display: unset; } From 66e590c61499a1ed5efddfa7b7a9a1206cdec467 Mon Sep 17 00:00:00 2001 From: LucasC Date: Fri, 18 Jul 2025 12:02:50 +0200 Subject: [PATCH 6/6] XWIKI-21782: Incentivize use of header rows for the WYSIWYG editor tables * Removed double escaping for the warning message content --- .../src/main/webjar/xwiki-table/plugin.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/xwiki-platform-core/xwiki-platform-ckeditor/xwiki-platform-ckeditor-plugins/src/main/webjar/xwiki-table/plugin.js b/xwiki-platform-core/xwiki-platform-ckeditor/xwiki-platform-ckeditor-plugins/src/main/webjar/xwiki-table/plugin.js index ab5e404e5976..cbc7abcd259d 100644 --- a/xwiki-platform-core/xwiki-platform-ckeditor/xwiki-platform-ckeditor-plugins/src/main/webjar/xwiki-table/plugin.js +++ b/xwiki-platform-core/xwiki-platform-ckeditor/xwiki-platform-ckeditor-plugins/src/main/webjar/xwiki-table/plugin.js @@ -74,8 +74,7 @@ // Create a warning message for the accessibility without headers. const warningMessage = document.createElement('span'); warningMessage.classList.add('box', 'warningmessage'); - warningMessage.textContent = CKEDITOR.tools.htmlEncode( - editor.localization.get('xwiki-table.header.accessibilityWarning')); + warningMessage.textContent = editor.localization.get('xwiki-table.header.accessibilityWarning'); // We navigate the structure of the tab to insert this message exactly next to the header. infoTab.elements[0].children[0].children.splice(4, 0, { type : 'html',