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

package/dist/types/extensions/codemirror/CodeMirror.d.ts

@@ -1,9 +1,11 @@
 import React from "react";
 import { Extension } from "@codemirror/state";
 import { EditorView, Rect } from "@codemirror/view";
+import { IntentTypes } from "../../common/Intent";
+import { TestableComponent } from "../../components/interfaces";
 import { SupportedCodeEditorModes } from "./hooks/useCodemirrorModeExtension.hooks";
-export interface CodeEditorProps {
-    setEditorView?: (editor: EditorView | undefined) => any;
+export interface CodeEditorProps extends TestableComponent {
+    setEditorView?: (editor: EditorView | undefined) => void;
     /**
      * `name` attribute of connected textarea element.
      */
@@ -25,7 +27,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
      */
@@ -40,7 +42,7 @@ export interface CodeEditorProps {
     onSelection?: (ranges: {
         from: number;
         to: number;
-    }[]) => any;
+    }[]) => void;
     /**
      * Called when the cursor position changes
      */
@@ -101,11 +103,36 @@ 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;
 }
 /**
  * Includes a code editor, currently we use CodeMirror library as base.
  */
 export declare const CodeEditor: {
-    ({ onChange, onSelection, onMouseDown, onFocusChange, onKeyDown, onCursorChange, name, id, mode, preventLineNumbers, defaultValue, readOnly, shouldHaveMinimalSetup, wrapLines, onScroll, setEditorView, supportCodeFolding, shouldHighlightActiveLine, outerDivAttributes, tabIntentSize, tabIntentStyle, placeholder, additionalExtensions, tabForceSpaceForModes, enableTab, height, }: CodeEditorProps): React.JSX.Element;
+    ({ onChange, onSelection, onMouseDown, onFocusChange, onKeyDown, onCursorChange, name, id, mode, preventLineNumbers, defaultValue, readOnly, shouldHaveMinimalSetup, wrapLines, onScroll, setEditorView, supportCodeFolding, shouldHighlightActiveLine, outerDivAttributes, tabIntentSize, tabIntentStyle, placeholder, additionalExtensions, tabForceSpaceForModes, enableTab, height, useLinting, "data-test-id": dataTestId, autoFocus, disabled, intent, useToolbar, translate, ...otherCodeEditorProps }: CodeEditorProps): React.JSX.Element;
     supportedModes: ("markdown" | "python" | "sparql" | "turtle" | "xml" | "yaml" | "jinja2" | "json" | "ntriples" | "mathematica" | "sql" | "javascript")[];
 };

package/dist/types/extensions/codemirror/debouncedLinter.d.ts

@@ -0,0 +1,4 @@
+import { Diagnostic } from "@codemirror/lint";
+import { EditorView } from "@codemirror/view";
+import { Linter } from "./types";
+export declare const debouncedLinter: (lintFunction: Linter, time?: number) => (view: EditorView) => Promise<readonly Diagnostic[]>;

package/dist/types/extensions/codemirror/linters/jsLinter.d.ts

@@ -0,0 +1,5 @@
+import { ExtensionCreator } from "../types";
+/**
+ * Sets up the javascript linter. Documentation: https://codemirror.net/examples/lint/
+ */
+export declare const jsLinter: ExtensionCreator;

package/dist/types/extensions/codemirror/linters/turtleLinter.d.ts

@@ -0,0 +1,5 @@
+import { ExtensionCreator } from "../types";
+/**
+ * Sets up the turtle linter. Documentation: https://codemirror.net/examples/lint/
+ */
+export declare const turtleLinter: ExtensionCreator;

package/dist/types/extensions/codemirror/tests/codemirrorTestHelper.d.ts

@@ -18,3 +18,4 @@ export declare const adaptedLineNumbers: (props?: any) => any;
 export declare const adaptedHighlightActiveLine: () => any;
 export declare const adaptedFoldGutter: (props?: any) => any;
 export declare const adaptedCodeFolding: (props?: any) => any;
+export declare const adaptedLintGutter: (props?: any) => any;

package/dist/types/extensions/codemirror/toolbars/commands/markdown.command.d.ts

