Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Details
Design Doc
This is a solution proposal for
Live Markdown Preview
problem.Using Aztec Editor with ExpensiMark. This solution involves the use of the Aztec editor component in combination with ExpensiMark for real-time Markdown to HTML conversion and preview.
Overview: The Aztec editor is a rich text editor component used for input. It provides features like multi-line input, selection change handling and content size change handling. LiveMarkdownPreview Component: This is a React component that uses the Aztec editor for text input and ExpensiMark for Markdown parsing and conversion.
Markdown Parsing: The LiveMarkdownPreview component uses an instance of ExpensiMark to parse and convert markdown syntax into HTML. This is done in the processHtml function, which takes an HTML string as input and returns an HTML string with markdown syntax. Real-time Preview: The LiveMarkdownPreview component uses the Aztec editor for text input. As the user types in markdown syntax, the text is parsed and converted into HTML in real-time using the processHtml function. This provides a live preview of the formatting as the user types.
State Management: The LiveMarkdownPreview component uses React's state hooks to manage the HTML content (html state) and the text selection ranges (selection and tempSelection states). These states are updated in response to changes in the text input and selection.
Event Handling: The LiveMarkdownPreview component defines several event handlers for the Aztec editor. These handle changes in the text (handleChangeText), changes in the selection (handleSelectionChange), and other events. These handlers update the component's states as necessary, triggering re-renders to update the live preview.
Fixed Issues
#14872
$
PROPOSAL:
Tests
Offline tests
QA Steps
PR Author Checklist
### Fixed Issues
section aboveTests
sectionOffline steps
sectionQA steps
sectiontoggleReport
and notonIconClick
)myBool && <MyComponent />
.src/languages/*
files and using the translation methodWaiting for Copy
label for a copy review on the original GH to get the correct copy.STYLE.md
) were followedAvatar
, I verified the components usingAvatar
are working as expected)/** comment above it */
this
properly so there are no scoping issues (i.e. foronClick={this.submit}
the methodthis.submit
should be bound tothis
in the constructor)this
are necessary to be bound (i.e. avoidthis.submit = this.submit.bind(this);
ifthis.submit
is never passed to a component event handler likeonClick
)StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)
)Avatar
is modified, I verified thatAvatar
is working as expected in all cases)ScrollView
component to make it scrollable when more elements are added to the page.main
branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTest
steps.Screenshots/Videos
Web
Mobile Web - Chrome
Mobile Web - Safari
Desktop
iOS
Android