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", 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..9e0b87eb1f1 --- /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..120865cb100 100644 --- a/packages/ckeditor5-list/theme/list.css +++ b/packages/ckeditor5-list/theme/list.css @@ -38,3 +38,18 @@ } } } + +/* 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 `class` name `table-style-align-right` or `table-style-align-left`. +See https://github.com/ckeditor/ckeditor5/issues/8412 */ +.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/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' + '' ); 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..7f28f206bda 100644 --- a/packages/ckeditor5-table/theme/table.css +++ b/packages/ckeditor5-table/theme/table.css @@ -3,41 +3,74 @@ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options */ -.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; - +/* Styles for plain table output */ +.ck-content { & 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-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; + } + } + + & .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%); + } + } + + &.table-style-align-left { + float: left; + margin-inline-end: 2em; + } + + &.table-style-align-right { + float: right; + margin-inline-end: 2em; } - & th { - font-weight: bold; - background: hsla(0, 0%, 0%, 5%); + &.table-style-align-center { + float: none; } } }