[6.x] UI Code Editor

[duncanmcclean]

This pull request extracts our CodeMirror implementation out of the Code Fieldtype, into a dedicated <CodeEditor> UI component, allowing it to be re-used by third-party developers.

I considered re-implementing the code editor using Monaco (the editor powering VS Code), but decided against it due to the functionality we'd have to remove/re-map, and the additional dependencies we'd need to add the Antlers Textmate grammar.

Usage

<CodeEditor mode="php" v-model:model-value="codeSnippet" />

[jasonvarga]

I think the toolbar, fullscreen mode, mode selector, etc should probably all be part of the component.

If someone has a need to use the code editor on its own, they'll probably want to use those.

The toolbar being outside in the fieldtype is a bit awkward. There's no buttons except for the mode selector. If we wanted to add buttons later, it would make sense to be in the editor itself, then we'd have a weird situation where some buttons are in the editor and some outside. Let's just make it part of the editor itself.

We can probably expose v-model for the code itself, and v-model:mode for the mode.

<CodeEditor
  :allow-mode-selection="config.mode_selectable"
  :value="value.code"
  :mode="value.mode"
  @update:value="codeUpdated"
  @update:mode="modeUpdated"
/>

Happy for this to be pushed back on though.

[duncanmcclean]

Yeah, makes sense!