mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 01:45:10 +03:00
Joshen Lim
c7880e328f
## Context We've gotten some requests for a better markdown editing experience in the Explorer so this PR adds a proper live preview markdown editor, similar UX to how you'd edit notion or obsidian documents. Opting to use `lexical` as the main library to support this UI for its size and composability without going too low level like prose mirror <img width="933" height="452" alt="image" src="https://github.com/user-attachments/assets/7161ae6c-3dff-4b36-818f-01b5e573f121" /> Actual file changes are just this size excluding the package-lock <img width="150" height="39" alt="image" src="https://github.com/user-attachments/assets/bb01f2cf-8ef7-4daf-975b-614b2d817b54" /> ## Changes involved This adjusts the UX for markdown cells a little - Clicking on a markdown cell immediately allows you to edit - Instead of the existing behaviour which requires a double click to enter "Edit" state - Editing doesn't eject you into a monaco editor, but rather inline editor - Nicer transition - Clicking out of the cell persists the cell's content - No more "Cancel" or "Save" buttons ## To test - [ ] Verify that editing markdown cells are still working - [ ] Verify that tabs do get marked with unsaved changes if you edit a markdown cell <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Replaced the previous Markdown editing workflow with an always-visible inline editor. - Added rich Markdown editing for headings, lists, links, blockquotes, code blocks, inline code, and text formatting. - Changes are saved automatically when leaving the editor. - Markdown formatting shortcuts take precedence within the editor. - **Bug Fixes** - Avoids unnecessary saves when content has not changed. - **Tests** - Added coverage verifying Markdown formatting conversions remain consistent and repeatable. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
24 lines
801 B
TypeScript
24 lines
801 B
TypeScript
import { CodeNode } from '@lexical/code'
|
|
import { LinkNode } from '@lexical/link'
|
|
import { ListItemNode, ListNode } from '@lexical/list'
|
|
import { TRANSFORMERS } from '@lexical/markdown'
|
|
import { HeadingNode, QuoteNode } from '@lexical/rich-text'
|
|
import type { Klass, LexicalNode } from 'lexical'
|
|
|
|
/**
|
|
* [Joshen] Passthrough export here in case we want to expand more transformers
|
|
* in the future - the default TRANSFORMERS cover the basics like headings, blockquotes,
|
|
* lists, code blocks, links, and standard text formats.
|
|
* If we'd like to support tables for example then we can expand this const
|
|
*/
|
|
export const MARKDOWN_TRANSFORMERS = TRANSFORMERS
|
|
|
|
export const MARKDOWN_EDITOR_NODES: Klass<LexicalNode>[] = [
|
|
HeadingNode,
|
|
QuoteNode,
|
|
ListNode,
|
|
ListItemNode,
|
|
CodeNode,
|
|
LinkNode,
|
|
]
|