From a79c5bdbdca9df7376e36716e1060690051c100b Mon Sep 17 00:00:00 2001
From: kirandash <kirandash07@gmail.com>
Date: Sun, 23 Mar 2025 13:50:13 +0800
Subject: [PATCH 1/2] fix: replace empty image src with transparent data URL in
 equations

The empty images around equations in KatexRenderer were using '#' as src,
which caused Safari to display question marks. This change replaces the
src with a transparent 1x1 pixel GIF data URL and adds width/height=0
to ensure the images remain invisible while maintaining the Android
composition prevention functionality.

Fixes #6824
---
 .../lexical-playground/src/ui/KatexRenderer.tsx    | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/lexical-playground/src/ui/KatexRenderer.tsx b/packages/lexical-playground/src/ui/KatexRenderer.tsx
index 3b914bf4c16..f102c05ff8d 100644
--- a/packages/lexical-playground/src/ui/KatexRenderer.tsx
+++ b/packages/lexical-playground/src/ui/KatexRenderer.tsx
@@ -43,14 +43,24 @@ export default function KatexRenderer({
     // inner text from Katex. There didn't seem to be any other way of making this work,
     // without having a physical space.
     <>
-      <img src="#" alt="" />
+      <img
+        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+        width="0"
+        height="0"
+        alt=""
+      />
       <span
         role="button"
         tabIndex={-1}
         onDoubleClick={onDoubleClick}
         ref={katexElementRef}
       />
-      <img src="#" alt="" />
+      <img
+        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+        width="0"
+        height="0"
+        alt=""
+      />
     </>
   );
 }

From 6d55fb3138e737cad3d466f5769c41a9d01162ac Mon Sep 17 00:00:00 2001
From: kirandash <kirandash07@gmail.com>
Date: Sun, 23 Mar 2025 14:32:59 +0800
Subject: [PATCH 2/2] test: update equation HTML snapshots for Safari empty
 image fix

Update test snapshots in Markdown and regression tests to match the new
empty image implementation that uses transparent data URLs and zero
dimensions. This aligns the test expectations with the Safari
compatibility fix.

- Update Markdown.spec.mjs equation HTML snapshot
- Update regression test 6974 HTML snapshots
- Maintain existing test logic and functionality

Relates to #6824
---
 .../__tests__/e2e/Markdown.spec.mjs           | 12 ++++++++--
 .../6974-delete-character-backward.spec.mjs   | 24 +++++++++++++++----
 2 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/packages/lexical-playground/__tests__/e2e/Markdown.spec.mjs b/packages/lexical-playground/__tests__/e2e/Markdown.spec.mjs
index dc8d9a4a18e..51cfbe572d4 100644
--- a/packages/lexical-playground/__tests__/e2e/Markdown.spec.mjs
+++ b/packages/lexical-playground/__tests__/e2e/Markdown.spec.mjs
@@ -1020,7 +1020,11 @@ test.describe.parallel('Markdown', () => {
             class="editor-equation"
             contenteditable="false"
             data-lexical-decorator="true">
-            <img alt="" src="#" />
+            <img
+              alt=""
+              height="0"
+              src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+              width="0" />
             <span role="button" tabindex="-1">
               <span class="katex">
                 <span class="katex-html" aria-hidden="true">
@@ -1031,7 +1035,11 @@ test.describe.parallel('Markdown', () => {
                 </span>
               </span>
             </span>
-            <img alt="" src="#" />
+            <img
+              alt=""
+              height="0"
+              src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+              width="0" />
           </span>
           <br />
         </p>
diff --git a/packages/lexical-playground/__tests__/regression/6974-delete-character-backward.spec.mjs b/packages/lexical-playground/__tests__/regression/6974-delete-character-backward.spec.mjs
index 703596c8bb1..4231e64a567 100644
--- a/packages/lexical-playground/__tests__/regression/6974-delete-character-backward.spec.mjs
+++ b/packages/lexical-playground/__tests__/regression/6974-delete-character-backward.spec.mjs
@@ -38,7 +38,11 @@ test.describe('Regression tests for #6974', () => {
     const beforeHtml = html`
       <p>
         <span contenteditable="false" data-lexical-decorator="true">
-          <img alt="" src="#" />
+          <img
+            alt=""
+            height="0"
+            src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+            width="0" />
           <span role="button" tabindex="-1">
             <span>
               <span aria-hidden="true">
@@ -49,7 +53,11 @@ test.describe('Regression tests for #6974', () => {
               </span>
             </span>
           </span>
-          <img alt="" src="#" />
+          <img
+            alt=""
+            height="0"
+            src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+            width="0" />
         </span>
         <br />
       </p>
@@ -64,7 +72,11 @@ test.describe('Regression tests for #6974', () => {
     const afterHtml = html`
       <p dir="ltr">
         <span contenteditable="false" data-lexical-decorator="true">
-          <img alt="" src="#" />
+          <img
+            alt=""
+            height="0"
+            src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+            width="0" />
           <span role="button" tabindex="-1">
             <span>
               <span aria-hidden="true">
@@ -75,7 +87,11 @@ test.describe('Regression tests for #6974', () => {
               </span>
             </span>
           </span>
-          <img alt="" src="#" />
+          <img
+            alt=""
+            height="0"
+            src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+            width="0" />
         </span>
         <span data-lexical-text="true">test</span>
       </p>