Skip to content

feat: Implement tabbed article editor with real-time preview#2125

Open
anshul23102 wants to merge 2 commits into
SB2318:mainfrom
anshul23102:feature/article-editor-tabbed-interface-1291
Open

feat: Implement tabbed article editor with real-time preview#2125
anshul23102 wants to merge 2 commits into
SB2318:mainfrom
anshul23102:feature/article-editor-tabbed-interface-1291

Conversation

@anshul23102

@anshul23102 anshul23102 commented Jul 13, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Summary

Implements a tabbed interface for the article editor that merges EditorScreen and PreviewScreen into a single component, providing healthcare professionals with real-time markdown preview without navigation delays.

Key Changes

  • Tabbed UI: Two tabs - "Editor" (rich text editor) and "Preview" (real-time rendering)
  • Real-time Preview: Preview updates as user types using AutoHeightWebView
  • No New Dependencies: Custom tab implementation using TouchableOpacity (leverages existing patterns)
  • UX Enhancement: Header preview button now switches to preview tab instead of navigating away
  • Maintained Functionality: All rich text features (bold, italic, headings, lists, images) continue to work

Technical Details

  • Editor tab: Preserves existing RichEditor with all formatting tools and toolbar
  • Preview tab: Renders HTML using createHTMLStructure utility and AutoHeightWebView for real-time rendering
  • Tab state: Managed via activeTab state variable with smooth transitions
  • Styling: Professional tab bar with active state indicators (underline animation, color change)
  • Component structure: Both EditorScene and PreviewScene functions handle their respective content

Implementation Highlights

✓ No external dependencies added - uses existing react-native, react-native-pell-rich-editor, and AutoHeightWebView
✓ Maintains all existing rich text editing capabilities
✓ Character count persists across tab switches
✓ Professional tab UI with visual feedback on active tab
✓ Respects safe area insets for notch-aware devices

Resolves

Addresses the feature request in #1291 to merge article editor and preview into a tabbed interface

Testing

The implementation maintains all editor functionality while adding tab switching:

  • ✓ Switch between Editor and Preview tabs
  • ✓ Edit content in Editor, watch Preview update in real-time
  • ✓ Insert images and verify display in preview
  • ✓ Test rich formatting (bold, italic, headings, lists)
  • ✓ Verify preview button in header switches to Preview tab
  • ✓ Verify character count displays correctly
  • ✓ Test on devices with different safe area insets

Performance Considerations

  • Preview rendering is deferred until tab is selected (no simultaneous rendering overhead)
  • AutoHeightWebView efficiently measures content height
  • Tab switching uses React state, not navigation stack (faster transitions)

@anshul23102
feat: Implement tabbed interface for article editor with real-time ma…
1164bdc 
…rkdown preview

- Merge EditorScreen and PreviewScreen into single tabbed component
- Add "Editor" tab with rich text editor and formatting toolbar
- Add "Preview" tab with real-time HTML rendering using AutoHeightWebView
- Implement tab switching via TouchableOpacity buttons (no new dependencies)
- Update preview button header to switch to preview tab instead of navigation
- Enhance UX for healthcare professionals unfamiliar with raw markdown by providing immediate visual feedback
- Maintain all existing editor functionality (image insertion, rich formatting, character count)

Resolves SB2318#1291
@github-actions

github-actions Bot commented Jul 13, 2026

Copy link
Copy Markdown
Contributor

Thank you @, for creating the PR and contributing to our UltimateHealth project 💗.
Our team will review the PR and will reach out to you soon! 😇
Make sure that you have marked all the tasks that you are done with ✅.
Thank you for your patience! 😀

@anshul23102

anshul23102 commented Jul 13, 2026

Copy link
Copy Markdown
Contributor Author

@SB2318 /assign /claim GSSoC 2026

@anshul23102

anshul23102 commented Jul 13, 2026

Copy link
Copy Markdown
Contributor Author

This implementation could benefit from labels: feature, enhancement, mobile, and UX to help with organization and prioritization.

@github-actions

github-actions Bot commented Jul 13, 2026

