Rich and Markdown Text Editor #2501

Soxasora · 2025-09-09T15:48:33Z

Description

Introduces Lexical as a Markdown/Rich Text editor and renderer

Screenshots

tbd

New things

KaTeX is used in place of MathJax to render equations and LaTeX.
Shiki is used in place of React Syntax Highlighter to highlight code blocks - it is undoubtedly faster and lighter than RSH, reaching 4kB of size in the bundle (this has to be re-verified later)
Uploads are now concurrently processed, also featuring a percentage, with placeholder per each upload - the user can continue to write while it uploads
MediaOrLink preserves scroll on load, supports captions and resize
Embeds refactor with a load timeout that spawns an error component (context)
HTML from a lexical JSON state is parsed server-side via Linkedom, a performance-focused DOM simulator
TBD, a lot has changed from the last update

Additional Context

Lexical is also used as a renderer (stripped of any plugins) of its editorState in JSON.
Since Lexical renders client-side, the HTML produced by Lexical is used as a placeholder with 1:1 styling until Lexical takes over
TBD, a lot has changed from the last update

Progress

editor renders
can create items
can edit items (and restore a lexical editorState)
can switch between markdown and rich text
can instantly produce and serve sanitized HTML in SSR
experimental Shiki-based plain text and live markdown mode
can serve all embeds we support
can upload files!
can auto link everything
can render in markdown, lexical, html, json2jsx. indecise much?
can mention people, not yet subs
forgot

TODO

TBD, a lot has changed from the last update*

Checklist

Are your changes backward compatible? Please answer below:

For example, a change is not backward compatible if you removed a GraphQL field or dropped a database column.
tbd

On a scale of 1-10 how well and how have you QA'd this change and any features it might affect? Please answer below:
tbd

For frontend changes: Tested on mobile, light and dark mode? Please answer below:
tbd

Did you introduce any new environment variables? If so, call them out explicitly here:
tbd

Did you use AI for this? If so, how much did it assist you?
Ask: better lexical understanding, things that weren't clear in documentation or in code, best practices
Agent: autocompletion and refactors

…ik bridge

socket-security · 2025-09-09T15:49:08Z

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Package	Supply Chain Security	Vulnerability	Quality
@lexical/clipboard@0.37.0
@lexical/rich-text@0.37.0
@lexical/selection@0.37.0
@lexical/utils@0.37.0
@lexical/code-shiki@0.37.0
@lexical/history@0.37.0
@lexical/html@0.37.0
linkedom@0.18.12
@lexical/headless@0.37.0
react-syntax-highlighter@15.5.0 ⏵ 15.6.6
dompurify@3.2.6
katex@0.16.11 ⏵ 0.16.22	⁺¹	⁺⁸	⁺¹
@lexical/react@0.37.0
lexical@0.37.0

View full report

… SN theme, formik bridge touchups, a better toolbar style

…gic, image markdown transformer, testing on more scenarios

…ty; re-instate SN markdown renderer

…t values

…cussions create/edit

…s for markdown mode

…t, re-introduce usage of Lexical in read mode

…ustomAutoLink plugin

…ia component rendering

…fore lexical loads

…ntations

… recognition

socket-security · 2025-10-11T11:06:33Z

Warning

Review the following alerts detected in dependencies.

According to your organization's Security Policy, it is recommended to resolve "Warn" alerts. Learn more about Socket for GitHub.

Action	Severity	Alert (click "▶" to expand/collapse)
Warn		`happy-dom@20.0.0` has a Critical CVE. CVE: GHSA-qpm2-6cq5-7pq5 happy-dom's `--disallow-code-generation-from-strings` is not sufficient for isolating untrusted JavaScript (CRITICAL) Affected versions: < 20.0.2 Patched version: 20.0.2 From: package-lock.json → `npm/@lexical/headless@0.37.0` → `npm/happy-dom@20.0.0` ℹ Read more on: This package \| This alert \| What is a critical CVE? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at `support@socket.dev`. Suggestion: Remove or replace dependencies that include known critical CVEs. Consumers can use dependency overrides or npm audit fix --force to remove vulnerable dependencies. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment `@SocketSecurity ignore npm/happy-dom@20.0.0`. You can also ignore all packages with `@SocketSecurity ignore-all`. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.

