(feat: side card) Add side-card panel to add text information to the code

[afucher]

This feature will enable the user to use an aditional panel to add contextual information related to code. I saw a lot of people using this template in social media (I'm included on this), but we need to make the snippet on Carbon and then use a image editor to make the rest.

This PR incudes:

• A new setting inside Editor tab: Enable side card
• Encode and decode of setting, title and body in URL

I took some decisions related to design:

• font-size and family used values that are good to read. Family: Lato sans-serif, title size 28px and body size 20px;
• side card background color and opacity used an option that allow the original background to appear and did not difficult the user to read the text. Color white and opacity 0.7;

This is something that we can evolve in the future making a specific tab in the settings, enabling the user to select those properties if needed.

https://user-images.githubusercontent.com/3756185/163623967-4eaab166-9f97-498c-bd8b-f07de80180b7.mov

• [x] Integration tests

Closes #1364

[vercel[bot]]

@afucher is attempting to deploy a commit to the Carbon Team on Vercel.

A member of the Team first needs to authorize it.

[afucher]

Hey @mfix22 , can you take a look please?

[mfix22]

@afucher still considering whether I want to support this long term. It has been our historical position to focus on the snippet itself, and let folks add other details like this in editing tools outside of Carbon.

[afucher]

hey @mfix22 I totally understand that you need to consider if you want to support. So, I took the decision to create a browser extension to implement this. This first version is just available for Google Chrome (and Edge) but I want to support other browsers. kovacs

So, I'm closing this PR for now! Thanks