HDS::CodeEditor with Code Mirror 6

[zamoore]

📌 Summary

This PR adds a code editor utilizing Code Mirror 6 to the HDS component library. The code editor can be instantiated via:

• The hds-code-editor modifier, which can be added to any element to transform that element into a code editor instance
• The Hds::CodeEditor component, which uses the hds-code-editor modifier under the hood, but adds support for title, description, and various tools.

Details

hds-code-editor modifier

This modifier will instantiate a Code Mirror editor on the element that it's added to. In order to reduce the up-front cost of loading the editor, we only load the CodeMirror package when the editor is scrolled into view. Because of this, there may be an exceptionally brief loading state before the editor is ready when it is viewed by the user.

// Example
<div {{hds-code-editor
  value=@value
  language=@language
  onInput=@onInput
  onSetup=this.onSetup
}} />

value: The initial value of the editor
language: optional, one of 4 possible supported languages (json, sql, go, hcl)
onInput: callback function when the code editor changes
onSetup: callback function when the modifier has completed loading dependencies and instantiating the editor, receives CodeMirror Editor instance.

This editor features support for:

• Custom title
• Custom description
• Copy editor content
• Fullscreen toggle
• Keyboard support including directional navigation
• History (support for cmd+z and other history commands)

Hds::CodeEditor component

This component uses the hds-code-editor modifier in combination with a customizable header and support for a fullscreen mode.

// Example
<Hds::CodeEditor
  @language="go"
  @value="test"
  @hasExpandButton={{true}}
  @hasCopyButton={{true}}
  @onInput={{this.noop}}
  @onSetup={{this.noop}}
  as |CE|
>
  <CE.Title>Code editor with title</CE.Title>
  <CE.Description>This is a code editor with a description</CE.Description>
  <Hds::Button @text="Custom button" />
  <Hds::Icon @name="code" @color="#fff" />
</Hds::CodeEditor>

value: The initial value of the editor
hasExpandButton: Whether the editor can be expanded into fullscreen mode
hasCopyButton: Whether the editor has a button that adds the current value to the clipboard
language: optional, one of 4 possible supported languages (json, sql, go, hcl)
onInput: callback function when the code editor changes
onSetup: callback function when the component has completed loading dependencies and instantiating the editor, receives CodeMirror Editor instance.

📸 Screenshots

🔗 External links

Jira ticket: HDS-4016
Figma

---

👀 Component checklist

• Percy was checked for any visual regression
• A changelog entry was added via Changesets if needed (see templates here)

💬 Please consider using conventional comments when reviewing this PR.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
hds-showcase	✅ Ready (Inspect)	Visit Preview	Dec 24, 2024 6:54pm
hds-website	✅ Ready (Inspect)	Visit Preview	Dec 24, 2024 6:54pm

[alex-ju]

Thank you for opening this PR for early feedback! The functionalities look very promising.

The main comment at this stage (when the design is finalized I can do an in-depth review of the component API) is to look into how can we leverage dynamic imports (leveraging ember-auto-import) to defer loading the third-party code until consumers start using the component on the page

[didoo]

Left a couple of high-level comments, about something that stood out for me (I hope you won't mind).