cialloo
f29f53dec6
All checks were successful
CI - Build and Push / Build and Push Docker Image (push) Successful in 14s
- Added RichTextEditor component with basic formatting features. - Integrated toolbar with undo/redo, text formatting, and color pickers. - Created EditorTheme for styling the editor components. - Added styles for editor and toolbar. - Introduced DropdownColorPicker for color selection. - Updated package.json to include Lexical dependencies. - Created EditorDemo page to showcase the rich text editor. - Added README documentation for the editor's features and usage.
Rich Text Editor
A basic rich text editor built with Lexical, ported from the lexical-playground project.
Features
Toolbar Controls
- Undo/Redo - Navigate through editing history
- Text Size - Select from multiple font sizes (10px - 36px)
- Bold - Make text bold
- Italic - Italicize text
- Underline - Underline text
- Strikethrough - Strike through text
- Code - Format text as inline code
- Text Color - Choose from 30 predefined colors
- Background Color - Choose background color for text
Additional Features
- Quote blocks
- Code blocks (without syntax highlighting)
- Lists (bullet and numbered)
- Headings (H1, H2, H3)
Usage
Basic Usage
import RichTextEditor from './editor/RichTextEditor';
function MyComponent() {
return <RichTextEditor />;
}
Accessing the Demo
Navigate to /editor to see the editor in action.
Files Structure
src/editor/
├── RichTextEditor.tsx # Main editor component
├── index.ts # Export file
├── plugins/
│ └── ToolbarPlugin.tsx # Toolbar with formatting controls
├── ui/
│ ├── DropdownColorPicker.tsx # Color picker component
│ └── DropdownColorPicker.css # Color picker styles
├── themes/
│ └── EditorTheme.ts # Editor theme configuration
└── styles/
├── editor.css # Editor styles
└── toolbar.css # Toolbar styles
Dependencies
lexical- Core editor framework@lexical/react- React bindings@lexical/code- Code block support@lexical/list- List support@lexical/rich-text- Rich text features (headings, quotes)@lexical/selection- Selection utilities@lexical/utils- Utility functions
Customization
Theme
Edit src/editor/themes/EditorTheme.ts to customize the editor's appearance.
Toolbar
Modify src/editor/plugins/ToolbarPlugin.tsx to add or remove toolbar buttons.
Styles
src/editor/styles/editor.css- Editor content stylessrc/editor/styles/toolbar.css- Toolbar styles
Future Enhancements
Possible additions (not currently implemented):
- Syntax highlighting for code blocks
- Links
- Images
- Tables
- Alignment controls
- More list types (checklists)
- Markdown shortcuts