@ckeditor/ckeditor5-widget 39.0.2 → 40.0.0
Sign up to get free protection for your applications and to get access to all the features.
- package/package.json +7 -7
- package/src/augmentation.d.ts +13 -13
- package/src/augmentation.js +5 -5
- package/src/highlightstack.d.ts +74 -74
- package/src/highlightstack.js +129 -129
- package/src/index.d.ts +13 -13
- package/src/index.js +13 -13
- package/src/utils.d.ts +198 -198
- package/src/utils.js +348 -348
- package/src/verticalnavigation.d.ts +15 -15
- package/src/verticalnavigation.js +196 -196
- package/src/widget.d.ts +91 -91
- package/src/widget.js +380 -380
- package/src/widgetresize/resizer.d.ts +177 -177
- package/src/widgetresize/resizer.js +372 -372
- package/src/widgetresize/resizerstate.d.ts +125 -125
- package/src/widgetresize/resizerstate.js +150 -150
- package/src/widgetresize/sizeview.d.ts +55 -55
- package/src/widgetresize/sizeview.js +63 -63
- package/src/widgetresize.d.ts +125 -125
- package/src/widgetresize.js +188 -188
- package/src/widgettoolbarrepository.d.ts +94 -94
- package/src/widgettoolbarrepository.js +268 -268
- package/src/widgettypearound/utils.d.ts +38 -38
- package/src/widgettypearound/utils.js +52 -52
- package/src/widgettypearound/widgettypearound.d.ts +229 -229
- package/src/widgettypearound/widgettypearound.js +773 -773
@@ -1,63 +1,63 @@
|
|
1
|
-
/**
|
2
|
-
* @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
|
3
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
4
|
-
*/
|
5
|
-
/**
|
6
|
-
* @module widget/widgetresize/sizeview
|
7
|
-
*/
|
8
|
-
import { View } from '@ckeditor/ckeditor5-ui';
|
9
|
-
/**
|
10
|
-
* A view displaying the proposed new element size during the resizing.
|
11
|
-
*/
|
12
|
-
export default class SizeView extends View {
|
13
|
-
constructor() {
|
14
|
-
super();
|
15
|
-
const bind = this.bindTemplate;
|
16
|
-
this.setTemplate({
|
17
|
-
tag: 'div',
|
18
|
-
attributes: {
|
19
|
-
class: [
|
20
|
-
'ck',
|
21
|
-
'ck-size-view',
|
22
|
-
bind.to('_viewPosition', value => value ? `ck-orientation-${value}` : '')
|
23
|
-
],
|
24
|
-
style: {
|
25
|
-
display: bind.if('_isVisible', 'none', visible => !visible)
|
26
|
-
}
|
27
|
-
},
|
28
|
-
children: [{
|
29
|
-
text: bind.to('_label')
|
30
|
-
}]
|
31
|
-
});
|
32
|
-
}
|
33
|
-
/**
|
34
|
-
* A method used for binding the `SizeView` instance properties to the `ResizeState` instance observable properties.
|
35
|
-
*
|
36
|
-
* @internal
|
37
|
-
* @param options An object defining the resizer options, used for setting the proper size label.
|
38
|
-
* @param resizeState The `ResizeState` class instance, used for keeping the `SizeView` state up to date.
|
39
|
-
*/
|
40
|
-
_bindToState(options, resizeState) {
|
41
|
-
this.bind('_isVisible').to(resizeState, 'proposedWidth', resizeState, 'proposedHeight', (width, height) => width !== null && height !== null);
|
42
|
-
this.bind('_label').to(resizeState, 'proposedHandleHostWidth', resizeState, 'proposedHandleHostHeight', resizeState, 'proposedWidthPercents', (width, height, widthPercents) => {
|
43
|
-
if (options.unit === 'px') {
|
44
|
-
return `${width}×${height}`;
|
45
|
-
}
|
46
|
-
else {
|
47
|
-
return `${widthPercents}%`;
|
48
|
-
}
|
49
|
-
});
|
50
|
-
this.bind('_viewPosition').to(resizeState, 'activeHandlePosition', resizeState, 'proposedHandleHostWidth', resizeState, 'proposedHandleHostHeight',
|
51
|
-
// If the widget is too small to contain the size label, display the label above.
|
52
|
-
(position, width, height) => width < 50 || height < 50 ? 'above-center' : position);
|
53
|
-
}
|
54
|
-
/**
|
55
|
-
* A method used for cleaning up. It removes the bindings and hides the view.
|
56
|
-
*
|
57
|
-
* @internal
|
58
|
-
*/
|
59
|
-
_dismiss() {
|
60
|
-
this.unbind();
|
61
|
-
this._isVisible = false;
|
62
|
-
}
|
63
|
-
}
|
1
|
+
/**
|
2
|
+
* @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
|
3
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
4
|
+
*/
|
5
|
+
/**
|
6
|
+
* @module widget/widgetresize/sizeview
|
7
|
+
*/
|
8
|
+
import { View } from '@ckeditor/ckeditor5-ui';
|
9
|
+
/**
|
10
|
+
* A view displaying the proposed new element size during the resizing.
|
11
|
+
*/
|
12
|
+
export default class SizeView extends View {
|
13
|
+
constructor() {
|
14
|
+
super();
|
15
|
+
const bind = this.bindTemplate;
|
16
|
+
this.setTemplate({
|
17
|
+
tag: 'div',
|
18
|
+
attributes: {
|
19
|
+
class: [
|
20
|
+
'ck',
|
21
|
+
'ck-size-view',
|
22
|
+
bind.to('_viewPosition', value => value ? `ck-orientation-${value}` : '')
|
23
|
+
],
|
24
|
+
style: {
|
25
|
+
display: bind.if('_isVisible', 'none', visible => !visible)
|
26
|
+
}
|
27
|
+
},
|
28
|
+
children: [{
|
29
|
+
text: bind.to('_label')
|
30
|
+
}]
|
31
|
+
});
|
32
|
+
}
|
33
|
+
/**
|
34
|
+
* A method used for binding the `SizeView` instance properties to the `ResizeState` instance observable properties.
|
35
|
+
*
|
36
|
+
* @internal
|
37
|
+
* @param options An object defining the resizer options, used for setting the proper size label.
|
38
|
+
* @param resizeState The `ResizeState` class instance, used for keeping the `SizeView` state up to date.
|
39
|
+
*/
|
40
|
+
_bindToState(options, resizeState) {
|
41
|
+
this.bind('_isVisible').to(resizeState, 'proposedWidth', resizeState, 'proposedHeight', (width, height) => width !== null && height !== null);
|
42
|
+
this.bind('_label').to(resizeState, 'proposedHandleHostWidth', resizeState, 'proposedHandleHostHeight', resizeState, 'proposedWidthPercents', (width, height, widthPercents) => {
|
43
|
+
if (options.unit === 'px') {
|
44
|
+
return `${width}×${height}`;
|
45
|
+
}
|
46
|
+
else {
|
47
|
+
return `${widthPercents}%`;
|
48
|
+
}
|
49
|
+
});
|
50
|
+
this.bind('_viewPosition').to(resizeState, 'activeHandlePosition', resizeState, 'proposedHandleHostWidth', resizeState, 'proposedHandleHostHeight',
|
51
|
+
// If the widget is too small to contain the size label, display the label above.
|
52
|
+
(position, width, height) => width < 50 || height < 50 ? 'above-center' : position);
|
53
|
+
}
|
54
|
+
/**
|
55
|
+
* A method used for cleaning up. It removes the bindings and hides the view.
|
56
|
+
*
|
57
|
+
* @internal
|
58
|
+
*/
|
59
|
+
_dismiss() {
|
60
|
+
this.unbind();
|
61
|
+
this._isVisible = false;
|
62
|
+
}
|
63
|
+
}
|
package/src/widgetresize.d.ts
CHANGED
@@ -1,125 +1,125 @@
|
|
1
|
-
/**
|
2
|
-
* @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
|
3
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
4
|
-
*/
|
5
|
-
/**
|
6
|
-
* @module widget/widgetresize
|
7
|
-
*/
|
8
|
-
import Resizer from './widgetresize/resizer';
|
9
|
-
import { Plugin, type Editor } from '@ckeditor/ckeditor5-core';
|
10
|
-
import { type Element, type ViewContainerElement } from '@ckeditor/ckeditor5-engine';
|
11
|
-
import '../theme/widgetresize.css';
|
12
|
-
/**
|
13
|
-
* The widget resize feature plugin.
|
14
|
-
*
|
15
|
-
* Use the {@link module:widget/widgetresize~WidgetResize#attachTo} method to create a resizer for the specified widget.
|
16
|
-
*/
|
17
|
-
export default class WidgetResize extends Plugin {
|
18
|
-
/**
|
19
|
-
* The currently selected resizer.
|
20
|
-
*
|
21
|
-
* @observable
|
22
|
-
*/
|
23
|
-
selectedResizer: Resizer | null;
|
24
|
-
/**
|
25
|
-
* References an active resizer.
|
26
|
-
*
|
27
|
-
* Active resizer means a resizer which handle is actively used by the end user.
|
28
|
-
*
|
29
|
-
* @internal
|
30
|
-
* @observable
|
31
|
-
*/
|
32
|
-
_activeResizer: Resizer | null;
|
33
|
-
/**
|
34
|
-
* A map of resizers created using this plugin instance.
|
35
|
-
*/
|
36
|
-
private _resizers;
|
37
|
-
private _observer;
|
38
|
-
private _redrawSelectedResizerThrottled;
|
39
|
-
/**
|
40
|
-
* @inheritDoc
|
41
|
-
*/
|
42
|
-
static get pluginName(): "WidgetResize";
|
43
|
-
/**
|
44
|
-
* @inheritDoc
|
45
|
-
*/
|
46
|
-
init(): void;
|
47
|
-
/**
|
48
|
-
* Redraws the selected resizer if there is any selected resizer and if it is visible.
|
49
|
-
*/
|
50
|
-
redrawSelectedResizer(): void;
|
51
|
-
/**
|
52
|
-
* @inheritDoc
|
53
|
-
*/
|
54
|
-
destroy(): void;
|
55
|
-
/**
|
56
|
-
* Marks resizer as selected.
|
57
|
-
*/
|
58
|
-
select(resizer: Resizer): void;
|
59
|
-
/**
|
60
|
-
* Deselects currently set resizer.
|
61
|
-
*/
|
62
|
-
deselect(): void;
|
63
|
-
/**
|
64
|
-
* @param options Resizer options.
|
65
|
-
*/
|
66
|
-
attachTo(options: ResizerOptions): Resizer;
|
67
|
-
/**
|
68
|
-
* Returns a resizer created for a given view element (widget element).
|
69
|
-
*
|
70
|
-
* @param viewElement View element associated with the resizer.
|
71
|
-
*/
|
72
|
-
getResizerByViewElement(viewElement: ViewContainerElement): Resizer | undefined;
|
73
|
-
/**
|
74
|
-
* Returns a resizer that contains a given resize handle.
|
75
|
-
*/
|
76
|
-
private _getResizerByHandle;
|
77
|
-
/**
|
78
|
-
* @param domEventData Native DOM event.
|
79
|
-
*/
|
80
|
-
private _mouseDownListener;
|
81
|
-
/**
|
82
|
-
* @param domEventData Native DOM event.
|
83
|
-
*/
|
84
|
-
private _mouseMoveListener;
|
85
|
-
private _mouseUpListener;
|
86
|
-
}
|
87
|
-
/**
|
88
|
-
* Interface describing a resizer. It allows to specify the resizing host, custom logic for calculating aspect ratio, etc.
|
89
|
-
*/
|
90
|
-
export interface ResizerOptions {
|
91
|
-
/**
|
92
|
-
* Editor instance associated with the resizer.
|
93
|
-
*/
|
94
|
-
editor: Editor;
|
95
|
-
modelElement: Element;
|
96
|
-
/**
|
97
|
-
* A view of an element to be resized. Typically it's the main widget's view instance.
|
98
|
-
*/
|
99
|
-
viewElement: ViewContainerElement;
|
100
|
-
unit?: 'px' | '%';
|
101
|
-
/**
|
102
|
-
* A callback to be executed once the resizing process is done.
|
103
|
-
*
|
104
|
-
* It receives a `Number` (`newValue`) as a parameter.
|
105
|
-
*
|
106
|
-
* For example, {@link module:image/imageresize~ImageResize} uses it to execute the resize image command
|
107
|
-
* which puts the new value into the model.
|
108
|
-
*
|
109
|
-
* ```ts
|
110
|
-
* {
|
111
|
-
* editor,
|
112
|
-
* modelElement: data.item,
|
113
|
-
* viewElement: widget,
|
114
|
-
*
|
115
|
-
* onCommit( newValue ) {
|
116
|
-
* editor.execute( 'resizeImage', { width: newValue } );
|
117
|
-
* }
|
118
|
-
* };
|
119
|
-
* ```
|
120
|
-
*/
|
121
|
-
onCommit: (newValue: string) => void;
|
122
|
-
getResizeHost: (widgetWrapper: HTMLElement) => HTMLElement;
|
123
|
-
getHandleHost: (widgetWrapper: HTMLElement) => HTMLElement;
|
124
|
-
isCentered?: (resizer: Resizer) => boolean;
|
125
|
-
}
|
1
|
+
/**
|
2
|
+
* @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
|
3
|
+
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
4
|
+
*/
|
5
|
+
/**
|
6
|
+
* @module widget/widgetresize
|
7
|
+
*/
|
8
|
+
import Resizer from './widgetresize/resizer';
|
9
|
+
import { Plugin, type Editor } from '@ckeditor/ckeditor5-core';
|
10
|
+
import { type Element, type ViewContainerElement } from '@ckeditor/ckeditor5-engine';
|
11
|
+
import '../theme/widgetresize.css';
|
12
|
+
/**
|
13
|
+
* The widget resize feature plugin.
|
14
|
+
*
|
15
|
+
* Use the {@link module:widget/widgetresize~WidgetResize#attachTo} method to create a resizer for the specified widget.
|
16
|
+
*/
|
17
|
+
export default class WidgetResize extends Plugin {
|
18
|
+
/**
|
19
|
+
* The currently selected resizer.
|
20
|
+
*
|
21
|
+
* @observable
|
22
|
+
*/
|
23
|
+
selectedResizer: Resizer | null;
|
24
|
+
/**
|
25
|
+
* References an active resizer.
|
26
|
+
*
|
27
|
+
* Active resizer means a resizer which handle is actively used by the end user.
|
28
|
+
*
|
29
|
+
* @internal
|
30
|
+
* @observable
|
31
|
+
*/
|
32
|
+
_activeResizer: Resizer | null;
|
33
|
+
/**
|
34
|
+
* A map of resizers created using this plugin instance.
|
35
|
+
*/
|
36
|
+
private _resizers;
|
37
|
+
private _observer;
|
38
|
+
private _redrawSelectedResizerThrottled;
|
39
|
+
/**
|
40
|
+
* @inheritDoc
|
41
|
+
*/
|
42
|
+
static get pluginName(): "WidgetResize";
|
43
|
+
/**
|
44
|
+
* @inheritDoc
|
45
|
+
*/
|
46
|
+
init(): void;
|
47
|
+
/**
|
48
|
+
* Redraws the selected resizer if there is any selected resizer and if it is visible.
|
49
|
+
*/
|
50
|
+
redrawSelectedResizer(): void;
|
51
|
+
/**
|
52
|
+
* @inheritDoc
|
53
|
+
*/
|
54
|
+
destroy(): void;
|
55
|
+
/**
|
56
|
+
* Marks resizer as selected.
|
57
|
+
*/
|
58
|
+
select(resizer: Resizer): void;
|
59
|
+
/**
|
60
|
+
* Deselects currently set resizer.
|
61
|
+
*/
|
62
|
+
deselect(): void;
|
63
|
+
/**
|
64
|
+
* @param options Resizer options.
|
65
|
+
*/
|
66
|
+
attachTo(options: ResizerOptions): Resizer;
|
67
|
+
/**
|
68
|
+
* Returns a resizer created for a given view element (widget element).
|
69
|
+
*
|
70
|
+
* @param viewElement View element associated with the resizer.
|
71
|
+
*/
|
72
|
+
getResizerByViewElement(viewElement: ViewContainerElement): Resizer | undefined;
|
73
|
+
/**
|
74
|
+
* Returns a resizer that contains a given resize handle.
|
75
|
+
*/
|
76
|
+
private _getResizerByHandle;
|
77
|
+
/**
|
78
|
+
* @param domEventData Native DOM event.
|
79
|
+
*/
|
80
|
+
private _mouseDownListener;
|
81
|
+
/**
|
82
|
+
* @param domEventData Native DOM event.
|
83
|
+
*/
|
84
|
+
private _mouseMoveListener;
|
85
|
+
private _mouseUpListener;
|
86
|
+
}
|
87
|
+
/**
|
88
|
+
* Interface describing a resizer. It allows to specify the resizing host, custom logic for calculating aspect ratio, etc.
|
89
|
+
*/
|
90
|
+
export interface ResizerOptions {
|
91
|
+
/**
|
92
|
+
* Editor instance associated with the resizer.
|
93
|
+
*/
|
94
|
+
editor: Editor;
|
95
|
+
modelElement: Element;
|
96
|
+
/**
|
97
|
+
* A view of an element to be resized. Typically it's the main widget's view instance.
|
98
|
+
*/
|
99
|
+
viewElement: ViewContainerElement;
|
100
|
+
unit?: 'px' | '%';
|
101
|
+
/**
|
102
|
+
* A callback to be executed once the resizing process is done.
|
103
|
+
*
|
104
|
+
* It receives a `Number` (`newValue`) as a parameter.
|
105
|
+
*
|
106
|
+
* For example, {@link module:image/imageresize~ImageResize} uses it to execute the resize image command
|
107
|
+
* which puts the new value into the model.
|
108
|
+
*
|
109
|
+
* ```ts
|
110
|
+
* {
|
111
|
+
* editor,
|
112
|
+
* modelElement: data.item,
|
113
|
+
* viewElement: widget,
|
114
|
+
*
|
115
|
+
* onCommit( newValue ) {
|
116
|
+
* editor.execute( 'resizeImage', { width: newValue } );
|
117
|
+
* }
|
118
|
+
* };
|
119
|
+
* ```
|
120
|
+
*/
|
121
|
+
onCommit: (newValue: string) => void;
|
122
|
+
getResizeHost: (widgetWrapper: HTMLElement) => HTMLElement;
|
123
|
+
getHandleHost: (widgetWrapper: HTMLElement) => HTMLElement;
|
124
|
+
isCentered?: (resizer: Resizer) => boolean;
|
125
|
+
}
|