@ckeditor/ckeditor5-bookmark 0.0.0-nightly-20241216.0 → 0.0.0-nightly-20241218.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +222 -246
- package/dist/index.js.map +1 -1
- package/package.json +27 -8
- package/dist/augmentation.d.ts +0 -28
- package/dist/bookmark.d.ts +0 -34
- package/dist/bookmarkconfig.d.ts +0 -52
- package/dist/bookmarkediting.d.ts +0 -55
- package/dist/bookmarkui.d.ts +0 -170
- package/dist/index.d.ts +0 -18
- package/dist/insertbookmarkcommand.d.ts +0 -42
- package/dist/ui/bookmarkactionsview.d.ts +0 -106
- package/dist/ui/bookmarkformview.d.ts +0 -122
- package/dist/updatebookmarkcommand.d.ts +0 -46
- package/dist/utils.d.ts +0 -15
package/dist/index.js
CHANGED
|
@@ -14,38 +14,23 @@ import { FocusTracker, KeystrokeHandler, logWarning } from '@ckeditor/ckeditor5-
|
|
|
14
14
|
* See {@link module:bookmark/ui/bookmarkformview~BookmarkFormView}.
|
|
15
15
|
*/ class BookmarkFormView extends View {
|
|
16
16
|
/**
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
*/ idInputView;
|
|
25
|
-
/**
|
|
26
|
-
* The Submit button view.
|
|
27
|
-
*/ buttonView;
|
|
28
|
-
/**
|
|
29
|
-
* A collection of form child views in the form.
|
|
30
|
-
*/ children;
|
|
31
|
-
/**
|
|
32
|
-
* An array of form validators used by {@link #isValid}.
|
|
33
|
-
*/ _validators;
|
|
34
|
-
/**
|
|
35
|
-
* A collection of views that can be focused in the form.
|
|
36
|
-
*/ _focusables = new ViewCollection();
|
|
37
|
-
/**
|
|
38
|
-
* Helps cycling over {@link #_focusables} in the form.
|
|
39
|
-
*/ _focusCycler;
|
|
40
|
-
/**
|
|
41
|
-
* Creates an instance of the {@link module:bookmark/ui/bookmarkformview~BookmarkFormView} class.
|
|
42
|
-
*
|
|
43
|
-
* Also see {@link #render}.
|
|
44
|
-
*
|
|
45
|
-
* @param locale The localization services instance.
|
|
46
|
-
* @param validators Form validators used by {@link #isValid}.
|
|
47
|
-
*/ constructor(locale, validators){
|
|
17
|
+
* Creates an instance of the {@link module:bookmark/ui/bookmarkformview~BookmarkFormView} class.
|
|
18
|
+
*
|
|
19
|
+
* Also see {@link #render}.
|
|
20
|
+
*
|
|
21
|
+
* @param locale The localization services instance.
|
|
22
|
+
* @param validators Form validators used by {@link #isValid}.
|
|
23
|
+
*/ constructor(locale, validators){
|
|
48
24
|
super(locale);
|
|
25
|
+
/**
|
|
26
|
+
* Tracks information about DOM focus in the form.
|
|
27
|
+
*/ this.focusTracker = new FocusTracker();
|
|
28
|
+
/**
|
|
29
|
+
* An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
|
|
30
|
+
*/ this.keystrokes = new KeystrokeHandler();
|
|
31
|
+
/**
|
|
32
|
+
* A collection of views that can be focused in the form.
|
|
33
|
+
*/ this._focusables = new ViewCollection();
|
|
49
34
|
const t = locale.t;
|
|
50
35
|
this._validators = validators;
|
|
51
36
|
this.idInputView = this._createIdInput();
|
|
@@ -78,8 +63,8 @@ import { FocusTracker, KeystrokeHandler, logWarning } from '@ckeditor/ckeditor5-
|
|
|
78
63
|
});
|
|
79
64
|
}
|
|
80
65
|
/**
|
|
81
|
-
|
|
82
|
-
|
|
66
|
+
* @inheritDoc
|
|
67
|
+
*/ render() {
|
|
83
68
|
super.render();
|
|
84
69
|
submitHandler({
|
|
85
70
|
view: this
|
|
@@ -98,20 +83,20 @@ import { FocusTracker, KeystrokeHandler, logWarning } from '@ckeditor/ckeditor5-
|
|
|
98
83
|
this.keystrokes.listenTo(this.element);
|
|
99
84
|
}
|
|
100
85
|
/**
|
|
101
|
-
|
|
102
|
-
|
|
86
|
+
* @inheritDoc
|
|
87
|
+
*/ destroy() {
|
|
103
88
|
super.destroy();
|
|
104
89
|
this.focusTracker.destroy();
|
|
105
90
|
this.keystrokes.destroy();
|
|
106
91
|
}
|
|
107
92
|
/**
|
|
108
|
-
|
|
109
|
-
|
|
93
|
+
* Focuses the fist {@link #_focusables} in the form.
|
|
94
|
+
*/ focus() {
|
|
110
95
|
this._focusCycler.focusFirst();
|
|
111
96
|
}
|
|
112
97
|
/**
|
|
113
|
-
|
|
114
|
-
|
|
98
|
+
* Validates the form and returns `false` when some fields are invalid.
|
|
99
|
+
*/ isValid() {
|
|
115
100
|
this.resetFormStatus();
|
|
116
101
|
for (const validator of this._validators){
|
|
117
102
|
const errorText = validator(this);
|
|
@@ -125,16 +110,16 @@ import { FocusTracker, KeystrokeHandler, logWarning } from '@ckeditor/ckeditor5-
|
|
|
125
110
|
return true;
|
|
126
111
|
}
|
|
127
112
|
/**
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
113
|
+
* Cleans up the supplementary error and information text of the {@link #idInputView}
|
|
114
|
+
* bringing them back to the state when the form has been displayed for the first time.
|
|
115
|
+
*
|
|
116
|
+
* See {@link #isValid}.
|
|
117
|
+
*/ resetFormStatus() {
|
|
133
118
|
this.idInputView.errorText = null;
|
|
134
119
|
}
|
|
135
120
|
/**
|
|
136
|
-
|
|
137
|
-
|
|
121
|
+
* Creates header and form view.
|
|
122
|
+
*/ _createViewChildren() {
|
|
138
123
|
const children = this.createCollection();
|
|
139
124
|
const t = this.t;
|
|
140
125
|
children.add(new FormHeaderView(this.locale, {
|
|
@@ -144,8 +129,8 @@ import { FocusTracker, KeystrokeHandler, logWarning } from '@ckeditor/ckeditor5-
|
|
|
144
129
|
return children;
|
|
145
130
|
}
|
|
146
131
|
/**
|
|
147
|
-
|
|
148
|
-
|
|
132
|
+
* Creates form content view with input and button.
|
|
133
|
+
*/ _createFormContentView() {
|
|
149
134
|
const view = new View(this.locale);
|
|
150
135
|
const children = this.createCollection();
|
|
151
136
|
const classList = [
|
|
@@ -165,10 +150,10 @@ import { FocusTracker, KeystrokeHandler, logWarning } from '@ckeditor/ckeditor5-
|
|
|
165
150
|
return view;
|
|
166
151
|
}
|
|
167
152
|
/**
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
153
|
+
* Creates a labeled input view.
|
|
154
|
+
*
|
|
155
|
+
* @returns Labeled field view instance.
|
|
156
|
+
*/ _createIdInput() {
|
|
172
157
|
const t = this.locale.t;
|
|
173
158
|
const labeledInput = new LabeledFieldView(this.locale, createLabeledInputText);
|
|
174
159
|
labeledInput.label = t('Bookmark name');
|
|
@@ -176,12 +161,12 @@ import { FocusTracker, KeystrokeHandler, logWarning } from '@ckeditor/ckeditor5-
|
|
|
176
161
|
return labeledInput;
|
|
177
162
|
}
|
|
178
163
|
/**
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
164
|
+
* Creates a button view.
|
|
165
|
+
*
|
|
166
|
+
* @param label The button label.
|
|
167
|
+
* @param className The additional button CSS class name.
|
|
168
|
+
* @returns The button view instance.
|
|
169
|
+
*/ _createButton(label, className) {
|
|
185
170
|
const button = new ButtonView(this.locale);
|
|
186
171
|
button.set({
|
|
187
172
|
label,
|
|
@@ -195,11 +180,11 @@ import { FocusTracker, KeystrokeHandler, logWarning } from '@ckeditor/ckeditor5-
|
|
|
195
180
|
return button;
|
|
196
181
|
}
|
|
197
182
|
/**
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
183
|
+
* The native DOM `value` of the {@link #idInputView} element.
|
|
184
|
+
*
|
|
185
|
+
* **Note**: Do not confuse it with the {@link module:ui/inputtext/inputtextview~InputTextView#value}
|
|
186
|
+
* which works one way only and may not represent the actual state of the component in the DOM.
|
|
187
|
+
*/ get id() {
|
|
203
188
|
const { element } = this.idInputView.fieldView;
|
|
204
189
|
if (!element) {
|
|
205
190
|
return null;
|
|
@@ -213,30 +198,18 @@ import { FocusTracker, KeystrokeHandler, logWarning } from '@ckeditor/ckeditor5-
|
|
|
213
198
|
* removing or editing the bookmark.
|
|
214
199
|
*/ class BookmarkActionsView extends View {
|
|
215
200
|
/**
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
/**
|
|
219
|
-
* An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
|
|
220
|
-
*/ keystrokes = new KeystrokeHandler();
|
|
221
|
-
/**
|
|
222
|
-
* The bookmark preview view.
|
|
223
|
-
*/ bookmarkPreviewView;
|
|
224
|
-
/**
|
|
225
|
-
* The remove button view.
|
|
226
|
-
*/ removeButtonView;
|
|
227
|
-
/**
|
|
228
|
-
* The edit bookmark button view.
|
|
229
|
-
*/ editButtonView;
|
|
230
|
-
/**
|
|
231
|
-
* A collection of views that can be focused in the view.
|
|
232
|
-
*/ _focusables = new ViewCollection();
|
|
233
|
-
/**
|
|
234
|
-
* Helps cycling over {@link #_focusables} in the view.
|
|
235
|
-
*/ _focusCycler;
|
|
236
|
-
/**
|
|
237
|
-
* @inheritDoc
|
|
238
|
-
*/ constructor(locale){
|
|
201
|
+
* @inheritDoc
|
|
202
|
+
*/ constructor(locale){
|
|
239
203
|
super(locale);
|
|
204
|
+
/**
|
|
205
|
+
* Tracks information about DOM focus in the actions.
|
|
206
|
+
*/ this.focusTracker = new FocusTracker();
|
|
207
|
+
/**
|
|
208
|
+
* An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
|
|
209
|
+
*/ this.keystrokes = new KeystrokeHandler();
|
|
210
|
+
/**
|
|
211
|
+
* A collection of views that can be focused in the view.
|
|
212
|
+
*/ this._focusables = new ViewCollection();
|
|
240
213
|
const t = locale.t;
|
|
241
214
|
this.bookmarkPreviewView = this._createBookmarkPreviewView();
|
|
242
215
|
this.removeButtonView = this._createButton(t('Remove bookmark'), icons.remove, 'remove', this.bookmarkPreviewView);
|
|
@@ -272,8 +245,8 @@ import { FocusTracker, KeystrokeHandler, logWarning } from '@ckeditor/ckeditor5-
|
|
|
272
245
|
});
|
|
273
246
|
}
|
|
274
247
|
/**
|
|
275
|
-
|
|
276
|
-
|
|
248
|
+
* @inheritDoc
|
|
249
|
+
*/ render() {
|
|
277
250
|
super.render();
|
|
278
251
|
const childViews = [
|
|
279
252
|
this.editButtonView,
|
|
@@ -289,26 +262,26 @@ import { FocusTracker, KeystrokeHandler, logWarning } from '@ckeditor/ckeditor5-
|
|
|
289
262
|
this.keystrokes.listenTo(this.element);
|
|
290
263
|
}
|
|
291
264
|
/**
|
|
292
|
-
|
|
293
|
-
|
|
265
|
+
* @inheritDoc
|
|
266
|
+
*/ destroy() {
|
|
294
267
|
super.destroy();
|
|
295
268
|
this.focusTracker.destroy();
|
|
296
269
|
this.keystrokes.destroy();
|
|
297
270
|
}
|
|
298
271
|
/**
|
|
299
|
-
|
|
300
|
-
|
|
272
|
+
* Focuses the fist {@link #_focusables} in the actions.
|
|
273
|
+
*/ focus() {
|
|
301
274
|
this._focusCycler.focusFirst();
|
|
302
275
|
}
|
|
303
276
|
/**
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
277
|
+
* Creates a button view.
|
|
278
|
+
*
|
|
279
|
+
* @param label The button label.
|
|
280
|
+
* @param icon The button icon.
|
|
281
|
+
* @param eventName An event name that the `ButtonView#execute` event will be delegated to.
|
|
282
|
+
* @param additionalLabel An additional label outside the button.
|
|
283
|
+
* @returns The button view instance.
|
|
284
|
+
*/ _createButton(label, icon, eventName, additionalLabel) {
|
|
312
285
|
const button = new ButtonView(this.locale);
|
|
313
286
|
button.set({
|
|
314
287
|
label,
|
|
@@ -327,10 +300,10 @@ import { FocusTracker, KeystrokeHandler, logWarning } from '@ckeditor/ckeditor5-
|
|
|
327
300
|
return button;
|
|
328
301
|
}
|
|
329
302
|
/**
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
303
|
+
* Creates a bookmark name preview label.
|
|
304
|
+
*
|
|
305
|
+
* @returns The label view instance.
|
|
306
|
+
*/ _createBookmarkPreviewView() {
|
|
334
307
|
const label = new LabelView(this.locale);
|
|
335
308
|
label.extendTemplate({
|
|
336
309
|
attributes: {
|
|
@@ -381,32 +354,32 @@ import { FocusTracker, KeystrokeHandler, logWarning } from '@ckeditor/ckeditor5-
|
|
|
381
354
|
* ```
|
|
382
355
|
*/ class InsertBookmarkCommand extends Command {
|
|
383
356
|
/**
|
|
384
|
-
|
|
385
|
-
|
|
357
|
+
* @inheritDoc
|
|
358
|
+
*/ refresh() {
|
|
386
359
|
const model = this.editor.model;
|
|
387
360
|
const selection = model.document.selection;
|
|
388
361
|
const position = this._getPositionToInsertBookmark(selection);
|
|
389
362
|
this.isEnabled = !!position;
|
|
390
363
|
}
|
|
391
364
|
/**
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
365
|
+
* Executes the command.
|
|
366
|
+
*
|
|
367
|
+
* @fires execute
|
|
368
|
+
* @param options Command options.
|
|
369
|
+
* @param options.bookmarkId The value of the `bookmarkId` attribute.
|
|
370
|
+
*/ execute(options) {
|
|
398
371
|
if (!options) {
|
|
399
372
|
return;
|
|
400
373
|
}
|
|
401
374
|
const { bookmarkId } = options;
|
|
402
375
|
if (!isBookmarkIdValid(bookmarkId)) {
|
|
403
376
|
/**
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
377
|
+
* Insert bookmark command can be executed only with a valid name.
|
|
378
|
+
*
|
|
379
|
+
* A valid bookmark name must be a non-empty string and must not contain any spaces.
|
|
380
|
+
*
|
|
381
|
+
* @error insert-bookmark-command-executed-with-invalid-name
|
|
382
|
+
*/ logWarning('insert-bookmark-command-executed-with-invalid-name');
|
|
410
383
|
return;
|
|
411
384
|
}
|
|
412
385
|
const editor = this.editor;
|
|
@@ -436,9 +409,9 @@ import { FocusTracker, KeystrokeHandler, logWarning } from '@ckeditor/ckeditor5-
|
|
|
436
409
|
});
|
|
437
410
|
}
|
|
438
411
|
/**
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
412
|
+
* Returns the position where the bookmark can be inserted. And if it is not possible to insert a bookmark,
|
|
413
|
+
* check if it is possible to insert a paragraph.
|
|
414
|
+
*/ _getPositionToInsertBookmark(selection) {
|
|
442
415
|
const model = this.editor.model;
|
|
443
416
|
const schema = model.schema;
|
|
444
417
|
const firstRange = selection.getFirstRange();
|
|
@@ -483,8 +456,8 @@ import { FocusTracker, KeystrokeHandler, logWarning } from '@ckeditor/ckeditor5-
|
|
|
483
456
|
* ```
|
|
484
457
|
*/ class UpdateBookmarkCommand extends Command {
|
|
485
458
|
/**
|
|
486
|
-
|
|
487
|
-
|
|
459
|
+
* @inheritDoc
|
|
460
|
+
*/ refresh() {
|
|
488
461
|
const model = this.editor.model;
|
|
489
462
|
const selection = model.document.selection;
|
|
490
463
|
const selectedBookmark = getSelectedBookmark(selection);
|
|
@@ -492,24 +465,24 @@ import { FocusTracker, KeystrokeHandler, logWarning } from '@ckeditor/ckeditor5-
|
|
|
492
465
|
this.value = selectedBookmark ? selectedBookmark.getAttribute('bookmarkId') : undefined;
|
|
493
466
|
}
|
|
494
467
|
/**
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
468
|
+
* Executes the command.
|
|
469
|
+
*
|
|
470
|
+
* @fires execute
|
|
471
|
+
* @param options Command options.
|
|
472
|
+
* @param options.bookmarkId The new value of the `bookmarkId` attribute to set.
|
|
473
|
+
*/ execute(options) {
|
|
501
474
|
if (!options) {
|
|
502
475
|
return;
|
|
503
476
|
}
|
|
504
477
|
const { bookmarkId } = options;
|
|
505
478
|
if (!isBookmarkIdValid(bookmarkId)) {
|
|
506
479
|
/**
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
480
|
+
* Update bookmark command can be executed only with a valid name.
|
|
481
|
+
*
|
|
482
|
+
* A valid bookmark name must be a non-empty string and must not contain any spaces.
|
|
483
|
+
*
|
|
484
|
+
* @error update-bookmark-command-executed-with-invalid-name
|
|
485
|
+
*/ logWarning('update-bookmark-command-executed-with-invalid-name');
|
|
513
486
|
return;
|
|
514
487
|
}
|
|
515
488
|
const model = this.editor.model;
|
|
@@ -535,22 +508,25 @@ import { FocusTracker, KeystrokeHandler, logWarning } from '@ckeditor/ckeditor5-
|
|
|
535
508
|
/**
|
|
536
509
|
* The bookmark editing plugin.
|
|
537
510
|
*/ class BookmarkEditing extends Plugin {
|
|
511
|
+
constructor(){
|
|
512
|
+
super(...arguments);
|
|
513
|
+
/**
|
|
514
|
+
* A collection of bookmarks elements in the document.
|
|
515
|
+
*/ this._bookmarkElements = new Map();
|
|
516
|
+
}
|
|
538
517
|
/**
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
/**
|
|
542
|
-
* @inheritDoc
|
|
543
|
-
*/ static get pluginName() {
|
|
518
|
+
* @inheritDoc
|
|
519
|
+
*/ static get pluginName() {
|
|
544
520
|
return 'BookmarkEditing';
|
|
545
521
|
}
|
|
546
522
|
/**
|
|
547
|
-
|
|
548
|
-
|
|
523
|
+
* @inheritDoc
|
|
524
|
+
*/ static get isOfficialPlugin() {
|
|
549
525
|
return true;
|
|
550
526
|
}
|
|
551
527
|
/**
|
|
552
|
-
|
|
553
|
-
|
|
528
|
+
* @inheritDoc
|
|
529
|
+
*/ init() {
|
|
554
530
|
const { editor } = this;
|
|
555
531
|
this._defineSchema();
|
|
556
532
|
this._defineConverters();
|
|
@@ -561,8 +537,8 @@ import { FocusTracker, KeystrokeHandler, logWarning } from '@ckeditor/ckeditor5-
|
|
|
561
537
|
});
|
|
562
538
|
}
|
|
563
539
|
/**
|
|
564
|
-
|
|
565
|
-
|
|
540
|
+
* Returns the model element for the given bookmark ID if it exists.
|
|
541
|
+
*/ getElementForBookmarkId(bookmarkId) {
|
|
566
542
|
for (const [element, id] of this._bookmarkElements){
|
|
567
543
|
if (id == bookmarkId) {
|
|
568
544
|
return element;
|
|
@@ -571,8 +547,8 @@ import { FocusTracker, KeystrokeHandler, logWarning } from '@ckeditor/ckeditor5-
|
|
|
571
547
|
return null;
|
|
572
548
|
}
|
|
573
549
|
/**
|
|
574
|
-
|
|
575
|
-
|
|
550
|
+
* Defines the schema for the bookmark feature.
|
|
551
|
+
*/ _defineSchema() {
|
|
576
552
|
const schema = this.editor.model.schema;
|
|
577
553
|
schema.register('bookmark', {
|
|
578
554
|
inheritAllFrom: '$inlineObject',
|
|
@@ -584,8 +560,8 @@ import { FocusTracker, KeystrokeHandler, logWarning } from '@ckeditor/ckeditor5-
|
|
|
584
560
|
});
|
|
585
561
|
}
|
|
586
562
|
/**
|
|
587
|
-
|
|
588
|
-
|
|
563
|
+
* Defines the converters for the bookmark feature.
|
|
564
|
+
*/ _defineConverters() {
|
|
589
565
|
const { editor } = this;
|
|
590
566
|
const { conversion, t } = editor;
|
|
591
567
|
editor.data.htmlProcessor.domConverter.registerInlineObjectMatcher((element)=>upcastMatcher(element));
|
|
@@ -633,8 +609,8 @@ import { FocusTracker, KeystrokeHandler, logWarning } from '@ckeditor/ckeditor5-
|
|
|
633
609
|
conversion.for('upcast').add((dispatcher)=>dispatcher.on('element:a', dataViewModelAnchorInsertion(editor)));
|
|
634
610
|
}
|
|
635
611
|
/**
|
|
636
|
-
|
|
637
|
-
|
|
612
|
+
* Creates a UI element for the `bookmark` representation in editing view.
|
|
613
|
+
*/ _createBookmarkUIElement(writer) {
|
|
638
614
|
return writer.createUIElement('span', {
|
|
639
615
|
class: 'ck-bookmark__icon'
|
|
640
616
|
}, function(domDocument) {
|
|
@@ -650,8 +626,8 @@ import { FocusTracker, KeystrokeHandler, logWarning } from '@ckeditor/ckeditor5-
|
|
|
650
626
|
});
|
|
651
627
|
}
|
|
652
628
|
/**
|
|
653
|
-
|
|
654
|
-
|
|
629
|
+
* Tracking the added or removed bookmark elements.
|
|
630
|
+
*/ _trackBookmarkElements() {
|
|
655
631
|
this._bookmarkElements.forEach((id, element)=>{
|
|
656
632
|
if (element.root.rootName === '$graveyard') {
|
|
657
633
|
this._bookmarkElements.delete(element);
|
|
@@ -751,36 +727,36 @@ const VISUAL_SELECTION_MARKER_NAME = 'bookmark-ui';
|
|
|
751
727
|
* It registers the `'bookmark'` UI button in the editor's {@link module:ui/componentfactory~ComponentFactory component factory}
|
|
752
728
|
* which inserts the `bookmark` element upon selection.
|
|
753
729
|
*/ class BookmarkUI extends Plugin {
|
|
754
|
-
|
|
755
|
-
|
|
756
|
-
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
/**
|
|
764
|
-
|
|
765
|
-
|
|
730
|
+
constructor(){
|
|
731
|
+
super(...arguments);
|
|
732
|
+
/**
|
|
733
|
+
* The actions view displayed inside of the balloon.
|
|
734
|
+
*/ this.actionsView = null;
|
|
735
|
+
/**
|
|
736
|
+
* The form view displayed inside the balloon.
|
|
737
|
+
*/ this.formView = null;
|
|
738
|
+
}
|
|
739
|
+
/**
|
|
740
|
+
* @inheritDoc
|
|
741
|
+
*/ static get requires() {
|
|
766
742
|
return [
|
|
767
743
|
BookmarkEditing,
|
|
768
744
|
ContextualBalloon
|
|
769
745
|
];
|
|
770
746
|
}
|
|
771
747
|
/**
|
|
772
|
-
|
|
773
|
-
|
|
748
|
+
* @inheritDoc
|
|
749
|
+
*/ static get pluginName() {
|
|
774
750
|
return 'BookmarkUI';
|
|
775
751
|
}
|
|
776
752
|
/**
|
|
777
|
-
|
|
778
|
-
|
|
753
|
+
* @inheritDoc
|
|
754
|
+
*/ static get isOfficialPlugin() {
|
|
779
755
|
return true;
|
|
780
756
|
}
|
|
781
757
|
/**
|
|
782
|
-
|
|
783
|
-
|
|
758
|
+
* @inheritDoc
|
|
759
|
+
*/ init() {
|
|
784
760
|
const editor = this.editor;
|
|
785
761
|
editor.editing.view.addObserver(ClickObserver);
|
|
786
762
|
this._balloon = editor.plugins.get(ContextualBalloon);
|
|
@@ -813,8 +789,8 @@ const VISUAL_SELECTION_MARKER_NAME = 'bookmark-ui';
|
|
|
813
789
|
});
|
|
814
790
|
}
|
|
815
791
|
/**
|
|
816
|
-
|
|
817
|
-
|
|
792
|
+
* @inheritDoc
|
|
793
|
+
*/ destroy() {
|
|
818
794
|
super.destroy();
|
|
819
795
|
// Destroy created UI components as they are not automatically destroyed (see ckeditor5#1341).
|
|
820
796
|
if (this.formView) {
|
|
@@ -825,16 +801,16 @@ const VISUAL_SELECTION_MARKER_NAME = 'bookmark-ui';
|
|
|
825
801
|
}
|
|
826
802
|
}
|
|
827
803
|
/**
|
|
828
|
-
|
|
829
|
-
|
|
804
|
+
* Creates views.
|
|
805
|
+
*/ _createViews() {
|
|
830
806
|
this.actionsView = this._createActionsView();
|
|
831
807
|
this.formView = this._createFormView();
|
|
832
808
|
// Attach lifecycle actions to the the balloon.
|
|
833
809
|
this._enableUserBalloonInteractions();
|
|
834
810
|
}
|
|
835
811
|
/**
|
|
836
|
-
|
|
837
|
-
|
|
812
|
+
* Creates the {@link module:bookmark/ui/bookmarkactionsview~BookmarkActionsView} instance.
|
|
813
|
+
*/ _createActionsView() {
|
|
838
814
|
const editor = this.editor;
|
|
839
815
|
const actionsView = new BookmarkActionsView(editor.locale);
|
|
840
816
|
const updateBookmarkCommand = editor.commands.get('updateBookmark');
|
|
@@ -859,8 +835,8 @@ const VISUAL_SELECTION_MARKER_NAME = 'bookmark-ui';
|
|
|
859
835
|
return actionsView;
|
|
860
836
|
}
|
|
861
837
|
/**
|
|
862
|
-
|
|
863
|
-
|
|
838
|
+
* Creates the {@link module:bookmark/ui/bookmarkformview~BookmarkFormView} instance.
|
|
839
|
+
*/ _createFormView() {
|
|
864
840
|
const editor = this.editor;
|
|
865
841
|
const locale = editor.locale;
|
|
866
842
|
const insertBookmarkCommand = editor.commands.get('insertBookmark');
|
|
@@ -903,9 +879,9 @@ const VISUAL_SELECTION_MARKER_NAME = 'bookmark-ui';
|
|
|
903
879
|
return formView;
|
|
904
880
|
}
|
|
905
881
|
/**
|
|
906
|
-
|
|
907
|
-
|
|
908
|
-
|
|
882
|
+
* Creates a toolbar Bookmark button. Clicking this button will show
|
|
883
|
+
* a {@link #_balloon} attached to the selection.
|
|
884
|
+
*/ _createToolbarBookmarkButton() {
|
|
909
885
|
const editor = this.editor;
|
|
910
886
|
editor.ui.componentFactory.add('bookmark', ()=>{
|
|
911
887
|
const buttonView = this._createButton(ButtonView);
|
|
@@ -919,8 +895,8 @@ const VISUAL_SELECTION_MARKER_NAME = 'bookmark-ui';
|
|
|
919
895
|
});
|
|
920
896
|
}
|
|
921
897
|
/**
|
|
922
|
-
|
|
923
|
-
|
|
898
|
+
* Creates a button for `bookmark` command to use either in toolbar or in menu bar.
|
|
899
|
+
*/ _createButton(ButtonClass) {
|
|
924
900
|
const editor = this.editor;
|
|
925
901
|
const locale = editor.locale;
|
|
926
902
|
const view = new ButtonClass(locale);
|
|
@@ -941,9 +917,9 @@ const VISUAL_SELECTION_MARKER_NAME = 'bookmark-ui';
|
|
|
941
917
|
return view;
|
|
942
918
|
}
|
|
943
919
|
/**
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
|
|
920
|
+
* Attaches actions that control whether the balloon panel containing the
|
|
921
|
+
* {@link #formView} should be displayed.
|
|
922
|
+
*/ _enableBalloonActivators() {
|
|
947
923
|
const editor = this.editor;
|
|
948
924
|
const viewDocument = editor.editing.view.document;
|
|
949
925
|
// Handle click on view document and show panel when selection is placed inside the bookmark element.
|
|
@@ -957,9 +933,9 @@ const VISUAL_SELECTION_MARKER_NAME = 'bookmark-ui';
|
|
|
957
933
|
});
|
|
958
934
|
}
|
|
959
935
|
/**
|
|
960
|
-
|
|
961
|
-
|
|
962
|
-
|
|
936
|
+
* Attaches actions that control whether the balloon panel containing the
|
|
937
|
+
* {@link #formView} is visible or not.
|
|
938
|
+
*/ _enableUserBalloonInteractions() {
|
|
963
939
|
// Focus the form if the balloon is visible and the Tab key has been pressed.
|
|
964
940
|
this.editor.keystrokes.set('Tab', (data, cancel)=>{
|
|
965
941
|
if (this._areActionsVisible && !this.actionsView.focusTracker.isFocused) {
|
|
@@ -989,17 +965,17 @@ const VISUAL_SELECTION_MARKER_NAME = 'bookmark-ui';
|
|
|
989
965
|
});
|
|
990
966
|
}
|
|
991
967
|
/**
|
|
992
|
-
|
|
993
|
-
|
|
994
|
-
|
|
968
|
+
* Updates the button label. If bookmark is selected label is set to 'Update' otherwise
|
|
969
|
+
* it is 'Insert'.
|
|
970
|
+
*/ _updateFormButtonLabel(isBookmarkSelected) {
|
|
995
971
|
const t = this.editor.locale.t;
|
|
996
972
|
this.formView.buttonView.label = isBookmarkSelected ? t('Update') : t('Insert');
|
|
997
973
|
}
|
|
998
974
|
/**
|
|
999
|
-
|
|
1000
|
-
|
|
1001
|
-
|
|
1002
|
-
|
|
975
|
+
* Adds the {@link #actionsView} to the {@link #_balloon}.
|
|
976
|
+
*
|
|
977
|
+
* @internal
|
|
978
|
+
*/ _addActionsView() {
|
|
1003
979
|
if (!this.actionsView) {
|
|
1004
980
|
this._createViews();
|
|
1005
981
|
}
|
|
@@ -1012,8 +988,8 @@ const VISUAL_SELECTION_MARKER_NAME = 'bookmark-ui';
|
|
|
1012
988
|
});
|
|
1013
989
|
}
|
|
1014
990
|
/**
|
|
1015
|
-
|
|
1016
|
-
|
|
991
|
+
* Adds the {@link #formView} to the {@link #_balloon}.
|
|
992
|
+
*/ _addFormView() {
|
|
1017
993
|
if (!this.formView) {
|
|
1018
994
|
this._createViews();
|
|
1019
995
|
}
|
|
@@ -1036,8 +1012,8 @@ const VISUAL_SELECTION_MARKER_NAME = 'bookmark-ui';
|
|
|
1036
1012
|
this.formView.enableCssTransitions();
|
|
1037
1013
|
}
|
|
1038
1014
|
/**
|
|
1039
|
-
|
|
1040
|
-
|
|
1015
|
+
* Closes the form view. Decides whether the balloon should be hidden completely.
|
|
1016
|
+
*/ _closeFormView() {
|
|
1041
1017
|
const updateBookmarkCommand = this.editor.commands.get('updateBookmark');
|
|
1042
1018
|
if (updateBookmarkCommand.value !== undefined) {
|
|
1043
1019
|
this._removeFormView();
|
|
@@ -1046,8 +1022,8 @@ const VISUAL_SELECTION_MARKER_NAME = 'bookmark-ui';
|
|
|
1046
1022
|
}
|
|
1047
1023
|
}
|
|
1048
1024
|
/**
|
|
1049
|
-
|
|
1050
|
-
|
|
1025
|
+
* Removes the {@link #formView} from the {@link #_balloon}.
|
|
1026
|
+
*/ _removeFormView() {
|
|
1051
1027
|
if (this._isFormInPanel) {
|
|
1052
1028
|
// Blur the input element before removing it from DOM to prevent issues in some browsers.
|
|
1053
1029
|
// See https://github.com/ckeditor/ckeditor5/issues/1501.
|
|
@@ -1062,8 +1038,8 @@ const VISUAL_SELECTION_MARKER_NAME = 'bookmark-ui';
|
|
|
1062
1038
|
}
|
|
1063
1039
|
}
|
|
1064
1040
|
/**
|
|
1065
|
-
|
|
1066
|
-
|
|
1041
|
+
* Shows the correct UI type. It is either {@link #formView} or {@link #actionsView}.
|
|
1042
|
+
*/ _showUI(forceVisible = false) {
|
|
1067
1043
|
if (!this.formView) {
|
|
1068
1044
|
this._createViews();
|
|
1069
1045
|
}
|
|
@@ -1093,10 +1069,10 @@ const VISUAL_SELECTION_MARKER_NAME = 'bookmark-ui';
|
|
|
1093
1069
|
this._startUpdatingUI();
|
|
1094
1070
|
}
|
|
1095
1071
|
/**
|
|
1096
|
-
|
|
1097
|
-
|
|
1098
|
-
|
|
1099
|
-
|
|
1072
|
+
* Removes the {@link #formView} from the {@link #_balloon}.
|
|
1073
|
+
*
|
|
1074
|
+
* See {@link #_addFormView}, {@link #_addActionsView}.
|
|
1075
|
+
*/ _hideUI() {
|
|
1100
1076
|
if (!this._isUIInPanel) {
|
|
1101
1077
|
return;
|
|
1102
1078
|
}
|
|
@@ -1113,11 +1089,11 @@ const VISUAL_SELECTION_MARKER_NAME = 'bookmark-ui';
|
|
|
1113
1089
|
this._hideFakeVisualSelection();
|
|
1114
1090
|
}
|
|
1115
1091
|
/**
|
|
1116
|
-
|
|
1117
|
-
|
|
1118
|
-
|
|
1119
|
-
|
|
1120
|
-
|
|
1092
|
+
* Makes the UI react to the {@link module:ui/editorui/editorui~EditorUI#event:update} event to
|
|
1093
|
+
* reposition itself when the editor UI should be refreshed.
|
|
1094
|
+
*
|
|
1095
|
+
* See: {@link #_hideUI} to learn when the UI stops reacting to the `update` event.
|
|
1096
|
+
*/ _startUpdatingUI() {
|
|
1121
1097
|
const editor = this.editor;
|
|
1122
1098
|
const viewDocument = editor.editing.view.document;
|
|
1123
1099
|
let prevSelectedBookmark = this._getSelectedBookmarkElement();
|
|
@@ -1153,37 +1129,37 @@ const VISUAL_SELECTION_MARKER_NAME = 'bookmark-ui';
|
|
|
1153
1129
|
this.listenTo(this._balloon, 'change:visibleView', update);
|
|
1154
1130
|
}
|
|
1155
1131
|
/**
|
|
1156
|
-
|
|
1157
|
-
|
|
1132
|
+
* Returns `true` when {@link #formView} is in the {@link #_balloon}.
|
|
1133
|
+
*/ get _isFormInPanel() {
|
|
1158
1134
|
return !!this.formView && this._balloon.hasView(this.formView);
|
|
1159
1135
|
}
|
|
1160
1136
|
/**
|
|
1161
|
-
|
|
1162
|
-
|
|
1137
|
+
* Returns `true` when {@link #actionsView} is in the {@link #_balloon}.
|
|
1138
|
+
*/ get _areActionsInPanel() {
|
|
1163
1139
|
return !!this.actionsView && this._balloon.hasView(this.actionsView);
|
|
1164
1140
|
}
|
|
1165
1141
|
/**
|
|
1166
|
-
|
|
1167
|
-
|
|
1168
|
-
|
|
1142
|
+
* Returns `true` when {@link #actionsView} is in the {@link #_balloon} and it is
|
|
1143
|
+
* currently visible.
|
|
1144
|
+
*/ get _areActionsVisible() {
|
|
1169
1145
|
return !!this.actionsView && this._balloon.visibleView === this.actionsView;
|
|
1170
1146
|
}
|
|
1171
1147
|
/**
|
|
1172
|
-
|
|
1173
|
-
|
|
1148
|
+
* Returns `true` when {@link #actionsView} or {@link #formView} is in the {@link #_balloon}.
|
|
1149
|
+
*/ get _isUIInPanel() {
|
|
1174
1150
|
return this._isFormInPanel || this._areActionsInPanel;
|
|
1175
1151
|
}
|
|
1176
1152
|
/**
|
|
1177
|
-
|
|
1178
|
-
|
|
1179
|
-
|
|
1153
|
+
* Returns `true` when {@link #actionsView} or {@link #formView} is in the {@link #_balloon} and it is
|
|
1154
|
+
* currently visible.
|
|
1155
|
+
*/ get _isUIVisible() {
|
|
1180
1156
|
const visibleView = this._balloon.visibleView;
|
|
1181
1157
|
return !!this.formView && visibleView == this.formView || this._areActionsVisible;
|
|
1182
1158
|
}
|
|
1183
1159
|
/**
|
|
1184
|
-
|
|
1185
|
-
|
|
1186
|
-
|
|
1160
|
+
* Returns positioning options for the {@link #_balloon}. They control the way the balloon is attached
|
|
1161
|
+
* to the target element or selection.
|
|
1162
|
+
*/ _getBalloonPositionData() {
|
|
1187
1163
|
const view = this.editor.editing.view;
|
|
1188
1164
|
const model = this.editor.model;
|
|
1189
1165
|
let target;
|
|
@@ -1206,10 +1182,10 @@ const VISUAL_SELECTION_MARKER_NAME = 'bookmark-ui';
|
|
|
1206
1182
|
};
|
|
1207
1183
|
}
|
|
1208
1184
|
/**
|
|
1209
|
-
|
|
1210
|
-
|
|
1211
|
-
|
|
1212
|
-
|
|
1185
|
+
* Returns the bookmark {@link module:engine/view/attributeelement~AttributeElement} under
|
|
1186
|
+
* the {@link module:engine/view/document~Document editing view's} selection or `null`
|
|
1187
|
+
* if there is none.
|
|
1188
|
+
*/ _getSelectedBookmarkElement() {
|
|
1213
1189
|
const selection = this.editor.model.document.selection;
|
|
1214
1190
|
const element = selection.getSelectedElement();
|
|
1215
1191
|
if (element && element.is('element', 'bookmark')) {
|
|
@@ -1218,10 +1194,10 @@ const VISUAL_SELECTION_MARKER_NAME = 'bookmark-ui';
|
|
|
1218
1194
|
return null;
|
|
1219
1195
|
}
|
|
1220
1196
|
/**
|
|
1221
|
-
|
|
1222
|
-
|
|
1223
|
-
|
|
1224
|
-
|
|
1197
|
+
* Displays a fake visual selection when the contextual balloon is displayed.
|
|
1198
|
+
*
|
|
1199
|
+
* This adds a 'bookmark-ui' marker into the document that is rendered as a highlight on selected text fragment.
|
|
1200
|
+
*/ _showFakeVisualSelection() {
|
|
1225
1201
|
const model = this.editor.model;
|
|
1226
1202
|
model.change((writer)=>{
|
|
1227
1203
|
const range = model.document.selection.getFirstRange();
|
|
@@ -1250,8 +1226,8 @@ const VISUAL_SELECTION_MARKER_NAME = 'bookmark-ui';
|
|
|
1250
1226
|
});
|
|
1251
1227
|
}
|
|
1252
1228
|
/**
|
|
1253
|
-
|
|
1254
|
-
|
|
1229
|
+
* Hides the fake visual selection created in {@link #_showFakeVisualSelection}.
|
|
1230
|
+
*/ _hideFakeVisualSelection() {
|
|
1255
1231
|
const model = this.editor.model;
|
|
1256
1232
|
if (model.markers.has(VISUAL_SELECTION_MARKER_NAME)) {
|
|
1257
1233
|
model.change((writer)=>{
|
|
@@ -1296,13 +1272,13 @@ const VISUAL_SELECTION_MARKER_NAME = 'bookmark-ui';
|
|
|
1296
1272
|
* For a detailed overview, check the {@glink features/bookmarks Bookmarks} feature guide.
|
|
1297
1273
|
*/ class Bookmark extends Plugin {
|
|
1298
1274
|
/**
|
|
1299
|
-
|
|
1300
|
-
|
|
1275
|
+
* @inheritDoc
|
|
1276
|
+
*/ static get pluginName() {
|
|
1301
1277
|
return 'Bookmark';
|
|
1302
1278
|
}
|
|
1303
1279
|
/**
|
|
1304
|
-
|
|
1305
|
-
|
|
1280
|
+
* @inheritDoc
|
|
1281
|
+
*/ static get requires() {
|
|
1306
1282
|
return [
|
|
1307
1283
|
BookmarkEditing,
|
|
1308
1284
|
BookmarkUI,
|
|
@@ -1310,8 +1286,8 @@ const VISUAL_SELECTION_MARKER_NAME = 'bookmark-ui';
|
|
|
1310
1286
|
];
|
|
1311
1287
|
}
|
|
1312
1288
|
/**
|
|
1313
|
-
|
|
1314
|
-
|
|
1289
|
+
* @inheritDoc
|
|
1290
|
+
*/ static get isOfficialPlugin() {
|
|
1315
1291
|
return true;
|
|
1316
1292
|
}
|
|
1317
1293
|
}
|