Skip to content

Commit

Permalink
Replace on tables inline styles responsible for floating into CSS cla…
Browse files Browse the repository at this point in the history 
…sses.
  • Loading branch information
@pszczesniak
pszczesniak committed Jan 21, 2025
1 parent 7367daf commit 9e186d2
Show file tree
Hide file tree
Showing 8 changed files with 89 additions and 43 deletions.
2 changes: 1 addition & 1 deletion packages/ckeditor5-list/tests/manual/list-overlapping.html
View file
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
28 changes: 9 additions & 19 deletions packages/ckeditor5-list/theme/list.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
34 changes: 29 additions & 5 deletions packages/ckeditor5-table/src/tableproperties/tablepropertiesediting.ts
View file
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
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
12 changes: 6 additions & 6 deletions packages/ckeditor5-table/tests/tableproperties/commands/tablealignmentcommand.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,15 +131,15 @@ 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', () => {
setData( model, modelTable( [ [ '[]foo' ] ], { tableAlignment: 'center' } ) );

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', () => {
Expand All @@ -165,15 +165,15 @@ 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', () => {
setData( model, modelTable( [ [ '[foo]' ] ] ) );

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', () => {
Expand All @@ -199,15 +199,15 @@ 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', () => {
setData( model, '[' + modelTable( [ [ 'foo' ] ] ) + ']' );

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', () => {
Expand Down
2 changes: 1 addition & 1 deletion packages/ckeditor5-table/tests/tableproperties/tablepropertiesediting-integration.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down
18 changes: 9 additions & 9 deletions packages/ckeditor5-table/tests/tableproperties/tablepropertiesediting.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 ) );

Expand All @@ -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 ) );

Expand Down
31 changes: 31 additions & 0 deletions packages/ckeditor5-table/theme/table.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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;
}
}

/**
Expand Down

0 comments on commit 9e186d2

Please sign in to comment.