[Feature] Introduce RichTextEditor (RTE) component with compound controls and responsive media embeds
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 137
- Forks
- 239
- Avg merge
- 4d 14h
- Merged PRs (30d)
- 5
Description
Current Behavior
Currently, Sistent only provides read-only markdown rendering through RenderMarkdown (src/custom/Markdown). Downstream consumers like Meshery UI and Meshery Cloud have no standardized, design-system-native Rich Text Editor:
- Unresolved Component Migration: Issue #1296 ("Migrate Markdown Editor (MDEditor) Component") was closed during cleanup without an editor component landing in Sistent. Meshery UI still relies on an unmaintained
@uiw/react-md-editorloaded withnext/dynamicto avoid SSR hydration bugs. - Poor Authoring UX in Meshery Catalog & Designs: When users write design documentation, publish Meshery Catalog items, create patterns, or write collaboration notes, they must type raw markdown in unformatted textareas without WYSIWYG feedback or inline formatting.
- No Interactive Media Embeds: Meshery design walk-throughs frequently reference YouTube tutorials and architecture videos, but there is no native embed harness with aspect-ratio preservation or in-place resizing.
Desired Behavior
Introduce an extensible, headless-backed RichTextEditor compound component into Sistent that provides:
- WYSIWYG Formatting: Headings (H1–H6), bold, italic, underline, strike, lists (bullet, ordered, task list), blockquotes, inline code, and code blocks with syntax highlighting.
- Contextual Bubble Menu: Fast inline text styling and code language selection when text or code blocks are selected.
- Responsive Media Embeds: Resizable video/YouTube embeds with 16:9 aspect-ratio locking, preset width buttons (25%, 50%, 75%, 100%), and bidirectional drag handles.
- Sistent MUI Theme Native: Adapts seamlessly to Sistent's MUI v9 palette and theme tokens (light/dark mode, elevation, surface colors).
- Safe Packaging & Barrel Architecture: Conforms to Sistent's strict barrel and dependency isolation rules (heavy editor dependencies isolated as optional peers or opt-in entry point so non-editor consumers incur zero bundle overhead).
Implementation
-
Compound Component API:
import { RichTextEditor } from '@sistent/sistent'; <RichTextEditor editor={editor} variant="default"> <RichTextEditor.Toolbar sticky> <RichTextEditor.ControlsGroup> <RichTextEditor.Bold /> <RichTextEditor.Italic /> <RichTextEditor.Link /> <RichTextEditor.CodeBlock /> </RichTextEditor.ControlsGroup> <RichTextEditor.ControlsGroup> <RichTextEditor.YouTubeEmbed /> </RichTextEditor.ControlsGroup> </RichTextEditor.Toolbar> <RichTextEditor.BubbleMenu editor={editor} /> <RichTextEditor.Content /> <RichTextEditor.Footer showWordCount /> </RichTextEditor> -
Theming & Token Compatibility:
- Built using Emotion / MUI styled components mapping directly to Sistent's
theme.palette. - Native dark/light mode toggle responsiveness without hardcoded color variables.
- Built using Emotion / MUI styled components mapping directly to Sistent's
-
Dependency & Barrel Safety:
- In accordance with Sistent's
AGENTS.mdguidelines on optional peers, declare the core editor engine appropriately so importing unrelated components from@sistent/sistentdoes not throw for consumers who don't need the editor.
- In accordance with Sistent's
Acceptance Tests
-
RichTextEditorcompound component exported from Sistent with full TypeScript declarations indist/index.d.ts. - Native dark/light mode switching works seamlessly with Sistent theme context.
- YouTube/video embeds support alignment (left/center/right), presets (25%, 50%, 75%, 100%), and drag resizing with 16:9 ratio lock.
- Jest unit tests covering controls, state selectors, and barrel export integrity.
- Zero SSR hydration warnings when consumed in Next.js applications (e.g. Meshery UI).
- 🎨 Wireframes and designs for Sistent site in Figma (open invite)
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reading src/custom/Markdown and AGENTS.md, then inspect the package barrel and the expected dist/index.d.ts declarations. Review the proposed compound API and the Jest coverage requirements before choosing an implementation approach. Done means the exported component meets the listed formatting, themed media-embed, SSR, dependency-isolation, and test acceptance criteria.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- design, frontend, testing
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100