@ckeditor/ckeditor5-media-embed 38.1.1 → 38.2.0-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-media-embed",
-  "version": "38.1.1",
+  "version": "38.2.0-alpha.1",
   "description": "Media embed feature for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -11,9 +11,10 @@
     "ckeditor5-dll"
   ],
   "main": "src/index.js",
+  "type": "module",
   "dependencies": {
-    "@ckeditor/ckeditor5-ui": "38.1.1",
-    "ckeditor5": "38.1.1"
+    "@ckeditor/ckeditor5-ui": "38.2.0-alpha.1",
+    "ckeditor5": "38.2.0-alpha.1"
   },
   "engines": {
     "node": ">=16.0.0",

package/src/augmentation.d.ts

@@ -1,25 +1,25 @@
-/**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-import type { MediaEmbedConfig, AutoMediaEmbed, MediaEmbed, MediaEmbedEditing, MediaEmbedToolbar, MediaEmbedUI, MediaEmbedCommand } from './index';
-declare module '@ckeditor/ckeditor5-core' {
-    interface EditorConfig {
-        /**
-         * The configuration of the {@link module:media-embed/mediaembed~MediaEmbed} feature.
-         *
-         * Read more in {@link module:media-embed/mediaembedconfig~MediaEmbedConfig}.
-         */
-        mediaEmbed?: MediaEmbedConfig;
-    }
-    interface PluginsMap {
-        [AutoMediaEmbed.pluginName]: AutoMediaEmbed;
-        [MediaEmbed.pluginName]: MediaEmbed;
-        [MediaEmbedEditing.pluginName]: MediaEmbedEditing;
-        [MediaEmbedToolbar.pluginName]: MediaEmbedToolbar;
-        [MediaEmbedUI.pluginName]: MediaEmbedUI;
-    }
-    interface CommandsMap {
-        mediaEmbed: MediaEmbedCommand;
-    }
-}
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+import type { MediaEmbedConfig, AutoMediaEmbed, MediaEmbed, MediaEmbedEditing, MediaEmbedToolbar, MediaEmbedUI, MediaEmbedCommand } from './index.js';
+declare module '@ckeditor/ckeditor5-core' {
+    interface EditorConfig {
+        /**
+         * The configuration of the {@link module:media-embed/mediaembed~MediaEmbed} feature.
+         *
+         * Read more in {@link module:media-embed/mediaembedconfig~MediaEmbedConfig}.
+         */
+        mediaEmbed?: MediaEmbedConfig;
+    }
+    interface PluginsMap {
+        [AutoMediaEmbed.pluginName]: AutoMediaEmbed;
+        [MediaEmbed.pluginName]: MediaEmbed;
+        [MediaEmbedEditing.pluginName]: MediaEmbedEditing;
+        [MediaEmbedToolbar.pluginName]: MediaEmbedToolbar;
+        [MediaEmbedUI.pluginName]: MediaEmbedUI;
+    }
+    interface CommandsMap {
+        mediaEmbed: MediaEmbedCommand;
+    }
+}

package/src/augmentation.js

