1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 | import { Plugin } from 'ckeditor5/src/core';
|
9 | import { ButtonView, clickOutsideHandler, ContextualBalloon, getLocalizedColorOptions, normalizeColorOptions } from 'ckeditor5/src/ui';
|
10 | import TableCellPropertiesView from './ui/tablecellpropertiesview';
|
11 | import { colorFieldValidator, getLocalizedColorErrorText, getLocalizedLengthErrorText, defaultColors, lengthFieldValidator, lineWidthFieldValidator } from '../utils/ui/table-properties';
|
12 | import { debounce } from 'lodash-es';
|
13 | import { getTableWidgetAncestor } from '../utils/ui/widget';
|
14 | import { getBalloonCellPositionData, repositionContextualBalloon } from '../utils/ui/contextualballoon';
|
15 | import tableCellProperties from './../../theme/icons/table-cell-properties.svg';
|
16 | import { getNormalizedDefaultProperties } from '../utils/table-properties';
|
17 | const ERROR_TEXT_TIMEOUT = 500;
|
18 |
|
19 | const propertyToCommandMap = {
|
20 | borderStyle: 'tableCellBorderStyle',
|
21 | borderColor: 'tableCellBorderColor',
|
22 | borderWidth: 'tableCellBorderWidth',
|
23 | height: 'tableCellHeight',
|
24 | width: 'tableCellWidth',
|
25 | padding: 'tableCellPadding',
|
26 | backgroundColor: 'tableCellBackgroundColor',
|
27 | horizontalAlignment: 'tableCellHorizontalAlignment',
|
28 | verticalAlignment: 'tableCellVerticalAlignment'
|
29 | };
|
30 |
|
31 |
|
32 |
|
33 |
|
34 |
|
35 |
|
36 | export default class TableCellPropertiesUI extends Plugin {
|
37 | |
38 |
|
39 |
|
40 | static get requires() {
|
41 | return [ContextualBalloon];
|
42 | }
|
43 | |
44 |
|
45 |
|
46 | static get pluginName() {
|
47 | return 'TableCellPropertiesUI';
|
48 | }
|
49 | |
50 |
|
51 |
|
52 | constructor(editor) {
|
53 | super(editor);
|
54 | editor.config.define('table.tableCellProperties', {
|
55 | borderColors: defaultColors,
|
56 | backgroundColors: defaultColors
|
57 | });
|
58 | }
|
59 | |
60 |
|
61 |
|
62 | init() {
|
63 | const editor = this.editor;
|
64 | const t = editor.t;
|
65 | this._defaultTableCellProperties = getNormalizedDefaultProperties(editor.config.get('table.tableCellProperties.defaultProperties'), {
|
66 | includeVerticalAlignmentProperty: true,
|
67 | includeHorizontalAlignmentProperty: true,
|
68 | includePaddingProperty: true,
|
69 | isRightToLeftContent: editor.locale.contentLanguageDirection === 'rtl'
|
70 | });
|
71 | this._balloon = editor.plugins.get(ContextualBalloon);
|
72 | this.view = null;
|
73 | this._isReady = false;
|
74 | editor.ui.componentFactory.add('tableCellProperties', locale => {
|
75 | const view = new ButtonView(locale);
|
76 | view.set({
|
77 | label: t('Cell properties'),
|
78 | icon: tableCellProperties,
|
79 | tooltip: true
|
80 | });
|
81 | this.listenTo(view, 'execute', () => this._showView());
|
82 | const commands = Object.values(propertyToCommandMap)
|
83 | .map(commandName => editor.commands.get(commandName));
|
84 | view.bind('isEnabled').toMany(commands, 'isEnabled', (...areEnabled) => (areEnabled.some(isCommandEnabled => isCommandEnabled)));
|
85 | return view;
|
86 | });
|
87 | }
|
88 | |
89 |
|
90 |
|
91 | destroy() {
|
92 | super.destroy();
|
93 |
|
94 |
|
95 | if (this.view) {
|
96 | this.view.destroy();
|
97 | }
|
98 | }
|
99 | |
100 |
|
101 |
|
102 |
|
103 |
|
104 | _createPropertiesView() {
|
105 | const editor = this.editor;
|
106 | const config = editor.config.get('table.tableCellProperties');
|
107 | const borderColorsConfig = normalizeColorOptions(config.borderColors);
|
108 | const localizedBorderColors = getLocalizedColorOptions(editor.locale, borderColorsConfig);
|
109 | const backgroundColorsConfig = normalizeColorOptions(config.backgroundColors);
|
110 | const localizedBackgroundColors = getLocalizedColorOptions(editor.locale, backgroundColorsConfig);
|
111 | const view = new TableCellPropertiesView(editor.locale, {
|
112 | borderColors: localizedBorderColors,
|
113 | backgroundColors: localizedBackgroundColors,
|
114 | defaultTableCellProperties: this._defaultTableCellProperties
|
115 | });
|
116 | const t = editor.t;
|
117 |
|
118 | view.render();
|
119 | this.listenTo(view, 'submit', () => {
|
120 | this._hideView();
|
121 | });
|
122 | this.listenTo(view, 'cancel', () => {
|
123 |
|
124 | if (this._undoStepBatch.operations.length) {
|
125 | editor.execute('undo', this._undoStepBatch);
|
126 | }
|
127 | this._hideView();
|
128 | });
|
129 |
|
130 | view.keystrokes.set('Esc', (data, cancel) => {
|
131 | this._hideView();
|
132 | cancel();
|
133 | });
|
134 |
|
135 | clickOutsideHandler({
|
136 | emitter: view,
|
137 | activator: () => this._isViewInBalloon,
|
138 | contextElements: [this._balloon.view.element],
|
139 | callback: () => this._hideView()
|
140 | });
|
141 | const colorErrorText = getLocalizedColorErrorText(t);
|
142 | const lengthErrorText = getLocalizedLengthErrorText(t);
|
143 |
|
144 |
|
145 |
|
146 |
|
147 |
|
148 | view.on('change:borderStyle', this._getPropertyChangeCallback('tableCellBorderStyle'));
|
149 | view.on('change:borderColor', this._getValidatedPropertyChangeCallback({
|
150 | viewField: view.borderColorInput,
|
151 | commandName: 'tableCellBorderColor',
|
152 | errorText: colorErrorText,
|
153 | validator: colorFieldValidator
|
154 | }));
|
155 | view.on('change:borderWidth', this._getValidatedPropertyChangeCallback({
|
156 | viewField: view.borderWidthInput,
|
157 | commandName: 'tableCellBorderWidth',
|
158 | errorText: lengthErrorText,
|
159 | validator: lineWidthFieldValidator
|
160 | }));
|
161 | view.on('change:padding', this._getValidatedPropertyChangeCallback({
|
162 | viewField: view.paddingInput,
|
163 | commandName: 'tableCellPadding',
|
164 | errorText: lengthErrorText,
|
165 | validator: lengthFieldValidator
|
166 | }));
|
167 | view.on('change:width', this._getValidatedPropertyChangeCallback({
|
168 | viewField: view.widthInput,
|
169 | commandName: 'tableCellWidth',
|
170 | errorText: lengthErrorText,
|
171 | validator: lengthFieldValidator
|
172 | }));
|
173 | view.on('change:height', this._getValidatedPropertyChangeCallback({
|
174 | viewField: view.heightInput,
|
175 | commandName: 'tableCellHeight',
|
176 | errorText: lengthErrorText,
|
177 | validator: lengthFieldValidator
|
178 | }));
|
179 | view.on('change:backgroundColor', this._getValidatedPropertyChangeCallback({
|
180 | viewField: view.backgroundInput,
|
181 | commandName: 'tableCellBackgroundColor',
|
182 | errorText: colorErrorText,
|
183 | validator: colorFieldValidator
|
184 | }));
|
185 | view.on('change:horizontalAlignment', this._getPropertyChangeCallback('tableCellHorizontalAlignment'));
|
186 | view.on('change:verticalAlignment', this._getPropertyChangeCallback('tableCellVerticalAlignment'));
|
187 | return view;
|
188 | }
|
189 | |
190 |
|
191 |
|
192 |
|
193 |
|
194 |
|
195 |
|
196 |
|
197 | _fillViewFormFromCommandValues() {
|
198 | const commands = this.editor.commands;
|
199 | const borderStyleCommand = commands.get('tableCellBorderStyle');
|
200 | Object.entries(propertyToCommandMap)
|
201 | .map(([property, commandName]) => {
|
202 | const defaultValue = this._defaultTableCellProperties[property] || '';
|
203 | return [
|
204 | property,
|
205 | commands.get(commandName).value || defaultValue
|
206 | ];
|
207 | })
|
208 | .forEach(([property, value]) => {
|
209 |
|
210 | if ((property === 'borderColor' || property === 'borderWidth') && borderStyleCommand.value === 'none') {
|
211 | return;
|
212 | }
|
213 | this.view.set(property, value);
|
214 | });
|
215 | this._isReady = true;
|
216 | }
|
217 | |
218 |
|
219 |
|
220 |
|
221 |
|
222 |
|
223 |
|
224 | _showView() {
|
225 | const editor = this.editor;
|
226 | if (!this.view) {
|
227 | this.view = this._createPropertiesView();
|
228 | }
|
229 | this.listenTo(editor.ui, 'update', () => {
|
230 | this._updateView();
|
231 | });
|
232 |
|
233 | this._fillViewFormFromCommandValues();
|
234 | this._balloon.add({
|
235 | view: this.view,
|
236 | position: getBalloonCellPositionData(editor)
|
237 | });
|
238 |
|
239 | this._undoStepBatch = editor.model.createBatch();
|
240 |
|
241 | this.view.focus();
|
242 | }
|
243 | |
244 |
|
245 |
|
246 | _hideView() {
|
247 | const editor = this.editor;
|
248 | this.stopListening(editor.ui, 'update');
|
249 | this._isReady = false;
|
250 |
|
251 |
|
252 | this.view.saveButtonView.focus();
|
253 | this._balloon.remove(this.view);
|
254 |
|
255 |
|
256 | this.editor.editing.view.focus();
|
257 | }
|
258 | |
259 |
|
260 |
|
261 | _updateView() {
|
262 | const editor = this.editor;
|
263 | const viewDocument = editor.editing.view.document;
|
264 | if (!getTableWidgetAncestor(viewDocument.selection)) {
|
265 | this._hideView();
|
266 | }
|
267 | else if (this._isViewVisible) {
|
268 | repositionContextualBalloon(editor, 'cell');
|
269 | }
|
270 | }
|
271 | |
272 |
|
273 |
|
274 | get _isViewVisible() {
|
275 | return !!this.view && this._balloon.visibleView === this.view;
|
276 | }
|
277 | |
278 |
|
279 |
|
280 | get _isViewInBalloon() {
|
281 | return !!this.view && this._balloon.hasView(this.view);
|
282 | }
|
283 | |
284 |
|
285 |
|
286 |
|
287 |
|
288 |
|
289 | _getPropertyChangeCallback(commandName) {
|
290 | return (evt, propertyName, newValue) => {
|
291 | if (!this._isReady) {
|
292 | return;
|
293 | }
|
294 | this.editor.execute(commandName, {
|
295 | value: newValue,
|
296 | batch: this._undoStepBatch
|
297 | });
|
298 | };
|
299 | }
|
300 | |
301 |
|
302 |
|
303 |
|
304 |
|
305 | _getValidatedPropertyChangeCallback(options) {
|
306 | const { commandName, viewField, validator, errorText } = options;
|
307 | const setErrorTextDebounced = debounce(() => {
|
308 | viewField.errorText = errorText;
|
309 | }, ERROR_TEXT_TIMEOUT);
|
310 | return (evt, propertyName, newValue) => {
|
311 | setErrorTextDebounced.cancel();
|
312 |
|
313 | if (!this._isReady) {
|
314 | return;
|
315 | }
|
316 | if (validator(newValue)) {
|
317 | this.editor.execute(commandName, {
|
318 | value: newValue,
|
319 | batch: this._undoStepBatch
|
320 | });
|
321 | viewField.errorText = null;
|
322 | }
|
323 | else {
|
324 | setErrorTextDebounced();
|
325 | }
|
326 | };
|
327 | }
|
328 | }
|