@ckeditor/ckeditor5-media-embed 47.6.1 → 48.0.0-alpha.1

package/src/mediaregistry.js

@@ -1,262 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, 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/mediaregistry
- */
-import { IconView, Template } from 'ckeditor5/src/ui.js';
-import { IconMediaPlaceholder } from 'ckeditor5/src/icons.js';
-import { logWarning, toArray } from 'ckeditor5/src/utils.js';
-const mediaPlaceholderIconViewBox = '0 0 64 42';
-/**
- * A bridge between the raw media content provider definitions and the editor view content.
- *
- * It helps translating media URLs to corresponding {@link module:engine/view/element~ViewElement view elements}.
- *
- * Mostly used by the {@link module:media-embed/mediaembedediting~MediaEmbedEditing} plugin.
- */
-export class MediaRegistry {
-    /**
-     * 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);
-        const providerDefinitions = providers
-            .concat(extraProviders)
-            .filter(provider => {
-            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', { provider });
-                return false;
-            }
-            return !removedProviders.has(name);
-        });
-        this.locale = locale;
-        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) {
-        return !!this._getMedia(url);
-    }
-    /**
-     * For the given media URL string and options, it returns the {@link module:engine/view/element~ViewElement 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) {
-        if (!url) {
-            return new Media(this.locale);
-        }
-        url = url.trim();
-        for (const definition of this.providerDefinitions) {
-            const previewRenderer = definition.html;
-            const pattern = toArray(definition.url);
-            for (const subPattern of pattern) {
-                const match = this._getUrlMatches(url, subPattern);
-                if (match) {
-                    return new Media(this.locale, url, match, previewRenderer);
-                }
-            }
-        }
-        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) {
-        // 1. Try to match without stripping the protocol and "www" subdomain.
-        let match = url.match(pattern);
-        if (match) {
-            return match;
-        }
-        // 2. Try to match after stripping the protocol.
-        let rawUrl = url.replace(/^https?:\/\//, '');
-        match = rawUrl.match(pattern);
-        if (match) {
-            return match;
-        }
-        // 3. Try to match after stripping the "www" subdomain.
-        rawUrl = rawUrl.replace(/^www\./, '');
-        match = rawUrl.match(pattern);
-        if (match) {
-            return match;
-        }
-        return null;
-    }
-}
-/**
- * Represents media defined by the provider configuration.
- *
- * It can be rendered to the {@link module:engine/view/element~ViewElement 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;
-        this._match = match;
-        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) {
-        const attributes = {};
-        let viewElement;
-        if (options.renderForEditingView || (options.renderMediaPreview && this.url && this._previewRenderer)) {
-            if (this.url) {
-                attributes['data-oembed-url'] = this.url;
-            }
-            if (options.renderForEditingView) {
-                attributes.class = 'ck-media__wrapper';
-            }
-            const mediaHtml = this._getPreviewHtml(options);
-            viewElement = writer.createRawElement('div', attributes, (domElement, domConverter) => {
-                domConverter.setContentOf(domElement, mediaHtml);
-            });
-        }
-        else {
-            if (this.url) {
-                attributes.url = this.url;
-            }
-            viewElement = writer.createEmptyElement(options.elementName, attributes);
-        }
-        writer.setCustomProperty('media-content', true, viewElement);
-        return viewElement;
-    }
-    /**
-     * Returns the HTML string of the media content preview.
-     */
-    _getPreviewHtml(options) {
-        if (this._previewRenderer) {
-            return this._previewRenderer(this._match);
-        }
-        else {
-            // The placeholder only makes sense for editing view and media which have URLs.
-            // Placeholder is never displayed in data and URL-less media have no content.
-            if (this.url && options.renderForEditingView) {
-                return this._getPlaceholderHtml();
-            }
-            return '';
-        }
-    }
-    /**
-     * Returns the placeholder HTML when the media has no content preview.
-     */
-    _getPlaceholderHtml() {
-        const icon = new IconView();
-        const t = this._locale.t;
-        icon.content = IconMediaPlaceholder;
-        icon.viewBox = mediaPlaceholderIconViewBox;
-        const placeholder = new Template({
-            tag: 'div',
-            attributes: {
-                class: 'ck ck-reset_all ck-media__placeholder'
-            },
-            children: [
-                {
-                    tag: 'div',
-                    attributes: {
-                        class: 'ck-media__placeholder__icon'
-                    },
-                    children: [icon]
-                },
-                {
-                    tag: 'a',
-                    attributes: {
-                        class: 'ck-media__placeholder__url',
-                        target: '_blank',
-                        rel: 'noopener noreferrer',
-                        href: this.url,
-                        'data-cke-tooltip-text': t('Open media in new tab')
-                    },
-                    children: [
-                        {
-                            tag: 'span',
-                            attributes: {
-                                class: 'ck-media__placeholder__url__text'
-                            },
-                            children: [this.url]
-                        }
-                    ]
-                }
-            ]
-        }).render();
-        return placeholder.outerHTML;
-    }
-    /**
-     * Returns the full URL to the specified media.
-     *
-     * @param url The URL of the media.
-     */
-    _getValidUrl(url) {
-        if (!url) {
-            return null;
-        }
-        if (url.match(/^https?/)) {
-            return url;
-        }
-        return 'https://' + url;
-    }
-}

