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	Jan 16, 2025 9:36pm
hds-website	✅ Ready (Inspect)	Visit Preview	Jan 16, 2025 9:36pm

[shleewhite]

Looks great!!!

[majedelass]

There are three minor things I caught. Let me know when you address them so I can approve the PR 👍

[alex-ju]

I tested the functionality again. One thing I noticed is that in full-screen mode the border-radius is preserved (not sure if it was intentional or not). Otherwise all looks good! Happy to get it in, and if anything comes up in testing we can address separately.

[majedelass]

Active still isn't showing up properly. I believe this needs to be moved below the hover pseudo class so it will show up properly on mouse click.

[zamoore]

Adressing in a followup

[majedelass]

I'm approving because there is one last minor thing with the active state (in CSS) and I don't want to block entirely. I'd move the active state below the hover state in CSS so it will show up properly on mouse click.