Merge pull request #15579 from ckeditor/cc/5856

Fix (ckbox): Fixed relative URL image editing.
ckeditor · Dec 22, 2023 · 84b012e · 84b012e
2 parents 3c7d4e7 + 1e7b055
commit 84b012e
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 3 deletions.
diff --git a/packages/ckeditor5-ckbox/src/ckboximageedit/ckboximageeditcommand.ts b/packages/ckeditor5-ckbox/src/ckboximageedit/ckboximageeditcommand.ts
@@ -161,7 +161,7 @@ export default class CKBoxImageEditCommand extends Command {
 				assetId: ckboxImageId
 			};
 		} else {
-			const imageUrl = element.getAttribute( 'src' ) as string;
+			const imageUrl = new URL( element.getAttribute( 'src' ) as string, document.baseURI ).href;
 			const uploadCategoryId = await ckboxUtils.getCategoryIdForFile( imageUrl, { signal } );
 
 			imageMountOptions = {

diff --git a/packages/ckeditor5-ckbox/tests/ckboximageedit/ckboximageeditcommand.js b/packages/ckeditor5-ckbox/tests/ckboximageedit/ckboximageeditcommand.js
@@ -266,6 +266,33 @@ describe( 'CKBoxImageEditCommand', () => {
 				expect( options.onClose ).to.be.a( 'function' );
 			} );
 
+			it( 'should prepare options for the CKBox Image Editing dialog instance (external image with relative URL)', async () => {
+				const imageUrl = 'sample.png';
+				const categoryId = 'id-category-1';
+				const origin = window.location.origin;
+
+				sinon.stub( editor.plugins.get( 'CKBoxUtils' ), 'getCategoryIdForFile' ).resolves( categoryId );
+
+				setModelData( model,
+					`[<imageBlock alt="alt text" src="${ imageUrl }"></imageBlock>]`
+				);
+
+				const imageElement = editor.model.document.selection.getSelectedElement();
+
+				const options = await command._prepareOptions( {
+					element: imageElement,
+					controller: new AbortController()
+				} );
+
+				expect( options ).to.not.have.property( 'assetId' );
+				expect( options ).to.have.property( 'imageUrl', `${ origin }/${ imageUrl }` );
+				expect( options ).to.have.property( 'uploadCategoryId', categoryId );
+				expect( options ).to.have.property( 'tokenUrl', 'foo' );
+				expect( options.imageEditing.allowOverwrite ).to.be.false;
+				expect( options.onSave ).to.be.a( 'function' );
+				expect( options.onClose ).to.be.a( 'function' );
+			} );
+
 			it( 'should handle error when preparing options', async () => {
 				const notification = editor.plugins.get( Notification );
 				const notificationStub = sinon.stub( notification, 'showWarning' );

diff --git a/packages/ckeditor5-ckbox/tests/manual/ckbox.html b/packages/ckeditor5-ckbox/tests/manual/ckbox.html
@@ -7,6 +7,6 @@
 
 <div id="editor">
 	<h2>CKBox sample</h2>
-	<p>Use the toolbar icon to insert an image or link to a file to the content.</p>
+	<p>Use the toolbar icon to insert an image or link to a file to the content. <img src="./sample.png"></p>
 	<p><a href="https://example.com" data-ckbox-resource-id="example-id-for-link">Example link</a></p>
 </div>
diff --git a/packages/ckeditor5-ckbox/tests/manual/ckbox.js b/packages/ckeditor5-ckbox/tests/manual/ckbox.js
@@ -55,7 +55,7 @@ ClassicEditor
 		ckbox: {
 			tokenUrl: TOKEN_URL,
 			forceDemoLabel: true,
-			allowExternalImagesEditing: [ /^data:/, /^i.imgur.com\// ]
+			allowExternalImagesEditing: [ /^data:/, /^i.imgur.com\//, 'origin' ]
 		}
 	} )
 	.then( editor => {