Code Editor - Support custom keybinding (#2776)

Author: zamoore

.changeset/four-avocados-smoke.md

@@ -0,0 +1,7 @@
+---
+"@hashicorp/design-system-components": minor
+---
+
+`hds-code-editor` modifier - Add `extraKeys` argument which supports custom keybinding
+
+`CodeEditor` - Add `@extraKeys` argument which supports custom keybinding

packages/components/src/components/hds/code-editor/index.hbs

@@ -55,6 +55,7 @@
       ariaDescribedBy=this.ariaDescribedBy
       ariaLabel=@ariaLabel
       ariaLabelledBy=this.ariaLabelledBy
+      extraKeys=@extraKeys
       hasLineWrapping=@hasLineWrapping
       language=@language
       value=@value

packages/components/src/modifiers/hds-code-editor.ts

@@ -24,6 +24,7 @@ import type {
 import type { Extension } from '@codemirror/state';
 import type {
   EditorView as EditorViewType,
+  KeyBinding,
   ViewUpdate,
 } from '@codemirror/view';
 import type Owner from '@ember/owner';
@@ -33,13 +34,18 @@ type HdsCodeEditorBlurHandler = (
   event: FocusEvent
 ) => void;
 
+interface HdsCodeEditorExtraKeys {
+  [key: string]: () => void;
+}
+
 export interface HdsCodeEditorSignature {
   Args: {
     Named: {
       ariaDescribedBy?: string;
       ariaLabel?: string;
       ariaLabelledBy?: string;
       cspNonce?: string;
+      extraKeys?: HdsCodeEditorExtraKeys;
       hasLineWrapping?: boolean;
       language?: HdsCodeEditorLanguages;
       value?: string;
@@ -298,7 +304,7 @@ export default class HdsCodeEditorModifier extends Modifier<HdsCodeEditorSignatu
 
   private _buildExtensionsTask = task(
     { drop: true },
-    async ({ cspNonce, language, hasLineWrapping }) => {
+    async ({ cspNonce, extraKeys, language, hasLineWrapping }) => {
       const [
         {
           keymap,
@@ -355,6 +361,15 @@ export default class HdsCodeEditorModifier extends Modifier<HdsCodeEditorSignatu
         syntaxHighlighting(hdsDarkHighlightStyle),
       ];
 
+      if (extraKeys !== undefined) {
+        const customKeyMap = Object.entries(extraKeys).map(([key, value]) => ({
+          key: key,
+          run: value,
+        }));
+
+        extensions = [keymap.of(customKeyMap as KeyBinding[]), ...extensions];
+      }
+
       if (languageExtension !== undefined) {
         extensions = [languageExtension, ...extensions];
       }
@@ -377,18 +392,20 @@ export default class HdsCodeEditorModifier extends Modifier<HdsCodeEditorSignatu
       {
         cspNonce,
         language,
+        extraKeys,
         value,
         hasLineWrapping,
       }: Pick<
         HdsCodeEditorSignature['Args']['Named'],
-        'cspNonce' | 'language' | 'value' | 'hasLineWrapping'
+        'cspNonce' | 'language' | 'extraKeys' | 'value' | 'hasLineWrapping'
       >
     ) => {
       try {
         const { EditorState } = await import('@codemirror/state');
 
         const extensions = await this._buildExtensionsTask.perform({
           cspNonce,
+          extraKeys,
           language,
           hasLineWrapping: hasLineWrapping ?? false,
         });
@@ -427,6 +444,7 @@ export default class HdsCodeEditorModifier extends Modifier<HdsCodeEditorSignatu
         ariaLabel,
         ariaLabelledBy,
         cspNonce,
+        extraKeys,
         hasLineWrapping,
         language,
         value,
@@ -439,6 +457,7 @@ export default class HdsCodeEditorModifier extends Modifier<HdsCodeEditorSignatu
 
       const editor = await this._createEditorTask.perform(element, {
         cspNonce,
+        extraKeys,
         language,
         value,
         hasLineWrapping,

showcase/tests/integration/modifiers/hds-code-editor-test.js

@@ -139,6 +139,30 @@ module('Integration | Modifier | hds-code-editor', function (hooks) {
     assert.ok(document.querySelector('style[nonce="test-nonce"]'));
   });
 
+  // extraKeys
+  test('setting extraKeys should add the provided keybindings to the editor', async function (assert) {
+    const saveSpy = sinon.spy(() => console.log('Save!'));
+
+    this.set('extraKeys', {
+      'Shift-Enter': saveSpy,
+    });
+
+    await setupCodeEditor(
+      hbs`<div id="code-editor-wrapper" {{hds-code-editor ariaLabel="test" extraKeys=this.extraKeys}} />`
+    );
+
+    const event = new KeyboardEvent('keydown', {
+      key: 'Enter',
+      code: 'Enter',
+      shiftKey: true,
+      bubbles: true,
+    });
+
+    document.querySelector('.cm-content').dispatchEvent(event);
+
+    assert.ok(saveSpy.calledOnce);
+  });
+
   // ASSERTIONS
 
   test('it should throw an assertion if both ariaLabel and ariaLabelledBy are ommitted', async function (assert) {