package/src/ui/mediaformview.js

@@ -1,157 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, 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/ui/mediaformview
- */
-import { LabeledFieldView, View, createLabeledInputText, submitHandler } from 'ckeditor5/src/ui.js';
-import { FocusTracker, KeystrokeHandler } from 'ckeditor5/src/utils.js';
-// See: #8833.
-// eslint-disable-next-line ckeditor5-rules/ckeditor-imports
-import '@ckeditor/ckeditor5-ui/theme/components/responsive-form/responsiveform.css';
-import '../../theme/mediaform.css';
-/**
- * The media form view controller class.
- *
- * See {@link module:media-embed/ui/mediaformview~MediaFormView}.
- */
-export class MediaFormView extends View {
-    /**
-     * 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();
-        this.set('mediaURLInputValue', '');
-        this.urlInputView = this._createUrlInput();
-        this._validators = validators;
-        this.setTemplate({
-            tag: 'form',
-            attributes: {
-                class: [
-                    'ck',
-                    'ck-media-form',
-                    'ck-responsive-form'
-                ],
-                tabindex: '-1'
-            },
-            children: [
-                this.urlInputView
-            ]
-        });
-    }
-    /**
-     * @inheritDoc
-     */
-    render() {
-        super.render();
-        submitHandler({
-            view: this
-        });
-        // Register the view in the focus tracker.
-        this.focusTracker.add(this.urlInputView.element);
-        // Start listening for the keystrokes coming from #element.
-        this.keystrokes.listenTo(this.element);
-    }
-    /**
-     * @inheritDoc
-     */
-    destroy() {
-        super.destroy();
-        this.focusTracker.destroy();
-        this.keystrokes.destroy();
-    }
-    /**
-     * 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() {
-        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() {
-        this.resetFormStatus();
-        for (const validator of this._validators) {
-            const errorText = validator(this);
-            // One error per field is enough.
-            if (errorText) {
-                // Apply updated error.
-                this.urlInputView.errorText = errorText;
-                return false;
-            }
-        }
-        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() {
-        this.urlInputView.errorText = null;
-        this.urlInputView.infoText = this._urlInputViewInfoDefault;
-    }
-    /**
-     * 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;
-        this._urlInputViewInfoDefault = t('Paste the media URL in the input.');
-        this._urlInputViewInfoTip = t('Tip: Paste the URL into the content to embed faster.');
-        labeledInput.label = t('Media URL');
-        labeledInput.infoText = this._urlInputViewInfoDefault;
-        inputField.inputMode = 'url';
-        inputField.on('input', () => {
-            // Display the tip text only when there is some value. Otherwise fall back to the default info text.
-            labeledInput.infoText = inputField.element.value ? this._urlInputViewInfoTip : this._urlInputViewInfoDefault;
-            this.mediaURLInputValue = inputField.element.value.trim();
-        });
-        return labeledInput;
-    }
-}

package/src/utils.js

@@ -1,96 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-import { isWidget, toWidget } from 'ckeditor5/src/widget.js';
-/**
- * Converts a given {@link module:engine/view/element~ViewElement} to a media embed widget:
- * * Adds a {@link module:engine/view/element~ViewElement#_setCustomProperty custom property}
- * allowing to recognize the media widget element.
- * * Calls the {@link module:widget/utils~toWidget} function with the proper element's label creator.
- *
- * @param writer An instance of the view writer.
- * @param label The element's label.
- * @internal
- */
-export function toMediaWidget(viewElement, writer, label) {
-    writer.setCustomProperty('media', true, viewElement);
-    return toWidget(viewElement, writer, { label });
-}
-/**
- * Returns a media widget editing view element if one is selected.
- *
- * @internal
- */
-export function getSelectedMediaViewWidget(selection) {
-    const viewElement = selection.getSelectedElement();
-    if (viewElement && isMediaWidget(viewElement)) {
-        return viewElement;
-    }
-    return null;
-}
-/**
- * Checks if a given view element is a media widget.
- *
- * @internal
- */
-export function isMediaWidget(viewElement) {
-    return !!viewElement.getCustomProperty('media') && isWidget(viewElement);
-}
-/**
- * Creates a view element representing the media. Either a "semantic" one for the data pipeline:
- *
- * ```html
- * <figure class="media">
- * 	<oembed url="foo"></oembed>
- * </figure>
- * ```
- *
- * or a "non-semantic" (for the editing view pipeline):
- *
- * ```html
- * <figure class="media">
- * 	<div data-oembed-url="foo">[ non-semantic media preview for "foo" ]</div>
- * </figure>
- * ```
- *
- * @internal
- */
-export function createMediaFigureElement(writer, registry, url, options) {
-    return writer.createContainerElement('figure', { class: 'media' }, [
-        registry.getMediaViewElement(writer, url, options),
-        writer.createSlot()
-    ]);
-}
-/**
- * Returns a selected media element in the model, if any.
- *
- * @internal
- */
-export function getSelectedMediaModelWidget(selection) {
-    const selectedElement = selection.getSelectedElement();
-    if (selectedElement && selectedElement.is('element', 'media')) {
-        return selectedElement;
-    }
-    return null;
-}
-/**
- * Creates a media element and inserts it into the model.
- *
- * **Note**: This method will use {@link module:engine/model/model~Model#insertContent `model.insertContent()`} logic of inserting content
- * if no `insertPosition` is passed.
- *
- * @param url An URL of an embeddable media.
- * @param findOptimalPosition If true it will try to find optimal position to insert media without breaking content
- * in which a selection is.
- * @internal
- */
-export function insertMedia(model, url, selectable, findOptimalPosition) {
-    model.change(writer => {
-        const mediaElement = writer.createElement('media', { url });
-        model.insertObject(mediaElement, selectable, null, {
-            setSelection: 'on',
-            findOptimalPosition: findOptimalPosition ? 'auto' : undefined
-        });
-    });
-}

package/theme/mediaembed.css

@@ -1,23 +0,0 @@
-/*
- * Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-
-.ck-content .media {
-	/* Don't allow floated content overlap the media.
-	https://github.com/ckeditor/ckeditor5-media-embed/issues/53 */
-	clear: both;
-
-	/* Make sure there is some space between the content and the media. */
-	/* The first value should be equal to --ck-spacing-large variable if used in the editor context
-	to avoid the content jumping (See https://github.com/ckeditor/ckeditor5/issues/9825). */
-	margin: 0.9em 0;
-
-	/* Make sure media is not overriden with Bootstrap default `flex` value.
-	See: https://github.com/ckeditor/ckeditor5/issues/1373. */
-	display: block;
-
-	/* Give the media some minimal width in the content to prevent them
-	from being "squashed" in tight spaces, e.g. in table cells (#44) */
-	min-width: 15em;
-}

