@adcops/autocore-react 3.3.9 → 3.3.10

package/src/components/CodeEditor.tsx

@@ -1,156 +1,156 @@
-/*
- * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
- * Created Date: 2024-03-17 08:43:02
- * -----
- * Last Modified: 2025-09-05 14:52:18
- * -----
- * 
- */
-
-
-
-import * as React from 'react';
-import { editor } from 'monaco-editor';
-//import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
-import Editor, { type Monaco } from '@monaco-editor/react';
-
-
-interface CodeEditorProps {
-
-    /** 
-     * Code content of the editor 
-     */
-    code: string | undefined;
-
-    /** 
-     * Programming language type for syntax highlighting 
-     * @default 'python'
-     */
-    language : string;
-
-    /** 
-     * Visual theme of the editor. vs-dark is generally preferred. 
-     * @default 'vs-dark'
-     */
-    theme : 'vs-dark' | 'vs-light';
-
-    /** 
-     * Whether the editor is read only 
-     * @default false
-     */
-    readOnly: boolean;
-
-    /** 
-     * Style of the cursor in the editor. 
-     * @default 'line'
-     */
-    cursorStyle: "line" | "block" | "underline" | "line-thin" | "block-outline" | "underline-thin" | undefined;
-
-
-    /** Callback when the user types chances into the editor. */
-    onCodeChanged?(code: string | undefined): void;
-}
-
-
-/**
- * Wrapper for the Microsoft Monaco editor, configured for our most common defaults.
- */
-export class CodeEditor extends React.Component<CodeEditorProps> {
-
-
-    /**
-     * Default properties for this component.
-     */
-    static defaultProps = {
-        code: undefined,
-        language : 'python',
-        theme : 'vs-dark',
-        readOnly: false,
-        cursorStyle: "line",
-        onCodeChanged : undefined
-    }
-
-    /**
-     * Constructor
-     * @param props PythonEditorProps
-     */
-    constructor(props: CodeEditorProps) {
-        super(props);
-    }
-
-
-    /**
-     * The editor is initialized and displayed in the view.
-     * @param editor 
-     * @param monaco 
-     */
-    editorDidMount = (editor: editor.IStandaloneCodeEditor, monaco: Monaco) => {
-        monaco;
-        editor.focus();
-    };
-
-    /**
-     * The editor is about to mount into the view.
-     * @param monaco Instance of the editor.
-     */
-    handleEditorWillMount = (monaco: Monaco) => {
-        monaco;
-    }
-
-
-    /**
-     * Handle changes to the editor's contents.
-     * @param newValue New value of editor content.
-     * @param e 
-     */
-    onChange = (newValue: string | undefined, e: any) => {
-        e;
-
-        if (this.props.onCodeChanged !== undefined && this.props.onCodeChanged !== null)
-            this.props.onCodeChanged(newValue);
-    };
-
-
-    handleEditorValidation = (markers: editor.IMarker[]) => {
-        // model markers
-        markers.forEach(marker => console.log('onValidate:', marker.message));
-    }
-
-
-    /**
-     * Render the component into the view.
-     * @returns 
-     */
-    render() {
-        const options: editor.IStandaloneEditorConstructionOptions = {
-            selectOnLineNumbers: true,
-            roundedSelection: false,
-            readOnly: this.props.readOnly,
-            cursorStyle: this.props.cursorStyle,
-            automaticLayout: true,
-            theme: this.props.theme,
-            language: this.props.language,
-            folding: false,
-
-
-        };
-
-        return (
-            <Editor
-                value={this.props.code}
-                height="100%"
-                width="100%"
-                defaultLanguage="python"
-                defaultValue=""
-                onChange={this.onChange}
-                onMount={this.editorDidMount}
-                beforeMount={this.handleEditorWillMount}
-                onValidate={this.handleEditorValidation}
-                theme='vs-dark'
-                options={options}
-            />
-        );
-    }
-}
-
+/*
+ * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
+ * Created Date: 2024-03-17 08:43:02
+ * -----
+ * Last Modified: 2025-09-05 14:52:18
+ * -----
+ * 
+ */
+
+
+
+import * as React from 'react';
+import { editor } from 'monaco-editor';
+//import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
+import Editor, { type Monaco } from '@monaco-editor/react';
+
+
+interface CodeEditorProps {
+
+    /** 
+     * Code content of the editor 
+     */
+    code: string | undefined;
+
+    /** 
+     * Programming language type for syntax highlighting 
+     * @default 'python'
+     */
+    language : string;
+
+    /** 
+     * Visual theme of the editor. vs-dark is generally preferred. 
+     * @default 'vs-dark'
+     */
+    theme : 'vs-dark' | 'vs-light';
+
+    /** 
+     * Whether the editor is read only 
+     * @default false
+     */
+    readOnly: boolean;
+
+    /** 
+     * Style of the cursor in the editor. 
+     * @default 'line'
+     */
+    cursorStyle: "line" | "block" | "underline" | "line-thin" | "block-outline" | "underline-thin" | undefined;
+
+
+    /** Callback when the user types chances into the editor. */
+    onCodeChanged?(code: string | undefined): void;
+}
+
+
+/**
+ * Wrapper for the Microsoft Monaco editor, configured for our most common defaults.
+ */
+export class CodeEditor extends React.Component<CodeEditorProps> {
+
+
+    /**
+     * Default properties for this component.
+     */
+    static defaultProps = {
+        code: undefined,
+        language : 'python',
+        theme : 'vs-dark',
+        readOnly: false,
+        cursorStyle: "line",
+        onCodeChanged : undefined
+    }
+
+    /**
+     * Constructor
+     * @param props PythonEditorProps
+     */
+    constructor(props: CodeEditorProps) {
+        super(props);
+    }
+
+
+    /**
+     * The editor is initialized and displayed in the view.
+     * @param editor 
+     * @param monaco 
+     */
+    editorDidMount = (editor: editor.IStandaloneCodeEditor, monaco: Monaco) => {
+        monaco;
+        editor.focus();
+    };
+
+    /**
+     * The editor is about to mount into the view.
+     * @param monaco Instance of the editor.
+     */
+    handleEditorWillMount = (monaco: Monaco) => {
+        monaco;
+    }
+
+
+    /**
+     * Handle changes to the editor's contents.
+     * @param newValue New value of editor content.
+     * @param e 
+     */
+    onChange = (newValue: string | undefined, e: any) => {
+        e;
+
+        if (this.props.onCodeChanged !== undefined && this.props.onCodeChanged !== null)
+            this.props.onCodeChanged(newValue);
+    };
+
+
+    handleEditorValidation = (markers: editor.IMarker[]) => {
+        // model markers
+        markers.forEach(marker => console.log('onValidate:', marker.message));
+    }
+
+
+    /**
+     * Render the component into the view.
+     * @returns 
+     */
+    render() {
+        const options: editor.IStandaloneEditorConstructionOptions = {
+            selectOnLineNumbers: true,
+            roundedSelection: false,
+            readOnly: this.props.readOnly,
+            cursorStyle: this.props.cursorStyle,
+            automaticLayout: true,
+            theme: this.props.theme,
+            language: this.props.language,
+            folding: false,
+
+
+        };
+
+        return (
+            <Editor
+                value={this.props.code}
+                height="100%"
+                width="100%"
+                defaultLanguage="python"
+                defaultValue=""
+                onChange={this.onChange}
+                onMount={this.editorDidMount}
+                beforeMount={this.handleEditorWillMount}
+                onValidate={this.handleEditorValidation}
+                theme='vs-dark'
+                options={options}
+            />
+        );
+    }
+}
+
 export default CodeEditor;