@eccenca/gui-elements 24.0.0 → 24.1.0-rc.0

package/src/extensions/codemirror/CodeMirror.tsx

@@ -1,11 +1,14 @@
-import React, { useRef } from "react";
+import React, { useMemo, useRef } from "react";
 import { defaultKeymap, indentWithTab } from "@codemirror/commands";
 import { foldKeymap } from "@codemirror/language";
+import { lintGutter } from "@codemirror/lint";
 import { EditorState, Extension } from "@codemirror/state";
 import { DOMEventHandlers, EditorView, KeyBinding, keymap, Rect, ViewUpdate } from "@codemirror/view";
 import { minimalSetup } from "codemirror";
 
+import { IntentTypes } from "../../common/Intent";
 import { markField } from "../../components/AutoSuggestion/extensions/markText";
+import { TestableComponent } from "../../components/interfaces";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 //hooks
@@ -14,6 +17,8 @@ import {
     supportedCodeEditorModes,
     useCodeMirrorModeExtension,
 } from "./hooks/useCodemirrorModeExtension.hooks";
+import { jsLinter } from "./linters/jsLinter";
+import { turtleLinter } from "./linters/turtleLinter";
 //adaptations
 import {
     adaptedCodeFolding,
@@ -25,10 +30,11 @@ import {
     adaptedLineNumbers,
     adaptedPlaceholder,
 } from "./tests/codemirrorTestHelper";
+import { ExtensionCreator } from "./types";
 
-export interface CodeEditorProps {
+export interface CodeEditorProps extends TestableComponent {
     // Is called with the editor instance that allows access via the CodeMirror API
-    setEditorView?: (editor: EditorView | undefined) => any;
+    setEditorView?: (editor: EditorView | undefined) => void;
     /**
      * `name` attribute of connected textarea element.
      */
@@ -50,7 +56,7 @@ export interface CodeEditorProps {
     /**
      *  Called when the focus status changes
      */
-    onFocusChange?: (focused: boolean) => any;
+    onFocusChange?: (focused: boolean) => void;
     /**
      * Called when the user presses a key
      */
@@ -62,7 +68,7 @@ export interface CodeEditorProps {
     /**
      * Called when the user selects text
      */
-    onSelection?: (ranges: { from: number; to: number }[]) => any;
+    onSelection?: (ranges: { from: number; to: number }[]) => void;
     /**
      * Called when the cursor position changes
      */
@@ -133,6 +139,23 @@ export interface CodeEditorProps {
      * If the <Tab> key is enabled as normal input, i.e. it won't have the behavior of changing to the next input element, expected in a web app.
      */
     enableTab?: boolean;
+    /**
+     * Enables linting feature in the editor ("turtle" and "javascript" modes can use linting currently).
+     */
+    useLinting?: boolean;
+
+    /**
+     * Autofocus the editor when it is rendered
+     */
+    autoFocus?: boolean;
+    /**
+     * Intent state of the code editor.
+     */
+    intent?: IntentTypes | "edited" | "removed";
+    /**
+     * Disables the editor.
+     */
+    disabled?: boolean;
 }
 
 const addExtensionsFor = (flag: boolean, ...extensions: Extension[]) => (flag ? [...extensions] : []);
@@ -140,6 +163,11 @@ const addToKeyMapConfigFor = (flag: boolean, ...keys: any) => (flag ? [...keys]
 const addHandlersFor = (flag: boolean, handlerName: string, handler: any) =>
     flag ? ({ [handlerName]: handler } as DOMEventHandlers<any>) : {};
 
+const ModeLinterMap: ReadonlyMap<SupportedCodeEditorModes, ReadonlyArray<ExtensionCreator>> = new Map([
+    ["turtle", [turtleLinter]],
+    ["javascript", [jsLinter]],
+]);
+
 /**
  * Includes a code editor, currently we use CodeMirror library as base.
  */
@@ -170,9 +198,30 @@ export const CodeEditor = ({
     tabForceSpaceForModes = ["python", "yaml"],
     enableTab = false,
     height,
+    useLinting = false,
+    "data-test-id": dataTestId,
+    autoFocus = false,
+    disabled = false,
+    intent,
+    ...otherCodeEditorProps
 }: CodeEditorProps) => {
     const parent = useRef<any>(undefined);
 
+    const linters = useMemo(() => {
+        if (!mode) {
+            return [];
+        }
+
+        const values = [lintGutter()];
+
+        const linters = ModeLinterMap.get(mode);
+        if (linters) {
+            values.push(...linters.map((linter) => linter()));
+        }
+
+        return values;
+    }, [mode]);
+
     const onKeyDownHandler = (event: KeyboardEvent, view: EditorView) => {
         if (onKeyDown && !onKeyDown(event)) {
             if (event.key === "Enter") {
@@ -219,13 +268,22 @@ export const CodeEditor = ({
             keymap?.of(keyMapConfigs),
             EditorState?.tabSize.of(tabIntentSize),
             EditorState?.readOnly.of(readOnly),
+            EditorView?.editable.of(!disabled),
             AdaptedEditorViewDomEventHandlers(domEventHandlers) as Extension,
             EditorView?.updateListener.of((v: ViewUpdate) => {
-                onChange && onChange(v.state.doc.toString());
+                if (disabled) return;
+
+                if (onChange) {
+                    onChange(v.state.doc.toString());
+                }
 
                 if (onSelection)
                     onSelection(v.state.selection.ranges.filter((r) => !r.empty).map(({ from, to }) => ({ from, to })));
 
+                if (onFocusChange) {
+                    v.view.dom.className += ` ${eccgui}-intent--${intent}`;
+                }
+
                 if (onCursorChange) {
                     const cursorPosition = v.state.selection.main.head ?? 0;
                     const editorRect = v.view.dom.getBoundingClientRect();
@@ -250,6 +308,7 @@ export const CodeEditor = ({
             addExtensionsFor(shouldHighlightActiveLine, adaptedHighlightActiveLine()),
             addExtensionsFor(wrapLines, EditorView?.lineWrapping),
             addExtensionsFor(supportCodeFolding, adaptedFoldGutter(), adaptedCodeFolding()),
+            addExtensionsFor(useLinting, ...linters),
             additionalExtensions,
         ];
 
@@ -265,11 +324,27 @@ export const CodeEditor = ({
             view.dom.style.height = typeof height === "string" ? height : `${height}px`;
         }
 
-        setEditorView && setEditorView(view);
+        if (disabled) {
+            view.dom.className += ` ${eccgui}-disabled`;
+        }
+
+        if (intent) {
+            view.dom.className += ` ${eccgui}-intent--${intent}`;
+        }
+
+        if (autoFocus) {
+            view.focus();
+        }
+
+        if (setEditorView) {
+            setEditorView(view);
+        }
 
         return () => {
             view.destroy();
-            setEditorView && setEditorView(undefined);
+            if (setEditorView) {
+                setEditorView(undefined);
+            }
         };
     }, [parent.current, mode, preventLineNumbers]);
 
@@ -279,11 +354,13 @@ export const CodeEditor = ({
             // overwrite/extend some attributes
             id={id ? id : name ? `codemirror-${name}` : undefined}
             ref={parent}
-            data-test-id="codemirror-wrapper"
+            // @deprecated (v25) fallback with static test id will be removed
+            data-test-id={dataTestId ? dataTestId : "codemirror-wrapper"}
             className={
                 `${eccgui}-codeeditor ${eccgui}-codeeditor--mode-${mode}` +
                 (outerDivAttributes?.className ? ` ${outerDivAttributes?.className}` : "")
             }
+            {...otherCodeEditorProps}
         />
     );
 };

package/src/extensions/codemirror/_codemirror.scss

@@ -1,3 +1,5 @@
+@use "sass:color";
+
 // own vars
 $eccgui-color-codeeditor-background: $eccgui-color-textfield-background !default;
 
@@ -22,6 +24,63 @@ $eccgui-color-codeeditor-background: $eccgui-color-textfield-background !default
         // get them a "border" like input boxes from blueprintjs
         box-shadow: input-transition-shadow($input-shadow-color-focus), $pt-input-box-shadow;
 
+        &.#{eccgui}-disabled {
+            @extend .#{$ns}-input, .#{$ns}-disabled;
+
+            height: 290px;
+            padding: 0;
+        }
+
+        &[class*="#{$eccgui}-intent--"] {
+            animation-duration: 1s;
+            animation-delay: 0.5s;
+        }
+
+        @each $each-intent, $each-bgcolor in $eccgui-map-intent-bgcolors {
+            &.#{eccgui}-intent--#{$each-intent} {
+                background-color: color.mix($each-bgcolor, $eccgui-color-textfield-background, 24%);
+                animation-name: intent-state-flash-#{$each-intent};
+            }
+        }
+
+        &.#{eccgui}-intent--warning {
+            @include pt-input-intent($eccgui-color-warning-text);
+        }
+
+        &.#{eccgui}-intent--success {
+            @include pt-input-intent($eccgui-color-success-text);
+        }
+
+        &.#{eccgui}-intent--danger {
+            @include pt-input-intent($eccgui-color-danger-text);
+        }
+
+        &.#{eccgui}-intent--primary {
+            @include pt-input-intent($eccgui-color-info-text);
+        }
+
+        &.#{eccgui}-intent--info {
+            @include pt-input-intent($eccgui-color-info-text);
+        }
+
+        &.#{eccgui}-intent--accent {
+            @include pt-input-intent($eccgui-color-primary);
+        }
+
+        &.#{eccgui}-intent--neutral {
+            @include pt-input-intent($eccgui-color-workspace-text);
+        }
+
+        &.#{eccgui}-intent--edited {
+            @include pt-input-intent($eccgui-color-info-text);
+        }
+
+        &.#{eccgui}-intent--removed {
+            @include pt-input-intent($eccgui-color-danger-text);
+
+            text-decoration: line-through $eccgui-color-danger-text 2px;
+        }
+
         .cm-scroller {
             width: calc(100% - 2px);
             height: calc(100% - 2px);
@@ -34,6 +93,43 @@ $eccgui-color-codeeditor-background: $eccgui-color-textfield-background !default
         &.cm-focused {
             outline: none;
             box-shadow: input-transition-shadow($input-shadow-color-focus, true), $input-box-shadow-focus;
+
+            &.#{eccgui}-intent--warning {
+                box-shadow: input-transition-shadow($eccgui-color-warning-text, true), $input-box-shadow-focus;
+            }
+
+            &.#{eccgui}-intent--success {
+                box-shadow: input-transition-shadow($eccgui-color-success-text, true), $input-box-shadow-focus;
+            }
+
+            &.#{eccgui}-intent--danger {
+                box-shadow: input-transition-shadow($eccgui-color-danger-text, true), $input-box-shadow-focus;
+            }
+
+            &.#{eccgui}-intent--primary {
+                box-shadow: input-transition-shadow($eccgui-color-info-text, true), $input-box-shadow-focus;
+            }
+
+            &.#{eccgui}-intent--info {
+                box-shadow: input-transition-shadow($eccgui-color-info-text, true), $input-box-shadow-focus;
+            }
+
+            &.#{eccgui}-intent--accent {
+                box-shadow: input-transition-shadow($eccgui-color-warning-text, true), $input-box-shadow-focus;
+            }
+
+            &.#{eccgui}-intent--neutral {
+                box-shadow: input-transition-shadow($eccgui-color-workspace-text, true), $input-box-shadow-focus;
+            }
+
+            &.#{eccgui}-intent--edited {
+                box-shadow: input-transition-shadow($eccgui-color-info-text, true), $input-box-shadow-focus;
+            }
+
+            &.#{eccgui}-intent--removed {
+                text-decoration: line-through $eccgui-color-danger-text 2px;
+                box-shadow: input-transition-shadow($eccgui-color-danger-text, true), $input-box-shadow-focus;
+            }
         }
 
         .CodeMirror-hscrollbar {

package/src/extensions/codemirror/debouncedLinter.ts

@@ -0,0 +1,26 @@
+import { Diagnostic } from "@codemirror/lint";
+import { EditorView } from "@codemirror/view";
+import { debounce } from "lodash";
+
+import { Linter } from "./types";
+
+const DEBOUNCE_TIME = 500;
+
+export const debouncedLinter = (lintFunction: Linter, time = DEBOUNCE_TIME) => {
+    const debouncedFn = debounce(
+        (
+            view: EditorView,
+            resolve: (diagnostics: ReadonlyArray<Diagnostic> | Promise<ReadonlyArray<Diagnostic>>) => void
+        ) => {
+            const diagnostics = lintFunction(view);
+            resolve(diagnostics);
+        },
+        time
+    );
+
+    return (view: EditorView) => {
+        return new Promise<ReadonlyArray<Diagnostic>>((resolve) => {
+            debouncedFn(view, resolve);
+        });
+    };
+};

package/src/extensions/codemirror/hooks/useCodemirrorModeExtension.hooks.ts

@@ -1,18 +1,17 @@
-import { defaultHighlightStyle, StreamLanguage, StreamParser, LanguageSupport } from "@codemirror/language";
-
+import { json } from "@codemirror/lang-json";
 //modes imports
 import { markdown } from "@codemirror/lang-markdown";
-import { json } from "@codemirror/lang-json";
 import { xml } from "@codemirror/lang-xml";
+import { defaultHighlightStyle, LanguageSupport, StreamLanguage, StreamParser } from "@codemirror/language";
 import { javascript } from "@codemirror/legacy-modes/mode/javascript";
+import { jinja2 } from "@codemirror/legacy-modes/mode/jinja2";
+import { mathematica } from "@codemirror/legacy-modes/mode/mathematica";
+import { ntriples } from "@codemirror/legacy-modes/mode/ntriples";
 import { python } from "@codemirror/legacy-modes/mode/python";
 import { sparql } from "@codemirror/legacy-modes/mode/sparql";
 import { sql } from "@codemirror/legacy-modes/mode/sql";
 import { turtle } from "@codemirror/legacy-modes/mode/turtle";
-import { jinja2 } from "@codemirror/legacy-modes/mode/jinja2";
 import { yaml } from "@codemirror/legacy-modes/mode/yaml";
-import { ntriples } from "@codemirror/legacy-modes/mode/ntriples";
-import { mathematica } from "@codemirror/legacy-modes/mode/mathematica";
 
 //adaptations
 import { adaptedSyntaxHighlighting } from "../tests/codemirrorTestHelper";
@@ -39,6 +38,6 @@ export const useCodeMirrorModeExtension = (mode?: SupportedCodeEditorModes) => {
     return !mode
         ? adaptedSyntaxHighlighting(defaultHighlightStyle)
         : ["json", "markdown", "xml"].includes(mode)
-        ? ((typeof supportedModes[mode] === "function" ? supportedModes[mode] : () => {}) as () => LanguageSupport)()
+        ? ((typeof supportedModes[mode] === "function" ? supportedModes[mode] : () => null) as () => LanguageSupport)()
         : StreamLanguage?.define(supportedModes[mode] as StreamParser<unknown>);
 };

package/src/extensions/codemirror/linters/jsLinter.ts

@@ -0,0 +1,38 @@
+import { Diagnostic, linter } from "@codemirror/lint";
+import { JSHINT as jshint } from "jshint";
+
+import { ExtensionCreator } from "../types";
+
+const lintOptions = {
+    esversion: 11,
+    browser: true,
+};
+
+/**
+ * Sets up the javascript linter. Documentation: https://codemirror.net/examples/lint/
+ */
+export const jsLinter: ExtensionCreator = () => {
+    return linter((view) => {
+        const diagnostics: Array<Diagnostic> = [];
+        const codeText = view.state.doc.toJSON();
+        jshint(codeText, lintOptions);
+        const errors = jshint?.data()?.errors;
+
+        if (errors && errors.length > 0) {
+            errors.forEach((error) => {
+                const selectedLine = view.state.doc.line(error.line);
+
+                const diagnostic: Diagnostic = {
+                    from: selectedLine.from,
+                    to: selectedLine.to,
+                    severity: "error",
+                    message: error.reason,
+                };
+
+                diagnostics.push(diagnostic);
+            });
+        }
+
+        return diagnostics;
+    });
+};

package/src/extensions/codemirror/linters/turtleLinter.ts

@@ -0,0 +1,102 @@
+import { Diagnostic, linter } from "@codemirror/lint";
+import { EditorView } from "@codemirror/view";
+import { Parser } from "n3";
+
+import { debouncedLinter } from "../debouncedLinter";
+import { ExtensionCreator, Linter } from "../types";
+
+const parser = new Parser();
+
+const EMPTY_RESOURCE = "<>";
+
+const getError = (message: string, view: EditorView) => {
+    const lineMatch = message.match(/(?<=line )\d{1,}/);
+    const valueMatch = message.match(/"([^"]*)"/);
+
+    const lineNumber = lineMatch ? Number(lineMatch[0]) : 1;
+    // the [1] index is used to get the caputre group
+    const errorContent = valueMatch && valueMatch[1];
+
+    const line = view.state.doc.line(lineNumber);
+    const position = line.text.search(errorContent ?? /\S/);
+
+    const from = line.from + position;
+    const errorLength = errorContent?.length;
+
+    return { from, to: errorLength ? from + errorLength : line.to };
+};
+
+const getQuadError = (view: EditorView) => {
+    const lines = view.state.doc.toJSON();
+
+    for (let i = 0; i < lines.length; i += 1) {
+        const input = lines[i].trim();
+
+        if (!input) {
+            continue;
+        }
+
+        if (input.includes(EMPTY_RESOURCE)) {
+            // i + 1 is used here because the codemirror uses 1-indexes
+            const line = view.state.doc.line(i + 1);
+            const position = line.text.search(EMPTY_RESOURCE);
+
+            const from = line.from + position;
+
+            return {
+                from,
+                to: from + EMPTY_RESOURCE.length,
+            };
+        }
+    }
+
+    return { from: 0, to: view.state.doc.length };
+};
+
+const n3Linter: Linter = (view) => {
+    const diagnostics: Array<Diagnostic> = [];
+    const value = view.state.doc.toString();
+
+    try {
+        const quads = parser.parse(value);
+
+        quads.forEach((quad) => {
+            if (!quad.subject || !quad.predicate || !quad.object) {
+                const { from, to } = getQuadError(view);
+
+                view.dispatch({
+                    scrollIntoView: true,
+                });
+
+                diagnostics.push({
+                    from,
+                    to,
+                    severity: "error",
+                    message: `Invalid RDF quad:\n\nsubject: ${quad.subject}\npredicate: ${quad.predicate}\nobject: ${quad.object}`,
+                });
+            }
+        });
+    } catch (error) {
+        const { message } = error as Error;
+
+        const { from, to } = getError(message, view);
+
+        view.dispatch({
+            scrollIntoView: true,
+        });
+
+        diagnostics.push({
+            from,
+            to,
+            severity: "error",
+            message: (error as Error).message,
+        });
+    }
+
+    return diagnostics;
+};
+
+/**
+ * Sets up the turtle linter. Documentation: https://codemirror.net/examples/lint/
+ */
+export const turtleLinter: ExtensionCreator = () => linter(debouncedLinter(n3Linter));

package/src/extensions/codemirror/types.ts

@@ -0,0 +1,7 @@
+import { Diagnostic } from "@codemirror/lint";
+import { Extension } from "@codemirror/state";
+import { EditorView } from "@codemirror/view";
+
+export type Linter = (view: EditorView) => ReadonlyArray<Diagnostic> | Promise<ReadonlyArray<Diagnostic>>;
+
+export type ExtensionCreator<T = unknown> = (options?: T) => Extension;