feat(code-editor): lint and fold json

package.json

@@ -72,6 +72,7 @@
     "html-escaper": "^3.0.3",
     "jest": "^26.6.3",
     "jest-cli": "^28.0.2",
+    "jsonlint-mod": "^1.7.6",
     "jsx-dom": "^7.0.4",
     "kompendium": "^0.11.3",
     "lodash-es": "^4.17.21",

src/components/code-editor/code-editor.scss

@@ -1,4 +1,8 @@
+@use '../../style/mixins';
+
 @import '../../../node_modules/codemirror/lib/codemirror.css';
+@import '../../../node_modules/codemirror/addon/lint/lint.css';
+@import '../../../node_modules/codemirror/addon/fold/foldgutter.css';
 
 /**
  * @prop --code-editor-max-height: Defines how tall the code editor can get before content becomes scrollable, defaults to `10rem`.
@@ -216,4 +220,48 @@
             }
         }
     }
+    .CodeMirror-lint-marker-error,
+    .CodeMirror-lint-message-error {
+        background: {
+            image: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><defs/><path fill='rgb(255,255,255)' d='M7.219 5.781L5.78 7.22 14.563 16 5.78 24.781 7.22 26.22 16 17.437l8.781 8.782 1.438-1.438L17.437 16l8.782-8.781L24.78 5.78 16 14.563z'/></svg>");
+            color: rgb(var(--color-red-default));
+            size: 0.75rem;
+        }
+        border-radius: 50%;
+    }
+
+    .CodeMirror-foldmarker {
+        position: relative;
+        @include mixins.is-elevated-clickable();
+        color: transparent;
+        text-shadow: none;
+
+        padding: 0 0.5rem;
+        border-radius: 1rem;
+
+        background: {
+            image: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' xml:space='preserve'><circle cx='16' cy='16' r='2'/><circle cx='26' cy='16' r='2'/><circle cx='6' cy='16' r='2'/></svg>");
+            size: contain;
+            repeat: no-repeat;
+            position: center;
+        }
+
+        .is-dark-mode & {
+            background-color: rgb(var(--contrast-1200));
+        }
+    }
+
+    [class^='CodeMirror-foldgutter'] {
+        color: var(--code-editor-neutral-text-color);
+        transition: opacity 0.2s ease;
+        opacity: 0.4;
+
+        &:hover {
+            opacity: 1;
+        }
+    }
+
+    .CodeMirror-foldgutter-folded {
+        opacity: 0.7;
+    }
 }

src/components/code-editor/code-editor.tsx

@@ -13,13 +13,19 @@ import CodeMirror from 'codemirror';
 import 'codemirror/mode/javascript/javascript';
 import 'codemirror/addon/selection/active-line';
 import 'codemirror/addon/edit/matchbrackets';
+import 'codemirror/addon/lint/lint';
+import 'codemirror/addon/lint/json-lint';
+import 'codemirror/addon/fold/foldgutter';
+import 'codemirror/addon/fold/brace-fold';
+import jslint from 'jsonlint-mod';
 
 /**
  * Currently this component support syntax highlighting for `javascript`,
  `json` and `typescript` formats.
  *
  * @exampleComponent limel-example-code-editor
  * @exampleComponent limel-example-code-editor-readonly-with-line-numbers
+ * @exampleComponent limel-example-code-editor-fold-lint
  */
 @Component({
     tag: 'limel-code-editor',
@@ -51,6 +57,18 @@ export class CodeEditor {
     @Prop()
     public lineNumbers: boolean = false;
 
+    /**
+     * Allows the user to fold code
+     */
+    @Prop()
+    public fold: boolean = false;
+
+    /**
+     * Enables linting of JSON content
+     */
+    @Prop()
+    public lint: boolean = false;
+
     /**
      * Select color scheme for the editor
      */
@@ -158,6 +176,7 @@ export class CodeEditor {
         let mode: string | CodeMirror.ModeSpec<any> = this.language;
         const TAB_SIZE = 4;
         let theme = 'lime light';
+        const gutters = [];
 
         if (this.isDarkMode()) {
             theme = 'lime dark';
@@ -168,13 +187,24 @@ export class CodeEditor {
                 name: 'application/json',
                 json: true,
             };
+            if (this.lint) {
+                gutters.push('CodeMirror-lint-markers');
+                if (!('jsonlint' in window)) {
+                    // eslint-disable-next-line @typescript-eslint/dot-notation
+                    window['jsonlint'] = jslint;
+                }
+            }
         } else if (this.language === 'typescript') {
             mode = {
                 name: 'application/typescript',
                 typescript: true,
             };
         }
 
+        if (this.fold) {
+            gutters.push('CodeMirror-foldgutter');
+        }
+
         return {
             mode: mode,
             value: this.value,
@@ -185,6 +215,9 @@ export class CodeEditor {
             lineNumbers: this.lineNumbers,
             styleActiveLine: true,
             matchBrackets: true,
+            lint: this.lint,
+            foldGutter: this.fold,
+            gutters: gutters,
         };
     }
 

src/components/code-editor/examples/code-editor-with-linting-and-folding.tsx

@@ -0,0 +1,37 @@
+import { Component, h, State } from '@stencil/core';
+import { data } from '../../table/examples/birds';
+
+/**
+ * Editable with JSON linting and folding
+ * Here you see an instance of the Code Editor component with linting and
+ * folding support, which allows the user to see syntax errors in the JSON
+ * code shown in the editor. Folding makes it easier to collapse larger pieces
+ * of code.
+ */
+
+@Component({
+    tag: 'limel-example-code-editor-fold-lint',
+    shadow: true,
+    styleUrl: 'code-editor.scss',
+})
+export class CodeFoldAndLintExample {
+    @State()
+    private json: string = JSON.stringify(data, null, '    ');
+
+    private handleChange = (event: CustomEvent<string>) => {
+        this.json = event.detail;
+    };
+
+    public render() {
+        return (
+            <limel-code-editor
+                value={this.json}
+                language="json"
+                lineNumbers={true}
+                lint={true}
+                fold={true}
+                onChange={this.handleChange}
+            />
+        );
+    }
+}

src/global/core-styles.scss

@@ -4,6 +4,7 @@
 @use '../style/_theme-color-variables';
 @use '../style/colors.scss';
 @use '../style/shadows.scss';
+@use '../style/internal/codemirror-tooltip.scss';
 :root {
     @include theme-color-variables.theme-color-variables;
 }

src/style/internal/codemirror-tooltip.scss

@@ -0,0 +1,19 @@
+.CodeMirror-lint-tooltip.cm-s-lime {
+    position: fixed;
+    z-index: var(--tooltip-z-index, var(--dropdown-z-index, 130));
+    transition: opacity 0.4s ease 0s;
+    opacity: 0;
+
+    color: var(--mdc-theme-text-primary-on-background);
+    background-color: var(--mdc-theme-on-primary);
+
+    font-family: monospace;
+    font-size: 0.875rem; // 14px, like the default code editor's font size
+    white-space: pre-wrap;
+    // overflow: hidden; // Why `hidden`?
+
+    padding: 0.25rem 0.5rem;
+    border-radius: 0.5rem;
+    max-width: 40rem;
+    box-shadow: var(--shadow-depth-64);
+}

tsconfig.dev.json

@@ -3,7 +3,8 @@
   "compilerOptions": {
     "allowUnreachableCode": true,
     "noUnusedLocals": false,
-    "noUnusedParameters": false
+    "noUnusedParameters": false,
+    "lib": ["dom", "es7", "es2019"]
   },
   "exclude": [
     "node_modules",