@eccenca/gui-elements 24.0.1 → 24.1.0-rc.1

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 @@
-//adapted v6 modes imports
-import { javascript } from "@codemirror/lang-javascript";
 import { json } from "@codemirror/lang-json";
+//modes imports
 import { markdown } from "@codemirror/lang-markdown";
-import { sql } from "@codemirror/lang-sql";
 import { xml } from "@codemirror/lang-xml";
-import { yaml } from "@codemirror/lang-yaml";
 import { defaultHighlightStyle, LanguageSupport, StreamLanguage, StreamParser } from "@codemirror/language";
-//legacy mode imports
+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 { yaml } from "@codemirror/legacy-modes/mode/yaml";
 
 //adaptations
 import { adaptedSyntaxHighlighting } from "../tests/codemirrorTestHelper";
@@ -35,19 +34,10 @@ const supportedModes = {
 export const supportedCodeEditorModes = Object.keys(supportedModes) as Array<keyof typeof supportedModes>;
 export type SupportedCodeEditorModes = (typeof supportedCodeEditorModes)[number];
 
-const v6AdaptedModes: ReadonlyMap<SupportedCodeEditorModes, boolean> = new Map([
-    ["json", true],
-    ["markdown", true],
-    ["xml", true],
-    ["sql", true],
-    ["yaml", true],
-    ["javascript", true],
-]);
-
 export const useCodeMirrorModeExtension = (mode?: SupportedCodeEditorModes) => {
     return !mode
         ? adaptedSyntaxHighlighting(defaultHighlightStyle)
-        : v6AdaptedModes.has(mode)
-        ? ((typeof supportedModes[mode] === "function" ? supportedModes[mode] : () => {}) as () => LanguageSupport)()
+        : ["json", "markdown", "xml"].includes(mode)
+        ? ((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;