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

package/src/index.js

@@ -1,18 +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
- */
-export { MediaEmbed } from './mediaembed.js';
-export { MediaEmbedEditing } from './mediaembedediting.js';
-export { MediaEmbedUI } from './mediaembedui.js';
-export { AutoMediaEmbed } from './automediaembed.js';
-export { MediaEmbedToolbar } from './mediaembedtoolbar.js';
-export { MediaEmbedCommand } from './mediaembedcommand.js';
-export { modelToViewUrlAttributeConverter as _modelToViewUrlAttributeMediaConverter } from './converters.js';
-export { MediaFormView as _MediaFormView } from './ui/mediaformview.js';
-export { toMediaWidget as _toMediaWidget, getSelectedMediaViewWidget as _getSelectedMediaViewWidget, isMediaWidget as _isMediaWidget, createMediaFigureElement as _createMediaFigureElement, getSelectedMediaModelWidget as _getSelectedMediaModelWidget, insertMedia as _insertMedia } from './utils.js';
-export { MediaRegistry } from './mediaregistry.js';
-import './augmentation.js';

package/src/mediaembed.js

@@ -1,44 +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/mediaembed
- */
-import { Plugin } from 'ckeditor5/src/core.js';
-import { Widget } from 'ckeditor5/src/widget.js';
-import { MediaEmbedEditing } from './mediaembedediting.js';
-import { AutoMediaEmbed } from './automediaembed.js';
-import { MediaEmbedUI } from './mediaembedui.js';
-import '../theme/mediaembed.css';
-/**
- * The media embed plugin.
- *
- * For a detailed overview, check the {@glink features/media-embed Media Embed feature documentation}.
- *
- * This is a "glue" plugin which loads the following plugins:
- *
- * * The {@link module:media-embed/mediaembedediting~MediaEmbedEditing media embed editing feature},
- * * The {@link module:media-embed/mediaembedui~MediaEmbedUI media embed UI feature} and
- * * The {@link module:media-embed/automediaembed~AutoMediaEmbed auto-media embed feature}.
- */
-export class MediaEmbed extends Plugin {
-    /**
-     * @inheritDoc
-     */
-    static get requires() {
-        return [MediaEmbedEditing, MediaEmbedUI, AutoMediaEmbed, Widget];
-    }
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'MediaEmbed';
-    }
-    /**
-     * @inheritDoc
-     */
-    static get isOfficialPlugin() {
-        return true;
-    }
-}

package/src/mediaembedcommand.js

@@ -1,71 +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 { Command } from 'ckeditor5/src/core.js';
-import { findOptimalInsertionRange } from 'ckeditor5/src/widget.js';
-import { getSelectedMediaModelWidget, insertMedia } from './utils.js';
-/**
- * The insert media command.
- *
- * The command is registered by the {@link module:media-embed/mediaembedediting~MediaEmbedEditing} as `'mediaEmbed'`.
- *
- * To insert media at the current selection, execute the command and specify the URL:
- *
- * ```ts
- * editor.execute( 'mediaEmbed', 'http://url.to.the/media' );
- * ```
- */
-export class MediaEmbedCommand extends Command {
-    /**
-     * @inheritDoc
-     */
-    refresh() {
-        const model = this.editor.model;
-        const selection = model.document.selection;
-        const selectedMedia = getSelectedMediaModelWidget(selection);
-        this.value = selectedMedia ? selectedMedia.getAttribute('url') : undefined;
-        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) {
-        const model = this.editor.model;
-        const selection = model.document.selection;
-        const selectedMedia = getSelectedMediaModelWidget(selection);
-        if (selectedMedia) {
-            model.change(writer => {
-                writer.setAttribute('url', url, selectedMedia);
-            });
-        }
-        else {
-            insertMedia(model, url, selection, true);
-        }
-    }
-}
-/**
- * Checks if the media embed is allowed in the parent.
- */
-function isAllowedInParent(selection, model) {
-    const insertionRange = findOptimalInsertionRange(selection, model);
-    let parent = insertionRange.start.parent;
-    // The model.insertContent() will remove empty parent (unless it is a $root or a limit).
-    if (parent.isEmpty && !model.schema.isLimit(parent)) {
-        parent = parent.parent;
-    }
-    return model.schema.checkChild(parent, 'media');
-}
-/**
- * Checks if the media object is selected.
- */
-function isMediaSelected(selection) {
-    const element = selection.getSelectedElement();
-    return !!element && element.name === 'media';
-}

package/src/mediaembedconfig.js

@@ -1,5 +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
- */
-export {};

package/src/mediaembedediting.js

