@ckeditor/ckeditor5-widget 41.2.0 → 41.3.0-alpha.0
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/content-index.css +4 -0
- package/dist/editor-index.css +144 -0
- package/dist/index.css +257 -0
- package/dist/index.css.map +1 -0
- package/dist/index.js +2979 -0
- package/dist/index.js.map +1 -0
- package/dist/types/augmentation.d.ts +13 -0
- package/dist/types/highlightstack.d.ts +74 -0
- package/dist/types/index.d.ts +13 -0
- package/dist/types/utils.d.ts +198 -0
- package/dist/types/verticalnavigation.d.ts +15 -0
- package/dist/types/widget.d.ts +95 -0
- package/dist/types/widgetresize/resizer.d.ts +177 -0
- package/dist/types/widgetresize/resizerstate.d.ts +125 -0
- package/dist/types/widgetresize/sizeview.d.ts +55 -0
- package/dist/types/widgetresize.d.ts +125 -0
- package/dist/types/widgettoolbarrepository.d.ts +94 -0
- package/dist/types/widgettypearound/utils.d.ts +38 -0
- package/dist/types/widgettypearound/widgettypearound.d.ts +229 -0
- package/package.json +8 -7
@@ -0,0 +1,125 @@
|
|
1
|
+
/**
|
2
|
+
* @license Copyright (c) 2003-2024, 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
|
+
import type { ResizerOptions } from '../widgetresize.js';
|
6
|
+
declare const ResizeState_base: {
|
7
|
+
new (): import("@ckeditor/ckeditor5-utils").Observable;
|
8
|
+
prototype: import("@ckeditor/ckeditor5-utils").Observable;
|
9
|
+
};
|
10
|
+
/**
|
11
|
+
* Stores the internal state of a single resizable object.
|
12
|
+
*/
|
13
|
+
export default class ResizeState extends ResizeState_base {
|
14
|
+
/**
|
15
|
+
* The position of the handle that initiated the resizing. E.g. `"top-left"`, `"bottom-right"` etc. or `null`
|
16
|
+
* if unknown.
|
17
|
+
*
|
18
|
+
* @readonly
|
19
|
+
* @observable
|
20
|
+
*/
|
21
|
+
activeHandlePosition: string | null;
|
22
|
+
/**
|
23
|
+
* The width (percents) proposed, but not committed yet, in the current resize process.
|
24
|
+
*
|
25
|
+
* @readonly
|
26
|
+
* @observable
|
27
|
+
*/
|
28
|
+
proposedWidthPercents: number | null;
|
29
|
+
/**
|
30
|
+
* The width (pixels) proposed, but not committed yet, in the current resize process.
|
31
|
+
*
|
32
|
+
* @readonly
|
33
|
+
* @observable
|
34
|
+
*/
|
35
|
+
proposedWidth: number | null;
|
36
|
+
/**
|
37
|
+
* The height (pixels) proposed, but not committed yet, in the current resize process.
|
38
|
+
*
|
39
|
+
* @readonly
|
40
|
+
* @observable
|
41
|
+
*/
|
42
|
+
proposedHeight: number | null;
|
43
|
+
/**
|
44
|
+
* @readonly
|
45
|
+
* @observable
|
46
|
+
*/
|
47
|
+
proposedHandleHostWidth: number | null;
|
48
|
+
/**
|
49
|
+
* @readonly
|
50
|
+
* @observable
|
51
|
+
*/
|
52
|
+
proposedHandleHostHeight: number | null;
|
53
|
+
/**
|
54
|
+
* The reference point of the resizer where the dragging started. It is used to measure the distance the user cursor
|
55
|
+
* traveled, so how much the image should be enlarged.
|
56
|
+
* This information is only known after the DOM was rendered, so it will be updated later.
|
57
|
+
*
|
58
|
+
* @internal
|
59
|
+
*/
|
60
|
+
_referenceCoordinates: {
|
61
|
+
x: number;
|
62
|
+
y: number;
|
63
|
+
} | null;
|
64
|
+
/**
|
65
|
+
* Resizer options.
|
66
|
+
*/
|
67
|
+
private readonly _options;
|
68
|
+
/**
|
69
|
+
* The original width (pixels) of the resized object when the resize process was started.
|
70
|
+
*
|
71
|
+
* @readonly
|
72
|
+
*/
|
73
|
+
private _originalWidth?;
|
74
|
+
/**
|
75
|
+
* The original height (pixels) of the resized object when the resize process was started.
|
76
|
+
*
|
77
|
+
* @readonly
|
78
|
+
*/
|
79
|
+
private _originalHeight?;
|
80
|
+
/**
|
81
|
+
* The original width (percents) of the resized object when the resize process was started.
|
82
|
+
*
|
83
|
+
* @readonly
|
84
|
+
*/
|
85
|
+
private _originalWidthPercents?;
|
86
|
+
/**
|
87
|
+
* A width to height ratio of the resized image.
|
88
|
+
*
|
89
|
+
* @readonly
|
90
|
+
*/
|
91
|
+
private _aspectRatio?;
|
92
|
+
/**
|
93
|
+
* @param options Resizer options.
|
94
|
+
*/
|
95
|
+
constructor(options: ResizerOptions);
|
96
|
+
/**
|
97
|
+
* The original width (pixels) of the resized object when the resize process was started.
|
98
|
+
*/
|
99
|
+
get originalWidth(): number | undefined;
|
100
|
+
/**
|
101
|
+
* The original height (pixels) of the resized object when the resize process was started.
|
102
|
+
*/
|
103
|
+
get originalHeight(): number | undefined;
|
104
|
+
/**
|
105
|
+
* The original width (percents) of the resized object when the resize process was started.
|
106
|
+
*/
|
107
|
+
get originalWidthPercents(): number | undefined;
|
108
|
+
/**
|
109
|
+
* A width to height ratio of the resized image.
|
110
|
+
*/
|
111
|
+
get aspectRatio(): number | undefined;
|
112
|
+
/**
|
113
|
+
*
|
114
|
+
* @param domResizeHandle The handle used to calculate the reference point.
|
115
|
+
*/
|
116
|
+
begin(domResizeHandle: HTMLElement, domHandleHost: HTMLElement, domResizeHost: HTMLElement): void;
|
117
|
+
update(newSize: {
|
118
|
+
width: number;
|
119
|
+
height: number;
|
120
|
+
widthPercents: number;
|
121
|
+
handleHostWidth: number;
|
122
|
+
handleHostHeight: number;
|
123
|
+
}): void;
|
124
|
+
}
|
125
|
+
export {};
|
@@ -0,0 +1,55 @@
|
|
1
|
+
/**
|
2
|
+
* @license Copyright (c) 2003-2024, 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
|
+
import type { ResizerOptions } from '../widgetresize.js';
|
10
|
+
import type ResizeState from './resizerstate.js';
|
11
|
+
/**
|
12
|
+
* A view displaying the proposed new element size during the resizing.
|
13
|
+
*/
|
14
|
+
export default class SizeView extends View {
|
15
|
+
/**
|
16
|
+
* The visibility of the view defined based on the existence of the host proposed dimensions.
|
17
|
+
*
|
18
|
+
* @internal
|
19
|
+
* @observable
|
20
|
+
* @readonly
|
21
|
+
*/
|
22
|
+
_isVisible: boolean;
|
23
|
+
/**
|
24
|
+
* The text that will be displayed in the `SizeView` child.
|
25
|
+
* It can be formatted as the pixel values (e.g. 10x20) or the percentage value (e.g. 10%).
|
26
|
+
*
|
27
|
+
* @internal
|
28
|
+
* @observable
|
29
|
+
* @readonly
|
30
|
+
*/
|
31
|
+
_label: string;
|
32
|
+
/**
|
33
|
+
* The position of the view defined based on the host size and active handle position.
|
34
|
+
*
|
35
|
+
* @internal
|
36
|
+
* @observable
|
37
|
+
* @readonly
|
38
|
+
*/
|
39
|
+
_viewPosition: string;
|
40
|
+
constructor();
|
41
|
+
/**
|
42
|
+
* A method used for binding the `SizeView` instance properties to the `ResizeState` instance observable properties.
|
43
|
+
*
|
44
|
+
* @internal
|
45
|
+
* @param options An object defining the resizer options, used for setting the proper size label.
|
46
|
+
* @param resizeState The `ResizeState` class instance, used for keeping the `SizeView` state up to date.
|
47
|
+
*/
|
48
|
+
_bindToState(options: ResizerOptions, resizeState: ResizeState): void;
|
49
|
+
/**
|
50
|
+
* A method used for cleaning up. It removes the bindings and hides the view.
|
51
|
+
*
|
52
|
+
* @internal
|
53
|
+
*/
|
54
|
+
_dismiss(): void;
|
55
|
+
}
|
@@ -0,0 +1,125 @@
|
|
1
|
+
/**
|
2
|
+
* @license Copyright (c) 2003-2024, 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.js';
|
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
|
+
}
|
@@ -0,0 +1,94 @@
|
|
1
|
+
/**
|
2
|
+
* @license Copyright (c) 2003-2024, 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/widgettoolbarrepository
|
7
|
+
*/
|
8
|
+
import { Plugin, type ToolbarConfigItem } from '@ckeditor/ckeditor5-core';
|
9
|
+
import type { ViewDocumentSelection, ViewElement } from '@ckeditor/ckeditor5-engine';
|
10
|
+
import { ContextualBalloon } from '@ckeditor/ckeditor5-ui';
|
11
|
+
/**
|
12
|
+
* Widget toolbar repository plugin. A central point for registering widget toolbars. This plugin handles the whole
|
13
|
+
* toolbar rendering process and exposes a concise API.
|
14
|
+
*
|
15
|
+
* To add a toolbar for your widget use the {@link ~WidgetToolbarRepository#register `WidgetToolbarRepository#register()`} method.
|
16
|
+
*
|
17
|
+
* The following example comes from the {@link module:image/imagetoolbar~ImageToolbar} plugin:
|
18
|
+
*
|
19
|
+
* ```ts
|
20
|
+
* class ImageToolbar extends Plugin {
|
21
|
+
* static get requires() {
|
22
|
+
* return [ WidgetToolbarRepository ];
|
23
|
+
* }
|
24
|
+
*
|
25
|
+
* afterInit() {
|
26
|
+
* const editor = this.editor;
|
27
|
+
* const widgetToolbarRepository = editor.plugins.get( WidgetToolbarRepository );
|
28
|
+
*
|
29
|
+
* widgetToolbarRepository.register( 'image', {
|
30
|
+
* items: editor.config.get( 'image.toolbar' ),
|
31
|
+
* getRelatedElement: getClosestSelectedImageWidget
|
32
|
+
* } );
|
33
|
+
* }
|
34
|
+
* }
|
35
|
+
* ```
|
36
|
+
*/
|
37
|
+
export default class WidgetToolbarRepository extends Plugin {
|
38
|
+
/**
|
39
|
+
* A map of toolbar definitions.
|
40
|
+
*/
|
41
|
+
private _toolbarDefinitions;
|
42
|
+
private _balloon;
|
43
|
+
/**
|
44
|
+
* @inheritDoc
|
45
|
+
*/
|
46
|
+
static get requires(): readonly [typeof ContextualBalloon];
|
47
|
+
/**
|
48
|
+
* @inheritDoc
|
49
|
+
*/
|
50
|
+
static get pluginName(): "WidgetToolbarRepository";
|
51
|
+
/**
|
52
|
+
* @inheritDoc
|
53
|
+
*/
|
54
|
+
init(): void;
|
55
|
+
destroy(): void;
|
56
|
+
/**
|
57
|
+
* Registers toolbar in the WidgetToolbarRepository. It renders it in the `ContextualBalloon` based on the value of the invoked
|
58
|
+
* `getRelatedElement` function. Toolbar items are gathered from `items` array.
|
59
|
+
* The balloon's CSS class is by default `ck-toolbar-container` and may be override with the `balloonClassName` option.
|
60
|
+
*
|
61
|
+
* Note: This method should be called in the {@link module:core/plugin~PluginInterface#afterInit `Plugin#afterInit()`}
|
62
|
+
* callback (or later) to make sure that the given toolbar items were already registered by other plugins.
|
63
|
+
*
|
64
|
+
* @param toolbarId An id for the toolbar. Used to
|
65
|
+
* @param options.ariaLabel Label used by assistive technologies to describe this toolbar element.
|
66
|
+
* @param options.items Array of toolbar items.
|
67
|
+
* @param options.getRelatedElement Callback which returns an element the toolbar should be attached to.
|
68
|
+
* @param options.balloonClassName CSS class for the widget balloon.
|
69
|
+
*/
|
70
|
+
register(toolbarId: string, { ariaLabel, items, getRelatedElement, balloonClassName }: {
|
71
|
+
ariaLabel?: string;
|
72
|
+
items: Array<ToolbarConfigItem>;
|
73
|
+
getRelatedElement: (selection: ViewDocumentSelection) => (ViewElement | null);
|
74
|
+
balloonClassName?: string;
|
75
|
+
}): void;
|
76
|
+
/**
|
77
|
+
* Iterates over stored toolbars and makes them visible or hidden.
|
78
|
+
*/
|
79
|
+
private _updateToolbarsVisibility;
|
80
|
+
/**
|
81
|
+
* Hides the given toolbar.
|
82
|
+
*/
|
83
|
+
private _hideToolbar;
|
84
|
+
/**
|
85
|
+
* Shows up the toolbar if the toolbar is not visible.
|
86
|
+
* Otherwise, repositions the toolbar's balloon when toolbar's view is the most top view in balloon stack.
|
87
|
+
*
|
88
|
+
* It might happen here that the toolbar's view is under another view. Then do nothing as the other toolbar view
|
89
|
+
* should be still visible after the {@link module:ui/editorui/editorui~EditorUI#event:update}.
|
90
|
+
*/
|
91
|
+
private _showToolbar;
|
92
|
+
private _isToolbarVisible;
|
93
|
+
private _isToolbarInBalloon;
|
94
|
+
}
|
@@ -0,0 +1,38 @@
|
|
1
|
+
/**
|
2
|
+
* @license Copyright (c) 2003-2024, 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
|
+
import type { DocumentSelection, DomConverter, Element, Schema, Selection, ViewElement } from '@ckeditor/ckeditor5-engine';
|
6
|
+
/**
|
7
|
+
* The name of the type around model selection attribute responsible for
|
8
|
+
* displaying a fake caret next to a selected widget.
|
9
|
+
*/
|
10
|
+
export declare const TYPE_AROUND_SELECTION_ATTRIBUTE = "widget-type-around";
|
11
|
+
/**
|
12
|
+
* Checks if an element is a widget that qualifies to get the widget type around UI.
|
13
|
+
*/
|
14
|
+
export declare function isTypeAroundWidget(viewElement: ViewElement | undefined, modelElement: Element, schema: Schema): boolean;
|
15
|
+
/**
|
16
|
+
* For the passed HTML element, this helper finds the closest widget type around button ancestor.
|
17
|
+
*/
|
18
|
+
export declare function getClosestTypeAroundDomButton(domElement: HTMLElement): HTMLElement | null;
|
19
|
+
/**
|
20
|
+
* For the passed widget type around button element, this helper determines at which position
|
21
|
+
* the paragraph would be inserted into the content if, for instance, the button was
|
22
|
+
* clicked by the user.
|
23
|
+
*
|
24
|
+
* @returns The position of the button.
|
25
|
+
*/
|
26
|
+
export declare function getTypeAroundButtonPosition(domElement: HTMLElement): 'before' | 'after';
|
27
|
+
/**
|
28
|
+
* For the passed HTML element, this helper returns the closest view widget ancestor.
|
29
|
+
*/
|
30
|
+
export declare function getClosestWidgetViewElement(domElement: HTMLElement, domConverter: DomConverter): ViewElement;
|
31
|
+
/**
|
32
|
+
* For the passed selection instance, it returns the position of the fake caret displayed next to a widget.
|
33
|
+
*
|
34
|
+
* **Note**: If the fake caret is not currently displayed, `null` is returned.
|
35
|
+
*
|
36
|
+
* @returns The position of the fake caret or `null` when none is present.
|
37
|
+
*/
|
38
|
+
export declare function getTypeAroundFakeCaretPosition(selection: Selection | DocumentSelection): 'before' | 'after' | null;
|
@@ -0,0 +1,229 @@
|
|
1
|
+
/**
|
2
|
+
* @license Copyright (c) 2003-2024, 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/widgettypearound/widgettypearound
|
7
|
+
*/
|
8
|
+
import { Plugin } from '@ckeditor/ckeditor5-core';
|
9
|
+
import { Enter } from '@ckeditor/ckeditor5-enter';
|
10
|
+
import { Delete } from '@ckeditor/ckeditor5-typing';
|
11
|
+
import '../../theme/widgettypearound.css';
|
12
|
+
/**
|
13
|
+
* A plugin that allows users to type around widgets where normally it is impossible to place the caret due
|
14
|
+
* to limitations of web browsers. These "tight spots" occur, for instance, before (or after) a widget being
|
15
|
+
* the first (or last) child of its parent or between two block widgets.
|
16
|
+
*
|
17
|
+
* This plugin extends the {@link module:widget/widget~Widget `Widget`} plugin and injects the user interface
|
18
|
+
* with two buttons into each widget instance in the editor. Each of the buttons can be clicked by the
|
19
|
+
* user if the widget is next to the "tight spot". Once clicked, a paragraph is created with the selection anchored
|
20
|
+
* in it so that users can type (or insert content, paste, etc.) straight away.
|
21
|
+
*/
|
22
|
+
export default class WidgetTypeAround extends Plugin {
|
23
|
+
/**
|
24
|
+
* A reference to the model widget element that has the fake caret active
|
25
|
+
* on either side of it. It is later used to remove CSS classes associated with the fake caret
|
26
|
+
* when the widget no longer needs it.
|
27
|
+
*/
|
28
|
+
private _currentFakeCaretModelElement;
|
29
|
+
/**
|
30
|
+
* @inheritDoc
|
31
|
+
*/
|
32
|
+
static get pluginName(): "WidgetTypeAround";
|
33
|
+
/**
|
34
|
+
* @inheritDoc
|
35
|
+
*/
|
36
|
+
static get requires(): readonly [typeof Enter, typeof Delete];
|
37
|
+
/**
|
38
|
+
* @inheritDoc
|
39
|
+
*/
|
40
|
+
init(): void;
|
41
|
+
/**
|
42
|
+
* @inheritDoc
|
43
|
+
*/
|
44
|
+
destroy(): void;
|
45
|
+
/**
|
46
|
+
* Inserts a new paragraph next to a widget element with the selection anchored in it.
|
47
|
+
*
|
48
|
+
* **Note**: This method is heavily user-oriented and will both focus the editing view and scroll
|
49
|
+
* the viewport to the selection in the inserted paragraph.
|
50
|
+
*
|
51
|
+
* @param widgetModelElement The model widget element next to which a paragraph is inserted.
|
52
|
+
* @param position The position where the paragraph is inserted. Either `'before'` or `'after'` the widget.
|
53
|
+
*/
|
54
|
+
private _insertParagraph;
|
55
|
+
/**
|
56
|
+
* A wrapper for the {@link module:utils/emittermixin~Emitter#listenTo} method that executes the callbacks only
|
57
|
+
* when the plugin {@link #isEnabled is enabled}.
|
58
|
+
*
|
59
|
+
* @param emitter The object that fires the event.
|
60
|
+
* @param event The name of the event.
|
61
|
+
* @param callback The function to be called on event.
|
62
|
+
* @param options Additional options.
|
63
|
+
* @param options.priority The priority of this event callback. The higher the priority value the sooner
|
64
|
+
* the callback will be fired. Events having the same priority are called in the order they were added.
|
65
|
+
*/
|
66
|
+
private _listenToIfEnabled;
|
67
|
+
/**
|
68
|
+
* Similar to {@link #_insertParagraph}, this method inserts a paragraph except that it
|
69
|
+
* does not expect a position. Instead, it performs the insertion next to a selected widget
|
70
|
+
* according to the `widget-type-around` model selection attribute value (fake caret position).
|
71
|
+
*
|
72
|
+
* Because this method requires the `widget-type-around` attribute to be set,
|
73
|
+
* the insertion can only happen when the widget's fake caret is active (e.g. activated
|
74
|
+
* using the keyboard).
|
75
|
+
*
|
76
|
+
* @returns Returns `true` when the paragraph was inserted (the attribute was present) and `false` otherwise.
|
77
|
+
*/
|
78
|
+
private _insertParagraphAccordingToFakeCaretPosition;
|
79
|
+
/**
|
80
|
+
* Creates a listener in the editing conversion pipeline that injects the widget type around
|
81
|
+
* UI into every single widget instance created in the editor.
|
82
|
+
*
|
83
|
+
* The UI is delivered as a {@link module:engine/view/uielement~UIElement}
|
84
|
+
* wrapper which renders DOM buttons that users can use to insert paragraphs.
|
85
|
+
*/
|
86
|
+
private _enableTypeAroundUIInjection;
|
87
|
+
/**
|
88
|
+
* Brings support for the fake caret that appears when either:
|
89
|
+
*
|
90
|
+
* * the selection moves to a widget from a position next to it using arrow keys,
|
91
|
+
* * the arrow key is pressed when the widget is already selected.
|
92
|
+
*
|
93
|
+
* The fake caret lets the user know that they can start typing or just press
|
94
|
+
* <kbd>Enter</kbd> to insert a paragraph at the position next to a widget as suggested by the fake caret.
|
95
|
+
*
|
96
|
+
* The fake caret disappears when the user changes the selection or the editor
|
97
|
+
* gets blurred.
|
98
|
+
*
|
99
|
+
* The whole idea is as follows:
|
100
|
+
*
|
101
|
+
* 1. A user does one of the 2 scenarios described at the beginning.
|
102
|
+
* 2. The "keydown" listener is executed and the decision is made whether to show or hide the fake caret.
|
103
|
+
* 3. If it should show up, the `widget-type-around` model selection attribute is set indicating
|
104
|
+
* on which side of the widget it should appear.
|
105
|
+
* 4. The selection dispatcher reacts to the selection attribute and sets CSS classes responsible for the
|
106
|
+
* fake caret on the view widget.
|
107
|
+
* 5. If the fake caret should disappear, the selection attribute is removed and the dispatcher
|
108
|
+
* does the CSS class clean-up in the view.
|
109
|
+
* 6. Additionally, `change:range` and `FocusTracker#isFocused` listeners also remove the selection
|
110
|
+
* attribute (the former also removes widget CSS classes).
|
111
|
+
*/
|
112
|
+
private _enableTypeAroundFakeCaretActivationUsingKeyboardArrows;
|
113
|
+
/**
|
114
|
+
* A listener executed on each "keydown" in the view document, a part of
|
115
|
+
* {@link #_enableTypeAroundFakeCaretActivationUsingKeyboardArrows}.
|
116
|
+
*
|
117
|
+
* It decides whether the arrow keypress should activate the fake caret or not (also whether it should
|
118
|
+
* be deactivated).
|
119
|
+
*
|
120
|
+
* The fake caret activation is done by setting the `widget-type-around` model selection attribute
|
121
|
+
* in this listener, and stopping and preventing the event that would normally be handled by the widget
|
122
|
+
* plugin that is responsible for the regular keyboard navigation near/across all widgets (that
|
123
|
+
* includes inline widgets, which are ignored by the widget type around plugin).
|
124
|
+
*/
|
125
|
+
private _handleArrowKeyPress;
|
126
|
+
/**
|
127
|
+
* Handles the keyboard navigation on "keydown" when a widget is currently selected and activates or deactivates
|
128
|
+
* the fake caret for that widget, depending on the current value of the `widget-type-around` model
|
129
|
+
* selection attribute and the direction of the pressed arrow key.
|
130
|
+
*
|
131
|
+
* @param isForward `true` when the pressed arrow key was responsible for the forward model selection movement
|
132
|
+
* as in {@link module:utils/keyboard~isForwardArrowKeyCode}.
|
133
|
+
* @returns Returns `true` when the keypress was handled and no other keydown listener of the editor should
|
134
|
+
* process the event any further. Returns `false` otherwise.
|
135
|
+
*/
|
136
|
+
private _handleArrowKeyPressOnSelectedWidget;
|
137
|
+
/**
|
138
|
+
* Handles the keyboard navigation on "keydown" when **no** widget is selected but the selection is **directly** next
|
139
|
+
* to one and upon the fake caret should become active for this widget upon arrow keypress
|
140
|
+
* (AKA entering/selecting the widget).
|
141
|
+
*
|
142
|
+
* **Note**: This code mirrors the implementation from the widget plugin but also adds the selection attribute.
|
143
|
+
* Unfortunately, there is no safe way to let the widget plugin do the selection part first and then just set the
|
144
|
+
* selection attribute here in the widget type around plugin. This is why this code must duplicate some from the widget plugin.
|
145
|
+
*
|
146
|
+
* @param isForward `true` when the pressed arrow key was responsible for the forward model selection movement
|
147
|
+
* as in {@link module:utils/keyboard~isForwardArrowKeyCode}.
|
148
|
+
* @returns Returns `true` when the keypress was handled and no other keydown listener of the editor should
|
149
|
+
* process the event any further. Returns `false` otherwise.
|
150
|
+
*/
|
151
|
+
private _handleArrowKeyPressWhenSelectionNextToAWidget;
|
152
|
+
/**
|
153
|
+
* Handles the keyboard navigation on "keydown" when a widget is currently selected (together with some other content)
|
154
|
+
* and the widget is the first or last element in the selection. It activates or deactivates the fake caret for that widget.
|
155
|
+
*
|
156
|
+
* @param isForward `true` when the pressed arrow key was responsible for the forward model selection movement
|
157
|
+
* as in {@link module:utils/keyboard~isForwardArrowKeyCode}.
|
158
|
+
* @returns Returns `true` when the keypress was handled and no other keydown listener of the editor should
|
159
|
+
* process the event any further. Returns `false` otherwise.
|
160
|
+
*/
|
161
|
+
private _handleArrowKeyPressWhenNonCollapsedSelection;
|
162
|
+
/**
|
163
|
+
* Registers a `mousedown` listener for the view document which intercepts events
|
164
|
+
* coming from the widget type around UI, which happens when a user clicks one of the buttons
|
165
|
+
* that insert a paragraph next to a widget.
|
166
|
+
*/
|
167
|
+
private _enableInsertingParagraphsOnButtonClick;
|
168
|
+
/**
|
169
|
+
* Creates the <kbd>Enter</kbd> key listener on the view document that allows the user to insert a paragraph
|
170
|
+
* near the widget when either:
|
171
|
+
*
|
172
|
+
* * The fake caret was first activated using the arrow keys,
|
173
|
+
* * The entire widget is selected in the model.
|
174
|
+
*
|
175
|
+
* In the first case, the new paragraph is inserted according to the `widget-type-around` selection
|
176
|
+
* attribute (see {@link #_handleArrowKeyPress}).
|
177
|
+
*
|
178
|
+
* In the second case, the new paragraph is inserted based on whether a soft (<kbd>Shift</kbd>+<kbd>Enter</kbd>) keystroke
|
179
|
+
* was pressed or not.
|
180
|
+
*/
|
181
|
+
private _enableInsertingParagraphsOnEnterKeypress;
|
182
|
+
/**
|
183
|
+
* Similar to the {@link #_enableInsertingParagraphsOnEnterKeypress}, it allows the user
|
184
|
+
* to insert a paragraph next to a widget when the fake caret was activated using arrow
|
185
|
+
* keys but it responds to typing instead of <kbd>Enter</kbd>.
|
186
|
+
*
|
187
|
+
* Listener enabled by this method will insert a new paragraph according to the `widget-type-around`
|
188
|
+
* model selection attribute as the user simply starts typing, which creates the impression that the fake caret
|
189
|
+
* behaves like a real one rendered by the browser (AKA your text appears where the caret was).
|
190
|
+
*
|
191
|
+
* **Note**: At the moment this listener creates 2 undo steps: one for the `insertParagraph` command
|
192
|
+
* and another one for actual typing. It is not a disaster but this may need to be fixed
|
193
|
+
* sooner or later.
|
194
|
+
*/
|
195
|
+
private _enableInsertingParagraphsOnTypingKeystroke;
|
196
|
+
/**
|
197
|
+
* It creates a "delete" event listener on the view document to handle cases when the <kbd>Delete</kbd> or <kbd>Backspace</kbd>
|
198
|
+
* is pressed and the fake caret is currently active.
|
199
|
+
*
|
200
|
+
* The fake caret should create an illusion of a real browser caret so that when it appears before or after
|
201
|
+
* a widget, pressing <kbd>Delete</kbd> or <kbd>Backspace</kbd> should remove a widget or delete the content
|
202
|
+
* before or after a widget (depending on the content surrounding the widget).
|
203
|
+
*/
|
204
|
+
private _enableDeleteIntegration;
|
205
|
+
/**
|
206
|
+
* Attaches the {@link module:engine/model/model~Model#event:insertContent} event listener that, for instance, allows the user to paste
|
207
|
+
* content near a widget when the fake caret is first activated using the arrow keys.
|
208
|
+
*
|
209
|
+
* The content is inserted according to the `widget-type-around` selection attribute (see {@link #_handleArrowKeyPress}).
|
210
|
+
*/
|
211
|
+
private _enableInsertContentIntegration;
|
212
|
+
/**
|
213
|
+
* Attaches the {@link module:engine/model/model~Model#event:insertObject} event listener that modifies the
|
214
|
+
* `options.findOptimalPosition`parameter to position of fake caret in relation to selected element
|
215
|
+
* to reflect user's intent of desired insertion position.
|
216
|
+
*
|
217
|
+
* The object is inserted according to the `widget-type-around` selection attribute (see {@link #_handleArrowKeyPress}).
|
218
|
+
*/
|
219
|
+
private _enableInsertObjectIntegration;
|
220
|
+
/**
|
221
|
+
* Attaches the {@link module:engine/model/model~Model#event:deleteContent} event listener to block the event when the fake
|
222
|
+
* caret is active.
|
223
|
+
*
|
224
|
+
* This is required for cases that trigger {@link module:engine/model/model~Model#deleteContent `model.deleteContent()`}
|
225
|
+
* before calling {@link module:engine/model/model~Model#insertContent `model.insertContent()`} like, for instance,
|
226
|
+
* plain text pasting.
|
227
|
+
*/
|
228
|
+
private _enableDeleteContentIntegration;
|
229
|
+
}
|