-
Notifications
You must be signed in to change notification settings - Fork 3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Live Markdown Preview #34292
Live Markdown Preview #34292
Conversation
This comment has been minimized.
This comment has been minimized.
I'm running into this pod install error
|
@thienlnam Do you have |
I do, I've tried removing it and re-installing it but still no dice. |
For code blocks the markdown is not quite the same as a sent message. I think we can use a different background color like this. |
src/hooks/useMarkdownStyle.ts
Outdated
}, | ||
code: { | ||
color: theme.text, | ||
backgroundColor: theme.textBackground, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We might consider using a different background color for code blocks so that the markdown in composer appears more consistent with the markdown in sent messages.
@shubham1206agra Thanks for your input! We can easily change the blockquote text color if needed, we just need to decide on the actual color. For the reference, here's what it currently looks like: |
@c3024 Thanks for your review. I believe the background color is the same in the composer and in the sent message Another inconsistency is the background under codeblocks. In a sent message, it appears as a single box with its width equal to the maximum width among all lines of text. Currently, both on Android and iOS, the background color appears only under the actual characters of the inline code/codeblock. This is also something that we need to change. Finally, there is one more inconsistency on iOS related to font family – the text should be in monospace font but it is not. This might be related to the fact that @thienlnam Do you think these inconsistencies (missing border, partial background and incorrect font on iOS) are blocking for us? Should we focus on them right now or can we solve them iteratively? Also, I have one question regarding codeblocks. Currently, ExpensiMark allows to write code directly after opening ```. This is not consistent with this design which seems to exclude the characters directly after opening ``` from the bordered block with background. How should we approach this? |
Most of these are not blockers and we can keep working on iteratively, but the incorrect font on iOS would say is probably the closest to a blocker As for the partial background - it is kind of obvious at the moment. I don't think it's a huge deal, but in the meantime until we get the border added could we set the background to be transparent for code blocks so it just doesn't show? (It would just show the enclosing quotes in the different font color similar to how block quotes look right now)
I haven't been able to take this for a test run yet - but are you saying currently in this build if you type out triple backticks it will automatically start formatting the enclosed text even before the user has added the ending triple backticks? If so, I think having this just for the codeblocks is fine. This is how slack also does it so it will be familiar |
Thanks for the response. Okay, let's treat missing monospace font on iOS as a blocker (meaning we need to fix it before this PR gets merged).
Sure, we can set background color to
No, currently the text following the opening triple backticks is not formatted until you close the triple backticks. However, this idea sounds like a reasonable thing to implement, i.e. the closing backticks for the last blockquote in the message are optional. This way, if the user enters triple backticks, the following text will be formatted with monospace font and we avoid a content "jump" when the last closing backtick is added. I think this would be beneficial for user experience. Let us know what you think, we could implement it in ExpensiMark. cc @robertKozik What I meant to ask in the original question was where exactly should we place the rectangle with border and background for the following input: As you can see, I think the best approach here would be to disallow any characters after opening triple backticks. Effectively, this would mean that the user needs to add a newline directly after triple backticks in order for the text to be formatted. Similarly, we would need to disallow any characters in the same line before closing triple backticks. Alternatively, we can place the triple backticks inside the rectangle with background and border (either always or only if there are any characters directly after opening triple brackets). |
Formatting the non-enclosed code block is feasible. However, currently, the user's intent can be ambiguous. For instance, typing |
In my opinion, this should be preferred given every platform markdown works like this. |
Thanks, for this PR then let's aim to
Re the automatic formatting - we've had a previous discussion in the pre-design regarding this and decided not to automatically format any of the text until the ending text for the initial version (discussion here. Something I think we can revisit once we've had some time using this
Agreed, I think we can go with this |
I've pushed a commit that updates the dependency. Can we please run an adhoc build and test the feature? cc @thienlnam |
@thienlnam @tomekzaw I am unable to access the live markdown repo now. Can you give us access? |
🧪🧪 Use the links below to test this adhoc build on Android, iOS, Desktop, and Web. Happy testing! 🧪🧪
|
@tomekzaw Can you merge main? |
@shubham1206agra Done |
Screen.Recording.2024-01-23.at.3.28.08.PM.mov@tomekzaw Typing mention tries to open mention dialog again and again. It has a weird stuttering too when I tried to clear input using Backspace |
Screen.Recording.2024-01-23.at.3.33.22.PM.mov |
@tomekzaw I am able to repro this on desktop main. You can skip this for now. |
Thanks @shubham1206agra for pointing out these bugs, I must have overlooked them!
|
Merged main. FYI the tests are failing because of this error:
|
We have difference in output and preview for this. May need to decide which is correct. Strike and italics have same as preview. @shubham1206agra Can you check one more time? I've build the latest version of this branch and now output and preview is consistent |
@robertKozik This is fixed now. |
We're close to merging - checks are failing for all PRs here https://expensify.slack.com/archives/C01GTK53T8Q/p1706808000490579 but once that is resolved we should be good |
Sorry, I just found this issue. Screen.Recording.2024-02-01.at.11.28.52.PM.movIf the last line happens to be with triple back ticks previous lines' formatting is lost. In this video the website link's formatting is lost. Please check. |
@c3024 Thanks for finding and reporting this issue. There is one case when we deliberately skip formatting: when we are unable to restore the original Markdown string from HTML returned by ExpensiMark. It looks like you have found a Markdown message that, once converted into HTML and back to Markdown, is different than the original input. This is not an issue with cc @thienlnam |
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
🚀 Deployed to production by https://github.com/marcaaron in version: 1.4.36-5 🚀
|
borderColor: theme.border, | ||
borderWidth: 4, | ||
marginLeft: 0, | ||
paddingLeft: 6, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Blockquote element has style of inline-block
which is forcing cursor to be inside of this block and overlap with characters. We solved this by adding padding-right
so that cursor has some space for itself
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
FYI paddingRight
is a no-op on mobile (Android & iOS), it works only on web.
Details
This PR adds Live Markdown Preview feature using
@expensify/react-native-live-markdown
library (which is not open-sourced yet). Currently, the feature targets Android and iOS, but we are already working on Web support.Fixed Issues
$ #27977
$ #32626
PROPOSAL:
Tests
Testing Replacement Rules
Code Fence:
Type:
```your text```
Expected: Text appears in a separate block formatted as code.
Inline Code Block:
Type: ``your text``
Expected: Text appears inline, formatted as code.
Email Link:
Type:
test@email.com
Expected: Email address turns into a clickable mailto link.
URL Link:
Type:
https://github.com/Expensify/App/pull/34292
Expected: Displays "#34292" as a clickable web link.
Italics
Type:
_your text_
Expected: Text appears in italics.
Bold Text:
Type:
*your text*
Expected: Text appears in bold.
Strikethrough Text:
Type:
~your text~
Expected: Text appears with a strikethrough.
Block Quote:
Type:
> your text
Expected: Text appears as a block quote.
Heading:
Type:
# Your Heading
Expected: Text appears as a large, bold heading.
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)StyleUtils.getBackgroundAndBorderStyle(theme.componentBG)
)Avatar
is modified, I verified thatAvatar
is working as expected in all cases)Design
label so the design team can review the changes.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
Android: Native
android.mp4
Android: mWeb Chrome
iOS: Native
Simulator.Screen.Recording.-.iPhone.15.Pro.-.2024-01-31.at.22.21.25.mp4
iOS: mWeb Safari
MacOS: Chrome / Safari
MacOS: Desktop