@@ -1,252 +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/mediaembedediting
- */
-import { Plugin } from 'ckeditor5/src/core.js';
-import { first } from 'ckeditor5/src/utils.js';
-import { modelToViewUrlAttributeConverter } from './converters.js';
-import { MediaEmbedCommand } from './mediaembedcommand.js';
-import { MediaRegistry } from './mediaregistry.js';
-import { toMediaWidget, createMediaFigureElement } from './utils.js';
-import '../theme/mediaembedediting.css';
-/**
- * The media embed editing feature.
- */
-export class MediaEmbedEditing extends Plugin {
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'MediaEmbedEditing';
-    }
-    /**
-     * @inheritDoc
-     */
-    static get isOfficialPlugin() {
-        return true;
-    }
-    /**
-     * The media registry managing the media providers in the editor.
-     */
-    registry;
-    /**
-     * @inheritDoc
-     */
-    constructor(editor) {
-        super(editor);
-        editor.config.define('mediaEmbed', {
-            elementName: 'oembed',
-            providers: [
-                {
-                    name: 'dailymotion',
-                    url: [
-                        /^dailymotion\.com\/video\/(\w+)/,
-                        /^dai.ly\/(\w+)/
-                    ],
-                    html: match => {
-                        const id = match[1];
-                        return ('<div style="position: relative; padding-bottom: 100%; height: 0; ">' +
-                            `<iframe src="https://www.dailymotion.com/embed/video/${id}" ` +
-                            'style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" ' +
-                            'frameborder="0" width="480" height="270" allowfullscreen allow="autoplay">' +
-                            '</iframe>' +
-                            '</div>');
-                    }
-                },
-                {
-                    name: 'spotify',
-                    url: [
-                        /^open\.spotify\.com\/(artist\/\w+)/,
-                        /^open\.spotify\.com\/(album\/\w+)/,
-                        /^open\.spotify\.com\/(track\/\w+)/
-                    ],
-                    html: match => {
-                        const id = match[1];
-                        return ('<div style="position: relative; padding-bottom: 100%; height: 0; padding-bottom: 126%;">' +
-                            `<iframe src="https://open.spotify.com/embed/${id}" ` +
-                            'style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" ' +
-                            'frameborder="0" allowtransparency="true" allow="encrypted-media">' +
-                            '</iframe>' +
-                            '</div>');
-                    }
-                },
-                {
-                    name: 'youtube',
-                    url: [
-                        /^(?:m\.)?youtube\.com\/watch\?v=([\w-]+)(?:&t=(\d+))?/,
-                        /^(?:m\.)?youtube\.com\/shorts\/([\w-]+)(?:\?t=(\d+))?/,
-                        /^(?:m\.)?youtube\.com\/v\/([\w-]+)(?:\?t=(\d+))?/,
-                        /^youtube\.com\/embed\/([\w-]+)(?:\?start=(\d+))?/,
-                        /^youtu\.be\/([\w-]+)(?:\?t=(\d+))?/
-                    ],
-                    html: match => {
-                        const id = match[1];
-                        const time = match[2];
-                        return ('<div style="position: relative; padding-bottom: 100%; height: 0; padding-bottom: 56.2493%;">' +
-                            `<iframe src="https://www.youtube.com/embed/${id}${time ? `?start=${time}` : ''}" ` +
-                            'style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" ' +
-                            'frameborder="0" allow="autoplay; encrypted-media" referrerpolicy="strict-origin-when-cross-origin" ' +
-                            'allowfullscreen>' +
-                            '</iframe>' +
-                            '</div>');
-                    }
-                },
-                {
-                    name: 'vimeo',
-                    url: [
-                        /^vimeo\.com\/(\d+)/,
-                        /^vimeo\.com\/[^/]+\/[^/]+\/video\/(\d+)/,
-                        /^vimeo\.com\/album\/[^/]+\/video\/(\d+)/,
-                        /^vimeo\.com\/channels\/[^/]+\/(\d+)/,
-                        /^vimeo\.com\/groups\/[^/]+\/videos\/(\d+)/,
-                        /^vimeo\.com\/ondemand\/[^/]+\/(\d+)/,
-                        /^player\.vimeo\.com\/video\/(\d+)/
-                    ],
-                    html: match => {
-                        const id = match[1];
-                        return ('<div style="position: relative; padding-bottom: 100%; height: 0; padding-bottom: 56.2493%;">' +
-                            `<iframe src="https://player.vimeo.com/video/${id}" ` +
-                            'style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" ' +
-                            'frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>' +
-                            '</iframe>' +
-                            '</div>');
-                    }
-                },
-                {
-                    name: 'instagram',
-                    url: [
-                        /^instagram\.com\/p\/(\w+)/,
-                        /^instagram\.com\/reel\/(\w+)/
-                    ]
-                },
-                {
-                    name: 'twitter',
-                    url: [
-                        /^twitter\.com/,
-                        /^x\.com/
-                    ]
-                },
-                {
-                    name: 'googleMaps',
-                    url: [
-                        /^google\.com\/maps/,
-                        /^goo\.gl\/maps/,
-                        /^maps\.google\.com/,
-                        /^maps\.app\.goo\.gl/
-                    ]
-                },
-                {
-                    name: 'flickr',
-                    url: /^flickr\.com/
-                },
-                {
-                    name: 'facebook',
-                    url: /^facebook\.com/
-                }
-            ]
-        });
-        this.registry = new MediaRegistry(editor.locale, editor.config.get('mediaEmbed'));
-    }
-    /**
-     * @inheritDoc
-     */
-    init() {
-        const editor = this.editor;
-        const schema = editor.model.schema;
-        const t = editor.t;
-        const conversion = editor.conversion;
-        const renderMediaPreview = editor.config.get('mediaEmbed.previewsInData');
-        const elementName = editor.config.get('mediaEmbed.elementName');
-        const registry = this.registry;
-        editor.commands.add('mediaEmbed', new MediaEmbedCommand(editor));
-        // Configure the schema.
-        schema.register('media', {
-            inheritAllFrom: '$blockObject',
-            allowAttributes: ['url']
-        });
-        // Model -> Data
-        conversion.for('dataDowncast').elementToStructure({
-            model: 'media',
-            view: (modelElement, { writer }) => {
-                const url = modelElement.getAttribute('url');
-                return createMediaFigureElement(writer, registry, url, {
-                    elementName,
-                    renderMediaPreview: !!url && renderMediaPreview
-                });
-            }
-        });
-        // Model -> Data (url -> data-oembed-url)
-        conversion.for('dataDowncast').add(modelToViewUrlAttributeConverter(registry, {
-            elementName,
-            renderMediaPreview
-        }));
-        // Model -> View (element)
-        conversion.for('editingDowncast').elementToStructure({
-            model: 'media',
-            view: (modelElement, { writer }) => {
-                const url = modelElement.getAttribute('url');
-                const figure = createMediaFigureElement(writer, registry, url, {
-                    elementName,
-                    renderForEditingView: true
-                });
-                return toMediaWidget(figure, writer, t('media widget'));
-            }
-        });
-        // Model -> View (url -> data-oembed-url)
-        conversion.for('editingDowncast').add(modelToViewUrlAttributeConverter(registry, {
-            elementName,
-            renderForEditingView: true
-        }));
-        // View -> Model (data-oembed-url -> url)
-        conversion.for('upcast')
-            // Upcast semantic media.
-            .elementToElement({
-            view: element => ['oembed', elementName].includes(element.name) && element.getAttribute('url') ?
-                { name: true } :
-                null,
-            model: (viewMedia, { writer }) => {
-                const url = viewMedia.getAttribute('url');
-                if (registry.hasMedia(url)) {
-                    return writer.createElement('media', { url });
-                }
-                return null;
-            }
-        })
-            // Upcast non-semantic media.
-            .elementToElement({
-            view: {
-                name: 'div',
-                attributes: {
-                    'data-oembed-url': true
-                }
-            },
-            model: (viewMedia, { writer }) => {
-                const url = viewMedia.getAttribute('data-oembed-url');
-                if (registry.hasMedia(url)) {
-                    return writer.createElement('media', { url });
-                }
-                return null;
-            }
-        })
-            // Consume `<figure class="media">` elements, that were left after upcast.
-            .add(dispatcher => {
-            const converter = (evt, data, conversionApi) => {
-                if (!conversionApi.consumable.consume(data.viewItem, { name: true, classes: 'media' })) {
-                    return;
-                }
-                const { modelRange, modelCursor } = conversionApi.convertChildren(data.viewItem, data.modelCursor);
-                data.modelRange = modelRange;
-                data.modelCursor = modelCursor;
-                const modelElement = first(modelRange.getItems());
-                if (!modelElement) {
-                    // Revert consumed figure so other features can convert it.
-                    conversionApi.consumable.revert(data.viewItem, { name: true, classes: 'media' });
-                }
-            };
-            dispatcher.on('element:figure', converter);
-        });
-    }
-}