@@ -0,0 +1,55 @@
+import { EditorView } from "codemirror";
+import { ValidIconName } from "../../../../components/Icon/canonicalIconNames";
+declare enum Commands {
+    header1 = "Heading 1",
+    header2 = "Heading 2",
+    header3 = "Heading 3",
+    header4 = "Heading 4",
+    header5 = "Heading 5",
+    header6 = "Heading 6",
+    codeBlock = "Code block",
+    quote = "Block quote",
+    bold = "Bold",
+    italic = "Italic",
+    strike = "StrikeThrough",
+    inlineCode = "Inline code",
+    unorderedList = "Unordered list",
+    orderedList = "Ordered list",
+    todoList = "Todo list",
+    link = "Link",
+    image = "Image"
+}
+export default class MarkdownCommand {
+    private view;
+    static commands: {
+        readonly paragraphs: readonly [Commands.header1, Commands.header2, Commands.header3, Commands.header4, Commands.header5, Commands.header6, Commands.quote, Commands.codeBlock];
+        readonly basic: {
+            title: Commands;
+            icon: ValidIconName;
+        }[];
+        readonly lists: {
+            title: Commands;
+            icon: ValidIconName;
+            moniker: string;
+        }[];
+        readonly attachments: {
+            title: Commands;
+            icon: ValidIconName;
+        }[];
+    };
+    constructor(view: EditorView);
+    /**
+     * Supported list types are ol, ul, todo.
+     * utility helps to determine which at the start of the line
+     */
+    private getListTypeOfLine;
+    private createListDelimiter;
+    private createList;
+    private enforceCursorFocus;
+    private createHeading;
+    private applyFormatting;
+    private applyAttachment;
+    private applyQuoteFormatting;
+    executeCommand: (command: Commands) => true | void;
+}
+export {};

package/dist/types/extensions/codemirror/toolbars/markdown.toolbar.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { EditorView } from "codemirror";
+interface MarkdownToolbarProps {
+    view?: EditorView;
+    togglePreviewStatus: () => void;
+    showPreview: boolean;
+    translate: (key: string) => string | false;
+    disabled?: boolean;
+    readonly?: boolean;
+}
+export declare const MarkdownToolbar: React.FC<MarkdownToolbarProps>;
+export {};

package/dist/types/extensions/codemirror/types.d.ts

@@ -0,0 +1,5 @@
+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;

package/dist/types/extensions/react-flow/nodes/NodeContent.d.ts

@@ -11,9 +11,19 @@ import { NodeHighlightColor } from "./sharedTypes";
 type NodeContentHandleLegacyProps = HandleProps;
 type NodeContentHandleNextProps = HandleNextProps;
 export type NodeContentHandleProps = NodeContentHandleLegacyProps | NodeContentHandleNextProps;
