feat(editor): add live markdown preview while typing - #1757
Open
Th-Underscore wants to merge 16 commits into
Open
feat(editor): add live markdown preview while typing#1757Th-Underscore wants to merge 16 commits into
Th-Underscore wants to merge 16 commits into
Conversation
This was referenced Aug 13, 2026
Author
|
There is some slight inconsistency when newlines are introduced within inline marker types, but generally a nonissue (even Discord has such problems): 
The preview box above is how it is actually sent.
|
eleboucher
force-pushed
the
feat/prosemirror-composer
branch
7 times, most recently
from
August 13, 2026 16:06
a754be6 to
9a54e8c
Compare
eleboucher
force-pushed
the
feat/prosemirror-composer
branch
from
August 13, 2026 18:01
9a54e8c to
7b107f2
Compare
Stack overlapping inline formatting so inner spans keep the outer marks, render spoilers as a translucent highlight, show atoms in the preview text, and cap the preview box height with its own scrollbar.
…r growth The atBottom flag lags real scroll position by up to 100px, so a user who has started scrolling up is still flagged while a growing composer shrinks the timeline viewport. Gate the viewport ResizeObserver repin on the actual distance to the pre-resize bottom instead of the lagging flag.
Style fenced code with arborium's real token elements, keep backslash escaped delimiters literal, scale heading levels (# to ###### onto folds' H2 to H6) at weight 600 with real bold inside, and underline preview links only when the underline-links setting is on.
Th-Underscore
force-pushed
the
feat/markdown-preview-prosemirror
branch
from
August 14, 2026 12:17
64fa3d0 to
82f12c1
Compare
eleboucher
force-pushed
the
feat/prosemirror-composer
branch
from
August 16, 2026 10:20
7b107f2 to
03ad55f
Compare
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
2 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.
Based on ProseMirror refactor #1724. See Th-Underscore/Sable@e89b1b8...2e8f26f for the proper changes list.
Description
Adds a live markdown preview to the ProseMirror composer. Formatting renders inline while you type (bold/italic/underline/strikethrough/spoiler/code/link, multi-line code blocks, and per-level headings) in a Discord-style way. The markdown syntax characters stay visible but dimmed, and the styled content keeps its formatting. Fenced code blocks are highlighted with Sable's own syntax highlighter, so the preview colours match sent messages. Bare URLs are styled as links and open on Ctrl/Cmd+click; a plain click never navigates. Backslash escapes are honoured (e.g.
test\*beep\*stays literal).An opt-in "Show Markdown Preview" setting (default off, in General > Editor) additionally renders a preview box above the composer through the normal timeline renderer. Purely cosmetic. Preview links respect the existing "Underline Links" setting.
Two extras:
markEventConsumedByHost: a workaround for a bug in feat(editor): replace Slate with ProseMirror in the composer #1724's own composer (Enter can't insert a newline)RoomTimeline: viewport-repin fix - the timeline rubber-bands to the bottom while the user scrolls up and the composer grows (the markdown decorations make this much more noticeable)Tested on the desktop app, Ubuntu 24.04.
Type of change
Checklist:
.changesetAI disclosure:
I designed and directed the feature, chose the Discord-style behaviors, and tested it in the GUI, while the code itself was largely AI-generated.
Not WYSIWYG - explicitly preserves markdown format markers. The composer preview is a ProseMirror decoration plugin over a markdown tokenizer; it styles content at render time without touching the document, so serialized output is unchanged. Code blocks reuse Sable's existing
arboriumhighlighting, matching sent messages. Nested format markers are recursed for stacked fonts/format types.