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 @@
<div id="editor-list-overlapping">
- <figure class="table" style="float:left;">
+ <figure class="table table-style-align-left">
<table>
<tbody>
<tr>
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 <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>' +
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;
+ }
}
/**