package/src/mediaembedtoolbar.js

@@ -1,50 +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/mediaembedtoolbar
- */
-import { Plugin } from 'ckeditor5/src/core.js';
-import { WidgetToolbarRepository } from 'ckeditor5/src/widget.js';
-import { getSelectedMediaViewWidget } from './utils.js';
-import './mediaembedconfig.js';
-/**
- * The media embed toolbar plugin. It creates a toolbar for media embed that shows up when the media element is selected.
- *
- * Instances of toolbar components (e.g. buttons) are created based on the
- * {@link module:media-embed/mediaembedconfig~MediaEmbedConfig#toolbar `media.toolbar` configuration option}.
- */
-export class MediaEmbedToolbar extends Plugin {
-    /**
-     * @inheritDoc
-     */
-    static get requires() {
-        return [WidgetToolbarRepository];
-    }
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'MediaEmbedToolbar';
-    }
-    /**
-     * @inheritDoc
-     */
-    static get isOfficialPlugin() {
-        return true;
-    }
-    /**
-     * @inheritDoc
-     */
-    afterInit() {
-        const editor = this.editor;
-        const t = editor.t;
-        const widgetToolbarRepository = editor.plugins.get(WidgetToolbarRepository);
-        widgetToolbarRepository.register('mediaEmbed', {
-            ariaLabel: t('Media toolbar'),
-            items: editor.config.get('mediaEmbed.toolbar') || [],
-            getRelatedElement: getSelectedMediaViewWidget
-        });
-    }
-}

