@eccenca/gui-elements 24.0.1 → 24.1.0-featureimprovepublishingprocesscmem6356.0

package/src/extensions/codemirror/CodeMirror.stories.tsx

@@ -1,6 +1,8 @@
 import React from "react";
 import { Meta, StoryFn } from "@storybook/react";
 
+import { helpersArgTypes } from "../../../.storybook/helpers";
+
 import { CodeEditor } from "./CodeMirror";
 
 export default {
@@ -11,14 +13,30 @@ export default {
         onChange: {
             action: "value changed",
         },
+        intent: {
+            ...helpersArgTypes.exampleIntent,
+        },
     },
 } as Meta<typeof CodeEditor>;
 
-const TemplateFull: StoryFn<typeof CodeEditor> = (args) => <CodeEditor {...args} />;
+let forcedUpdateKey = 0; // @see https://github.com/storybookjs/storybook/issues/13375#issuecomment-1291011856
+const TemplateFull: StoryFn<typeof CodeEditor> = (args) => <CodeEditor {...args} key={++forcedUpdateKey} />;
 
 export const BasicExample = TemplateFull.bind({});
 BasicExample.args = {
     name: "codeinput",
     mode: "markdown",
     defaultValue: "**test me**",
+    useToolbar: true,
+    disabled: false,
+    readOnly: true,
+};
+
+export const LinterExample = TemplateFull.bind({});
+LinterExample.args = {
+    name: "codeinput",
+    defaultValue: "**test me**",
+    mode: "javascript",
+    useLinting: true,
+    autoFocus: true,
 };

package/src/extensions/codemirror/CodeMirror.tsx

@@ -1,11 +1,15 @@
-import React, { useRef } from "react";
+import React, { useMemo, useRef } from "react";
 import { defaultKeymap, indentWithTab } from "@codemirror/commands";
 import { foldKeymap } from "@codemirror/language";
 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 { MarkdownToolbar } from "./toolbars/markdown.toolbar";
+import { Markdown } from "../../cmem/markdown/Markdown";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
 //hooks
@@ -14,6 +18,8 @@ import {
     supportedCodeEditorModes,
     useCodeMirrorModeExtension,
 } from "./hooks/useCodemirrorModeExtension.hooks";
+import { jsLinter } from "./linters/jsLinter";
+import { turtleLinter } from "./linters/turtleLinter";
 //adaptations
 import {
     adaptedCodeFolding,
@@ -23,12 +29,14 @@ import {
     adaptedHighlightActiveLine,
     adaptedHighlightSpecialChars,
     adaptedLineNumbers,
+    adaptedLintGutter,
     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 +58,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 +70,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
      */
@@ -71,7 +79,6 @@ export interface CodeEditorProps {
     /**
      * Syntax mode of the code editor.
      */
-
     mode?: SupportedCodeEditorModes;
     /**
      * Default value used first when the editor is instanciated.
@@ -133,6 +140,32 @@ 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;
+    /**
+     * Add toolbar for mode.
+     * Currently only `markdown` is supported.
+     */
+    useToolbar?: boolean;
+    /**
+     * Get the translation for a specific key
+     */
+    translate?: (key: string) => string | false;
 }
 
 const addExtensionsFor = (flag: boolean, ...extensions: Extension[]) => (flag ? [...extensions] : []);
@@ -140,6 +173,13 @@ 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]],
+]);
+
+const ModeToolbarSupport: ReadonlyArray<SupportedCodeEditorModes> = ["markdown"];
+
 /**
  * Includes a code editor, currently we use CodeMirror library as base.
  */