package/theme/mediaembedediting.css

@@ -1,48 +0,0 @@
-/*
- * Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-
-.ck-media__wrapper {
-	& .ck-media__placeholder {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-
-		& .ck-media__placeholder__url {
-			/* Otherwise the URL will overflow when the content is very narrow. */
-			max-width: 100%;
-
-			position: relative;
-
-			& .ck-media__placeholder__url__text {
-				overflow: hidden;
-				display: block;
-			}
-		}
-	}
-
-	&[data-oembed-url*="twitter.com"],
-	&[data-oembed-url*="google.com/maps"],
-	&[data-oembed-url*="goo.gl/maps"],
-	&[data-oembed-url*="maps.google.com"],
-	&[data-oembed-url*="maps.app.goo.gl"],
-	&[data-oembed-url*="facebook.com"],
-	&[data-oembed-url*="instagram.com"] {
-		& .ck-media__placeholder__icon * {
-			display: none;
-		}
-	}
-}
-
-/* Disable all mouse interaction as long as the editor is not read–only.
-   https://github.com/ckeditor/ckeditor5-media-embed/issues/58 */
-.ck-editor__editable:not(.ck-read-only) .ck-media__wrapper > *:not(.ck-media__placeholder) {
-	pointer-events: none;
-}
-
-/* Disable all mouse interaction when the widget is not selected (e.g. to avoid opening links by accident).
-   https://github.com/ckeditor/ckeditor5-media-embed/issues/18 */
-.ck-editor__editable:not(.ck-read-only) .ck-widget:not(.ck-widget_selected) .ck-media__placeholder {
-	pointer-events: none;
-}

package/theme/mediaform.css

@@ -1,39 +0,0 @@
-/*
- * Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-
-@import "@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css";
-
-.ck.ck-media-form {
-	display: flex;
-	align-items: flex-start;
-	flex-direction: row;
-	flex-wrap: nowrap;
-	width: 400px;
-
-	& .ck-labeled-field-view {
-		display: inline-block;
-		width: 100%;
-	}
-
-	& .ck-label {
-		display: none;
-	}
-
-	& .ck-input {
-		width: 100%;
-	}
-
-	@mixin ck-media-phone {
-		flex-wrap: wrap;
-
-		& .ck-labeled-field-view {
-			flex-basis: 100%;
-		}
-
-		& .ck-button {
-			flex-basis: 50%;
-		}
-	}
-}