@@ -1,5 +1,5 @@
-/**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-export {};
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+export {};

package/src/automediaembed.d.ts

@@ -1,51 +1,51 @@
-/**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-/**
- * @module media-embed/automediaembed
- */
-import { type Editor, Plugin } from 'ckeditor5/src/core';
-import { Clipboard } from 'ckeditor5/src/clipboard';
-import { Delete } from 'ckeditor5/src/typing';
-import { Undo } from 'ckeditor5/src/undo';
-/**
- * The auto-media embed plugin. It recognizes media links in the pasted content and embeds
- * them shortly after they are injected into the document.
- */
-export default class AutoMediaEmbed extends Plugin {
-    /**
-     * @inheritDoc
-     */
-    static get requires(): readonly [typeof Clipboard, typeof Delete, typeof Undo];
-    /**
-     * @inheritDoc
-     */
-    static get pluginName(): "AutoMediaEmbed";
-    /**
-     * The paste–to–embed `setTimeout` ID. Stored as a property to allow
-     * cleaning of the timeout.
-     */
-    private _timeoutId;
-    /**
-     * The position where the `<media>` element will be inserted after the timeout,
-     * determined each time the new content is pasted into the document.
-     */
-    private _positionToInsert;
-    /**
-     * @inheritDoc
-     */
-    constructor(editor: Editor);
-    /**
-     * @inheritDoc
-     */
-    init(): void;
-    /**
-     * 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.
-     */
-    private _embedMediaBetweenPositions;
-}
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module media-embed/automediaembed
+ */
+import { type Editor, Plugin } from 'ckeditor5/src/core.js';
+import { Clipboard } from 'ckeditor5/src/clipboard.js';
+import { Delete } from 'ckeditor5/src/typing.js';
+import { Undo } from 'ckeditor5/src/undo.js';
+/**
+ * The auto-media embed plugin. It recognizes media links in the pasted content and embeds
+ * them shortly after they are injected into the document.
+ */
+export default class AutoMediaEmbed extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get requires(): readonly [typeof Clipboard, typeof Delete, typeof Undo];
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "AutoMediaEmbed";
+    /**
+     * The paste–to–embed `setTimeout` ID. Stored as a property to allow
+     * cleaning of the timeout.
+     */
+    private _timeoutId;
+    /**
+     * The position where the `<media>` element will be inserted after the timeout,
+     * determined each time the new content is pasted into the document.
+     */
+    private _positionToInsert;
+    /**
+     * @inheritDoc
+     */
+    constructor(editor: Editor);
+    /**
+     * @inheritDoc
+     */
+    init(): void;
+    /**
+     * 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.
+     */
+    private _embedMediaBetweenPositions;
+}

package/src/automediaembed.js