Copy link
Copy Markdown
Contributor

Automated Review Feedback

Provide actionable comments grouped by severity:

Critical

  • XSS Vulnerability in WebView: Displaying user-generated HTML content directly within a WebView (via AutoHeightWebView) without proper sanitization can introduce Cross-Site Scripting (XSS) vulnerabilities. The article content, which comes from RichEditor, should be thoroughly sanitized before being passed to createHTMLStructure and rendered in the WebView. Please ensure that either RichEditor itself outputs sanitized HTML, or createHTMLStructure performs robust HTML sanitization to prevent malicious scripts from being executed.

Important

  • createHTMLStructure Implementation: The implementation of createHTMLStructure is not visible in this PR. This function is critical for correctly rendering the article content in the WebView. Please ensure it:
    • Correctly wraps the article HTML content with necessary <html>, <head>, <body> tags and basic styling for readability.
    • Handles potential issues like relative image paths if RichEditor outputs them.
    • (Reiterating from Critical) Performs HTML sanitization if the article content is not guaranteed to be safe.

Suggestions

  • Loading State for Preview: For very long articles or slow devices, the WebView might take a moment to render. Consider adding a small loading indicator or skeleton UI to the PreviewScene while the AutoHeightWebView is rendering, especially if article is not empty.
  • Accessibility: Ensure the tab buttons are accessible, e.g., by providing accessibilityLabel props if the text content isn't sufficient for screen readers.
  • Tests: Add unit tests for the EditorScreen component, specifically for the tab switching logic and the conditional rendering of EditorScene and PreviewScene. If createHTMLStructure is a new utility, consider adding unit tests for it as well.

Maintainer Note:

Once the initial automated feedback has been addressed, maintainer @SB2318 will review the pull request for final evaluation.

@anshul23102
fix: Resolve pre-existing TypeScript syntax errors blocking CI
b197a15 
- ArticleCard.tsx: close mockReadability object literal (missing closing brace swallowed heartScale declaration)
- PreferencesContext.tsx: restore missing generic angle bracket on useState<LanguageCode[]>
- CommentScreen.tsx: restore missing generic angle brackets on useState<Comment[]>, useState<User[]>, and TriggersConfig<...>
- HomeScreen.tsx: remove orphaned import fragment left over from a prior merge

These were unrelated to the tabbed editor feature but broke tsc/eslint parsing repo-wide, so CI could not validate this PR.
@anshul23102

anshul23102 commented Jul 13, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor Author

CI status update

The Typecheck/Lint/Unit Test failures on the first push were caused by pre-existing issues on `main`, unrelated to this feature - confirmed by diffing the affected files against `upstream/main` before any change here. I've fixed what was safely fixable in a small follow-up commit:

  • `ArticleCard.tsx`: a missing closing brace on the `mockReadability` object literal was swallowing the next `heartScale` declaration, breaking the parser for the whole file.
  • `PreferencesContext.tsx` / `CommentScreen.tsx`: missing generic angle brackets (`useState<...>`, `TriggersConfig<...>`) - looks like an editor auto-format mishap that dropped a few < characters.
  • `HomeScreen.tsx`: an orphaned import fragment left over from a previous merge.

After these fixes, Typecheck/Lint parse cleanly and Unit Tests went from failing outright to 383/386 passing (the remaining 3 are pre-existing test-assertion mismatches in files I didn't touch, e.g. useUserLogin.test.ts, CommentScreen.test.tsx).

Two things I intentionally left alone since they're outside this PR's scope and need repo-level decisions, not source edits:

  • Lint: zod-validation-error resolves to v3.5.4 in the lockfile, but eslint-plugin-react-hooks requests its ./v4 subpath — a dependency/lockfile mismatch.
  • Expo Doctor: several packages (react-native, react-native-reanimated, babel-preset-expo, etc.) are behind the versions the installed Expo SDK expects.

Happy to open a separate issue/PR for those if useful - didn't want to bundle a lockfile bump into a feature PR.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

gssoc in-progress level:frontend level:intermediate type:feature

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@anshul23102