Feature/markdown toolbar

[tomrule007]

Updates Issues: #1125, #1010

what

Add markdown buttons to the ` component (the comment input box) with binded hotkeys and tooltips matching those of github.

why

Easy way to style comments and let reviewers know our comment boxes support markdown syntax.

how

Create a custom state type TextStyle that lead to small composable functions to build the various style detection functions and apply or remove the style. (More details in #1125)

Checklist:

• Tests
• Typescript definitions updated
• Ready to be merged

[vercel]

@tomrule007 is attempting to deploy a commit to a Personal Account owned by @garageScript on Vercel.

@garageScript first needs to authorize it.

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/c0d3/c0d3-app/EmJ9jZ33MW3rkE5vnDN8nSMj2LEL
✅ Preview: https://c0d3-app-git-fork-tomrule007-feature-markdown-toolbar-c0d3.vercel.app

[JasirZaeem]

Looks great! We already have react-feather/feathericons.com as a dependency, maybe you can use those instead of the GitHub icons if they have all the ones you need?

[tomrule007]

Looks great! We already have react-feather/feathericons.com as a dependency, maybe you can use those instead of the GitHub icons if they have all the ones you need?

Both packages are tree shaken single svg imports so have both really isnt adding any extra weight to the project physically but does add extra mental burden to the developers so I get not wanting to have both.

Feather is missing: Header icon, quote icon and numbered list icon.

We are currently only using: Star, CheckCircle, File, Code, GitHub, Linkedin icons from the feather package right now. The GitHub packages has all of those besides the Linkedin icon so we could potential remove feather and just use GitHub icons.

[JasirZaeem]

Yeah bundle size isn't a problem with this, I suggested a single package mostly for a cohesive design, mixing different icon libraries might not look good, so I think a single style of icons across the board when possible would be good regardless of the actual icon library used.

[codecov]

Codecov Report

Merging #1013 (7fb41cb) into master (40e13f7) will not change coverage.
The diff coverage is 100.00%.

@@            Coverage Diff             @@
##            master     #1013    +/-   ##
==========================================
  Coverage   100.00%   100.00%            
==========================================
  Files          141       144     +3     
  Lines         2263      2419   +156     
  Branches       559       618    +59     
==========================================
+ Hits          2263      2419   +156     

Impacted Files	Coverage Δ
components/MarkdownToolbar.tsx	100.00% <100.00%> (ø)
components/MdInput.tsx	100.00% <100.00%> (ø)
helpers/textStylers.ts	100.00% <100.00%> (ø)
helpers/useIsMac.ts	100.00% <100.00%> (ø)