Component Kitchen Sink
Interactive showcase of available UI components
Rich Text Editor
Full-featured content editor with Angular components
Interactive Editor
Rich Text Editor
Try out all the editor features below
Editor loads in browser environment
Live Preview
Rendered Output
See how your content looks when rendered
Preview loads in browser environment
Editor Features
Text Formatting
- • Bold, italic, underline, strikethrough
- • Code highlighting
- • Multiple heading levels
- • Text alignment options
editor-showcase.lists-structure
- • Bulleted lists
- • Numbered lists
- • Nested list support
- • Blockquotes
Advanced Content
- • Code blocks with syntax highlighting
- • Tables with editing
- • Horizontal rules
- • Custom Angular components
Interactive Elements
- • Drag and drop content
- • Component selector
- • Real-time preview
- • Undo/redo support
editor-showcase.links-media
- • Hyperlink support
- • Link editing interface
- • External link handling
- • Media embedding (planned)
editor-showcase.tables-layout
- • Dynamic table creation
- • Row and column management
- • Cell content editing
- • Table formatting options
Sample Content
Basic Formatting
Load content with text formatting examples
Structured Document
Load content with headers and lists
Advanced Content
Load content with code blocks and tables
Custom Components
Load content with embedded Angular components
Usage Guidelines
Best Practices
- • Use the editor for rich content creation
- • Preview content before saving
- • Test custom components thoroughly
- • Handle content validation on save
- • Consider accessibility in custom components
Integration Notes
- • Content is stored as TipTap JSON format
- • Use EditorPreviewComponent for read-only display
- • Custom components require registration
- • Editor works in browser environment only
- • SSR support available for preview rendering