[lexical-playground] Bug Fix: Fix equation rendering in Safari (#7362)

This commit is contained in:
Kiran Dash
2025-03-23 23:39:40 +08:00
committed by GitHub
parent fdd15b3f3c
commit 6a5a6c8c87
3 changed files with 42 additions and 8 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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=""
/>
</>
);
}