Merge pull request #218 from eccenca/feature/codemirror-upgrades-CMEM-5464

Enhance CodeEditor component by intent states and linter functionality

Author: haschek

CHANGELOG.md

@@ -64,6 +64,12 @@ This is a major release, and it might be not compatible with your current usage
     -   `htmlContentBlockProps` can now be used to configure the wrapper around the Markdown content
 -   `$eccgui-selector-text-spot-highlight` SCSS config variable to specify selector that is used to create shortly highlighted spots
     -   it is highlighted when the selector is also active local anchor target or if it has the `.eccgui-typography--spothighlight` class attached to it
+-   `<CodeEditor />`
+    -   implemented support for linting which is enabled via `useLinting` prop
+    -   `turtle` and `javascript` are currently supported languages for linting
+    -   editor is focused on load if `autoFocus` prop is set to `true`
+    -   implemented support for `disabled` state in code editor
+    -   implemented support for `intent` states in code editor
 
 ### Fixed
 

package.json

@@ -81,7 +81,9 @@
         "codemirror": "^6.0.1",
         "color": "^4.2.3",
         "compute-scroll-into-view": "^3.1.0",
+        "jshint": "^2.13.6",
         "lodash": "^4.17.21",
+        "n3": "^1.23.1",
         "re-resizable": "^6.10.1",
         "react": "^16.13.1",
         "react-dom": "^16.13.1",
@@ -126,7 +128,9 @@
         "@types/codemirror": "^5.60.15",
         "@types/color": "^3.0.6",
         "@types/jest": "^29.5.14",
+        "@types/jshint": "^2.12.4",
         "@types/lodash": "^4.17.13",
+        "@types/n3": "^1.21.1",
         "@types/react-syntax-highlighter": "^15.5.13",
         "@typescript-eslint/eslint-plugin": "^8.18.1",
         "@typescript-eslint/parser": "^8.18.1",

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

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}
         />
     );
 };

src/components/TextField/stories/TextField.stories.tsx

@@ -31,6 +31,7 @@ Default.args = {
     fullWidth: false,
     placeholder: "placeholder text",
     readOnly: false,
+    disabled: false,
 };
 
 /** Text field with default value that contains a zero width/invisible character.
@@ -46,7 +47,7 @@ const invisibleCharacterWarningProps: TextFieldProps = {
                 const codePointsString = [...Array.from(codePoints)]
                     .map((n) => {
                         const info = characters.invisibleZeroWidthCharacters.codePointMap.get(n);
-                        return info.fullLabel;
+                        return info?.fullLabel;
                     })
                     .join(", ");
                 alert("Invisible character detected in input string. Code points: " + codePointsString);

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,6 +13,9 @@ export default {
         onChange: {
             action: "value changed",
         },
+        intent: {
+            ...helpersArgTypes.exampleIntent,
+        },
     },
 } as Meta<typeof CodeEditor>;
 
@@ -22,3 +27,28 @@ BasicExample.args = {
     mode: "markdown",
     defaultValue: "**test me**",
 };
+
+export const LinterExample = TemplateFull.bind({});
+LinterExample.args = {
+    name: "codeinput",
+    defaultValue: "**test me**",
+    mode: "javascript",
+    useLinting: true,
+    autoFocus: true,
+};
+
+export const DisabledExample = TemplateFull.bind({});
+DisabledExample.args = {
+    name: "codeinput",
+    defaultValue: "**test me**",
+    mode: "javascript",
+    disabled: true,
+};
+
+export const IntentExample = TemplateFull.bind({});
+IntentExample.args = {
+    name: "codeinput",
+    defaultValue: "**test me**",
+    mode: "javascript",
+    intent: "warning",
+};