@ckeditor/ckeditor5-media-embed 36.0.0 → 37.0.0-alpha.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.
@@ -2,350 +2,199 @@
2
2
  * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
3
3
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4
4
  */
5
-
6
5
  /**
7
6
  * @module media-embed/ui/mediaformview
8
7
  */
9
-
10
- import {
11
- ButtonView,
12
- FocusCycler,
13
- LabeledFieldView,
14
- View,
15
- ViewCollection,
16
- createLabeledInputText,
17
- injectCssTransitionDisabler,
18
- submitHandler
19
- } from 'ckeditor5/src/ui';
8
+ import { ButtonView, FocusCycler, LabeledFieldView, View, ViewCollection, createLabeledInputText, submitHandler } from 'ckeditor5/src/ui';
20
9
  import { FocusTracker, KeystrokeHandler } from 'ckeditor5/src/utils';
21
10
  import { icons } from 'ckeditor5/src/core';
22
-
23
11
  // See: #8833.
24
12
  // eslint-disable-next-line ckeditor5-rules/ckeditor-imports
25
13
  import '@ckeditor/ckeditor5-ui/theme/components/responsive-form/responsiveform.css';
26
14
  import '../../theme/mediaform.css';
27
-
28
15
  /**
29
16
  * The media form view controller class.
30
17
  *
31
18
  * See {@link module:media-embed/ui/mediaformview~MediaFormView}.
32
- *
33
- * @extends module:ui/view~View
34
19
  */
