fix(image-processor): support percent-encoded data URIs

An <img src="data:image/svg+xml,%3Csvg..."> made dataURItoBlob call
atob on a payload that is not base64, so the editor threw
InvalidCharacterError out of the change handler on every keystroke.

dataURItoBlob now decodes percent-encoded payloads as well, the local
copy of it in the plugin is gone, and a data URI we cannot decode leaves
the image untouched instead of breaking the editor.

Author: eric-mallac

src/modules/uploader/helpers/data-uri-to-blob.ts

@@ -9,16 +9,17 @@
  */
 
 /**
- * Convert dataURI to Blob
+ * Convert dataURI to Blob. Both base64 and percent-encoded payloads are
+ * supported — `data:image/svg+xml,%3Csvg...` is as valid as
+ * `data:image/png;base64,...`
  */
 export function dataURItoBlob(dataURI: string): Blob {
-	// convert base64 to raw binary data held in a string
-	// doesn't handle URLEncoded DataURIs - see SO answer #6850276 for code that does this
-
-	const byteString: string = atob(dataURI.split(',')[1]),
-		// separate out the mime component
-		mimeString: string = dataURI.split(',')[0].split(':')[1].split(';')[0],
-		// write the bytes of the string to an ArrayBuffer
+	const [header, ...rest] = dataURI.split(','),
+		payload = rest.join(','),
+		mimeString: string = header.split(':')[1]?.split(';')[0] ?? '',
+		byteString: string = /;base64/i.test(header)
+			? atob(payload)
+			: decodeURIComponent(payload),
 		ab: ArrayBuffer = new ArrayBuffer(byteString.length),
 		ia: Uint8Array = new Uint8Array(ab);
 

src/plugins/image-processor/image-processor.test.js

@@ -86,4 +86,41 @@ describe('Image processor plugin', () => {
 			expect(area.value).does.not.include('blob:');
 		});
 	});
+
+	describe('Percent-encoded data URI', () => {
+		const SVG_URI =
+			'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221%22%20height%3D%221%22%3E%3C%2Fsvg%3E';
+
+		it('Should convert it to a blob: URL without throwing on atob', async () => {
+			const editor = getJodit({
+				history: { timeout: 0 }
+			});
+
+			editor.value = '<p><img alt="" src="' + SVG_URI + '"></p>';
+			editor.e.fire('change', editor.value, '');
+			await delay(150);
+
+			expect(editor.editor.querySelector('img').src).to.match(/^blob:/);
+			expect(editor.value).to.include(SVG_URI);
+
+			editor.destruct();
+		});
+
+		it('Should keep an undecodable data URI as is', async () => {
+			const editor = getJodit({
+				history: { timeout: 0 }
+			});
+
+			const broken = 'data:image/svg+xml,%%%';
+
+			editor.value = '<p><img alt="" src="' + broken + '"></p>';
+			editor.e.fire('change', editor.value, '');
+			await delay(150);
+
+			expect(editor.editor.querySelector('img').src).to.include('%%%');
+			expect(editor.value).to.include(broken);
+
+			editor.destruct();
+		});
+	});
 });

src/plugins/image-processor/image-processor.ts

@@ -16,6 +16,7 @@ import { cached, debounce, watch } from 'jodit/core/decorators';
 import { pluginSystem } from 'jodit/core/global';
 import { $$, dataBind } from 'jodit/core/helpers';
 import { Plugin } from 'jodit/core/plugin';
+import { dataURItoBlob } from 'jodit/modules/uploader/helpers/data-uri-to-blob';
 
 import './config';
 
@@ -116,8 +117,17 @@ function replaceDataURIToBlobUUID(editor: IJodit, elm: HTMLImageElement): void {
 		return;
 	}
 
-	const dataUri = elm.src,
+	const dataUri = elm.src;
+
+	let blob: Blob;
+
+	try {
 		blob = dataURItoBlob(dataUri);
+	} catch {
+		// A data URI the browser accepts but we cannot decode is not worth
+		// breaking the editor over — keep the image as it is
+		return;
+	}
 
 	elm.src = URL.createObjectURL(blob);
 	editor.e.fire('internalUpdate');
@@ -132,28 +142,4 @@ function replaceDataURIToBlobUUID(editor: IJodit, elm: HTMLImageElement): void {
 	editor.buffer.set(JODIT_IMAGE_BLOB_ID, list);
 }
 
-// https://stackoverflow.com/a/12300351
-function dataURItoBlob(dataURI: string): Blob {
-	// convert base64 to raw binary data held in a string
-	// doesn't handle URLEncoded DataURIs - see SO answer #6850276 for code that does this
-	const byteString = atob(dataURI.split(',')[1]);
-
-	// separate out the mime component
-	const mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
-
-	// write the bytes of the string to an ArrayBuffer
-	const ab = new ArrayBuffer(byteString.length);
-
-	// create a view into the buffer
-	const ia = new Uint8Array(ab);
-
-	// set the bytes of the buffer to the correct values
-	for (let i = 0; i < byteString.length; i++) {
-		ia[i] = byteString.charCodeAt(i);
-	}
-
-	// write the ArrayBuffer to a blob, and you're done
-	return new Blob([ab], { type: mimeString });
-}
-
 pluginSystem.add('imageProcessor', imageProcessor);