From 4fb8f18c26bc8af4882e8f13a5502ef38da038ec Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Wed, 23 Jul 2025 21:23:50 +0000 Subject: [PATCH] feat: Add support for specific table border sides --- .../src/converters/tableproperties.ts | 53 +++++ .../commands/tableborderbottomstylecommand.ts | 61 +++++ .../commands/tableborderleftstylecommand.ts | 61 +++++ .../commands/tableborderrightstylecommand.ts | 61 +++++ .../commands/tablebordertopstylecommand.ts | 61 +++++ .../tableproperties/tablepropertiesediting.ts | 18 +- .../src/tableproperties/tablepropertiesui.ts | 70 +++++- .../tableproperties/ui/tablepropertiesview.ts | 220 +++++++++++++++++- 8 files changed, 601 insertions(+), 4 deletions(-) create mode 100644 packages/ckeditor5-table/src/tableproperties/commands/tableborderbottomstylecommand.ts create mode 100644 packages/ckeditor5-table/src/tableproperties/commands/tableborderleftstylecommand.ts create mode 100644 packages/ckeditor5-table/src/tableproperties/commands/tableborderrightstylecommand.ts create mode 100644 packages/ckeditor5-table/src/tableproperties/commands/tablebordertopstylecommand.ts diff --git a/packages/ckeditor5-table/src/converters/tableproperties.ts b/packages/ckeditor5-table/src/converters/tableproperties.ts index a8eb6935e8b..41ec90c32dc 100644 --- a/packages/ckeditor5-table/src/converters/tableproperties.ts +++ b/packages/ckeditor5-table/src/converters/tableproperties.ts @@ -209,6 +209,27 @@ export function upcastBorderStyles( if ( reducedBorder.style !== localDefaultBorder.style ) { conversionApi.writer.setAttribute( modelAttributes.style, reducedBorder.style, modelElement ); + } else { + const borderTopStyle = normalizedBorder.style.top; + const borderRightStyle = normalizedBorder.style.right; + const borderBottomStyle = normalizedBorder.style.bottom; + const borderLeftStyle = normalizedBorder.style.left; + + if ( borderTopStyle && borderTopStyle !== localDefaultBorder.style ) { + conversionApi.writer.setAttribute( 'borderTopStyle', borderTopStyle, modelElement ); + } + + if ( borderRightStyle && borderRightStyle !== localDefaultBorder.style ) { + conversionApi.writer.setAttribute( 'borderRightStyle', borderRightStyle, modelElement ); + } + + if ( borderBottomStyle && borderBottomStyle !== localDefaultBorder.style ) { + conversionApi.writer.setAttribute( 'borderBottomStyle', borderBottomStyle, modelElement ); + } + + if ( borderLeftStyle && borderLeftStyle !== localDefaultBorder.style ) { + conversionApi.writer.setAttribute( 'borderLeftStyle', borderLeftStyle, modelElement ); + } } if ( reducedBorder.color !== localDefaultBorder.color ) { @@ -250,6 +271,38 @@ export function downcastAttributeToStyle( } ); } +/** + * Conversion helper for downcasting an attribute to a style. + * + * @internal + */ +export function downcastAttributeToSpecificStyle( + conversion: Conversion, + options: { + modelElement: string; + modelAttribute: string; + styleName: string; + } +): void { + const { modelElement, modelAttribute, styleName } = options; + + conversion.for( 'downcast' ).attributeToAttribute( { + model: { + name: modelElement, + key: modelAttribute + }, + view: ( modelAttributeValue, { writer } ) => { + if ( !modelAttributeValue ) { + return; + } + + return writer.createAttributeElement( 'span', { + style: `${ styleName }:${ modelAttributeValue }` + } ); + } + } ); +} + /** * Conversion helper for downcasting attributes from the model table to a view table (not to `
`). * diff --git a/packages/ckeditor5-table/src/tableproperties/commands/tableborderbottomstylecommand.ts b/packages/ckeditor5-table/src/tableproperties/commands/tableborderbottomstylecommand.ts new file mode 100644 index 00000000000..7383c4860e5 --- /dev/null +++ b/packages/ckeditor5-table/src/tableproperties/commands/tableborderbottomstylecommand.ts @@ -0,0 +1,61 @@ +import { Command } from 'ckeditor5/src/core'; + +import { getNewTableProperty } from '../../utils/table-properties'; + +import type { Batch } from 'ckeditor5/src/engine'; + +/** + * The table border bottom style command. + * + * The command is registered by {@link module:table/tableproperties/tablepropertiesediting~TablePropertiesEditing} as + * the `'tableBorderBottomStyle'` editor command. + * + * To change the bottom border style of a table, execute the command: + * + * editor.execute( 'tableBorderBottomStyle', { + * value: 'dashed' + * } ); + */ +export class TableBorderBottomStyleCommand extends Command { + /** + * The default border style. + */ + declare public readonly defaultValue: string; + + /** + * @inheritDoc + */ + constructor( editor, defaultValue ) { + super( editor ); + + this.defaultValue = defaultValue; + } + + /** + * @inheritDoc + */ + public override refresh(): void { + const editor = this.editor; + const model = editor.model; + const document = model.document; + + const table = document.selection.getFirstPosition().findAncestor( 'table' ); + + this.isEnabled = !!table; + this.value = this.isEnabled ? table.getAttribute( 'borderBottomStyle' ) || this.defaultValue : this.defaultValue; + } + + /** + * @inheritDoc + */ + public override execute( options: { value?: unknown; batch?: Batch } = {} ): void { + this.editor.model.change( writer => { + const value = getNewTableProperty( options.value, this.value, this.defaultValue ); + const selectedCells = this.editor.model.document.selection.getSelectedCells(); + + for ( const cell of selectedCells ) { + writer.setAttribute( 'borderBottomStyle', value, cell ); + } + } ); + } +} diff --git a/packages/ckeditor5-table/src/tableproperties/commands/tableborderleftstylecommand.ts b/packages/ckeditor5-table/src/tableproperties/commands/tableborderleftstylecommand.ts new file mode 100644 index 00000000000..a213de7e66d --- /dev/null +++ b/packages/ckeditor5-table/src/tableproperties/commands/tableborderleftstylecommand.ts @@ -0,0 +1,61 @@ +import { Command } from 'ckeditor5/src/core'; + +import { getNewTableProperty } from '../../utils/table-properties'; + +import type { Batch } from 'ckeditor5/src/engine'; + +/** + * The table border left style command. + * + * The command is registered by {@link module:table/tableproperties/tablepropertiesediting~TablePropertiesEditing} as + * the `'tableBorderLeftStyle'` editor command. + * + * To change the left border style of a table, execute the command: + * + * editor.execute( 'tableBorderLeftStyle', { + * value: 'dashed' + * } ); + */ +export class TableBorderLeftStyleCommand extends Command { + /** + * The default border style. + */ + declare public readonly defaultValue: string; + + /** + * @inheritDoc + */ + constructor( editor, defaultValue ) { + super( editor ); + + this.defaultValue = defaultValue; + } + + /** + * @inheritDoc + */ + public override refresh(): void { + const editor = this.editor; + const model = editor.model; + const document = model.document; + + const table = document.selection.getFirstPosition().findAncestor( 'table' ); + + this.isEnabled = !!table; + this.value = this.isEnabled ? table.getAttribute( 'borderLeftStyle' ) || this.defaultValue : this.defaultValue; + } + + /** + * @inheritDoc + */ + public override execute( options: { value?: unknown; batch?: Batch } = {} ): void { + this.editor.model.change( writer => { + const value = getNewTableProperty( options.value, this.value, this.defaultValue ); + const selectedCells = this.editor.model.document.selection.getSelectedCells(); + + for ( const cell of selectedCells ) { + writer.setAttribute( 'borderLeftStyle', value, cell ); + } + } ); + } +} diff --git a/packages/ckeditor5-table/src/tableproperties/commands/tableborderrightstylecommand.ts b/packages/ckeditor5-table/src/tableproperties/commands/tableborderrightstylecommand.ts new file mode 100644 index 00000000000..de3e1b74069 --- /dev/null +++ b/packages/ckeditor5-table/src/tableproperties/commands/tableborderrightstylecommand.ts @@ -0,0 +1,61 @@ +import { Command } from 'ckeditor5/src/core'; + +import { getNewTableProperty } from '../../utils/table-properties'; + +import type { Batch } from 'ckeditor5/src/engine'; + +/** + * The table border right style command. + * + * The command is registered by {@link module:table/tableproperties/tablepropertiesediting~TablePropertiesEditing} as + * the `'tableBorderRightStyle'` editor command. + * + * To change the right border style of a table, execute the command: + * + * editor.execute( 'tableBorderRightStyle', { + * value: 'dashed' + * } ); + */ +export class TableBorderRightStyleCommand extends Command { + /** + * The default border style. + */ + declare public readonly defaultValue: string; + + /** + * @inheritDoc + */ + constructor( editor, defaultValue ) { + super( editor ); + + this.defaultValue = defaultValue; + } + + /** + * @inheritDoc + */ + public override refresh(): void { + const editor = this.editor; + const model = editor.model; + const document = model.document; + + const table = document.selection.getFirstPosition().findAncestor( 'table' ); + + this.isEnabled = !!table; + this.value = this.isEnabled ? table.getAttribute( 'borderRightStyle' ) || this.defaultValue : this.defaultValue; + } + + /** + * @inheritDoc + */ + public override execute( options: { value?: unknown; batch?: Batch } = {} ): void { + this.editor.model.change( writer => { + const value = getNewTableProperty( options.value, this.value, this.defaultValue ); + const selectedCells = this.editor.model.document.selection.getSelectedCells(); + + for ( const cell of selectedCells ) { + writer.setAttribute( 'borderRightStyle', value, cell ); + } + } ); + } +} diff --git a/packages/ckeditor5-table/src/tableproperties/commands/tablebordertopstylecommand.ts b/packages/ckeditor5-table/src/tableproperties/commands/tablebordertopstylecommand.ts new file mode 100644 index 00000000000..c23ef44f159 --- /dev/null +++ b/packages/ckeditor5-table/src/tableproperties/commands/tablebordertopstylecommand.ts @@ -0,0 +1,61 @@ +import { Command } from 'ckeditor5/src/core'; + +import { getNewTableProperty } from '../../utils/table-properties'; + +import type { Batch } from 'ckeditor5/src/engine'; + +/** + * The table border top style command. + * + * The command is registered by {@link module:table/tableproperties/tablepropertiesediting~TablePropertiesEditing} as + * the `'tableBorderTopStyle'` editor command. + * + * To change the top border style of a table, execute the command: + * + * editor.execute( 'tableBorderTopStyle', { + * value: 'dashed' + * } ); + */ +export class TableBorderTopStyleCommand extends Command { + /** + * The default border style. + */ + declare public readonly defaultValue: string; + + /** + * @inheritDoc + */ + constructor( editor, defaultValue ) { + super( editor ); + + this.defaultValue = defaultValue; + } + + /** + * @inheritDoc + */ + public override refresh(): void { + const editor = this.editor; + const model = editor.model; + const document = model.document; + + const table = document.selection.getFirstPosition().findAncestor( 'table' ); + + this.isEnabled = !!table; + this.value = this.isEnabled ? table.getAttribute( 'borderTopStyle' ) || this.defaultValue : this.defaultValue; + } + + /** + * @inheritDoc + */ + public override execute( options: { value?: unknown; batch?: Batch } = {} ): void { + this.editor.model.change( writer => { + const value = getNewTableProperty( options.value, this.value, this.defaultValue ); + const selectedCells = this.editor.model.document.selection.getSelectedCells(); + + for ( const cell of selectedCells ) { + writer.setAttribute( 'borderTopStyle', value, cell ); + } + } ); + } +} diff --git a/packages/ckeditor5-table/src/tableproperties/tablepropertiesediting.ts b/packages/ckeditor5-table/src/tableproperties/tablepropertiesediting.ts index b89a86d603f..2685e552852 100644 --- a/packages/ckeditor5-table/src/tableproperties/tablepropertiesediting.ts +++ b/packages/ckeditor5-table/src/tableproperties/tablepropertiesediting.ts @@ -29,6 +29,10 @@ import { import { TableBackgroundColorCommand } from './commands/tablebackgroundcolorcommand.js'; import { TableBorderColorCommand } from './commands/tablebordercolorcommand.js'; import { TableBorderStyleCommand } from './commands/tableborderstylecommand.js'; +import { TableBorderTopStyleCommand } from './commands/tablebordertopstylecommand.js'; +import { TableBorderRightStyleCommand } from './commands/tableborderrightstylecommand.js'; +import { TableBorderBottomStyleCommand } from './commands/tableborderbottomstylecommand.js'; +import { TableBorderLeftStyleCommand } from './commands/tableborderleftstylecommand.js'; import { TableBorderWidthCommand } from './commands/tableborderwidthcommand.js'; import { TableWidthCommand } from './commands/tablewidthcommand.js'; import { TableHeightCommand } from './commands/tableheightcommand.js'; @@ -103,6 +107,10 @@ export class TablePropertiesEditing extends Plugin { editor.commands.add( 'tableBorderColor', new TableBorderColorCommand( editor, defaultTableProperties.borderColor ) ); editor.commands.add( 'tableBorderStyle', new TableBorderStyleCommand( editor, defaultTableProperties.borderStyle ) ); + editor.commands.add( 'tableBorderTopStyle', new TableBorderTopStyleCommand( editor, defaultTableProperties.borderStyle ) ); + editor.commands.add( 'tableBorderRightStyle', new TableBorderRightStyleCommand( editor, defaultTableProperties.borderStyle ) ); + editor.commands.add( 'tableBorderBottomStyle', new TableBorderBottomStyleCommand( editor, defaultTableProperties.borderStyle ) ); + editor.commands.add( 'tableBorderLeftStyle', new TableBorderLeftStyleCommand( editor, defaultTableProperties.borderStyle ) ); editor.commands.add( 'tableBorderWidth', new TableBorderWidthCommand( editor, defaultTableProperties.borderWidth ) ); enableAlignmentProperty( schema, conversion, defaultTableProperties.alignment! ); @@ -157,7 +165,11 @@ function enableBorderProperties( const modelAttributes = { width: 'tableBorderWidth', color: 'tableBorderColor', - style: 'tableBorderStyle' + style: 'tableBorderStyle', + topStyle: 'borderTopStyle', + rightStyle: 'borderRightStyle', + bottomStyle: 'borderBottomStyle', + leftStyle: 'borderLeftStyle' }; schema.extend( 'table', { @@ -172,6 +184,10 @@ function enableBorderProperties( downcastTableAttribute( conversion, { modelAttribute: modelAttributes.color, styleName: 'border-color' } ); downcastTableAttribute( conversion, { modelAttribute: modelAttributes.style, styleName: 'border-style' } ); + downcastTableAttribute( conversion, { modelAttribute: modelAttributes.topStyle, styleName: 'border-top-style' } ); + downcastTableAttribute( conversion, { modelAttribute: modelAttributes.rightStyle, styleName: 'border-right-style' } ); + downcastTableAttribute( conversion, { modelAttribute: modelAttributes.bottomStyle, styleName: 'border-bottom-style' } ); + downcastTableAttribute( conversion, { modelAttribute: modelAttributes.leftStyle, styleName: 'border-left-style' } ); downcastTableAttribute( conversion, { modelAttribute: modelAttributes.width, styleName: 'border-width' } ); } diff --git a/packages/ckeditor5-table/src/tableproperties/tablepropertiesui.ts b/packages/ckeditor5-table/src/tableproperties/tablepropertiesui.ts index 33d46fdaf17..5bd8da658da 100644 --- a/packages/ckeditor5-table/src/tableproperties/tablepropertiesui.ts +++ b/packages/ckeditor5-table/src/tableproperties/tablepropertiesui.ts @@ -40,12 +40,20 @@ import type { Batch } from 'ckeditor5/src/engine.js'; import type { EventInfo, ObservableChangeEvent } from 'ckeditor5/src/utils.js'; import { type TableBorderStyleCommand } from './commands/tableborderstylecommand.js'; +import { type TableBorderTopStyleCommand } from './commands/tablebordertopstylecommand.js'; +import { type TableBorderRightStyleCommand } from './commands/tableborderrightstylecommand.js'; +import { type TableBorderBottomStyleCommand } from './commands/tableborderbottomstylecommand.js'; +import { type TableBorderLeftStyleCommand } from './commands/tableborderleftstylecommand.js'; const ERROR_TEXT_TIMEOUT = 500; // Map of view properties and related commands. const propertyToCommandMap = { borderStyle: 'tableBorderStyle', + borderTopStyle: 'tableBorderTopStyle', + borderRightStyle: 'tableBorderRightStyle', + borderBottomStyle: 'tableBorderBottomStyle', + borderLeftStyle: 'tableBorderLeftStyle', borderColor: 'tableBorderColor', borderWidth: 'tableBorderWidth', backgroundColor: 'tableBackgroundColor', @@ -259,7 +267,27 @@ export class TablePropertiesUI extends Plugin { // visible in the editing as soon as the user types or changes fields' values. view.on>( 'change:borderStyle', - this._getPropertyChangeCallback( 'tableBorderStyle' ) + this._getBorderStyleChangeCallback( 'tableBorderStyle', view ) + ); + + view.on>( + 'change:borderTopStyle', + this._getPropertyChangeCallback( 'tableBorderTopStyle' ) + ); + + view.on>( + 'change:borderRightStyle', + this._getPropertyChangeCallback( 'tableBorderRightStyle' ) + ); + + view.on>( + 'change:borderBottomStyle', + this._getPropertyChangeCallback( 'tableBorderBottomStyle' ) + ); + + view.on>( + 'change:borderLeftStyle', + this._getPropertyChangeCallback( 'tableBorderLeftStyle' ) ); view.on>( 'change:borderColor', this._getValidatedPropertyChangeCallback( { @@ -316,6 +344,10 @@ export class TablePropertiesUI extends Plugin { private _fillViewFormFromCommandValues() { const commands = this.editor.commands; const borderStyleCommand: TableBorderStyleCommand = commands.get( 'tableBorderStyle' )!; + const borderTopStyleCommand: TableBorderTopStyleCommand = commands.get( 'tableBorderTopStyle' )!; + const borderRightStyleCommand: TableBorderRightStyleCommand = commands.get( 'tableBorderRightStyle' )!; + const borderBottomStyleCommand: TableBorderBottomStyleCommand = commands.get( 'tableBorderBottomStyle' )!; + const borderLeftStyleCommand: TableBorderLeftStyleCommand = commands.get( 'tableBorderLeftStyle' )!; Object.entries( propertyToCommandMap ) .map( ( [ property, commandName ] ) => { @@ -332,6 +364,11 @@ export class TablePropertiesUI extends Plugin { return; } + if ( borderTopStyleCommand.value && borderRightStyleCommand.value && borderBottomStyleCommand.value && + borderLeftStyleCommand.value ) { + this.view!.set( 'border', 'separate' ); + } + this.view!.set( property, value ); } ); @@ -436,13 +473,42 @@ export class TablePropertiesUI extends Plugin { * * @param commandName The command that will be executed. */ - private _getPropertyChangeCallback( commandName: 'tableBorderStyle' | 'tableAlignment' ) { + private _getPropertyChangeCallback( + commandName: 'tableBorderStyle' | 'tableAlignment' | 'tableBorderTopStyle' | 'tableBorderRightStyle' | + 'tableBorderBottomStyle' | 'tableBorderLeftStyle' + ) { + return ( evt: EventInfo, propertyName: string, newValue: string ) => { + // Do not execute the command on initial call (opening the table properties view). + if ( !this._isReady ) { + return; + } + + this.editor.execute( commandName, { + value: newValue, + batch: this._undoStepBatch + } ); + }; + } + + /** + * Creates a callback that when executed upon {@link #view view's} property change + * executes a related editor command with the new property value. + * + * If new value will be set to the default value, the command will not be executed. + * + * @param commandName The command that will be executed. + */ + private _getBorderStyleChangeCallback( commandName: 'tableBorderStyle', view: TablePropertiesView ) { return ( evt: EventInfo, propertyName: string, newValue: string ) => { // Do not execute the command on initial call (opening the table properties view). if ( !this._isReady ) { return; } + if ( newValue !== 'none' ) { + view.border = 'all'; + } + this.editor.execute( commandName, { value: newValue, batch: this._undoStepBatch diff --git a/packages/ckeditor5-table/src/tableproperties/ui/tablepropertiesview.ts b/packages/ckeditor5-table/src/tableproperties/ui/tablepropertiesview.ts index 0bc8872301c..a863b7aaba8 100644 --- a/packages/ckeditor5-table/src/tableproperties/ui/tablepropertiesview.ts +++ b/packages/ckeditor5-table/src/tableproperties/ui/tablepropertiesview.ts @@ -85,6 +85,14 @@ export interface TablePropertiesViewOptions { * certain style aspects of a table, for instance, border, background color, alignment, etc.. */ export class TablePropertiesView extends View { + /** + * The value of the border style. + * + * @observable + * @default '' + */ + declare public border: string; + /** * The value of the border style. * @@ -93,6 +101,38 @@ export class TablePropertiesView extends View { */ declare public borderStyle: string; + /** + * The value of the top border style. + * + * @observable + * @default '' + */ + declare public borderTopStyle: string; + + /** + * The value of the right border style. + * + * @observable + * @default '' + */ + declare public borderRightStyle: string; + + /** + * The value of the bottom border style. + * + * @observable + * @default '' + */ + declare public borderBottomStyle: string; + + /** + * The value of the left border style. + * + * @observable + * @default '' + */ + declare public borderLeftStyle: string; + /** * The value of the border width style. * @@ -166,6 +206,26 @@ export class TablePropertiesView extends View { */ public readonly borderStyleDropdown: LabeledFieldView; + /** + * A dropdown that allows selecting the style of the table top border. + */ + public readonly borderTopStyleDropdown: LabeledFieldView; + + /** + * A dropdown that allows selecting the style of the table right border. + */ + public readonly borderRightStyleDropdown: LabeledFieldView; + + /** + * A dropdown that allows selecting the style of the table bottom border. + */ + public readonly borderBottomStyleDropdown: LabeledFieldView; + + /** + * A dropdown that allows selecting the style of the table left border. + */ + public readonly borderLeftStyleDropdown: LabeledFieldView; + /** * An input that allows specifying the width of the table border. */ @@ -224,7 +284,12 @@ export class TablePropertiesView extends View { super( locale ); this.set( { + border: 'all', borderStyle: '', + borderTopStyle: '', + borderRightStyle: '', + borderBottomStyle: '', + borderLeftStyle: '', borderWidth: '', borderColor: '', backgroundColor: '', @@ -235,7 +300,16 @@ export class TablePropertiesView extends View { this.options = options; - const { borderStyleDropdown, borderWidthInput, borderColorInput, borderRowLabel } = this._createBorderFields(); + const { + borderStyleDropdown, + borderTopStyleDropdown, + borderRightStyleDropdown, + borderBottomStyleDropdown, + borderLeftStyleDropdown, + borderWidthInput, + borderColorInput, + borderRowLabel + } = this._createBorderFields(); const { backgroundRowLabel, backgroundInput } = this._createBackgroundFields(); const { widthInput, operatorLabel, heightInput, dimensionsLabel } = this._createDimensionFields(); const { alignmentToolbar, alignmentLabel } = this._createAlignmentFields(); @@ -245,6 +319,10 @@ export class TablePropertiesView extends View { this.children = this.createCollection(); this.borderStyleDropdown = borderStyleDropdown; + this.borderTopStyleDropdown = borderTopStyleDropdown; + this.borderRightStyleDropdown = borderRightStyleDropdown; + this.borderBottomStyleDropdown = borderBottomStyleDropdown; + this.borderLeftStyleDropdown = borderLeftStyleDropdown; this.borderWidthInput = borderWidthInput; this.borderColorInput = borderColorInput; this.backgroundInput = backgroundInput; @@ -284,6 +362,10 @@ export class TablePropertiesView extends View { children: [ borderRowLabel, borderStyleDropdown, + borderTopStyleDropdown, + borderRightStyleDropdown, + borderBottomStyleDropdown, + borderLeftStyleDropdown, borderColorInput, borderWidthInput ], @@ -369,6 +451,10 @@ export class TablePropertiesView extends View { [ this.borderStyleDropdown, + this.borderTopStyleDropdown, + this.borderRightStyleDropdown, + this.borderBottomStyleDropdown, + this.borderLeftStyleDropdown, this.borderColorInput, this.borderWidthInput, this.backgroundInput, @@ -468,6 +554,134 @@ export class TablePropertiesView extends View { ariaLabel: accessibleLabel } ); + // -- Top Style --------------------------------------------------- + + const borderTopStyleDropdown = new LabeledFieldView( locale, createLabeledDropdown ); + borderTopStyleDropdown.set( { + label: t( 'Top border style' ), + class: 'ck-table-form__border-style' + } ); + + borderTopStyleDropdown.fieldView.buttonView.set( { + ariaLabel: t( 'Top border style' ), + ariaLabelledBy: undefined, + isOn: false, + withText: true, + tooltip: t( 'Top border style' ) + } ); + + borderTopStyleDropdown.fieldView.buttonView.bind( 'label' ).to( this, 'borderTopStyle', value => { + return styleLabels[ value ? value : 'none' ]; + } ); + + borderTopStyleDropdown.fieldView.on( 'execute', evt => { + this.borderTopStyle = ( evt.source as any )._borderStyleValue; + } ); + + borderTopStyleDropdown.bind( 'isEmpty' ).to( this, 'borderTopStyle', value => !value ); + borderTopStyleDropdown.bind( 'isVisible' ).to( this, 'border', value => value === 'separate' ); + + addListToDropdown( borderTopStyleDropdown.fieldView, getBorderStyleDefinitions( this, defaultBorder.style! ), { + role: 'menu', + ariaLabel: t( 'Top border style' ) + } ); + + // -- Right Style --------------------------------------------------- + + const borderRightStyleDropdown = new LabeledFieldView( locale, createLabeledDropdown ); + borderRightStyleDropdown.set( { + label: t( 'Right border style' ), + class: 'ck-table-form__border-style' + } ); + + borderRightStyleDropdown.fieldView.buttonView.set( { + ariaLabel: t( 'Right border style' ), + ariaLabelledBy: undefined, + isOn: false, + withText: true, + tooltip: t( 'Right border style' ) + } ); + + borderRightStyleDropdown.fieldView.buttonView.bind( 'label' ).to( this, 'borderRightStyle', value => { + return styleLabels[ value ? value : 'none' ]; + } ); + + borderRightStyleDropdown.fieldView.on( 'execute', evt => { + this.borderRightStyle = ( evt.source as any )._borderStyleValue; + } ); + + borderRightStyleDropdown.bind( 'isEmpty' ).to( this, 'borderRightStyle', value => !value ); + borderRightStyleDropdown.bind( 'isVisible' ).to( this, 'border', value => value === 'separate' ); + + addListToDropdown( borderRightStyleDropdown.fieldView, getBorderStyleDefinitions( this, defaultBorder.style! ), { + role: 'menu', + ariaLabel: t( 'Right border style' ) + } ); + + // -- Bottom Style --------------------------------------------------- + + const borderBottomStyleDropdown = new LabeledFieldView( locale, createLabeledDropdown ); + borderBottomStyleDropdown.set( { + label: t( 'Bottom border style' ), + class: 'ck-table-form__border-style' + } ); + + borderBottomStyleDropdown.fieldView.buttonView.set( { + ariaLabel: t( 'Bottom border style' ), + ariaLabelledBy: undefined, + isOn: false, + withText: true, + tooltip: t( 'Bottom border style' ) + } ); + + borderBottomStyleDropdown.fieldView.buttonView.bind( 'label' ).to( this, 'borderBottomStyle', value => { + return styleLabels[ value ? value : 'none' ]; + } ); + + borderBottomStyleDropdown.fieldView.on( 'execute', evt => { + this.borderBottomStyle = ( evt.source as any )._borderStyleValue; + } ); + + borderBottomStyleDropdown.bind( 'isEmpty' ).to( this, 'borderBottomStyle', value => !value ); + borderBottomStyleDropdown.bind( 'isVisible' ).to( this, 'border', value => value === 'separate' ); + + addListToDropdown( borderBottomStyleDropdown.fieldView, getBorderStyleDefinitions( this, defaultBorder.style! ), { + role: 'menu', + ariaLabel: t( 'Bottom border style' ) + } ); + + // -- Left Style --------------------------------------------------- + + const borderLeftStyleDropdown = new LabeledFieldView( locale, createLabeledDropdown ); + borderLeftStyleDropdown.set( { + label: t( 'Left border style' ), + class: 'ck-table-form__border-style' + } ); + + borderLeftStyleDropdown.fieldView.buttonView.set( { + ariaLabel: t( 'Left border style' ), + ariaLabelledBy: undefined, + isOn: false, + withText: true, + tooltip: t( 'Left border style' ) + } ); + + borderLeftStyleDropdown.fieldView.buttonView.bind( 'label' ).to( this, 'borderLeftStyle', value => { + return styleLabels[ value ? value : 'none' ]; + } ); + + borderLeftStyleDropdown.fieldView.on( 'execute', evt => { + this.borderLeftStyle = ( evt.source as any )._borderStyleValue; + } ); + + borderLeftStyleDropdown.bind( 'isEmpty' ).to( this, 'borderLeftStyle', value => !value ); + borderLeftStyleDropdown.bind( 'isVisible' ).to( this, 'border', value => value === 'separate' ); + + addListToDropdown( borderLeftStyleDropdown.fieldView, getBorderStyleDefinitions( this, defaultBorder.style! ), { + role: 'menu', + ariaLabel: t( 'Left border style' ) + } ); + // -- Width --------------------------------------------------- const borderWidthInput = new LabeledFieldView( locale, createLabeledInputText ); @@ -518,6 +732,10 @@ export class TablePropertiesView extends View { return { borderRowLabel, borderStyleDropdown, + borderTopStyleDropdown, + borderRightStyleDropdown, + borderBottomStyleDropdown, + borderLeftStyleDropdown, borderColorInput, borderWidthInput };