feat: replace markdown preview with inline markdown editor #224

2026-05-28T23:39:59Z

talksik commented

2026-05-28 23:39:59 +00:00

(Migrated from github.com)

Summary

Replaces the split write/preview pane UI with an inline WYSIWYG markdown editor using MDXEditor. This provides a more modern editing experience where formatting is rendered as you type, similar to Obsidian or Notion.

Key Changes

Desktop (Compose)

Removed the write/preview toggle UI and MarkdownPreview component
Replaced textarea + preview pane with MarkdownEditor component wrapping MDXEditor
MDXEditor renders markdown formatting inline (headings, lists, emphasis, links, code blocks) while maintaining plain markdown as the source
Added markdown-editor.css to style MDXEditor to blend seamlessly into the compose glass card
Simplified focus management: removed preview mode state, now only manages focus for immersive mode
Updated keyboard event handling to use capture phase (onKeyDownCapture) so compose shortcuts (Escape, Cmd+Enter, Cmd+M) take precedence over editor shortcuts
Added @mdxeditor/editor dependency

Mobile (Text Particle View)

Added markdown detection via hasMarkdownFormatting() to distinguish between plain text and formatted content
Short messages with markdown now render formatted instead of showing raw syntax (e.g., **bold** renders as bold)
Integrated react-native-marked hook to parse and render markdown in scrollable card view
Immersive (centered, large) treatment now only applies to short plain text; short markdown falls through to card
Added react-native-marked dependency

Implementation Details

MDXEditor is configured with essential plugins: headings, lists, quotes, links, code blocks (with curated language list), and markdown shortcuts
Code block language dropdown limited to common languages (bash, json, js, ts, py, go, rust, css, html, sql) to keep UI lightweight for a message composer
Dark theme styling applied via CSS custom properties and class overrides to maintain visual consistency with the compose card
Mobile markdown rendering uses stable theme/style objects at module scope to prevent unnecessary re-parsing

https://claude.ai/code/session_019DU6V5z6Nr4Vu7b1fBDnq4

## Summary Replaces the split write/preview pane UI with an inline WYSIWYG markdown editor using MDXEditor. This provides a more modern editing experience where formatting is rendered as you type, similar to Obsidian or Notion. ## Key Changes **Desktop (Compose)** - Removed the write/preview toggle UI and `MarkdownPreview` component - Replaced textarea + preview pane with `MarkdownEditor` component wrapping MDXEditor - MDXEditor renders markdown formatting inline (headings, lists, emphasis, links, code blocks) while maintaining plain markdown as the source - Added `markdown-editor.css` to style MDXEditor to blend seamlessly into the compose glass card - Simplified focus management: removed preview mode state, now only manages focus for immersive mode - Updated keyboard event handling to use capture phase (`onKeyDownCapture`) so compose shortcuts (Escape, Cmd+Enter, Cmd+M) take precedence over editor shortcuts - Added `@mdxeditor/editor` dependency **Mobile (Text Particle View)** - Added markdown detection via `hasMarkdownFormatting()` to distinguish between plain text and formatted content - Short messages with markdown now render formatted instead of showing raw syntax (e.g., `**bold**` renders as bold) - Integrated `react-native-marked` hook to parse and render markdown in scrollable card view - Immersive (centered, large) treatment now only applies to short plain text; short markdown falls through to card - Added `react-native-marked` dependency ## Implementation Details - MDXEditor is configured with essential plugins: headings, lists, quotes, links, code blocks (with curated language list), and markdown shortcuts - Code block language dropdown limited to common languages (bash, json, js, ts, py, go, rust, css, html, sql) to keep UI lightweight for a message composer - Dark theme styling applied via CSS custom properties and class overrides to maintain visual consistency with the compose card - Mobile markdown rendering uses stable theme/style objects at module scope to prevent unnecessary re-parsing https://claude.ai/code/session_019DU6V5z6Nr4Vu7b1fBDnq4

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: FlowyLabs/llink#224