35
20
  export default class MediaFormView extends View {
36
- /**
37
- * @param {Array.<Function>} validators Form validators used by {@link #isValid}.
38
- * @param {module:utils/locale~Locale} [locale] The localization services instance.
39
- */
40
- constructor( validators, locale ) {
41
- super( locale );
42
-
43
- const t = locale.t;
44
-
45
- /**
46
- * Tracks information about the DOM focus in the form.
47
- *
48
- * @readonly
49
- * @member {module:utils/focustracker~FocusTracker}
50
- */
51
- this.focusTracker = new FocusTracker();
52
-
53
- /**
54
- * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
55
- *
56
- * @readonly
57
- * @member {module:utils/keystrokehandler~KeystrokeHandler}
58
- */
59
- this.keystrokes = new KeystrokeHandler();
60
-
61
- /**
62
- * The value of the URL input.
63
- *
64
- * @member {String} #mediaURLInputValue
65
- * @observable
66
- */
67
- this.set( 'mediaURLInputValue', '' );
68
-
69
- /**
70
- * The URL input view.
71
- *
72
- * @member {module:ui/labeledfield/labeledfieldview~LabeledFieldView}
73
- */
74
- this.urlInputView = this._createUrlInput();
75
-
76
- /**
77
- * The Save button view.
78
- *
79
- * @member {module:ui/button/buttonview~ButtonView}
80
- */
81
- this.saveButtonView = this._createButton( t( 'Save' ), icons.check, 'ck-button-save' );
82
- this.saveButtonView.type = 'submit';
83
- this.saveButtonView.bind( 'isEnabled' ).to( this, 'mediaURLInputValue', value => !!value );
84
-
85
- /**
86
- * The Cancel button view.
87
- *
88
- * @member {module:ui/button/buttonview~ButtonView}
89
- */
90
- this.cancelButtonView = this._createButton( t( 'Cancel' ), icons.cancel, 'ck-button-cancel', 'cancel' );
91
-
92
- /**
93
- * A collection of views that can be focused in the form.
94
- *
95
- * @readonly
96
- * @protected
97
- * @member {module:ui/viewcollection~ViewCollection}
98
- */
99
- this._focusables = new ViewCollection();
100
-
101
- /**
102
- * Helps cycling over {@link #_focusables} in the form.
103
- *
104
- * @readonly
105
- * @protected
106
- * @member {module:ui/focuscycler~FocusCycler}
107
- */
108
- this._focusCycler = new FocusCycler( {
109
- focusables: this._focusables,
110
- focusTracker: this.focusTracker,
111
- keystrokeHandler: this.keystrokes,
112
- actions: {
113
- // Navigate form fields backwards using the <kbd>Shift</kbd> + <kbd>Tab</kbd> keystroke.
114
- focusPrevious: 'shift + tab',
115
-
116
- // Navigate form fields forwards using the <kbd>Tab</kbd> key.
117
- focusNext: 'tab'
118
- }
119
- } );
120
-
121
- /**
122
- * An array of form validators used by {@link #isValid}.
123
- *
124
- * @readonly
125
- * @protected
126
- * @member {Array.<Function>}
127
- */
128
- this._validators = validators;
129
-
130
- this.setTemplate( {
131
- tag: 'form',
132
-
133
- attributes: {
134
- class: [
135
- 'ck',
136
- 'ck-media-form',
137
- 'ck-responsive-form'
138
- ],
139
-
140
- tabindex: '-1'
141
- },
142
-
143
- children: [
144
- this.urlInputView,
145
- this.saveButtonView,
146
- this.cancelButtonView
147
- ]
148
- } );
149
-
150
- injectCssTransitionDisabler( this );
151
-
152
- /**
153
- * The default info text for the {@link #urlInputView}.
154
- *
155
- * @private
156
- * @member {String} #_urlInputViewInfoDefault
157
- */
158
-
159
- /**
160
- * The info text with an additional tip for the {@link #urlInputView},
161
- * displayed when the input has some value.
162
- *
163
- * @private
164
- * @member {String} #_urlInputViewInfoTip
165
- */
166
- }
167
-
168
- /**
169
- * @inheritDoc
170
- */
171
- render() {
172
- super.render();
173
-
174
- submitHandler( {
175
- view: this
176
- } );
177
-
178
- const childViews = [
179
- this.urlInputView,
180
- this.saveButtonView,
181
- this.cancelButtonView
182
- ];
183
-
184
- childViews.forEach( v => {
185
- // Register the view as focusable.
186
- this._focusables.add( v );
187
-
188
- // Register the view in the focus tracker.
189
- this.focusTracker.add( v.element );
190
- } );
191
-
192
- // Start listening for the keystrokes coming from #element.
193
- this.keystrokes.listenTo( this.element );
194
-
195
- const stopPropagation = data => data.stopPropagation();
196
-
197
- // Since the form is in the dropdown panel which is a child of the toolbar, the toolbar's
198
- // keystroke handler would take over the key management in the URL input. We need to prevent
199
- // this ASAP. Otherwise, the basic caret movement using the arrow keys will be impossible.
200
- this.keystrokes.set( 'arrowright', stopPropagation );
201
- this.keystrokes.set( 'arrowleft', stopPropagation );
202
- this.keystrokes.set( 'arrowup', stopPropagation );
203
- this.keystrokes.set( 'arrowdown', stopPropagation );
204
-
205
- // Intercept the `selectstart` event, which is blocked by default because of the default behavior
206
- // of the DropdownView#panelView.
207
- // TODO: blocking `selectstart` in the #panelView should be configurable per–drop–down instance.
208
- this.listenTo( this.urlInputView.element, 'selectstart', ( evt, domEvt ) => {
209
- domEvt.stopPropagation();
210
- }, { priority: 'high' } );
211
- }
212
-
213
- /**
214
- * @inheritDoc
215
- */
216
- destroy() {
217
- super.destroy();
218
-
219
- this.focusTracker.destroy();
220
- this.keystrokes.destroy();
221
- }
222
-
223
- /**
224
- * Focuses the fist {@link #_focusables} in the form.
225
- */
226
- focus() {
227
- this._focusCycler.focusFirst();
228
- }
229
-
230
- /**
231
- * The native DOM `value` of the {@link #urlInputView} element.
232
- *
233
- * **Note**: Do not confuse it with the {@link module:ui/inputtext/inputtextview~InputTextView#value}
234
- * which works one way only and may not represent the actual state of the component in the DOM.
235
- *
236
- * @type {String}
237
- */
238
- get url() {
239
- return this.urlInputView.fieldView.element.value.trim();
240
- }
241
-
242
- set url( url ) {
243
- this.urlInputView.fieldView.element.value = url.trim();
244
- }
245
-
246
- /**
247
- * Validates the form and returns `false` when some fields are invalid.
248
- *
249
- * @returns {Boolean}
250
- */
251
- isValid() {
252
- this.resetFormStatus();
253
-
254
- for ( const validator of this._validators ) {
255
- const errorText = validator( this );
256
-
257
- // One error per field is enough.
258
- if ( errorText ) {
259
- // Apply updated error.
260
- this.urlInputView.errorText = errorText;
261
-
262
- return false;
263
- }
264
- }
265
-
266
- return true;
267
- }
268
-
269
- /**
270
- * Cleans up the supplementary error and information text of the {@link #urlInputView}
271
- * bringing them back to the state when the form has been displayed for the first time.
272
- *
273
- * See {@link #isValid}.
274
- */
275
- resetFormStatus() {
276
- this.urlInputView.errorText = null;
277
- this.urlInputView.infoText = this._urlInputViewInfoDefault;
278
- }
279
-
280
- /**
281
- * Creates a labeled input view.
282
- *
283
- * @private
284
- * @returns {module:ui/labeledfield/labeledfieldview~LabeledFieldView} Labeled input view instance.
285
- */
286
- _createUrlInput() {
287
- const t = this.locale.t;
288
-
289
- const labeledInput = new LabeledFieldView( this.locale, createLabeledInputText );
290
- const inputField = labeledInput.fieldView;
291
-
292
- this._urlInputViewInfoDefault = t( 'Paste the media URL in the input.' );
293
- this._urlInputViewInfoTip = t( 'Tip: Paste the URL into the content to embed faster.' );
294
-
295
- labeledInput.label = t( 'Media URL' );
296
- labeledInput.infoText = this._urlInputViewInfoDefault;
297
-
298
- inputField.on( 'input', () => {
299
- // Display the tip text only when there is some value. Otherwise fall back to the default info text.
300
- labeledInput.infoText = inputField.element.value ? this._urlInputViewInfoTip : this._urlInputViewInfoDefault;
301
- this.mediaURLInputValue = inputField.element.value.trim();
302
- } );
303
-
304
- return labeledInput;
305
- }
306
-
307
- /**
308
- * Creates a button view.
309
- *
310
- * @private
311
- * @param {String} label The button label.
312
- * @param {String} icon The button icon.
313
- * @param {String} className The additional button CSS class name.
314
- * @param {String} [eventName] An event name that the `ButtonView#execute` event will be delegated to.
315
- * @returns {module:ui/button/buttonview~ButtonView} The button view instance.
316
- */
317
- _createButton( label, icon, className, eventName ) {
318
- const button = new ButtonView( this.locale );
319
-
320
- button.set( {
321
- label,
322
- icon,
323
- tooltip: true
324
- } );
325
-
326
- button.extendTemplate( {
327
- attributes: {
328
- class: className
329
- }
330
- } );
331
-
332
- if ( eventName ) {
333
- button.delegate( 'execute' ).to( this, eventName );
334
- }
335
-
336
- return button;
337
- }
21
+ /**
22
+ * @param validators Form validators used by {@link #isValid}.
23
+ * @param locale The localization services instance.
24
+ */
25
+ constructor(validators, locale) {
26
+ super(locale);
27
+ const t = locale.t;
28
+ this.focusTracker = new FocusTracker();
29
+ this.keystrokes = new KeystrokeHandler();
30
+ this.set('mediaURLInputValue', '');
31
+ this.urlInputView = this._createUrlInput();
32
+ this.saveButtonView = this._createButton(t('Save'), icons.check, 'ck-button-save');
33
+ this.saveButtonView.type = 'submit';
34
+ this.saveButtonView.bind('isEnabled').to(this, 'mediaURLInputValue', value => !!value);
35
+ this.cancelButtonView = this._createButton(t('Cancel'), icons.cancel, 'ck-button-cancel', 'cancel');
36
+ this._focusables = new ViewCollection();
37
+ this._focusCycler = new FocusCycler({
38
+ focusables: this._focusables,
39
+ focusTracker: this.focusTracker,
40
+ keystrokeHandler: this.keystrokes,
41
+ actions: {
42
+ // Navigate form fields backwards using the <kbd>Shift</kbd> + <kbd>Tab</kbd> keystroke.
43
+ focusPrevious: 'shift + tab',
44
+ // Navigate form fields forwards using the <kbd>Tab</kbd> key.
45
+ focusNext: 'tab'
46
+ }
47
+ });
48
+ this._validators = validators;
49
+ this.setTemplate({
50
+ tag: 'form',
51
+ attributes: {
52
+ class: [
53
+ 'ck',
54
+ 'ck-media-form',
55
+ 'ck-responsive-form'
56
+ ],
57
+ tabindex: '-1'
58
+ },
59
+ children: [
60
+ this.urlInputView,
61
+ this.saveButtonView,
62
+ this.cancelButtonView
63
+ ]
64
+ });
65
+ }
66
+ /**
67
+ * @inheritDoc
68
+ */
69
+ render() {
70
+ super.render();
71
+ submitHandler({
72
+ view: this
73
+ });
74
+ const childViews = [
75
+ this.urlInputView,
76
+ this.saveButtonView,
77
+ this.cancelButtonView
78
+ ];
79
+ childViews.forEach(v => {
80
+ // Register the view as focusable.
81
+ this._focusables.add(v);
82
+ // Register the view in the focus tracker.
83
+ this.focusTracker.add(v.element);
84
+ });
85
+ // Start listening for the keystrokes coming from #element.
86
+ this.keystrokes.listenTo(this.element);
87
+ const stopPropagation = (data) => data.stopPropagation();
88
+ // Since the form is in the dropdown panel which is a child of the toolbar, the toolbar's
89
+ // keystroke handler would take over the key management in the URL input. We need to prevent
90
+ // this ASAP. Otherwise, the basic caret movement using the arrow keys will be impossible.
91
+ this.keystrokes.set('arrowright', stopPropagation);
92
+ this.keystrokes.set('arrowleft', stopPropagation);
93
+ this.keystrokes.set('arrowup', stopPropagation);
94
+ this.keystrokes.set('arrowdown', stopPropagation);
95
+ // Intercept the `selectstart` event, which is blocked by default because of the default behavior
96
+ // of the DropdownView#panelView.
97
+ // TODO: blocking `selectstart` in the #panelView should be configurable per–drop–down instance.
98
+ this.listenTo(this.urlInputView.element, 'selectstart', (evt, domEvt) => {
99
+ domEvt.stopPropagation();
100
+ }, { priority: 'high' });
101
+ }
102
+ /**
103
+ * @inheritDoc
104
+ */
105
+ destroy() {
106
+ super.destroy();
107
+ this.focusTracker.destroy();
108
+ this.keystrokes.destroy();
109
+ }
110
+ /**
111
+ * Focuses the fist {@link #_focusables} in the form.
112
+ */
113
+ focus() {
114
+ this._focusCycler.focusFirst();
115
+ }
116
+ /**
117
+ * The native DOM `value` of the {@link #urlInputView} element.
118
+ *
119
+ * **Note**: Do not confuse it with the {@link module:ui/inputtext/inputtextview~InputTextView#value}
120
+ * which works one way only and may not represent the actual state of the component in the DOM.
121
+ */
122
+ get url() {
123
+ return this.urlInputView.fieldView.element.value.trim();
124
+ }
125
+ set url(url) {
126
+ this.urlInputView.fieldView.element.value = url.trim();
127
+ }
128
+ /**
129
+ * Validates the form and returns `false` when some fields are invalid.
130
+ */
131
+ isValid() {
132
+ this.resetFormStatus();
133
+ for (const validator of this._validators) {
134
+ const errorText = validator(this);
135
+ // One error per field is enough.
136
+ if (errorText) {
137
+ // Apply updated error.
138
+ this.urlInputView.errorText = errorText;
139
+ return false;
140
+ }
141
+ }
142
+ return true;
143
+ }
144
+ /**
145
+ * Cleans up the supplementary error and information text of the {@link #urlInputView}
146
+ * bringing them back to the state when the form has been displayed for the first time.
147
+ *
148
+ * See {@link #isValid}.
149
+ */
150
+ resetFormStatus() {
151
+ this.urlInputView.errorText = null;
152
+ this.urlInputView.infoText = this._urlInputViewInfoDefault;
153
+ }
154
+ /**
155
+ * Creates a labeled input view.
156
+ *
157
+ * @returns Labeled input view instance.
158
+ */
159
+ _createUrlInput() {
160
+ const t = this.locale.t;
161
+ const labeledInput = new LabeledFieldView(this.locale, createLabeledInputText);
162
+ const inputField = labeledInput.fieldView;
163
+ this._urlInputViewInfoDefault = t('Paste the media URL in the input.');
164
+ this._urlInputViewInfoTip = t('Tip: Paste the URL into the content to embed faster.');
165
+ labeledInput.label = t('Media URL');
166
+ labeledInput.infoText = this._urlInputViewInfoDefault;
167
+ inputField.on('input', () => {
168
+ // Display the tip text only when there is some value. Otherwise fall back to the default info text.
169
+ labeledInput.infoText = inputField.element.value ? this._urlInputViewInfoTip : this._urlInputViewInfoDefault;
170
+ this.mediaURLInputValue = inputField.element.value.trim();
171
+ });
172
+ return labeledInput;
173
+ }
174
+ /**
175
+ * Creates a button view.
176
+ *
177
+ * @param label The button label.
178
+ * @param icon The button icon.
179
+ * @param className The additional button CSS class name.
180
+ * @param eventName An event name that the `ButtonView#execute` event will be delegated to.
181
+ * @returns The button view instance.
182
+ */
183
+ _createButton(label, icon, className, eventName) {
184
+ const button = new ButtonView(this.locale);
185
+ button.set({
186
+ label,
187
+ icon,
188
+ tooltip: true
189
+ });
190
+ button.extendTemplate({
191
+ attributes: {
192
+ class: className
193
+ }
194
+ });
195
+ if (eventName) {
196
+ button.delegate('execute').to(this, eventName);
197
+ }
198
+ return button;
199
+ }
338
200
  }