@@ -170,8 +210,33 @@ export const CodeEditor = ({
     tabForceSpaceForModes = ["python", "yaml"],
     enableTab = false,
     height,
+    useLinting = false,
+    "data-test-id": dataTestId,
+    autoFocus = false,
+    disabled = false,
+    intent,
+    useToolbar,
+    translate,
+    ...otherCodeEditorProps
 }: CodeEditorProps) => {
     const parent = useRef<any>(undefined);
+    const [view, setView] = React.useState<EditorView | undefined>();
+    const [showPreview, setShowPreview] = React.useState<boolean>(false);
+
+    const linters = useMemo(() => {
+        if (!mode) {
+            return [];
+        }
+
+        const values = [adaptedLintGutter()];
+
+        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)) {
@@ -192,6 +257,14 @@ export const CodeEditor = ({
         }
     };
 
+    const getTranslation = (key: string): string | false => {
+        if (translate && typeof translate === "function") {
+            return translate(key);
+        }
+
+        return false;
+    };
+
     React.useEffect(() => {
         const tabIndent =
             !!(tabIntentStyle === "tab" && mode && !(tabForceSpaceForModes ?? []).includes(mode)) || enableTab;
@@ -219,13 +292,23 @@ 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 && v.docChanged) {
+                    // Only fire if the text has actually been changed
+                    onChange(v.state.doc.toString());
+                }
 
                 if (onSelection)
                     onSelection(v.state.selection.ranges.filter((r) => !r.empty).map(({ from, to }) => ({ from, to })));
 
+                if (onFocusChange && intent && !v.view.dom.classList?.contains(`${eccgui}-intent--${intent}`)) {
+                    v.view.dom.classList.add(`${eccgui}-intent--${intent}`);
+                }
+
                 if (onCursorChange) {
                     const cursorPosition = v.state.selection.main.head ?? 0;
                     const editorRect = v.view.dom.getBoundingClientRect();
@@ -250,6 +333,7 @@ export const CodeEditor = ({
             addExtensionsFor(shouldHighlightActiveLine, adaptedHighlightActiveLine()),
             addExtensionsFor(wrapLines, EditorView?.lineWrapping),
             addExtensionsFor(supportCodeFolding, adaptedFoldGutter(), adaptedCodeFolding()),
+            addExtensionsFor(useLinting, ...linters),
             additionalExtensions,
         ];
 
@@ -260,18 +344,67 @@ export const CodeEditor = ({
             }),
             parent: parent.current,
         });
+        setView(view);
 
-        if (height) {
-            view.dom.style.height = typeof height === "string" ? height : `${height}px`;
-        }
+        if (view?.dom) {
+            if (height) {
+                view.dom.style.height = typeof height === "string" ? height : `${height}px`;
+            }
+
+            if (disabled) {
+                view.dom.className += ` ${eccgui}-disabled`;
+            }
 
-        setEditorView && setEditorView(view);
+            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);
+                setView(undefined);
+            }
         };
-    }, [parent.current, mode, preventLineNumbers]);
+    }, [parent.current, mode, preventLineNumbers, wrapLines]);
+
+    const hasToolbarSupport = mode && ModeToolbarSupport.indexOf(mode) > -1 && useToolbar;
+
+    const editorToolbar = (mode?: SupportedCodeEditorModes): JSX.Element => {
+        switch (mode) {
+            case "markdown":
+                return (
+                    <div>
+                        <div className={`${eccgui}-codeeditor__toolbar`}>
+                            <MarkdownToolbar
+                                view={view}
+                                togglePreviewStatus={() => setShowPreview((p) => !p)}
+                                showPreview={showPreview}
+                                translate={getTranslation}
+                                disabled={disabled}
+                                readonly={readOnly}
+                            />
+                        </div>
+                        {showPreview && (
+                            <div className={`${eccgui}-codeeditor__preview`}>
+                                <Markdown>{view?.state.doc.toString() ?? ""}</Markdown>
+                            </div>
+                        )}
+                    </div>
+                );
+            default:
+                return <></>;
+        }
+    };
 
     return (
         <div
@@ -279,12 +412,17 @@ 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}` : "")
+                (outerDivAttributes?.className ? ` ${outerDivAttributes?.className}` : "") +
+                (hasToolbarSupport ? ` ${eccgui}-codeeditor--has-toolbar` : "")
             }
-        />
+            {...otherCodeEditorProps}
+        >
+            {hasToolbarSupport && editorToolbar(mode)}
+        </div>
     );
 };
 

package/src/extensions/codemirror/_codemirror.scss

@@ -1,5 +1,10 @@
+@use "sass:color";
+
 // own vars
 $eccgui-color-codeeditor-background: $eccgui-color-textfield-background !default;
+$eccgui-color-codeeditor-separation: $eccgui-color-separation-divider !default;
+$eccgui-size-codeeditor-height: 20rem !default;
+$eccgui-size-codeeditor-toolbar-height: $button-height !default;
 
 // adjustments
 // stylelint-disable selector-class-pattern
@@ -12,9 +17,39 @@ $eccgui-color-codeeditor-background: $eccgui-color-textfield-background !default
         width: 100%;
     }
 
+    &__toolbar {
+        position: absolute;
+        z-index: 3;
+        left: 1px;
+        right: 1px;
+        top: 1px;
+        border-radius: $pt-border-radius $pt-border-radius 0 0;
+        border-bottom: solid 1px $eccgui-color-codeeditor-separation;
+        background-color: $eccgui-color-codeeditor-background;
+    }
+
+    &--has-toolbar {
+        .cm-scroller {
+            margin-top: $eccgui-size-codeeditor-toolbar-height !important;
+        }
+    }
+
+    &__preview {
+        position: absolute;
+        top: calc(#{$eccgui-size-codeeditor-toolbar-height} + 1px) !important;
+        left: 1px;
+        right: 1px;
+        bottom: 1px;
+        z-index: 2;
+        padding: $button-padding;
+        overflow-y: auto;
+        background-color: $eccgui-color-codeeditor-background;
+        border-radius: 0 0 $pt-border-radius $pt-border-radius;
+    }
+
     .cm-editor {
         width: 100%;
-        height: 290px;
+        height: $eccgui-size-codeeditor-height;
         clip-path: unset !important; // we may check later why they set inset(0) now
         background-color: $eccgui-color-codeeditor-background;
         border-radius: $pt-border-radius;
@@ -22,6 +57,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: $eccgui-size-codeeditor-height;
+            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 +126,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

@@ -48,6 +48,6 @@ export const useCodeMirrorModeExtension = (mode?: SupportedCodeEditorModes) => {
     return !mode
         ? adaptedSyntaxHighlighting(defaultHighlightStyle)
         : v6AdaptedModes.has(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/tests/codemirrorTestHelper.ts

@@ -10,6 +10,7 @@
 import { EditorView, placeholder, highlightSpecialChars, lineNumbers, highlightActiveLine } from "@codemirror/view";
 import { syntaxHighlighting, foldGutter, codeFolding } from "@codemirror/language";
 import { Extension } from "@codemirror/state";
+import { lintGutter } from "@codemirror/lint";
 
 /** placeholder extension, current error '_view.placeholder is not a function' */
 export const adaptedPlaceholder = (text?: string) =>
@@ -55,3 +56,6 @@ export const adaptedFoldGutter = (props?: any) =>
 
 export const adaptedCodeFolding = (props?: any) =>
     typeof codeFolding === "function" ? codeFolding(props) : emptyExtension;
+
+export const adaptedLintGutter = (props?: any) =>
+    typeof lintGutter === "function" ? lintGutter(props) : emptyExtension;