Skip to content
This repository has been archived by the owner on Jun 26, 2020. It is now read-only.

Commit

Permalink
Merge pull request #283 from ckeditor/i/6371
Browse files Browse the repository at this point in the history 
Fix: The horizontal alignment of the table cell content should work properly with right–to–left languages. Closes ckeditor/ckeditor5#6371.
  • Loading branch information
@oleq
oleq authored Mar 26, 2020
2 parents f5b2faf + 956eb3e commit b6ca42e
Show file tree
Hide file tree
Showing 2 changed files with 132 additions and 20 deletions.
31 changes: 12 additions & 19 deletions src/tablecellproperties/tablecellpropertiesediting.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,14 +69,15 @@ export default class TableCellPropertiesEditing extends Plugin {
const editor = this.editor;
const schema = editor.model.schema;
const conversion = editor.conversion;
const locale = editor.locale;

editor.data.addStyleProcessorRules( addBorderRules );
enableBorderProperties( schema, conversion );
editor.commands.add( 'tableCellBorderStyle', new TableCellBorderStyleCommand( editor ) );
editor.commands.add( 'tableCellBorderColor', new TableCellBorderColorCommand( editor ) );
editor.commands.add( 'tableCellBorderWidth', new TableCellBorderWidthCommand( editor ) );

enableHorizontalAlignmentProperty( schema, conversion );
enableHorizontalAlignmentProperty( schema, conversion, locale );
editor.commands.add( 'tableCellHorizontalAlignment', new TableCellHorizontalAlignmentCommand( editor ) );

enableProperty( schema, conversion, 'width', 'width' );
Expand Down Expand Up @@ -117,37 +118,29 @@ function enableBorderProperties( schema, conversion ) {
//
// @param {module:engine/model/schema~Schema} schema
// @param {module:engine/conversion/conversion~Conversion} conversion
function enableHorizontalAlignmentProperty( schema, conversion ) {
// @param {module:utils/locale~Locale} locale The {@link module:core/editor/editor~Editor#locale} instance.
function enableHorizontalAlignmentProperty( schema, conversion, locale ) {
schema.extend( 'tableCell', {
allowAttributes: [ 'horizontalAlignment' ]
} );

const options = [ locale.contentLanguageDirection == 'rtl' ? 'left' : 'right', 'center', 'justify' ];

conversion.attributeToAttribute( {
model: {
name: 'tableCell',
key: 'horizontalAlignment',
values: [ 'right', 'center', 'justify' ]
values: options
},
view: {
right: {
key: 'style',
value: {
'text-align': 'right'
}
},
center: {
view: options.reduce( ( result, option ) => ( {
...result,
[ option ]: {
key: 'style',
value: {
'text-align': 'center'
}
},
justify: {
key: 'style',
value: {
'text-align': 'justify'
'text-align': option
}
}
}
} ), {} )
} );
}

Expand Down
121 changes: 120 additions & 1 deletion tests/tablecellproperties/tablecellpropertiesediting.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ describe( 'table cell properties', () => {
expect( editor.commands.get( 'tableCellHorizontalAlignment' ) ).to.be.instanceOf( TableCellHorizontalAlignmentCommand );
} );

it( 'adds tableCellAlignment command', () => {
it( 'adds tableCellVerticalAlignment command', () => {
expect( editor.commands.get( 'tableCellVerticalAlignment' ) ).to.be.instanceOf( TableCellVerticalAlignmentCommand );
} );

Expand Down Expand Up @@ -712,6 +712,51 @@ describe( 'table cell properties', () => {

expect( tableCell.getAttribute( 'horizontalAlignment' ) ).to.equal( 'justify' );
} );

describe( 'for RTL content language', () => {
let editor, model;

beforeEach( async () => {
editor = await VirtualTestEditor.create( {
plugins: [ TableCellPropertiesEditing, Paragraph, TableEditing ],
language: 'ar'
} );

model = editor.model;
} );

afterEach( async () => {
await editor.destroy();
} );

it( 'should not upcast text-align:right style', () => {
editor.setData( '<table><tr><td style="text-align:right">foo</td></tr></table>' );
const tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );

expect( tableCell.getAttribute( 'horizontalAlignment' ) ).to.be.undefined;
} );

it( 'should upcast text-align:left style', () => {
editor.setData( '<table><tr><td style="text-align:left">foo</td></tr></table>' );
const tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );

expect( tableCell.getAttribute( 'horizontalAlignment' ) ).to.equal( 'left' );
} );

it( 'should upcast text-align:center style', () => {
editor.setData( '<table><tr><td style="text-align:center">foo</td></tr></table>' );
const tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );

expect( tableCell.getAttribute( 'horizontalAlignment' ) ).to.equal( 'center' );
} );

it( 'should upcast text-align:justify style', () => {
editor.setData( '<table><tr><td style="text-align:justify">foo</td></tr></table>' );
const tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );

expect( tableCell.getAttribute( 'horizontalAlignment' ) ).to.equal( 'justify' );
} );
} );
} );

describe( 'downcast conversion', () => {
Expand Down Expand Up @@ -774,6 +819,80 @@ describe( 'table cell properties', () => {

assertTableCellStyle( editor, 'text-align:justify;' );
} );

describe( 'for RTL content language', () => {
let editor, model;

beforeEach( async () => {
editor = await VirtualTestEditor.create( {
plugins: [ TableCellPropertiesEditing, Paragraph, TableEditing ],
language: 'ar'
} );

model = editor.model;

setModelData(
model,
'<table headingRows="0" headingColumns="0">' +
'<tableRow>' +
'<tableCell>' +
'<paragraph>foo</paragraph>' +
'</tableCell>' +
'</tableRow>' +
'</table>'
);

tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
} );

afterEach( async () => {
await editor.destroy();
} );

it( 'should consume converted item\'s horizontalAlignment attribute', () => {
editor.conversion.for( 'downcast' )
.add( dispatcher => dispatcher.on( 'attribute:horizontalAlignment:tableCell', ( evt, data, conversionApi ) => {
expect( conversionApi.consumable.consume( data.item, evt.name ) ).to.be.false;
} ) );

model.change( writer => writer.setAttribute( 'horizontalAlignment', 'center', tableCell ) );
} );

it( 'should be overridable', () => {
editor.conversion.for( 'downcast' )
.add( dispatcher => dispatcher.on( 'attribute:horizontalAlignment:tableCell', ( evt, data, conversionApi ) => {
conversionApi.consumable.consume( data.item, evt.name );
}, { priority: 'high' } ) );

model.change( writer => writer.setAttribute( 'horizontalAlignment', 'center', tableCell ) );

assertTableCellStyle( editor, '' );
} );

it( 'should not downcast horizontalAlignment=right', () => {
model.change( writer => writer.setAttribute( 'horizontalAlignment', 'right', tableCell ) );

assertTableCellStyle( editor );
} );

it( 'should downcast horizontalAlignment=left', () => {
model.change( writer => writer.setAttribute( 'horizontalAlignment', 'left', tableCell ) );

assertTableCellStyle( editor, 'text-align:left;' );
} );

it( 'should downcast horizontalAlignment=center', () => {
model.change( writer => writer.setAttribute( 'horizontalAlignment', 'center', tableCell ) );

assertTableCellStyle( editor, 'text-align:center;' );
} );

it( 'should downcast horizontalAlignment=justify', () => {
model.change( writer => writer.setAttribute( 'horizontalAlignment', 'justify', tableCell ) );

assertTableCellStyle( editor, 'text-align:justify;' );
} );
} );
} );
} );

Expand Down

0 comments on commit b6ca42e

Please sign in to comment.