@@ -1,131 +1,131 @@
-/**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-/**
- * @module media-embed/automediaembed
- */
-import { Plugin } from 'ckeditor5/src/core';
-import { LiveRange, LivePosition } from 'ckeditor5/src/engine';
-import { Clipboard } from 'ckeditor5/src/clipboard';
-import { Delete } from 'ckeditor5/src/typing';
-import { Undo } from 'ckeditor5/src/undo';
-import { global } from 'ckeditor5/src/utils';
-import MediaEmbedEditing from './mediaembedediting';
-import { insertMedia } from './utils';
-const URL_REGEXP = /^(?:http(s)?:\/\/)?[\w-]+\.[\w-.~:/?#[\]@!$&'()*+,;=%]+$/;
-/**
- * The auto-media embed plugin. It recognizes media links in the pasted content and embeds
- * them shortly after they are injected into the document.
- */
-export default class AutoMediaEmbed extends Plugin {
-    /**
-     * @inheritDoc
-     */
-    static get requires() {
-        return [Clipboard, Delete, Undo];
-    }
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'AutoMediaEmbed';
-    }
-    /**
-     * @inheritDoc
-     */
-    constructor(editor) {
-        super(editor);
-        this._timeoutId = null;
-        this._positionToInsert = null;
-    }
-    /**
-     * @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.
-        // After pasting, the content between those positions will be checked for a URL that could be transformed
-        // into media.
-        const clipboardPipeline = editor.plugins.get('ClipboardPipeline');
-        this.listenTo(clipboardPipeline, 'inputTransformation', () => {
-            const firstRange = modelDocument.selection.getFirstRange();
-            const leftLivePosition = LivePosition.fromPosition(firstRange.start);
-            leftLivePosition.stickiness = 'toPrevious';
-            const rightLivePosition = LivePosition.fromPosition(firstRange.end);
-            rightLivePosition.stickiness = 'toNext';
-            modelDocument.once('change:data', () => {
-                this._embedMediaBetweenPositions(leftLivePosition, rightLivePosition);
-                leftLivePosition.detach();
-                rightLivePosition.detach();
-            }, { priority: 'high' });
-        });
-        const undoCommand = editor.commands.get('undo');
-        undoCommand.on('execute', () => {
-            if (this._timeoutId) {
-                global.window.clearTimeout(this._timeoutId);
-                this._positionToInsert.detach();
-                this._timeoutId = null;
-                this._positionToInsert = null;
-            }
-        }, { priority: 'high' });
-    }
-    /**
-     * 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.
-        const urlRange = new LiveRange(leftPosition, rightPosition);
-        const walker = urlRange.getWalker({ ignoreElementEnd: true });
-        let url = '';
-        for (const node of walker) {
-            if (node.item.is('$textProxy')) {
-                url += node.item.data;
-            }
-        }
-        url = url.trim();
-        // If the URL does not match to universal URL regexp, let's skip that.
-        if (!url.match(URL_REGEXP)) {
-            urlRange.detach();
-            return;
-        }
-        // If the URL represents a media, let's use it.
-        if (!mediaRegistry.hasMedia(url)) {
-            urlRange.detach();
-            return;
-        }
-        const mediaEmbedCommand = editor.commands.get('mediaEmbed');
-        // Do not anything if media element cannot be inserted at the current position (#47).
-        if (!mediaEmbedCommand.isEnabled) {
-            urlRange.detach();
-            return;
-        }
-        // Position won't be available in the `setTimeout` function so let's clone it.
-        this._positionToInsert = LivePosition.fromPosition(leftPosition);
-        // This action mustn't be executed if undo was called between pasting and auto-embedding.
-        this._timeoutId = global.window.setTimeout(() => {
-            editor.model.change(writer => {
-                this._timeoutId = null;
-                writer.remove(urlRange);
-                urlRange.detach();
-                let insertionPosition = null;
-                // Check if position where the media element should be inserted is still valid.
-                // Otherwise leave it as undefined to use document.selection - default behavior of model.insertContent().
-                if (this._positionToInsert.root.rootName !== '$graveyard') {
-                    insertionPosition = this._positionToInsert;
-                }
-                insertMedia(editor.model, url, insertionPosition, false);
-                this._positionToInsert.detach();
-                this._positionToInsert = null;
-            });
-            editor.plugins.get(Delete).requestUndoOnBackspace();
-        }, 100);
-    }
-}
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module media-embed/automediaembed
+ */
+import { Plugin } from 'ckeditor5/src/core.js';
+import { LiveRange, LivePosition } from 'ckeditor5/src/engine.js';
+import { Clipboard } from 'ckeditor5/src/clipboard.js';
+import { Delete } from 'ckeditor5/src/typing.js';
+import { Undo } from 'ckeditor5/src/undo.js';
+import { global } from 'ckeditor5/src/utils.js';
+import MediaEmbedEditing from './mediaembedediting.js';
+import { insertMedia } from './utils.js';
+const URL_REGEXP = /^(?:http(s)?:\/\/)?[\w-]+\.[\w-.~:/?#[\]@!$&'()*+,;=%]+$/;
+/**
+ * The auto-media embed plugin. It recognizes media links in the pasted content and embeds
+ * them shortly after they are injected into the document.
+ */
+export default class AutoMediaEmbed extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get requires() {
+        return [Clipboard, Delete, Undo];
+    }
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'AutoMediaEmbed';
+    }
+    /**
+     * @inheritDoc
+     */
+    constructor(editor) {
+        super(editor);
+        this._timeoutId = null;
+        this._positionToInsert = null;
+    }
+    /**
+     * @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.
+        // After pasting, the content between those positions will be checked for a URL that could be transformed
+        // into media.
+        const clipboardPipeline = editor.plugins.get('ClipboardPipeline');
+        this.listenTo(clipboardPipeline, 'inputTransformation', () => {
+            const firstRange = modelDocument.selection.getFirstRange();
+            const leftLivePosition = LivePosition.fromPosition(firstRange.start);
+            leftLivePosition.stickiness = 'toPrevious';
+            const rightLivePosition = LivePosition.fromPosition(firstRange.end);
+            rightLivePosition.stickiness = 'toNext';
+            modelDocument.once('change:data', () => {
+                this._embedMediaBetweenPositions(leftLivePosition, rightLivePosition);
+                leftLivePosition.detach();
+                rightLivePosition.detach();
+            }, { priority: 'high' });
+        });
+        const undoCommand = editor.commands.get('undo');
+        undoCommand.on('execute', () => {
+            if (this._timeoutId) {
+                global.window.clearTimeout(this._timeoutId);
+                this._positionToInsert.detach();
+                this._timeoutId = null;
+                this._positionToInsert = null;
+            }
+        }, { priority: 'high' });
+    }
+    /**
+     * 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.
+        const urlRange = new LiveRange(leftPosition, rightPosition);
+        const walker = urlRange.getWalker({ ignoreElementEnd: true });
+        let url = '';
+        for (const node of walker) {
+            if (node.item.is('$textProxy')) {
+                url += node.item.data;
+            }
+        }
+        url = url.trim();
+        // If the URL does not match to universal URL regexp, let's skip that.
+        if (!url.match(URL_REGEXP)) {
+            urlRange.detach();
+            return;
+        }
+        // If the URL represents a media, let's use it.
+        if (!mediaRegistry.hasMedia(url)) {
+            urlRange.detach();
+            return;
+        }
+        const mediaEmbedCommand = editor.commands.get('mediaEmbed');
+        // Do not anything if media element cannot be inserted at the current position (#47).
+        if (!mediaEmbedCommand.isEnabled) {
+            urlRange.detach();
+            return;
+        }
+        // Position won't be available in the `setTimeout` function so let's clone it.
+        this._positionToInsert = LivePosition.fromPosition(leftPosition);
+        // This action mustn't be executed if undo was called between pasting and auto-embedding.
+        this._timeoutId = global.window.setTimeout(() => {
+            editor.model.change(writer => {
+                this._timeoutId = null;
+                writer.remove(urlRange);
+                urlRange.detach();
+                let insertionPosition = null;
+                // Check if position where the media element should be inserted is still valid.
+                // Otherwise leave it as undefined to use document.selection - default behavior of model.insertContent().
+                if (this._positionToInsert.root.rootName !== '$graveyard') {
+                    insertionPosition = this._positionToInsert;
+                }
+                insertMedia(editor.model, url, insertionPosition, false);
+                this._positionToInsert.detach();
+                this._positionToInsert = null;
+            });
+            editor.plugins.get(Delete).requestUndoOnBackspace();
+        }, 100);
+    }
+}

package/src/converters.d.ts

@@ -1,38 +1,38 @@
-/**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-import type { DowncastDispatcher } from 'ckeditor5/src/engine';
-import type MediaRegistry from './mediaregistry';
-import type { MediaOptions } from './utils';
-/**
- * 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):
- *
- * ```html
- * <figure class="media">
- * 	<oembed url="foo"></oembed>
- * </figure>
- * ```
- *
- * or "non-semantic" (for the editing view pipeline):
- *
- * ```html
- * <figure class="media">
- * 	<div data-oembed-url="foo">[ non-semantic media preview for "foo" ]</div>
- * </figure>
- * ```
- *
- * **Note:** Changing the model "url" attribute replaces the entire content of the
- * `<figure>` in the view.
- *
- * @param registry The registry providing
- * the media and their content.
- * @param options options object with following properties:
- * - elementName When set, overrides the default element name for semantic media embeds.
- * - renderMediaPreview When `true`, the converter will create the view in the non-semantic form.
- * - renderForEditingView When `true`, the converter will create a view specific for the
- * editing pipeline (e.g. including CSS classes, content placeholders).
- */
-export declare function modelToViewUrlAttributeConverter(registry: MediaRegistry, options: MediaOptions): (dispatcher: DowncastDispatcher) => void;
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+import type { DowncastDispatcher } from 'ckeditor5/src/engine.js';
+import type MediaRegistry from './mediaregistry.js';
+import type { MediaOptions } from './utils.js';
+/**
+ * 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):
+ *
+ * ```html
+ * <figure class="media">
+ * 	<oembed url="foo"></oembed>
+ * </figure>
+ * ```
+ *
+ * or "non-semantic" (for the editing view pipeline):
+ *
+ * ```html
+ * <figure class="media">
+ * 	<div data-oembed-url="foo">[ non-semantic media preview for "foo" ]</div>
+ * </figure>
+ * ```
+ *
+ * **Note:** Changing the model "url" attribute replaces the entire content of the
+ * `<figure>` in the view.
+ *
+ * @param registry The registry providing
+ * the media and their content.
+ * @param options options object with following properties:
+ * - elementName When set, overrides the default element name for semantic media embeds.
+ * - renderMediaPreview When `true`, the converter will create the view in the non-semantic form.
+ * - renderForEditingView When `true`, the converter will create a view specific for the
+ * editing pipeline (e.g. including CSS classes, content placeholders).
+ */
+export declare function modelToViewUrlAttributeConverter(registry: MediaRegistry, options: MediaOptions): (dispatcher: DowncastDispatcher) => void;

package/src/converters.js

@@ -1,53 +1,53 @@
-/**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-/**
- * 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):
- *
- * ```html
- * <figure class="media">
- * 	<oembed url="foo"></oembed>
- * </figure>
- * ```
- *
- * or "non-semantic" (for the editing view pipeline):
- *
- * ```html
- * <figure class="media">
- * 	<div data-oembed-url="foo">[ non-semantic media preview for "foo" ]</div>
- * </figure>
- * ```
- *
- * **Note:** Changing the model "url" attribute replaces the entire content of the
- * `<figure>` in the view.
- *
- * @param registry The registry providing
- * the media and their content.
- * @param options options object with following properties:
- * - elementName When set, overrides the default element name for semantic media embeds.
- * - renderMediaPreview When `true`, the converter will create the view in the non-semantic form.
- * - renderForEditingView When `true`, the converter will create a view specific for the
- * editing pipeline (e.g. including CSS classes, content placeholders).
- */
-export function modelToViewUrlAttributeConverter(registry, options) {
-    const converter = (evt, data, conversionApi) => {
-        if (!conversionApi.consumable.consume(data.item, evt.name)) {
-            return;
-        }
-        const url = data.attributeNewValue;
-        const viewWriter = conversionApi.writer;
-        const figure = conversionApi.mapper.toViewElement(data.item);
-        const mediaContentElement = [...figure.getChildren()]
-            .find(child => child.getCustomProperty('media-content'));
-        // TODO: removing the wrapper and creating it from scratch is a hack. We can do better than that.
-        viewWriter.remove(mediaContentElement);
-        const mediaViewElement = registry.getMediaViewElement(viewWriter, url, options);
-        viewWriter.insert(viewWriter.createPositionAt(figure, 0), mediaViewElement);
-    };
-    return dispatcher => {
-        dispatcher.on('attribute:url:media', converter);
-    };
-}
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * 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):
+ *
+ * ```html
+ * <figure class="media">
+ * 	<oembed url="foo"></oembed>
+ * </figure>
+ * ```
+ *
+ * or "non-semantic" (for the editing view pipeline):
+ *
+ * ```html
+ * <figure class="media">
+ * 	<div data-oembed-url="foo">[ non-semantic media preview for "foo" ]</div>
+ * </figure>
+ * ```
+ *
+ * **Note:** Changing the model "url" attribute replaces the entire content of the
+ * `<figure>` in the view.
+ *
+ * @param registry The registry providing
+ * the media and their content.
+ * @param options options object with following properties:
+ * - elementName When set, overrides the default element name for semantic media embeds.
+ * - renderMediaPreview When `true`, the converter will create the view in the non-semantic form.
+ * - renderForEditingView When `true`, the converter will create a view specific for the
+ * editing pipeline (e.g. including CSS classes, content placeholders).
+ */
+export function modelToViewUrlAttributeConverter(registry, options) {
+    const converter = (evt, data, conversionApi) => {
+        if (!conversionApi.consumable.consume(data.item, evt.name)) {
+            return;
+        }
+        const url = data.attributeNewValue;
+        const viewWriter = conversionApi.writer;
+        const figure = conversionApi.mapper.toViewElement(data.item);
+        const mediaContentElement = [...figure.getChildren()]
+            .find(child => child.getCustomProperty('media-content'));
+        // TODO: removing the wrapper and creating it from scratch is a hack. We can do better than that.
+        viewWriter.remove(mediaContentElement);
+        const mediaViewElement = registry.getMediaViewElement(viewWriter, url, options);
+        viewWriter.insert(viewWriter.createPositionAt(figure, 0), mediaViewElement);
+    };
+    return dispatcher => {
+        dispatcher.on('attribute:url:media', converter);
+    };
+}