feat: Introduce a reusable MarkDownEditor with improved UX

[lizziemac]

Description

• Fixed UI height: The height of the Markdown UI has been adjusted to prevent it from hiding the collection tabs when the documentation is very long.
• Improved save feedback: A toast now pops up when the content is saved by either blurring, hitting cmd+s, or by clicking the Save button.
• Added placeholder text: Placeholder text has been added to guide users to write documentation of their collection!
• Adjusted double-click behavior: Double-clicking no longer takes you into edit mode, making it easier to copy/paste from the docs. Instead, you can quadruple click. This allows users to use the native "double-click" and "triple-click" functionality of text boxes. If this doesn't go over well, reverting is fine.
• Enhanced button design: The button has been redesigned and repositioned for a nicer experience.
• Hover enables a nice background color

Resolves #2032

Demos

Video of switching from placeholder text view/preview to edit mode

https://github.com/usebruno/bruno/assets/18120837/3c735e22-e8cb-4a99-9c45-f8a06bb33463

Dark Mode Note: This looks even nicer with this change #2030

Light Mode (with hover activated)

Screenshot of what a really long document looks like now (peep the scrollbar)

Contribution Checklist:

• [x] The pull request only addresses one issue or adds one feature.
• [x] The pull request does not introduce any breaking changes
• [x] I have added screenshots or gifs to help explain the change if applicable.
• [x] I have read the contribution guidelines.
• [x] Create an issue and link to the pull request.

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.

[bpoulaindev]

Looks nice but why a quadruple click ? I submitted a big PR a while ago to introduce Monaco Editor on top of the current one we got (codemirror), i can't give you any date but it will be in beta someday, and will improve the IDE experience for whatever language you choose

[lizziemac]

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

[end3rbyte]

Hi @lizziemac

Here are my feedbacks:

• Fixed UI height: The height of the Markdown UI has been adjusted to prevent it from hiding the collection tabs when the documentation is very long. >> yes it's a good idea

• Improved save feedback: A toast now pops up when the content is saved by either blurring, hitting cmd+s, or by clicking the Save button. >> yes it's a good idea

• Adjusted double-click behavior: Double-clicking no longer takes you into edit mode, making it easier to copy/paste from the docs. Instead, you can quadruple click. This allows users to use the native "double-click" and "triple-click" functionality of text boxes. If this doesn't go over well, reverting is fine. >> sorry but I don't like the quadruple click to enter edit mode. I can survive if it enters in int edit mode when I want to copy/paste from the doc

• Added placeholder text: Placeholder text has been added to guide users to write documentation of their collection! >> see comment above

• Enhanced button design: The button has been redesigned and repositioned for a nicer experience. Hover enables a nice background color >> Ok but maybe we should add also a cancel button if the user doesn't want to save . Also I don't like that it saves automatically when you close the tab

[lizziemac]

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

[lizziemac]

Hi @busy-panda and @bpoulaindev

I have addressed all current feedback. Changes made are:

• Double-click to edit re-introduced
• Added a different section for the description of the tab to match the other collection tabs/maintain a uniform look.
• Leaving the tab without saving now replicates behavior of other tabs in the collection.
  • When leaving the tab while editing, then returning to the tab, the doc is still in Edit mode
  • No pop-up currently as I believe that would scope-creep the PR, because it would affect the behavior of the entire collection.
• Cancel button lets you revert changes (image of button below)

[end3rbyte]

Hi @lizziemac

I still have these two points that I think would be great to address:

1. You made the change only in the Collection docs tab, but the same should be done in the request docs tab
2. I don't think it's necessary to change the background color when the user hover with the mouse. Just changing the cursor like you do is enough to indicate that it is editable if he double clicks.

Cheers

[lizziemac]

Hey @busy-panda !

1. You made the change only in the Collection docs tab, but the same should be done in the request docs tab

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.

2. I don't think it's necessary to change the background color when the user hover with the mouse. Just changing the cursor like you do is enough to indicate that it is editable if he double clicks.

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!