From e71ec2bc490e786f04f4768923e51dca495d3bde Mon Sep 17 00:00:00 2001 From: Henry Heino <46334387+personalizedrefrigerator@users.noreply.github.com> Date: Fri, 2 Feb 2024 09:48:26 -0800 Subject: [PATCH] Desktop: Fixes #8736: Fix images with SVG data URLs corrupted in the rich text editor (#9801) --- .../app-cli/tests/html_to_md/image_utf8_data_url.html | 9 +++++++++ packages/app-cli/tests/html_to_md/image_utf8_data_url.md | 3 +++ .../app-cli/tests/md_to_html/image_with_data_url.html | 2 ++ packages/app-cli/tests/md_to_html/image_with_data_url.md | 3 +++ .../gui/NoteEditor/NoteBody/TinyMCE/TinyMCE.tsx | 8 ++++++++ packages/renderer/MdToHtml/validateLinks.ts | 2 +- packages/turndown/src/commonmark-rules.js | 3 +++ 7 files changed, 29 insertions(+), 1 deletion(-) create mode 100644 packages/app-cli/tests/html_to_md/image_utf8_data_url.html create mode 100644 packages/app-cli/tests/html_to_md/image_utf8_data_url.md create mode 100644 packages/app-cli/tests/md_to_html/image_with_data_url.html create mode 100644 packages/app-cli/tests/md_to_html/image_with_data_url.md 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 new file mode 100644 index 0000000000..d15198eb0a --- /dev/null +++ b/packages/app-cli/tests/html_to_md/image_utf8_data_url.html @@ -0,0 +1,9 @@ +

+ SVG image: + + +

+

PNG image:

\ No newline at end of file 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 new file mode 100644 index 0000000000..c7a7280ae7 --- /dev/null +++ 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%0A%09%09%09%0A%09%09) + +PNG image: ![](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAR0lEQVQIW4XLMQoAIQwF0flpBEHwtOlUsPW6gZTushfYqd8IuHtvxhhI4pyD1lq3905EYGa01tB9m3N+IjNxd/S711oppfAAOjQiFPMurHkAAAAASUVORK5CYII=) \ No newline at end of file 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 new file mode 100644 index 0000000000..e91a0e3f82 --- /dev/null +++ b/packages/app-cli/tests/md_to_html/image_with_data_url.html @@ -0,0 +1,2 @@ +

SVG image:

+

PNG image:

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 new file mode 100644 index 0000000000..1bbcb9020c --- /dev/null +++ b/packages/app-cli/tests/md_to_html/image_with_data_url.md @@ -0,0 +1,3 @@ +SVG image: ![](data:image/svg+xml;utf8,%20%20) + +PNG image: ![](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAR0lEQVQIW4XLMQoAIQwF0flpBEHwtOlUsPW6gZTushfYqd8IuHtvxhhI4pyD1lq3905EYGa01tB9m3N+IjNxd/S711oppfAAOjQiFPMurHkAAAAASUVORK5CYII=) \ No newline at end of file diff --git a/packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/TinyMCE.tsx b/packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/TinyMCE.tsx index 61b900bd70..0aa272e508 100644 --- 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 index 6b9e92559f..d35adcaa71 100644 --- 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 index a33170540a..6d00ce146d 100644 --- 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');