View full report

- Helper floating toolbar on selection - graceful appear/disappear of the toolbar - debounce reposition to check if the selection actually didn't change - reposition tolerance - Show a tooltip on toolbar item hover - ActionTooltip now accepts delay, transitions and a different structure - Show a tooltip after 0.5 seconds - graceful transition - hide the tooltip on click

…sedown

- prevent importing an empty editor state - adjust code nodes theme for dark and light mode - hide floating elements far away from the viewport - tweaks to floating elements animations - fix overflow and overflowing button on Reader and Reader loading placeholder - accept and use a callback ref for LexicalReader and a normal ref for (markdown) Text bits: - split SNLexical in LexicalEditor and LexicalReader - forward ref to loading placeholder and Reader

…ers on dynamic Editor import; fix newlines on SSR markdown conversions

…down]; save pure lexical state in local; start in markdown mode by default

…eanup

… changes for markdown mode

…upport; overflow at 50vh for truncated HTML; prepare for imgproxy support

…ort via applySNCustomizations, embed HTML placeholder

… is empty

- safer SSR conversions, withDOM wrapper - rename blockType normal to paragraph - migrate LexicalReader to the new extension paradigm - change math nodes placeholder - refactor: re-organize lib/lexical in functionalities [core, content, decorative, formatting, misc] - refactor: re-organize components/lexical in functionalities - MaxLength plugin for constrained text boxes

…HTML placeholder; mitigate: corrupt selection switching between markdown and rich modes; dev: debug HTML mode; State of Lexical docs

Soxasora added 3 commits September 9, 2025 01:17

wip: Lexical prototype: it shows!

b4a5a81

Merge branch 'master' into rich_text_prototype

a892a84

wip: text rendering via lexical, toolbar, experimental barebones form…

5d65fb8

…ik bridge

Soxasora added 25 commits September 9, 2025 23:46

lexical shiki for code highlighting, start lexical with markdown with…

a40f1c6

… SN theme, formik bridge touchups, a better toolbar style

code structure experiments

91ca0d0

Merge branch 'master' into rich_text

c233c1b

refactor lexical structure, more styling, re-implement overflowing lo…

2bcd7a4

…gic, image markdown transformer, testing on more scenarios

DOMPurify for SSR and Client envs

098d0f6

experimental: store and serve server-sanitized HTML

ecc1e77

wip: MediaOrLink plugin prototype with HTML and JSON exports

24b148a

wip: Markdown Live Preview (gutter) plugin

c284b97

wip: Live Markdown, support for item.html SN-wide, delete functionali…

1eab10b

…ty; re-instate SN markdown renderer

edit functionality, restore an editor state from DB via formik defaul…

dc0460a

…t values

sanitize HTML during validation, lexical support for comments and dis…

ecf2f75

…cussions create/edit

wip: Shiki custom styling for a more Live Markdown; formatting button…

615c974

…s for markdown mode

wip: file upload proof of concept

664303f

wip: mentions node

546a75a

add license to placeholder

6dc044b

wip: render JSON as JSX via RenderMan (experimental), mentions suppor…

7be0288

…t, re-introduce usage of Lexical in read mode

wip: tweet embeds poc

867ae5a

refactor Embed component, attach to TweetNode

14f9bb5

embeds: youtube, wavlake, spotify, rumble, peertube, nostr; generic C…

7257516

…ustomAutoLink plugin

correct background color for contenteditable=false by default

a4dc3cc

support file upload progress with XHR

98a6a18

