Skip to content

Commit

Permalink
Add column resize balloon editor
Browse files Browse the repository at this point in the history
  • Loading branch information
Mati365 committed Apr 19, 2024
1 parent e719712 commit 4083eda
Show file tree
Hide file tree
Showing 22 changed files with 2,063 additions and 357 deletions.
6 changes: 5 additions & 1 deletion packages/ckeditor5-table/lang/contexts.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
"Insert column left": "Label for the insert table column to the left of the current one button.",
"Insert column right": "Label for the insert table column to the right of the current one button.",
"Delete column": "Label for the delete table column button.",
"Resize column": "Label for the resize table column button.",
"Select column": "Label for the select the entire table column button.",
"Column": "Label for the table column dropdown button.",
"Header row": "Label for the set/unset table header row button.",
Expand Down Expand Up @@ -63,5 +64,8 @@
"Move the selection to the previous cell": "Keystroke description for assistive technologies: keystroke for moving the selection to the previous cell.",
"Insert a new table row (when in the last cell of a table)": "Keystroke description for assistive technologies: keystroke for inserting a new table row.",
"Navigate through the table": "Keystroke description for assistive technologies: keystroke for navigating through the table.",
"Table": "The accessible label of the menu bar button that displays a user interface to insert a table into editor content."
"Table": "The accessible label of the menu bar button that displays a user interface to insert a table into editor content.",
"Column width in pixels": "The label for the column width input.",
"Column width must not be empty.": "Text used as error label when user submitted resize table column form with blank value.",
"Incorrect column width value.": "Text used as error label when user submitted resize table column form with incorrect value."
}
2 changes: 1 addition & 1 deletion packages/ckeditor5-table/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
"main": "src/index.ts",
"dependencies": {
"ckeditor5": "41.3.1",
"@ckeditor/ckeditor5-ui": "41.3.1",
"lodash-es": "4.17.21"
},
"devDependencies": {
Expand All @@ -36,7 +37,6 @@
"@ckeditor/ckeditor5-paragraph": "41.3.1",
"@ckeditor/ckeditor5-theme-lark": "41.3.1",
"@ckeditor/ckeditor5-typing": "41.3.1",
"@ckeditor/ckeditor5-ui": "41.3.1",
"@ckeditor/ckeditor5-undo": "41.3.1",
"@ckeditor/ckeditor5-utils": "41.3.1",
"@ckeditor/ckeditor5-widget": "41.3.1",
Expand Down
6 changes: 6 additions & 0 deletions packages/ckeditor5-table/src/augmentation.ts
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import type {
TableClipboard,
TableColumnResize,
TableColumnResizeEditing,
TableColumnResizeUI,
TableEditing,
TableKeyboard,
TableMouse,
Expand All @@ -29,6 +30,7 @@ import type {
TableToolbar,
TableUI,
TableUtils,
TableColumnResizeUtils,
PlainTableOutput,

// Commands
Expand Down Expand Up @@ -56,6 +58,7 @@ import type {
TableCellWidthCommand,
TableAlignmentCommand,
TableBackgroundColorCommand,
TableColumnResizeCommand,
TableBorderColorCommand,
TableBorderStyleCommand,
TableBorderWidthCommand,
Expand Down Expand Up @@ -85,6 +88,8 @@ declare module '@ckeditor/ckeditor5-core' {
[ TableCellWidthEditing.pluginName ]: TableCellWidthEditing;
[ TableClipboard.pluginName ]: TableClipboard;
[ TableColumnResize.pluginName ]: TableColumnResize;
[ TableColumnResizeUtils.pluginName ]: TableColumnResizeUtils;
[ TableColumnResizeUI.pluginName ]: TableColumnResizeUI;
[ TableColumnResizeEditing.pluginName ]: TableColumnResizeEditing;
[ TableEditing.pluginName ]: TableEditing;
[ TableKeyboard.pluginName ]: TableKeyboard;
Expand Down Expand Up @@ -135,5 +140,6 @@ declare module '@ckeditor/ckeditor5-core' {
tableBorderWidth: TableBorderWidthCommand;
tableHeight: TableHeightCommand;
tableWidth: TableWidthCommand;
resizeTableColumn: TableColumnResizeCommand;
}
}
3 changes: 3 additions & 0 deletions packages/ckeditor5-table/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,9 @@ export { default as TableKeyboard } from './tablekeyboard.js';
export { default as TableSelection } from './tableselection.js';
export { default as TableUtils } from './tableutils.js';
export { default as TableColumnResize } from './tablecolumnresize.js';
export { default as TableColumnResizeUtils } from './tablecolumnresize/tablecolumnresizeutils.js';
export { default as TableColumnResizeEditing } from './tablecolumnresize/tablecolumnresizeediting.js';
export { default as TableColumnResizeUI } from './tablecolumnresize/tablecolumnresizeui.js';

export type { TableConfig } from './tableconfig.js';
export type { default as InsertColumnCommand } from './commands/insertcolumncommand.js';
Expand Down Expand Up @@ -60,5 +62,6 @@ export type { default as TableBorderStyleCommand } from './tableproperties/comma
export type { default as TableBorderWidthCommand } from './tableproperties/commands/tableborderwidthcommand.js';
export type { default as TableHeightCommand } from './tableproperties/commands/tableheightcommand.js';
export type { default as TableWidthCommand } from './tableproperties/commands/tablewidthcommand.js';
export type { default as TableColumnResizeCommand } from './tablecolumnresize/commands/tablecolumnresizecommand.js';

import './augmentation.js';
3 changes: 2 additions & 1 deletion packages/ckeditor5-table/src/tablecolumnresize.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
import { Plugin } from 'ckeditor5/src/core.js';
import TableColumnResizeEditing from './tablecolumnresize/tablecolumnresizeediting.js';
import TableCellWidthEditing from './tablecellwidth/tablecellwidthediting.js';
import TableColumnResizeUI from './tablecolumnresize/tablecolumnresizeui.js';

import '../theme/tablecolumnresize.css';

Expand All @@ -23,7 +24,7 @@ export default class TableColumnResize extends Plugin {
* @inheritDoc
*/
public static get requires() {
return [ TableColumnResizeEditing, TableCellWidthEditing ] as const;
return [ TableColumnResizeEditing, TableColumnResizeUI, TableCellWidthEditing ] as const;
}

/**
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
/**
* @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
*/

/**
* @module table/tablecolumnresize/commands/tablecolumnresizecommand
*/

import { Command, type Editor } from 'ckeditor5/src/core.js';
import type { DowncastInsertEvent } from 'ckeditor5/src/engine.js';
import type { PossibleResizeColumnRange } from '../tablecolumnresizeutils.js';

/**
* The resize table column command.
*
* The command is registered by {@link module:table/tablecolumnresize/tablecolumnresizeui~TableColumnResizeUI}
* as the `'resizeTableColumn'` editor command.
*
* To resize currently selected column, execute the command:
*
* ```ts
* editor.execute( 'resizeTableColumn', { newColumnWidth: 250 } );
* ```
*/
export default class TableColumnResizeCommand extends Command {
/**
* The command value: Current size of column (in pixels) and possible resize range of such column..
*
* @readonly
* @observable
*/
declare public possibleRange: PossibleResizeColumnRange | null;

constructor( editor: Editor ) {
super( editor );

// After inserting a table, the Resizer column elements are added to the document.
// However, the plugin remains disabled because none of the column resizers have been mounted in the DOM yet.
// To ensure that the resize option is enabled, refresh the plugin after rendering the table.
this.editor.conversion.for( 'editingDowncast' ).add( dispatcher => {
dispatcher.on<DowncastInsertEvent>( 'insert:table', () => {
editor.editing.view.once( 'render', this.refresh.bind( this ) );
} );
} );
}

/**
* @inheritDoc
*/
public override refresh(): void {
const { plugins } = this.editor;

const resizeUtils = plugins.get( 'TableColumnResizeUtils' );
const tableUtils = plugins.get( 'TableUtils' );

const smallestResizer = resizeUtils.getSmallestSelectedColumnResizer();

if ( smallestResizer ) {
const { last, first } = tableUtils.getColumnIndexes(
tableUtils.getSelectionAffectedTableCells( this.editor.model.document.selection )
);

if ( last === first ) {
this.isEnabled = true;
this.possibleRange = resizeUtils.getPossibleResizeColumnRange( smallestResizer );
return;
}
}

this.isEnabled = false;
this.possibleRange = null;
}

/**
* Executes the command.
*
* Resizes selected column to new size.
*
* @param options.newColumnWidth New column size in pixels.
* @fires execute
*/
public override execute( { newColumnWidth }: TableColumnResizeCommandOptions ): void {
const resizeUtils = this.editor.plugins.get( 'TableColumnResizeUtils' );
const resizer = resizeUtils.getSmallestSelectedColumnResizer();

resizeUtils.resizeColumnUsingResizer( resizer!, newColumnWidth );
}
}

export interface TableColumnResizeCommandOptions {

/**
* Represents the width of a new table column in pixels.
*
* * The width is automatically clamped if it's too large or too small.
* * The width corresponds to the inner cell content width (excluding borders).
*/
newColumnWidth: number;
}
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,12 @@
*/

/**
* @module table/tablecolumnresize/tablewidthscommand
* @module table/tablecolumnresize/commands/tablewidthscommand
*/

import type { Element } from 'ckeditor5/src/engine.js';
import { Command } from 'ckeditor5/src/core.js';
import { normalizeColumnWidths } from './utils.js';
import { normalizeColumnWidths } from '../utils.js';

/**
* Command used by the {@link module:table/tablecolumnresize~TableColumnResize Table column resize feature} that
Expand Down
Loading

0 comments on commit 4083eda

Please sign in to comment.