package/src/mediaembedui.js

@@ -1,134 +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/mediaembedui
- */
-import { Plugin } from 'ckeditor5/src/core.js';
-import { IconMedia } from 'ckeditor5/src/icons.js';
-import { ButtonView, CssTransitionDisablerMixin, MenuBarMenuListItemButtonView, Dialog } from 'ckeditor5/src/ui.js';
-import { MediaFormView } from './ui/mediaformview.js';
-import { MediaEmbedEditing } from './mediaembedediting.js';
-/**
- * The media embed UI plugin.
- */
-export class MediaEmbedUI extends Plugin {
-    /**
-     * @inheritDoc
-     */
-    static get requires() {
-        return [MediaEmbedEditing, Dialog];
-    }
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'MediaEmbedUI';
-    }
-    /**
-     * @inheritDoc
-     */
-    static get isOfficialPlugin() {
-        return true;
-    }
-    _formView;
-    /**
-     * @inheritDoc
-     */
-    init() {
-        const editor = this.editor;
-        editor.ui.componentFactory.add('mediaEmbed', () => {
-            const t = this.editor.locale.t;
-            const button = this._createDialogButton(ButtonView);
-            button.tooltip = true;
-            button.label = t('Insert media');
-            return button;
-        });
-        editor.ui.componentFactory.add('menuBar:mediaEmbed', () => {
-            const t = this.editor.locale.t;
-            const button = this._createDialogButton(MenuBarMenuListItemButtonView);
-            button.label = t('Media');
-            return button;
-        });
-    }
-    /**
-     * 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');
-        const dialogPlugin = this.editor.plugins.get('Dialog');
-        buttonView.icon = IconMedia;
-        buttonView.bind('isEnabled').to(command, 'isEnabled');
-        buttonView.on('execute', () => {
-            if (dialogPlugin.id === 'mediaEmbed') {
-                dialogPlugin.hide();
-            }
-            else {
-                this._showDialog();
-            }
-        });
-        return buttonView;
-    }
-    _showDialog() {
-        const editor = this.editor;
-        const dialog = editor.plugins.get('Dialog');
-        const command = editor.commands.get('mediaEmbed');
-        const t = editor.locale.t;
-        const isMediaSelected = command.value !== undefined;
-        if (!this._formView) {
-            const registry = editor.plugins.get(MediaEmbedEditing).registry;
-            this._formView = new (CssTransitionDisablerMixin(MediaFormView))(getFormValidators(editor.t, registry), editor.locale);
-            this._formView.on('submit', () => this._handleSubmitForm());
-        }
-        dialog.show({
-            id: 'mediaEmbed',
-            title: t('Media embed'),
-            content: this._formView,
-            isModal: true,
-            onShow: () => {
-                this._formView.url = command.value || '';
-                this._formView.resetFormStatus();
-                this._formView.urlInputView.fieldView.select();
-            },
-            actionButtons: [
-                {
-                    label: t('Cancel'),
-                    withText: true,
-                    onExecute: () => dialog.hide()
-                },
-                {
-                    label: isMediaSelected ? t('Save') : t('Insert'),
-                    class: 'ck-button-action',
-                    withText: true,
-                    onExecute: () => this._handleSubmitForm()
-                }
-            ]
-        });
-    }
-    _handleSubmitForm() {
-        const editor = this.editor;
-        const dialog = editor.plugins.get('Dialog');
-        if (this._formView.isValid()) {
-            editor.execute('mediaEmbed', this._formView.url);
-            dialog.hide();
-            editor.editing.view.focus();
-        }
-    }
-}
-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.');
-            }
-        }
-    ];
-}