parallel file upload placeholders, preserve scroll on MediaOrLink Med…

d151b6f

…ia component rendering

wip: Math node via KaTeX; apply SN style to mentions

fa051a9

fix mentions placeholder before lexical hydration, render SSR HTML be…

7c9ce9e

…fore lexical loads

MentionNode markdown transformer, fix textarea resize

cc4752f

Soxasora changed the title ~~rich text editor and renderer~~ Hybrid Text Editor Sep 20, 2025

Soxasora added 4 commits October 10, 2025 15:38

clearer shortcuts handling; DX: partially restructure lexical impleme…

22f53cf

…ntations

fix: checklists MD transformer; fix: numbered and check lists toolbar…

9d24185

… recognition

add Math support via KaTeX, with keyboard shortcuts

afe529c

primitive table markdown transformer; some bug fixes

0a4d175

Soxasora changed the title ~~Hybrid Text Editor~~ Rich and Markdown Text Editor Oct 10, 2025

wip: spoiler nodes

86c6fe3

Soxasora added 17 commits October 14, 2025 12:03

refactor Floating Toolbar, prevent toolbar from stealing focus on mou…

9649f39

…sedown

update Lexical to 0.37.0

2758123

fix: highlight MarkdownNode on switch; tweaks to styling; light cleanup

60c3769

separate FloatingToolbar from Toolbar, tweaks to styling, fix re-rend…

a291f60

…ers on dynamic Editor import; fix newlines on SSR markdown conversions

wip: local preferences [showToolbar, showFloatingToolbar, startInMark…

c174ad9

…down]; save pure lexical state in local; start in markdown mode by default

wip: preferences button; fix: mode switch keyboard shortcut; light cl…

a1026c5

…eanup

toolbar with overflow for small display sizes; fix: respect dark mode…

99aca82

… changes for markdown mode

quick workaround for overflow conflict with dropdowns

3bf8b9d

light cleanup; import re-order

27e9016

fix lint

43e37cf

truncate HTML for FlatComment by sanitizing and parsing it with SSR s…

f658fac

…upport; overflow at 50vh for truncated HTML; prepare for imgproxy support

imgproxy, outlawed support via LexicalItemContext, outlawed HTML supp…

84ffbad

…ort via applySNCustomizations, embed HTML placeholder

imgproxy HTML support

98a9484

rewrite Formik plugin, fix: remove item from local storage if content…

813c82e

… is empty

Soxasora force-pushed the rich_text branch from 4a80d38 to a117cee Compare October 19, 2025 11:56

Soxasora and others added 4 commits October 19, 2025 14:00

fix maxLength lint issues

07eccf6

Merge branch 'master' into rich_text

2eb5843

fix: SSR withDOM wrapper with correct LinkeDOM names; fix: WIP embed …

4e14f45

…HTML placeholder; mitigate: corrupt selection switching between markdown and rich modes; dev: debug HTML mode; State of Lexical docs

fix lexical.md structure

3cac48a

Soxasora force-pushed the rich_text branch from c4d925e to 3cac48a Compare October 20, 2025 13:57

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Rich and Markdown Text Editor #2501

Rich and Markdown Text Editor #2501

Soxasora commented Sep 9, 2025 •

edited

Loading

Uh oh!

socket-security bot commented Sep 9, 2025 •

edited

Loading

Uh oh!

socket-security bot commented Oct 11, 2025 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Rich and Markdown Text Editor #2501

Are you sure you want to change the base?

Rich and Markdown Text Editor #2501

Conversation

Soxasora commented Sep 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Screenshots

New things

Additional Context

Progress

TODO

Checklist

Uh oh!

socket-security bot commented Sep 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

socket-security bot commented Oct 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Soxasora commented Sep 9, 2025 •

edited

Loading

socket-security bot commented Sep 9, 2025 •

edited

Loading

socket-security bot commented Oct 11, 2025 •

edited

Loading