@ckeditor/ckeditor5-ckbox 0.0.0-nightly-20230725.1 → 0.0.0-nightly-20230727.0

package/build/ckbox.js

@@ -2,4 +2,4 @@
 /*!
  * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md.
- */(()=>{var e={704:(e,t,i)=>{e.exports=i(79)("./src/core.js")},492:(e,t,i)=>{e.exports=i(79)("./src/engine.js")},273:(e,t,i)=>{e.exports=i(79)("./src/ui.js")},448:(e,t,i)=>{e.exports=i(79)("./src/upload.js")},209:(e,t,i)=>{e.exports=i(79)("./src/utils.js")},79:e=>{"use strict";e.exports=CKEditor5.dll}},t={};function i(n){var o=t[n];if(void 0!==o)return o.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),i.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};(()=>{"use strict";i.r(n),i.d(n,{CKBox:()=>y,CKBoxEditing:()=>v,CKBoxUI:()=>o});var e=i(704),t=i(273);class o extends e.Plugin{static get pluginName(){return"CKBoxUI"}afterInit(){const e=this.editor,i=e.commands.get("ckbox");if(!i)return;const n=e.t;e.ui.componentFactory.add("ckbox",(o=>{const r=new t.ButtonView(o);return r.set({label:n("Open file manager"),icon:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M11.627 16.5zm5.873-.196zm0-7.001V8h-13v8.5h4.341c.191.54.457 1.044.785 1.5H2a1.5 1.5 0 0 1-1.5-1.5v-13A1.5 1.5 0 0 1 2 2h4.5a1.5 1.5 0 0 1 1.06.44L9.122 4H16a1.5 1.5 0 0 1 1.5 1.5v1A1.5 1.5 0 0 1 19 8v2.531a6.027 6.027 0 0 0-1.5-1.228zM16 6.5v-1H8.5l-2-2H2v13h1V8a1.5 1.5 0 0 1 1.5-1.5H16z"/><path d="M14.5 19.5a5 5 0 1 1 0-10 5 5 0 0 1 0 10zM15 14v-2h-1v2h-2v1h2v2h1v-2h2v-1h-2z"/></svg>',tooltip:!0}),r.bind("isOn","isEnabled").to(i,"value","isEnabled"),r.on("execute",(()=>{e.execute("ckbox")})),r}))}}var r=i(492),s=i(209);const a=4e3,c=80,d=10;function l({token:e,id:t,origin:i,width:n,extension:o}){const r=u(e),s=function(e){const t=[e*d/100,c],i=Math.floor(Math.max(...t)),n=[Math.min(e,a)];let o=n[0];for(;o-i>=i;)o-=i,n.unshift(o);return n}(n),l=function(e){if("bmp"===e||"tiff"===e||"jpg"===e)return"jpeg";return e}(o);return{imageFallbackUrl:g({environmentId:r,id:t,origin:i,width:n,extension:l}),imageSources:[{srcset:s.map((e=>`${g({environmentId:r,id:t,origin:i,width:e,extension:"webp"})} ${e}w`)).join(","),sizes:`(max-width: ${n}px) 100vw, ${n}px`,type:"image/webp"}]}}function u(e){const[,t]=e.value.split(".");return JSON.parse(atob(t)).aud}function g({environmentId:e,id:t,origin:i,width:n,extension:o}){return new URL(`${e}/assets/${t}/images/${n}.${o}`,i).toString()}class m extends e.Command{constructor(e){super(e),this._chosenAssets=new Set,this._wrapper=null,this._initListeners()}refresh(){this.value=this._getValue(),this.isEnabled=this._checkEnabled()}execute(){this.fire("ckbox:open")}_getValue(){return null!==this._wrapper}_checkEnabled(){const e=this.editor.commands.get("insertImage"),t=this.editor.commands.get("link");return!(!e.isEnabled&&!t.isEnabled)}_prepareOptions(){const e=this.editor.config.get("ckbox");return{theme:e.theme,language:e.language,tokenUrl:e.tokenUrl,serviceOrigin:e.serviceOrigin,assetsOrigin:e.assetsOrigin,dialog:{onClose:()=>this.fire("ckbox:close")},assets:{onChoose:e=>this.fire("ckbox:choose",e)}}}_initListeners(){const e=this.editor,t=e.model,i=!e.config.get("ckbox.ignoreDataId");this.on("ckbox",(()=>{this.refresh()}),{priority:"low"}),this.on("ckbox:open",(()=>{this.isEnabled&&!this.value&&(this._wrapper=(0,s.createElement)(document,"div",{class:"ck ckbox-wrapper"}),document.body.appendChild(this._wrapper),window.CKBox.mount(this._wrapper,this._prepareOptions()))})),this.on("ckbox:close",(()=>{this.value&&(this._wrapper.remove(),this._wrapper=null)})),this.on("ckbox:choose",((n,o)=>{if(!this.isEnabled)return;const r=e.commands.get("insertImage"),s=e.commands.get("link"),a=e.plugins.get("CKBoxEditing"),c=function({assets:e,origin:t,token:i,isImageAllowed:n,isLinkAllowed:o}){return e.map((e=>function(e){const t=e.data.metadata;if(!t)return!1;return t.width&&t.height}(e)?{id:e.data.id,type:"image",attributes:h(e,i,t)}:{id:e.data.id,type:"link",attributes:b(e,i,t)})).filter((e=>"image"===e.type?n:o))}({assets:o,origin:e.config.get("ckbox.assetsOrigin"),token:a.getToken(),isImageAllowed:r.isEnabled,isLinkAllowed:s.isEnabled});0!==c.length&&t.change((e=>{for(const t of c){const n=t===c[c.length-1];this._insertAsset(t,n,e),i&&(setTimeout((()=>this._chosenAssets.delete(t)),1e3),this._chosenAssets.add(t))}}))})),this.listenTo(e,"destroy",(()=>{this.fire("ckbox:close"),this._chosenAssets.clear()}))}_insertAsset(e,t,i){const n=this.editor.model.document.selection;i.removeSelectionAttribute("linkHref"),"image"===e.type?this._insertImage(e):this._insertLink(e,i),t||i.setSelection(n.getLastPosition())}_insertImage(e){const t=this.editor,{imageFallbackUrl:i,imageSources:n,imageTextAlternative:o}=e.attributes;t.execute("insertImage",{source:{src:i,sources:n,alt:o}})}_insertLink(e,t){const i=this.editor,n=i.model,o=n.document.selection,{linkName:r,linkHref:a}=e.attributes;if(o.isCollapsed){const e=(0,s.toMap)(o.getAttributes()),i=t.createText(r,e),a=n.insertContent(i);t.setSelection(a)}i.execute("link",a)}}function h(e,t,i){const{imageFallbackUrl:n,imageSources:o}=l({token:t,origin:i,id:e.data.id,width:e.data.metadata.width,extension:e.data.extension});return{imageFallbackUrl:n,imageSources:o,imageTextAlternative:e.data.metadata.description||""}}function b(e,t,i){return{linkName:e.data.name,linkHref:p(e,t,i)}}function p(e,t,i){const n=u(t),o=new URL(`${n}/assets/${e.data.id}/file`,i);return o.searchParams.set("download","true"),o.toString()}var k=i(448);class f extends e.Plugin{static get requires(){return["ImageUploadEditing","ImageUploadProgress",k.FileRepository,v]}static get pluginName(){return"CKBoxUploadAdapter"}async afterInit(){const e=this.editor,t=!!e.config.get("ckbox"),i=!!window.CKBox;if(!t&&!i)return;const n=e.plugins.get(k.FileRepository),o=e.plugins.get(v);n.createUploadAdapter=t=>new x(t,o.getToken(),e);const r=!e.config.get("ckbox.ignoreDataId"),s=e.plugins.get("ImageUploadEditing");r&&s.on("uploadComplete",((t,{imageElement:i,data:n})=>{e.model.change((e=>{e.setAttribute("ckboxImageId",n.ckboxImageId,i)}))}))}}class x{constructor(e,t,i){this.loader=e,this.token=t,this.editor=i,this.controller=new AbortController,this.serviceOrigin=i.config.get("ckbox.serviceOrigin"),this.assetsOrigin=i.config.get("ckbox.assetsOrigin")}async getAvailableCategories(e=0){const t=new URL("categories",this.serviceOrigin);return t.searchParams.set("limit",50..toString()),t.searchParams.set("offset",e.toString()),this._sendHttpRequest({url:t}).then((async t=>{if(t.totalCount-(e+50)>0){const i=await this.getAvailableCategories(e+50);return[...t.items,...i]}return t.items})).catch((()=>{this.controller.signal.throwIfAborted(),(0,s.logError)("ckbox-fetch-category-http-error")}))}async getCategoryIdForFile(e){const t=w(e.name),i=await this.getAvailableCategories();if(!i)return null;const n=this.editor.config.get("ckbox.defaultUploadCategories");if(n){const e=Object.keys(n).find((e=>n[e].find((e=>e.toLowerCase()==t))));if(e){const t=i.find((t=>t.id===e||t.name===e));return t?t.id:null}}const o=i.find((e=>e.extensions.find((e=>e.toLowerCase()==t))));return o?o.id:null}async upload(){const e=this.editor.t,t=e("Cannot determine a category for the uploaded file."),i=await this.loader.file,n=await this.getCategoryIdForFile(i);if(!n)return Promise.reject(t);const o=new URL("assets",this.serviceOrigin),r=new FormData;r.append("categoryId",n),r.append("file",i);const s={method:"POST",url:o,data:r,onUploadProgress:e=>{e.lengthComputable&&(this.loader.uploadTotal=e.total,this.loader.uploaded=e.loaded)}};return this._sendHttpRequest(s).then((async e=>{const t=await this._getImageWidth(),n=w(i.name),o=l({token:this.token,id:e.id,origin:this.assetsOrigin,width:t,extension:n});return{ckboxImageId:e.id,default:o.imageFallbackUrl,sources:o.imageSources}})).catch((()=>{const t=e("Cannot upload file:")+` ${i.name}.`;return Promise.reject(t)}))}abort(){this.controller.abort()}_sendHttpRequest({url:e,method:t="GET",data:i,onUploadProgress:n}){const o=this.controller.signal,r=new XMLHttpRequest;r.open(t,e.toString(),!0),r.setRequestHeader("Authorization",this.token.value),r.setRequestHeader("CKBox-Version","CKEditor 5"),r.responseType="json";const s=()=>{r.abort()};return new Promise(((e,t)=>{o.addEventListener("abort",s),r.addEventListener("loadstart",(()=>{o.addEventListener("abort",s)})),r.addEventListener("loadend",(()=>{o.removeEventListener("abort",s)})),r.addEventListener("error",(()=>{t()})),r.addEventListener("abort",(()=>{t()})),r.addEventListener("load",(async()=>{const i=r.response;return!i||i.statusCode>=400?t(i&&i.message):e(i)})),n&&r.upload.addEventListener("progress",(e=>{n(e)})),r.send(i)}))}_getImageWidth(){return new Promise((e=>{const t=new Image;t.onload=()=>{URL.revokeObjectURL(t.src),e(t.width)},t.src=this.loader.data}))}}function w(e){return e.match(/\.(?<ext>[^.]+)$/).groups.ext.toLowerCase()}class v extends e.Plugin{static get pluginName(){return"CKBoxEditing"}static get requires(){return["CloudServices","LinkEditing","PictureEditing",f]}async init(){const e=this.editor,t=!!e.config.get("ckbox"),i=!!window.CKBox;if(!t&&!i)return;this._initConfig();const n=e.plugins.get("CloudServicesCore"),o=e.config.get("ckbox.tokenUrl");if(o===e.config.get("cloudServices.tokenUrl")){const t=e.plugins.get("CloudServices");this._token=t.token}else this._token=await n.createToken(o).init();e.config.get("ckbox.ignoreDataId")||(this._initSchema(),this._initConversion(),this._initFixers()),i&&e.commands.add("ckbox",new m(e))}getToken(){return this._token}_initConfig(){const e=this.editor;e.config.define("ckbox",{serviceOrigin:"https://api.ckbox.io",assetsOrigin:"https://ckbox.cloud",defaultUploadCategories:null,ignoreDataId:!1,language:e.locale.uiLanguage,theme:"default",tokenUrl:e.config.get("cloudServices.tokenUrl")});if(!e.config.get("ckbox.tokenUrl"))throw new s.CKEditorError("ckbox-plugin-missing-token-url",this);e.plugins.has("ImageBlockEditing")||e.plugins.has("ImageInlineEditing")||(0,s.logError)("ckbox-plugin-image-feature-missing",e)}_initSchema(){const e=this.editor.model.schema;e.extend("$text",{allowAttributes:"ckboxLinkId"}),e.isRegistered("imageBlock")&&e.extend("imageBlock",{allowAttributes:["ckboxImageId","ckboxLinkId"]}),e.isRegistered("imageInline")&&e.extend("imageInline",{allowAttributes:["ckboxImageId","ckboxLinkId"]}),e.addAttributeCheck(((e,t)=>{if(!!!e.last.getAttribute("linkHref")&&"ckboxLinkId"===t)return!1}))}_initConversion(){const e=this.editor;e.conversion.for("downcast").add((e=>{e.on("attribute:ckboxLinkId:imageBlock",((e,t,i)=>{const{writer:n,mapper:o,consumable:r}=i;if(!r.consume(t.item,e.name))return;const s=[...o.toViewElement(t.item).getChildren()].find((e=>"a"===e.name));s&&(t.item.hasAttribute("ckboxLinkId")?n.setAttribute("data-ckbox-resource-id",t.item.getAttribute("ckboxLinkId"),s):n.removeAttribute("data-ckbox-resource-id",s))}),{priority:"low"}),e.on("attribute:ckboxLinkId",((e,t,i)=>{const{writer:n,mapper:o,consumable:r}=i;if(r.consume(t.item,e.name)){if(t.attributeOldValue){const e=C(n,t.attributeOldValue);n.unwrap(o.toViewRange(t.range),e)}if(t.attributeNewValue){const e=C(n,t.attributeNewValue);if(t.item.is("selection")){const t=n.document.selection;n.wrap(t.getFirstRange(),e)}else n.wrap(o.toViewRange(t.range),e)}}}),{priority:"low"})})),e.conversion.for("upcast").add((e=>{e.on("element:a",((e,t,i)=>{const{writer:n,consumable:o}=i;if(!t.viewItem.getAttribute("href"))return;if(!o.consume(t.viewItem,{attributes:["data-ckbox-resource-id"]}))return;const r=t.viewItem.getAttribute("data-ckbox-resource-id");if(r)if(t.modelRange)for(let e of t.modelRange.getItems())e.is("$textProxy")&&(e=e.textNode),A(e)&&n.setAttribute("ckboxLinkId",r,e);else{const e=t.modelCursor.nodeBefore||t.modelCursor.parent;n.setAttribute("ckboxLinkId",r,e)}}),{priority:"low"})})),e.conversion.for("downcast").attributeToAttribute({model:"ckboxImageId",view:"data-ckbox-resource-id"}),e.conversion.for("upcast").elementToAttribute({model:{key:"ckboxImageId",value:e=>e.getAttribute("data-ckbox-resource-id")},view:{attributes:{"data-ckbox-resource-id":/[\s\S]+/}}})}_initFixers(){const e=this.editor,t=e.model,i=t.document.selection;t.document.registerPostFixer(function(e){return t=>{let i=!1;const n=e.model,o=e.commands.get("ckbox");if(!o)return i;for(const e of n.document.differ.getChanges()){if("insert"!==e.type&&"attribute"!==e.type)continue;const n="insert"===e.type?new r.Range(e.position,e.position.getShiftedBy(e.length)):e.range,s="attribute"===e.type&&"linkHref"===e.attributeKey&&null===e.attributeNewValue;for(const e of n.getItems()){if(s&&e.hasAttribute("ckboxLinkId")){t.removeAttribute("ckboxLinkId",e),i=!0;continue}const n=I(e,o._chosenAssets);for(const o of n){const n="image"===o.type?"ckboxImageId":"ckboxLinkId";o.id!==e.getAttribute(n)&&(t.setAttribute(n,o.id,e),i=!0)}}}return i}}(e)),t.document.registerPostFixer(function(e){return t=>!(e.hasAttribute("linkHref")||!e.hasAttribute("ckboxLinkId"))&&(t.removeSelectionAttribute("ckboxLinkId"),!0)}(i))}}function I(e,t){const i=e.is("element","imageInline")||e.is("element","imageBlock"),n=e.hasAttribute("linkHref");return[...t].filter((t=>"image"===t.type&&i?t.attributes.imageFallbackUrl===e.getAttribute("src"):"link"===t.type&&n?t.attributes.linkHref===e.getAttribute("linkHref"):void 0))}function C(e,t){const i=e.createAttributeElement("a",{"data-ckbox-resource-id":t},{priority:5});return e.setCustomProperty("link",!0,i),i}function A(e){return!!e.is("$text")||!(!e.is("element","imageInline")&&!e.is("element","imageBlock"))}class y extends e.Plugin{static get pluginName(){return"CKBox"}static get requires(){return[v,o]}}})(),(window.CKEditor5=window.CKEditor5||{}).ckbox=n})();
+ */(()=>{var e={704:(e,t,i)=>{e.exports=i(79)("./src/core.js")},492:(e,t,i)=>{e.exports=i(79)("./src/engine.js")},273:(e,t,i)=>{e.exports=i(79)("./src/ui.js")},448:(e,t,i)=>{e.exports=i(79)("./src/upload.js")},209:(e,t,i)=>{e.exports=i(79)("./src/utils.js")},79:e=>{"use strict";e.exports=CKEditor5.dll}},t={};function i(o){var n=t[o];if(void 0!==n)return n.exports;var r=t[o]={exports:{}};return e[o](r,r.exports,i),r.exports}i.d=(e,t)=>{for(var o in t)i.o(t,o)&&!i.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},i.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),i.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var o={};(()=>{"use strict";i.r(o),i.d(o,{CKBox:()=>x,CKBoxEditing:()=>b,CKBoxUI:()=>n});var e=i(704),t=i(273);class n extends e.Plugin{static get pluginName(){return"CKBoxUI"}afterInit(){const e=this.editor,i=e.commands.get("ckbox");if(!i)return;const o=e.t;e.ui.componentFactory.add("ckbox",(n=>{const r=new t.ButtonView(n);return r.set({label:o("Open file manager"),icon:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M11.627 16.5zm5.873-.196zm0-7.001V8h-13v8.5h4.341c.191.54.457 1.044.785 1.5H2a1.5 1.5 0 0 1-1.5-1.5v-13A1.5 1.5 0 0 1 2 2h4.5a1.5 1.5 0 0 1 1.06.44L9.122 4H16a1.5 1.5 0 0 1 1.5 1.5v1A1.5 1.5 0 0 1 19 8v2.531a6.027 6.027 0 0 0-1.5-1.228zM16 6.5v-1H8.5l-2-2H2v13h1V8a1.5 1.5 0 0 1 1.5-1.5H16z"/><path d="M14.5 19.5a5 5 0 1 1 0-10 5 5 0 0 1 0 10zM15 14v-2h-1v2h-2v1h2v2h1v-2h2v-1h-2z"/></svg>',tooltip:!0}),r.bind("isOn","isEnabled").to(i,"value","isEnabled"),r.on("execute",(()=>{e.execute("ckbox")})),r}))}}var r=i(492),s=i(209);function a(e){const t=[];let i=0;for(const o in e){const n=parseInt(o,10);isNaN(n)||(n>i&&(i=n),t.push(`${e[o]} ${o}w`))}const o=[{srcset:t.join(","),sizes:`(max-width: ${i}px) 100vw, ${i}px`,type:"image/webp"}];return{imageFallbackUrl:e.default,imageSources:o}}class c extends e.Command{constructor(e){super(e),this._chosenAssets=new Set,this._wrapper=null,this._initListeners()}refresh(){this.value=this._getValue(),this.isEnabled=this._checkEnabled()}execute(){this.fire("ckbox:open")}_getValue(){return null!==this._wrapper}_checkEnabled(){const e=this.editor.commands.get("insertImage"),t=this.editor.commands.get("link");return!(!e.isEnabled&&!t.isEnabled)}_prepareOptions(){const e=this.editor.config.get("ckbox");return{theme:e.theme,language:e.language,tokenUrl:e.tokenUrl,serviceOrigin:e.serviceOrigin,dialog:{onClose:()=>this.fire("ckbox:close")},assets:{onChoose:e=>this.fire("ckbox:choose",e)}}}_initListeners(){const e=this.editor,t=e.model,i=!e.config.get("ckbox.ignoreDataId");this.on("ckbox",(()=>{this.refresh()}),{priority:"low"}),this.on("ckbox:open",(()=>{this.isEnabled&&!this.value&&(this._wrapper=(0,s.createElement)(document,"div",{class:"ck ckbox-wrapper"}),document.body.appendChild(this._wrapper),window.CKBox.mount(this._wrapper,this._prepareOptions()))})),this.on("ckbox:close",(()=>{this.value&&(this._wrapper.remove(),this._wrapper=null)})),this.on("ckbox:choose",((o,n)=>{if(!this.isEnabled)return;const r=e.commands.get("insertImage"),s=e.commands.get("link"),a=function({assets:e,isImageAllowed:t,isLinkAllowed:i}){return e.map((e=>function(e){const t=e.data.metadata;if(!t)return!1;return t.width&&t.height}(e)?{id:e.data.id,type:"image",attributes:l(e)}:{id:e.data.id,type:"link",attributes:d(e)})).filter((e=>"image"===e.type?t:i))}({assets:n,isImageAllowed:r.isEnabled,isLinkAllowed:s.isEnabled});0!==a.length&&t.change((e=>{for(const t of a){const o=t===a[a.length-1];this._insertAsset(t,o,e),i&&(setTimeout((()=>this._chosenAssets.delete(t)),1e3),this._chosenAssets.add(t))}}))})),this.listenTo(e,"destroy",(()=>{this.fire("ckbox:close"),this._chosenAssets.clear()}))}_insertAsset(e,t,i){const o=this.editor.model.document.selection;i.removeSelectionAttribute("linkHref"),"image"===e.type?this._insertImage(e):this._insertLink(e,i),t||i.setSelection(o.getLastPosition())}_insertImage(e){const t=this.editor,{imageFallbackUrl:i,imageSources:o,imageTextAlternative:n}=e.attributes;t.execute("insertImage",{source:{src:i,sources:o,alt:n}})}_insertLink(e,t){const i=this.editor,o=i.model,n=o.document.selection,{linkName:r,linkHref:a}=e.attributes;if(n.isCollapsed){const e=(0,s.toMap)(n.getAttributes()),i=t.createText(r,e),a=o.insertContent(i);t.setSelection(a)}i.execute("link",a)}}function l(e){const{imageFallbackUrl:t,imageSources:i}=a(e.data.imageUrls);return{imageFallbackUrl:t,imageSources:i,imageTextAlternative:e.data.metadata.description||""}}function d(e){return{linkName:e.data.name,linkHref:u(e)}}function u(e){const t=new URL(e.data.url);return t.searchParams.set("download","true"),t.toString()}var g=i(448);class m extends e.Plugin{static get requires(){return["ImageUploadEditing","ImageUploadProgress",g.FileRepository,b]}static get pluginName(){return"CKBoxUploadAdapter"}async afterInit(){const e=this.editor,t=!!e.config.get("ckbox"),i=!!window.CKBox;if(!t&&!i)return;const o=e.plugins.get(g.FileRepository),n=e.plugins.get(b);o.createUploadAdapter=t=>new h(t,n.getToken(),e);const r=!e.config.get("ckbox.ignoreDataId"),s=e.plugins.get("ImageUploadEditing");r&&s.on("uploadComplete",((t,{imageElement:i,data:o})=>{e.model.change((e=>{e.setAttribute("ckboxImageId",o.ckboxImageId,i)}))}))}}class h{constructor(e,t,i){this.loader=e,this.token=t,this.editor=i,this.controller=new AbortController,this.serviceOrigin=i.config.get("ckbox.serviceOrigin")}getWorkspaceId(){const e=(0,this.editor.t)("Cannot access default workspace."),t=this.editor.config.get("ckbox.defaultUploadWorkspaceId"),i=function(e,t){const[,i]=e.value.split("."),o=JSON.parse(atob(i)),n=o.auth&&o.auth.ckbox&&o.auth.ckbox.workspaces||[o.aud];return t?"superadmin"==(o.auth&&o.auth.ckbox&&o.auth.ckbox.role)||n.includes(t)?t:null:n[0]}(this.token,t);if(null==i)throw(0,s.logError)("ckbox-access-default-workspace-error"),e;return i}async getAvailableCategories(e=0){const t=new URL("categories",this.serviceOrigin);return t.searchParams.set("limit",50..toString()),t.searchParams.set("offset",e.toString()),t.searchParams.set("workspaceId",this.getWorkspaceId()),this._sendHttpRequest({url:t}).then((async t=>{if(t.totalCount-(e+50)>0){const i=await this.getAvailableCategories(e+50);return[...t.items,...i]}return t.items})).catch((()=>{this.controller.signal.throwIfAborted(),(0,s.logError)("ckbox-fetch-category-http-error")}))}async getCategoryIdForFile(e){const t=function(e){const t=/\.(?<ext>[^.]+)$/;return e.match(t).groups.ext.toLowerCase()}(e.name),i=await this.getAvailableCategories();if(!i)return null;const o=this.editor.config.get("ckbox.defaultUploadCategories");if(o){const e=Object.keys(o).find((e=>o[e].find((e=>e.toLowerCase()==t))));if(e){const t=i.find((t=>t.id===e||t.name===e));return t?t.id:null}}const n=i.find((e=>e.extensions.find((e=>e.toLowerCase()==t))));return n?n.id:null}async upload(){const e=this.editor.t,t=e("Cannot determine a category for the uploaded file."),i=await this.loader.file,o=await this.getCategoryIdForFile(i);if(!o)return Promise.reject(t);const n=new URL("assets",this.serviceOrigin),r=new FormData;n.searchParams.set("workspaceId",this.getWorkspaceId()),r.append("categoryId",o),r.append("file",i);const s={method:"POST",url:n,data:r,onUploadProgress:e=>{e.lengthComputable&&(this.loader.uploadTotal=e.total,this.loader.uploaded=e.loaded)}};return this._sendHttpRequest(s).then((async e=>{const t=a(e.imageUrls);return{ckboxImageId:e.id,default:t.imageFallbackUrl,sources:t.imageSources}})).catch((()=>{const t=e("Cannot upload file:")+` ${i.name}.`;return Promise.reject(t)}))}abort(){this.controller.abort()}_sendHttpRequest({url:e,method:t="GET",data:i,onUploadProgress:o}){const n=this.controller.signal,r=new XMLHttpRequest;r.open(t,e.toString(),!0),r.setRequestHeader("Authorization",this.token.value),r.setRequestHeader("CKBox-Version","CKEditor 5"),r.responseType="json";const s=()=>{r.abort()};return new Promise(((e,t)=>{n.addEventListener("abort",s),r.addEventListener("loadstart",(()=>{n.addEventListener("abort",s)})),r.addEventListener("loadend",(()=>{n.removeEventListener("abort",s)})),r.addEventListener("error",(()=>{t()})),r.addEventListener("abort",(()=>{t()})),r.addEventListener("load",(async()=>{const i=r.response;return!i||i.statusCode>=400?t(i&&i.message):e(i)})),o&&r.upload.addEventListener("progress",(e=>{o(e)})),r.send(i)}))}}class b extends e.Plugin{static get pluginName(){return"CKBoxEditing"}static get requires(){return["CloudServices","LinkEditing","PictureEditing",m]}async init(){const e=this.editor,t=!!e.config.get("ckbox"),i=!!window.CKBox;if(!t&&!i)return;this._initConfig();const o=e.plugins.get("CloudServicesCore"),n=e.config.get("ckbox.tokenUrl");if(n===e.config.get("cloudServices.tokenUrl")){const t=e.plugins.get("CloudServices");this._token=t.token}else this._token=await o.createToken(n).init();e.config.get("ckbox.ignoreDataId")||(this._initSchema(),this._initConversion(),this._initFixers()),i&&e.commands.add("ckbox",new c(e))}getToken(){return this._token}_initConfig(){const e=this.editor;e.config.define("ckbox",{serviceOrigin:"https://api.ckbox.io",defaultUploadCategories:null,ignoreDataId:!1,language:e.locale.uiLanguage,theme:"default",tokenUrl:e.config.get("cloudServices.tokenUrl")});if(!e.config.get("ckbox.tokenUrl"))throw new s.CKEditorError("ckbox-plugin-missing-token-url",this);e.plugins.has("ImageBlockEditing")||e.plugins.has("ImageInlineEditing")||(0,s.logError)("ckbox-plugin-image-feature-missing",e)}_initSchema(){const e=this.editor.model.schema;e.extend("$text",{allowAttributes:"ckboxLinkId"}),e.isRegistered("imageBlock")&&e.extend("imageBlock",{allowAttributes:["ckboxImageId","ckboxLinkId"]}),e.isRegistered("imageInline")&&e.extend("imageInline",{allowAttributes:["ckboxImageId","ckboxLinkId"]}),e.addAttributeCheck(((e,t)=>{if(!!!e.last.getAttribute("linkHref")&&"ckboxLinkId"===t)return!1}))}_initConversion(){const e=this.editor;e.conversion.for("downcast").add((e=>{e.on("attribute:ckboxLinkId:imageBlock",((e,t,i)=>{const{writer:o,mapper:n,consumable:r}=i;if(!r.consume(t.item,e.name))return;const s=[...n.toViewElement(t.item).getChildren()].find((e=>"a"===e.name));s&&(t.item.hasAttribute("ckboxLinkId")?o.setAttribute("data-ckbox-resource-id",t.item.getAttribute("ckboxLinkId"),s):o.removeAttribute("data-ckbox-resource-id",s))}),{priority:"low"}),e.on("attribute:ckboxLinkId",((e,t,i)=>{const{writer:o,mapper:n,consumable:r}=i;if(r.consume(t.item,e.name)){if(t.attributeOldValue){const e=k(o,t.attributeOldValue);o.unwrap(n.toViewRange(t.range),e)}if(t.attributeNewValue){const e=k(o,t.attributeNewValue);if(t.item.is("selection")){const t=o.document.selection;o.wrap(t.getFirstRange(),e)}else o.wrap(n.toViewRange(t.range),e)}}}),{priority:"low"})})),e.conversion.for("upcast").add((e=>{e.on("element:a",((e,t,i)=>{const{writer:o,consumable:n}=i;if(!t.viewItem.getAttribute("href"))return;if(!n.consume(t.viewItem,{attributes:["data-ckbox-resource-id"]}))return;const r=t.viewItem.getAttribute("data-ckbox-resource-id");if(r)if(t.modelRange)for(let e of t.modelRange.getItems())e.is("$textProxy")&&(e=e.textNode),f(e)&&o.setAttribute("ckboxLinkId",r,e);else{const e=t.modelCursor.nodeBefore||t.modelCursor.parent;o.setAttribute("ckboxLinkId",r,e)}}),{priority:"low"})})),e.conversion.for("downcast").attributeToAttribute({model:"ckboxImageId",view:"data-ckbox-resource-id"}),e.conversion.for("upcast").elementToAttribute({model:{key:"ckboxImageId",value:e=>e.getAttribute("data-ckbox-resource-id")},view:{attributes:{"data-ckbox-resource-id":/[\s\S]+/}}})}_initFixers(){const e=this.editor,t=e.model,i=t.document.selection;t.document.registerPostFixer(function(e){return t=>{let i=!1;const o=e.model,n=e.commands.get("ckbox");if(!n)return i;for(const e of o.document.differ.getChanges()){if("insert"!==e.type&&"attribute"!==e.type)continue;const o="insert"===e.type?new r.Range(e.position,e.position.getShiftedBy(e.length)):e.range,s="attribute"===e.type&&"linkHref"===e.attributeKey&&null===e.attributeNewValue;for(const e of o.getItems()){if(s&&e.hasAttribute("ckboxLinkId")){t.removeAttribute("ckboxLinkId",e),i=!0;continue}const o=p(e,n._chosenAssets);for(const n of o){const o="image"===n.type?"ckboxImageId":"ckboxLinkId";n.id!==e.getAttribute(o)&&(t.setAttribute(o,n.id,e),i=!0)}}}return i}}(e)),t.document.registerPostFixer(function(e){return t=>!(e.hasAttribute("linkHref")||!e.hasAttribute("ckboxLinkId"))&&(t.removeSelectionAttribute("ckboxLinkId"),!0)}(i))}}function p(e,t){const i=e.is("element","imageInline")||e.is("element","imageBlock"),o=e.hasAttribute("linkHref");return[...t].filter((t=>"image"===t.type&&i?t.attributes.imageFallbackUrl===e.getAttribute("src"):"link"===t.type&&o?t.attributes.linkHref===e.getAttribute("linkHref"):void 0))}function k(e,t){const i=e.createAttributeElement("a",{"data-ckbox-resource-id":t},{priority:5});return e.setCustomProperty("link",!0,i),i}function f(e){return!!e.is("$text")||!(!e.is("element","imageInline")&&!e.is("element","imageBlock"))}class x extends e.Plugin{static get pluginName(){return"CKBox"}static get requires(){return[b,n]}}})(),(window.CKEditor5=window.CKEditor5||{}).ckbox=o})();

package/lang/contexts.json

@@ -1,4 +1,5 @@
 {
   "Open file manager": "Toolbar button tooltip for opening a file browser that allows inserting an image or a file to the editor.",
-  "Cannot determine a category for the uploaded file.": "A message is displayed when CKEditor 5 cannot associate an image with any of the categories defined in CKBox while uploading an asset."
+  "Cannot determine a category for the uploaded file.": "A message is displayed when CKEditor 5 cannot associate an image with any of the categories defined in CKBox while uploading an asset.",
+  "Cannot access default workspace.": "A message is displayed when the user is not authorised to access CKBox workspace configured as default one."
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-ckbox",
-  "version": "0.0.0-nightly-20230725.1",
+  "version": "0.0.0-nightly-20230727.0",
   "description": "CKBox integration for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -12,7 +12,7 @@
   ],
   "main": "src/index.js",
   "dependencies": {
-    "ckeditor5": "0.0.0-nightly-20230725.1"
+    "ckeditor5": "0.0.0-nightly-20230727.0"
   },
   "engines": {
     "node": ">=16.0.0",

package/src/ckboxcommand.d.ts

@@ -78,7 +78,6 @@ export default class CKBoxCommand extends Command {
      * - language The language for CKBox dialog.
      * - tokenUrl The token endpoint URL.
      * - serviceOrigin The base URL of the API service.
-     * - assetsOrigin The base URL for assets inserted into the editor.
      * - dialog.onClose The callback function invoked after closing the CKBox dialog.
      * - assets.onChoose The callback function invoked after choosing the assets.
      */

package/src/ckboxcommand.js

@@ -4,7 +4,7 @@
  */
 import { Command } from 'ckeditor5/src/core';
 import { createElement, toMap } from 'ckeditor5/src/utils';
-import { getEnvironmentId, getImageUrls } from './utils';
+import { getImageUrls } from './utils';
 // Defines the waiting time (in milliseconds) for inserting the chosen asset into the model. The chosen asset is temporarily stored in the
 // `CKBoxCommand#_chosenAssets` and it is removed from there automatically after this time. See `CKBoxCommand#_chosenAssets` for more
 // details.
@@ -94,7 +94,6 @@ export default class CKBoxCommand extends Command {
      * - language The language for CKBox dialog.
      * - tokenUrl The token endpoint URL.
      * - serviceOrigin The base URL of the API service.
-     * - assetsOrigin The base URL for assets inserted into the editor.
      * - dialog.onClose The callback function invoked after closing the CKBox dialog.
      * - assets.onChoose The callback function invoked after choosing the assets.
      */
@@ -106,7 +105,6 @@ export default class CKBoxCommand extends Command {
             language: ckboxConfig.language,
             tokenUrl: ckboxConfig.tokenUrl,
             serviceOrigin: ckboxConfig.serviceOrigin,
-            assetsOrigin: ckboxConfig.assetsOrigin,
             dialog: {
                 onClose: () => this.fire('ckbox:close')
             },
@@ -150,12 +148,8 @@ export default class CKBoxCommand extends Command {
             }
             const imageCommand = editor.commands.get('insertImage');
             const linkCommand = editor.commands.get('link');
-            const ckboxEditing = editor.plugins.get('CKBoxEditing');
-            const assetsOrigin = editor.config.get('ckbox.assetsOrigin');
             const assetsToProcess = prepareAssets({
                 assets,
-                origin: assetsOrigin,
-                token: ckboxEditing.getToken(),
                 isImageAllowed: imageCommand.isEnabled,
                 isLinkAllowed: linkCommand.isEnabled
             });
@@ -247,18 +241,18 @@ export default class CKBoxCommand extends Command {
 /**
  * Parses the chosen assets into the internal data format. Filters out chosen assets that are not allowed.
  */
-function prepareAssets({ assets, origin, token, isImageAllowed, isLinkAllowed }) {
+function prepareAssets({ assets, isImageAllowed, isLinkAllowed }) {
     return assets
         .map(asset => isImage(asset) ?
         {
             id: asset.data.id,
             type: 'image',
-            attributes: prepareImageAssetAttributes(asset, token, origin)
+            attributes: prepareImageAssetAttributes(asset)
         } :
         {
             id: asset.data.id,
             type: 'link',
-            attributes: prepareLinkAssetAttributes(asset, token, origin)
+            attributes: prepareLinkAssetAttributes(asset)
         })
         .filter(asset => asset.type === 'image' ? isImageAllowed : isLinkAllowed);
 }
@@ -267,14 +261,8 @@ function prepareAssets({ assets, origin, token, isImageAllowed, isLinkAllowed })
  *
  * @param origin The base URL for assets inserted into the editor.
  */
-function prepareImageAssetAttributes(asset, token, origin) {
-    const { imageFallbackUrl, imageSources } = getImageUrls({
-        token,
-        origin,
-        id: asset.data.id,
-        width: asset.data.metadata.width,
-        extension: asset.data.extension
-    });
+function prepareImageAssetAttributes(asset) {
+    const { imageFallbackUrl, imageSources } = getImageUrls(asset.data.imageUrls);
     return {
         imageFallbackUrl,
         imageSources,
@@ -286,10 +274,10 @@ function prepareImageAssetAttributes(asset, token, origin) {
  *
  * @param origin The base URL for assets inserted into the editor.
  */
-function prepareLinkAssetAttributes(asset, token, origin) {
+function prepareLinkAssetAttributes(asset) {
     return {
         linkName: asset.data.name,
-        linkHref: getAssetUrl(asset, token, origin)
+        linkHref: getAssetUrl(asset)
     };
 }
 /**
@@ -307,9 +295,8 @@ function isImage(asset) {
  *
  * @param origin The base URL for assets inserted into the editor.
  */
-function getAssetUrl(asset, token, origin) {
-    const environmentId = getEnvironmentId(token);
-    const url = new URL(`${environmentId}/assets/${asset.data.id}/file`, origin);
+function getAssetUrl(asset) {
+    const url = new URL(asset.data.url);
     url.searchParams.set('download', 'true');
     return url.toString();
 }

package/src/ckboxconfig.d.ts

@@ -36,7 +36,6 @@ import type { TokenUrl } from '@ckeditor/ckeditor5-cloud-services';
  * 			},
  * 			ignoreDataId: true,
  * 			serviceOrigin: 'https://example.com/',
- * 			assetsOrigin: 'https://example.cloud/',
  * 			tokenUrl: 'https://example.com/cs-token-endpoint'
  * 		}
  * 	} )
@@ -80,6 +79,12 @@ export interface CKBoxConfig {
      * @default null
      */
     defaultUploadCategories?: Record<string, Array<string>> | null;
+    /**
+     * Defines the workspace id to use during upload when the user has access to more than one workspace.
+     *
+     * If defined, it is an error, when the user has no access to the specified workspace.
+     */
+    defaultUploadWorkspaceId?: string;
     /**
      * Inserts the unique asset ID as the `data-ckbox-resource-id` attribute. To disable this behavior, set it to `true`.
      *
@@ -92,12 +97,6 @@ export interface CKBoxConfig {
      * @default 'https://api.ckbox.io'
      */
     serviceOrigin?: string;
-    /**
-     * Configures the base URL for assets inserted into the editor. Required only in on-premises installations.
-     *
-     * @default 'https://ckbox.cloud'
-     */
-    assetsOrigin?: string;
     /**
      * Configures the language for the CKBox dialog.
      *
@@ -219,6 +218,18 @@ export interface CKBoxAssetLinkAttributesDefinition {
      */
     linkHref: string;
 }
+/**
+ * The source set of the responsive image provided by the CKBox backend.
+ *
+ * Each numeric key corresponds to display width of the image.
+ */
+export interface CKBoxImageUrls {
+    [width: number]: string;
+    /**
+     * A fallback URL for browsers that do not support the "webp" format.
+     */
+    default: string;
+}
 /**
  * Raw asset definition that is received from the CKBox feature.
  */
@@ -227,10 +238,6 @@ export interface CKBoxRawAssetDefinition {
      * A raw asset data definition.
      */
     data: CKBoxRawAssetDataDefinition;
-    /**
-     * An asset origin URL.
-     */
-    origin: string;
 }
 /**
  * Part of raw asset data that is received from the CKBox feature.
@@ -240,10 +247,6 @@ export interface CKBoxRawAssetDataDefinition {
      *  An unique asset id.
      */
     id: string;
-    /**
-     *  An asset extension.
-     */
-    extension: string;
     /**
      * An asset name.
      */
@@ -252,6 +255,14 @@ export interface CKBoxRawAssetDataDefinition {
      *  A raw asset metadata definition.
      */
     metadata?: CKBoxRawAssetMetadataDefinition;
+    /**
+     * The source set of the responsive image.
+     */
+    imageUrls?: CKBoxImageUrls;
+    /**
+     * The asset location.
+     */
+    url: string;
 }
 /**
  * Part of raw asset data that is received from the CKBox feature. Properties are set only if the chosen asset is an image.

package/src/ckboxediting.js

@@ -75,7 +75,6 @@ export default class CKBoxEditing extends Plugin {
         const editor = this.editor;
         editor.config.define('ckbox', {
             serviceOrigin: 'https://api.ckbox.io',
-            assetsOrigin: 'https://ckbox.cloud',
             defaultUploadCategories: null,
             ignoreDataId: false,
             language: editor.locale.uiLanguage,

package/src/ckboxuploadadapter.js

@@ -2,7 +2,7 @@
  * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-/* globals AbortController, FormData, URL, Image, XMLHttpRequest, window */
+/* globals AbortController, FormData, URL, XMLHttpRequest, window */
 /**
  * @module ckbox/ckboxuploadadapter
  */
@@ -10,7 +10,7 @@ import { Plugin } from 'ckeditor5/src/core';
 import { FileRepository } from 'ckeditor5/src/upload';
 import { logError } from 'ckeditor5/src/utils';
 import CKBoxEditing from './ckboxediting';
-import { getImageUrls } from './utils';
+import { getImageUrls, getWorkspaceId } from './utils';
 /**
  * A plugin that enables file uploads in CKEditor 5 using the CKBox server–side connector.
  * See the {@glink features/file-management/ckbox CKBox file manager integration} guide to learn how to configure
@@ -76,7 +76,25 @@ class Adapter {
         this.editor = editor;
         this.controller = new AbortController();
         this.serviceOrigin = editor.config.get('ckbox.serviceOrigin');
-        this.assetsOrigin = editor.config.get('ckbox.assetsOrigin');
+    }
+    /**
+     * The ID of workspace to use.
+     */
+    getWorkspaceId() {
+        const t = this.editor.t;
+        const cannotAccessDefaultWorkspaceError = t('Cannot access default workspace.');
+        const defaultWorkspaceId = this.editor.config.get('ckbox.defaultUploadWorkspaceId');
+        const workspaceId = getWorkspaceId(this.token, defaultWorkspaceId);
+        if (workspaceId == null) {
+            /**
+             * The user is not authorized to access workspace defined in `ckbox.defaultUploadWorkspaceId` configuration.
+             *
+             * @error ckbox-access-default-workspace-error
+             */
+            logError('ckbox-access-default-workspace-error');
+            throw cannotAccessDefaultWorkspaceError;
+        }
+        return workspaceId;
     }
     /**
      * Resolves a promise with an array containing available categories with which the uploaded file can be associated.
@@ -88,6 +106,7 @@ class Adapter {
         const categoryUrl = new URL('categories', this.serviceOrigin);
         categoryUrl.searchParams.set('limit', ITEMS_PER_REQUEST.toString());
         categoryUrl.searchParams.set('offset', offset.toString());
+        categoryUrl.searchParams.set('workspaceId', this.getWorkspaceId());
         return this._sendHttpRequest({ url: categoryUrl })
             .then(async (data) => {
             const remainingItems = data.totalCount - (offset + ITEMS_PER_REQUEST);
@@ -158,6 +177,7 @@ class Adapter {
         }
         const uploadUrl = new URL('assets', this.serviceOrigin);
         const formData = new FormData();
+        uploadUrl.searchParams.set('workspaceId', this.getWorkspaceId());
         formData.append('categoryId', category);
         formData.append('file', file);
         const requestConfig = {
@@ -174,15 +194,7 @@ class Adapter {
         };
         return this._sendHttpRequest(requestConfig)
             .then(async (data) => {
-            const width = await this._getImageWidth();
-            const extension = getFileExtension(file.name);
-            const imageUrls = getImageUrls({
-                token: this.token,
-                id: data.id,
-                origin: this.assetsOrigin,
-                width,
-                extension
-            });
+            const imageUrls = getImageUrls(data.imageUrls);
             return {
                 ckboxImageId: data.id,
                 default: imageUrls.imageFallbackUrl,
@@ -252,20 +264,6 @@ class Adapter {
             xhr.send(data);
         });
     }
-    /**
-     * Resolves a promise with a number representing the width of a given image file.
-     */
-    _getImageWidth() {
-        return new Promise(resolve => {
-            const image = new Image();
-            image.onload = () => {
-                // Let the browser know that it should not keep the reference any longer to avoid memory leeks.
-                URL.revokeObjectURL(image.src);
-                resolve(image.width);
-            };
-            image.src = this.loader.data;
-        });
-    }
 }
 /**
  * Returns an extension from the given value.

package/src/utils.d.ts

@@ -6,18 +6,13 @@
  * @module ckbox/utils
  */
 import type { InitializedToken } from '@ckeditor/ckeditor5-cloud-services';
+import type { CKBoxImageUrls } from './ckboxconfig';
 /**
- * Creates URLs for the image:
+ * Converts image source set provided by the CKBox into an object containing:
  * - responsive URLs for the "webp" image format,
  * - one fallback URL for browsers that do not support the "webp" format.
  */
-export declare function getImageUrls({ token, id, origin, width, extension }: {
-    token: InitializedToken;
-    id: string;
-    origin: string;
-    width: number;
-    extension: string;
-}): {
+export declare function getImageUrls(imageUrls: CKBoxImageUrls): {
     imageFallbackUrl: string;
     imageSources: Array<{
         srcset: string;
@@ -26,6 +21,8 @@ export declare function getImageUrls({ token, id, origin, width, extension }: {
     }>;
 };
 /**
- * Returns an environment id from a token used for communication with the CKBox service.
+ * Returns workspace id to use for communication with the CKBox service.
+ *
+ * @param defaultWorkspaceId The default workspace to use taken from editor config.
  */
-export declare function getEnvironmentId(token: InitializedToken): string;
+export declare function getWorkspaceId(token: InitializedToken, defaultWorkspaceId?: string): string | null;

package/src/utils.js

@@ -2,89 +2,48 @@
  * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-const IMAGE_BREAKPOINT_MAX_WIDTH = 4000;
-const IMAGE_BREAKPOINT_PIXELS_THRESHOLD = 80;
-const IMAGE_BREAKPOINT_PERCENTAGE_THRESHOLD = 10;
 /**
- * Creates URLs for the image:
+ * Converts image source set provided by the CKBox into an object containing:
  * - responsive URLs for the "webp" image format,
  * - one fallback URL for browsers that do not support the "webp" format.
  */
-export function getImageUrls({ token, id, origin, width, extension }) {
-    const environmentId = getEnvironmentId(token);
-    const imageBreakpoints = getImageBreakpoints(width);
-    const imageFallbackExtension = getImageFallbackExtension(extension);
-    const imageFallbackUrl = getResponsiveImageUrl({ environmentId, id, origin, width, extension: imageFallbackExtension });
-    const imageResponsiveUrls = imageBreakpoints.map(imageBreakpoint => {
-        const responsiveImageUrl = getResponsiveImageUrl({ environmentId, id, origin, width: imageBreakpoint, extension: 'webp' });
-        return `${responsiveImageUrl} ${imageBreakpoint}w`;
-    });
-    // Create just one image source definition containing all calculated URLs for each image breakpoint. Additionally, limit this source
-    // image width by defining two allowed slot sizes:
-    // - If the viewport width is not greater than the image width, make the image occupy the whole slot.
-    // - Otherwise, limit the slot width to be equal to the image width, to avoid enlarging the image beyond its width.
-    //
-    // This is a kind of a workaround. In a perfect world we could use `sizes="100vw" width="real image width"` on our single `<source>`
-    // element, but at the time of writing this code the `width` attribute is not supported in the `<source>` element in Firefox yet.
+export function getImageUrls(imageUrls) {
+    const responsiveUrls = [];
+    let maxWidth = 0;
+    for (const key in imageUrls) {
+        const width = parseInt(key, 10);
+        if (!isNaN(width)) {
+            if (width > maxWidth) {
+                maxWidth = width;
+            }
+            responsiveUrls.push(`${imageUrls[key]} ${key}w`);
+        }
+    }
     const imageSources = [{
-            srcset: imageResponsiveUrls.join(','),
-            sizes: `(max-width: ${width}px) 100vw, ${width}px`,
+            srcset: responsiveUrls.join(','),
+            sizes: `(max-width: ${maxWidth}px) 100vw, ${maxWidth}px`,
             type: 'image/webp'
         }];
     return {
-        imageFallbackUrl,
+        imageFallbackUrl: imageUrls.default,
         imageSources
     };
 }
 /**
- * Returns an environment id from a token used for communication with the CKBox service.
+ * Returns workspace id to use for communication with the CKBox service.
+ *
+ * @param defaultWorkspaceId The default workspace to use taken from editor config.
  */
-export function getEnvironmentId(token) {
+export function getWorkspaceId(token, defaultWorkspaceId) {
     const [, binaryTokenPayload] = token.value.split('.');
     const payload = JSON.parse(atob(binaryTokenPayload));
-    return payload.aud;
-}
-/**
- * Calculates the image breakpoints for the provided image width in the following way:
- *
- * 1) The breakpoint threshold (the breakpoint step in the calculations) should be equal to 10% of the image width, but not less than 80
- * pixels.
- *
- * 2) Set the max. allowed image breakpoint (4000px) or the image width (if it is smaller than 4000px) as the first calculated breakpoint.
- *
- * 3) From the last computed image breakpoint subtract the computed breakpoint threshold, as long as the calculated new breakpoint value is
- * greater than the threshold.
- */
-function getImageBreakpoints(width) {
-    // Step 1) - calculating the breakpoint threshold.
-    const imageBreakpointThresholds = [
-        width * IMAGE_BREAKPOINT_PERCENTAGE_THRESHOLD / 100,
-        IMAGE_BREAKPOINT_PIXELS_THRESHOLD
-    ];
-    const imageBreakpointThreshold = Math.floor(Math.max(...imageBreakpointThresholds));
-    // Step 2) - set the first breakpoint.
-    const imageBreakpoints = [Math.min(width, IMAGE_BREAKPOINT_MAX_WIDTH)];
-    // Step 3) - calculate the next breakpoint as long as it is greater than the breakpoint threshold.
-    let lastBreakpoint = imageBreakpoints[0];
-    while (lastBreakpoint - imageBreakpointThreshold >= imageBreakpointThreshold) {
-        lastBreakpoint -= imageBreakpointThreshold;
-        imageBreakpoints.unshift(lastBreakpoint);
+    const workspaces = (payload.auth && payload.auth.ckbox && payload.auth.ckbox.workspaces) || [payload.aud];
+    if (!defaultWorkspaceId) {
+        return workspaces[0];
     }
-    return imageBreakpoints;
-}
-/**
- * Returns the image extension for the fallback URL.
- */
-function getImageFallbackExtension(extension) {
-    if (extension === 'bmp' || extension === 'tiff' || extension === 'jpg') {
-        return 'jpeg';
+    const role = payload.auth && payload.auth.ckbox && payload.auth.ckbox.role;
+    if (role == 'superadmin' || workspaces.includes(defaultWorkspaceId)) {
+        return defaultWorkspaceId;
     }
-    return extension;
-}
-/**
- * Creates the URL for the given image.
- */
-function getResponsiveImageUrl({ environmentId, id, origin, width, extension }) {
-    const endpoint = `${environmentId}/assets/${id}/images/${width}.${extension}`;
-    return new URL(endpoint, origin).toString();
+    return null;
 }