Summary

Accessible rich text editor with formatting, markdown shortcuts, paste sanitization, and robust IME/RTL support.

Tasks

• Define Props + Zod propsSchema:
  • value: string
  • format?: 'html'|'markdown'|'json' (serialization format)
  • onChange: (value: string, meta?: { format: string }) => void
  • readOnly?: boolean, placeholder?: string
  • toolbar?: Array<'bold'|'italic'|'underline'|'strike'|'code'|'h1'|'h2'|'h3'|'bulletList'|'orderedList'|'blockquote'|'codeBlock'|'link'|'image'|'alignLeft'|'alignCenter'|'alignRight'>
  • maxLength?: number
• Intents:
  • applyMark(mark) -> { state } (bold/italic/underline/strike/code)
  • toggleBlock(block) -> { state } (h1/h2/h3/list/blockquote/codeBlock)
  • insertLink({ href, title? }) / removeLink -> { state }
  • insertImage({ src, alt? }) -> { state }
  • undo/redo
  • paste({ text, html? }) -> { sanitized }
  • setFormat(format) -> { format }
• Accessibility: contenteditable with role="textbox", aria-multiline="true", predictable focus order
• Keyboard shortcuts: Cmd/Ctrl+B/I/U, Enter/Shift+Enter, Tab/Shift+Tab to indent/outdent in lists
• IME/RTL correctness, debounced onChange, sanitized paste from Word/Docs, large-content performance
• Docs + showcase including long document typing test and paste examples

Acceptance Criteria

• Cmd/Ctrl+B/I/U toggles marks; Tab/Shift+Tab adjusts list indentation
• Paste sanitizes disallowed tags/attributes, preserves basic formatting and links
• Screen readers announce formatting and paragraph boundaries; caret movement is logical
• No perceptible typing lag with 50k-character document; emitted payload is { value, format } only

References

• react-sdk/src/model/component-metadata.ts
• react-sdk/src/util/registry.ts
• react-sdk/src/hooks/use-component-state.tsx
• docs/
• showcase/