feat(chatbar): **markdown** in chatbar

[molimauro]

What this PR does 📖
Chatbar markdown, chatbar rework, css bugfix, integrating old features, emoji fix. Focus input on reply, recipient switch, emoji selection.

Which issue(s) this PR fixes 🔨
AP-2
AP-196
AP-474

Special notes for reviewers 🗒️
Available markdown:
italics with * and _
bold **
underline __
escape command
code with single `
combined bold/italics ***
strikethrough ~~
autolinks <https://satellite.im>
url parsing
spoilers ||

Additional comments 🎤
Related to the chatbar, I’m going to open the following tickets:

• keep track of last cursor position for different purposes (example: emoji are always inserted at the end of the string);
• remove marked (when you send a message it will be converted in the chat to html by marked, must be refactored and removed);
• undo/redo manager (cmd + z, shift + cmd + z);
• integrate highlightjs;
• integrate mentions ui (@user1, @here, @channel..).

[phillsatellite]

emoji.mov

spoilers.mov

Only 2 issue I noticed going through was Emoji is showing up tiny in the chatbar and when you select an emoji the menu will move to the opposite side of the screen and spoilers was not working correctly for me either (verified this problem only happens on my local and not dev) otherwise all good

[molimauro]

emoji.mov
spoilers.mov
Only 2 issue I noticed going through was Emoji is showing up tiny in the chatbar and when you select an emoji the menu will move to the opposite side of the screen and spoilers was not working correctly for me either (verified this problem only happens on my local and not dev) otherwise all good

For the emoji i'll check. What do you mean by "tiny"? How should they appear?

I see the spoilers are working correctly in the chatbar, they do not work correctly once you send the message because that part is still a WIP.

[phillsatellite]

emoji.mov
spoilers.mov
Only 2 issue I noticed going through was Emoji is showing up tiny in the chatbar and when you select an emoji the menu will move to the opposite side of the screen and spoilers was not working correctly for me either (verified this problem only happens on my local and not dev) otherwise all good

For the emoji i'll check. What do you mean by "tiny"? How should they appear?

I see the spoilers are working correctly in the chatbar, they do not work correctly once you send the message because that part is still a WIP.

I think the emojis looking too small was just me so you can just scratch that lol and noted about the spoilers 👍

[stavares843]

thanks for testing @phillsatellite 🔨

@molimauro thanks for clarifying, is there anything else that is a WIP?

[molimauro]

emoji.mov
spoilers.mov
Only 2 issue I noticed going through was Emoji is showing up tiny in the chatbar and when you select an emoji the menu will move to the opposite side of the screen and spoilers was not working correctly for me either (verified this problem only happens on my local and not dev) otherwise all good

For the emoji i'll check. What do you mean by "tiny"? How should they appear?
I see the spoilers are working correctly in the chatbar, they do not work correctly once you send the message because that part is still a WIP.

I think the emojis looking too small was just me so you can just scratch that lol and noted about the spoilers 👍

Great!! Thanks :)

[molimauro]

@stavares843

This PR was meant to refactor the chatbar, the sent messages must be parsed according the new markdown rules created.
You can find whats missing in "Additional comments"! I've already created the corresponding tickets, if there's something not clear let me know! thanks! ;)

[stavares843]

@molimauro yes, both Phil and I checked the additional comments, but there was nothing there regarding the spoilers being a WIP, thats why im asking to double check 😂

[molimauro]

@stavares843 yeah sorry, i should have been more specific. Spoilers and underlines are "special" md rules i have added. They are parsed correctly only in the chatbar and not when sent :)

[molimauro]

@phillsatellite i should've fixed the enhancer problem :)

[WanderingHogan]

It looks great, there are a couple minor things you could change if you wanted, but up to you

[stavares843]

first is this branch, second is dev branch

the chat bar has a bigger height compared with dev, is that modification in purpose?

[molimauro]

first is this branch, second is dev branch

the chat bar has a bigger height compared with dev, is that modification in purpose?

yes i noticed on the figma that the chatbar was slightly bigger and that the placeholder was gray. I can change it of course :)

[stavares843]

neat, thanks for checking, just confirming 🎨

[stavares843]

I checked with the design team and there was an error within Figma

it should be 48px high. with a 16px padding all around the inside

[molimauro]

great job @stavares843, thanks 🎉

[stavares843]

are you gonna address that layout change? 🔨 let me know if you need more details

also, conflict 🔨

[molimauro]

are you gonna address that layout change? 🔨 let me know if you need more details

also, conflict 🔨

yes, i'm doing it! I asked to Liz because i had to reduce the padding but kept the 48px height. I'll resolve also other minor fixes i discovered (like adding a max-height on the chat, otherwise if you keep adding a lot of paragraphs it's not very good) and then i rebase and push. Thanks!!

[iltumio]

Seems that we have an overlap with the right icons

[molimauro]

also, the spoilers are not working here, is that part still a WIP?

In this branch spoilers and underlines are managed only in the chatbar, they're not parsed when the msg is sent

[molimauro]

Done, thanks guys!!