Add support for ACE linters (Python, JSON)

package.json

@@ -20,6 +20,8 @@
     "@rjsf/mui": "^5.12.1",
     "@rjsf/utils": "^5.12.1",
     "@rjsf/validator-ajv8": "^5.12.1",
+    "ace-linters": "^1.7.0",
+    "ace-python-ruff-linter": "^1.1.0",
     "diff": "^8.0.2",
     "flexlayout-react": "^0.8.1",
     "gh-pages": "^6.3.0",

public/ace-linter-worker.js

@@ -0,0 +1,18 @@
+// Web Worker for the ACE Editor support for linting
+// see IdeEditor.jsx
+import { ServiceManager } from "ace-linters/build/service-manager";
+
+const manager = new ServiceManager(self);
+
+manager.registerService("python", {
+    module: () => import("ace-python-ruff-linter/build/python-service"),
+    className: "PythonService",
+    modes: "python",
+});
+
+manager.registerService("json", {
+    features: {signatureHelp: false, documentHighlight: false},
+    module: () => import("ace-linters/build/json-service"),
+    className: "JsonService",
+    modes: "json",
+});

src/components/IdeEditor.jsx

@@ -10,6 +10,9 @@ import "ace-builds/src-noconflict/mode-python";
 import "ace-builds/src-noconflict/mode-json";
 import "ace-builds/src-noconflict/mode-markdown";
 import "ace-builds/src-noconflict/theme-tomorrow";
+import 'ace-builds/src-noconflict/snippets/python';
+import {LanguageProvider} from "ace-linters/build/ace-linters";
+
 // Layout
 import PopUp from "../utilComponents/PopUp";
 import { selectTabById } from "../layout/layoutUtils";
@@ -24,6 +27,12 @@ import * as FlexLayout from "flexlayout-react";
 // tab
 import TabTemplate from "../utilComponents/TabTemplate";
 
+const aceLinterWorker =  new Worker(new URL('/ace-linter-worker.js', import.meta.url), { type: 'module' })
+
+aceLinterWorker.onerror = (error) => {
+    console.error("Ace Linter Worker error:", error);
+}
+
 function generateRandomNumber(a) {
     // Calculate the range between a and a/4
     const min = a;
@@ -44,6 +53,7 @@ export default function IdeEditor({ node }) {
     const [fileEdited, setFileEdited] = useState(false);
     const [popped, setPopped] = useState(false);
     const [fileExists, setFileExists] = useState(true);
+
     // scheduled state checking
     useEffect(() => {
         const interval = setInterval(async () => {
@@ -75,6 +85,7 @@ export default function IdeEditor({ node }) {
     var mode = "text";
     if (fileHandle.name.toLowerCase().endsWith(".py")) {
         mode = "python";
+
     }
     if (fileHandle.name.toLowerCase().endsWith(".md")) {
         mode = "markdown";
@@ -231,6 +242,12 @@ export default function IdeEditor({ node }) {
             multiSelectAction: "forEach",
             scrollIntoView: "selectionPart",
         });
+
+        if (config.editor.linter) {
+            // Register the linter web worker with the ACE editor
+            const languageProvider = LanguageProvider.create(aceLinterWorker);
+            languageProvider.registerEditor(aceEditorRef.current.editor);
+        }
     }
 
     const title =

src/configs/editor.json

@@ -20,6 +20,11 @@
             "type": "string",
             "enum": ["auto", "unix", "windows"],
             "default": "auto"
+        },
+        "linter": {
+            "title": "Enable Linter",
+            "type": "boolean",
+            "default": false
         }
     }
 }

vite.config.js

@@ -24,6 +24,9 @@ export default defineConfig({
             '@mui/material/Tooltip' // or other MUI components
         ],
     },
+    worker: {
+        format: 'es',
+    },
     build: {
         outDir: "./docs",
     },