@ckeditor/ckeditor5-widget 39.0.1 → 40.0.0
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +1 -1
- package/LICENSE.md +1 -1
- package/README.md +3 -3
- package/lang/translations/ar.po +1 -0
- package/lang/translations/az.po +1 -0
- package/lang/translations/bg.po +1 -0
- package/lang/translations/bn.po +1 -0
- package/lang/translations/ca.po +1 -0
- package/lang/translations/cs.po +1 -0
- package/lang/translations/da.po +1 -0
- package/lang/translations/de-ch.po +1 -0
- package/lang/translations/de.po +1 -0
- package/lang/translations/el.po +1 -0
- package/lang/translations/en-au.po +1 -0
- package/lang/translations/en.po +1 -0
- package/lang/translations/es.po +1 -0
- package/lang/translations/et.po +1 -0
- package/lang/translations/fa.po +1 -0
- package/lang/translations/fi.po +1 -0
- package/lang/translations/fr.po +1 -0
- package/lang/translations/gl.po +1 -0
- package/lang/translations/he.po +1 -0
- package/lang/translations/hi.po +1 -0
- package/lang/translations/hr.po +1 -0
- package/lang/translations/hu.po +1 -0
- package/lang/translations/id.po +1 -0
- package/lang/translations/it.po +1 -0
- package/lang/translations/ja.po +1 -0
- package/lang/translations/ko.po +1 -0
- package/lang/translations/ku.po +1 -0
- package/lang/translations/lt.po +1 -0
- package/lang/translations/lv.po +1 -0
- package/lang/translations/ms.po +1 -0
- package/lang/translations/nl.po +1 -0
- package/lang/translations/no.po +1 -0
- package/lang/translations/pl.po +1 -0
- package/lang/translations/pt-br.po +1 -0
- package/lang/translations/pt.po +1 -0
- package/lang/translations/ro.po +1 -0
- package/lang/translations/ru.po +1 -0
- package/lang/translations/sk.po +1 -0
- package/lang/translations/sq.po +1 -0
- package/lang/translations/sr-latn.po +1 -0
- package/lang/translations/sr.po +1 -0
- package/lang/translations/sv.po +1 -0
- package/lang/translations/th.po +1 -0
- package/lang/translations/tk.po +1 -0
- package/lang/translations/tr.po +1 -0
- package/lang/translations/uk.po +1 -0
- package/lang/translations/ur.po +1 -0
- package/lang/translations/uz.po +1 -0
- package/lang/translations/vi.po +1 -0
- package/lang/translations/zh-cn.po +1 -0
- package/lang/translations/zh.po +1 -0
- package/package.json +7 -11
- 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,52 +1,52 @@
|
|
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/widgettypearound/utils
|
7
|
-
*/
|
8
|
-
import { isWidget } from '../utils';
|
9
|
-
/**
|
10
|
-
* The name of the type around model selection attribute responsible for
|
11
|
-
* displaying a fake caret next to a selected widget.
|
12
|
-
*/
|
13
|
-
export const TYPE_AROUND_SELECTION_ATTRIBUTE = 'widget-type-around';
|
14
|
-
/**
|
15
|
-
* Checks if an element is a widget that qualifies to get the widget type around UI.
|
16
|
-
*/
|
17
|
-
export function isTypeAroundWidget(viewElement, modelElement, schema) {
|
18
|
-
return !!viewElement && isWidget(viewElement) && !schema.isInline(modelElement);
|
19
|
-
}
|
20
|
-
/**
|
21
|
-
* For the passed HTML element, this helper finds the closest widget type around button ancestor.
|
22
|
-
*/
|
23
|
-
export function getClosestTypeAroundDomButton(domElement) {
|
24
|
-
return domElement.closest('.ck-widget__type-around__button');
|
25
|
-
}
|
26
|
-
/**
|
27
|
-
* For the passed widget type around button element, this helper determines at which position
|
28
|
-
* the paragraph would be inserted into the content if, for instance, the button was
|
29
|
-
* clicked by the user.
|
30
|
-
*
|
31
|
-
* @returns The position of the button.
|
32
|
-
*/
|
33
|
-
export function getTypeAroundButtonPosition(domElement) {
|
34
|
-
return domElement.classList.contains('ck-widget__type-around__button_before') ? 'before' : 'after';
|
35
|
-
}
|
36
|
-
/**
|
37
|
-
* For the passed HTML element, this helper returns the closest view widget ancestor.
|
38
|
-
*/
|
39
|
-
export function getClosestWidgetViewElement(domElement, domConverter) {
|
40
|
-
const widgetDomElement = domElement.closest('.ck-widget');
|
41
|
-
return domConverter.mapDomToView(widgetDomElement);
|
42
|
-
}
|
43
|
-
/**
|
44
|
-
* For the passed selection instance, it returns the position of the fake caret displayed next to a widget.
|
45
|
-
*
|
46
|
-
* **Note**: If the fake caret is not currently displayed, `null` is returned.
|
47
|
-
*
|
48
|
-
* @returns The position of the fake caret or `null` when none is present.
|
49
|
-
*/
|
50
|
-
export function getTypeAroundFakeCaretPosition(selection) {
|
51
|
-
return selection.getAttribute(TYPE_AROUND_SELECTION_ATTRIBUTE);
|
52
|
-
}
|
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/widgettypearound/utils
|
7
|
+
*/
|
8
|
+
import { isWidget } from '../utils';
|
9
|
+
/**
|
10
|
+
* The name of the type around model selection attribute responsible for
|
11
|
+
* displaying a fake caret next to a selected widget.
|
12
|
+
*/
|
13
|
+
export const TYPE_AROUND_SELECTION_ATTRIBUTE = 'widget-type-around';
|
14
|
+
/**
|
15
|
+
* Checks if an element is a widget that qualifies to get the widget type around UI.
|
16
|
+
*/
|
17
|
+
export function isTypeAroundWidget(viewElement, modelElement, schema) {
|
18
|
+
return !!viewElement && isWidget(viewElement) && !schema.isInline(modelElement);
|
19
|
+
}
|
20
|
+
/**
|
21
|
+
* For the passed HTML element, this helper finds the closest widget type around button ancestor.
|
22
|
+
*/
|
23
|
+
export function getClosestTypeAroundDomButton(domElement) {
|
24
|
+
return domElement.closest('.ck-widget__type-around__button');
|
25
|
+
}
|
26
|
+
/**
|
27
|
+
* For the passed widget type around button element, this helper determines at which position
|
28
|
+
* the paragraph would be inserted into the content if, for instance, the button was
|
29
|
+
* clicked by the user.
|
30
|
+
*
|
31
|
+
* @returns The position of the button.
|
32
|
+
*/
|
33
|
+
export function getTypeAroundButtonPosition(domElement) {
|
34
|
+
return domElement.classList.contains('ck-widget__type-around__button_before') ? 'before' : 'after';
|
35
|
+
}
|
36
|
+
/**
|
37
|
+
* For the passed HTML element, this helper returns the closest view widget ancestor.
|
38
|
+
*/
|
39
|
+
export function getClosestWidgetViewElement(domElement, domConverter) {
|
40
|
+
const widgetDomElement = domElement.closest('.ck-widget');
|
41
|
+
return domConverter.mapDomToView(widgetDomElement);
|
42
|
+
}
|
43
|
+
/**
|
44
|
+
* For the passed selection instance, it returns the position of the fake caret displayed next to a widget.
|
45
|
+
*
|
46
|
+
* **Note**: If the fake caret is not currently displayed, `null` is returned.
|
47
|
+
*
|
48
|
+
* @returns The position of the fake caret or `null` when none is present.
|
49
|
+
*/
|
50
|
+
export function getTypeAroundFakeCaretPosition(selection) {
|
51
|
+
return selection.getAttribute(TYPE_AROUND_SELECTION_ATTRIBUTE);
|
52
|
+
}
|
@@ -1,229 +1,229 @@
|
|
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/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
|
-
}
|
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/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
|
+
}
|