Skip to content

feat(markdown): Editor component optimization — maxLength, toolbar config, streaming, code block actions#1

Merged
CoderBoyBoy merged 6 commits intomainfrom
copilot/optimize-markdown-editor
Mar 19, 2026
Merged

feat(markdown): Editor component optimization — maxLength, toolbar config, streaming, code block actions#1
CoderBoyBoy merged 6 commits intomainfrom
copilot/optimize-markdown-editor

Conversation

Copy link
Contributor

Copilot AI commented Mar 19, 2026

Five enhancements to the Markdown editor/renderer components: character limits, toolbar flexibility, SSE streaming support, toolbar icon fixes, and code block action buttons.

Changes

  • maxLength prop — Truncates input at limit, preserves cursor position, renders 128 / 500 counter below editor when set
  • Toolbar code/codeblock fixcode action now inserts `text` (was incorrectly inserting fenced blocks). codeblock gets a distinct SVG icon (rectangle with lines) vs text </> for inline code
  • toolbar prop union type — Accepts false (hide), ToolbarItem[] (whitelist), or legacy { show, items } object. Normalized internally via normalizeToolbarConfig()
  • SSE streamingstreaming prop bypasses debounce, appends blinking cursor via ::after pseudo-element, auto-scrolls when near bottom. onStreamEnd fires on streaming: true → false transition
  • Code block download & preview — Buttons grouped in .code-block-actions container. Download maps data-language → file extension via LANG_EXT_MAP. Preview (HTML only) renders in sandbox="allow-scripts" iframe modal (no allow-same-origin)
  • i18n — Added download, preview, closePreview strings for both locales
  • Docs — README updated with new prop tables, toolbar config examples, SSE integration demo. Website adds streaming code example tab

Usage

// Streaming
<MarkdownRenderer
  source={content}
  streaming={isStreaming}
  onStreamEnd={() => console.log('done')}
/>

// Toolbar whitelist + character limit
<MarkdownEditor
  toolbar={['bold', 'italic', '|', 'code', 'codeblock']}
  maxLength={5000}
/>

// Hide toolbar
<MarkdownEditor toolbar={false} />

Types

export type ToolbarConfig = boolean | ToolbarItem[] | { show?: boolean; items?: ToolbarItem[] };

All new props are optional with backward-compatible defaults. Existing tests unaffected (3 pre-existing failures unchanged).


📱 Kick off Copilot coding agent tasks wherever you are with GitHub Mobile, available on iOS and Android.

Copilot AI and others added 5 commits March 19, 2026 03:36
Co-authored-by: CoderBoyBoy <11583532+CoderBoyBoy@users.noreply.github.com>
- Task 1: Add maxLength prop with character counter
- Task 2: Fix code vs codeblock toolbar actions (inline vs block)
- Task 3: Support flexible toolbar config (boolean | array | object)
- Task 4: Add SSE streaming support with cursor animation and auto-scroll
- Task 5: Add code block download & HTML preview buttons

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
…lbar config, streaming, code block actions

Co-authored-by: CoderBoyBoy <11583532+CoderBoyBoy@users.noreply.github.com>
…ng demo, and code examples

Co-authored-by: CoderBoyBoy <11583532+CoderBoyBoy@users.noreply.github.com>
…x comment, cursor position on truncation

Co-authored-by: CoderBoyBoy <11583532+CoderBoyBoy@users.noreply.github.com>
Copilot AI changed the title [WIP] Optimize Markdown editor component feat(markdown): Editor component optimization — maxLength, toolbar config, streaming, code block actions Mar 19, 2026
Copilot AI requested a review from CoderBoyBoy March 19, 2026 03:50
@CoderBoyBoy CoderBoyBoy marked this pull request as ready for review March 19, 2026 04:10
@CoderBoyBoy CoderBoyBoy merged commit f294bf0 into main Mar 19, 2026
@CoderBoyBoy CoderBoyBoy deleted the copilot/optimize-markdown-editor branch March 20, 2026 11:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants