Spectrum: Code block in chat input fixes

[brianlovin]

Hey @mxstbr here are some bugs with the new code block stuff: https://www.dropbox.com/s/h9omj4q6bteoypi/code-blocks-chat-input.mov?dl=0

In order of appearance:

• [x] It was nice when code blocks would automatically activate with triple backticks at the start of a message. It's unobvious that you have to hit 'enter' to start the code block, and probably nobody will ever do it because 'enter' is what they expect to send the message
• If the message starts with a code block it's not obvious how to exit it (it takes an extra backspace). But if I cmd + A to select all and hit backspace, I would expect it to also clear the code block (moved: https://github.com/withspectrum/draft-js-markdown-plugin/issues/58)
• [x] The cursor jumping problem still exists - I ran yarn to get the latest packages, so this is current
• [ ] If you start a code block on the same line as other text it sends when you press enter, instead of activating the code block - in this case we have mixed the behavior of how to enter a code block vs send a message
• If I completely wrap text in triple backticks it does not convert to a code block on send or automatically
• If I completely wrap text in triple backticks and then press space, it only recognizes an inline code snippet within 2 backticks

[brianlovin]

Slack's handling: https://www.dropbox.com/s/za7yingv5c50jwn/code-block-slack-input.mov?dl=0 - they don't autostyle as you type, but ours could be slightly better by converting as you type; their handling is just much cleaner where you can mix text + block as you go and don't have to think about it

[mxstbr]

These are all good points, will tackle!

[brianlovin]

Thank yoU!

[mxstbr]

Now that I think about it:

It was nice when code blocks would automatically activate with triple backticks at the start of a message.

It would be kinda nice if code blocks would automatically activate with tripe backticks, no matter if you're at the start of a message or not, right? No more having to hit enter to start a code block.

[brianlovin]

Yep! It should always auto activate. Hitting enter to "activate" it feels pretty unintuitive since enter is also the send message key

[mxstbr]

If the message starts with a code block it's not obvious how to exit it (it takes an extra backspace). But if I cmd + A to select all and hit backspace, I would expect it to also clear the code block

This is the case for all block types at the moment, including headings and lists etc.

The cursor jumping problem still exists - I ran yarn to get the latest packages, so this is current

True that! /cc @juliankrispel

If I completely wrap text in triple backticks it does not convert to a code block on send or automatically
If I completely wrap text in triple backticks and then press space, it only recognizes an inline code snippet within 2 backticks

If we change the behavior for 1, both of these would be solved since it'd be obvious that you can copy+paste!

[mxstbr]

PR is up that makes ``` work with space too! withspectrum/draft-js-markdown-plugin#55

[mxstbr]

Implemented in the app here: #2863 Onwards to tackling the remaining points!

[brianlovin]

PR is up that makes ``` work with space too!

FWIW this creates an inline code element: https://www.dropbox.com/s/fvobvp8kd0t38ej/inline-code-block.mov?dl=0

[mxstbr]

yeah because it only works on a new line. Not sure how it'd make sense to just randomly create a code block in the middle of a sentence?

[juliankrispel]

Makes sense to me! ❤️
On Fri, Apr 27, 2018 at 5:48 PM Max Stoiber [e-mail]
wrote:

yeah because it only works on a new line. Not sure how it'd make sense to
just randomly create a code block in the middle of a sentence?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/withspectrum/spectrum/issues/2854#issuecomment-385028442,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABIhWjWjublQjakVZaeHNim9bBxKtQrUks5ts0vlgaJpZM4TTe7s
.

[brianlovin]

Not sure how it'd make sense to just randomly create a code block in the middle of a sentence?

If someone types a triple backtick they might have reasonable expectations of creating a block right? Especially since it's in the little markdown instructions underneath the chat input that it will work.

I know slack doesn't do format on type, but this end result makes a lot of sense: https://www.dropbox.com/s/0o6zcqc3vwa43mf/block-in-message.mov?dl=0

[mxstbr]

We actually can't do that exact thing since we use the text after the triple backticks to denote which language to highlight in:

 ```javascript|

Pressing "Space" or "Enter" there will result in a code block that's highlighted as JavaScript, not in a code block that has the text javascript. Open to changing that now that we have the language switcher though.

[juliankrispel]

Huh
On Fri, Apr 27, 2018 at 6:07 PM Max Stoiber [e-mail]
wrote:

We actually can't do that exact thing since we use the text after the
triple backticks to denote which language to highlight in:

```javascript|

Pressing "Space" or "Enter" there will result in a code block that's
highlighted as JavaScript, not in a code block that has the text
javascript. Open to changing that now that we have the language switcher
though.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/withspectrum/spectrum/issues/2854#issuecomment-385033704,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABIhWnjC_ViuUQ_vjc45Jw0_fsju7Tjdks5ts1A2gaJpZM4TTe7s
.

[brianlovin]

Pressing "Space" or "Enter" there will result in a code block that's highlighted as JavaScript, not in a code block that has the text javascript.

I see - I guess I would say this is lower pri then since at least inline code renders, but might be slightly different from the person's expectations. But since we format on typing it might be a nightmare to handle someone trying to type an inline block, plus the problems you've mentioned here with language detection.