From 2c6168af9c4f3bfbf2d8b7f2c6edfa20e7846dfe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotr=20Szcz=C4=99=C5=9Bniak?= Date: Fri, 10 Jan 2025 14:12:27 +0100 Subject: [PATCH 1/6] Fixed list overlapping next to floated elements. --- .../tests/manual/list-overlapping.html | 174 ++++++++++++++++++ .../tests/manual/list-overlapping.js | 75 ++++++++ .../tests/manual/list-overlapping.md | 7 + packages/ckeditor5-list/theme/list.css | 23 +++ 4 files changed, 279 insertions(+) create mode 100644 packages/ckeditor5-list/tests/manual/list-overlapping.html create mode 100644 packages/ckeditor5-list/tests/manual/list-overlapping.js create mode 100644 packages/ckeditor5-list/tests/manual/list-overlapping.md diff --git a/packages/ckeditor5-list/tests/manual/list-overlapping.html b/packages/ckeditor5-list/tests/manual/list-overlapping.html new file mode 100644 index 00000000000..3025d76350d --- /dev/null +++ b/packages/ckeditor5-list/tests/manual/list-overlapping.html @@ -0,0 +1,174 @@ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
1
2
3
4
5
+
+ +
+ +
+

RTL

+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
1
2
3
4
5
+
+ +
diff --git a/packages/ckeditor5-list/tests/manual/list-overlapping.js b/packages/ckeditor5-list/tests/manual/list-overlapping.js new file mode 100644 index 00000000000..060fda7831f --- /dev/null +++ b/packages/ckeditor5-list/tests/manual/list-overlapping.js @@ -0,0 +1,75 @@ +/** + * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved. + * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options + */ + +/* globals console, window, document */ + +import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor.js'; +import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials.js'; +import Heading from '@ckeditor/ckeditor5-heading/src/heading.js'; +import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph.js'; +import Indent from '@ckeditor/ckeditor5-indent/src/indent.js'; +import Table from '@ckeditor/ckeditor5-table/src/table.js'; +import TableCellProperties from '@ckeditor/ckeditor5-table/src/tablecellproperties.js'; +import TableProperties from '@ckeditor/ckeditor5-table/src/tableproperties.js'; +import TableCaption from '@ckeditor/ckeditor5-table/src/tablecaption.js'; +import TableColumnResize from '@ckeditor/ckeditor5-table/src/tablecolumnresize.js'; +import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar.js'; +import ShowBlocks from '@ckeditor/ckeditor5-show-blocks/src/showblocks.js'; +import SourceEditing from '@ckeditor/ckeditor5-source-editing/src/sourceediting.js'; +// import Style from '@ckeditor/ckeditor5-style/src/style.js'; + +import List from '../../src/list.js'; +import ListProperties from '../../src/listproperties.js'; + +const config = { + plugins: [ + Essentials, Heading, Paragraph, List, ListProperties, Table, TableCellProperties, TableProperties, TableToolbar, + TableCaption, TableColumnResize, SourceEditing, ShowBlocks, Indent + ], + toolbar: [ + 'undo', 'redo', + '|', + 'sourceEditing', 'showBlocks', + '|', + 'heading', + '|', + 'bulletedList', 'numberedList', 'outdent', 'indent', + '|', + 'insertTable' + ], + table: { + contentToolbar: [ + 'tableColumn', 'tableRow', 'mergeTableCells', 'tableProperties', 'tableCellProperties', 'toggleTableCaption' + ] + }, + list: { + properties: { + styles: true, + startIndex: true, + reversed: true + } + } +}; + +ClassicEditor + .create( document.querySelector( '#editor-list-overlapping' ), config ) + .then( editor => { + window.editor = editor; + } ) + .catch( err => { + console.error( err.stack ); + } ); + +ClassicEditor + .create( document.querySelector( '#editor-list-overlapping-rtl' ), { + ...config, + language: 'ar' + } ) + .then( editor => { + window.editor = editor; + } ) + .catch( err => { + console.error( err.stack ); + } ); diff --git a/packages/ckeditor5-list/tests/manual/list-overlapping.md b/packages/ckeditor5-list/tests/manual/list-overlapping.md new file mode 100644 index 00000000000..65e32a99baa --- /dev/null +++ b/packages/ckeditor5-list/tests/manual/list-overlapping.md @@ -0,0 +1,7 @@ +## List overlapping + +This test shows the solution of how list can be presented when they are next to element with `float`. + +There is one table with `float` and one `list` with randomly nesting levels. + +Issues: `Export to PDF` works as expected but `Export to Word` not. diff --git a/packages/ckeditor5-list/theme/list.css b/packages/ckeditor5-list/theme/list.css index 3f6cecad20c..e1b5f1af747 100644 --- a/packages/ckeditor5-list/theme/list.css +++ b/packages/ckeditor5-list/theme/list.css @@ -38,3 +38,26 @@ } } } + +/* When an element (e.g. table) has `style` tag contains `float` `left`/`right` and has a list as a sibling, +add margin to the end of the element. */ +[dir="ltr"] [style*="float:left"]:has( ~ul ), +[dir="ltr"] [style*="float:left"]:has( ~ol ), +[dir="rtl"] [style*="float:right"]:has( ~ul ), +[dir="rtl"] [style*="float:right"]:has( ~ol ) { + margin-inline-end: 2em; +} + +/* Add `overflow: hidden` and `padding-inline-start` to the lists, starting from the second nesting +only when they are preceded by an element (e.g. table) has `style` tag contains `float` `left`/`right`. */ +[dir="rtl"] [style*="float:right"] ~ ul ul, +[dir="rtl"] [style*="float:right"] ~ ul ol, +[dir="rtl"] [style*="float:right"] ~ ol ol, +[dir="rtl"] [style*="float:right"] ~ ol ul, +[dir="ltr"] [style*="float:left"] ~ ul ul, +[dir="ltr"] [style*="float:left"] ~ ul ol, +[dir="ltr"] [style*="float:left"] ~ ol ol, +[dir="ltr"] [style*="float:left"] ~ ol ul { + overflow: hidden; + padding-inline-start: 2em; +} From 50ccef3de748b0666d71dda36fbd0abb58802abb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotr=20Szcz=C4=99=C5=9Bniak?= Date: Fri, 10 Jan 2025 14:42:45 +0100 Subject: [PATCH 2/6] Added missing dependency. --- packages/ckeditor5-list/package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/ckeditor5-list/package.json b/packages/ckeditor5-list/package.json index eb6ac61f9b7..17dd6b095af 100644 --- a/packages/ckeditor5-list/package.json +++ b/packages/ckeditor5-list/package.json @@ -46,6 +46,7 @@ "@ckeditor/ckeditor5-page-break": "44.1.0", "@ckeditor/ckeditor5-paragraph": "44.1.0", "@ckeditor/ckeditor5-remove-format": "44.1.0", + "@ckeditor/ckeditor5-show-blocks": "44.1.0", "@ckeditor/ckeditor5-source-editing": "44.1.0", "@ckeditor/ckeditor5-table": "44.1.0", "@ckeditor/ckeditor5-theme-lark": "44.1.0", From 7367daf9de8948f8e7596f2d2b90add4de77a502 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotr=20Szcz=C4=99=C5=9Bniak?= Date: Fri, 10 Jan 2025 15:11:14 +0100 Subject: [PATCH 3/6] Added issue URL next to CSS solution. --- packages/ckeditor5-list/theme/list.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/ckeditor5-list/theme/list.css b/packages/ckeditor5-list/theme/list.css index e1b5f1af747..ad98ceecec3 100644 --- a/packages/ckeditor5-list/theme/list.css +++ b/packages/ckeditor5-list/theme/list.css @@ -40,7 +40,8 @@ } /* When an element (e.g. table) has `style` tag contains `float` `left`/`right` and has a list as a sibling, -add margin to the end of the element. */ +add margin to the end of the element. +See https://github.com/ckeditor/ckeditor5/issues/8412 */ [dir="ltr"] [style*="float:left"]:has( ~ul ), [dir="ltr"] [style*="float:left"]:has( ~ol ), [dir="rtl"] [style*="float:right"]:has( ~ul ), @@ -49,7 +50,8 @@ add margin to the end of the element. */ } /* Add `overflow: hidden` and `padding-inline-start` to the lists, starting from the second nesting -only when they are preceded by an element (e.g. table) has `style` tag contains `float` `left`/`right`. */ +only when they are preceded by an element (e.g. table) has `style` tag contains `float` `left`/`right`. +See https://github.com/ckeditor/ckeditor5/issues/8412 */ [dir="rtl"] [style*="float:right"] ~ ul ul, [dir="rtl"] [style*="float:right"] ~ ul ol, [dir="rtl"] [style*="float:right"] ~ ol ol, From 9e186d21c32fa0f182aa956ba665a2bee8afe55b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotr=20Szcz=C4=99=C5=9Bniak?= Date: Tue, 21 Jan 2025 17:28:37 +0100 Subject: [PATCH 4/6] Replace on tables inline styles responsible for floating into CSS classes. --- .../tests/manual/list-overlapping.html | 2 +- packages/ckeditor5-list/theme/list.css | 28 +++++---------- .../tableproperties/tablepropertiesediting.ts | 34 ++++++++++++++++--- .../ckeditor5-table/tests/_utils/utils.js | 5 +-- .../commands/tablealignmentcommand.js | 12 +++---- .../tablepropertiesediting-integration.js | 2 +- .../tableproperties/tablepropertiesediting.js | 18 +++++----- packages/ckeditor5-table/theme/table.css | 31 +++++++++++++++++ 8 files changed, 89 insertions(+), 43 deletions(-) diff --git a/packages/ckeditor5-list/tests/manual/list-overlapping.html b/packages/ckeditor5-list/tests/manual/list-overlapping.html index 3025d76350d..9e0b87eb1f1 100644 --- a/packages/ckeditor5-list/tests/manual/list-overlapping.html +++ b/packages/ckeditor5-list/tests/manual/list-overlapping.html @@ -1,5 +1,5 @@
-
+
diff --git a/packages/ckeditor5-list/theme/list.css b/packages/ckeditor5-list/theme/list.css index ad98ceecec3..120865cb100 100644 --- a/packages/ckeditor5-list/theme/list.css +++ b/packages/ckeditor5-list/theme/list.css @@ -39,27 +39,17 @@ } } -/* When an element (e.g. table) has `style` tag contains `float` `left`/`right` and has a list as a sibling, -add margin to the end of the element. -See https://github.com/ckeditor/ckeditor5/issues/8412 */ -[dir="ltr"] [style*="float:left"]:has( ~ul ), -[dir="ltr"] [style*="float:left"]:has( ~ol ), -[dir="rtl"] [style*="float:right"]:has( ~ul ), -[dir="rtl"] [style*="float:right"]:has( ~ol ) { - margin-inline-end: 2em; -} - /* Add `overflow: hidden` and `padding-inline-start` to the lists, starting from the second nesting -only when they are preceded by an element (e.g. table) has `style` tag contains `float` `left`/`right`. +only when they are preceded by an element (e.g. table) has `class` name `table-style-align-right` or `table-style-align-left`. See https://github.com/ckeditor/ckeditor5/issues/8412 */ -[dir="rtl"] [style*="float:right"] ~ ul ul, -[dir="rtl"] [style*="float:right"] ~ ul ol, -[dir="rtl"] [style*="float:right"] ~ ol ol, -[dir="rtl"] [style*="float:right"] ~ ol ul, -[dir="ltr"] [style*="float:left"] ~ ul ul, -[dir="ltr"] [style*="float:left"] ~ ul ol, -[dir="ltr"] [style*="float:left"] ~ ol ol, -[dir="ltr"] [style*="float:left"] ~ ol ul { +.ck-content .table-style-align-right ~ ul ul, +.ck-content .table-style-align-right ~ ul ol, +.ck-content .table-style-align-right ~ ol ol, +.ck-content .table-style-align-right ~ ol ul, +.ck-content .table-style-align-left ~ ul ul, +.ck-content .table-style-align-left ~ ul ol, +.ck-content .table-style-align-left ~ ol ol, +.ck-content .table-style-align-left ~ ol ul { overflow: hidden; padding-inline-start: 2em; } diff --git a/packages/ckeditor5-table/src/tableproperties/tablepropertiesediting.ts b/packages/ckeditor5-table/src/tableproperties/tablepropertiesediting.ts index 4ff56fe3af4..af6d1dee22b 100644 --- a/packages/ckeditor5-table/src/tableproperties/tablepropertiesediting.ts +++ b/packages/ckeditor5-table/src/tableproperties/tablepropertiesediting.ts @@ -28,6 +28,8 @@ import { getNormalizedDefaultTableProperties } from '../utils/table-properties.j const ALIGN_VALUES_REG_EXP = /^(left|center|right)$/; const FLOAT_VALUES_REG_EXP = /^(left|none|right)$/; +const CSS_ALIGN_CLASSES_REG_EXP = /^(table-style-align-left|table-style-align-right|table-style-align-center)$/; +const CSS_CLASSNAME_ALIGN_REG_EXP = /table-style-align-(.*)/; /** * The table properties editing feature. @@ -169,11 +171,10 @@ function enableAlignmentProperty( schema: Schema, conversion: Conversion, defaul key: 'tableAlignment' }, view: alignment => ( { - key: 'style', - value: { - // Model: `alignment:center` => CSS: `float:none`. - float: alignment === 'center' ? 'none' : alignment - } + key: 'class', + value: [ + `table-style-align-${ alignment }` + ] } ), converterPriority: 'high' } ); @@ -217,6 +218,29 @@ function enableAlignmentProperty( schema: Schema, conversion: Conversion, defaul return align === defaultValue ? null : align; } } + } ) + .attributeToAttribute( { + view: { + name: /^(table|figure)$/, + classes: CSS_ALIGN_CLASSES_REG_EXP + }, + model: { + key: 'tableAlignment', + value: ( viewElement: ViewElement ) => { + let align = 'none'; + + for ( const className of viewElement.getClassNames() ) { + const alignmentMatch = CSS_CLASSNAME_ALIGN_REG_EXP.exec( className ); + + if ( alignmentMatch ) { + align = alignmentMatch[ 1 ]; + } + } + + // Return the alignment value based on the class names found. + return align; + } + } } ); } diff --git a/packages/ckeditor5-table/tests/_utils/utils.js b/packages/ckeditor5-table/tests/_utils/utils.js index 70094984b23..b48142d1e18 100644 --- a/packages/ckeditor5-table/tests/_utils/utils.js +++ b/packages/ckeditor5-table/tests/_utils/utils.js @@ -219,12 +219,13 @@ export function assertTRBLAttribute( element, key, top, right = top, bottom = to * @param {String} [tableStyle=''] A style to assert on
. * @param {String} [figureStyle=''] A style to assert on
. */ -export function assertTableStyle( editor, tableStyle, figureStyle ) { +export function assertTableStyle( editor, tableStyle, figureStyle, tableCssClass ) { const tableStyleEntry = tableStyle ? ` style="${ tableStyle }"` : ''; const figureStyleEntry = figureStyle ? ` style="${ figureStyle }"` : ''; + const tableClassEntry = tableCssClass ? ` ${ tableCssClass }` : ''; expect( editor.getData() ).to.equalMarkup( - `
` + + `
` + `` + '
' + '
foo
' + diff --git a/packages/ckeditor5-table/tests/tableproperties/commands/tablealignmentcommand.js b/packages/ckeditor5-table/tests/tableproperties/commands/tablealignmentcommand.js index fbcb53b55e8..00cef5fc342 100644 --- a/packages/ckeditor5-table/tests/tableproperties/commands/tablealignmentcommand.js +++ b/packages/ckeditor5-table/tests/tableproperties/commands/tablealignmentcommand.js @@ -131,7 +131,7 @@ describe( 'table properties', () => { command.execute( { value: 'right' } ); - assertTableStyle( editor, null, 'float:right;' ); + assertTableStyle( editor, null, '', 'table-style-align-right' ); } ); it( 'should change selected table alignment to a passed value', () => { @@ -139,7 +139,7 @@ describe( 'table properties', () => { command.execute( { value: 'right' } ); - assertTableStyle( editor, null, 'float:right;' ); + assertTableStyle( editor, null, '', 'table-style-align-right' ); } ); it( 'should remove alignment from a selected table if no value is passed', () => { @@ -165,7 +165,7 @@ describe( 'table properties', () => { command.execute( { value: 'right' } ); - assertTableStyle( editor, null, 'float:right;' ); + assertTableStyle( editor, null, '', 'table-style-align-right' ); } ); it( 'should change selected table alignment to a passed value', () => { @@ -173,7 +173,7 @@ describe( 'table properties', () => { command.execute( { value: 'right' } ); - assertTableStyle( editor, null, 'float:right;' ); + assertTableStyle( editor, null, '', 'table-style-align-right' ); } ); it( 'should remove alignment from a selected table if no value is passed', () => { @@ -199,7 +199,7 @@ describe( 'table properties', () => { command.execute( { value: 'right' } ); - assertTableStyle( editor, null, 'float:right;' ); + assertTableStyle( editor, null, '', 'table-style-align-right' ); } ); it( 'should change selected table alignment to a passed value', () => { @@ -207,7 +207,7 @@ describe( 'table properties', () => { command.execute( { value: 'right' } ); - assertTableStyle( editor, null, 'float:right;' ); + assertTableStyle( editor, null, '', 'table-style-align-right' ); } ); it( 'should remove alignment from a selected table if no value is passed', () => { diff --git a/packages/ckeditor5-table/tests/tableproperties/tablepropertiesediting-integration.js b/packages/ckeditor5-table/tests/tableproperties/tablepropertiesediting-integration.js index 7ef8b6ee4d4..aa8e6beae55 100644 --- a/packages/ckeditor5-table/tests/tableproperties/tablepropertiesediting-integration.js +++ b/packages/ckeditor5-table/tests/tableproperties/tablepropertiesediting-integration.js @@ -39,7 +39,7 @@ describe( 'table properties', () => { it( 'should properly downcast table with Alignment plugin enabled', () => { model.change( writer => writer.setAttribute( 'tableAlignment', 'right', table ) ); - assertTableStyle( editor, null, 'float:right;' ); + assertTableStyle( editor, null, '', 'table-style-align-right' ); } ); it( 'Alignment command should be disabled when table is selected', () => { diff --git a/packages/ckeditor5-table/tests/tableproperties/tablepropertiesediting.js b/packages/ckeditor5-table/tests/tableproperties/tablepropertiesediting.js index 43b161c143f..caa13af08ff 100644 --- a/packages/ckeditor5-table/tests/tableproperties/tablepropertiesediting.js +++ b/packages/ckeditor5-table/tests/tableproperties/tablepropertiesediting.js @@ -1238,45 +1238,45 @@ describe( 'table properties', () => { it( 'should downcast "right" tableAlignment', () => { model.change( writer => writer.setAttribute( 'tableAlignment', 'right', table ) ); - assertTableStyle( editor, null, 'float:right;' ); + assertTableStyle( editor, null, '', 'table-style-align-right' ); } ); it( 'should downcast "left" tableAlignment', () => { model.change( writer => writer.setAttribute( 'tableAlignment', 'left', table ) ); - assertTableStyle( editor, null, 'float:left;' ); + assertTableStyle( editor, null, '', 'table-style-align-left' ); } ); it( 'should downcast "center" tableAlignment', () => { model.change( writer => writer.setAttribute( 'tableAlignment', 'center', table ) ); - assertTableStyle( editor, null, 'float:none;' ); + assertTableStyle( editor, null, '', 'table-style-align-center' ); } ); it( 'should downcast changed tableAlignment (left -> right)', () => { model.change( writer => writer.setAttribute( 'tableAlignment', 'left', table ) ); - assertTableStyle( editor, null, 'float:left;' ); + assertTableStyle( editor, null, '', 'table-style-align-left' ); model.change( writer => writer.setAttribute( 'tableAlignment', 'right', table ) ); - assertTableStyle( editor, null, 'float:right;' ); + assertTableStyle( editor, null, '', 'table-style-align-right' ); } ); it( 'should downcast changed tableAlignment (right -> left)', () => { model.change( writer => writer.setAttribute( 'tableAlignment', 'right', table ) ); - assertTableStyle( editor, null, 'float:right;' ); + assertTableStyle( editor, null, '', 'table-style-align-right' ); model.change( writer => writer.setAttribute( 'tableAlignment', 'left', table ) ); - assertTableStyle( editor, null, 'float:left;' ); + assertTableStyle( editor, null, '', 'table-style-align-left' ); } ); it( 'should downcast removed tableAlignment (from left)', () => { model.change( writer => writer.setAttribute( 'tableAlignment', 'left', table ) ); - assertTableStyle( editor, null, 'float:left;' ); + assertTableStyle( editor, null, '', 'table-style-align-left' ); model.change( writer => writer.removeAttribute( 'tableAlignment', table ) ); @@ -1286,7 +1286,7 @@ describe( 'table properties', () => { it( 'should downcast removed tableAlignment (from right)', () => { model.change( writer => writer.setAttribute( 'tableAlignment', 'right', table ) ); - assertTableStyle( editor, null, 'float:right;' ); + assertTableStyle( editor, null, '', 'table-style-align-right' ); model.change( writer => writer.removeAttribute( 'tableAlignment', table ) ); diff --git a/packages/ckeditor5-table/theme/table.css b/packages/ckeditor5-table/theme/table.css index d5fc6a4f302..74f48f6e099 100644 --- a/packages/ckeditor5-table/theme/table.css +++ b/packages/ckeditor5-table/theme/table.css @@ -3,6 +3,23 @@ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options */ +/* Styles for plain table output */ +.ck-content table { + &.table-style-align-left { + float: left; + margin-inline-end: 2em; + } + + &.table-style-align-right { + float: right; + margin-inline-end: 2em; + } + + &.table-style-align-center { + float: none; + } +} + .ck-content .table { /* Give the table widget some air and center it horizontally */ /* The first value should be equal to --ck-spacing-large variable if used in the editor context @@ -40,6 +57,20 @@ background: hsla(0, 0%, 0%, 5%); } } + + &.table-style-align-left { + float: left; + margin-inline-end: 2em; + } + + &.table-style-align-right { + float: right; + margin-inline-end: 2em; + } + + &.table-style-align-center { + float: none; + } } /** From c15f7223d0182fd6c0a3c51e2c69b0fe173adcd7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotr=20Szcz=C4=99=C5=9Bniak?= Date: Wed, 22 Jan 2025 07:32:20 +0100 Subject: [PATCH 5/6] Small code refactor. --- packages/ckeditor5-table/theme/table.css | 116 ++++++++++++----------- 1 file changed, 59 insertions(+), 57 deletions(-) diff --git a/packages/ckeditor5-table/theme/table.css b/packages/ckeditor5-table/theme/table.css index 74f48f6e099..7f28f206bda 100644 --- a/packages/ckeditor5-table/theme/table.css +++ b/packages/ckeditor5-table/theme/table.css @@ -4,72 +4,74 @@ */ /* Styles for plain table output */ -.ck-content table { - &.table-style-align-left { - float: left; - margin-inline-end: 2em; - } +.ck-content { + & table { + &.table-style-align-left { + float: left; + margin-inline-end: 2em; + } - &.table-style-align-right { - float: right; - margin-inline-end: 2em; - } + &.table-style-align-right { + float: right; + margin-inline-end: 2em; + } - &.table-style-align-center { - float: none; + &.table-style-align-center { + float: none; + } } -} - -.ck-content .table { - /* Give the table widget some air and center it horizontally */ - /* The first value should be equal to --ck-spacing-large variable if used in the editor context - to avoid the content jumping (See https://github.com/ckeditor/ckeditor5/issues/9825). */ - margin: 0.9em auto; - display: table; - & table { - /* The table cells should have slight borders */ - border-collapse: collapse; - border-spacing: 0; - - /* Table width and height are set on the parent
. Make sure the table inside stretches - to the full dimensions of the container (https://github.com/ckeditor/ckeditor5/issues/6186). */ - width: 100%; - height: 100%; - - /* The outer border of the table should be slightly darker than the inner lines. - Also see https://github.com/ckeditor/ckeditor5-table/issues/50. */ - border: 1px double hsl(0, 0%, 70%); - - & td, - & th { - min-width: 2em; - padding: .4em; - - /* The border is inherited from .ck-editor__nested-editable styles, so theoretically it's not necessary here. - However, the border is a content style, so it should use .ck-content (so it works outside the editor). - Hence, the duplication. See https://github.com/ckeditor/ckeditor5/issues/6314 */ - border: 1px solid hsl(0, 0%, 75%); + & .table { + /* Give the table widget some air and center it horizontally */ + /* The first value should be equal to --ck-spacing-large variable if used in the editor context + to avoid the content jumping (See https://github.com/ckeditor/ckeditor5/issues/9825). */ + margin: 0.9em auto; + display: table; + + & table { + /* The table cells should have slight borders */ + border-collapse: collapse; + border-spacing: 0; + + /* Table width and height are set on the parent
. Make sure the table inside stretches + to the full dimensions of the container (https://github.com/ckeditor/ckeditor5/issues/6186). */ + width: 100%; + height: 100%; + + /* The outer border of the table should be slightly darker than the inner lines. + Also see https://github.com/ckeditor/ckeditor5-table/issues/50. */ + border: 1px double hsl(0, 0%, 70%); + + & td, + & th { + min-width: 2em; + padding: .4em; + + /* The border is inherited from .ck-editor__nested-editable styles, so theoretically it's not necessary here. + However, the border is a content style, so it should use .ck-content (so it works outside the editor). + Hence, the duplication. See https://github.com/ckeditor/ckeditor5/issues/6314 */ + border: 1px solid hsl(0, 0%, 75%); + } + + & th { + font-weight: bold; + background: hsla(0, 0%, 0%, 5%); + } } - & th { - font-weight: bold; - background: hsla(0, 0%, 0%, 5%); + &.table-style-align-left { + float: left; + margin-inline-end: 2em; } - } - - &.table-style-align-left { - float: left; - margin-inline-end: 2em; - } - &.table-style-align-right { - float: right; - margin-inline-end: 2em; - } + &.table-style-align-right { + float: right; + margin-inline-end: 2em; + } - &.table-style-align-center { - float: none; + &.table-style-align-center { + float: none; + } } } From 82532d7c8da10bafc767b186a1ccad680a69bc33 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotr=20Szcz=C4=99=C5=9Bniak?= Date: Wed, 22 Jan 2025 09:12:34 +0100 Subject: [PATCH 6/6] Fixed tests of PlainTableOutput class. --- packages/ckeditor5-table/tests/plaintableoutput.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/ckeditor5-table/tests/plaintableoutput.js b/packages/ckeditor5-table/tests/plaintableoutput.js index e66a6b4d435..24b18550860 100644 --- a/packages/ckeditor5-table/tests/plaintableoutput.js +++ b/packages/ckeditor5-table/tests/plaintableoutput.js @@ -236,7 +236,7 @@ describe( 'PlainTableOutput', () => { it( 'tableAlignment', () => { model.change( writer => writer.setAttribute( 'tableAlignment', 'right', table ) ); - assertPlainTableStyle( editor, 'float:right;' ); + assertPlainTableStyle( editor, '', 'table-style-align-right' ); } ); it( 'tableWidth', () => { @@ -313,7 +313,7 @@ describe( 'PlainTableOutput', () => { it( 'tableAlignment', () => { model.change( writer => writer.setAttribute( 'tableAlignment', 'right', table ) ); - assertPlainTableStyle( editor, 'float:right;' ); + assertPlainTableStyle( editor, '', 'table-style-align-right' ); model.change( writer => writer.removeAttribute( 'tableAlignment', table ) ); @@ -508,11 +508,12 @@ describe( 'PlainTableOutput', () => { return model.document.getRoot().getNodeByPath( [ 0 ] ); } - function assertPlainTableStyle( editor, tableStyle ) { + function assertPlainTableStyle( editor, tableStyle, tableClass ) { const tableStyleEntry = tableStyle ? ` style="${ tableStyle }"` : ''; + const tableClassEntry = tableClass ? ` class="${ tableClass }"` : ''; expect( editor.getData() ).to.equalMarkup( - `` + + `` + 'foo' + '' );