-
-
Notifications
You must be signed in to change notification settings - Fork 1k
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
feat: Introduce a reusable MarkDownEditor with improved UX #2033
base: main
Are you sure you want to change the base?
Conversation
Looks nice but why a quadruple click ? |
Thanks for the comment @bpoulaindev! I changed it to quadruple so that when in the preview, you can select words and paragraphs without going into edit mode. With that being said, I totally get it if four clicks is overkill and am happy to revert |
Hi @lizziemac Here are my feedbacks:
|
Thanks for the feedback! I totally forgot about wanting to cancel editing 😆 I'll try to address your comments soon! I'm thinking when we leave a tab, give the user a pop up asking to save or cancel |
b8a474e
to
dda5e6f
Compare
Hi @busy-panda and @bpoulaindev I have addressed all current feedback. Changes made are:
|
Hi @lizziemac I still have these two points that I think would be great to address:
Cheers |
a677535
to
13e51af
Compare
Hey @busy-panda !
I was planning to make this a separate PR, but I'll see how much more code it is. I mostly kept them separate because I didn't want to overwhelm with a huge change, especially before getting approval on the design.
I'd like to keep the hover color, I think the change in the cursor style can easily be missed, and the hover color is something other GUIs do as well for this section (I'm thinking Postman specifically) Thanks again for your feedback! |
marking as draft because introducing requests resulted in some unexpected side effects |
@busy-panda I've addressed your comment about adding this to the request tab as well, and it is now responsive! Video below with updates. I improved the UI a bit further just because with the response panel things were getting less clean unless I made changes. |
Description
cmd+s
, or by clicking theSave
button.Resolves #2032
Demos
Video of switching from placeholder text view/preview to edit mode
Edit.flow.mov
Dark Mode
![image](https://private-user-images.githubusercontent.com/18120837/320301922-da9ebe46-1ea0-4038-a8fa-78986cf8ac1e.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTk2NTE5ODksIm5iZiI6MTcxOTY1MTY4OSwicGF0aCI6Ii8xODEyMDgzNy8zMjAzMDE5MjItZGE5ZWJlNDYtMWVhMC00MDM4LWE4ZmEtNzg5ODZjZjhhYzFlLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MjklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjI5VDA5MDEyOVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWY5NWIzMmE5M2RmNjQ3NDgzMmM5YmRlZDY3NGE1YjI0MTRlMjNlMTZlOTE4MTA5YTYyNTY4Y2Y5NDRkYmE4YzcmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.CsNMt3ks2xRK_Xqd1MSUSpMH_IG8FmLJhDvegBFOa44)
Note: This looks even nicer with this change #2030
Light Mode (with hover activated)
![image](https://private-user-images.githubusercontent.com/18120837/320302088-35e90ee4-14c6-4a4d-a170-0a6247f7e76c.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTk2NTE5ODksIm5iZiI6MTcxOTY1MTY4OSwicGF0aCI6Ii8xODEyMDgzNy8zMjAzMDIwODgtMzVlOTBlZTQtMTRjNi00YTRkLWExNzAtMGE2MjQ3ZjdlNzZjLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MjklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjI5VDA5MDEyOVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTAzNTAwMzY1MjEyZDMxMmRhOTMxZjVhZjhiZWZmN2M1ZTk3MDhhYTM4NjJhMTQyMGQzMmNmZTIxNzU2YTcxOWImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.7b0mEZc2QnYmuSd5t63oAMZoyaP2R6YFzJVzytycX2o)
Screenshot of what a really long document looks like now (peep the scrollbar)
![image](https://private-user-images.githubusercontent.com/18120837/320301825-5e554c9e-3a7b-44ee-89aa-36bb4fda8809.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTk2NTE5ODksIm5iZiI6MTcxOTY1MTY4OSwicGF0aCI6Ii8xODEyMDgzNy8zMjAzMDE4MjUtNWU1NTRjOWUtM2E3Yi00NGVlLTg5YWEtMzZiYjRmZGE4ODA5LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MjklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjI5VDA5MDEyOVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWE1MGQ4MDEwYTE2MTljYmNhMjk4ZTE3NmYyODc2ZGUzN2Y2NmI3YWMyYjkwM2IwM2I5ZGI4N2I2YTc0MjU1ZjYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.3b6FnrTygOetyqMZKjHMeAF_5LdFF7wa7iOW5rtBrfE)
Contribution Checklist:
Note: Keeping the PR small and focused helps make it easier to review and merge. If you have multiple changes you want to make, please consider submitting them as separate pull requests.
Publishing to New Package Managers
Please see here for more information.