/
mediaembedui.js
124 lines (105 loc) · 3.43 KB
/
mediaembedui.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
/**
* @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
*/
/**
* @module media-embed/mediaembedui
*/
import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
import { createDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
import MediaFormView from './ui/mediaformview';
import MediaEmbedEditing from './mediaembedediting';
import mediaIcon from '../theme/icons/media.svg';
/**
* The media embed UI plugin.
*
* @extends module:core/plugin~Plugin
*/
export default class MediaEmbedUI extends Plugin {
/**
* @inheritDoc
*/
static get requires() {
return [ MediaEmbedEditing ];
}
/**
* @inheritDoc
*/
static get pluginName() {
return 'MediaEmbedUI';
}
/**
* @inheritDoc
*/
init() {
const editor = this.editor;
const command = editor.commands.get( 'mediaEmbed' );
const registry = editor.plugins.get( MediaEmbedEditing ).registry;
// Setup `imageUpload` button.
editor.ui.componentFactory.add( 'mediaEmbed', locale => {
const dropdown = createDropdown( locale );
const mediaForm = new MediaFormView( getFormValidators( editor.t, registry ), editor.locale );
this._setUpDropdown( dropdown, mediaForm, command, editor );
this._setUpForm( dropdown, mediaForm, command );
return dropdown;
} );
}
_setUpDropdown( dropdown, form, command ) {
const editor = this.editor;
const t = editor.t;
const button = dropdown.buttonView;
dropdown.bind( 'isEnabled' ).to( command );
dropdown.panelView.children.add( form );
button.set( {
label: t( 'Insert media' ),
icon: mediaIcon,
tooltip: true
} );
// Note: Use the low priority to make sure the following listener starts working after the
// default action of the drop-down is executed (i.e. the panel showed up). Otherwise, the
// invisible form/input cannot be focused/selected.
button.on( 'open', () => {
// Make sure that each time the panel shows up, the URL field remains in sync with the value of
// the command. If the user typed in the input, then canceled (`urlInputView#fieldView#value` stays
// unaltered) and re-opened it without changing the value of the media command (e.g. because they
// didn't change the selection), they would see the old value instead of the actual value of the
// command.
form.url = command.value || '';
form.urlInputView.fieldView.select();
form.focus();
}, { priority: 'low' } );
dropdown.on( 'submit', () => {
if ( form.isValid() ) {
editor.execute( 'mediaEmbed', form.url );
closeUI();
}
} );
dropdown.on( 'change:isOpen', () => form.resetFormStatus() );
dropdown.on( 'cancel', () => closeUI() );
function closeUI() {
editor.editing.view.focus();
dropdown.isOpen = false;
}
}
_setUpForm( dropdown, form, command ) {
form.delegate( 'submit', 'cancel' ).to( dropdown );
form.urlInputView.bind( 'value' ).to( command, 'value' );
// Form elements should be read-only when corresponding commands are disabled.
form.urlInputView.bind( 'isReadOnly' ).to( command, 'isEnabled', value => !value );
form.saveButtonView.bind( 'isEnabled' ).to( command );
}
}
function getFormValidators( t, registry ) {
return [
form => {
if ( !form.url.length ) {
return t( 'The URL must not be empty.' );
}
},
form => {
if ( !registry.hasMedia( form.url ) ) {
return t( 'This media URL is not supported.' );
}
}
];
}