CodeBlock refactor

[dylans]

I'm working on making the CodeBlock plugin have more of the features and behavior that I would expect.

Here are some rough notes on what I'm thinking:

• Represent each line in a block rather than a single string for each code-block (should make it easier to do line numbers and also handle indent/outdent when selecting multiple lines)
• Choose programming language for syntax highlighting
  • Options to consider: Toolbar dropdown, parse when typing e.g. ```js+enter, or have a comment on the first line to enable syntax highlighting, e.g. // javascript
• Keyboard handling:
  • Enter, new line with indentation matching the current placement
  • Tab, indent if selection is collapsed or indent all lines if it's a multi-line selection (should tabs be represented as \t or some attribute on the code-block-line representing how much to indent?
  • Shift+tab, remove indentation before the cursor if indented (single line or selection)
  • Mod+enter, exit the code block
  • Mod+A, select all text in the code block
  • Autoformat rules like * and - at the start of the line should not create traditional rich lists
  • Outside the code block, ``` to start a code-block
• Content pasted containing should get converted into a code block and ending with a terminating?
• If a code block is selected and the user clicks on the toolbar, provide an option to warn before converting to normal text to prevent accidental code formatting loss
• Add a withCodeBlock or similar mechanism to make it easier to use and extend

I've started a branch, it's not very far along. I'm happy to collaborate if anyone else is interested in something similar.

[zbeyens]

Good initiative, here are my comments:

• Enter, OK. Create a helper getting the indentation (number of spaces / 2) of the previous line.
• Tab, I would use spaces and not \t, which is the best practice in common IDE:
  • Insert 2 spaces at the start of the line text.
• Shift+tab: check if there is spaces at the start of each selected line:
  • if 1 space: remove 1 space.
  • if >= 2 spaces: remove 2 spaces.
• Mod+enter: OK, ExitBreak plugin.
• Mod+A: OK.
• Autoformat: OK.
• withCodeBlock: override insertBreak for Enter
• onKeyDown for Tab, Shift+tab.

[dylans]

As a quick update on progress:

codeblock-refactor branch

• code-line implmented as a child for each line in a code-block
• triple backtick autoformat
• toolbar inserts a code-block rather than toggling
• Default inserts two spaces, number of spaces for indent is configurable (I haven't touched making tab an option)
• mod+enter exits the code-block
• mod+A selects all content in the code-block
• withCodeBlock implemented with insertBreak for enter
• onKeyDown for indent/outdent
• a few FIXMEs where my work feels far from perfect
• have not tested or probably properly handled serialization/deserialization
• have not handled the use case for selecting a language of choice via autoformat or other mechanisms
• have not made any effort to customize indentation (e.g. only spaces, not tabs) and have not made any attempt to normalize indentation across lines (e.g. indentation is left as is-is across multi-line selections).

[dylans]

Other than a mechanism to select the language for syntax highlighting, a more thorough review of serialization/deserialization, and an option to support tabs instead of spaces, this work has landed in 0.74.0 and newer releases.

[leighst]

Nice work @dylans - are you still planning on adding syntax highlighting etc?

[dylans]

I would still love to, just hasn't been as much of a priority as other things on my list. There are two things that need to be determined:

1. The existing Prism implementation was breaking in weird ways and losing formatting (I had a few pointers but hadn't pursed it yet)
2. Best ways to specify it, e.g. do you support something like ```js to turn it into JS (and then how do you make that editable), or perhaps a comment on the first line of any code-block

I will get to it eventually, though if someone else wants to collaborate and then I'd probably get to it sooner!