mediaembedui.js 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  1. /**
  2. * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  4. */
  5. /**
  6. * @module media-embed/mediaembedui
  7. */
  8. import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
  9. import { createDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
  10. import MediaFormView from './ui/mediaformview';
  11. import MediaEmbedEditing from './mediaembedediting';
  12. import mediaIcon from '../theme/icons/media.svg';
  13. /**
  14. * The media embed UI plugin.
  15. *
  16. * @extends module:core/plugin~Plugin
  17. */
  18. export default class MediaEmbedUI extends Plugin {
  19. /**
  20. * @inheritDoc
  21. */
  22. static get requires() {
  23. return [ MediaEmbedEditing ];
  24. }
  25. /**
  26. * @inheritDoc
  27. */
  28. static get pluginName() {
  29. return 'MediaEmbedUI';
  30. }
  31. /**
  32. * @inheritDoc
  33. */
  34. init() {
  35. const editor = this.editor;
  36. const command = editor.commands.get( 'mediaEmbed' );
  37. const registry = editor.plugins.get( MediaEmbedEditing ).registry;
  38. // Setup `imageUpload` button.
  39. editor.ui.componentFactory.add( 'mediaEmbed', locale => {
  40. const dropdown = createDropdown( locale );
  41. const mediaForm = new MediaFormView( getFormValidators( editor.t, registry ), editor.locale );
  42. this._setUpDropdown( dropdown, mediaForm, command, editor );
  43. this._setUpForm( dropdown, mediaForm, command );
  44. return dropdown;
  45. } );
  46. }
  47. _setUpDropdown( dropdown, form, command ) {
  48. const editor = this.editor;
  49. const t = editor.t;
  50. const button = dropdown.buttonView;
  51. dropdown.bind( 'isEnabled' ).to( command );
  52. dropdown.panelView.children.add( form );
  53. button.set( {
  54. label: t( 'Insert media' ),
  55. icon: mediaIcon,
  56. tooltip: true
  57. } );
  58. // Note: Use the low priority to make sure the following listener starts working after the
  59. // default action of the drop-down is executed (i.e. the panel showed up). Otherwise, the
  60. // invisible form/input cannot be focused/selected.
  61. button.on( 'open', () => {
  62. // Make sure that each time the panel shows up, the URL field remains in sync with the value of
  63. // the command. If the user typed in the input, then canceled (`urlInputView#fieldView#value` stays
  64. // unaltered) and re-opened it without changing the value of the media command (e.g. because they
  65. // didn't change the selection), they would see the old value instead of the actual value of the
  66. // command.
  67. form.url = command.value || '';
  68. form.urlInputView.fieldView.select();
  69. form.focus();
  70. }, { priority: 'low' } );
  71. dropdown.on( 'submit', () => {
  72. if ( form.isValid() ) {
  73. editor.execute( 'mediaEmbed', form.url );
  74. closeUI();
  75. }
  76. } );
  77. dropdown.on( 'change:isOpen', () => form.resetFormStatus() );
  78. dropdown.on( 'cancel', () => closeUI() );
  79. function closeUI() {
  80. editor.editing.view.focus();
  81. dropdown.isOpen = false;
  82. }
  83. }
  84. _setUpForm( dropdown, form, command ) {
  85. form.delegate( 'submit', 'cancel' ).to( dropdown );
  86. form.urlInputView.bind( 'value' ).to( command, 'value' );
  87. // Form elements should be read-only when corresponding commands are disabled.
  88. form.urlInputView.bind( 'isReadOnly' ).to( command, 'isEnabled', value => !value );
  89. }
  90. }
  91. function getFormValidators( t, registry ) {
  92. return [
  93. form => {
  94. if ( !form.url.length ) {
  95. return t( 'The URL must not be empty.' );
  96. }
  97. },
  98. form => {
  99. if ( !registry.hasMedia( form.url ) ) {
  100. return t( 'This media URL is not supported.' );
  101. }
  102. }
  103. ];
  104. }