@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.
- package/build/media-embed.js +1 -1
- package/package.json +27 -22
- package/src/automediaembed.d.ts +53 -0
- package/src/automediaembed.js +109 -160
- package/src/converters.d.ts +38 -0
- package/src/converters.js +33 -40
- package/src/index.d.ts +12 -0
- package/src/index.js +0 -2
- package/src/mediaembed.d.ts +35 -0
- package/src/mediaembed.js +12 -266
- package/src/mediaembedcommand.d.ts +41 -0
- package/src/mediaembedcommand.js +52 -68
- package/src/mediaembedconfig.d.ts +288 -0
- package/src/mediaembedconfig.js +5 -0
- package/src/mediaembedediting.d.ts +36 -0
- package/src/mediaembedediting.js +212 -261
- package/src/mediaembedtoolbar.d.ts +34 -0
- package/src/mediaembedtoolbar.js +26 -43
- package/src/mediaembedui.d.ts +31 -0
- package/src/mediaembedui.js +82 -110
- package/src/mediaregistry.d.ts +66 -0
- package/src/mediaregistry.js +208 -311
- package/src/ui/mediaformview.d.ts +115 -0
- package/src/ui/mediaformview.js +180 -331
- package/src/utils.d.ts +67 -0
- package/src/utils.js +44 -81
package/src/mediaembedui.js
CHANGED
@@ -2,126 +2,98 @@
|
|
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/mediaembedui
|
8
7
|
*/
|
9
|
-
|
10
8
|
import { Plugin } from 'ckeditor5/src/core';
|
11
|
-
import { createDropdown } from 'ckeditor5/src/ui';
|
12
|
-
|
9
|
+
import { createDropdown, CssTransitionDisablerMixin } from 'ckeditor5/src/ui';
|
13
10
|
import MediaFormView from './ui/mediaformview';
|
14
11
|
import MediaEmbedEditing from './mediaembedediting';
|
15
12
|
import mediaIcon from '../theme/icons/media.svg';
|
16
|
-
|
17
13
|
/**
|
18
14
|
* The media embed UI plugin.
|
19
|
-
*
|
20
|
-
* @extends module:core/plugin~Plugin
|
21
15
|
*/
|
22
16
|
export default class MediaEmbedUI extends Plugin {
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
dropdown.on( 'change:isOpen', () => form.resetFormStatus() );
|
93
|
-
dropdown.on( 'cancel', () => {
|
94
|
-
editor.editing.view.focus();
|
95
|
-
} );
|
96
|
-
|
97
|
-
form.delegate( 'submit', 'cancel' ).to( dropdown );
|
98
|
-
form.urlInputView.bind( 'value' ).to( command, 'value' );
|
99
|
-
|
100
|
-
// Form elements should be read-only when corresponding commands are disabled.
|
101
|
-
form.urlInputView.bind( 'isReadOnly' ).to( command, 'isEnabled', value => !value );
|
102
|
-
} );
|
103
|
-
|
104
|
-
dropdown.bind( 'isEnabled' ).to( command );
|
105
|
-
|
106
|
-
button.set( {
|
107
|
-
label: t( 'Insert media' ),
|
108
|
-
icon: mediaIcon,
|
109
|
-
tooltip: true
|
110
|
-
} );
|
111
|
-
}
|
17
|
+
/**
|
18
|
+
* @inheritDoc
|
19
|
+
*/
|
20
|
+
static get requires() {
|
21
|
+
return [MediaEmbedEditing];
|
22
|
+
}
|
23
|
+
/**
|
24
|
+
* @inheritDoc
|
25
|
+
*/
|
26
|
+
static get pluginName() {
|
27
|
+
return 'MediaEmbedUI';
|
28
|
+
}
|
29
|
+
/**
|
30
|
+
* @inheritDoc
|
31
|
+
*/
|
32
|
+
init() {
|
33
|
+
const editor = this.editor;
|
34
|
+
const command = editor.commands.get('mediaEmbed');
|
35
|
+
editor.ui.componentFactory.add('mediaEmbed', locale => {
|
36
|
+
const dropdown = createDropdown(locale);
|
37
|
+
this._setUpDropdown(dropdown, command);
|
38
|
+
return dropdown;
|
39
|
+
});
|
40
|
+
}
|
41
|
+
_setUpDropdown(dropdown, command) {
|
42
|
+
const editor = this.editor;
|
43
|
+
const t = editor.t;
|
44
|
+
const button = dropdown.buttonView;
|
45
|
+
const registry = editor.plugins.get(MediaEmbedEditing).registry;
|
46
|
+
dropdown.once('change:isOpen', () => {
|
47
|
+
const form = new (CssTransitionDisablerMixin(MediaFormView))(getFormValidators(editor.t, registry), editor.locale);
|
48
|
+
dropdown.panelView.children.add(form);
|
49
|
+
// Note: Use the low priority to make sure the following listener starts working after the
|
50
|
+
// default action of the drop-down is executed (i.e. the panel showed up). Otherwise, the
|
51
|
+
// invisible form/input cannot be focused/selected.
|
52
|
+
button.on('open', () => {
|
53
|
+
form.disableCssTransitions();
|
54
|
+
// Make sure that each time the panel shows up, the URL field remains in sync with the value of
|
55
|
+
// the command. If the user typed in the input, then canceled (`urlInputView#fieldView#value` stays
|
56
|
+
// unaltered) and re-opened it without changing the value of the media command (e.g. because they
|
57
|
+
// didn't change the selection), they would see the old value instead of the actual value of the
|
58
|
+
// command.
|
59
|
+
form.url = command.value || '';
|
60
|
+
form.urlInputView.fieldView.select();
|
61
|
+
form.enableCssTransitions();
|
62
|
+
}, { priority: 'low' });
|
63
|
+
dropdown.on('submit', () => {
|
64
|
+
if (form.isValid()) {
|
65
|
+
editor.execute('mediaEmbed', form.url);
|
66
|
+
editor.editing.view.focus();
|
67
|
+
}
|
68
|
+
});
|
69
|
+
dropdown.on('change:isOpen', () => form.resetFormStatus());
|
70
|
+
dropdown.on('cancel', () => {
|
71
|
+
editor.editing.view.focus();
|
72
|
+
});
|
73
|
+
form.delegate('submit', 'cancel').to(dropdown);
|
74
|
+
form.urlInputView.fieldView.bind('value').to(command, 'value');
|
75
|
+
// Form elements should be read-only when corresponding commands are disabled.
|
76
|
+
form.urlInputView.bind('isEnabled').to(command, 'isEnabled');
|
77
|
+
});
|
78
|
+
dropdown.bind('isEnabled').to(command);
|
79
|
+
button.set({
|
80
|
+
label: t('Insert media'),
|
81
|
+
icon: mediaIcon,
|
82
|
+
tooltip: true
|
83
|
+
});
|
84
|
+
}
|
112
85
|
}
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
];
|
86
|
+
function getFormValidators(t, registry) {
|
87
|
+
return [
|
88
|
+
form => {
|
89
|
+
if (!form.url.length) {
|
90
|
+
return t('The URL must not be empty.');
|
91
|
+
}
|
92
|
+
},
|
93
|
+
form => {
|
94
|
+
if (!registry.hasMedia(form.url)) {
|
95
|
+
return t('This media URL is not supported.');
|
96
|
+
}
|
97
|
+
}
|
98
|
+
];
|
127
99
|
}
|
@@ -0,0 +1,66 @@
|
|
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/mediaregistry
|
7
|
+
*/
|
8
|
+
import type { DowncastWriter, ViewElement } from 'ckeditor5/src/engine';
|
9
|
+
import { type Locale } from 'ckeditor5/src/utils';
|
10
|
+
import type { MediaEmbedConfig, MediaEmbedProvider } from './mediaembedconfig';
|
11
|
+
import type { MediaOptions } from './utils';
|
12
|
+
/**
|
13
|
+
* A bridge between the raw media content provider definitions and the editor view content.
|
14
|
+
*
|
15
|
+
* It helps translating media URLs to corresponding {@link module:engine/view/element~Element view elements}.
|
16
|
+
*
|
17
|
+
* Mostly used by the {@link module:media-embed/mediaembedediting~MediaEmbedEditing} plugin.
|
18
|
+
*/
|
19
|
+
export default class MediaRegistry {
|
20
|
+
/**
|
21
|
+
* The {@link module:utils/locale~Locale} instance.
|
22
|
+
*/
|
23
|
+
locale: Locale;
|
24
|
+
/**
|
25
|
+
* The media provider definitions available for the registry. Usually corresponding with the
|
26
|
+
* {@link module:media-embed/mediaembed~MediaEmbedConfig media configuration}.
|
27
|
+
*/
|
28
|
+
providerDefinitions: Array<MediaEmbedProvider>;
|
29
|
+
/**
|
30
|
+
* Creates an instance of the {@link module:media-embed/mediaregistry~MediaRegistry} class.
|
31
|
+
*
|
32
|
+
* @param locale The localization services instance.
|
33
|
+
* @param config The configuration of the media embed feature.
|
34
|
+
*/
|
35
|
+
constructor(locale: Locale, config: MediaEmbedConfig);
|
36
|
+
/**
|
37
|
+
* Checks whether the passed URL is representing a certain media type allowed in the editor.
|
38
|
+
*
|
39
|
+
* @param url The URL to be checked
|
40
|
+
*/
|
41
|
+
hasMedia(url: string): boolean;
|
42
|
+
/**
|
43
|
+
* For the given media URL string and options, it returns the {@link module:engine/view/element~Element view element}
|
44
|
+
* representing that media.
|
45
|
+
*
|
46
|
+
* **Note:** If no URL is specified, an empty view element is returned.
|
47
|
+
*
|
48
|
+
* @param writer The view writer used to produce a view element.
|
49
|
+
* @param url The URL to be translated into a view element.
|
50
|
+
*/
|
51
|
+
getMediaViewElement(writer: DowncastWriter, url: string, options: MediaOptions): ViewElement;
|
52
|
+
/**
|
53
|
+
* Returns a `Media` instance for the given URL.
|
54
|
+
*
|
55
|
+
* @param url The URL of the media.
|
56
|
+
* @returns The `Media` instance or `null` when there is none.
|
57
|
+
*/
|
58
|
+
private _getMedia;
|
59
|
+
/**
|
60
|
+
* Tries to match `url` to `pattern`.
|
61
|
+
*
|
62
|
+
* @param url The URL of the media.
|
63
|
+
* @param pattern The pattern that should accept the media URL.
|
64
|
+
*/
|
65
|
+
private _getUrlMatches;
|
66
|
+
}
|