Enhanced MdInput

[tomrule007]

Enhanced MdInput

Fix issue with input box size not saving size (Issue #869) and add additional features using Github's comment box as a target spec.

Complete

• min-height 100px / max-height 500px
• Autosize to fit content
• Disables autosize after user resize event
• Saves all state when switching back and forth to preview mode
  • size
  • scroll location
  • focus and selected text
  • preserve undo old text (ctrl+z)

see pr: #1011

TODO

New Markdown buttons that insert/delete markdown styles around selected text
(with hotkeys that only work while textbox is focused)

• Header ### <text>

• bold (hotkey: ctrl+b) **<text>**

• italic (hotkey: ctrl+i) _<text>_

• quote (hotkey: ctrl+b) \n\n> <text>\n\n

• code (hotkey: ctrl+e) **<text>**

• link (hotkey: ctrl+k) [<text>](url) *Updates selected text to url

• bullet list - <text>

• ordered list 1. <text>

• task list \n\n- [ ] <text>\n\n
  *Opted to not include task list since comments are currently not editable

• Auto continue lists on return

• Make responsive - Inline with write/preview tabs on large screen below tabs on small screens

Other extras

• prop to enable local store persist

[ggwadera]

Great to have someone working on this issue. The reviewing experience could a lot more pleasant by having a little more smarter editor.

New Markdown buttons that insert/delete markdown styles around selected text
(with hotkeys that only work while textbox is focused)

For this one, besides hotkeys I think that adding surrounding parenthesis, brackets, quotes, etc, when you have some text select could also be a good feature. Similar to what VS Code or any other code editor does.

And for a bit more difficult task, do you think that it's possible to have live syntax highlighting like Discord has when you're editing a code block for a message? I think that's an awesome feature that they have, very cool haha.

[tomrule007]

Ya I orginally had the bracket closing feature on my list! I removed it because I thought it might be a bit tricky as the buttons will just call the on change handler with my new changes but for the closing brackets I might want to listen to the key down event, I'll figure it out.

Live code editing would be very tricky, I'll let someone else tackle that!

As I'm typing this out on my phone I realize github has the textbox locked on my mobile phone which is really nice because it isn't growing under my keyboard.