@ckeditor/ckeditor5-media-embed 0.0.0-nightly-20250304.0 → 0.0.0-nightly-next-20250304.0

package/lang/contexts.json

@@ -6,6 +6,7 @@
 	"The URL must not be empty.": "An error message that informs about an empty value in the URL input.",
 	"This media URL is not supported.": "An error message that informs about unsupported media URL.",
 	"Insert media": "Toolbar button tooltip for the Media Embed feature.",
+	"Media embed": "The label for the Media Embed balloon.",
 	"Media": "Label describing type of the inserted content (e.g. 'insert media').",
 	"Media toolbar": "The label used by assistive technologies describing an image toolbar attached to an image widget.",
 	"Open media in new tab": "A tooltip displayed when the user hovers a non-previewable media URL in the editor content."

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-media-embed",
-  "version": "0.0.0-nightly-20250304.0",
+  "version": "0.0.0-nightly-next-20250304.0",
   "description": "Media embed feature for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -13,15 +13,16 @@
   "type": "module",
   "main": "src/index.js",
   "dependencies": {
-    "@ckeditor/ckeditor5-clipboard": "0.0.0-nightly-20250304.0",
-    "@ckeditor/ckeditor5-core": "0.0.0-nightly-20250304.0",
-    "@ckeditor/ckeditor5-engine": "0.0.0-nightly-20250304.0",
-    "@ckeditor/ckeditor5-typing": "0.0.0-nightly-20250304.0",
-    "@ckeditor/ckeditor5-ui": "0.0.0-nightly-20250304.0",
-    "@ckeditor/ckeditor5-undo": "0.0.0-nightly-20250304.0",
-    "@ckeditor/ckeditor5-utils": "0.0.0-nightly-20250304.0",
-    "@ckeditor/ckeditor5-widget": "0.0.0-nightly-20250304.0",
-    "ckeditor5": "0.0.0-nightly-20250304.0"
+    "@ckeditor/ckeditor5-clipboard": "0.0.0-nightly-next-20250304.0",
+    "@ckeditor/ckeditor5-core": "0.0.0-nightly-next-20250304.0",
+    "@ckeditor/ckeditor5-engine": "0.0.0-nightly-next-20250304.0",
+    "@ckeditor/ckeditor5-icons": "0.0.0-nightly-next-20250304.0",
+    "@ckeditor/ckeditor5-typing": "0.0.0-nightly-next-20250304.0",
+    "@ckeditor/ckeditor5-ui": "0.0.0-nightly-next-20250304.0",
+    "@ckeditor/ckeditor5-undo": "0.0.0-nightly-next-20250304.0",
+    "@ckeditor/ckeditor5-utils": "0.0.0-nightly-next-20250304.0",
+    "@ckeditor/ckeditor5-widget": "0.0.0-nightly-next-20250304.0",
+    "ckeditor5": "0.0.0-nightly-next-20250304.0"
   },
   "author": "CKSource (http://cksource.com/)",
   "license": "SEE LICENSE IN LICENSE.md",

package/src/automediaembed.js

