| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123 |
- /**
- * @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 );
- }
- }
- 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.' );
- }
- }
- ];
- }
|