@ckeditor/ckeditor5-media-embed 0.0.0-nightly-20241219.0 → 0.0.0-nightly-20241219.1

package/dist/index.js

@@ -15,6 +15,8 @@ import { Undo } from '@ckeditor/ckeditor5-undo/dist/index.js';
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */ /**
+ * @module media-embed/converters
+ */ /**
  * Returns a function that converts the model "url" attribute to the view representation.
  *
  * Depending on the configuration, the view representation can be "semantic" (for the data pipeline):
@@ -157,8 +159,8 @@ import { Undo } from '@ckeditor/ckeditor5-undo/dist/index.js';
  * ```
  */ class MediaEmbedCommand extends Command {
     /**
-     * @inheritDoc
-     */ refresh() {
+	 * @inheritDoc
+	 */ refresh() {
         const model = this.editor.model;
         const selection = model.document.selection;
         const selectedMedia = getSelectedMediaModelWidget(selection);
@@ -166,14 +168,14 @@ import { Undo } from '@ckeditor/ckeditor5-undo/dist/index.js';
         this.isEnabled = isMediaSelected(selection) || isAllowedInParent(selection, model);
     }
     /**
-     * Executes the command, which either:
-     *
-     * * updates the URL of the selected media,
-     * * inserts the new media into the editor and puts the selection around it.
-     *
-     * @fires execute
-     * @param url The URL of the media.
-     */ execute(url) {
+	 * Executes the command, which either:
+	 *
+	 * * updates the URL of the selected media,
+	 * * inserts the new media into the editor and puts the selection around it.
+	 *
+	 * @fires execute
+	 * @param url The URL of the media.
+	 */ execute(url) {
         const model = this.editor.model;
         const selection = model.document.selection;
         const selectedMedia = getSelectedMediaModelWidget(selection);
@@ -215,11 +217,18 @@ const mediaPlaceholderIconViewBox = '0 0 64 42';
  * Mostly used by the {@link module:media-embed/mediaembedediting~MediaEmbedEditing} plugin.
  */ class MediaRegistry {
     /**
-     * Creates an instance of the {@link module:media-embed/mediaregistry~MediaRegistry} class.
-     *
-     * @param locale The localization services instance.
-     * @param config The configuration of the media embed feature.
-     */ constructor(locale, config){
+	 * The {@link module:utils/locale~Locale} instance.
+	 */ locale;
+    /**
+	 * The media provider definitions available for the registry. Usually corresponding with the
+	 * {@link module:media-embed/mediaembedconfig~MediaEmbedConfig media configuration}.
+	 */ providerDefinitions;
+    /**
+	 * Creates an instance of the {@link module:media-embed/mediaregistry~MediaRegistry} class.
+	 *
+	 * @param locale The localization services instance.
+	 * @param config The configuration of the media embed feature.
+	 */ constructor(locale, config){
         const providers = config.providers;
         const extraProviders = config.extraProviders || [];
         const removedProviders = new Set(config.removeProviders);
@@ -227,12 +236,12 @@ const mediaPlaceholderIconViewBox = '0 0 64 42';
             const name = provider.name;
             if (!name) {
                 /**
-                 * One of the providers (or extra providers) specified in the media embed configuration
-                 * has no name and will not be used by the editor. In order to get this media
-                 * provider working, double check your editor configuration.
-                 *
-                 * @error media-embed-no-provider-name
-                 */ logWarning('media-embed-no-provider-name', {
+					 * One of the providers (or extra providers) specified in the media embed configuration
+					 * has no name and will not be used by the editor. In order to get this media
+					 * provider working, double check your editor configuration.
+					 *
+					 * @error media-embed-no-provider-name
+					 */ logWarning('media-embed-no-provider-name', {
                     provider
                 });
                 return false;
@@ -243,29 +252,29 @@ const mediaPlaceholderIconViewBox = '0 0 64 42';
         this.providerDefinitions = providerDefinitions;
     }
     /**
-     * Checks whether the passed URL is representing a certain media type allowed in the editor.
-     *
-     * @param url The URL to be checked
-     */ hasMedia(url) {
+	 * Checks whether the passed URL is representing a certain media type allowed in the editor.
+	 *
+	 * @param url The URL to be checked
+	 */ hasMedia(url) {
         return !!this._getMedia(url);
     }
     /**
-     * For the given media URL string and options, it returns the {@link module:engine/view/element~Element view element}
-     * representing that media.
-     *
-     * **Note:** If no URL is specified, an empty view element is returned.
-     *
-     * @param writer The view writer used to produce a view element.
-     * @param url The URL to be translated into a view element.
-     */ getMediaViewElement(writer, url, options) {
+	 * For the given media URL string and options, it returns the {@link module:engine/view/element~Element view element}
+	 * representing that media.
+	 *
+	 * **Note:** If no URL is specified, an empty view element is returned.
+	 *
+	 * @param writer The view writer used to produce a view element.
+	 * @param url The URL to be translated into a view element.
+	 */ getMediaViewElement(writer, url, options) {
         return this._getMedia(url).getViewElement(writer, options);
     }
     /**
-     * Returns a `Media` instance for the given URL.
-     *
-     * @param url The URL of the media.
-     * @returns The `Media` instance or `null` when there is none.
-     */ _getMedia(url) {
+	 * Returns a `Media` instance for the given URL.
+	 *
+	 * @param url The URL of the media.
+	 * @returns The `Media` instance or `null` when there is none.
+	 */ _getMedia(url) {
         if (!url) {
             return new Media(this.locale);
         }
@@ -283,11 +292,11 @@ const mediaPlaceholderIconViewBox = '0 0 64 42';
         return null;
     }
     /**
-     * Tries to match `url` to `pattern`.
-     *
-     * @param url The URL of the media.
-     * @param pattern The pattern that should accept the media URL.
-     */ _getUrlMatches(url, pattern) {
+	 * Tries to match `url` to `pattern`.
+	 *
+	 * @param url The URL of the media.
+	 * @param pattern The pattern that should accept the media URL.
+	 */ _getUrlMatches(url, pattern) {
         // 1. Try to match without stripping the protocol and "www" subdomain.
         let match = url.match(pattern);
         if (match) {
@@ -313,6 +322,20 @@ const mediaPlaceholderIconViewBox = '0 0 64 42';
  *
  * It can be rendered to the {@link module:engine/view/element~Element view element} and used in the editing or data pipeline.
  */ class Media {
+    /**
+	 * The URL this Media instance represents.
+	 */ url;
+    /**
+	 * Shorthand for {@link module:utils/locale~Locale#t}.
+	 *
+	 * @see module:utils/locale~Locale#t
+	 */ _locale;
+    /**
+	 * The output of the `RegExp.match` which validated the {@link #url} of this media.
+	 */ _match;
+    /**
+	 * The function returning the HTML string preview of this media.
+	 */ _previewRenderer;
     constructor(locale, url, match, previewRenderer){
         this.url = this._getValidUrl(url);
         this._locale = locale;
@@ -320,10 +343,10 @@ const mediaPlaceholderIconViewBox = '0 0 64 42';
         this._previewRenderer = previewRenderer;
     }
     /**
-     * Returns the view element representation of the media.
-     *
-     * @param writer The view writer used to produce a view element.
-     */ getViewElement(writer, options) {
+	 * Returns the view element representation of the media.
+	 *
+	 * @param writer The view writer used to produce a view element.
+	 */ getViewElement(writer, options) {
         const attributes = {};
         let viewElement;
         if (options.renderForEditingView || options.renderMediaPreview && this.url && this._previewRenderer) {
@@ -347,8 +370,8 @@ const mediaPlaceholderIconViewBox = '0 0 64 42';
         return viewElement;
     }
     /**
-     * Returns the HTML string of the media content preview.
-     */ _getPreviewHtml(options) {
+	 * Returns the HTML string of the media content preview.
+	 */ _getPreviewHtml(options) {
         if (this._previewRenderer) {
             return this._previewRenderer(this._match);
         } else {
@@ -361,8 +384,8 @@ const mediaPlaceholderIconViewBox = '0 0 64 42';
         }
     }
     /**
-     * Returns the placeholder HTML when the media has no content preview.
-     */ _getPlaceholderHtml() {
+	 * Returns the placeholder HTML when the media has no content preview.
+	 */ _getPlaceholderHtml() {
         const icon = new IconView();
         const t = this._locale.t;
         icon.content = mediaPlaceholderIcon;
@@ -408,10 +431,10 @@ const mediaPlaceholderIconViewBox = '0 0 64 42';
         return placeholder.outerHTML;
     }
     /**
-     * Returns the full URL to the specified media.
-     *
-     * @param url The URL of the media.
-     */ _getValidUrl(url) {
+	 * Returns the full URL to the specified media.
+	 *
+	 * @param url The URL of the media.
+	 */ _getValidUrl(url) {
         if (!url) {
             return null;
         }
@@ -426,18 +449,21 @@ const mediaPlaceholderIconViewBox = '0 0 64 42';
  * The media embed editing feature.
  */ class MediaEmbedEditing extends Plugin {
     /**
-     * @inheritDoc
-     */ static get pluginName() {
+	 * @inheritDoc
+	 */ static get pluginName() {
         return 'MediaEmbedEditing';
     }
     /**
-     * @inheritDoc
-     */ static get isOfficialPlugin() {
+	 * @inheritDoc
+	 */ static get isOfficialPlugin() {
         return true;
     }
     /**
-     * @inheritDoc
-     */ constructor(editor){
+	 * The media registry managing the media providers in the editor.
+	 */ registry;
+    /**
+	 * @inheritDoc
+	 */ constructor(editor){
         super(editor);
         editor.config.define('mediaEmbed', {
             elementName: 'oembed',
@@ -532,8 +558,8 @@ const mediaPlaceholderIconViewBox = '0 0 64 42';
         this.registry = new MediaRegistry(editor.locale, editor.config.get('mediaEmbed'));
     }
     /**
-     * @inheritDoc
-     */ init() {
+	 * @inheritDoc
+	 */ init() {
         const editor = this.editor;
         const schema = editor.model.schema;
         const t = editor.t;
@@ -649,8 +675,8 @@ const URL_REGEXP = /^(?:http(s)?:\/\/)?[\w-]+\.[\w-.~:/?#[\]@!$&'()*+,;=%]+$/;
  * them shortly after they are injected into the document.
  */ class AutoMediaEmbed extends Plugin {
     /**
-     * @inheritDoc
-     */ static get requires() {
+	 * @inheritDoc
+	 */ static get requires() {
         return [
             Clipboard,
             Delete,
@@ -658,25 +684,33 @@ const URL_REGEXP = /^(?:http(s)?:\/\/)?[\w-]+\.[\w-.~:/?#[\]@!$&'()*+,;=%]+$/;
         ];
     }
     /**
-     * @inheritDoc
-     */ static get pluginName() {
+	 * @inheritDoc
+	 */ static get pluginName() {
         return 'AutoMediaEmbed';
     }
     /**
-     * @inheritDoc
-     */ static get isOfficialPlugin() {
+	 * @inheritDoc
+	 */ static get isOfficialPlugin() {
         return true;
     }
     /**
-     * @inheritDoc
-     */ constructor(editor){
+	 * The paste–to–embed `setTimeout` ID. Stored as a property to allow
+	 * cleaning of the timeout.
+	 */ _timeoutId;
+    /**
+	 * The position where the `<media>` element will be inserted after the timeout,
+	 * determined each time the new content is pasted into the document.
+	 */ _positionToInsert;
+    /**
+	 * @inheritDoc
+	 */ constructor(editor){
         super(editor);
         this._timeoutId = null;
         this._positionToInsert = null;
     }
     /**
-     * @inheritDoc
-     */ init() {
+	 * @inheritDoc
+	 */ init() {
         const editor = this.editor;
         const modelDocument = editor.model.document;
         // We need to listen on `Clipboard#inputTransformation` because we need to save positions of selection.
@@ -710,12 +744,12 @@ const URL_REGEXP = /^(?:http(s)?:\/\/)?[\w-]+\.[\w-.~:/?#[\]@!$&'()*+,;=%]+$/;
         });
     }
     /**
-     * Analyzes the part of the document between provided positions in search for a URL representing media.
-     * When the URL is found, it is automatically converted into media.
-     *
-     * @param leftPosition Left position of the selection.
-     * @param rightPosition Right position of the selection.
-     */ _embedMediaBetweenPositions(leftPosition, rightPosition) {
+	 * Analyzes the part of the document between provided positions in search for a URL representing media.
+	 * When the URL is found, it is automatically converted into media.
+	 *
+	 * @param leftPosition Left position of the selection.
+	 * @param rightPosition Right position of the selection.
+	 */ _embedMediaBetweenPositions(leftPosition, rightPosition) {
         const editor = this.editor;
         const mediaRegistry = editor.plugins.get(MediaEmbedEditing).registry;
         // TODO: Use marker instead of LiveRange & LivePositions.
@@ -775,9 +809,28 @@ const URL_REGEXP = /^(?:http(s)?:\/\/)?[\w-]+\.[\w-.~:/?#[\]@!$&'()*+,;=%]+$/;
  * See {@link module:media-embed/ui/mediaformview~MediaFormView}.
  */ class MediaFormView extends View {
     /**
-     * @param validators Form validators used by {@link #isValid}.
-     * @param locale The localization services instance.
-     */ constructor(validators, locale){
+	 * Tracks information about the DOM focus in the form.
+	 */ focusTracker;
+    /**
+	 * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
+	 */ keystrokes;
+    /**
+	 * The URL input view.
+	 */ urlInputView;
+    /**
+	 * An array of form validators used by {@link #isValid}.
+	 */ _validators;
+    /**
+	 * The default info text for the {@link #urlInputView}.
+	 */ _urlInputViewInfoDefault;
+    /**
+	 * The info text with an additional tip for the {@link #urlInputView},
+	 * displayed when the input has some value.
+	 */ _urlInputViewInfoTip;
+    /**
+	 * @param validators Form validators used by {@link #isValid}.
+	 * @param locale The localization services instance.
+	 */ constructor(validators, locale){
         super(locale);
         this.focusTracker = new FocusTracker();
         this.keystrokes = new KeystrokeHandler();
@@ -800,8 +853,8 @@ const URL_REGEXP = /^(?:http(s)?:\/\/)?[\w-]+\.[\w-.~:/?#[\]@!$&'()*+,;=%]+$/;
         });
     }
     /**
-     * @inheritDoc
-     */ render() {
+	 * @inheritDoc
+	 */ render() {
         super.render();
         submitHandler({
             view: this
@@ -812,31 +865,31 @@ const URL_REGEXP = /^(?:http(s)?:\/\/)?[\w-]+\.[\w-.~:/?#[\]@!$&'()*+,;=%]+$/;
         this.keystrokes.listenTo(this.element);
     }
     /**
-     * @inheritDoc
-     */ destroy() {
+	 * @inheritDoc
+	 */ destroy() {
         super.destroy();
         this.focusTracker.destroy();
         this.keystrokes.destroy();
     }
     /**
-     * Focuses the {@link #urlInputView}.
-     */ focus() {
+	 * Focuses the {@link #urlInputView}.
+	 */ focus() {
         this.urlInputView.focus();
     }
     /**
-     * The native DOM `value` of the {@link #urlInputView} element.
-     *
-     * **Note**: Do not confuse it with the {@link module:ui/inputtext/inputtextview~InputTextView#value}
-     * which works one way only and may not represent the actual state of the component in the DOM.
-     */ get url() {
+	 * The native DOM `value` of the {@link #urlInputView} element.
+	 *
+	 * **Note**: Do not confuse it with the {@link module:ui/inputtext/inputtextview~InputTextView#value}
+	 * which works one way only and may not represent the actual state of the component in the DOM.
+	 */ get url() {
         return this.urlInputView.fieldView.element.value.trim();
     }
     set url(url) {
         this.urlInputView.fieldView.value = url.trim();
     }
     /**
-     * Validates the form and returns `false` when some fields are invalid.
-     */ isValid() {
+	 * Validates the form and returns `false` when some fields are invalid.
+	 */ isValid() {
         this.resetFormStatus();
         for (const validator of this._validators){
             const errorText = validator(this);
@@ -850,19 +903,19 @@ const URL_REGEXP = /^(?:http(s)?:\/\/)?[\w-]+\.[\w-.~:/?#[\]@!$&'()*+,;=%]+$/;
         return true;
     }
     /**
-     * Cleans up the supplementary error and information text of the {@link #urlInputView}
-     * bringing them back to the state when the form has been displayed for the first time.
-     *
-     * See {@link #isValid}.
-     */ resetFormStatus() {
+	 * Cleans up the supplementary error and information text of the {@link #urlInputView}
+	 * bringing them back to the state when the form has been displayed for the first time.
+	 *
+	 * See {@link #isValid}.
+	 */ resetFormStatus() {
         this.urlInputView.errorText = null;
         this.urlInputView.infoText = this._urlInputViewInfoDefault;
     }
     /**
-     * Creates a labeled input view.
-     *
-     * @returns Labeled input view instance.
-     */ _createUrlInput() {
+	 * Creates a labeled input view.
+	 *
+	 * @returns Labeled input view instance.
+	 */ _createUrlInput() {
         const t = this.locale.t;
         const labeledInput = new LabeledFieldView(this.locale, createLabeledInputText);
         const inputField = labeledInput.fieldView;
@@ -886,26 +939,27 @@ var mediaIcon = "<svg viewBox=\"0 0 22 20\" xmlns=\"http://www.w3.org/2000/svg\"
  * The media embed UI plugin.
  */ class MediaEmbedUI extends Plugin {
     /**
-     * @inheritDoc
-     */ static get requires() {
+	 * @inheritDoc
+	 */ static get requires() {
         return [
             MediaEmbedEditing,
             Dialog
         ];
     }
     /**
-     * @inheritDoc
-     */ static get pluginName() {
+	 * @inheritDoc
+	 */ static get pluginName() {
         return 'MediaEmbedUI';
     }
     /**
-     * @inheritDoc
-     */ static get isOfficialPlugin() {
+	 * @inheritDoc
+	 */ static get isOfficialPlugin() {
         return true;
     }
+    _formView;
     /**
-     * @inheritDoc
-     */ init() {
+	 * @inheritDoc
+	 */ init() {
         const editor = this.editor;
         editor.ui.componentFactory.add('mediaEmbed', ()=>{
             const t = this.editor.locale.t;
@@ -922,8 +976,8 @@ var mediaIcon = "<svg viewBox=\"0 0 22 20\" xmlns=\"http://www.w3.org/2000/svg\"
         });
     }
     /**
-     * Creates a button for menu bar that will show media embed dialog.
-     */ _createDialogButton(ButtonClass) {
+	 * Creates a button for menu bar that will show media embed dialog.
+	 */ _createDialogButton(ButtonClass) {
         const editor = this.editor;
         const buttonView = new ButtonClass(editor.locale);
         const command = editor.commands.get('mediaEmbed');
@@ -1011,8 +1065,8 @@ function getFormValidators(t, registry) {
  * * The {@link module:media-embed/automediaembed~AutoMediaEmbed auto-media embed feature}.
  */ class MediaEmbed extends Plugin {
     /**
-     * @inheritDoc
-     */ static get requires() {
+	 * @inheritDoc
+	 */ static get requires() {
         return [
             MediaEmbedEditing,
             MediaEmbedUI,
@@ -1021,13 +1075,13 @@ function getFormValidators(t, registry) {
         ];
     }
     /**
-     * @inheritDoc
-     */ static get pluginName() {
+	 * @inheritDoc
+	 */ static get pluginName() {
         return 'MediaEmbed';
     }
     /**
-     * @inheritDoc
-     */ static get isOfficialPlugin() {
+	 * @inheritDoc
+	 */ static get isOfficialPlugin() {
         return true;
     }
 }
@@ -1039,25 +1093,25 @@ function getFormValidators(t, registry) {
  * {@link module:media-embed/mediaembedconfig~MediaEmbedConfig#toolbar `media.toolbar` configuration option}.
  */ class MediaEmbedToolbar extends Plugin {
     /**
-     * @inheritDoc
-     */ static get requires() {
+	 * @inheritDoc
+	 */ static get requires() {
         return [
             WidgetToolbarRepository
         ];
     }
     /**
-     * @inheritDoc
-     */ static get pluginName() {
+	 * @inheritDoc
+	 */ static get pluginName() {
         return 'MediaEmbedToolbar';
     }
     /**
-     * @inheritDoc
-     */ static get isOfficialPlugin() {
+	 * @inheritDoc
+	 */ static get isOfficialPlugin() {
         return true;
     }
     /**
-     * @inheritDoc
-     */ afterInit() {
+	 * @inheritDoc
+	 */ afterInit() {
         const editor = this.editor;
         const t = editor.t;
         const widgetToolbarRepository = editor.plugins.get(WidgetToolbarRepository);