@@ -37,6 +37,16 @@ export default class AutoMediaEmbed extends Plugin {
     static get isOfficialPlugin() {
         return true;
     }
+    /**
+     * 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
      */

package/src/mediaembedediting.js

@@ -28,6 +28,10 @@ export default class MediaEmbedEditing extends Plugin {
     static get isOfficialPlugin() {
         return true;
     }
+    /**
+     * The media registry managing the media providers in the editor.
+     */
+    registry;
     /**
      * @inheritDoc
      */

package/src/mediaembedui.js

@@ -6,10 +6,10 @@
  * @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';
-import mediaIcon from '../theme/icons/media.svg';
 /**
  * The media embed UI plugin.
  */
@@ -32,6 +32,7 @@ export default class MediaEmbedUI extends Plugin {
     static get isOfficialPlugin() {
         return true;
     }
+    _formView;
     /**
      * @inheritDoc
      */
@@ -59,7 +60,7 @@ export default class MediaEmbedUI extends Plugin {
         const buttonView = new ButtonClass(editor.locale);
         const command = editor.commands.get('mediaEmbed');
         const dialogPlugin = this.editor.plugins.get('Dialog');
-        buttonView.icon = mediaIcon;
+        buttonView.icon = IconMedia;
         buttonView.bind('isEnabled').to(command, 'isEnabled');
         buttonView.on('execute', () => {
             if (dialogPlugin.id === 'mediaEmbed') {
@@ -76,6 +77,7 @@ export default class MediaEmbedUI extends Plugin {
         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);
@@ -83,7 +85,7 @@ export default class MediaEmbedUI extends Plugin {
         }
         dialog.show({
             id: 'mediaEmbed',
-            title: t('Insert media'),
+            title: t('Media embed'),
             content: this._formView,
             isModal: true,
             onShow: () => {
@@ -98,7 +100,7 @@ export default class MediaEmbedUI extends Plugin {
                     onExecute: () => dialog.hide()
                 },
                 {
-                    label: t('Accept'),
+                    label: isMediaSelected ? t('Save') : t('Insert'),
                     class: 'ck-button-action',
                     withText: true,
                     onExecute: () => this._handleSubmitForm()

package/src/mediaregistry.d.ts

@@ -2,11 +2,8 @@
  * @license Copyright (c) 2003-2025, 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 type { DowncastWriter, ViewElement } from 'ckeditor5/src/engine.js';
 import { type Locale } from 'ckeditor5/src/utils.js';
+import type { DowncastWriter, ViewElement } from 'ckeditor5/src/engine.js';
 import type { MediaEmbedConfig, MediaEmbedProvider } from './mediaembedconfig.js';
 import type { MediaOptions } from './utils.js';
 /**

package/src/mediaregistry.js

@@ -2,9 +2,12 @@
  * @license Copyright (c) 2003-2025, 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';
-import mediaPlaceholderIcon from '../theme/icons/media-placeholder.svg';
 const mediaPlaceholderIconViewBox = '0 0 64 42';
 /**
  * A bridge between the raw media content provider definitions and the editor view content.
@@ -14,6 +17,15 @@ const mediaPlaceholderIconViewBox = '0 0 64 42';
  * Mostly used by the {@link module:media-embed/mediaembedediting~MediaEmbedEditing} plugin.
  */
 export default 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.
      *
@@ -120,6 +132,24 @@ export default class MediaRegistry {
  * 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;
@@ -177,7 +207,7 @@ class Media {
     _getPlaceholderHtml() {
         const icon = new IconView();
         const t = this._locale.t;
-        icon.content = mediaPlaceholderIcon;
+        icon.content = IconMediaPlaceholder;
         icon.viewBox = mediaPlaceholderIconViewBox;
         const placeholder = new Template({
             tag: 'div',

package/src/ui/mediaformview.js

@@ -17,6 +17,31 @@ import '../../theme/mediaform.css';
  * See {@link module:media-embed/ui/mediaformview~MediaFormView}.
  */
 export default 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.

package/theme/icons/media/twitter.svg

@@ -1,20 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 20.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 400 400" style="enable-background:new 0 0 400 400;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#1DA1F2;}
-	.st1{fill:#FFFFFF;}
-</style>
-<g id="Dark_Blue">
-	<circle class="st0" cx="200" cy="200" r="200"/>
-</g>
-<g id="Logo__x2014__FIXED">
-	<path class="st1" d="M163.4,305.5c88.7,0,137.2-73.5,137.2-137.2c0-2.1,0-4.2-0.1-6.2c9.4-6.8,17.6-15.3,24.1-25
-		c-8.6,3.8-17.9,6.4-27.7,7.6c10-6,17.6-15.4,21.2-26.7c-9.3,5.5-19.6,9.5-30.6,11.7c-8.8-9.4-21.3-15.2-35.2-15.2
-		c-26.6,0-48.2,21.6-48.2,48.2c0,3.8,0.4,7.5,1.3,11c-40.1-2-75.6-21.2-99.4-50.4c-4.1,7.1-6.5,15.4-6.5,24.2
-		c0,16.7,8.5,31.5,21.5,40.1c-7.9-0.2-15.3-2.4-21.8-6c0,0.2,0,0.4,0,0.6c0,23.4,16.6,42.8,38.7,47.3c-4,1.1-8.3,1.7-12.7,1.7
-		c-3.1,0-6.1-0.3-9.1-0.9c6.1,19.2,23.9,33.1,45,33.5c-16.5,12.9-37.3,20.6-59.9,20.6c-3.9,0-7.7-0.2-11.5-0.7
-		C110.8,297.5,136.2,305.5,163.4,305.5"/>
-</g>
-</svg>

package/theme/icons/media-placeholder.svg

@@ -1 +0,0 @@
-<svg viewBox="0 0 64 42" xmlns="http://www.w3.org/2000/svg"><path d="M47.426 17V3.713L63.102 0v19.389h-.001l.001.272c0 1.595-2.032 3.43-4.538 4.098-2.506.668-4.538-.083-4.538-1.678 0-1.594 2.032-3.43 4.538-4.098.914-.244 2.032-.565 2.888-.603V4.516L49.076 7.447v9.556A1.014 1.014 0 0 0 49 17h-1.574zM29.5 17h-8.343a7.073 7.073 0 1 0-4.657 4.06v3.781H3.3a2.803 2.803 0 0 1-2.8-2.804V8.63a2.803 2.803 0 0 1 2.8-2.805h4.082L8.58 2.768A1.994 1.994 0 0 1 10.435 1.5h8.985c.773 0 1.477.448 1.805 1.149l1.488 3.177H26.7c1.546 0 2.8 1.256 2.8 2.805V17zm-11.637 0H17.5a1 1 0 0 0-1 1v.05A4.244 4.244 0 1 1 17.863 17zm29.684 2c.97 0 .953-.048.953.889v20.743c0 .953.016.905-.953.905H19.453c-.97 0-.953.048-.953-.905V19.89c0-.937-.016-.889.97-.889h28.077zm-4.701 19.338V22.183H24.154v16.155h18.692zM20.6 21.375v1.616h1.616v-1.616H20.6zm0 3.231v1.616h1.616v-1.616H20.6zm0 3.231v1.616h1.616v-1.616H20.6zm0 3.231v1.616h1.616v-1.616H20.6zm0 3.231v1.616h1.616v-1.616H20.6zm0 3.231v1.616h1.616V37.53H20.6zm24.233-16.155v1.616h1.615v-1.616h-1.615zm0 3.231v1.616h1.615v-1.616h-1.615zm0 3.231v1.616h1.615v-1.616h-1.615zm0 3.231v1.616h1.615v-1.616h-1.615zm0 3.231v1.616h1.615v-1.616h-1.615zm0 3.231v1.616h1.615V37.53h-1.615zM29.485 25.283a.4.4 0 0 1 .593-.35l9.05 4.977a.4.4 0 0 1 0 .701l-9.05 4.978a.4.4 0 0 1-.593-.35v-9.956z"/></svg>

package/theme/icons/media.svg

@@ -1 +0,0 @@
-<svg viewBox="0 0 22 20" xmlns="http://www.w3.org/2000/svg"><path d="M1.587 1.5c-.612 0-.601-.029-.601.551v14.84c0 .59-.01.559.591.559h18.846c.602 0 .591.03.591-.56V2.052c0-.58.01-.55-.591-.55H1.587Zm.701.971h1.003v1H2.288v-1Zm16.448 0h1.003v1h-1.003v-1Zm-14.24 1h13.008v12H4.467l.029-12Zm-2.208 1h1.003v1H2.288v-1Zm16.448 0h1.003v1h-1.003v-1Zm-16.448 2h1.003v1H2.288v-1Zm16.448 0h1.003v1h-1.003v-1Zm-16.448 2h1.003v1H2.288v-1Zm16.448 0h1.003v1h-1.003v-1Zm-16.448 2h1.003v1H2.288v-1Zm16.448 0h1.003v1h-1.003v-1Zm-16.448 2h1.003l-.029 1h-.974v-1Zm16.448 0h1.003v1h-1.003v-1Zm-16.448 2h.974v1h-.974v-1Zm16.448 0h1.003v1h-1.003v-1Z"/><path d="M8.374 6.648a.399.399 0 0 1 .395-.4.402.402 0 0 1 .2.049l5.148 2.824a.4.4 0 0 1 0 .7l-5.148 2.824a.403.403 0 0 1-.595-.35V6.648Z"/></svg>