Merge pull request #3 from mozhaa/syntax-highlighting

feat: syntax highlighting

Author: mozhaa

README.md

@@ -5,6 +5,10 @@ A single node for executing arbitrary Python code with arbitrary inputs of any t
 ![output_new_min_best](https://github.com/user-attachments/assets/517ad407-8bee-4424-b5ab-ed11f7c34c18)
 <img width="1196" height="797" alt="image" src="https://github.com/user-attachments/assets/aa3216de-8a2f-4170-be5c-36b12c2f5620" />
 
+### UPD: syntax highlighting
+<img width="1487" height="839" alt="Screenshot_20260407_104048" src="https://github.com/user-attachments/assets/20de1e1b-306c-4ba2-bacf-407efd2e3346" />
+<img width="1044" height="629" alt="Screenshot_20260407_104547" src="https://github.com/user-attachments/assets/8e86c8b9-5616-4e0f-a729-cb9e67a4e301" />
+
 ## Installation
 Choose one of these options:
 1. **Install via ComfyUI-Manager** (search for "Execute Python")

js/execute_python.js

@@ -1,5 +1,84 @@
 import { app } from "../../scripts/app.js";
 
+let aceLoaded = null;
+function loadAce() {
+    if (window.ace) return Promise.resolve();
+    if (aceLoaded) return aceLoaded;
+    aceLoaded = new Promise((resolve, reject) => {
+        const script = document.createElement('script');
+        script.src = 'https://cdnjs.cloudflare.com/ajax/libs/ace/1.36.5/ace.js';
+        script.onload = resolve;
+        script.onerror = reject;
+        document.head.appendChild(script);
+    });
+    return aceLoaded;
+}
+
+function updateAllExecutePythonNodes() {
+    const allNodes = app.graph?._nodes || app.canvas?.nodes || [];
+    for (const node of allNodes) {
+        if (node.type && node.type.startsWith("ExecutePython")) {
+            upgradeCodeWidget(node).catch(console.warn);
+        }
+    }
+}
+
+async function upgradeCodeWidget(node) {
+    const enableHighlighting = app.extensionManager.setting.get('ExecutePython.enableHighlighting')
+    const showLineNumbers = app.extensionManager.setting.get('ExecutePython.showLineNumbers')
+    const theme = app.extensionManager.setting.get('ExecutePython.theme')
+    
+    const codeWidget = node.widgets?.find(w => w.name === 'code');
+    if (!codeWidget) return;
+    const textarea = codeWidget.element;
+    if (!textarea) return;
+
+    if (textarea.aceEditor) {
+        textarea.aceEditor.destroy();
+        delete textarea.aceEditor;
+    }
+    if (textarea.nextSibling && textarea.nextSibling.classList?.contains('ace_editor')) {
+        textarea.nextSibling.remove();
+    }
+    const parent = textarea.parentNode;
+    const existingAce = parent.querySelector('.ace_editor');
+    if (existingAce) existingAce.remove();
+
+    textarea.style.display = '';
+
+    if (!enableHighlighting) {
+        return;
+    }
+
+    await loadAce();
+
+    textarea.style.display = 'none';
+    const container = document.createElement('div');
+    container.style.width = '100%';
+    container.style.height = '100%';
+    container.style.flex = '1 1 0';
+    textarea.parentNode.insertBefore(container, textarea.nextSibling);
+
+    const editor = ace.edit(container);
+    editor.setTheme(`ace/theme/${theme}`);
+    editor.session.setMode('ace/mode/python');
+    editor.setOptions({
+        showPrintMargin: false,
+        showLineNumbers: showLineNumbers,
+        showGutter: showLineNumbers,
+        wrap: true
+    });
+    editor.setValue(textarea.value, -1);
+
+    editor.session.on('change', () => {
+        textarea.value = editor.getValue();
+        textarea.dispatchEvent(new Event('input', { bubbles: true }));
+    });
+
+    textarea.aceEditor = editor;
+    editor.resize();
+}
+
 function reconcileDynamicInputs(node) {
     const inputs = node.inputs || [];
 
@@ -57,6 +136,46 @@ function reconcileOutputs(node) {
 
 app.registerExtension({
     name: "Comfy.ExecutePythonDynamicIO",
+    settings: [
+        {
+            id: "ExecutePython.enableHighlighting",
+            name: "Enable syntax highlighting for ExecutePython node",
+            type: "boolean",
+            defaultValue: true,
+            onChange: () => {
+                setTimeout(() => updateAllExecutePythonNodes(), 100)
+            }
+        },
+        {
+            id: "ExecutePython.showLineNumbers",
+            name: "Show line numbers in ExecutePython node",
+            type: "boolean",
+            defaultValue: false,
+            onChange: () => {
+                setTimeout(() => updateAllExecutePythonNodes(), 100)
+            }
+        },
+        {
+            id: "ExecutePython.theme",
+            name: "ExecutePython Editor Theme",
+            type: "combo",
+            defaultValue: "monokai",
+            options: [
+                { text: "Chrome (Light)", value: "chrome" },
+                { text: "Monokai (Dark)", value: "monokai" },
+                { text: "Twilight (Dark)", value: "twilight" },
+                { text: "GitHub (Light)", value: "github" },
+                { text: "Xcode (Light)", value: "xcode" },
+                { text: "Eclipse (Light)", value: "eclipse" },
+                { text: "Terminal (Dark)", value: "terminal" },
+                { text: "Solarized Light", value: "solarized_light" },
+                { text: "Solarized Dark", value: "solarized_dark" }
+            ],
+            onChange: () => {
+                setTimeout(() => updateAllExecutePythonNodes(), 100)
+            }
+        }
+    ],
     async beforeRegisterNodeDef(nodeType, nodeData, app) {
         if (!nodeData.name.startsWith("ExecutePython")) return;
 
@@ -67,7 +186,11 @@ app.registerExtension({
         nodeType.prototype.onNodeCreated = function () {
             const result = origOnNodeCreated?.apply(this, arguments);
 
-            setTimeout(() => reconcileDynamicInputs(this), 100);
+            setTimeout(() => {
+                reconcileDynamicInputs(this);
+                reconcileOutputs(this);
+                upgradeCodeWidget(this);
+            }, 100);
 
             const outputCountWidget = this.widgets?.find(w => w.name === 'n_outputs');
             if (outputCountWidget) {
@@ -82,6 +205,7 @@ app.registerExtension({
             const result = origOnNodeLoaded?.apply(this, arguments);
             reconcileDynamicInputs(this);
             reconcileOutputs(this);
+            upgradeCodeWidget(this);
             return result;
         };
 

pyproject.toml

@@ -1,7 +1,7 @@
 [project]
 name = "execute-python"
 description = "A single ComfyUI node for executing arbitrary Python code with arbitrary inputs of any types."
-version = "2.0.0"
+version = "2.1.0"
 license = {file = "LICENSE"} 
 classifiers = [
     "Operating System :: OS Independent",