feat: Added WYSIWYG and code formatting features to input

[blackgirlbytes]

Saw someone in Slack wish for a way to easily copy and paste markdown code in input or have a WYSIWYG input like Slack.

While this doesnt allow you to paste and it preserves formatting. It does make it easier to:

• add markdown to text like bold, italics, quotes, bullets etc because there is a WYSIWYG buttons
• also it makes it easier to format code..you don't manually have to type backticks
• and you can preview what it looks like before you press send

Not sure if you all will like this 🤷🏿‍♀️ , but it's a start for the request that the user had

I also refactored the Input component because it got really large with all the things I added so I modularized it.

Before

Code is not autoformatted or syntax highlighted when you input.

Screen.Recording.2025-01-06.at.12.34.17.AM.mov

After

You can use back ticks/code block markers and specify the language to ensure it's formatted and has syntax highlighting

Screen.Recording.2025-01-06.at.12.36.32.AM.mov

Before

Have to manually type markdown syntax

Screen.Recording.2025-01-06.at.12.38.20.AM.mov

After

Can use WYSIWYG toolbar to format text using markdown

Screen.Recording.2025-01-06.at.12.40.08.AM.mov

[github-actions]

Desktop App for this PR

The following build is available for testing:

• 📱 macOS Desktop App (Universal, signed)

The app is signed and notarized for macOS. After downloading, unzip the file and drag the Goose.app to your Applications folder.

This link is provided by nightly.link and will work even if you're not logged into GitHub.

[github-actions]

Desktop App for this PR

The following build is available for testing:

• 📱 macOS Desktop App (Universal, signed)

The app is signed and notarized for macOS. After downloading, unzip the file and drag the Goose.app to your Applications folder.

This link is provided by nightly.link and will work even if you're not logged into GitHub.

[michaelneale]

oh this is really cool! and may be a way to also add in image preview/image uploading

[blackgirlbytes]

I would love to take a stab at image previewing @michaelneale

[Kvadratni]

I like this, but have a QQ. Can we use an off the shelf WYSIWYG?
E.g.
https://github.com/jpuri/react-draft-wysiwyg

[michaelneale]

@Kvadratni perhaps, but often those ones come with a lot of weight (at least used to) but yeah.

@blackgirlbytes #548 - some preview stuff there, but handling images needs more work on the backend I guess (but wasn't sure if that overlaps with this).

[blackgirlbytes]

Ohhh dang if it will need backend work..i dont feel confident with Rust 🫣 , but I will take a look at that PR to see if there's overlap @michaelneale

Hmm good point. If we needed to add more to the editor, the logic could get overly complicated. I do like https://remirror.io @Kvadratni

I can make a separate PR with remirror or the tool you suggested and see which you and mic like more.

[blackgirlbytes]

so far the bundle sizes for off the shelf options are not great..and the implementation seems just as complicated. ill keep searching for off the shelf options this week.

[alexhancock]

This is awesome functionality! Thanks for working on it.

The only visual nit I have is how the rows of icons stack up with one on the top left and then the other one vertically middle positioned on the right.

I wonder if the designers have a thought about how would could position these things to maximize space for the content and keep the icons around the edges of the chrome. Will link this comment and start a thread!

[blackgirlbytes]

Final decision from conversation is to use popover when selecting text as shown below

[michaelneale]

yes I think dependencies would bring too much along, a lot of those editors are really quite heavy and difficult, and we don't need all the baggage, I like this approach

[blackgirlbytes]

yes I think dependencies would bring too much along, a lot of those editors are really quite heavy and difficult, and we don't need all the baggage, I like this approach

okay phew!