339
-
340
- /**
341
- * Fired when the form view is submitted (when one of the children triggered the submit event),
342
- * e.g. click on {@link #saveButtonView}.
343
- *
344
- * @event submit
345
- */
346
-
347
- /**
348
- * Fired when the form view is canceled, e.g. by a click on {@link #cancelButtonView}.
349
- *
350
- * @event cancel
351
- */
package/src/utils.d.ts ADDED
@@ -0,0 +1,67 @@
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 media-embed/utils
7
+ */
8
+ import type { ViewContainerElement, Element, Model, Selectable, Selection, DowncastWriter, ViewDocumentSelection, ViewElement, DocumentSelection } from 'ckeditor5/src/engine';
9
+ import type MediaRegistry from './mediaregistry';
10
+ /**
11
+ * Converts a given {@link module:engine/view/element~Element} to a media embed widget:
12
+ * * Adds a {@link module:engine/view/element~Element#_setCustomProperty custom property} allowing to recognize the media widget element.
13
+ * * Calls the {@link module:widget/utils~toWidget} function with the proper element's label creator.
14
+ *
15
+ * @param writer An instance of the view writer.
16
+ * @param label The element's label.
17
+ */
18
+ export declare function toMediaWidget(viewElement: ViewElement, writer: DowncastWriter, label: string): ViewElement;
19
+ /**
20
+ * Returns a media widget editing view element if one is selected.
21
+ */
22
+ export declare function getSelectedMediaViewWidget(selection: ViewDocumentSelection): ViewElement | null;
23
+ /**
24
+ * Checks if a given view element is a media widget.
25
+ */
26
+ export declare function isMediaWidget(viewElement: ViewElement): boolean;
27
+ /**
28
+ * Creates a view element representing the media. Either a "semantic" one for the data pipeline:
29
+ *
30
+ * ```html
31
+ * <figure class="media">
32
+ * <oembed url="foo"></oembed>
33
+ * </figure>
34
+ * ```
35
+ *
36
+ * or a "non-semantic" (for the editing view pipeline):
37
+ *
38
+ * ```html
39
+ * <figure class="media">
40
+ * <div data-oembed-url="foo">[ non-semantic media preview for "foo" ]</div>
41
+ * </figure>
42
+ * ```
43
+ */
44
+ export declare function createMediaFigureElement(writer: DowncastWriter, registry: MediaRegistry, url: string, options: MediaOptions): ViewContainerElement;
45
+ /**
46
+ * Returns a selected media element in the model, if any.
47
+ */
48
+ export declare function getSelectedMediaModelWidget(selection: Selection | DocumentSelection): Element | null;
49
+ /**
50
+ * Creates a media element and inserts it into the model.
51
+ *
52
+ * **Note**: This method will use {@link module:engine/model/model~Model#insertContent `model.insertContent()`} logic of inserting content
53
+ * if no `insertPosition` is passed.
54
+ *
55
+ * @param url An URL of an embeddable media.
56
+ * @param findOptimalPosition If true it will try to find optimal position to insert media without breaking content
57
+ * in which a selection is.
58
+ */
59
+ export declare function insertMedia(model: Model, url: string, selectable: Selectable, findOptimalPosition: boolean): void;
60
+ /**
61
+ * Type for commonly grouped function parameters across this package.
62
+ */
63
+ export type MediaOptions = {
64
+ elementName: string;
65
+ renderMediaPreview?: boolean;
66
+ renderForEditingView?: boolean;
67
+ };