Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Overlapping of lists next to floating tables. #17741

Draft
wants to merge 7 commits into
base: master
Choose a base branch
from
Draft

Overlapping of lists next to floating tables. #17741

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
2c6168a
Fixed list overlapping next to floated elements.
pszczesniak Jan 10, 2025
50ccef3
Added missing dependency.
pszczesniak Jan 10, 2025
7367daf
Added issue URL next to CSS solution.
pszczesniak Jan 10, 2025
9e186d2
Replace on tables inline styles responsible for floating into CSS cla…
pszczesniak Jan 21, 2025
caec65f
Merge branch 'master' into ck/8412-list-overlaps-floated-elements
pszczesniak Jan 22, 2025
c15f722
Small code refactor.
pszczesniak Jan 22, 2025
82532d7
Fixed tests of PlainTableOutput class.
pszczesniak Jan 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/ckeditor5-list/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
174 changes: 174 additions & 0 deletions packages/ckeditor5-list/tests/manual/list-overlapping.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,174 @@
<div id="editor-list-overlapping">
<figure class="table table-style-align-left">
<table>
<tbody>
<tr>
<td>1</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>2</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td>3</td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>4</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>5</td>
</tr>
</tbody>
</table>
</figure>
<ul>
<li>Level 1 - Item 1
<ul>
<li>Level 2 - Item 1.1</li>
<li>Level 2 - Item 1.2
<ul>
<li>Level 3 - Item 1.2.1</li>
<li>Level 3 - Item 1.2.2
<ul>
<li>Level 4 - Item 1.2.2.1</li>
<li>Level 4 - Item 1.2.2.2</li>
</ul>
</li>
</ul>
</li>
<li>Level 2 - Item 1.3</li>
</ul>
</li>
<li>Level 1 - Item 2
<ul>
<li>Level 2 - Item 2.1</li>
<li>Level 2 - Item 2.2</li>
</ul>
</li>
<li>Level 1 - Item 3
<ul>
<li>Level 2 - Item 3.1
<ul>
<li>Level 3 - Item 3.1.1
<ul>
<li>Level 4 - Item 3.1.1.1</li>
<li>Level 4 - Item 3.1.1.2</li>
<li>Level 4 - Item 3.1.1.3</li>
</ul>
</li>
</ul>
</li>
<li>Level 2 - Item 3.2</li>
</ul>
</li>
<li>Level 1 - Item 4</li>
</ul>
</div>

<br>
<h2>RTL</h2>

<div id="editor-list-overlapping-rtl">
<figure class="table" style="float:right;">
<table>
<tbody>
<tr>
<td>1</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>2</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td>3</td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>4</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>5</td>
</tr>
</tbody>
</table>
</figure>
<ul>
<li>Level 1 - Item 1
<ul>
<li>Level 2 - Item 1.1</li>
<li>Level 2 - Item 1.2
<ul>
<li>Level 3 - Item 1.2.1</li>
<li>Level 3 - Item 1.2.2
<ul>
<li>Level 4 - Item 1.2.2.1</li>
<li>Level 4 - Item 1.2.2.2</li>
</ul>
</li>
</ul>
</li>
<li>Level 2 - Item 1.3</li>
</ul>
</li>
<li>Level 1 - Item 2
<ul>
<li>Level 2 - Item 2.1</li>
<li>Level 2 - Item 2.2</li>
</ul>
</li>
<li>Level 1 - Item 3
<ul>
<li>Level 2 - Item 3.1
<ul>
<li>Level 3 - Item 3.1.1
<ul>
<li>Level 4 - Item 3.1.1.1</li>
<li>Level 4 - Item 3.1.1.2</li>
<li>Level 4 - Item 3.1.1.3</li>
</ul>
</li>
</ul>
</li>
<li>Level 2 - Item 3.2</li>
</ul>
</li>
<li>Level 1 - Item 4</li>
</ul>
</div>
75 changes: 75 additions & 0 deletions packages/ckeditor5-list/tests/manual/list-overlapping.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 );
} );
7 changes: 7 additions & 0 deletions packages/ckeditor5-list/tests/manual/list-overlapping.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.
15 changes: 15 additions & 0 deletions packages/ckeditor5-list/theme/list.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
34 changes: 29 additions & 5 deletions packages/ckeditor5-table/src/tableproperties/tablepropertiesediting.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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'
} );
Expand Down Expand Up @@ -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;
}
}
} );
}

Expand Down
5 changes: 3 additions & 2 deletions packages/ckeditor5-table/tests/_utils/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -219,12 +219,13 @@ export function assertTRBLAttribute( element, key, top, right = top, bottom = to
* @param {String} [tableStyle=''] A style to assert on <table>.
* @param {String} [figureStyle=''] A style to assert on <figure>.
*/
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(
`<figure class="table"${ figureStyleEntry }>` +
`<figure class="table${ tableClassEntry }"${ figureStyleEntry }>` +
`<table${ tableStyleEntry }>` +
'<tbody><tr><td>foo</td></tr></tbody>' +
'</table>' +
Expand Down
9 changes: 5 additions & 4 deletions packages/ckeditor5-table/tests/plaintableoutput.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down Expand Up @@ -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 ) );

Expand Down Expand Up @@ -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(
`<table${ tableStyleEntry }>` +
`<table${ tableClassEntry }${ tableStyleEntry }>` +
'<tbody><tr><td>foo</td></tr></tbody>' +
'</table>'
);
Expand Down
Loading
Loading