-type NodeDimensions = {
-    width: number;
-    height: number;
+export type NodeDimensions = {
+    width?: number;
+    height?: number;
+};
+type ResizeDirections = {
+    right: true;
+    bottom?: false;
+} | {
+    right?: false;
+    bottom: true;
+} | {
+    right: true;
+    bottom: true;
 };
 type IntroductionTime = {
     /**
@@ -185,12 +195,16 @@ export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends N
      * width and height dimensions of the node (Optional)
      */
     nodeDimensions?: NodeDimensions;
+    /** if node is resizable, this allows direction of specificity */
+    resizeDirections?: ResizeDirections;
+    /** determines how much width a node can be resized to */
+    resizeMaxDimensions?: Partial<NodeDimensions>;
 }
 /**
  * The `NodeContent` element manages the main view of how a node is displaying which content.
  * This element cannot be used directly, all properties must be routed through the `data` property of an `elements` property item inside the `ReactFlow` container.
  */
-export declare function NodeContent<CONTENT_PROPS = any>({ flowVersion, iconName, depiction, leftElement, typeLabel, label, labelSubline, enlargeHeader, fullWidth, showExecutionButtons, executionButtons, menuButtons, content, contentExtension, footerContent, size, minimalShape, intent, border, highlightColor, adaptHeightForHandleMinCount, adaptSizeIncrement, getMinimalTooltipData, style, showUnconnectableHandles, animated, introductionTime, onNodeResize, nodeDimensions, targetPosition, sourcePosition, isConnectable, selected, letPassWheelEvents, businessData, ...otherDomProps }: NodeContentProps<any>): React.JSX.Element;
+export declare function NodeContent<CONTENT_PROPS = any>({ flowVersion, iconName, depiction, leftElement, typeLabel, label, labelSubline, enlargeHeader, fullWidth, showExecutionButtons, executionButtons, menuButtons, content, contentExtension, footerContent, size, minimalShape, intent, border, highlightColor, adaptHeightForHandleMinCount, adaptSizeIncrement, getMinimalTooltipData, style, showUnconnectableHandles, animated, introductionTime, onNodeResize, nodeDimensions, resizeDirections, resizeMaxDimensions, targetPosition, sourcePosition, isConnectable, selected, letPassWheelEvents, businessData, ...otherDomProps }: NodeContentProps<any>): React.JSX.Element;
 export declare const nodeContentUtils: {
     evaluateHighlightColors: (baseCustomProperty: string, highlightColor?: NodeHighlightColor | NodeHighlightColor[]) => {
         highlightClassNameSuffix: string[];

package/dist/types/extensions/react-flow/nodes/nodeUtils.d.ts

@@ -1,14 +1,15 @@
 import { CSSProperties } from "react";
-import { Node } from "react-flow-renderer";
-type IStickyNote = {
+import { Node, XYPosition } from "react-flow-renderer";
+import { NodeDimensions } from "./NodeContent";
+/** A sticky note for display in the UI as returned from the backend. */
+export interface StickyNote {
     id: string;
     content: string;
     color: string;
-    position: number[];
-    dimension: number[];
-};
+    position: XYPosition & NodeDimensions;
+}
 export declare const nodeDefaultUtils: {
     generateStyleWithColor: (color: string) => CSSProperties;
-    transformNodeToStickyNode: (node: Node<any>) => IStickyNote;
+    transformNodeToStickyNode: (node: Node<any>) => StickyNote;
 };
 export default nodeDefaultUtils;

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@eccenca/gui-elements",
     "description": "GUI elements based on other libraries, usable in React application, written in Typescript.",
-    "version": "24.0.1",
+    "version": "24.1.0-featureimprovepublishingprocesscmem6356.0",
     "license": "Apache-2.0",
     "homepage": "https://github.com/eccenca/gui-elements",
     "bugs": "https://github.com/eccenca/gui-elements/issues",
@@ -68,24 +68,27 @@
         "autolint:all": "yarn autolint:scripts && yarn autolint:styles && yarn autolint:prettier"
     },
     "dependencies": {
-        "@blueprintjs/colors": "^5.1.5",
-        "@blueprintjs/core": "^5.16.2",
-        "@blueprintjs/select": "^5.3.7",
-        "@carbon/icons": "^11.53.0",
-        "@carbon/react": "1.72.0",
-        "@codemirror/lang-javascript": "^6.2.2",
+        "@blueprintjs/colors": "^5.1.8",
+        "@blueprintjs/core": "^5.18.0",
+        "@blueprintjs/select": "^5.3.19",
+        "@carbon/icons": "^11.58.0",
+        "@carbon/react": "^1.80.1",
+        "@codemirror/lang-javascript": "^6.2.3",
         "@codemirror/lang-json": "^6.0.1",
-        "@codemirror/lang-markdown": "^6.3.1",
+        "@codemirror/lang-markdown": "^6.3.2",
         "@codemirror/lang-sql": "^6.8.0",
         "@codemirror/lang-xml": "^6.1.0",
         "@codemirror/lang-yaml": "^6.1.2",
-        "@codemirror/legacy-modes": "^6.4.2",
+        "@codemirror/legacy-modes": "^6.5.0",
         "@mavrin/remark-typograf": "^2.2.0",
+        "classnames": "^2.5.1",
         "codemirror": "^6.0.1",
         "color": "^4.2.3",
-        "compute-scroll-into-view": "^3.1.0",
+        "compute-scroll-into-view": "^3.1.1",
+        "jshint": "^2.13.6",
         "lodash": "^4.17.21",
-        "re-resizable": "^6.10.1",
+        "n3": "^1.25.1",
+        "re-resizable": "^6.10.3",
         "react": "^16.13.1",
         "react-dom": "^16.13.1",
         "react-flow-renderer": "9.7.4",
@@ -100,51 +103,53 @@
         "reset-css": "^5.0.2",
         "unified": "^11.0.5",
         "wicg-inert": "^3.1.3",
-        "xml-formatter": "^3.6.3"
+        "xml-formatter": "^3.6.5"
     },
     "devDependencies": {
-        "@babel/core": "^7.26.0",
-        "@babel/plugin-proposal-class-properties": "^7.18.6",
-        "@babel/plugin-proposal-private-methods": "^7.18.6",
-        "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-        "@babel/preset-env": "^7.26.0",
+        "@babel/core": "^7.26.10",
+        "@babel/plugin-transform-class-properties": "^7.25.9",
+        "@babel/plugin-transform-private-methods": "^7.25.9",
+        "@babel/plugin-transform-private-property-in-object": "^7.25.9",
+        "@babel/preset-env": "^7.26.9",
         "@babel/preset-flow": "^7.25.9",
         "@babel/preset-react": "^7.26.3",
-        "@babel/preset-typescript": "^7.26.0",
-        "@eslint/compat": "^1.2.4",
-        "@eslint/eslintrc": "^3.2.0",
-        "@eslint/js": "^9.17.0",
-        "@storybook/addon-actions": "^8.4.7",
-        "@storybook/addon-essentials": "^8.4.7",
-        "@storybook/addon-jest": "^8.4.7",
-        "@storybook/addon-links": "^8.4.7",
-        "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
-        "@storybook/cli": "^8.4.7",
+        "@babel/preset-typescript": "^7.27.0",
+        "@eslint/compat": "^1.2.8",
+        "@eslint/eslintrc": "^3.3.1",
+        "@eslint/js": "^9.24.0",
+        "@storybook/addon-actions": "^8.6.12",
+        "@storybook/addon-essentials": "^8.6.12",
+        "@storybook/addon-jest": "^8.6.12",
+        "@storybook/addon-links": "^8.6.12",
+        "@storybook/addon-webpack5-compiler-babel": "^3.0.6",
+        "@storybook/cli": "^8.6.12",
         "@storybook/preset-scss": "^1.0.3",
-        "@storybook/react": "^8.4.7",
-        "@storybook/react-webpack5": "^8.4.7",
-        "@storybook/test": "^8.4.7",
+        "@storybook/react": "^8.6.12",
+        "@storybook/react-webpack5": "^8.6.12",
+        "@storybook/test": "^8.6.12",
         "@testing-library/jest-dom": "^6.6.3",
-        "@testing-library/react": "^12.1.2",
+        "@testing-library/react": "^12.1.5",
         "@types/codemirror": "^5.60.15",
         "@types/color": "^3.0.6",
         "@types/jest": "^29.5.14",
-        "@types/lodash": "^4.17.13",
+        "@types/jshint": "^2.12.4",
+        "@types/lodash": "^4.17.16",
+        "@types/n3": "^1.24.2",
         "@types/react-syntax-highlighter": "^15.5.13",
-        "@typescript-eslint/eslint-plugin": "^8.18.1",
-        "@typescript-eslint/parser": "^8.18.1",
+        "@typescript-eslint/eslint-plugin": "^8.30.1",
+        "@typescript-eslint/parser": "^8.30.1",
         "babel-jest": "^29.7.0",
-        "chromatic": "^11.20.2",
-        "eslint": "^9.17.0",
-        "eslint-plugin-react": "^7.37.2",
-        "eslint-plugin-react-hooks": "^5.1.0",
+        "chromatic": "^11.28.0",
+        "eslint": "^9.24.0",
+        "eslint-plugin-react": "^7.37.5",
+        "eslint-plugin-react-hooks": "^5.2.0",
         "eslint-plugin-simple-import-sort": "^12.1.1",
         "husky": "4",
         "identity-obj-proxy": "^3.0.0",
         "jest": "^29.7.0",
         "jest-environment-jsdom": "^29.7.0",
         "jest-pnp-resolver": "^1.2.3",
-        "lint-staged": "^15.2.11",
+        "lint-staged": "^15.5.1",
         "node-sass-package-importer": "^5.3.3",
         "path": "^0.12.7",
         "prettier": "^2.8.8",
@@ -154,10 +159,10 @@
         "rimraf": "^5.0.10",
         "sass": "1.62.1",
         "sass-loader": "10.3.1",
-        "storybook": "^8.4.7",
-        "stylelint": "^15.11.0",
-        "stylelint-config-recess-order": "^4.6.0",
-        "stylelint-config-standard-scss": "^9.0.0",
+        "storybook": "^8.6.12",
+        "stylelint": "^16.18.0",
+        "stylelint-config-recess-order": "^6.0.0",
+        "stylelint-config-standard-scss": "^14.0.0",
         "ts-node": "^10.9.2",
         "tsc-esm-fix": "^3.1.2",
         "typescript": "5.5.3",
@@ -170,10 +175,8 @@
         "react-dom": ">=16"
     },
     "resolutions": {
-        "**/@types/react": "^17.0.83",
-        "node-sass-package-importer/**/postcss": "^8.4.49",
-        "**/cross-spawn": "^7.0.5 ",
-        "**/micromatch": "^4.0.8"
+        "**/@types/react": "^17.0.85",
+        "node-sass-package-importer/**/postcss": "^8.4.49"
     },
     "husky": {
         "hooks": {

package/src/cmem/ActivityControl/ActivityControlWidget.tsx

@@ -92,7 +92,7 @@ interface IActivityContextMenu extends TestableComponent {
 
 export interface ActivityControlWidgetAction extends TestableComponent {
     // The action that should be triggered
-    action: () => any;
+    action: () => void;
     // The tooltip that should be shown over the action icon
     tooltip?: string;
     // The icon of the action button
@@ -147,6 +147,7 @@ export function ActivityControlWidget(props: ActivityControlWidgetProps) {
                 {props.label && (
                     <OverviewItemLine small={small}>
                         {React.cloneElement(labelWrapper, {}, props.label)}
+                        {timerExecutionMsg && (props.statusMessage || tags) && <>&nbsp;({timerExecutionMsg})</>}
                     </OverviewItemLine>
                 )}
                 {(props.statusMessage || tags) && (
@@ -170,7 +171,9 @@ export function ActivityControlWidget(props: ActivityControlWidgetProps) {
                         )}
                     </OverviewItemLine>
                 )}
-                {timerExecutionMsg && <OverviewItemLine small>{timerExecutionMsg}</OverviewItemLine>}
+                {timerExecutionMsg && !(props.statusMessage || tags) && (
+                    <OverviewItemLine small>{timerExecutionMsg}</OverviewItemLine>
+                )}
             </OverviewItemDescription>
             <OverviewItemActions>
                 {activityActions &&

package/src/cmem/react-flow/StickyNoteModal/StickyNoteModal.tsx

@@ -4,7 +4,16 @@ import getColorConfiguration from "../../../common/utils/getColorConfiguration";
 import { CodeEditor } from "../../../extensions";
 import { ReactFlowHotkeyContext } from "../extensions/ReactFlowHotkeyContext";
 
-import { Button, FieldItem, Icon, SimpleDialog, SimpleDialogProps, Tag, TagList } from "./../../../index";
+import {
+    Button,
+    CodeEditorProps,
+    FieldItem,
+    Icon,
+    SimpleDialog,
+    SimpleDialogProps,
+    Tag,
+    TagList,
+} from "./../../../index";
 
 export type StickyNoteModalTranslationKeys = "modalTitle" | "noteLabel" | "colorLabel" | "saveButton" | "cancelButton";
 
@@ -32,10 +41,14 @@ export interface StickyNoteModalProps {
      * Forward other properties to the `SimpleModal` element that is used for this dialog.
      */
     simpleDialogProps?: Omit<SimpleDialogProps, "size" | "title" | "hasBorder" | "isOpen" | "onClose" | "actions">;
+    /**
+     * Code editor props
+     */
+    codeEditorProps?: Omit<CodeEditorProps, "defaultValue" | "onChange" | "preventLinuNumbers" | "id" | "name">;
 }
 
 export const StickyNoteModal: React.FC<StickyNoteModalProps> = React.memo(
-    ({ metaData, onClose, onSubmit, translate, simpleDialogProps }) => {
+    ({ metaData, onClose, onSubmit, translate, simpleDialogProps, codeEditorProps }) => {
         const refNote = React.useRef<string>(metaData?.note ?? "");
         const [color, setSelectedColor] = React.useState<string>(metaData?.color ?? "");
         const noteColors: [string, string][] = Object.entries(getColorConfiguration("stickynotes")).map(
@@ -123,6 +136,7 @@ export const StickyNoteModal: React.FC<StickyNoteModalProps> = React.memo(
                             refNote.current = value;
                         }}
                         defaultValue={refNote.current}
+                        {...codeEditorProps}
                     />
                 </FieldItem>
                 <FieldItem

package/src/cmem/react-flow/configuration/_colors-graph.scss

@@ -1,7 +1,7 @@
 $reactflow-color-graph-node: #745a85 !default;
 $reactflow-color-class-node: #3a7896 !default;
 $reactflow-color-instance-node: #0097a7 !default;
-$reactflow-color-property-node: #ffd54f !default;
+$reactflow-color-property-node: #40a691 !default;
 $reactflow-color-implicit-edge: #ae3c74 !default;
 $reactflow-color-import-edge: $reactflow-color-graph-node !default;
 $reactflow-color-subclass-edge: $reactflow-color-class-node !default;
@@ -13,6 +13,8 @@ $reactflow-color-rdftype-edge: $reactflow-color-instance-node !default;
 }
 
 .#{eccgui}-configuration--colors__react-flow-graph {
+    /* stylelint-disable custom-property-pattern */
+    // TODO: we should correct custom property names later but atm this would lead to broken consumer apps
     --graphNode: #{$reactflow-color-graph-node};
     --classNode: #{$reactflow-color-class-node};
     --instanceNode: #{$reactflow-color-instance-node};
@@ -31,4 +33,5 @@ $reactflow-color-rdftype-edge: $reactflow-color-instance-node !default;
     --subclassEdgeBright: #{bright($reactflow-color-subclass-edge)};
     --subpropertyEdgeBright: #{bright($reactflow-color-subproperty-edge)};
     --rdftypeEdgeBright: #{bright($reactflow-color-rdftype-edge)};
+    /* stylelint-enable custom-property-pattern */
 }

package/src/cmem/react-flow/configuration/_colors-workflow.scss

@@ -1,3 +1,4 @@
+$reactflow-color-project-node: #A5356E !default; // Cannot be part of a workflow but we have no other place atm to configure it
 $reactflow-color-dataset-node: #3a7896 !default;
 $reactflow-color-linking-node: #0097a7 !default;
 $reactflow-color-transform-node: #40a691 !default;
@@ -10,12 +11,14 @@ $reactflow-color-replaceable-input: #faa854 !default;
 }
 
 .#{eccgui}-configuration--colors__react-flow-workflow {
+    --projectNode: #{$reactflow-color-project-node};
     --datasetNode: #{$reactflow-color-dataset-node};
     --linkingNode: #{$reactflow-color-linking-node};
     --transformNode: #{$reactflow-color-transform-node};
     --taskNode: #{$reactflow-color-task-node};
     --workflowNode: #{$reactflow-color-workflow-node};
     --replaceableInput: #{$reactflow-color-replaceable-input};
+    --projectNodeBright: #{bright($reactflow-color-project-node)};
     --datasetNodeBright: #{bright($reactflow-color-dataset-node)};
     --linkingNodeBright: #{bright($reactflow-color-linking-node)};
     --transformNodeBright: #{bright($reactflow-color-transform-node)};

package/src/components/AutoSuggestion/AutoSuggestion.tsx

@@ -219,6 +219,8 @@ const AutoSuggestion = ({
         CodeAutocompleteFieldSuggestionWithReplacementInfo | undefined
     >(undefined);
     const [cm, setCM] = React.useState<EditorView>();
+    const currentCm = React.useRef<EditorView>()
+    currentCm.current = cm
     const isFocused = React.useRef(false);
     const autoSuggestionDivRef = React.useRef<HTMLDivElement>(null);
     /** Mutable editor state, since this needs to be current in scope of the SingleLineEditorComponent. */
@@ -235,12 +237,21 @@ const AutoSuggestion = ({
     const pathIsValid = validationResponse?.valid ?? true;
 
     React.useEffect(() => {
-        if (reInitOnInitialValueChange && initialValue != null && cm) {
+        if (reInitOnInitialValueChange && initialValue != null && currentCm.current) {
             dispatch({
-                changes: { from: 0, to: cm?.state?.doc.length, insert: initialValue },
+                changes: { from: 0, to: currentCm.current.state?.doc.length, insert: initialValue },
             });
+            // Validate initial value change
+            checkValuePathValidity(initialValue)
         }
-    }, [initialValue, cm, reInitOnInitialValueChange]);
+    }, [initialValue, reInitOnInitialValueChange]);
+
+    React.useEffect(() => {
+        if(currentCm.current) {
+            // Validate initial value
+            checkValuePathValidity(initialValue)
+        }
+    }, [currentCm.current!!])
 
     const setCurrentIndex = (newIndex: number) => {
         editorState.index = newIndex;

package/src/components/AutoSuggestion/ExtendedCodeEditor.tsx

@@ -4,7 +4,7 @@ import { EditorState } from "@codemirror/state";
 import { EditorView, lineNumbers, Rect } from "@codemirror/view";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
-import { CodeEditor } from "../../extensions/codemirror/CodeMirror";
+import { CodeEditor, CodeEditorProps } from "../../extensions/codemirror/CodeMirror";
 //hooks
 import { SupportedCodeEditorModes } from "../../extensions/codemirror/hooks/useCodemirrorModeExtension.hooks";
 
@@ -15,23 +15,23 @@ export interface IRange {
 
 export interface ExtendedCodeEditorProps {
     // Is called with the editor instance that allows access via the CodeMirror API
-    setCM: (editor: EditorView | undefined) => any;
+    setCM: (editor: EditorView | undefined) => void;
     // Called whenever the editor content changes
-    onChange: (value: string) => any;
+    onChange: (value: string) => void;
     // Called when the cursor position changes
-    onCursorChange: (pos: number, coords: Rect, scrollinfo: HTMLElement, cm: EditorView) => any;
+    onCursorChange: (pos: number, coords: Rect, scrollinfo: HTMLElement, cm: EditorView) => void;
     // The editor theme, e.g. "sparql"
     mode?: SupportedCodeEditorModes;
     // The initial value of the editor
     initialValue: string;
     // Called when the focus status changes
-    onFocusChange: (focused: boolean) => any;
+    onFocusChange: (focused: boolean) => void;
     // Called when the user presses a key
     onKeyDown: (event: KeyboardEvent) => boolean;
     // function invoked when any click occurs
     onMouseDown?: (view: EditorView) => void;
     // Called when the user selects text
-    onSelection: (ranges: IRange[]) => any;
+    onSelection: (ranges: IRange[]) => void;
     // 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;
     /** Placeholder to be shown when no text has been entered, yet. */
@@ -40,6 +40,27 @@ export interface ExtendedCodeEditorProps {
     showScrollBar?: boolean;
     /** allow multiline entries when new line characters are entered */
     multiline?: boolean;
+    /**
+     * Code editor props
+     */
+    codeEditorProps?: Omit<
+        CodeEditorProps,
+        | "defaultValue"
+        | "setEditorView"
+        | "onChange"
+        | "onCursorChange"
+        | "onFocusChange"
+        | "onKeyDown"
+        | "onSelection"
+        | "onMouseDown"
+        | "shouldHaveMinimalSetup"
+        | "preventLineNumbers"
+        | "mode"
+        | "name"
+        | "enableTab"
+        | "additionalExtensions"
+        | "outerDivAttributes"
+    >;
 }
 
 export type IEditorProps = ExtendedCodeEditorProps;
@@ -58,6 +79,7 @@ export const ExtendedCodeEditor = ({
     placeholder,
     onCursorChange,
     onSelection,
+    codeEditorProps,
 }: ExtendedCodeEditorProps) => {
     const initialContent = React.useRef(multiline ? initialValue : initialValue.replace(/[\r\n]/g, " "));
     const multilineExtensions = multiline
@@ -88,6 +110,7 @@ export const ExtendedCodeEditor = ({
                     multiline ? "codeeditor" : `singlelinecodeeditor ${BlueprintClassNames.INPUT}`
                 }`,
             }}
+            {...codeEditorProps}
         />
     );
 };

package/src/components/AutocompleteField/AutoCompleteField.tsx

@@ -301,13 +301,15 @@ function AutoCompleteField<T, UPDATE_VALUE>(props: AutoCompleteFieldProps<T, UPD
             let enableHighlighting = true;
             if (onlySelectItemReturned) {
                 // If the auto-completion only returns no suggestion or the selected item itself, query with empty string.
-                const emptyStringResults = await onSearch("");
+                const emptyStringResults: T[] = await onSearch("");
                 // Disable highlighting, since we used empty string search
                 enableHighlighting = false;
                 // Put selected item at the top if it is not in the result list
                 if (!!selectedItem && itemIndexOf(emptyStringResults, selectedItem) > -1) {
-                    emptyStringResults.splice(itemIndexOf(emptyStringResults, selectedItem), 1);
-                    result = [selectedItem, ...emptyStringResults];
+                    // Do not mutate original array
+                    const withoutSelected = [...emptyStringResults]
+                    withoutSelected.splice(itemIndexOf(emptyStringResults, selectedItem), 1);
+                    result = [selectedItem, ...withoutSelected];
                 } else {
                     result = emptyStringResults;
                 }