diff --git a/core/misc/cspell/dictionary.txt b/core/misc/cspell/dictionary.txt
index f8ab4a157e308da24767bfb878b8dcd17c520372..066c11d0cd354ee499bbf48f188eb44b33550c1f 100644
--- a/core/misc/cspell/dictionary.txt
+++ b/core/misc/cspell/dictionary.txt
@@ -634,6 +634,7 @@ inspectable
instaclick
installable
instantiator
+interactable
introspectable
invalidators
invalididentifier
diff --git a/core/modules/ckeditor5/ckeditor5.libraries.yml b/core/modules/ckeditor5/ckeditor5.libraries.yml
index c0ce9cf5edfc671a22b238b4105856c8db6a433a..dea023c86f2872f30b5b3c4f75386e02cb2fb035 100644
--- a/core/modules/ckeditor5/ckeditor5.libraries.yml
+++ b/core/modules/ckeditor5/ckeditor5.libraries.yml
@@ -53,6 +53,9 @@ drupal.ckeditor5.media:
js:
js/media_embed_ckeditor5.theme.js: {}
js/build/drupalMedia.js: { preprocess: false, minified: true }
+ css:
+ theme:
+ css/drupalmedia.css: { }
dependencies:
- core/ckeditor5
- core/drupal
diff --git a/core/modules/ckeditor5/ckeditor5.routing.yml b/core/modules/ckeditor5/ckeditor5.routing.yml
index 9efcc338f707422d9601b4d0b2a419f2760e24b4..98256192781bc8cc108f587f38acab68f4be4aa7 100644
--- a/core/modules/ckeditor5/ckeditor5.routing.yml
+++ b/core/modules/ckeditor5/ckeditor5.routing.yml
@@ -12,10 +12,10 @@ ckeditor5.upload_image:
editor:
type: entity:editor
-ckeditor5.media_image:
- path: '/ckeditor5/{editor}/is-media-image'
+ckeditor5.media_entity_metadata:
+ path: '/ckeditor5/{editor}/media-entity-metadata'
defaults:
- _controller: '\Drupal\ckeditor5\Controller\CKEditor5MediaController::isMediaImage'
+ _controller: '\Drupal\ckeditor5\Controller\CKEditor5MediaController::mediaEntityMetadata'
methods: [GET]
requirements:
_entity_access: 'editor.use'
diff --git a/core/modules/ckeditor5/css/drupalmedia.css b/core/modules/ckeditor5/css/drupalmedia.css
new file mode 100644
index 0000000000000000000000000000000000000000..45a817af2bc05f01fc0a104a7438cc60c19b8ac2
--- /dev/null
+++ b/core/modules/ckeditor5/css/drupalmedia.css
@@ -0,0 +1,32 @@
+.ck .drupal-media {
+ position: relative;
+}
+.ck .drupal-media__metadata-error {
+ position: absolute;
+ top: 8px;
+ right: 8px;
+ width: 28px;
+ height: 28px;
+ border: 1px solid #e29700;
+ border-radius: 50%;
+ background: #fdf8ed;
+}
+.ck .drupal-media__metadata-error-icon {
+ display: block;
+ width: 28px;
+ height: 28px;
+ background: url("../../../misc/icons/e29700/warning.svg") no-repeat center 4px;
+ background-size: 18px;
+}
+.ck .drupal-media__metadata-error .ck-tooltip {
+ display: block;
+ overflow: visible;
+}
+.ck .drupal-media__metadata-error:hover .ck-tooltip {
+ visibility: visible;
+ opacity: 1;
+}
+.ck .drupal-media__metadata-error:hover .ck-tooltip__text {
+ display: block;
+ width: 240px;
+}
diff --git a/core/modules/ckeditor5/js/build/drupalMedia.js b/core/modules/ckeditor5/js/build/drupalMedia.js
index 9749133518a0ca6bc3ffff13a4c3ed5797f8d097..d79d66a3ebc7f5cbd31b30de208b315dc0218dd6 100644
--- a/core/modules/ckeditor5/js/build/drupalMedia.js
+++ b/core/modules/ckeditor5/js/build/drupalMedia.js
@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.CKEditor5=t():(e.CKEditor5=e.CKEditor5||{},e.CKEditor5.drupalMedia=t())}(self,(function(){return(()=>{var e={"ckeditor5/src/core.js":(e,t,i)=>{e.exports=i("dll-reference CKEditor5.dll")("./src/core.js")},"ckeditor5/src/ui.js":(e,t,i)=>{e.exports=i("dll-reference CKEditor5.dll")("./src/ui.js")},"ckeditor5/src/utils.js":(e,t,i)=>{e.exports=i("dll-reference CKEditor5.dll")("./src/utils.js")},"ckeditor5/src/widget.js":(e,t,i)=>{e.exports=i("dll-reference CKEditor5.dll")("./src/widget.js")},"dll-reference CKEditor5.dll":e=>{"use strict";e.exports=CKEditor5.dll}},t={};function i(n){var a=t[n];if(void 0!==a)return a.exports;var r=t[n]={exports:{}};return e[n](r,r.exports,i),r.exports}i.d=(e,t)=>{for(var n in t)i.o(t,n)&&!i.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},i.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);var n={};return(()=>{"use strict";i.d(n,{default:()=>Z});var e=i("ckeditor5/src/core.js"),t=i("ckeditor5/src/widget.js");class a extends e.Command{execute(e){const t=this.editor.plugins.get("DrupalMediaEditing"),i=Object.entries(t.attrs).reduce(((e,[t,i])=>(e[i]=t,e)),{}),n=Object.keys(e).reduce(((t,n)=>(i[n]&&(t[i[n]]=e[n]),t)),{});if(this.editor.plugins.has("DrupalElementStyleEditing")){const t=this.editor.plugins.get("DrupalElementStyleEditing");for(const i of t.normalizedStyles)if(e[i.attributeName]&&i.attributeValue===e[i.attributeName]){n.drupalElementStyle=i.name;break}}this.editor.model.change((e=>{this.editor.model.insertContent(function(e,t){return e.createElement("drupalMedia",t)}(e,n))}))}refresh(){const e=this.editor.model,t=e.document.selection,i=e.schema.findAllowedParent(t.getFirstPosition(),"drupalMedia");this.isEnabled=null!==i}}class r extends e.Plugin{static get requires(){return[t.Widget]}init(){this.attrs={drupalMediaAlt:"alt",drupalMediaCaption:"data-caption",drupalMediaEntityType:"data-entity-type",drupalMediaEntityUuid:"data-entity-uuid",drupalMediaViewMode:"data-view-mode"};const e=this.editor.config.get("drupalMedia");if(!e)return;const{previewURL:t,themeError:i}=e;this.previewURL=t,this.labelError=Drupal.t("Preview failed"),this.themeError=i||`\n <p>${Drupal.t("An error occurred while trying to preview the media. Please save your work and reload this page.")}<p>\n `,this._defineSchema(),this._defineConverters(),this.editor.commands.add("insertDrupalMedia",new a(this.editor))}async _fetchPreview(e,t){const i=await fetch(`${e}?${new URLSearchParams(t)}`,{headers:{"X-Drupal-MediaPreview-CSRF-Token":this.editor.config.get("drupalMedia").previewCsrfToken}});if(i.ok){return{label:i.headers.get("drupal-media-label"),preview:await i.text()}}return{label:this.labelError,preview:this.themeError}}_defineSchema(){this.editor.model.schema.register("drupalMedia",{allowWhere:"$block",isObject:!0,isContent:!0,allowAttributes:Object.keys(this.attrs)})}_defineConverters(){const e=this.editor.conversion;e.for("upcast").elementToElement({view:{name:"drupal-media"},model:"drupalMedia"}),e.for("dataDowncast").elementToElement({model:"drupalMedia",view:{name:"drupal-media"}}),e.for("editingDowncast").elementToElement({model:"drupalMedia",view:(e,{writer:i})=>{const n=i.createContainerElement("div",{class:"drupal-media"}),a=i.createRawElement("div",{"data-drupal-media-preview":"loading"},(t=>{this.previewURL?this._fetchPreview(this.previewURL,{text:this._renderElement(e),uuid:e.getAttribute("drupalMediaEntityUuid")}).then((({label:e,preview:i})=>{t.innerHTML=i,t.setAttribute("aria-label",e),t.setAttribute("data-drupal-media-preview","ready")})):(t.innerHTML=this.themeError,t.setAttribute("aria-label","drupal-media"),t.setAttribute("data-drupal-media-preview","unavailable"))}));return i.insert(i.createPositionAt(n,0),a),i.setCustomProperty("drupalMedia",!0,n),(0,t.toWidget)(n,i,{label:"media widget"})}}),e.for("editingDowncast").add((e=>{e.on("attribute:drupalElementStyle:drupalMedia",((e,t,i)=>{const n={alignLeft:"drupal-media-style-align-left",alignRight:"drupal-media-style-align-right",alignCenter:"drupal-media-style-align-center"},a=i.mapper.toViewElement(t.item),r=i.writer;n[t.attributeOldValue]&&r.removeClass(n[t.attributeOldValue],a),n[t.attributeNewValue]&&i.consumable.consume(t.item,e.name)&&r.addClass(n[t.attributeNewValue],a)}))})),Object.keys(this.attrs).forEach((t=>{e.attributeToAttribute({model:{key:t,name:"drupalMedia"},view:{name:"drupal-media",key:this.attrs[t]}})}))}_renderElement(e){const t=e.getAttributes();let i="<drupal-media";return Array.from(t).forEach((e=>{this.attrs[e[0]]&&"drupalMediaCaption"!==e[0]&&(i+=` ${this.attrs[e[0]]}="${e[1]}"`)})),i+="></drupal-media>",i}static get pluginName(){return"DrupalMediaEditing"}}var l=i("ckeditor5/src/ui.js");class s extends e.Plugin{init(){const e=this.editor,t=this.editor.config.get("drupalMedia");if(!t)return;const{libraryURL:i,openDialog:n,dialogSettings:a={}}=t;i&&"function"==typeof n&&e.ui.componentFactory.add("drupalMedia",(t=>{const r=e.commands.get("insertDrupalMedia"),s=new l.ButtonView(t);return s.set({label:Drupal.t("Insert Drupal Media"),icon:'<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M19.1873 4.86414L10.2509 6.86414V7.02335H10.2499V15.5091C9.70972 15.1961 9.01793 15.1048 8.34069 15.3136C7.12086 15.6896 6.41013 16.8967 6.75322 18.0096C7.09631 19.1226 8.3633 19.72 9.58313 19.344C10.6666 19.01 11.3484 18.0203 11.2469 17.0234H11.2499V9.80173L18.1803 8.25067V14.3868C17.6401 14.0739 16.9483 13.9825 16.2711 14.1913C15.0513 14.5674 14.3406 15.7744 14.6836 16.8875C15.0267 18.0004 16.2937 18.5978 17.5136 18.2218C18.597 17.8877 19.2788 16.8982 19.1773 15.9011H19.1803V8.02687L19.1873 8.0253V4.86414Z" fill="black"/><path fill-rule="evenodd" clip-rule="evenodd" d="M13.5039 0.743652H0.386932V12.1603H13.5039V0.743652ZM12.3379 1.75842H1.55289V11.1454H1.65715L4.00622 8.86353L6.06254 10.861L9.24985 5.91309L11.3812 9.22179L11.7761 8.6676L12.3379 9.45621V1.75842ZM6.22048 4.50869C6.22048 5.58193 5.35045 6.45196 4.27722 6.45196C3.20398 6.45196 2.33395 5.58193 2.33395 4.50869C2.33395 3.43546 3.20398 2.56543 4.27722 2.56543C5.35045 2.56543 6.22048 3.43546 6.22048 4.50869Z" fill="black"/></svg>\n',tooltip:!0}),s.bind("isOn","isEnabled").to(r,"value","isEnabled"),this.listenTo(s,"execute",(()=>{n(i,(({attributes:t})=>{e.execute("insertDrupalMedia",t)}),a)})),s}))}}function o(e){return!!e&&e.is("element","drupalMedia")}function d(e){const i=e.getSelectedElement();return i&&function(e){return(0,t.isWidget)(e)&&!!e.getCustomProperty("drupalMedia")}(i)?i:null}function u(e){const t=typeof e;return null!=e&&("object"===t||"function"===t)}class c extends e.Plugin{static get requires(){return[t.WidgetToolbarRepository]}static get pluginName(){return"DrupalMediaToolbar"}afterInit(){const{editor:e}=this;var i;e.plugins.get(t.WidgetToolbarRepository).register("drupalMedia",{ariaLabel:Drupal.t("Drupal Media toolbar"),items:(i=e.config.get("drupalMedia.toolbar"),i.map((e=>u(e)?e.name:e))||[]),getRelatedElement:e=>d(e)})}}class m extends e.Command{refresh(){const e=this.editor.model.document.selection.getSelectedElement();this.isEnabled=!1,o(e)&&this._isMediaImage(e).then((e=>{this.isEnabled=e})),o(e)&&e.hasAttribute("drupalMediaAlt")?this.value=e.getAttribute("drupalMediaAlt"):this.value=!1}execute(e){const{model:t}=this.editor,i=t.document.selection.getSelectedElement();e.newValue=e.newValue.trim(),t.change((t=>{e.newValue.length>0?t.setAttribute("drupalMediaAlt",e.newValue,i):t.removeAttribute("drupalMediaAlt",i)}))}async _isMediaImage(e){const t=this.editor.config.get("drupalMedia");if(!t)return null;const{isMediaUrl:i}=t,n=new URLSearchParams({uuid:e.getAttribute("drupalMediaEntityUuid")}),a=await fetch(`${i}&${n}`);return a.ok?JSON.parse(await a.text()):null}}class g extends e.Plugin{static get pluginName(){return"MediaImageTextAlternativeEditing"}init(){this.editor.commands.add("mediaImageTextAlternative",new m(this.editor))}}function p(e){const t=e.editing.view,i=l.BalloonPanelView.defaultPositions;return{target:t.domConverter.viewToDom(t.document.selection.getSelectedElement()),positions:[i.northArrowSouth,i.northArrowSouthWest,i.northArrowSouthEast,i.southArrowNorth,i.southArrowNorthWest,i.southArrowNorthEast]}}var h=i("ckeditor5/src/utils.js");class f extends l.View{constructor(t){super(t),this.focusTracker=new h.FocusTracker,this.keystrokes=new h.KeystrokeHandler,this.labeledInput=this._createLabeledInputView(),this.saveButtonView=this._createButton(Drupal.t("Save"),e.icons.check,"ck-button-save"),this.saveButtonView.type="submit",this.cancelButtonView=this._createButton(Drupal.t("Cancel"),e.icons.cancel,"ck-button-cancel","cancel"),this._focusables=new l.ViewCollection,this._focusCycler=new l.FocusCycler({focusables:this._focusables,focusTracker:this.focusTracker,keystrokeHandler:this.keystrokes,actions:{focusPrevious:"shift + tab",focusNext:"tab"}}),this.setTemplate({tag:"form",attributes:{class:["ck","ck-text-alternative-form","ck-responsive-form"],tabindex:"-1"},children:[this.labeledInput,this.saveButtonView,this.cancelButtonView]}),(0,l.injectCssTransitionDisabler)(this)}render(){super.render(),this.keystrokes.listenTo(this.element),(0,l.submitHandler)({view:this}),[this.labeledInput,this.saveButtonView,this.cancelButtonView].forEach((e=>{this._focusables.add(e),this.focusTracker.add(e.element)}))}_createButton(e,t,i,n){const a=new l.ButtonView(this.locale);return a.set({label:e,icon:t,tooltip:!0}),a.extendTemplate({attributes:{class:i}}),n&&a.delegate("execute").to(this,n),a}_createLabeledInputView(){const e=new l.LabeledFieldView(this.locale,l.createLabeledInputText);return e.label=Drupal.t("Override text alternative"),e}}class b extends e.Plugin{static get requires(){return[l.ContextualBalloon]}static get pluginName(){return"MediaImageTextAlternativeUi"}init(){this._createButton(),this._createForm()}destroy(){super.destroy(),this._form.destroy()}_createButton(){const t=this.editor;t.ui.componentFactory.add("mediaImageTextAlternative",(i=>{const n=t.commands.get("mediaImageTextAlternative"),a=new l.ButtonView(i);return a.set({label:Drupal.t("Override media image text alternative"),icon:e.icons.lowVision,tooltip:!0}),a.bind("isVisible").to(n,"isEnabled"),this.listenTo(a,"execute",(()=>{this._showForm()})),a}))}_createForm(){const e=this.editor,t=e.editing.view.document;this._balloon=this.editor.plugins.get("ContextualBalloon"),this._form=new f(e.locale),this._form.render(),this.listenTo(this._form,"submit",(()=>{e.execute("mediaImageTextAlternative",{newValue:this._form.labeledInput.fieldView.element.value}),this._hideForm(!0)})),this.listenTo(this._form,"cancel",(()=>{this._hideForm(!0)})),this._form.keystrokes.set("Esc",((e,t)=>{this._hideForm(!0),t()})),this.listenTo(e.ui,"update",(()=>{d(t.selection)?this._isVisible&&function(e){const t=e.plugins.get("ContextualBalloon");if(d(e.editing.view.document.selection)){const i=p(e);t.updatePosition(i)}}(e):this._hideForm(!0)})),(0,l.clickOutsideHandler)({emitter:this._form,activator:()=>this._isVisible,contextElements:[this._balloon.view.element],callback:()=>this._hideForm()})}_showForm(){if(this._isVisible)return;const e=this.editor,t=e.commands.get("mediaImageTextAlternative"),i=this._form.labeledInput;this._form.disableCssTransitions(),this._isInBalloon||this._balloon.add({view:this._form,position:p(e)}),i.fieldView.element.value=t.value||"",i.fieldView.value=i.fieldView.element.value,this._form.labeledInput.fieldView.select(),this._form.enableCssTransitions()}_hideForm(e){this._isInBalloon&&(this._form.focusTracker.isFocused&&this._form.saveButtonView.focus(),this._balloon.remove(this._form),e&&this.editor.editing.view.focus())}get _isVisible(){return this._balloon.visibleView===this._form}get _isInBalloon(){return this._balloon.hasView(this._form)}}class w extends e.Plugin{static get requires(){return[g,b]}static get pluginName(){return"MediaImageTextAlternative"}}function y(e,t,i){if(t.attributes)for(const[n,a]of Object.entries(t.attributes))e.setAttribute(n,a,i);t.styles&&e.setStyle(t.styles,i),t.classes&&e.addClass(t.classes,i)}function E(e){return t=>{t.on("element:drupal-media",((t,i,n)=>{const a=i.viewItem.parent;a.is("element","a")&&function(t,a){const r=e._consumeAllowedAttributes(t,n);r&&n.writer.setAttribute(a,r,i.modelRange)}(a,"htmlLinkAttributes")}),{priority:"low"})}}class v extends e.Plugin{init(){const{editor:e}=this;if(!e.plugins.has("GeneralHtmlSupport"))return;const{schema:t}=e.model,{conversion:i}=e,n=e.plugins.get("DataFilter");t.extend("drupalMedia",{allowAttributes:["htmlLinkAttributes"]}),i.for("upcast").add(E(n)),i.for("editingDowncast").add((e=>e.on("attribute:linkHref:drupalMedia",((e,t,i)=>{if(!i.consumable.consume(t.item,"attribute:htmlLinkAttributes:drupalMedia"))return;const n=i.mapper.toViewElement(t.item),a=function(e,t,i){const n=e.createRangeOn(t);for(const{item:e}of n.getWalker())if(e.is("element",i))return e}(i.writer,n,"a");y(i.writer,t.item.getAttribute("htmlLinkAttributes"),a)}),{priority:"low"}))),i.for("dataDowncast").add((e=>e.on("attribute:linkHref:drupalMedia",((e,t,i)=>{if(!i.consumable.consume(t.item,"attribute:htmlLinkAttributes:drupalMedia"))return;const n=i.mapper.toViewElement(t.item).parent;y(i.writer,t.item.getAttribute("htmlLinkAttributes"),n)}),{priority:"low"})))}static get pluginName(){return"DrupalMediaGeneralHtmlSupport"}}class k extends e.Plugin{static get requires(){return[r,v,s,c,w]}static get pluginName(){return"DrupalMedia"}}function M(){return e=>{e.on("element:a",((e,t,i)=>{const n=t.viewItem,a=(r=n,Array.from(r.getChildren()).find((e=>"drupal-media"===e.name)));var r;if(!a)return;if(!i.consumable.consume(n,{attributes:["href"]}))return;const l=n.getAttribute("href");if(!l)return;const s=i.convertItem(a,t.modelCursor);t.modelRange=s.modelRange,t.modelCursor=s.modelCursor;const o=t.modelCursor.nodeBefore;o&&o.is("element","drupalMedia")&&i.writer.setAttribute("linkHref",l,o)}),{priority:"high"})}}class A extends e.Plugin{static get requires(){return["LinkEditing","DrupalMediaEditing"]}static get pluginName(){return"DrupalLinkMediaEditing"}init(){const{editor:e}=this;e.model.schema.extend("drupalMedia",{allowAttributes:["linkHref"]}),e.conversion.for("upcast").add(M()),e.conversion.for("editingDowncast").add((e=>{e.on("attribute:linkHref:drupalMedia",((e,t,i)=>{const{writer:n}=i;if(!i.consumable.consume(t.item,e.name))return;const a=i.mapper.toViewElement(t.item),r=Array.from(a.getChildren()).find((e=>"a"===e.name));if(r)t.attributeNewValue?n.setAttribute("href",t.attributeNewValue,r):(n.move(n.createRangeIn(r),n.createPositionAt(a,0)),n.remove(r));else{const e=Array.from(a.getChildren()).find((e=>e.getAttribute("data-drupal-media-preview"))),i=n.createContainerElement("a",{href:t.attributeNewValue});n.insert(n.createPositionAt(a,0),i),n.move(n.createRangeOn(e),n.createPositionAt(i,0))}}),{priority:"high"})})),e.conversion.for("dataDowncast").add((e=>{e.on("attribute:linkHref:drupalMedia",((e,t,i)=>{const{writer:n}=i;if(!i.consumable.consume(t.item,e.name))return;const a=i.mapper.toViewElement(t.item),r=n.createContainerElement("a",{href:t.attributeNewValue});n.insert(n.createPositionBefore(a),r),n.move(n.createRangeOn(a),n.createPositionAt(r,0))}),{priority:"high"})}))}}class _ extends e.Plugin{static get requires(){return["LinkEditing","LinkUI","DrupalMediaEditing"]}static get pluginName(){return"DrupalLinkMediaUi"}init(){const{editor:e}=this,t=e.editing.view.document;this.listenTo(t,"click",((t,i)=>{this._isSelectedLinkedMedia(e.model.document.selection)&&(i.preventDefault(),t.stop())}),{priority:"high"}),this._createToolbarLinkMediaButton()}_createToolbarLinkMediaButton(){const{editor:e}=this;e.ui.componentFactory.add("drupalLinkMedia",(t=>{const i=new l.ButtonView(t),n=e.plugins.get("LinkUI"),a=e.commands.get("link");return i.set({isEnabled:!0,label:Drupal.t("Link media"),icon:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m11.077 15 .991-1.416a.75.75 0 1 1 1.229.86l-1.148 1.64a.748.748 0 0 1-.217.206 5.251 5.251 0 0 1-8.503-5.955.741.741 0 0 1 .12-.274l1.147-1.639a.75.75 0 1 1 1.228.86L4.933 10.7l.006.003a3.75 3.75 0 0 0 6.132 4.294l.006.004zm5.494-5.335a.748.748 0 0 1-.12.274l-1.147 1.639a.75.75 0 1 1-1.228-.86l.86-1.23a3.75 3.75 0 0 0-6.144-4.301l-.86 1.229a.75.75 0 0 1-1.229-.86l1.148-1.64a.748.748 0 0 1 .217-.206 5.251 5.251 0 0 1 8.503 5.955zm-4.563-2.532a.75.75 0 0 1 .184 1.045l-3.155 4.505a.75.75 0 1 1-1.229-.86l3.155-4.506a.75.75 0 0 1 1.045-.184z"/></svg>\n',keystroke:"Ctrl+K",tooltip:!0,isToggleable:!0}),i.bind("isEnabled").to(a,"isEnabled"),i.bind("isOn").to(a,"value",(e=>!!e)),this.listenTo(i,"execute",(()=>{this._isSelectedLinkedMedia(e.model.document.selection)?n._addActionsView():n._showUI(!0)})),i}))}_isSelectedLinkedMedia(e){const t=e.getSelectedElement();return!!t&&t.is("element","drupalMedia")&&t.hasAttribute("linkHref")}}class x extends e.Plugin{static get requires(){return[A,_]}static get pluginName(){return"DrupalLinkMedia"}}const{objectFullWidth:S,objectInline:C,objectLeft:V,objectRight:D,objectCenter:L,objectBlockLeft:I,objectBlockRight:B}=e.icons,T={inline:{name:"inline",title:"In line",icon:C,modelElements:["imageInline"],isDefault:!0},alignLeft:{name:"alignLeft",title:"Left aligned image",icon:V,modelElements:["imageBlock","imageInline"],className:"image-style-align-left"},alignBlockLeft:{name:"alignBlockLeft",title:"Left aligned image",icon:I,modelElements:["imageBlock"],className:"image-style-block-align-left"},alignCenter:{name:"alignCenter",title:"Centered image",icon:L,modelElements:["imageBlock"],className:"image-style-align-center"},alignRight:{name:"alignRight",title:"Right aligned image",icon:D,modelElements:["imageBlock","imageInline"],className:"image-style-align-right"},alignBlockRight:{name:"alignBlockRight",title:"Right aligned image",icon:B,modelElements:["imageBlock"],className:"image-style-block-align-right"},block:{name:"block",title:"Centered image",icon:L,modelElements:["imageBlock"],isDefault:!0},side:{name:"side",title:"Side image",icon:D,modelElements:["imageBlock"],className:"image-style-side"}},N={full:S,left:I,right:B,center:L,inlineLeft:V,inlineRight:D,inline:C},P=[{name:"imageStyle:wrapText",title:"Wrap text",defaultItem:"imageStyle:alignLeft",items:["imageStyle:alignLeft","imageStyle:alignRight"]},{name:"imageStyle:breakText",title:"Break text",defaultItem:"imageStyle:block",items:["imageStyle:alignBlockLeft","imageStyle:block","imageStyle:alignBlockRight"]}];function O(e){(0,h.logWarning)("image-style-configuration-definition-invalid",e)}const R={normalizeStyles:function(e){return(e.configuredStyles.options||[]).map((e=>function(e){e="string"==typeof e?T[e]?{...T[e]}:{name:e}:function(e,t){const i={...t};for(const n in e)Object.prototype.hasOwnProperty.call(t,n)||(i[n]=e[n]);return i}(T[e.name],e);"string"==typeof e.icon&&(e.icon=N[e.icon]||e.icon);return e}(e))).filter((t=>function(e,{isBlockPluginLoaded:t,isInlinePluginLoaded:i}){const{modelElements:n,name:a}=e;if(!(n&&n.length&&a))return O({style:e}),!1;{const a=[t?"imageBlock":null,i?"imageInline":null];if(!n.some((e=>a.includes(e))))return(0,h.logWarning)("image-style-missing-dependency",{style:e,missingPlugins:n.map((e=>"imageBlock"===e?"ImageBlockEditing":"ImageInlineEditing"))}),!1}return!0}(t,e)))},getDefaultStylesConfiguration:function(e,t){return e&&t?{options:["inline","alignLeft","alignRight","alignCenter","alignBlockLeft","alignBlockRight","block","side"]}:e?{options:["block","side"]}:t?{options:["inline","alignLeft","alignRight"]}:{}},getDefaultDropdownDefinitions:function(e){return e.has("ImageBlockEditing")&&e.has("ImageInlineEditing")?[...P]:[]},warnInvalidStyle:O,DEFAULT_OPTIONS:T,DEFAULT_ICONS:N,DEFAULT_DROPDOWN_DEFINITIONS:P};function j(e,t){const i=e.getSelectedElement();return i&&t.checkAttribute(i,"drupalElementStyle")?i:e.getFirstPosition().findAncestor((e=>t.checkAttribute(e,"drupalElementStyle")))}class F extends e.Command{constructor(e,t){super(e),this._styles=new Map(t.map((e=>[e.name,e])))}refresh(){const e=this.editor,t=j(e.model.document.selection,e.model.schema);this.isEnabled=!!t,this.isEnabled&&t.hasAttribute("drupalElementStyle")?this.value=t.getAttribute("drupalElementStyle"):this.value=!1}execute(e={}){const t=this.editor.model;t.change((i=>{const n=e.value,a=j(t.document.selection,t.schema);!n||this._styles.get(n).isDefault?i.removeAttribute("drupalElementStyle",a):i.setAttribute("drupalElementStyle",n,a)}))}}function H(e,t){for(const i of t)if(i.name===e)return i}class U extends e.Plugin{init(){const t=this.editor;t.config.define("drupalElementStyles",{options:[]});const i=t.config.get("drupalElementStyles").options;this.normalizedStyles=i.map((t=>("string"==typeof t.icon&&e.icons[t.icon]&&(t.icon=e.icons[t.icon]),t))).filter((e=>e.attributeName&&e.attributeValue?e.modelElements&&Array.isArray(e.modelElements)?!!e.name||(console.warn("drupalElementStyles options must include a name."),!1):(console.warn("drupalElementStyles options must include an array of supported modelElements."),!1):(console.warn("drupalElementStyles options must include attributeName and attributeValue."),!1))),this._setupConversion(),t.commands.add("drupalElementStyle",new F(t,this.normalizedStyles))}_setupConversion(){const e=this.editor,t=e.model.schema,i=(n=this.normalizedStyles,(e,t,i)=>{if(!i.consumable.consume(t.item,e.name))return;const a=H(t.attributeNewValue,n),r=H(t.attributeOldValue,n),l=i.mapper.toViewElement(t.item),s=i.writer;r&&("class"===r.attributeName?s.removeClass(r.attributeValue,l):s.removeAttribute(r.attributeName,l)),a&&("class"===a.attributeName?s.addClass(a.attributeValue,l):s.setAttribute(a.attributeName,a.attributeValue,l))});var n;const a=function(e){const t=e.filter((e=>!e.isDefault));return(e,i,n)=>{if(!i.modelRange)return;const a=i.viewItem,r=(0,h.first)(i.modelRange.getItems());if(r&&n.schema.checkAttribute(r,"drupalElementStyle"))for(const e of t)if("class"===e.attributeName)n.consumable.consume(a,{classes:e.attributeValue})&&n.writer.setAttribute("drupalElementStyle",e.name,r);else if(n.consumable.consume(a,{attributes:[e.attributeName]}))for(const e of t)e.attributeValue===a.getAttribute(e.attributeName)&&n.writer.setAttribute("drupalElementStyle",e.name,r)}}(this.normalizedStyles);e.editing.downcastDispatcher.on("attribute:drupalElementStyle",i),e.data.downcastDispatcher.on("attribute:drupalElementStyle",i);[...new Set(this.normalizedStyles.map((e=>e.modelElements)).flat())].forEach((e=>{t.extend(e,{allowAttributes:"drupalElementStyle"})})),e.data.upcastDispatcher.on("element",a,{priority:"low"})}static get pluginName(){return"DrupalElementStyleEditing"}}const W=e=>e,K=(e,t)=>(e?`${e}: `:"")+t;function z(e){return`drupalElementStyle:${e}`}class q extends e.Plugin{static get requires(){return[U]}init(){const e=this.editor.plugins,t=this.editor.config.get("drupalMedia.toolbar")||[],i=Object.values(e.get("DrupalElementStyleEditing").normalizedStyles);i.forEach((e=>{this._createButton(e)}));t.filter(u).forEach((e=>{this._createDropdown(e,i)}))}_createDropdown(e,t){const i=this.editor.ui.componentFactory;i.add(e.name,(n=>{let a;const{defaultItem:r,items:s,title:o}=e,d=s.filter((e=>t.find((({name:t})=>z(t)===e)))).map((e=>{const t=i.create(e);return e===r&&(a=t),t}));s.length!==d.length&&R.warnInvalidStyle({dropdown:e});const u=(0,l.createDropdown)(n,l.SplitButtonView),c=u.buttonView;return(0,l.addToolbarToDropdown)(u,d),c.set({label:K(o,a.label),class:null,tooltip:!0}),c.bind("icon").toMany(d,"isOn",((...e)=>{const t=e.findIndex(W);return t<0?a.icon:d[t].icon})),c.bind("label").toMany(d,"isOn",((...e)=>{const t=e.findIndex(W);return K(o,t<0?a.label:d[t].label)})),c.bind("isOn").toMany(d,"isOn",((...e)=>e.some(W))),c.bind("class").toMany(d,"isOn",((...e)=>e.some(W)?"ck-splitbutton_flatten":null)),c.on("execute",(()=>{d.some((({isOn:e})=>e))?u.isOpen=!u.isOpen:a.fire("execute")})),u.bind("isEnabled").toMany(d,"isEnabled",((...e)=>e.some(W))),u}))}_createButton(e){const t=e.name;this.editor.ui.componentFactory.add(z(t),(i=>{const n=this.editor.commands.get("drupalElementStyle"),a=new l.ButtonView(i);return a.set({label:e.title,icon:e.icon,tooltip:!0,isToggleable:!0}),a.bind("isEnabled").to(n,"isEnabled"),a.bind("isOn").to(n,"value",(e=>e===t)),a.on("execute",this._executeCommand.bind(this,t)),a}))}_executeCommand(e){this.editor.execute("drupalElementStyle",{value:e}),this.editor.editing.view.focus()}static get pluginName(){return"DrupalElementStyleUi"}}class $ extends e.Plugin{static get requires(){return[U,q]}static get pluginName(){return"DrupalElementStyle"}}const Z={DrupalMedia:k,MediaImageTextAlternative:w,MediaImageTextAlternativeEditing:g,MediaImageTextAlternativeUi:b,DrupalLinkMedia:x,DrupalElementStyle:$}})(),n=n.default})()}));
\ No newline at end of file
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.CKEditor5=t():(e.CKEditor5=e.CKEditor5||{},e.CKEditor5.drupalMedia=t())}(self,(function(){return(()=>{var e={"ckeditor5/src/core.js":(e,t,i)=>{e.exports=i("dll-reference CKEditor5.dll")("./src/core.js")},"ckeditor5/src/ui.js":(e,t,i)=>{e.exports=i("dll-reference CKEditor5.dll")("./src/ui.js")},"ckeditor5/src/utils.js":(e,t,i)=>{e.exports=i("dll-reference CKEditor5.dll")("./src/utils.js")},"ckeditor5/src/widget.js":(e,t,i)=>{e.exports=i("dll-reference CKEditor5.dll")("./src/widget.js")},"dll-reference CKEditor5.dll":e=>{"use strict";e.exports=CKEditor5.dll}},t={};function i(a){var n=t[a];if(void 0!==n)return n.exports;var r=t[a]={exports:{}};return e[a](r,r.exports,i),r.exports}i.d=(e,t)=>{for(var a in t)i.o(t,a)&&!i.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,get:t[a]})},i.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);var a={};return(()=>{"use strict";i.d(a,{default:()=>X});var e=i("ckeditor5/src/core.js"),t=i("ckeditor5/src/widget.js");class n extends e.Command{execute(e){const t=this.editor.plugins.get("DrupalMediaEditing"),i=Object.entries(t.attrs).reduce(((e,[t,i])=>(e[i]=t,e)),{}),a=Object.keys(e).reduce(((t,a)=>(i[a]&&(t[i[a]]=e[a]),t)),{});if(this.editor.plugins.has("DrupalElementStyleEditing")){const t=this.editor.plugins.get("DrupalElementStyleEditing");for(const i of t.normalizedStyles)if(e[i.attributeName]&&i.attributeValue===e[i.attributeName]){a.drupalElementStyle=i.name;break}}this.editor.model.change((e=>{this.editor.model.insertContent(function(e,t){return e.createElement("drupalMedia",t)}(e,a))}))}refresh(){const e=this.editor.model,t=e.document.selection,i=e.schema.findAllowedParent(t.getFirstPosition(),"drupalMedia");this.isEnabled=null!==i}}function r(e){return!!e&&e.is("element","drupalMedia")}function l(e){const i=e.getSelectedElement();return i&&function(e){return(0,t.isWidget)(e)&&!!e.getCustomProperty("drupalMedia")}(i)?i:null}function o(e){const t=typeof e;return null!=e&&("object"===t||"function"===t)}function s(e){for(const t of e){if(t.hasAttribute("data-drupal-media-preview"))return t;if(t.childCount){const e=s(t.getChildren());if(e)return e}}return null}class d extends e.Plugin{static get requires(){return[t.Widget]}init(){this.attrs={drupalMediaAlt:"alt",drupalMediaCaption:"data-caption",drupalMediaEntityType:"data-entity-type",drupalMediaEntityUuid:"data-entity-uuid",drupalMediaViewMode:"data-view-mode"};const e=this.editor.config.get("drupalMedia");if(!e)return;const{previewURL:t,themeError:i}=e;this.previewUrl=t,this.labelError=Drupal.t("Preview failed"),this.themeError=i||`\n <p>${Drupal.t("An error occurred while trying to preview the media. Please save your work and reload this page.")}<p>\n `,this._defineSchema(),this._defineConverters(),this.editor.commands.add("insertDrupalMedia",new n(this.editor))}async _fetchPreview(e){const t={text:this._renderElement(e),uuid:e.getAttribute("drupalMediaEntityUuid")},i=await fetch(`${this.previewUrl}?${new URLSearchParams(t)}`,{headers:{"X-Drupal-MediaPreview-CSRF-Token":this.editor.config.get("drupalMedia").previewCsrfToken}});if(i.ok){return{label:i.headers.get("drupal-media-label"),preview:await i.text()}}return{label:this.labelError,preview:this.themeError}}_defineSchema(){this.editor.model.schema.register("drupalMedia",{allowWhere:"$block",isObject:!0,isContent:!0,allowAttributes:Object.keys(this.attrs)})}_defineConverters(){const e=this.editor.conversion;e.for("upcast").elementToElement({view:{name:"drupal-media"},model:"drupalMedia"}),e.for("dataDowncast").elementToElement({model:"drupalMedia",view:{name:"drupal-media"}}),e.for("editingDowncast").elementToElement({model:"drupalMedia",view:(e,{writer:i})=>{const a=i.createContainerElement("div",{class:"drupal-media"});if(!this.previewUrl){const e=i.createRawElement("div",{"data-drupal-media-preview":"unavailable"});i.insert(i.createPositionAt(a,0),e)}return i.setCustomProperty("drupalMedia",!0,a),(0,t.toWidget)(a,i,{label:Drupal.t("Media widget")})}}).add((e=>{const t=(e,t,i)=>{const a=i.writer,n=t.item,r=i.mapper.toViewElement(t.item);let l=s(r.getChildren());if(l){if("ready"!==l.getAttribute("data-drupal-media-preview"))return;a.setAttribute("data-drupal-media-preview","loading",l)}else l=a.createRawElement("div",{"data-drupal-media-preview":"loading"}),a.insert(a.createPositionAt(r,0),l);this._fetchPreview(n).then((({label:e,preview:t})=>{l&&this.editor.editing.view.change((i=>{const a=i.createRawElement("div",{"data-drupal-media-preview":"ready","aria-label":e},(e=>{e.innerHTML=t}));i.insert(i.createPositionBefore(l),a),i.remove(l)}))}))};return e.on("attribute:drupalMediaEntityUuid:drupalMedia",t),e.on("attribute:drupalMediaViewMode:drupalMedia",t),e.on("attribute:drupalMediaEntityType:drupalMedia",t),e.on("attribute:drupalMediaAlt:drupalMedia",t),e})),e.for("editingDowncast").add((e=>{e.on("attribute:drupalElementStyle:drupalMedia",((e,t,i)=>{const a={alignLeft:"drupal-media-style-align-left",alignRight:"drupal-media-style-align-right",alignCenter:"drupal-media-style-align-center"},n=i.mapper.toViewElement(t.item),r=i.writer;a[t.attributeOldValue]&&r.removeClass(a[t.attributeOldValue],n),a[t.attributeNewValue]&&i.consumable.consume(t.item,e.name)&&r.addClass(a[t.attributeNewValue],n)}))})),Object.keys(this.attrs).forEach((t=>{e.attributeToAttribute({model:{key:t,name:"drupalMedia"},view:{name:"drupal-media",key:this.attrs[t]}})}))}_renderElement(e){const t=e.getAttributes();let i="<drupal-media";return Array.from(t).forEach((e=>{this.attrs[e[0]]&&"drupalMediaCaption"!==e[0]&&(i+=` ${this.attrs[e[0]]}="${e[1]}"`)})),i+="></drupal-media>",i}static get pluginName(){return"DrupalMediaEditing"}}var u=i("ckeditor5/src/ui.js");class c extends e.Plugin{init(){const e=this.editor,t=this.editor.config.get("drupalMedia");if(!t)return;const{libraryURL:i,openDialog:a,dialogSettings:n={}}=t;i&&"function"==typeof a&&e.ui.componentFactory.add("drupalMedia",(t=>{const r=e.commands.get("insertDrupalMedia"),l=new u.ButtonView(t);return l.set({label:Drupal.t("Insert Drupal Media"),icon:'<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M19.1873 4.86414L10.2509 6.86414V7.02335H10.2499V15.5091C9.70972 15.1961 9.01793 15.1048 8.34069 15.3136C7.12086 15.6896 6.41013 16.8967 6.75322 18.0096C7.09631 19.1226 8.3633 19.72 9.58313 19.344C10.6666 19.01 11.3484 18.0203 11.2469 17.0234H11.2499V9.80173L18.1803 8.25067V14.3868C17.6401 14.0739 16.9483 13.9825 16.2711 14.1913C15.0513 14.5674 14.3406 15.7744 14.6836 16.8875C15.0267 18.0004 16.2937 18.5978 17.5136 18.2218C18.597 17.8877 19.2788 16.8982 19.1773 15.9011H19.1803V8.02687L19.1873 8.0253V4.86414Z" fill="black"/><path fill-rule="evenodd" clip-rule="evenodd" d="M13.5039 0.743652H0.386932V12.1603H13.5039V0.743652ZM12.3379 1.75842H1.55289V11.1454H1.65715L4.00622 8.86353L6.06254 10.861L9.24985 5.91309L11.3812 9.22179L11.7761 8.6676L12.3379 9.45621V1.75842ZM6.22048 4.50869C6.22048 5.58193 5.35045 6.45196 4.27722 6.45196C3.20398 6.45196 2.33395 5.58193 2.33395 4.50869C2.33395 3.43546 3.20398 2.56543 4.27722 2.56543C5.35045 2.56543 6.22048 3.43546 6.22048 4.50869Z" fill="black"/></svg>\n',tooltip:!0}),l.bind("isOn","isEnabled").to(r,"value","isEnabled"),this.listenTo(l,"execute",(()=>{a(i,(({attributes:t})=>{e.execute("insertDrupalMedia",t)}),n)})),l}))}}class m extends e.Plugin{static get requires(){return[t.WidgetToolbarRepository]}static get pluginName(){return"DrupalMediaToolbar"}afterInit(){const{editor:e}=this;var i;e.plugins.get(t.WidgetToolbarRepository).register("drupalMedia",{ariaLabel:Drupal.t("Drupal Media toolbar"),items:(i=e.config.get("drupalMedia.toolbar"),i.map((e=>o(e)?e.name:e))||[]),getRelatedElement:e=>l(e)})}}const g="METADATA_ERROR";class p extends e.Command{refresh(){const e=this.editor.model.document.selection.getSelectedElement();this.isEnabled=r(e)&&e.getAttribute("drupalMediaIsImage")&&e.getAttribute("drupalMediaIsImage")!==g,r(e)&&e.hasAttribute("drupalMediaAlt")?this.value=e.getAttribute("drupalMediaAlt"):this.value=!1}execute(e){const{model:t}=this.editor,i=t.document.selection.getSelectedElement();e.newValue=e.newValue.trim(),t.change((t=>{e.newValue.length>0?t.setAttribute("drupalMediaAlt",e.newValue,i):t.removeAttribute("drupalMediaAlt",i)}))}}class h extends e.Plugin{init(){this._data=new WeakMap}getMetadata(e){if(this._data.get(e))return new Promise((t=>{t(this._data.get(e))}));const t=this.editor.config.get("drupalMedia");if(!t)return new Promise(((e,t)=>{t(new Error("drupalMedia configuration is required for parsing metadata."))}));if(!e.hasAttribute("drupalMediaEntityUuid"))return new Promise(((e,t)=>{t(new Error("drupalMedia element must have drupalMediaEntityUuid attribute to retrieve metadata."))}));const{metadataUrl:i}=t;return(async e=>{const t=await fetch(e);if(t.ok)return JSON.parse(await t.text());throw new Error("Fetching media embed metadata from the server failed.")})(`${i}&${new URLSearchParams({uuid:e.getAttribute("drupalMediaEntityUuid")})}`).then((t=>(this._data.set(e,t),t)))}static get pluginName(){return"DrupalMediaMetadataRepository"}}class f extends e.Plugin{static get requires(){return[h]}static get pluginName(){return"MediaImageTextAlternativeEditing"}_upcastDrupalMediaIsImage(e){const{model:t,plugins:i}=this.editor;i.get("DrupalMediaMetadataRepository").getMetadata(e).then((i=>{e&&t.enqueueChange("transparent",(t=>{t.setAttribute("drupalMediaIsImage",!!i.imageSourceMetadata,e)}))})).catch((i=>{e&&(console.warn(i.toString()),t.enqueueChange("transparent",(t=>{t.setAttribute("drupalMediaIsImage",g,e)})))}))}init(){const{editor:e,editor:{model:t,conversion:i}}=this;t.schema.extend("drupalMedia",{allowAttributes:["drupalMediaIsImage"]}),this.listenTo(t,"insertContent",((e,[t])=>{r(t)&&this._upcastDrupalMediaIsImage(t)})),i.for("upcast").add((e=>{e.on("element:drupal-media",((e,t)=>{const[i]=t.modelRange.getItems();r(i)&&this._upcastDrupalMediaIsImage(i)}),{priority:"lowest"})})),i.for("editingDowncast").add((e=>{e.on("attribute:drupalMediaIsImage",((e,t,i)=>{const{writer:a,mapper:n}=i,r=n.toViewElement(t.item);if(t.attributeNewValue!==g){const e=Array.from(r.getChildren()).find((e=>e.getCustomProperty("drupalMediaMetadataError")));return void(e&&(a.setCustomProperty("widgetLabel",e.getCustomProperty("drupalMediaOriginalWidgetLabel"),e),a.removeElement(e)))}const l=Drupal.t("Not all functionality may be available because some information could not be retrieved."),o=new u.TooltipView;o.text=l,o.position="sw";const s=new u.Template({tag:"span",children:[{tag:"span",attributes:{class:"drupal-media__metadata-error-icon"}},o]}).render(),d=a.createRawElement("div",{class:"drupal-media__metadata-error"},((e,t)=>{t.setContentOf(e,s.outerHTML)}));a.setCustomProperty("drupalMediaMetadataError",!0,d);const c=r.getCustomProperty("widgetLabel");a.setCustomProperty("drupalMediaOriginalWidgetLabel",c,d),a.setCustomProperty("widgetLabel",`${c} (${l})`,r),a.insert(a.createPositionAt(r,0),d)}),{priority:"low"})})),e.commands.add("mediaImageTextAlternative",new p(this.editor))}}function b(e){const t=e.editing.view,i=u.BalloonPanelView.defaultPositions;return{target:t.domConverter.viewToDom(t.document.selection.getSelectedElement()),positions:[i.northArrowSouth,i.northArrowSouthWest,i.northArrowSouthEast,i.southArrowNorth,i.southArrowNorthWest,i.southArrowNorthEast]}}var w=i("ckeditor5/src/utils.js");class y extends u.View{constructor(t){super(t),this.focusTracker=new w.FocusTracker,this.keystrokes=new w.KeystrokeHandler,this.labeledInput=this._createLabeledInputView(),this.saveButtonView=this._createButton(Drupal.t("Save"),e.icons.check,"ck-button-save"),this.saveButtonView.type="submit",this.cancelButtonView=this._createButton(Drupal.t("Cancel"),e.icons.cancel,"ck-button-cancel","cancel"),this._focusables=new u.ViewCollection,this._focusCycler=new u.FocusCycler({focusables:this._focusables,focusTracker:this.focusTracker,keystrokeHandler:this.keystrokes,actions:{focusPrevious:"shift + tab",focusNext:"tab"}}),this.setTemplate({tag:"form",attributes:{class:["ck","ck-text-alternative-form","ck-responsive-form"],tabindex:"-1"},children:[this.labeledInput,this.saveButtonView,this.cancelButtonView]}),(0,u.injectCssTransitionDisabler)(this)}render(){super.render(),this.keystrokes.listenTo(this.element),(0,u.submitHandler)({view:this}),[this.labeledInput,this.saveButtonView,this.cancelButtonView].forEach((e=>{this._focusables.add(e),this.focusTracker.add(e.element)}))}_createButton(e,t,i,a){const n=new u.ButtonView(this.locale);return n.set({label:e,icon:t,tooltip:!0}),n.extendTemplate({attributes:{class:i}}),a&&n.delegate("execute").to(this,a),n}_createLabeledInputView(){const e=new u.LabeledFieldView(this.locale,u.createLabeledInputText);return e.label=Drupal.t("Override text alternative"),e}}class E extends e.Plugin{static get requires(){return[u.ContextualBalloon]}static get pluginName(){return"MediaImageTextAlternativeUi"}init(){this._createButton(),this._createForm()}destroy(){super.destroy(),this._form.destroy()}_createButton(){const t=this.editor;t.ui.componentFactory.add("mediaImageTextAlternative",(i=>{const a=t.commands.get("mediaImageTextAlternative"),n=new u.ButtonView(i);return n.set({label:Drupal.t("Override media image text alternative"),icon:e.icons.lowVision,tooltip:!0}),n.bind("isVisible").to(a,"isEnabled"),this.listenTo(n,"execute",(()=>{this._showForm()})),n}))}_createForm(){const e=this.editor,t=e.editing.view.document;this._balloon=this.editor.plugins.get("ContextualBalloon"),this._form=new y(e.locale),this._form.render(),this.listenTo(this._form,"submit",(()=>{e.execute("mediaImageTextAlternative",{newValue:this._form.labeledInput.fieldView.element.value}),this._hideForm(!0)})),this.listenTo(this._form,"cancel",(()=>{this._hideForm(!0)})),this._form.keystrokes.set("Esc",((e,t)=>{this._hideForm(!0),t()})),this.listenTo(e.ui,"update",(()=>{l(t.selection)?this._isVisible&&function(e){const t=e.plugins.get("ContextualBalloon");if(l(e.editing.view.document.selection)){const i=b(e);t.updatePosition(i)}}(e):this._hideForm(!0)})),(0,u.clickOutsideHandler)({emitter:this._form,activator:()=>this._isVisible,contextElements:[this._balloon.view.element],callback:()=>this._hideForm()})}_showForm(){if(this._isVisible)return;const e=this.editor,t=e.commands.get("mediaImageTextAlternative"),i=this._form.labeledInput;this._form.disableCssTransitions(),this._isInBalloon||this._balloon.add({view:this._form,position:b(e)}),i.fieldView.element.value=t.value||"",i.fieldView.value=i.fieldView.element.value,this._form.labeledInput.fieldView.select(),this._form.enableCssTransitions()}_hideForm(e){this._isInBalloon&&(this._form.focusTracker.isFocused&&this._form.saveButtonView.focus(),this._balloon.remove(this._form),e&&this.editor.editing.view.focus())}get _isVisible(){return this._balloon.visibleView===this._form}get _isInBalloon(){return this._balloon.hasView(this._form)}}class v extends e.Plugin{static get requires(){return[f,E]}static get pluginName(){return"MediaImageTextAlternative"}}function M(e,t,i){if(t.attributes)for(const[a,n]of Object.entries(t.attributes))e.setAttribute(a,n,i);t.styles&&e.setStyle(t.styles,i),t.classes&&e.addClass(t.classes,i)}function k(e){return t=>{t.on("element:drupal-media",((t,i,a)=>{const n=i.viewItem.parent;n.is("element","a")&&function(t,n){const r=e._consumeAllowedAttributes(t,a);r&&a.writer.setAttribute(n,r,i.modelRange)}(n,"htmlLinkAttributes")}),{priority:"low"})}}class A extends e.Plugin{init(){const{editor:e}=this;if(!e.plugins.has("GeneralHtmlSupport"))return;const{schema:t}=e.model,{conversion:i}=e,a=e.plugins.get("DataFilter");t.extend("drupalMedia",{allowAttributes:["htmlLinkAttributes"]}),i.for("upcast").add(k(a)),i.for("editingDowncast").add((e=>e.on("attribute:linkHref:drupalMedia",((e,t,i)=>{if(!i.consumable.consume(t.item,"attribute:htmlLinkAttributes:drupalMedia"))return;const a=i.mapper.toViewElement(t.item),n=function(e,t,i){const a=e.createRangeOn(t);for(const{item:e}of a.getWalker())if(e.is("element",i))return e}(i.writer,a,"a");M(i.writer,t.item.getAttribute("htmlLinkAttributes"),n)}),{priority:"low"}))),i.for("dataDowncast").add((e=>e.on("attribute:linkHref:drupalMedia",((e,t,i)=>{if(!i.consumable.consume(t.item,"attribute:htmlLinkAttributes:drupalMedia"))return;const a=i.mapper.toViewElement(t.item).parent;M(i.writer,t.item.getAttribute("htmlLinkAttributes"),a)}),{priority:"low"})))}static get pluginName(){return"DrupalMediaGeneralHtmlSupport"}}class _ extends e.Plugin{static get requires(){return[d,A,c,m,v]}static get pluginName(){return"DrupalMedia"}}function C(){return e=>{e.on("element:a",((e,t,i)=>{const a=t.viewItem,n=(r=a,Array.from(r.getChildren()).find((e=>"drupal-media"===e.name)));var r;if(!n)return;if(!i.consumable.consume(a,{attributes:["href"]}))return;const l=a.getAttribute("href");if(!l)return;const o=i.convertItem(n,t.modelCursor);t.modelRange=o.modelRange,t.modelCursor=o.modelCursor;const s=t.modelCursor.nodeBefore;s&&s.is("element","drupalMedia")&&i.writer.setAttribute("linkHref",l,s)}),{priority:"high"})}}class x extends e.Plugin{static get requires(){return["LinkEditing","DrupalMediaEditing"]}static get pluginName(){return"DrupalLinkMediaEditing"}init(){const{editor:e}=this;e.model.schema.extend("drupalMedia",{allowAttributes:["linkHref"]}),e.conversion.for("upcast").add(C()),e.conversion.for("editingDowncast").add((e=>{e.on("attribute:linkHref:drupalMedia",((e,t,i)=>{const{writer:a}=i;if(!i.consumable.consume(t.item,e.name))return;const n=i.mapper.toViewElement(t.item),r=Array.from(n.getChildren()).find((e=>"a"===e.name));if(r)t.attributeNewValue?a.setAttribute("href",t.attributeNewValue,r):(a.move(a.createRangeIn(r),a.createPositionAt(n,0)),a.remove(r));else{const e=Array.from(n.getChildren()).find((e=>e.getAttribute("data-drupal-media-preview"))),i=a.createContainerElement("a",{href:t.attributeNewValue});a.insert(a.createPositionAt(n,0),i),a.move(a.createRangeOn(e),a.createPositionAt(i,0))}}),{priority:"high"})})),e.conversion.for("dataDowncast").add((e=>{e.on("attribute:linkHref:drupalMedia",((e,t,i)=>{const{writer:a}=i;if(!i.consumable.consume(t.item,e.name))return;const n=i.mapper.toViewElement(t.item),r=a.createContainerElement("a",{href:t.attributeNewValue});a.insert(a.createPositionBefore(n),r),a.move(a.createRangeOn(n),a.createPositionAt(r,0))}),{priority:"high"})}))}}class S extends e.Plugin{static get requires(){return["LinkEditing","LinkUI","DrupalMediaEditing"]}static get pluginName(){return"DrupalLinkMediaUi"}init(){const{editor:e}=this,t=e.editing.view.document;this.listenTo(t,"click",((t,i)=>{this._isSelectedLinkedMedia(e.model.document.selection)&&(i.preventDefault(),t.stop())}),{priority:"high"}),this._createToolbarLinkMediaButton()}_createToolbarLinkMediaButton(){const{editor:e}=this;e.ui.componentFactory.add("drupalLinkMedia",(t=>{const i=new u.ButtonView(t),a=e.plugins.get("LinkUI"),n=e.commands.get("link");return i.set({isEnabled:!0,label:Drupal.t("Link media"),icon:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m11.077 15 .991-1.416a.75.75 0 1 1 1.229.86l-1.148 1.64a.748.748 0 0 1-.217.206 5.251 5.251 0 0 1-8.503-5.955.741.741 0 0 1 .12-.274l1.147-1.639a.75.75 0 1 1 1.228.86L4.933 10.7l.006.003a3.75 3.75 0 0 0 6.132 4.294l.006.004zm5.494-5.335a.748.748 0 0 1-.12.274l-1.147 1.639a.75.75 0 1 1-1.228-.86l.86-1.23a3.75 3.75 0 0 0-6.144-4.301l-.86 1.229a.75.75 0 0 1-1.229-.86l1.148-1.64a.748.748 0 0 1 .217-.206 5.251 5.251 0 0 1 8.503 5.955zm-4.563-2.532a.75.75 0 0 1 .184 1.045l-3.155 4.505a.75.75 0 1 1-1.229-.86l3.155-4.506a.75.75 0 0 1 1.045-.184z"/></svg>\n',keystroke:"Ctrl+K",tooltip:!0,isToggleable:!0}),i.bind("isEnabled").to(n,"isEnabled"),i.bind("isOn").to(n,"value",(e=>!!e)),this.listenTo(i,"execute",(()=>{this._isSelectedLinkedMedia(e.model.document.selection)?a._addActionsView():a._showUI(!0)})),i}))}_isSelectedLinkedMedia(e){const t=e.getSelectedElement();return!!t&&t.is("element","drupalMedia")&&t.hasAttribute("linkHref")}}class V extends e.Plugin{static get requires(){return[x,S]}static get pluginName(){return"DrupalLinkMedia"}}const{objectFullWidth:I,objectInline:D,objectLeft:L,objectRight:T,objectCenter:B,objectBlockLeft:P,objectBlockRight:N}=e.icons,O={inline:{name:"inline",title:"In line",icon:D,modelElements:["imageInline"],isDefault:!0},alignLeft:{name:"alignLeft",title:"Left aligned image",icon:L,modelElements:["imageBlock","imageInline"],className:"image-style-align-left"},alignBlockLeft:{name:"alignBlockLeft",title:"Left aligned image",icon:P,modelElements:["imageBlock"],className:"image-style-block-align-left"},alignCenter:{name:"alignCenter",title:"Centered image",icon:B,modelElements:["imageBlock"],className:"image-style-align-center"},alignRight:{name:"alignRight",title:"Right aligned image",icon:T,modelElements:["imageBlock","imageInline"],className:"image-style-align-right"},alignBlockRight:{name:"alignBlockRight",title:"Right aligned image",icon:N,modelElements:["imageBlock"],className:"image-style-block-align-right"},block:{name:"block",title:"Centered image",icon:B,modelElements:["imageBlock"],isDefault:!0},side:{name:"side",title:"Side image",icon:T,modelElements:["imageBlock"],className:"image-style-side"}},R={full:I,left:P,right:N,center:B,inlineLeft:L,inlineRight:T,inline:D},j=[{name:"imageStyle:wrapText",title:"Wrap text",defaultItem:"imageStyle:alignLeft",items:["imageStyle:alignLeft","imageStyle:alignRight"]},{name:"imageStyle:breakText",title:"Break text",defaultItem:"imageStyle:block",items:["imageStyle:alignBlockLeft","imageStyle:block","imageStyle:alignBlockRight"]}];function F(e){(0,w.logWarning)("image-style-configuration-definition-invalid",e)}const U={normalizeStyles:function(e){return(e.configuredStyles.options||[]).map((e=>function(e){e="string"==typeof e?O[e]?{...O[e]}:{name:e}:function(e,t){const i={...t};for(const a in e)Object.prototype.hasOwnProperty.call(t,a)||(i[a]=e[a]);return i}(O[e.name],e);"string"==typeof e.icon&&(e.icon=R[e.icon]||e.icon);return e}(e))).filter((t=>function(e,{isBlockPluginLoaded:t,isInlinePluginLoaded:i}){const{modelElements:a,name:n}=e;if(!(a&&a.length&&n))return F({style:e}),!1;{const n=[t?"imageBlock":null,i?"imageInline":null];if(!a.some((e=>n.includes(e))))return(0,w.logWarning)("image-style-missing-dependency",{style:e,missingPlugins:a.map((e=>"imageBlock"===e?"ImageBlockEditing":"ImageInlineEditing"))}),!1}return!0}(t,e)))},getDefaultStylesConfiguration:function(e,t){return e&&t?{options:["inline","alignLeft","alignRight","alignCenter","alignBlockLeft","alignBlockRight","block","side"]}:e?{options:["block","side"]}:t?{options:["inline","alignLeft","alignRight"]}:{}},getDefaultDropdownDefinitions:function(e){return e.has("ImageBlockEditing")&&e.has("ImageInlineEditing")?[...j]:[]},warnInvalidStyle:F,DEFAULT_OPTIONS:O,DEFAULT_ICONS:R,DEFAULT_DROPDOWN_DEFINITIONS:j};function H(e,t){const i=e.getSelectedElement();return i&&t.checkAttribute(i,"drupalElementStyle")?i:e.getFirstPosition().findAncestor((e=>t.checkAttribute(e,"drupalElementStyle")))}class W extends e.Command{constructor(e,t){super(e),this._styles=new Map(t.map((e=>[e.name,e])))}refresh(){const e=this.editor,t=H(e.model.document.selection,e.model.schema);this.isEnabled=!!t,this.isEnabled&&t.hasAttribute("drupalElementStyle")?this.value=t.getAttribute("drupalElementStyle"):this.value=!1}execute(e={}){const t=this.editor.model;t.change((i=>{const a=e.value,n=H(t.document.selection,t.schema);!a||this._styles.get(a).isDefault?i.removeAttribute("drupalElementStyle",n):i.setAttribute("drupalElementStyle",a,n)}))}}function q(e,t){for(const i of t)if(i.name===e)return i}class K extends e.Plugin{init(){const t=this.editor;t.config.define("drupalElementStyles",{options:[]});const i=t.config.get("drupalElementStyles").options;this.normalizedStyles=i.map((t=>("string"==typeof t.icon&&e.icons[t.icon]&&(t.icon=e.icons[t.icon]),t))).filter((e=>e.attributeName&&e.attributeValue?e.modelElements&&Array.isArray(e.modelElements)?!!e.name||(console.warn("drupalElementStyles options must include a name."),!1):(console.warn("drupalElementStyles options must include an array of supported modelElements."),!1):(console.warn("drupalElementStyles options must include attributeName and attributeValue."),!1))),this._setupConversion(),t.commands.add("drupalElementStyle",new W(t,this.normalizedStyles))}_setupConversion(){const e=this.editor,t=e.model.schema,i=(a=this.normalizedStyles,(e,t,i)=>{if(!i.consumable.consume(t.item,e.name))return;const n=q(t.attributeNewValue,a),r=q(t.attributeOldValue,a),l=i.mapper.toViewElement(t.item),o=i.writer;r&&("class"===r.attributeName?o.removeClass(r.attributeValue,l):o.removeAttribute(r.attributeName,l)),n&&("class"===n.attributeName?o.addClass(n.attributeValue,l):o.setAttribute(n.attributeName,n.attributeValue,l))});var a;const n=function(e){const t=e.filter((e=>!e.isDefault));return(e,i,a)=>{if(!i.modelRange)return;const n=i.viewItem,r=(0,w.first)(i.modelRange.getItems());if(r&&a.schema.checkAttribute(r,"drupalElementStyle"))for(const e of t)if("class"===e.attributeName)a.consumable.consume(n,{classes:e.attributeValue})&&a.writer.setAttribute("drupalElementStyle",e.name,r);else if(a.consumable.consume(n,{attributes:[e.attributeName]}))for(const e of t)e.attributeValue===n.getAttribute(e.attributeName)&&a.writer.setAttribute("drupalElementStyle",e.name,r)}}(this.normalizedStyles);e.editing.downcastDispatcher.on("attribute:drupalElementStyle",i),e.data.downcastDispatcher.on("attribute:drupalElementStyle",i);[...new Set(this.normalizedStyles.map((e=>e.modelElements)).flat())].forEach((e=>{t.extend(e,{allowAttributes:"drupalElementStyle"})})),e.data.upcastDispatcher.on("element",n,{priority:"low"})}static get pluginName(){return"DrupalElementStyleEditing"}}const $=e=>e,z=(e,t)=>(e?`${e}: `:"")+t;function Z(e){return`drupalElementStyle:${e}`}class G extends e.Plugin{static get requires(){return[K]}init(){const e=this.editor.plugins,t=this.editor.config.get("drupalMedia.toolbar")||[],i=Object.values(e.get("DrupalElementStyleEditing").normalizedStyles);i.forEach((e=>{this._createButton(e)}));t.filter(o).forEach((e=>{this._createDropdown(e,i)}))}_createDropdown(e,t){const i=this.editor.ui.componentFactory;i.add(e.name,(a=>{let n;const{defaultItem:r,items:l,title:o}=e,s=l.filter((e=>t.find((({name:t})=>Z(t)===e)))).map((e=>{const t=i.create(e);return e===r&&(n=t),t}));l.length!==s.length&&U.warnInvalidStyle({dropdown:e});const d=(0,u.createDropdown)(a,u.SplitButtonView),c=d.buttonView;return(0,u.addToolbarToDropdown)(d,s),c.set({label:z(o,n.label),class:null,tooltip:!0}),c.bind("icon").toMany(s,"isOn",((...e)=>{const t=e.findIndex($);return t<0?n.icon:s[t].icon})),c.bind("label").toMany(s,"isOn",((...e)=>{const t=e.findIndex($);return z(o,t<0?n.label:s[t].label)})),c.bind("isOn").toMany(s,"isOn",((...e)=>e.some($))),c.bind("class").toMany(s,"isOn",((...e)=>e.some($)?"ck-splitbutton_flatten":null)),c.on("execute",(()=>{s.some((({isOn:e})=>e))?d.isOpen=!d.isOpen:n.fire("execute")})),d.bind("isEnabled").toMany(s,"isEnabled",((...e)=>e.some($))),d}))}_createButton(e){const t=e.name;this.editor.ui.componentFactory.add(Z(t),(i=>{const a=this.editor.commands.get("drupalElementStyle"),n=new u.ButtonView(i);return n.set({label:e.title,icon:e.icon,tooltip:!0,isToggleable:!0}),n.bind("isEnabled").to(a,"isEnabled"),n.bind("isOn").to(a,"value",(e=>e===t)),n.on("execute",this._executeCommand.bind(this,t)),n}))}_executeCommand(e){this.editor.execute("drupalElementStyle",{value:e}),this.editor.editing.view.focus()}static get pluginName(){return"DrupalElementStyleUi"}}class J extends e.Plugin{static get requires(){return[K,G]}static get pluginName(){return"DrupalElementStyle"}}const X={DrupalMedia:_,MediaImageTextAlternative:v,MediaImageTextAlternativeEditing:f,MediaImageTextAlternativeUi:E,DrupalLinkMedia:V,DrupalElementStyle:J}})(),a=a.default})()}));
\ No newline at end of file
diff --git a/core/modules/ckeditor5/js/ckeditor5_plugins/drupalMedia/src/drupalmediaediting.js b/core/modules/ckeditor5/js/ckeditor5_plugins/drupalMedia/src/drupalmediaediting.js
index 9efe0d1a0d5e87c882e4dc68073964a977179d57..ded8c0719e059cff0b2eaaae5a29cc21752adc60 100644
--- a/core/modules/ckeditor5/js/ckeditor5_plugins/drupalMedia/src/drupalmediaediting.js
+++ b/core/modules/ckeditor5/js/ckeditor5_plugins/drupalMedia/src/drupalmediaediting.js
@@ -5,6 +5,7 @@ import { Plugin } from 'ckeditor5/src/core';
import { toWidget, Widget } from 'ckeditor5/src/widget';
import InsertDrupalMediaCommand from './insertdrupalmedia';
+import { getPreviewContainer } from './utils';
/**
* @module drupalMedia/drupalmediaediting
@@ -31,7 +32,7 @@ export default class DrupalMediaEditing extends Plugin {
return;
}
const { previewURL, themeError } = options;
- this.previewURL = previewURL;
+ this.previewUrl = previewURL;
this.labelError = Drupal.t('Preview failed');
this.themeError =
themeError ||
@@ -50,13 +51,31 @@ export default class DrupalMediaEditing extends Plugin {
);
}
- async _fetchPreview(url, query) {
- const response = await fetch(`${url}?${new URLSearchParams(query)}`, {
- headers: {
- 'X-Drupal-MediaPreview-CSRF-Token':
- this.editor.config.get('drupalMedia').previewCsrfToken,
+ /**
+ * Fetches preview from the server.
+ *
+ * @param {module:engine/model/element~Element} modelElement
+ * The model element which preview should be loaded.
+ * @return {Promise<{preview: string, label: string}>}
+ * A promise that returns an object.
+ *
+ * @private
+ */
+ async _fetchPreview(modelElement) {
+ const query = {
+ text: this._renderElement(modelElement),
+ uuid: modelElement.getAttribute('drupalMediaEntityUuid'),
+ };
+
+ const response = await fetch(
+ `${this.previewUrl}?${new URLSearchParams(query)}`,
+ {
+ headers: {
+ 'X-Drupal-MediaPreview-CSRF-Token':
+ this.editor.config.get('drupalMedia').previewCsrfToken,
+ },
},
- });
+ );
if (response.ok) {
const label = response.headers.get('drupal-media-label');
const preview = await response.text();
@@ -78,6 +97,7 @@ export default class DrupalMediaEditing extends Plugin {
_defineConverters() {
const conversion = this.editor.conversion;
+
conversion.for('upcast').elementToElement({
view: {
name: 'drupal-media',
@@ -91,41 +111,99 @@ export default class DrupalMediaEditing extends Plugin {
name: 'drupal-media',
},
});
+ conversion
+ .for('editingDowncast')
+ .elementToElement({
+ model: 'drupalMedia',
+ view: (modelElement, { writer }) => {
+ const container = writer.createContainerElement('div', {
+ class: 'drupal-media',
+ });
+ if (!this.previewUrl) {
+ // If preview URL isn't available, insert empty preview element
+ // which indicates that preview couldn't be loaded.
+ const mediaPreview = writer.createRawElement('div', {
+ 'data-drupal-media-preview': 'unavailable',
+ });
+ writer.insert(writer.createPositionAt(container, 0), mediaPreview);
+ }
+ writer.setCustomProperty('drupalMedia', true, container);
- conversion.for('editingDowncast').elementToElement({
- model: 'drupalMedia',
- view: (modelElement, { writer: viewWriter }) => {
- const container = viewWriter.createContainerElement('div', {
- class: 'drupal-media',
- });
- const media = viewWriter.createRawElement(
- 'div',
- { 'data-drupal-media-preview': 'loading' },
- (domElement) => {
- if (this.previewURL) {
- this._fetchPreview(this.previewURL, {
- text: this._renderElement(modelElement),
- uuid: modelElement.getAttribute('drupalMediaEntityUuid'),
- }).then(({ label, preview }) => {
- domElement.innerHTML = preview;
- domElement.setAttribute('aria-label', label);
- domElement.setAttribute('data-drupal-media-preview', 'ready');
- });
- } else {
- domElement.innerHTML = this.themeError;
- domElement.setAttribute('aria-label', 'drupal-media');
- domElement.setAttribute(
- 'data-drupal-media-preview',
- 'unavailable',
- );
+ return toWidget(container, writer, {
+ label: Drupal.t('Media widget'),
+ });
+ },
+ })
+ .add((dispatcher) => {
+ const converter = (event, data, conversionApi) => {
+ const viewWriter = conversionApi.writer;
+ const modelElement = data.item;
+ const container = conversionApi.mapper.toViewElement(data.item);
+
+ // Search for preview container recursively from its children because
+ // the preview container could be wrapped with an element such as
+ // `<a>`.
+ let media = getPreviewContainer(container.getChildren());
+
+ // Use pre-existing media preview container if one exists. If the
+ // preview element doesn't exist, create a new element.
+ if (media) {
+ // Stop processing if media preview is unavailable or a preview is
+ // already loading.
+ if (media.getAttribute('data-drupal-media-preview') !== 'ready') {
+ return;
}
- },
- );
- viewWriter.insert(viewWriter.createPositionAt(container, 0), media);
- viewWriter.setCustomProperty('drupalMedia', true, container);
- return toWidget(container, viewWriter, { label: 'media widget' });
- },
- });
+
+ // Preview was ready meaning that a new preview can be loaded.
+ // "Change the attribute to loading to prepare for the loading of
+ // the updated preview. Preview is kept intact so that it remains
+ // interactable in the UI until the new preview has been rendered.
+ viewWriter.setAttribute(
+ 'data-drupal-media-preview',
+ 'loading',
+ media,
+ );
+ } else {
+ media = viewWriter.createRawElement('div', {
+ 'data-drupal-media-preview': 'loading',
+ });
+ viewWriter.insert(viewWriter.createPositionAt(container, 0), media);
+ }
+
+ this._fetchPreview(modelElement).then(({ label, preview }) => {
+ if (!media) {
+ // Nothing to do if associated preview wrapped no longer exist.
+ return;
+ }
+ // CKEditor 5 doesn't support async view conversion. Therefore, once
+ // the promise is fulfilled, the editing view needs to be modified
+ // manually.
+ this.editor.editing.view.change((writer) => {
+ const mediaPreview = writer.createRawElement(
+ 'div',
+ { 'data-drupal-media-preview': 'ready', 'aria-label': label },
+ (domElement) => {
+ domElement.innerHTML = preview;
+ },
+ );
+ // Insert the new preview before the previous preview element to
+ // ensure that the location remains same even if it is wrapped
+ // with another element.
+ writer.insert(writer.createPositionBefore(media), mediaPreview);
+ writer.remove(media);
+ });
+ });
+ };
+
+ // List all attributes that should trigger re-rendering of the
+ // preview.
+ dispatcher.on('attribute:drupalMediaEntityUuid:drupalMedia', converter);
+ dispatcher.on('attribute:drupalMediaViewMode:drupalMedia', converter);
+ dispatcher.on('attribute:drupalMediaEntityType:drupalMedia', converter);
+ dispatcher.on('attribute:drupalMediaAlt:drupalMedia', converter);
+
+ return dispatcher;
+ });
conversion.for('editingDowncast').add((dispatcher) => {
dispatcher.on(
diff --git a/core/modules/ckeditor5/js/ckeditor5_plugins/drupalMedia/src/drupalmediametadatarepository.js b/core/modules/ckeditor5/js/ckeditor5_plugins/drupalMedia/src/drupalmediametadatarepository.js
new file mode 100644
index 0000000000000000000000000000000000000000..e743904593a26dd92026ab03f1f8c8f244242a00
--- /dev/null
+++ b/core/modules/ckeditor5/js/ckeditor5_plugins/drupalMedia/src/drupalmediametadatarepository.js
@@ -0,0 +1,97 @@
+/* eslint-disable import/no-extraneous-dependencies */
+
+import { Plugin } from 'ckeditor5/src/core';
+
+/**
+ * @module drupalMedia/drupalmediametadatarepository
+ */
+
+/**
+ * Fetch metadata from the backend.
+ *
+ * @param {string} url
+ * The URL used for retrieving the metadata.
+ * @return {Promise<Object>}
+ * Promise containing response content.
+ *
+ * @private
+ */
+const _fetchMetadata = async (url) => {
+ const response = await fetch(url);
+ if (response.ok) {
+ return JSON.parse(await response.text());
+ }
+
+ throw new Error('Fetching media embed metadata from the server failed.');
+};
+
+/**
+ * @internal
+ */
+export default class DrupalMediaMetadataRepository extends Plugin {
+ /**
+ * @inheritdoc
+ */
+ init() {
+ this._data = new WeakMap();
+ }
+
+ /**
+ * Gets metadata for `drupalMedia` model element.
+ *
+ * @param {module:engine/model/element~Element} modelElement
+ * The model element which metadata should be retrieved.
+ * @return {Promise<Object>}
+ */
+ getMetadata(modelElement) {
+ // If metadata was retrieved earlier for the model element, return the
+ // cached value.
+ if (this._data.get(modelElement)) {
+ return new Promise((resolve) => {
+ resolve(this._data.get(modelElement));
+ });
+ }
+
+ const options = this.editor.config.get('drupalMedia');
+ if (!options) {
+ return new Promise((resolve, reject) => {
+ reject(
+ new Error(
+ 'drupalMedia configuration is required for parsing metadata.',
+ ),
+ );
+ });
+ }
+
+ if (!modelElement.hasAttribute('drupalMediaEntityUuid')) {
+ return new Promise((resolve, reject) => {
+ reject(
+ new Error(
+ 'drupalMedia element must have drupalMediaEntityUuid attribute to retrieve metadata.',
+ ),
+ );
+ });
+ }
+
+ const { metadataUrl } = options;
+ const query = new URLSearchParams({
+ uuid: modelElement.getAttribute('drupalMediaEntityUuid'),
+ });
+ // The `metadataUrl` received from the server already includes a query
+ // string (for the CSRF token).
+ // @see \Drupal\ckeditor5\Plugin\CKEditor5Plugin\Media::getDynamicPluginConfig()
+ const url = `${metadataUrl}&${query}`;
+
+ return _fetchMetadata(url).then((metadata) => {
+ this._data.set(modelElement, metadata);
+ return metadata;
+ });
+ }
+
+ /**
+ * @inheritdoc
+ */
+ static get pluginName() {
+ return 'DrupalMediaMetadataRepository';
+ }
+}
diff --git a/core/modules/ckeditor5/js/ckeditor5_plugins/drupalMedia/src/insertdrupalmedia.js b/core/modules/ckeditor5/js/ckeditor5_plugins/drupalMedia/src/insertdrupalmedia.js
index 0f985e3b86dba79823938dfe0d8222858ffa27f7..18509fa1a92962010c77805b8d82a4704716b1bf 100644
--- a/core/modules/ckeditor5/js/ckeditor5_plugins/drupalMedia/src/insertdrupalmedia.js
+++ b/core/modules/ckeditor5/js/ckeditor5_plugins/drupalMedia/src/insertdrupalmedia.js
@@ -1,6 +1,11 @@
/* eslint-disable import/no-extraneous-dependencies */
+// cSpell:words insertdrupalmediacommand
import { Command } from 'ckeditor5/src/core';
+/**
+ * @module drupalMedia/insertdrupalmediacommand
+ */
+
function createDrupalMedia(writer, attributes) {
const drupalMedia = writer.createElement('drupalMedia', attributes);
return drupalMedia;
diff --git a/core/modules/ckeditor5/js/ckeditor5_plugins/drupalMedia/src/mediaimagetextalternative/mediaimagetextalternativecommand.js b/core/modules/ckeditor5/js/ckeditor5_plugins/drupalMedia/src/mediaimagetextalternative/mediaimagetextalternativecommand.js
index 138d733b7974c362a4b7f10d07d4469f94f94848..2caacc9fa47fa58dd7c5458ba896c035e0dbb1b9 100644
--- a/core/modules/ckeditor5/js/ckeditor5_plugins/drupalMedia/src/mediaimagetextalternative/mediaimagetextalternativecommand.js
+++ b/core/modules/ckeditor5/js/ckeditor5_plugins/drupalMedia/src/mediaimagetextalternative/mediaimagetextalternativecommand.js
@@ -1,6 +1,7 @@
/* eslint-disable import/no-extraneous-dependencies */
import { Command } from 'ckeditor5/src/core';
import { isDrupalMedia } from '../utils';
+import { METADATA_ERROR } from './utils';
/**
* The media image text alternative command.
@@ -18,13 +19,10 @@ export default class MediaImageTextAlternativeCommand extends Command {
*/
refresh() {
const element = this.editor.model.document.selection.getSelectedElement();
-
- this.isEnabled = false;
- if (isDrupalMedia(element)) {
- this._isMediaImage(element).then((hasImageField) => {
- this.isEnabled = hasImageField;
- });
- }
+ this.isEnabled =
+ isDrupalMedia(element) &&
+ element.getAttribute('drupalMediaIsImage') &&
+ element.getAttribute('drupalMediaIsImage') !== METADATA_ERROR;
if (isDrupalMedia(element) && element.hasAttribute('drupalMediaAlt')) {
this.value = element.getAttribute('drupalMediaAlt');
@@ -53,25 +51,4 @@ export default class MediaImageTextAlternativeCommand extends Command {
}
});
}
-
- async _isMediaImage(modelElement) {
- const options = this.editor.config.get('drupalMedia');
- if (!options) {
- return null;
- }
-
- const { isMediaUrl } = options;
- const query = new URLSearchParams({
- uuid: modelElement.getAttribute('drupalMediaEntityUuid'),
- });
- // The `isMediaUrl` received from the server is guaranteed to already have
- // a query string (for the CSRF token).
- // @see \Drupal\ckeditor5\Plugin\CKEditor5Plugin\Media::getDynamicPluginConfig()
- const response = await fetch(`${isMediaUrl}&${query}`);
- if (response.ok) {
- return JSON.parse(await response.text());
- }
-
- return null;
- }
}
diff --git a/core/modules/ckeditor5/js/ckeditor5_plugins/drupalMedia/src/mediaimagetextalternative/mediaimagetextalternativeediting.js b/core/modules/ckeditor5/js/ckeditor5_plugins/drupalMedia/src/mediaimagetextalternative/mediaimagetextalternativeediting.js
index d1a532b0e98f8eccc35bb2347e064b055ccdde3c..540429e5a31334eb2423d93038e166652ea3b67f 100644
--- a/core/modules/ckeditor5/js/ckeditor5_plugins/drupalMedia/src/mediaimagetextalternative/mediaimagetextalternativeediting.js
+++ b/core/modules/ckeditor5/js/ckeditor5_plugins/drupalMedia/src/mediaimagetextalternative/mediaimagetextalternativeediting.js
@@ -1,13 +1,24 @@
/* eslint-disable import/no-extraneous-dependencies */
-/* cspell:words mediaimagetextalternativecommand textalternativeformview */
+/* cspell:words mediaimagetextalternativecommand drupalmediametadatarepository insertdrupalmediacommand */
import { Plugin } from 'ckeditor5/src/core';
+import { TooltipView, Template } from 'ckeditor5/src/ui';
import MediaImageTextAlternativeCommand from './mediaimagetextalternativecommand';
+import DrupalMediaMetadataRepository from '../drupalmediametadatarepository';
+import { isDrupalMedia } from '../utils';
+import { METADATA_ERROR } from './utils';
/**
- * The image text alternative editing plugin.
+ * The media image text alternative editing plugin.
*/
export default class MediaImageTextAlternativeEditing extends Plugin {
+ /**
+ * @inheritDoc
+ */
+ static get requires() {
+ return [DrupalMediaMetadataRepository];
+ }
+
/**
* @inheritDoc
*/
@@ -15,11 +26,184 @@ export default class MediaImageTextAlternativeEditing extends Plugin {
return 'MediaImageTextAlternativeEditing';
}
+ /**
+ * Upcasts `drupalMediaIsImage` from Drupal Media metadata.
+ *
+ * @param {module:engine/model/node~Node} modelElement
+ * The `drupalMedia` model element.
+ *
+ * @see module:drupalMedia/drupalmediametadatarepository~DrupalMediaMetadataRepository
+ *
+ * @private
+ */
+ _upcastDrupalMediaIsImage(modelElement) {
+ const { model, plugins } = this.editor;
+ const metadataRepository = plugins.get('DrupalMediaMetadataRepository');
+
+ // Get all metadata for drupalMedia elements to set value for
+ // drupalMediaIsImage attribute. When other plugins start using the
+ // metadata, this functionality will be handled more generically.
+ metadataRepository
+ .getMetadata(modelElement)
+ .then((metadata) => {
+ if (!modelElement) {
+ // Nothing to do if model element has been removed before
+ // promise was resolved.
+ return;
+ }
+ // Enqueue a model change in `transparent` batch to make it
+ // invisible to the undo/redo functionality.
+ model.enqueueChange('transparent', (writer) => {
+ writer.setAttribute(
+ 'drupalMediaIsImage',
+ !!metadata.imageSourceMetadata,
+ modelElement,
+ );
+ });
+ })
+ .catch((e) => {
+ if (!modelElement) {
+ // Nothing to do if model element has been removed before
+ // promise was resolved.
+ return;
+ }
+ console.warn(e.toString());
+ model.enqueueChange('transparent', (writer) => {
+ writer.setAttribute(
+ 'drupalMediaIsImage',
+ METADATA_ERROR,
+ modelElement,
+ );
+ });
+ });
+ }
+
/**
* @inheritDoc
*/
init() {
- this.editor.commands.add(
+ const {
+ editor,
+ editor: { model, conversion },
+ } = this;
+
+ model.schema.extend('drupalMedia', {
+ allowAttributes: ['drupalMediaIsImage'],
+ });
+
+ // Listen to `insertContent` event on the model to set `drupalMediaIsImage`
+ // attribute when `drupalMedia` model element is inserted directly to the
+ // model.
+ // @see module:drupalMedia/insertdrupalmediacommand~InsertDrupalMediaCommand
+ this.listenTo(model, 'insertContent', (evt, [modelElement]) => {
+ if (!isDrupalMedia(modelElement)) {
+ return;
+ }
+
+ this._upcastDrupalMediaIsImage(modelElement);
+ });
+
+ // On upcast, get `drupalMediaIsImage` attribute value from media metadata
+ // repository.
+ conversion.for('upcast').add((dispatcher) => {
+ dispatcher.on(
+ 'element:drupal-media',
+ (event, data) => {
+ const [modelElement] = data.modelRange.getItems();
+ if (!isDrupalMedia(modelElement)) {
+ return;
+ }
+
+ this._upcastDrupalMediaIsImage(modelElement);
+ },
+ // This converter needs to have the lowest priority to ensure that the
+ // model element and its attributes have been converted.
+ { priority: 'lowest' },
+ );
+ });
+
+ // Display error in the editor if fetching Drupal Media metadata failed.
+ conversion.for('editingDowncast').add((dispatcher) => {
+ dispatcher.on(
+ 'attribute:drupalMediaIsImage',
+ (event, data, conversionApi) => {
+ const { writer, mapper } = conversionApi;
+ const container = mapper.toViewElement(data.item);
+
+ if (data.attributeNewValue !== METADATA_ERROR) {
+ const existingError = Array.from(container.getChildren()).find(
+ (child) => child.getCustomProperty('drupalMediaMetadataError'),
+ );
+ // If the view contains an existing error, it should be removed
+ // since retrieving metadata was successful.
+ if (existingError) {
+ writer.setCustomProperty(
+ 'widgetLabel',
+ existingError.getCustomProperty(
+ 'drupalMediaOriginalWidgetLabel',
+ ),
+ existingError,
+ );
+ writer.removeElement(existingError);
+ }
+
+ return;
+ }
+
+ const message = Drupal.t(
+ 'Not all functionality may be available because some information could not be retrieved.',
+ );
+
+ const tooltip = new TooltipView();
+ tooltip.text = message;
+ tooltip.position = 'sw';
+
+ const html = new Template({
+ tag: 'span',
+ children: [
+ {
+ tag: 'span',
+ attributes: {
+ class: 'drupal-media__metadata-error-icon',
+ },
+ },
+ tooltip,
+ ],
+ }).render();
+
+ const error = writer.createRawElement(
+ 'div',
+ {
+ class: 'drupal-media__metadata-error',
+ },
+ (domElement, domConverter) => {
+ domConverter.setContentOf(domElement, html.outerHTML);
+ },
+ );
+ writer.setCustomProperty('drupalMediaMetadataError', true, error);
+
+ // Edit widget label to ensure the current status of media embed is
+ // available for screen reader users.
+ const originalWidgetLabel =
+ container.getCustomProperty('widgetLabel');
+ writer.setCustomProperty(
+ 'drupalMediaOriginalWidgetLabel',
+ originalWidgetLabel,
+ error,
+ );
+ writer.setCustomProperty(
+ 'widgetLabel',
+ `${originalWidgetLabel} (${message})`,
+ container,
+ );
+
+ writer.insert(writer.createPositionAt(container, 0), error);
+ },
+ { priority: 'low' },
+ );
+ });
+
+ editor.commands.add(
'mediaImageTextAlternative',
new MediaImageTextAlternativeCommand(this.editor),
);
diff --git a/core/modules/ckeditor5/js/ckeditor5_plugins/drupalMedia/src/mediaimagetextalternative/utils.js b/core/modules/ckeditor5/js/ckeditor5_plugins/drupalMedia/src/mediaimagetextalternative/utils.js
new file mode 100644
index 0000000000000000000000000000000000000000..8a1e64555459dbb63b100e8ba3d9f46592e8949e
--- /dev/null
+++ b/core/modules/ckeditor5/js/ckeditor5_plugins/drupalMedia/src/mediaimagetextalternative/utils.js
@@ -0,0 +1,9 @@
+/* eslint-disable import/prefer-default-export */
+/**
+ * Used for indicating metadata errors in model.
+ *
+ * @type {string}
+ *
+ * @see \Drupal\ckeditor5\Controller\CKEditor5MediaController
+ */
+export const METADATA_ERROR = 'METADATA_ERROR';
diff --git a/core/modules/ckeditor5/js/ckeditor5_plugins/drupalMedia/src/utils.js b/core/modules/ckeditor5/js/ckeditor5_plugins/drupalMedia/src/utils.js
index 5041e3880819c55f0b87f79d0fd41d2ed0629bae..333893f9215a2b58f7ff945495478b71be5d1363 100644
--- a/core/modules/ckeditor5/js/ckeditor5_plugins/drupalMedia/src/utils.js
+++ b/core/modules/ckeditor5/js/ckeditor5_plugins/drupalMedia/src/utils.js
@@ -65,3 +65,31 @@ export function isObject(value) {
const type = typeof value;
return value != null && (type === 'object' || type === 'function');
}
+
+/**
+ * Gets preview container element from the media element.
+ *
+ * @param {Iterable.<module:engine/view/element~Element>} children
+ * The child elements.
+ * @return {null|module:engine/view/element~Element}
+ * The preview child element if available.
+ */
+export function getPreviewContainer(children) {
+ // eslint-disable-next-line no-restricted-syntax
+ for (const child of children) {
+ if (child.hasAttribute('data-drupal-media-preview')) {
+ return child;
+ }
+
+ if (child.childCount) {
+ const recursive = getPreviewContainer(child.getChildren());
+ // Return only if preview container was found within this element's
+ // children.
+ if (recursive) {
+ return recursive;
+ }
+ }
+ }
+
+ return null;
+}
diff --git a/core/modules/ckeditor5/src/Controller/CKEditor5MediaController.php b/core/modules/ckeditor5/src/Controller/CKEditor5MediaController.php
index a508b199f5a77f4eace58a0d5366a7092c6f19b6..dfb742f65e4b88bafde8c3088f62e2c5687924a8 100644
--- a/core/modules/ckeditor5/src/Controller/CKEditor5MediaController.php
+++ b/core/modules/ckeditor5/src/Controller/CKEditor5MediaController.php
@@ -4,6 +4,7 @@
namespace Drupal\ckeditor5\Controller;
+use Drupal\Component\Uuid\Uuid;
use Drupal\Core\Access\AccessResult;
use Drupal\Core\Access\AccessResultInterface;
use Drupal\Core\Controller\ControllerBase;
@@ -76,7 +77,7 @@ public static function create(ContainerInterface $container) {
}
/**
- * Checks if media has a image field.
+ * Returns JSON response containing metadata about media entity.
*
* @param \Symfony\Component\HttpFoundation\Request $request
* The current request object.
@@ -89,9 +90,9 @@ public static function create(ContainerInterface $container) {
* @throws \Symfony\Component\HttpKernel\Exception\NotFoundHttpException
* Thrown when no media with the provided UUID exists.
*/
- public function isMediaImage(Request $request) {
+ public function mediaEntityMetadata(Request $request) {
$uuid = $request->query->get('uuid');
- if ($uuid == '') {
+ if (!$uuid || !Uuid::isValid($uuid)) {
throw new BadRequestHttpException();
}
// Access is enforced on route level.
@@ -99,13 +100,20 @@ public function isMediaImage(Request $request) {
if (!$media = $this->entityRepository->loadEntityByUuid('media', $uuid)) {
throw new NotFoundHttpException();
}
+ $image_field = $this->getMediaImageSourceFieldName($media);
+ $response = [];
+ if ($image_field) {
+ $response['imageSourceMetadata'] = [
+ 'alt' => $media->{$image_field}->alt,
+ ];
+ }
// Note that we intentionally do not use:
// - \Drupal\Core\Cache\CacheableResponse because caching it on the server
// side is wasteful, hence there is no need for cacheability metadata.
// - \Drupal\Core\Render\HtmlResponse because there is no need for
// attachments nor cacheability metadata.
- return (new JsonResponse($this->hasImageField($media), 200))
+ return (new JsonResponse($response, 200))
// Do not allow any intermediary to cache the response, only the end user.
->setPrivate()
// Allow the end user to cache it for up to 5 minutes.
@@ -140,7 +148,7 @@ public function access(Editor $editor): AccessResultInterface {
// https://www.drupal.org/project/drupal/issues/2786941 has been resolved.
$request = $this->requestStack->getCurrentRequest();
$uuid = $request->query->get('uuid');
- if (!$uuid) {
+ if (!$uuid || !Uuid::isValid($uuid)) {
throw new BadRequestHttpException();
}
$media = $this->entityRepository->loadEntityByUuid('media', $uuid);
@@ -155,24 +163,23 @@ public function access(Editor $editor): AccessResultInterface {
}
/**
- * Check if the media type of the entity has a image field.
+ * Gets the name of an image media item's source field.
*
* @param \Drupal\media\MediaInterface $media
* The media item being embedded.
*
- * @return bool
- * Flag indicating whether the media type has image field or not.
- *
- * @see \Drupal\media\Form\EditorMediaDialog::getMediaImageSourceFieldName()
+ * @return string|null
+ * The name of the image source field configured for the media item, or
+ * NULL if the source field is not an image field.
*/
- protected function hasImageField(MediaInterface $media) {
+ protected function getMediaImageSourceFieldName(MediaInterface $media) {
$field_definition = $media->getSource()
->getSourceFieldDefinition($media->bundle->entity);
$item_class = $field_definition->getItemDefinition()->getClass();
if (is_a($item_class, ImageItem::class, TRUE)) {
- return TRUE;
+ return $field_definition->getName();
}
- return FALSE;
+ return NULL;
}
}
diff --git a/core/modules/ckeditor5/src/Plugin/CKEditor5Plugin/Media.php b/core/modules/ckeditor5/src/Plugin/CKEditor5Plugin/Media.php
index 40d65f06791600423a0656c79bf42655e8159272..9055046e64c272e66e6f5a732b510aba104b9eee 100644
--- a/core/modules/ckeditor5/src/Plugin/CKEditor5Plugin/Media.php
+++ b/core/modules/ckeditor5/src/Plugin/CKEditor5Plugin/Media.php
@@ -29,8 +29,8 @@ public function getDynamicPluginConfig(array $static_plugin_config, EditorInterf
->setRouteParameter('filter_format', $editor->getFilterFormat()->id())
->toString(TRUE)
->getGeneratedUrl();
- $dynamic_plugin_config['drupalMedia']['isMediaUrl'] = self::getUrlWithReplacedCsrfTokenPlaceholder(
- Url::fromRoute('ckeditor5.media_image')
+ $dynamic_plugin_config['drupalMedia']['metadataUrl'] = self::getUrlWithReplacedCsrfTokenPlaceholder(
+ Url::fromRoute('ckeditor5.media_entity_metadata')
->setRouteParameter('editor', $editor->id())
);
$dynamic_plugin_config['drupalMedia']['previewCsrfToken'] = \Drupal::csrfToken()->get('X-Drupal-MediaPreview-CSRF-Token');
diff --git a/core/modules/ckeditor5/tests/src/Functional/MediaImageTest.php b/core/modules/ckeditor5/tests/src/Functional/MediaEntityMetadataApiTest.php
similarity index 77%
rename from core/modules/ckeditor5/tests/src/Functional/MediaImageTest.php
rename to core/modules/ckeditor5/tests/src/Functional/MediaEntityMetadataApiTest.php
index d66937cfa0a5c4146af27c0c782c6d39b62ee302..55a27fab5dca57150bb0b294780865fd7e3cdedc 100644
--- a/core/modules/ckeditor5/tests/src/Functional/MediaImageTest.php
+++ b/core/modules/ckeditor5/tests/src/Functional/MediaEntityMetadataApiTest.php
@@ -15,12 +15,12 @@
use Symfony\Component\Validator\ConstraintViolation;
/**
- * Tests that image media types are determined correctly.
+ * Tests the media entity metadata API.
*
* @group ckeditor5
* @internal
*/
-class MediaImageTest extends BrowserTestBase {
+class MediaEntityMetadataApiTest extends BrowserTestBase {
use TestFileCreationTrait;
use MediaTypeCreationTrait;
@@ -64,12 +64,19 @@ class MediaImageTest extends BrowserTestBase {
*/
protected $editor;
+ /**
+ * @var \Drupal\Component\Uuid\UuidInterface
+ */
+ protected $uuidService;
+
/**
* {@inheritdoc}
*/
protected function setUp(): void {
parent::setUp();
+ $this->uuidService = $this->container->get('uuid');
+
$filtered_html_format = FilterFormat::create([
'format' => 'filtered_html',
'name' => 'Filtered HTML',
@@ -147,10 +154,10 @@ function (ConstraintViolation $v) {
}
/**
- * Tests that media entity with image field is recognized.
+ * Tests the media entity metadata API.
*/
- public function testIsMediaImage() {
- $path = '/ckeditor5/filtered_html/is-media-image';
+ public function testApi() {
+ $path = '/ckeditor5/filtered_html/media-entity-metadata';
$token = $this->container->get('csrf_token')->get(ltrim($path, '/'));
$uuid = $this->mediaImage->uuid();
@@ -159,17 +166,34 @@ public function testIsMediaImage() {
$this->drupalGet($path, ['query' => ['uuid' => $uuid, 'token' => $token]]);
$this->assertSession()->statusCodeEquals(200);
- $this->assertSame(json_encode(TRUE), $this->getSession()->getPage()->getContent());
+ $this->assertSame(json_encode(['imageSourceMetadata' => ['alt' => 'default alt']]), $this->getSession()->getPage()->getContent());
+
+ $this->mediaImage->set('field_media_image', [
+ 'target_id' => 1,
+ 'alt' => '',
+ 'title' => 'default title',
+ ])->save();
+ $this->drupalGet($path, ['query' => ['uuid' => $uuid, 'token' => $token]]);
+ $this->assertSession()->statusCodeEquals(200);
+ $this->assertSame(json_encode(['imageSourceMetadata' => ['alt' => '']]), $this->getSession()->getPage()->getContent());
$this->drupalGet($path, ['query' => ['uuid' => $this->mediaFile->uuid(), 'token' => $token]]);
$this->assertSession()->statusCodeEquals(200);
- $this->assertSame(json_encode(FALSE), $this->getSession()->getPage()->getContent());
+ $this->assertSame(json_encode([]), $this->getSession()->getPage()->getContent());
// Ensure that unpublished media returns 403.
$this->mediaImage->setUnpublished()->save();
$this->drupalGet($path, ['query' => ['uuid' => $uuid, 'token' => $token]]);
$this->assertSession()->statusCodeEquals(403);
+ // Ensure that valid, but non-existing UUID returns 404.
+ $this->drupalGet($path, ['query' => ['uuid' => $this->uuidService->generate(), 'token' => $token]]);
+ $this->assertSession()->statusCodeEquals(404);
+
+ // Ensure that invalid UUID returns 400.
+ $this->drupalGet($path, ['query' => ['uuid' => '🦙', 'token' => $token]]);
+ $this->assertSession()->statusCodeEquals(400);
+
// Ensure that users that don't have access to the filter format receive
// either 404 or 403.
$this->drupalLogout();
diff --git a/core/modules/ckeditor5/tests/src/FunctionalJavascript/MediaLibraryTest.php b/core/modules/ckeditor5/tests/src/FunctionalJavascript/MediaLibraryTest.php
index d1c0c71e4b11cb99e0a5482e56b1fced99f53455..ba451bc7845cb80adab74ab3ffef55819e2ceaaf 100644
--- a/core/modules/ckeditor5/tests/src/FunctionalJavascript/MediaLibraryTest.php
+++ b/core/modules/ckeditor5/tests/src/FunctionalJavascript/MediaLibraryTest.php
@@ -266,4 +266,40 @@ public function testAllowedMediaTypes() {
}
}
+ /**
+ * Ensures that alt text can be changed on Media Library inserted Media.
+ */
+ public function testAlt() {
+ $page = $this->getSession()->getPage();
+ $assert_session = $this->assertSession();
+
+ $this->drupalGet('/node/add/blog');
+ $this->waitForEditor();
+ $this->pressEditorButton('Insert Drupal Media');
+ $this->assertNotEmpty($assert_session->waitForId('drupal-modal'));
+ $assert_session->elementExists('css', '.js-media-library-item')->click();
+ $assert_session->elementExists('css', '.ui-dialog-buttonpane')->pressButton('Insert selected');
+ $this->assertNotEmpty($assert_session->waitForElementVisible('css', '.ck-widget.drupal-media img'));
+
+ // Test that clicking the media widget triggers a CKEditor balloon panel
+ // with a single button to override the alt text.
+ $this->click('.ck-widget.drupal-media');
+ $this->assertVisibleBalloon('[aria-label="Drupal Media toolbar"]');
+ // Click the "Override media image text alternative" button.
+ $this->getBalloonButton('Override media image text alternative')->click();
+ $this->assertVisibleBalloon('.ck-text-alternative-form');
+ // Assert that the value is currently empty.
+ $alt_override_input = $page->find('css', '.ck-balloon-panel .ck-text-alternative-form input[type=text]');
+ $this->assertSame('', $alt_override_input->getValue());
+
+ $test_alt = 'Alt text override';
+ $alt_override_input->setValue($test_alt);
+ $this->getBalloonButton('Save')->click();
+
+ $this->assertNotEmpty($assert_session->waitForElementVisible('css', '.ck-widget.drupal-media img[alt*="' . $test_alt . '"]'));
+ $xpath = new \DOMXPath($this->getEditorDataAsDom());
+ $drupal_media = $xpath->query('//drupal-media')[0];
+ $this->assertEquals($test_alt, $drupal_media->getAttribute('alt'));
+ }
+
}
diff --git a/core/modules/ckeditor5/tests/src/FunctionalJavascript/MediaTest.php b/core/modules/ckeditor5/tests/src/FunctionalJavascript/MediaTest.php
index 8a2835d0dbd8d5f0ea89a5dcdf63a280ea3304b5..f0520d3096754de78c89a96cc2857bdc7e3213c5 100644
--- a/core/modules/ckeditor5/tests/src/FunctionalJavascript/MediaTest.php
+++ b/core/modules/ckeditor5/tests/src/FunctionalJavascript/MediaTest.php
@@ -346,14 +346,12 @@ public function testAlt() {
// Assert that the img within the media embed within the CKEditor contains
// the overridden alt text set in the dialog.
- // @todo Uncomment this in https://www.drupal.org/project/ckeditor5/issues/3206522.
- // @codingStandardsIgnoreLine
-// $this->assertNotEmpty($assert_session->waitForElementVisible('css', '.ck-widget.drupal-media img[alt*="' . $who_is_zartan . '"]'));
+ $this->assertNotEmpty($assert_session->waitForElementVisible('css', '.ck-widget.drupal-media img[alt*="' . $who_is_zartan . '"]'));
// Test `aria-label` attribute appears on the widget wrapper.
$assert_session->elementExists('css', '.ck-widget.drupal-media [aria-label="Screaming hairy armadillo"]');
// Test that the downcast drupal-media element now has the alt attribute
- // entered in the dialog.
+ // entered in the balloon.
$this->assertSourceAttributeSame('alt', $who_is_zartan);
// The alt field should now display the override instead of the default.
@@ -368,11 +366,9 @@ public function testAlt() {
// Set the alt field to the new alt text.
$alt_override_input->setValue($cobra_commander_bio);
$this->getBalloonButton('Save')->click();
- // Assert that the img within the media embed preview
- // within the CKEditor contains the overridden alt text set in the dialog.
- // @todo Uncomment this in https://www.drupal.org/project/ckeditor5/issues/3206522.
- // @codingStandardsIgnoreLine
-// $this->assertNotEmpty($assert_session->waitForElementVisible('css', 'drupal-media img[alt*="' . $cobra_commander_bio . '"]'));
+ // Assert that the img within the media embed preview inside CKEditor 5
+ // contains the overridden alt text set in the balloon.
+ $this->assertNotEmpty($assert_session->waitForElementVisible('css', '.ck-widget.drupal-media img[alt*="' . $cobra_commander_bio . '"]'));
// Test that the downcast drupal-media element now has the alt attribute
// entered in the dialog.
@@ -402,7 +398,7 @@ public function testAlt() {
// empty string indicator.
$this->assertSourceAttributeSame('alt', '""');
- // Test that setting alt to back to an empty string within the dialog will
+ // Test that setting alt to back to an empty string within the balloon will
// restore the default alt value saved in to the media image field of the
// media item.
$this->getBalloonButton('Override media image text alternative')->click();