-
Notifications
You must be signed in to change notification settings - Fork 47
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
HDS::CodeEditor with Code Mirror 6 (#2573)
Co-authored-by: Alex <[email protected]> Co-authored-by: Kristin Bradley <[email protected]>
- Loading branch information
3 people
authored
Jan 17, 2025
1 parent
62935d5
commit 2787f32
Showing
37 changed files
with
2,191 additions
and
53 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| --- | ||
| "@hashicorp/design-system-components": minor | ||
| --- | ||
|
|
||
| `Hds::CodeEditor` - Added new CodeMirror 6 supported code editor component | ||
| `hds-code-editor` modifier - Added new code editor modifier which converts the element it is applied to into a CodeMirror 6 code editor |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
3 changes: 3 additions & 0 deletions
3
packages/components/src/components/hds/code-editor/description.hbs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| <Hds::Text::Body class="hds-code-editor__description" @tag="p" @size="100" ...attributes> | ||
| {{yield}} | ||
| </Hds::Text::Body> |
20 changes: 20 additions & 0 deletions
20
packages/components/src/components/hds/code-editor/description.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| /** | ||
| * Copyright (c) HashiCorp, Inc. | ||
| * SPDX-License-Identifier: MPL-2.0 | ||
| */ | ||
|
|
||
| import TemplateOnlyComponent from '@ember/component/template-only'; | ||
|
|
||
| import type { HdsTextBodySignature } from '../text/body'; | ||
|
|
||
| export interface HdsCodeEditorDescriptionSignature { | ||
| Blocks: { | ||
| default: []; | ||
| }; | ||
| Element: HdsTextBodySignature['Element']; | ||
| } | ||
|
|
||
| const HdsCodeEditorDescription = | ||
| TemplateOnlyComponent<HdsCodeEditorDescriptionSignature>(); | ||
|
|
||
| export default HdsCodeEditorDescription; |
11 changes: 11 additions & 0 deletions
11
packages/components/src/components/hds/code-editor/full-screen-button.hbs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| <Hds::Button | ||
| class={{this.className}} | ||
| aria-pressed={{@isFullScreen}} | ||
| @isIconOnly={{true}} | ||
| @color="secondary" | ||
| @size="small" | ||
| @icon={{this.state}} | ||
| @text="Toggle full screen view" | ||
| {{on "click" @onToggleFullScreen}} | ||
| ...attributes | ||
| /> |
35 changes: 35 additions & 0 deletions
35
packages/components/src/components/hds/code-editor/full-screen-button.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| /** | ||
| * Copyright (c) HashiCorp, Inc. | ||
| * SPDX-License-Identifier: MPL-2.0 | ||
| */ | ||
|
|
||
| import Component from '@glimmer/component'; | ||
|
|
||
| import type { HdsButtonSignature } from '../button'; | ||
|
|
||
| export interface HdsCodeEditorFullScreenButtonSignature { | ||
| Args: { | ||
| isFullScreen: boolean; | ||
| onToggleFullScreen: () => void; | ||
| }; | ||
| Element: HdsButtonSignature['Element']; | ||
| } | ||
|
|
||
| export default class HdsCodeEditorFullScreenButton extends Component<HdsCodeEditorFullScreenButtonSignature> { | ||
| get state(): 'minimize' | 'maximize' { | ||
| return this.args.isFullScreen ? 'minimize' : 'maximize'; | ||
| } | ||
|
|
||
| get className(): string { | ||
| const classes = [ | ||
| 'hds-code-editor__full-screen-button', | ||
| 'hds-code-editor__button', | ||
| ]; | ||
|
|
||
| const stateClass = `hds-code-editor__full-screen-button--${this.state}`; | ||
|
|
||
| classes.push(stateClass); | ||
|
|
||
| return classes.join(' '); | ||
| } | ||
| } |
7 changes: 7 additions & 0 deletions
7
packages/components/src/components/hds/code-editor/generic.hbs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| {{! | ||
| Copyright (c) HashiCorp, Inc. | ||
| SPDX-License-Identifier: MPL-2.0 | ||
| }} | ||
| <div class="hds-code-editor__header-generic" ...attributes> | ||
| {{yield}} | ||
| </div> |
18 changes: 18 additions & 0 deletions
18
packages/components/src/components/hds/code-editor/generic.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| /** | ||
| * Copyright (c) HashiCorp, Inc. | ||
| * SPDX-License-Identifier: MPL-2.0 | ||
| */ | ||
|
|
||
| import TemplateOnlyComponent from '@ember/component/template-only'; | ||
|
|
||
| export interface HdsCodeEditorGenericSignature { | ||
| Blocks: { | ||
| default: []; | ||
| }; | ||
| Element: HTMLDivElement; | ||
| } | ||
|
|
||
| const HdsCodeEditorGeneric = | ||
| TemplateOnlyComponent<HdsCodeEditorGenericSignature>(); | ||
|
|
||
| export default HdsCodeEditorGeneric; |
70 changes: 70 additions & 0 deletions
70
packages/components/src/components/hds/code-editor/index.hbs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| {{! | ||
| Copyright (c) HashiCorp, Inc. | ||
| SPDX-License-Identifier: MPL-2.0 | ||
| }} | ||
|
|
||
| <div | ||
| id={{this._id}} | ||
| class={{this.classNames}} | ||
| {{! @glint-expect-error - https://github.com/josemarluedke/ember-focus-trap/issues/86 }} | ||
| {{focus-trap isActive=this._isFullScreen}} | ||
| {{this._handleEscape}} | ||
| ...attributes | ||
| > | ||
| {{! header }} | ||
| {{#if (or this.hasActions (has-block))}} | ||
| <div class="hds-code-editor__header"> | ||
| <div class="hds-code-editor__header-content"> | ||
| {{yield | ||
| (hash | ||
| Title=(component "hds/code-editor/title" editorId=this._id onInsert=this.registerTitleElement) | ||
| Description=(component "hds/code-editor/description") | ||
| Generic=(component "hds/code-editor/generic") | ||
| ) | ||
| }} | ||
| </div> | ||
|
|
||
| {{#if this.hasActions}} | ||
| <div class="hds-code-editor__header-actions"> | ||
| {{#if @hasCopyButton}} | ||
| <Hds::Copy::Button | ||
| class="hds-code-editor__button hds-code-editor__copy-button" | ||
| @isIconOnly={{true}} | ||
| @size="small" | ||
| @text="Copy" | ||
| @textToCopy={{this._value}} | ||
| /> | ||
| {{/if}} | ||
| {{#if @hasFullScreenButton}} | ||
| <Hds::CodeEditor::FullScreenButton | ||
| @isFullScreen={{this._isFullScreen}} | ||
| @onToggleFullScreen={{this.toggleFullScreen}} | ||
| /> | ||
| {{/if}} | ||
| </div> | ||
| {{/if}} | ||
| </div> | ||
| {{/if}} | ||
|
|
||
| {{! editor }} | ||
| <div | ||
| class="hds-code-editor__editor" | ||
| {{hds-code-editor | ||
| ariaLabel=@ariaLabel | ||
| ariaLabelledBy=this.ariaLabelledBy | ||
| value=@value | ||
| language=@language | ||
| onBlur=@onBlur | ||
| onInput=this.onInput | ||
| onSetup=this.onSetup | ||
| }} | ||
| /> | ||
|
|
||
| {{! loader }} | ||
| {{#unless this._isSetupComplete}} | ||
| <div class="hds-code-editor__loader" aria-live="polite" role="status"> | ||
| <Hds::Icon @name="loading" @size="24" /> | ||
| <span class="sr-only">Loading</span> | ||
| </div> | ||
| {{/unless}} | ||
| </div> |
136 changes: 136 additions & 0 deletions
136
packages/components/src/components/hds/code-editor/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,136 @@ | ||
| /** | ||
| * Copyright (c) HashiCorp, Inc. | ||
| * SPDX-License-Identifier: MPL-2.0 | ||
| */ | ||
|
|
||
| import Component from '@glimmer/component'; | ||
| import { tracked } from '@glimmer/tracking'; | ||
| import { action } from '@ember/object'; | ||
| import { modifier } from 'ember-modifier'; | ||
|
|
||
| import type { ComponentLike } from '@glint/template'; | ||
| import type { HdsCodeEditorSignature as HdsCodeEditorModifierSignature } from 'src/modifiers/hds-code-editor'; | ||
| import type { HdsCodeEditorDescriptionSignature } from './description'; | ||
| import type { HdsCodeEditorTitleSignature } from './title'; | ||
| import type { HdsCodeEditorGenericSignature } from './generic'; | ||
| import type { EditorView } from '@codemirror/view'; | ||
| import { guidFor } from '@ember/object/internals'; | ||
|
|
||
| export interface HdsCodeEditorSignature { | ||
| Args: { | ||
| ariaLabel?: string; | ||
| ariaLabelledBy?: string; | ||
| hasCopyButton?: boolean; | ||
| hasFullScreenButton?: boolean; | ||
| isStandalone?: boolean; | ||
| language?: HdsCodeEditorModifierSignature['Args']['Named']['language']; | ||
| value?: HdsCodeEditorModifierSignature['Args']['Named']['value']; | ||
| onBlur?: HdsCodeEditorModifierSignature['Args']['Named']['onBlur']; | ||
| onInput?: HdsCodeEditorModifierSignature['Args']['Named']['onInput']; | ||
| onSetup?: HdsCodeEditorModifierSignature['Args']['Named']['onSetup']; | ||
| }; | ||
| Blocks: { | ||
| default: [ | ||
| { | ||
| Title?: ComponentLike<HdsCodeEditorTitleSignature>; | ||
| Description?: ComponentLike<HdsCodeEditorDescriptionSignature>; | ||
| Generic?: ComponentLike<HdsCodeEditorGenericSignature>; | ||
| }, | ||
| ]; | ||
| }; | ||
| Element: HTMLDivElement; | ||
| } | ||
|
|
||
| export default class HdsCodeEditor extends Component<HdsCodeEditorSignature> { | ||
| @tracked private _isFullScreen = false; | ||
| @tracked private _isSetupComplete = false; | ||
| @tracked private _value; | ||
| @tracked private _titleId: string | undefined; | ||
|
|
||
| private _id = guidFor(this); | ||
|
|
||
| private _handleEscape = modifier(() => { | ||
| const handleKeyDown = (event: KeyboardEvent) => { | ||
| if (event.key !== 'Escape' || !this._isFullScreen) { | ||
| return; | ||
| } | ||
|
|
||
| this.toggleFullScreen(); | ||
| }; | ||
|
|
||
| document.addEventListener('keydown', handleKeyDown); | ||
|
|
||
| return () => { | ||
| document.removeEventListener('keydown', handleKeyDown); | ||
| }; | ||
| }); | ||
|
|
||
| constructor(owner: unknown, args: HdsCodeEditorSignature['Args']) { | ||
| super(owner, args); | ||
|
|
||
| if (args.value) { | ||
| this._value = args.value; | ||
| } | ||
| } | ||
|
|
||
| get ariaLabelledBy(): string | undefined { | ||
| if (this.args.ariaLabel !== undefined) { | ||
| return; | ||
| } | ||
|
|
||
| return this.args.ariaLabelledBy ?? this._titleId; | ||
| } | ||
|
|
||
| get hasActions(): boolean { | ||
| return (this.args.hasCopyButton || this.args.hasFullScreenButton) ?? false; | ||
| } | ||
|
|
||
| get isStandalone(): boolean { | ||
| return this.args.isStandalone ?? true; | ||
| } | ||
|
|
||
| get classNames(): string { | ||
| // Currently there is only one theme so the class name is hard-coded. | ||
| // In the future, additional themes such as a "light" theme could be added. | ||
| const classes = ['hds-code-editor', 'hds-code-editor--theme-dark']; | ||
|
|
||
| if (this._isFullScreen) { | ||
| classes.push('hds-code-editor--is-full-screen'); | ||
| } | ||
|
|
||
| if (this.isStandalone) { | ||
| classes.push('hds-code-editor--is-standalone'); | ||
| } | ||
|
|
||
| return classes.join(' '); | ||
| } | ||
|
|
||
| @action | ||
| registerTitleElement(element: HdsCodeEditorTitleSignature['Element']): void { | ||
| this._titleId = element.id; | ||
| } | ||
|
|
||
| @action | ||
| toggleFullScreen(): void { | ||
| this._isFullScreen = !this._isFullScreen; | ||
| } | ||
|
|
||
| @action | ||
| onInput(newValue: string): void { | ||
| this._value = newValue; | ||
| this.args.onInput?.(newValue); | ||
| } | ||
|
|
||
| @action | ||
| onKeyDown(event: KeyboardEvent): void { | ||
| if (event.key === 'Escape' && this._isFullScreen) { | ||
| this.toggleFullScreen(); | ||
| } | ||
| } | ||
|
|
||
| @action | ||
| onSetup(editorView: EditorView): void { | ||
| this._isSetupComplete = true; | ||
| this.args.onSetup?.(editorView); | ||
| } | ||
| } |
Oops, something went wrong.