Desktop: Fixes #8736: Fix images with SVG data URLs corrupted in the …

…rich text editor (#9801)
laurent22 · Feb 2, 2024 · e71ec2b · e71ec2b
1 parent 99e8818
commit e71ec2b
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 1 deletion.
diff --git a/packages/app-cli/tests/html_to_md/image_utf8_data_url.html b/packages/app-cli/tests/html_to_md/image_utf8_data_url.html
@@ -0,0 +1,9 @@
+<p>
+	SVG image:
+
+	<img src="data:image/svg+xml;utf8,
+		<svg width=&quot;1700&quot; height=&quot;1536&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;>
+			<path d=&quot;m0,0%20l100,1000%20l200,0%20z&quot;/>
+		</svg>"/>
+</p>
+<p>PNG image: <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAR0lEQVQIW4XLMQoAIQwF0flpBEHwtOlUsPW6gZTushfYqd8IuHtvxhhI4pyD1lq3905EYGa01tB9m3N+IjNxd/S711oppfAAOjQiFPMurHkAAAAASUVORK5CYII="></p>
diff --git a/packages/app-cli/tests/html_to_md/image_utf8_data_url.md b/packages/app-cli/tests/html_to_md/image_utf8_data_url.md
@@ -0,0 +1,3 @@
+SVG image: ![](data:image/svg+xml;utf8,%0A%09%09<svg%20width="1700"%20height="1536"%20xmlns="http://www.w3.org/2000/svg">%0A%09%09%09<path%20d="m0,0%20l100,1000%20l200,0%20z"/>%0A%09%09</svg>)
+
+PNG image: ![](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAR0lEQVQIW4XLMQoAIQwF0flpBEHwtOlUsPW6gZTushfYqd8IuHtvxhhI4pyD1lq3905EYGa01tB9m3N+IjNxd/S711oppfAAOjQiFPMurHkAAAAASUVORK5CYII=)
diff --git a/packages/app-cli/tests/md_to_html/image_with_data_url.html b/packages/app-cli/tests/md_to_html/image_with_data_url.html
@@ -0,0 +1,2 @@
+<p>SVG image: <img src="data:image/svg+xml;utf8,%3Csvg%20width=%221700%22%20height=%221536%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%20%3Cpath%20d=%22m0,0%20l100,1000%20l200,0%20z%22/%3E%20%3C/svg%3E" alt=""></p>
+<p>PNG image: <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAR0lEQVQIW4XLMQoAIQwF0flpBEHwtOlUsPW6gZTushfYqd8IuHtvxhhI4pyD1lq3905EYGa01tB9m3N+IjNxd/S711oppfAAOjQiFPMurHkAAAAASUVORK5CYII=" alt=""></p>
diff --git a/packages/app-cli/tests/md_to_html/image_with_data_url.md b/packages/app-cli/tests/md_to_html/image_with_data_url.md
@@ -0,0 +1,3 @@
+SVG image: ![](data:image/svg+xml;utf8,<svg%20width="1700"%20height="1536"%20xmlns="http://www.w3.org/2000/svg">%20<path%20d="m0,0%20l100,1000%20l200,0%20z"/>%20</svg>)
+
+PNG image: ![](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAR0lEQVQIW4XLMQoAIQwF0flpBEHwtOlUsPW6gZTushfYqd8IuHtvxhhI4pyD1lq3905EYGa01tB9m3N+IjNxd/S711oppfAAOjQiFPMurHkAAAAASUVORK5CYII=)
diff --git a/packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/TinyMCE.tsx b/packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/TinyMCE.tsx
@@ -608,6 +608,14 @@ const TinyMCE = (props: NoteBodyEditorProps, ref: any) => {
 				localization_function: _,
 				contextmenu: false,
 				browser_spellcheck: true,
+
+				// Work around an issue where images with a base64 SVG data URL would be broken.
+				//
+				// See https://github.com/tinymce/tinymce/issues/3864
+				//
+				// This was fixed in TinyMCE 6.1, so remove it when we upgrade.
+				images_dataimg_filter: (img: HTMLImageElement) => !img.src.startsWith('data:'),
+
 				formats: {
 					joplinHighlight: { inline: 'mark', remove: 'all' },
 					joplinStrikethrough: { inline: 's', remove: 'all' },

diff --git a/packages/renderer/MdToHtml/validateLinks.ts b/packages/renderer/MdToHtml/validateLinks.ts
@@ -7,7 +7,7 @@ export default function(url: string) {
 	// url should be normalized at this point, and existing entities are decoded
 	const str = url.trim().toLowerCase();
 
-	if (str.indexOf('data:image/svg+xml,') === 0) {
+	if (str.startsWith('data:image/svg+xml,') || str.startsWith('data:image/svg+xml;utf8,')) {
 		return true;
 	}
 

diff --git a/packages/turndown/src/commonmark-rules.js b/packages/turndown/src/commonmark-rules.js
@@ -293,6 +293,9 @@ function filterLinkHref (href) {
   // Replace the spaces with %20 because otherwise they can cause problems for some
   // renderer and space is not a valid URL character anyway.
   href = href.replace(/ /g, '%20');
+  // Newlines and tabs also break renderers
+  href = href.replace(/\n/g, '%0A');
+  href = href.replace(/\t/g, '%09');
   // Brackets also should be escaped
   href = href.replace(/\(/g, '%28');
   href = href.replace(/\)/g, '%29');
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		SVG image: ![](data:image/svg+xml;utf8,%0A%09%09<svg%20width="1700"%20height="1536"%20xmlns="http://www.w3.org/2000/svg">%0A%09%09%09<path%20d="m0,0%20l100,1000%20l200,0%20z"/>%0A%09%09</svg>)

		PNG image: ![](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAR0lEQVQIW4XLMQoAIQwF0flpBEHwtOlUsPW6gZTushfYqd8IuHtvxhhI4pyD1lq3905EYGa01tB9m3N+IjNxd/S711oppfAAOjQiFPMurHkAAAAASUVORK5CYII=)
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		<p>SVG image: <img src="data:image/svg+xml;utf8,%3Csvg%20width=%221700%22%20height=%221536%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%20%3Cpath%20d=%22m0,0%20l100,1000%20l200,0%20z%22/%3E%20%3C/svg%3E" alt=""></p>
		<p>PNG image: <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAR0lEQVQIW4XLMQoAIQwF0flpBEHwtOlUsPW6gZTushfYqd8IuHtvxhhI4pyD1lq3905EYGa01tB9m3N+IjNxd/S711oppfAAOjQiFPMurHkAAAAASUVORK5CYII=" alt=""></p>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		SVG image: ![](data:image/svg+xml;utf8,<svg%20width="1700"%20height="1536"%20xmlns="http://www.w3.org/2000/svg">%20<path%20d="m0,0%20l100,1000%20l200,0%20z"/>%20</svg>)

		PNG image: ![](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAR0lEQVQIW4XLMQoAIQwF0flpBEHwtOlUsPW6gZTushfYqd8IuHtvxhhI4pyD1lq3905EYGa01tB9m3N+IjNxd/S711oppfAAOjQiFPMurHkAAAAASUVORK5CYII=)