working on initial linting plugin

Author: zamoore

packages/components/package.json

@@ -39,6 +39,7 @@
     "@codemirror/lang-yaml": "^6.1.2",
     "@codemirror/language": "^6.10.3",
     "@codemirror/legacy-modes": "^6.4.2",
+    "@codemirror/lint": "^6.8.4",
     "@codemirror/state": "^6.5.0",
     "@codemirror/view": "^6.36.2",
     "@ember/render-modifiers": "^2.1.0",

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

@@ -56,6 +56,7 @@
       ariaLabel=@ariaLabel
       ariaLabelledBy=this.ariaLabelledBy
       hasLineWrapping=@hasLineWrapping
+      isLintingEnabled=@isLintingEnabled
       language=@language
       value=@value
       onBlur=@onBlur

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

@@ -21,6 +21,7 @@ import type {
   StreamLanguage as StreamLanguageType,
   StreamParser as StreamParserType,
 } from '@codemirror/language';
+import type { Diagnostic } from '@codemirror/lint';
 import type { Extension } from '@codemirror/state';
 import type {
   EditorView as EditorViewType,
@@ -40,6 +41,7 @@ export interface HdsCodeEditorSignature {
       ariaLabel?: string;
       ariaLabelledBy?: string;
       hasLineWrapping?: boolean;
+      isLintingEnabled?: boolean;
       language?: HdsCodeEditorLanguages;
       value?: string;
       onInput?: (newVal: string) => void;
@@ -273,7 +275,7 @@ export default class HdsCodeEditorModifier extends Modifier<HdsCodeEditorSignatu
 
   private _buildExtensionsTask = task(
     { drop: true },
-    async ({ language, hasLineWrapping }) => {
+    async ({ language, hasLineWrapping, isLintingEnabled }) => {
       const [
         {
           keymap,
@@ -314,6 +316,35 @@ export default class HdsCodeEditorModifier extends Modifier<HdsCodeEditorSignatu
         hasLineWrapping ? EditorView.lineWrapping : []
       );
 
+      let lintingExtensions: Extension[] = [];
+
+      if (isLintingEnabled && language === 'json') {
+        const [{ linter, lintGutter }, { syntaxTree }] = await Promise.all([
+          import('@codemirror/lint'),
+          import('@codemirror/language'),
+        ]);
+
+        lintingExtensions = [
+          linter((view): Diagnostic[] => {
+            const diagnostics: Diagnostic[] = [];
+            try {
+              JSON.parse(view.state.doc.toString());
+            } catch (error: any) {
+              const message = error.message;
+              const pos = error.position || 0;
+              diagnostics.push({
+                from: pos,
+                to: pos + 1,
+                severity: 'error',
+                message,
+              });
+            }
+            return diagnostics;
+          }),
+          lintGutter(),
+        ];
+      }
+
       let extensions = [
         lineWrappingExtension,
         bracketMatching(),
@@ -334,6 +365,10 @@ export default class HdsCodeEditorModifier extends Modifier<HdsCodeEditorSignatu
         extensions = [languageExtension, ...extensions];
       }
 
+      if (lintingExtensions.length !== 0) {
+        extensions = [...extensions, ...lintingExtensions];
+      }
+
       return extensions;
     }
   );
@@ -343,18 +378,20 @@ export default class HdsCodeEditorModifier extends Modifier<HdsCodeEditorSignatu
     async (
       element: HTMLElement,
       {
+        isLintingEnabled,
         language,
         value,
         hasLineWrapping,
       }: Pick<
         HdsCodeEditorSignature['Args']['Named'],
-        'language' | 'value' | 'hasLineWrapping'
+        'language' | 'value' | 'hasLineWrapping' | 'isLintingEnabled'
       >
     ) => {
       try {
         const { EditorState } = await import('@codemirror/state');
 
         const extensions = await this._buildExtensionsTask.perform({
+          isLintingEnabled,
           language,
           hasLineWrapping: hasLineWrapping ?? false,
         });
@@ -393,6 +430,7 @@ export default class HdsCodeEditorModifier extends Modifier<HdsCodeEditorSignatu
         ariaLabel,
         ariaLabelledBy,
         hasLineWrapping,
+        isLintingEnabled,
         language,
         value,
       } = named;
@@ -403,6 +441,7 @@ export default class HdsCodeEditorModifier extends Modifier<HdsCodeEditorSignatu
       this.element = element;
 
       const editor = await this._createEditorTask.perform(element, {
+        isLintingEnabled,
         language,
         value,
         hasLineWrapping,
@@ -424,6 +463,10 @@ export default class HdsCodeEditorModifier extends Modifier<HdsCodeEditorSignatu
         ariaLabelledBy,
       });
 
+      this.editor.dispatch({
+        changes: { from: 0, to: 0, insert: ' ' },
+      });
+
       onSetup?.(this.editor);
     }
   );

pnpm-lock.yaml

@@ -96,6 +96,7 @@ sayMessage();
     {
       value: 'json',
       label: 'JSON',
+      isLintingEnabled: true,
       code: `{
   "message": "Hello, world!",
   "status": "success",

showcase/app/controllers/components/code-editor.js

@@ -121,7 +121,12 @@
   <Shw::Flex @direction="column" as |SF|>
     {{#each this.languages as |lang|}}
       <SF.Item @label={{lang.label}}>
-        <Hds::CodeEditor @language={{lang.value}} @value={{lang.code}} as |CE|>
+        <Hds::CodeEditor
+          @language={{lang.value}}
+          @value={{lang.code}}
+          @isLintingEnabled={{lang.isLintingEnabled}}
+          as |CE|
+        >
           <CE.Title>{{lang.label}}</CE.Title>
         </Hds::CodeEditor>
       </SF.Item>