The main purpose of this doc is to outline the changes needed for this library so that it can be used in conjunction with another project.
We need a function added "getLexicalText()" to all custom display views that can display Rich Text. The purpose of this function is that it will return a string in a very specific format as outlined below.
Successfully implemented H1 and H2 heading support in the rich text editor library. This includes:
- UI Controls: Added H1 and H2 buttons to the KJ Demo Panel with proper icons and state management
- RichTextState Methods: Added
toggleH1()andtoggleH2()methods to the RichTextState class - State Management: Added
isH1andisH2properties to track current heading state - Lexical Integration: Updated Lexical parser to properly handle H1 and H2 heading nodes
- Mutual Exclusivity: Headings are mutually exclusive (selecting one removes the other)
- H1 Style: 2.em font size, bold weight
- H2 Style: 1.5.em font size, bold weight
- Lexical Format: Properly exports/imports as
{"type": "heading", "tag": "h1/h2"}nodes - Error Handling: Graceful fallback to normal text if heading parsing fails
- ✅ Manual testing in KJ Communities Demo app
- ✅ H1 and H2 buttons work correctly in toolbar
- ✅ Heading styles are properly applied and displayed
- ✅ Lexical export/import preserves heading information
Implemented comprehensive testing to verify that lexical data round-trip works correctly. This ensures that what's copied when we copy the lexical data matches what is being used to set when we use the top right buttons in the KJ Communities test activity.
- Unit Tests: Created
LexicalRoundTripTest.ktin the library's test suite - Integration Tests: Added test button in KJ Demo Screen for real-time testing
- Comprehensive Coverage: Tests all supported rich text features including headings
-
Round-Trip Consistency:
- Create rich text content using UI methods
- Export to Lexical JSON using
getLexicalText() - Import back using
setLexicalText() - Verify text content matches exactly
-
Demo JSON Compatibility:
- Test with exact JSON from KJ Demo buttons
- Verify re-export maintains structure
- Confirm heading nodes are preserved
-
JSON Structure Validation:
- Verify exported JSON contains proper heading nodes
- Check for correct
"type":"heading"and"tag":"h1/h2"structure - Validate text content preservation
- ✅ Text Content Round-Trip: PASS - Original and imported text match exactly
- ✅ Demo JSON Compatibility: PASS - KJ Demo button JSON works correctly
- ✅ Heading Structure: PASS - H1 and H2 nodes properly preserved in JSON
- ✅ Error Handling: PASS - Graceful fallback on parsing errors
- ✅ Cross-Platform: PASS - Tests run successfully on Desktop, JS, WASM, and iOS
- Automated Unit Tests: Run via
./gradlew :richeditor-compose:allTests - Interactive Testing: Green play button in KJ Demo Screen top bar
- Manual Verification: Use copy/paste buttons in demo messages
- Lexical JSON export/import maintains perfect fidelity for supported features
- H1 and H2 headings are correctly preserved as heading nodes with proper tags
- Text formatting (bold, italic, strikethrough, underline) works correctly
- The library gracefully handles unsupported features by converting to normal text
- Round-trip testing confirms data integrity across the entire flow
The following rich text features were identified as not supported by the Lexical JSON format and have been removed from the KJ Demo Panel:
- Text Alignment Buttons: Left, Center, Right alignment controls
- Custom Font Size Button: 28.sp font size selector
- Text Color Button: Red text color option
- Background Color Button: Yellow background color option
- Code Span Button: Inline code formatting
- All unsupported features are commented out in
KJDemoPanel.ktwith explanatory comments - Comments reference the Lexical JSON specification for why each feature was removed
- The demo now only shows features that are fully supported by the Lexical format
- App builds and runs successfully with clean UI
- ✅ App compiles and runs without errors
- ✅ Only supported rich text features are visible in the toolbar
- ✅ All remaining features work correctly with Lexical export/import
- ✅ Clean, focused UI that matches Lexical capabilities
Successfully renamed all demo classes from "SlackDemo" to "KJDemo" prefix:
SlackDemoLinkDialog.kt→KJDemoLinkDialog.ktSlackDemoPanel.kt→KJDemoPanel.ktSlackDemoPanelButton.kt→KJDemoPanelButton.ktSlackDemoScreen.kt→KJDemoScreen.kt
- ✅ Updated all references in
NavGraph.ktandRichTextStyleRow.kt - ✅ Navigation integration working correctly
- ✅ App builds and installs successfully on Android device
- ✅ "KJ Communities Demo" appears in navigation and functions properly
Both Task 1 (Get Lexical Text with H1/H2 support) and Task 2 (Hide Non-Lexical Supported Rich Text) have been successfully completed with comprehensive testing and verification.
- ✅ H1 and H2 heading support fully implemented and tested
- ✅ Lexical round-trip functionality verified with comprehensive test suite
- ✅ Non-supported features properly removed from demo UI
- ✅ Demo classes renamed to KJ prefix with full integration
- ✅ Cross-platform testing confirms functionality works on all supported platforms
The rich text editor library now fully supports H1 and H2 headings with proper Lexical JSON export/import, and the demo application cleanly showcases only the features supported by the Lexical format.