layer5io / layer5io/sistent

[Feature] Introduce RichTextEditor (RTE) component with compound controls and responsive media embeds

Open
#1,824 3 comments 0 reactions 0 assignees View on GitHub

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:

  1. 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-editor loaded with next/dynamic to avoid SSR hydration bugs.
  2. 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.
  3. 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
  1. 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>
    
  2. 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.
  3. Dependency & Barrel Safety:

    • In accordance with Sistent's AGENTS.md guidelines on optional peers, declare the core editor engine appropriately so importing unrelated components from @sistent/sistent does not throw for consumers who don't need the editor.
Acceptance Tests
  • RichTextEditor compound component exported from Sistent with full TypeScript declarations in dist/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).

Contributor Guide

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.