[lexical-playground] Bug Fix: Fix equation rendering in Safari#7362
Merged
etrepum merged 2 commits intofacebook:mainfrom Mar 23, 2025
Merged
[lexical-playground] Bug Fix: Fix equation rendering in Safari#7362etrepum merged 2 commits intofacebook:mainfrom
etrepum merged 2 commits intofacebook:mainfrom
Conversation
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 facebook#6824
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
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 facebook#6824
etrepum
approved these changes
Mar 23, 2025
23 tasks
GermanJablo
added a commit
to payloadcms/payload
that referenced
this pull request
Sep 3, 2025
Fixes #13386 Below I write a clarification to copy and paste into the release note, based on our latest upgrade of Lexical [in v3.29.0](https://github.com/payloadcms/payload/releases/tag/v3.29.0). ## Important This release upgrades the lexical dependency from 0.28.0 to 0.34.0. If you installed lexical manually, update it to 0.34.0. Installing lexical manually is not recommended, as it may break between updates, and our re-exported versions should be used. See the [yellow banner box](https://payloadcms.com/docs/rich-text/custom-features) for details. If you still encounter richtext-lexical errors, do the following, in this order: - Delete node_modules - Delete your lockfile (e.g. pnpm-lock.json) - Reinstall your dependencies (e.g. pnpm install) ### Lexical Breaking Changes The following Lexical releases describe breaking changes. We recommend reading them if you're using Lexical APIs directly (`@payloadcms/richtext-lexical/lexical/*`). - [v.0.33.0](https://github.com/facebook/lexical/releases/tag/v0.33.0) - [v.0.30.0](https://github.com/facebook/lexical/releases/tag/v0.30.0) - [v.0.29.0](https://github.com/facebook/lexical/releases/tag/v0.29.0) ___ TODO: - [x] facebook/lexical#7719 - [x] facebook/lexical#7362 - [x] facebook/lexical#7707 - [x] facebook/lexical#7388 - [x] facebook/lexical#7357 - [x] facebook/lexical#7352 - [x] facebook/lexical#7472 - [x] facebook/lexical#7556 - [x] facebook/lexical#7417 - [x] facebook/lexical#1036 - [x] facebook/lexical#7509 - [x] facebook/lexical#7693 - [x] facebook/lexical#7408 - [x] facebook/lexical#7450 - [x] facebook/lexical#7415 - [x] facebook/lexical#7368 - [x] facebook/lexical#7372 - [x] facebook/lexical#7572 - [x] facebook/lexical#7558 - [x] facebook/lexical#7613 - [x] facebook/lexical#7405 - [x] facebook/lexical#7420 - [x] facebook/lexical#7662 --- - To see the specific tasks where the Asana app for GitHub is being used, see below: - https://app.asana.com/0/0/1211202581885926
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Current Behavior:
The KatexRenderer component uses empty image tags with
src="#"around equations to prevent Android composition issues. However, this causes Safari to display question marks around the equations, creating an undesirable visual artifact.Changes being added:
This PR replaces the empty image tags' src attribute with a transparent 1x1 pixel GIF data URL and adds width/height=0 attributes. This maintains the Android composition prevention functionality while fixing the Safari display issue. The images will now be completely invisible across all browsers.
Closes #6824
Test plan
Before
When adding an equation in Safari:
After