feat: Syntax Highlighting for Multiline Editor

[camielvs]

Description

Adds the option for syntax highlighting to the multiline texteditor via the new highlightSyntax prop.

When true it will render a select box for the user to choose a syntax language for highlighting purposes.

If the user selects plaintext the current vanilla TextArea component will render. If the user selects one of the provided code languages the Monaco Editor will render inside the dialog with syntax highlighting appropriate for that language.

This feature is currently implemented in all instances of the MultilineTextInputDialog though it is debateable if it has use for the Annotation Editor.

Related Issue and Pull requests

Progresses #1891
Progresses https://github.com/Shopify/oasis-frontend/issues/391

Type of Change

• Improvement

Checklist

• I have tested this does not break current pipelines / runs functionality
• I have tested the changes on staging

Screenshots (if applicable)

Before

After

Demo:

syntax-highlighting-opt1.mov (uploaded via Graphite)

Test Instructions

Confirm that the multiline text editor now renders a select box and that changing the language renders the code viewer and appropriately highlights syntax.

Additional Comments

[github-actions]

🎩 To tophat this PR:

You can add the following URL parameter to your browser to tophat this PR:

`?tophat_location=03-09-feat_syntax_highlighting_for_multiline_editor/a9aafc1`

---

[camielvs]

• feat: Autodetect Syntax Language #1922
• feat: Syntax Highlighting for Multiline Editor #1919 👈 (View in Graphite)
• master

This stack of pull requests is managed by Graphite. Learn more about stacking.