-
-
Notifications
You must be signed in to change notification settings - Fork 3.7k
/
tabletoolbar.js
111 lines (100 loc) · 3.49 KB
/
tabletoolbar.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
/**
* @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
*/
/**
* @module table/tabletoolbar
*/
import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
import WidgetToolbarRepository from '@ckeditor/ckeditor5-widget/src/widgettoolbarrepository';
import { getSelectedTableWidget, getTableWidgetAncestor } from './utils/ui/widget';
/**
* The table toolbar class. It creates toolbars for the table feature and its content (for now only for the table cell content).
*
* The table toolbar shows up when a table widget is selected. Its components (e.g. buttons) are created based on the
* {@link module:table/table~TableConfig#tableToolbar `table.tableToolbar` configuration option}.
*
* Table content toolbar shows up when the selection is inside the content of a table. It creates its component based on the
* {@link module:table/table~TableConfig#contentToolbar `table.contentToolbar` configuration option}.
*
* @extends module:core/plugin~Plugin
*/
export default class TableToolbar extends Plugin {
/**
* @inheritDoc
*/
static get requires() {
return [ WidgetToolbarRepository ];
}
/**
* @inheritDoc
*/
static get pluginName() {
return 'TableToolbar';
}
/**
* @inheritDoc
*/
afterInit() {
const editor = this.editor;
const t = editor.t;
const widgetToolbarRepository = editor.plugins.get( WidgetToolbarRepository );
const tableContentToolbarItems = editor.config.get( 'table.contentToolbar' );
const tableToolbarItems = editor.config.get( 'table.tableToolbar' );
if ( tableContentToolbarItems ) {
widgetToolbarRepository.register( 'tableContent', {
ariaLabel: t( 'Table toolbar' ),
items: tableContentToolbarItems,
getRelatedElement: getTableWidgetAncestor
} );
}
if ( tableToolbarItems ) {
widgetToolbarRepository.register( 'table', {
ariaLabel: t( 'Table toolbar' ),
items: tableToolbarItems,
getRelatedElement: getSelectedTableWidget
} );
}
}
}
/**
* Items to be placed in the table content toolbar.
* The {@link module:table/tabletoolbar~TableToolbar} plugin is required to make this toolbar work.
*
* Assuming that you use the {@link module:table/tableui~TableUI} feature, the following toolbar items will be available
* in {@link module:ui/componentfactory~ComponentFactory}:
*
* * `'tableRow'`,
* * `'tableColumn'`,
* * `'mergeTableCells'`.
*
* You can thus configure the toolbar like this:
*
* const tableConfig = {
* contentToolbar: [ 'tableRow', 'tableColumn', 'mergeTableCells' ]
* };
*
* Of course, the same buttons can also be used in the
* {@link module:core/editor/editorconfig~EditorConfig#toolbar main editor toolbar}.
*
* Read more about configuring the toolbar in {@link module:core/editor/editorconfig~EditorConfig#toolbar}.
*
* @member {Array.<String>} module:table/table~TableConfig#contentToolbar
*/
/**
* Items to be placed in the table toolbar.
* The {@link module:table/tabletoolbar~TableToolbar} plugin is required to make this toolbar work.
*
* You can thus configure the toolbar like this:
*
* const tableConfig = {
* tableToolbar: [ 'blockQuote' ]
* };
*
* Of course, the same buttons can also be used in the
* {@link module:core/editor/editorconfig~EditorConfig#toolbar main editor toolbar}.
*
* Read more about configuring the toolbar in {@link module:core/editor/editorconfig~EditorConfig#toolbar}.
*
* @member {Array.<String>} module:table/table~TableConfig#tableToolbar
*/