feat: Add support for specific table border sides

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 `<figure>`).
  *

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 );
+			}
+		} );
+	}
+}

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 );
+			}
+		} );
+	}
+}

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 );
+			}
+		} );
+	}
+}

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 );
+			}
+		} );
+	}
+}

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' } );
 }