-
Notifications
You must be signed in to change notification settings - Fork 2.8k
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
Add inline images preview to the Live Markdown Input on the web #49250
base: main
Are you sure you want to change the base?
Add inline images preview to the Live Markdown Input on the web #49250
Conversation
@dubielzyk-expensify @hungvu193 One of you needs to copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button] |
Do we need to use |
I used |
It's because I'm changing the source URL of the image, and the browser is loading it once again since it can be completely different image. While loading we are rendering the loading indicator that has Also, on the screen shots that you posted I'm changing the URL variables (width and height) to get the image with different resolution, it's also the reason of the jump |
@mountiny, can we get an adhoc build for testing so we can all easily verify how inline images behave in action, please? |
This comment has been minimized.
This comment has been minimized.
just tried the adhoc build and I got the same issue with @shawnborton Here's the logs: |
@Skalakid Can we add a debounce or wait until the user ends their inputting before another preview? Screen.Recording.2024-09-16.at.21.39.29.mov |
@hungvu193 I've added a debounce for inline image previews :D |
Awesome!. It's working! 🎉 . I've found this bug, if you added multiple inline images at the same time, when you edit that message, the first image won't show up. Screen.Recording.2024-09-17.at.17.58.04.mov |
Thanks for your quick work 🚀 let me test it |
I think that we should fix this issue in a separate PR, since it's more connected to E/App itself and how attachments are being displayed in the chat and the attachment modal |
@Skalakid It worked 🚀 . I've wondered if we should add a loading spinner when we're back online? What's your thought? Screen.Recording.2024-09-20.at.21.54.49.mov |
@hungvu193 Hmm, I'm not sure. I think it's a tiny detail for now, and we can add it in other PR that will bump the library |
Agreed 😄 This LGTM, I'll complete the checklist |
Reviewer Checklist
Screenshots/VideosAndroid: NativeAndroid: mWeb ChromeScreen.Recording.2024-09-20.at.22.34.58.moviOS: NativeiOS: mWeb SafariScreen.Recording.2024-09-20.at.22.25.19.movMacOS: Chrome / SafariChrome.movMacOS: DesktopScreen.Recording.2024-09-20.at.22.23.07.mov |
Note For the QA: We will handle this one (#49250 (comment)) and #49250 (comment) in a separate PR. |
Requesting a review from Jack too since he is working on the markdown preview feature. I will do a review for both that and the forward delete issue. |
Woo! Nice work getting it here - changes look good but since this is a big bump this might be good to have tested by QA as well |
Just generated a new build of the latest, and will have applause run through some tests for the composer |
🧪🧪 Use the links below to test this adhoc build on Android, iOS, Desktop, and Web. Happy testing! 🧪🧪 |
If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel! Mark down - Image preview in the composer loads infinitely when opened in threadVersion Number: 9.0.39-0
Expected Result:The image preview in the composer will not load infiniftely Actual Result:The image preview in the composer loads infinitely when opened in thread Workaround:Unknown Platforms:Which of our officially supported platforms is this issue occurring on?
Screenshots/VideosBug6612778_1727109930897.20240924_004024.mp4Upwork Automation - Do Not Edit |
If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel! mWeb - Task - Description entered is not shown in task previewVersion Number: 9.0.39-0
Expected Result:Description entered must be shown in task preview Actual Result:Description entered is not shown in task preview Workaround:Unknown Platforms:Which of our officially supported platforms is this issue occurring on?
Screenshots/VideosBug6612781_1727110034749.Screenrecorder-2024-09-23-22-12-44-97_compress_1.mp4Upwork Automation - Do Not Edit |
If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel! mWeb - Room - The text saved in private notes section is not shownVersion Number: 9.0.39-0
Expected Result:The text saved in private notes section must be shown Actual Result:The text saved in private notes section is not shown Workaround:Unknown Platforms:Which of our officially supported platforms is this issue occurring on?
Screenshots/VideosBug6612840_1727113107966.az_recorder_20240923_223645_compress_1.mp4Upwork Automation - Do Not Edit |
If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel! mWeb - Composer - Text cursor appears behind the first letter after tapping keyboard spacebarVersion Number: 9.0.39-0 Precondition:
Expected Result:The text cursor will be at the end of the word Actual Result:The text cursor appears behind the first letter after tapping keyboard spacebar Workaround:Unknown Platforms:Which of our officially supported platforms is this issue occurring on?
Screenshots/VideosBug6612846_1727113339788.1727111451020_Screen_Recording_20240924_010925_Chrome__1_.mp4Upwork Automation - Do Not Edit |
If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel! Web - Compose box - Emojis entered from OS-built emojis are rendered as small emojisVersion Number: 9.0.39-0 Precondition:
Expected Result:Emojis have big size in compose box and the send button works Actual Result:Emojis are rendered in small size and send button is disabled Workaround:Unknown Platforms:Which of our officially supported platforms is this issue occurring on?
Screenshots/VideosBug6613010_1727122626916.bandicam_2024-09-23_20-59-04-879.mp4Upwork Automation - Do Not Edit |
Tested this locally with the branch and it's looking awesome! At least the inline image side of it. I'll leave the rest to testing, but from a visual perspective this is good to go 👍 |
This bug from QA is interesting. |
QA regression has been completed |
Hello, thanks for the QA regression tests, I'm back at the office and I'm starting to investigate them |
@lanitochka17 I wasn't able to reproduce the following issues, can you check it again, but with the latest main merged? new.task.movprivate.notes.mov |
@lanitochka17 Oh, okay, everything happens on Samsung devices.. I will continue the investigation tomorrow |
Details
This PR bumps the version of the
react-native-live-markdown
to the latest and enables the inline image previews inside the input on the webFixed Issues
$ #40181 (comment)
$ #48797
PROPOSAL:
Tests
Inline image preview
#48797
Offline tests
Same as Tests
QA Steps
Same as Tests
PR Author Checklist
### Fixed Issues
section aboveTests
sectionOffline steps
sectionQA steps
sectiontoggleReport
and notonIconClick
)myBool && <MyComponent />
.src/languages/*
files and using the translation methodSTYLE.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 and/or tagged@Expensify/design
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: mWeb Chrome
chrome.mov
iOS: Native
web only feature
iOS: mWeb Safari
ios.mov
MacOS: Chrome / Safari
web.mov
MacOS: Desktop
desktop.mov