Bugfix/Parse JSON correctly (#5220)

* parse JSON correctly * add codeblock highlight
2026-06-22 07:01:07 +03:00 · 2025-09-18 19:18:50 +01:00
parent 011d60332e
commit cf6539cd3f
18 changed files with 283 additions and 69 deletions
@@ -8,8 +8,7 @@ import {
    IServerSideEventStreamer
 } from '../../../src/Interface'
 import axios, { AxiosRequestConfig } from 'axios'
-import { getCredentialData, getCredentialParam, processTemplateVariables } from '../../../src/utils'
-import JSON5 from 'json5'
+import { getCredentialData, getCredentialParam, processTemplateVariables, parseJsonBody } from '../../../src/utils'
 import { DataSource } from 'typeorm'
 import { BaseMessageLike } from '@langchain/core/messages'
 import { updateFlowState } from '../utils'
@@ -168,7 +167,7 @@ class ExecuteFlow_Agentflow implements INode {
        let overrideConfig = nodeData.inputs?.executeFlowOverrideConfig
        if (typeof overrideConfig === 'string' && overrideConfig.startsWith('{') && overrideConfig.endsWith('}')) {
            try {
-                overrideConfig = JSON5.parse(overrideConfig)
+                overrideConfig = parseJsonBody(overrideConfig)
            } catch (parseError) {
                throw new Error(`Invalid JSON in executeFlowOverrideConfig: ${parseError.message}`)
            }
@@ -2,9 +2,8 @@ import { ICommonObject, INode, INodeData, INodeParams } from '../../../src/Inter
 import { AxiosRequestConfig, Method, ResponseType } from 'axios'
 import FormData from 'form-data'
 import * as querystring from 'querystring'
-import { getCredentialData, getCredentialParam } from '../../../src/utils'
+import { getCredentialData, getCredentialParam, parseJsonBody } from '../../../src/utils'
 import { secureAxiosRequest } from '../../../src/httpSecurity'
-import JSON5 from 'json5'

 class HTTP_Agentflow implements INode {
    label: string
@@ -20,16 +19,6 @@ class HTTP_Agentflow implements INode {
    credential: INodeParams
    inputs: INodeParams[]

-    private parseJsonBody(body: string): any {
-        try {
-            return JSON5.parse(body)
-        } catch (error) {
-            throw new Error(
-                `Invalid JSON format in body. Original error: ${error.message}. Please ensure your JSON is properly formatted with quoted strings and valid escape sequences.`
-            )
-        }
-    }
-
    constructor() {
        this.label = 'HTTP'
        this.name = 'httpAgentflow'
@@ -285,7 +274,7 @@ class HTTP_Agentflow implements INode {
            if (method !== 'GET' && body) {
                switch (bodyType) {
                    case 'json': {
-                        requestConfig.data = typeof body === 'string' ? this.parseJsonBody(body) : body
+                        requestConfig.data = typeof body === 'string' ? parseJsonBody(body) : body
                        requestHeaders['Content-Type'] = 'application/json'
                        break
                    }
@@ -303,7 +292,7 @@ class HTTP_Agentflow implements INode {
                        break
                    }
                    case 'xWwwFormUrlencoded':
-                        requestConfig.data = querystring.stringify(typeof body === 'string' ? this.parseJsonBody(body) : body)
+                        requestConfig.data = querystring.stringify(typeof body === 'string' ? parseJsonBody(body) : body)
                        requestHeaders['Content-Type'] = 'application/x-www-form-urlencoded'
                        break
                }
@@ -1,5 +1,5 @@
 import { ICommonObject, INode, INodeData, INodeParams } from '../../../src/Interface'
-import JSON5 from 'json5'
+import { parseJsonBody } from '../../../src/utils'

 class Iteration_Agentflow implements INode {
    label: string
@@ -42,10 +42,10 @@ class Iteration_Agentflow implements INode {
        // Helper function to clean JSON strings with redundant backslashes
        const safeParseJson = (str: string): string => {
            try {
-                return JSON5.parse(str)
+                return parseJsonBody(str)
            } catch {
                // Try parsing after cleaning
-                return JSON5.parse(str.replace(/\\(["'[\]{}])/g, '$1'))
+                return parseJsonBody(str.replace(/\\(["'[\]{}])/g, '$1'))
            }
        }

@@ -1,10 +1,9 @@
 import { Tool } from '@langchain/core/tools'
 import { ICommonObject, IDatabaseEntity, INode, INodeData, INodeOptionsValue, INodeParams } from '../../../../src/Interface'
 import { MCPToolkit, validateMCPServerConfig } from '../core'
-import { getVars, prepareSandboxVars } from '../../../../src/utils'
+import { getVars, prepareSandboxVars, parseJsonBody } from '../../../../src/utils'
 import { DataSource } from 'typeorm'
 import hash from 'object-hash'
-import JSON5 from 'json5'

 const mcpServerConfig = `{
    "command": "npx",
@@ -270,7 +269,7 @@ function substituteVariablesInString(str: string, sandbox: any): string {

 function convertToValidJSONString(inputString: string) {
    try {
-        const jsObject = JSON5.parse(inputString)
+        const jsObject = parseJsonBody(inputString)
        return JSON.stringify(jsObject, null, 2)
    } catch (error) {
        console.error('Error converting to JSON:', error)
@@ -1,7 +1,6 @@
 import { INode, INodeData, INodeParams } from '../../../src/Interface'
-import { getBaseClasses, stripHTMLFromToolInput } from '../../../src/utils'
+import { getBaseClasses, stripHTMLFromToolInput, parseJsonBody } from '../../../src/utils'
 import { desc, RequestParameters, RequestsDeleteTool } from './core'
-import JSON5 from 'json5'

 const codeExample = `{
    "id": {
@@ -131,7 +130,7 @@ class RequestsDelete_Tools implements INode {
        if (queryParamsSchema) obj.queryParamsSchema = queryParamsSchema
        if (maxOutputLength) obj.maxOutputLength = parseInt(maxOutputLength, 10)
        if (headers) {
-            const parsedHeaders = typeof headers === 'object' ? headers : JSON5.parse(stripHTMLFromToolInput(headers))
+            const parsedHeaders = typeof headers === 'object' ? headers : parseJsonBody(stripHTMLFromToolInput(headers))
            obj.headers = parsedHeaders
        }

@@ -1,7 +1,7 @@
 import { z } from 'zod'
 import { DynamicStructuredTool } from '../OpenAPIToolkit/core'
 import { secureFetch } from '../../../src/httpSecurity'
-import JSON5 from 'json5'
+import { parseJsonBody } from '../../../src/utils'

 export const desc = `Use this when you need to execute a DELETE request to remove data from a website.`

@@ -23,7 +23,7 @@ const createRequestsDeleteSchema = (queryParamsSchema?: string) => {
    // If queryParamsSchema is provided, parse it and add dynamic query params
    if (queryParamsSchema) {
        try {
-            const parsedSchema = JSON5.parse(queryParamsSchema)
+            const parsedSchema = parseJsonBody(queryParamsSchema)
            const queryParamsObject: Record<string, z.ZodTypeAny> = {}

            Object.entries(parsedSchema).forEach(([key, config]: [string, any]) => {
@@ -109,7 +109,7 @@ export class RequestsDeleteTool extends DynamicStructuredTool {

        if (this.queryParamsSchema && params.queryParams && Object.keys(params.queryParams).length > 0) {
            try {
-                const parsedSchema = JSON5.parse(this.queryParamsSchema)
+                const parsedSchema = parseJsonBody(this.queryParamsSchema)
                const pathParams: Array<{ key: string; value: string }> = []

                Object.entries(params.queryParams).forEach(([key, value]) => {
@@ -1,7 +1,6 @@
 import { INode, INodeData, INodeParams } from '../../../src/Interface'
-import { getBaseClasses, stripHTMLFromToolInput } from '../../../src/utils'
+import { getBaseClasses, stripHTMLFromToolInput, parseJsonBody } from '../../../src/utils'
 import { desc, RequestParameters, RequestsGetTool } from './core'
-import JSON5 from 'json5'

 const codeExample = `{
    "id": {
@@ -131,7 +130,7 @@ class RequestsGet_Tools implements INode {
        if (queryParamsSchema) obj.queryParamsSchema = queryParamsSchema
        if (maxOutputLength) obj.maxOutputLength = parseInt(maxOutputLength, 10)
        if (headers) {
-            const parsedHeaders = typeof headers === 'object' ? headers : JSON5.parse(stripHTMLFromToolInput(headers))
+            const parsedHeaders = typeof headers === 'object' ? headers : parseJsonBody(stripHTMLFromToolInput(headers))
            obj.headers = parsedHeaders
        }

@@ -1,7 +1,7 @@
 import { z } from 'zod'
 import { DynamicStructuredTool } from '../OpenAPIToolkit/core'
 import { secureFetch } from '../../../src/httpSecurity'
-import JSON5 from 'json5'
+import { parseJsonBody } from '../../../src/utils'

 export const desc = `Use this when you need to execute a GET request to get data from a website.`

@@ -23,7 +23,7 @@ const createRequestsGetSchema = (queryParamsSchema?: string) => {
    // If queryParamsSchema is provided, parse it and add dynamic query params
    if (queryParamsSchema) {
        try {
-            const parsedSchema = JSON5.parse(queryParamsSchema)
+            const parsedSchema = parseJsonBody(queryParamsSchema)
            const queryParamsObject: Record<string, z.ZodTypeAny> = {}

            Object.entries(parsedSchema).forEach(([key, config]: [string, any]) => {
@@ -109,7 +109,7 @@ export class RequestsGetTool extends DynamicStructuredTool {

        if (this.queryParamsSchema && params.queryParams && Object.keys(params.queryParams).length > 0) {
            try {
-                const parsedSchema = JSON5.parse(this.queryParamsSchema)
+                const parsedSchema = parseJsonBody(this.queryParamsSchema)
                const pathParams: Array<{ key: string; value: string }> = []

                Object.entries(params.queryParams).forEach(([key, value]) => {
@@ -1,7 +1,6 @@
 import { INode, INodeData, INodeParams } from '../../../src/Interface'
-import { getBaseClasses, stripHTMLFromToolInput } from '../../../src/utils'
+import { getBaseClasses, stripHTMLFromToolInput, parseJsonBody } from '../../../src/utils'
 import { RequestParameters, desc, RequestsPostTool } from './core'
-import JSON5 from 'json5'

 const codeExample = `{
    "name": {
@@ -141,11 +140,11 @@ class RequestsPost_Tools implements INode {
        if (bodySchema) obj.bodySchema = stripHTMLFromToolInput(bodySchema)
        if (maxOutputLength) obj.maxOutputLength = parseInt(maxOutputLength, 10)
        if (headers) {
-            const parsedHeaders = typeof headers === 'object' ? headers : JSON5.parse(stripHTMLFromToolInput(headers))
+            const parsedHeaders = typeof headers === 'object' ? headers : parseJsonBody(stripHTMLFromToolInput(headers))
            obj.headers = parsedHeaders
        }
        if (body) {
-            const parsedBody = typeof body === 'object' ? body : JSON5.parse(body)
+            const parsedBody = typeof body === 'object' ? body : parseJsonBody(body)
            obj.body = parsedBody
        }

@@ -1,7 +1,7 @@
 import { z } from 'zod'
 import { DynamicStructuredTool } from '../OpenAPIToolkit/core'
 import { secureFetch } from '../../../src/httpSecurity'
-import JSON5 from 'json5'
+import { parseJsonBody } from '../../../src/utils'

 export const desc = `Use this when you want to execute a POST request to create or update a resource.`

@@ -28,7 +28,7 @@ const createRequestsPostSchema = (bodySchema?: string) => {
    // If bodySchema is provided, parse it and add dynamic body params
    if (bodySchema) {
        try {
-            const parsedSchema = JSON5.parse(bodySchema)
+            const parsedSchema = parseJsonBody(bodySchema)
            const bodyParamsObject: Record<string, z.ZodTypeAny> = {}

            Object.entries(parsedSchema).forEach(([key, config]: [string, any]) => {
@@ -1,7 +1,6 @@
 import { INode, INodeData, INodeParams } from '../../../src/Interface'
-import { getBaseClasses, stripHTMLFromToolInput } from '../../../src/utils'
+import { getBaseClasses, stripHTMLFromToolInput, parseJsonBody } from '../../../src/utils'
 import { RequestParameters, desc, RequestsPutTool } from './core'
-import JSON5 from 'json5'

 const codeExample = `{
    "name": {
@@ -141,11 +140,11 @@ class RequestsPut_Tools implements INode {
        if (bodySchema) obj.bodySchema = stripHTMLFromToolInput(bodySchema)
        if (maxOutputLength) obj.maxOutputLength = parseInt(maxOutputLength, 10)
        if (headers) {
-            const parsedHeaders = typeof headers === 'object' ? headers : JSON5.parse(stripHTMLFromToolInput(headers))
+            const parsedHeaders = typeof headers === 'object' ? headers : parseJsonBody(stripHTMLFromToolInput(headers))
            obj.headers = parsedHeaders
        }
        if (body) {
-            const parsedBody = typeof body === 'object' ? body : JSON5.parse(body)
+            const parsedBody = typeof body === 'object' ? body : parseJsonBody(body)
            obj.body = parsedBody
        }

@@ -1,7 +1,7 @@
 import { z } from 'zod'
 import { DynamicStructuredTool } from '../OpenAPIToolkit/core'
 import { secureFetch } from '../../../src/httpSecurity'
-import JSON5 from 'json5'
+import { parseJsonBody } from '../../../src/utils'

 export const desc = `Use this when you want to execute a PUT request to update or replace a resource.`

@@ -28,7 +28,7 @@ const createRequestsPutSchema = (bodySchema?: string) => {
    // If bodySchema is provided, parse it and add dynamic body params
    if (bodySchema) {
        try {
-            const parsedSchema = JSON5.parse(bodySchema)
+            const parsedSchema = parseJsonBody(bodySchema)
            const bodyParamsObject: Record<string, z.ZodTypeAny> = {}

            Object.entries(parsedSchema).forEach(([key, config]: [string, any]) => {
@@ -1408,7 +1408,7 @@ const parseOutput = (output: any): any => {
    // Check if it looks like JSON (starts with { or [)
    if ((trimmedOutput.startsWith('{') && trimmedOutput.endsWith('}')) || (trimmedOutput.startsWith('[') && trimmedOutput.endsWith(']'))) {
        try {
-            const parsedOutput = JSON5.parse(trimmedOutput)
+            const parsedOutput = parseJsonBody(trimmedOutput)
            return parsedOutput
        } catch (e) {
            return output
@@ -1659,3 +1659,71 @@ export const processTemplateVariables = (state: ICommonObject, finalOutput: any)

    return newState
 }
+
+/**
+ * Parse JSON body with comprehensive error handling and cleanup
+ * @param {string} body - The JSON string to parse
+ * @returns {any} - The parsed JSON object
+ * @throws {Error} - Detailed error message with suggestions for common JSON issues
+ */
+export const parseJsonBody = (body: string): any => {
+    try {
+        // First try to parse as-is with JSON5 (which handles more cases than standard JSON)
+        return JSON5.parse(body)
+    } catch (error) {
+        try {
+            // If that fails, try to clean up common issues
+            let cleanedBody = body
+
+            // 1. Remove unnecessary backslash escapes for square brackets and braces
+            // eslint-disable-next-line
+            cleanedBody = cleanedBody.replace(/\\(?=[\[\]{}])/g, '')
+
+            // 2. Fix single quotes to double quotes (but preserve quotes inside strings)
+            cleanedBody = cleanedBody.replace(/'/g, '"')
+
+            // 3. Remove trailing commas before closing brackets/braces
+            cleanedBody = cleanedBody.replace(/,(\s*[}\]])/g, '$1')
+
+            // 4. Remove comments (// and /* */)
+            cleanedBody = cleanedBody
+                .replace(/\/\/.*$/gm, '') // Remove single-line comments
+                .replace(/\/\*[\s\S]*?\*\//g, '') // Remove multi-line comments
+
+            return JSON5.parse(cleanedBody)
+        } catch (secondError) {
+            try {
+                // 3rd attempt: try with standard JSON.parse on original body
+                return JSON.parse(body)
+            } catch (thirdError) {
+                try {
+                    // 4th attempt: try with standard JSON.parse on cleaned body
+                    const finalCleanedBody = body
+                        // eslint-disable-next-line
+                        .replace(/\\(?=[\[\]{}])/g, '') // Basic escape cleanup
+                        .replace(/,(\s*[}\]])/g, '$1') // Remove trailing commas
+                        .trim()
+
+                    return JSON.parse(finalCleanedBody)
+                } catch (fourthError) {
+                    // Provide comprehensive error message with suggestions
+                    const suggestions = [
+                        '• Ensure all strings are enclosed in double quotes',
+                        '• Remove trailing commas',
+                        '• Remove comments (// or /* */)',
+                        '• Escape special characters properly (\\n for newlines, \\" for quotes)',
+                        '• Use double quotes instead of single quotes',
+                        '• Remove unnecessary backslashes before brackets [ ] { }'
+                    ]
+
+                    throw new Error(
+                        `Invalid JSON format in body. Original error: ${error.message}. ` +
+                            `After cleanup attempts: ${secondError.message}. 3rd attempt: ${thirdError.message}. Final attempt: ${fourthError.message}.\n\n` +
+                            `Common fixes:\n${suggestions.join('\n')}\n\n` +
+                            `Received body: ${body.substring(0, 200)}${body.length > 200 ? '...' : ''}`
+                    )
+                }
+            }
+        }
+    }
+}
@@ -26,6 +26,7 @@
        "@mui/x-tree-view": "^7.25.0",
        "@reduxjs/toolkit": "^2.2.7",
        "@tabler/icons-react": "^3.30.0",
+        "@tiptap/extension-code-block-lowlight": "^3.4.3",
        "@tiptap/extension-mention": "^2.11.5",
        "@tiptap/extension-placeholder": "^2.11.5",
        "@tiptap/pm": "^2.11.5",
@@ -46,6 +47,7 @@
        "history": "^5.0.0",
        "html-react-parser": "^3.0.4",
        "lodash": "^4.17.21",
+        "lowlight": "^3.3.0",
        "moment": "^2.29.3",
        "notistack": "^2.0.4",
        "prop-types": "^15.7.2",
@@ -132,6 +132,80 @@
            content: '\200B';
        }
    }
+
+    pre {
+        background: var(--code-bg, #2d2d2d) !important;
+        border-radius: 0.5rem;
+        color: var(--code-color, #d4d4d4) !important;
+        font-family: 'JetBrainsMono', 'Fira Code', 'Monaco', 'Cascadia Code', 'Roboto Mono', monospace;
+        margin: 1.5rem 0;
+        padding: 0.75rem 1rem;
+
+        code {
+            background: none !important;
+            color: inherit !important;
+            font-size: 0.8rem;
+            padding: 0;
+        }
+
+        /* Syntax highlighting matching the screenshot colors */
+        .hljs-comment,
+        .hljs-quote {
+            color: var(--hljs-comment, #6a9955) !important;
+        }
+
+        .hljs-variable,
+        .hljs-name {
+            color: var(--hljs-variable, #9cdcfe) !important; /* Light blue for variables */
+        }
+
+        .hljs-number,
+        .hljs-literal {
+            color: var(--hljs-number, #b5cea8) !important; /* Light green for numbers */
+        }
+
+        .hljs-string {
+            color: var(--hljs-string, #ce9178) !important; /* Orange/peach for strings */
+        }
+
+        .hljs-title,
+        .hljs-built_in,
+        .hljs-builtin-name {
+            color: var(--hljs-title, #dcdcaa) !important; /* Yellow for function names */
+        }
+
+        .hljs-keyword,
+        .hljs-selector-tag {
+            color: var(--hljs-keyword, #569cd6) !important; /* Blue for keywords */
+        }
+
+        /* Additional elements that should match the base text color */
+        .hljs-operator,
+        .hljs-punctuation,
+        .hljs-template-variable,
+        .hljs-attribute,
+        .hljs-tag,
+        .hljs-regexp,
+        .hljs-link,
+        .hljs-selector-id,
+        .hljs-selector-class,
+        .hljs-meta,
+        .hljs-type,
+        .hljs-params,
+        .hljs-symbol,
+        .hljs-bullet,
+        .hljs-section {
+            color: var(--code-color, #d4d4d4) !important; /* Default text color */
+        }
+
+        .hljs-emphasis {
+            font-style: italic;
+        }
+
+        .hljs-strong {
+            font-weight: 700;
+        }
+    }
 }

 .spin-animation {
@@ -1,6 +1,6 @@
 import { createPortal } from 'react-dom'
 import { useState, useEffect } from 'react'
-import { useDispatch } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 import PropTypes from 'prop-types'
 import PerfectScrollbar from 'react-perfect-scrollbar'

@@ -17,14 +17,18 @@ import Placeholder from '@tiptap/extension-placeholder'
 import { mergeAttributes } from '@tiptap/core'
 import StarterKit from '@tiptap/starter-kit'
 import Mention from '@tiptap/extension-mention'
+import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
+import { common, createLowlight } from 'lowlight'
 import { suggestionOptions } from '@/ui-component/input/suggestionOption'
 import { getAvailableNodesForVariable } from '@/utils/genericHelper'

+const lowlight = createLowlight(common)
+
 // Store
 import { HIDE_CANVAS_DIALOG, SHOW_CANVAS_DIALOG } from '@/store/actions'

 // Add styled component for editor wrapper
-const StyledEditorContent = styled(EditorContent)(({ theme, rows }) => ({
+const StyledEditorContent = styled(EditorContent)(({ theme, rows, disabled, isDarkMode }) => ({
    '& .ProseMirror': {
        padding: '0px 14px',
        height: rows ? `${rows * 1.4375}rem` : '2.4rem',
@@ -32,40 +36,48 @@ const StyledEditorContent = styled(EditorContent)(({ theme, rows }) => ({
        overflowX: rows ? 'auto' : 'hidden',
        lineHeight: rows ? '1.4375em' : '0.875em',
        fontWeight: 500,
-        color: theme.palette.grey[900],
-        border: `1px solid ${theme.palette.textBackground.border}`,
+        color: disabled ? theme.palette.action.disabled : theme.palette.grey[900],
+        border: `1px solid ${theme.palette.grey[900] + 25}`,
        borderRadius: '10px',
        backgroundColor: theme.palette.textBackground.main,
        boxSizing: 'border-box',
        whiteSpace: rows ? 'pre-wrap' : 'nowrap',
        '&:hover': {
-            borderColor: theme.palette.text.primary,
-            cursor: 'text'
+            borderColor: disabled ? `${theme.palette.grey[900] + 25}` : theme.palette.text.primary,
+            cursor: disabled ? 'default' : 'text'
        },
        '&:focus': {
-            borderColor: theme.palette.primary.main,
-            boxShadow: `0 0 0 0px ${theme.palette.primary.main}`,
+            borderColor: disabled ? `${theme.palette.grey[900] + 25}` : theme.palette.primary.main,
            outline: 'none'
        },
-        '&[disabled]': {
-            backgroundColor: theme.palette.action.disabledBackground,
-            color: theme.palette.action.disabled
-        },
        // Placeholder for first paragraph when editor is empty
        '& p.is-editor-empty:first-of-type::before': {
            content: 'attr(data-placeholder)',
            float: 'left',
-            color: theme.palette.text.primary,
-            opacity: 0.4,
+            color: disabled ? theme.palette.action.disabled : theme.palette.text.primary,
+            opacity: disabled ? 0.6 : 0.4,
            pointerEvents: 'none',
            height: 0
-        }
+        },
+        // Set CSS custom properties for theme-aware styling based on the screenshot
+        '--code-bg': isDarkMode ? '#2d2d2d' : '#f5f5f5',
+        '--code-color': isDarkMode ? '#d4d4d4' : '#333333',
+        '--hljs-comment': isDarkMode ? '#6a9955' : '#6a9955',
+        '--hljs-variable': isDarkMode ? '#9cdcfe' : '#d73a49', // Light blue for variables (var, i)
+        '--hljs-number': isDarkMode ? '#b5cea8' : '#e36209', // Light green for numbers (1, 20, 15, etc.)
+        '--hljs-string': isDarkMode ? '#ce9178' : '#22863a', // Orange/peach for strings ("FizzBuzz", "Fizz", "Buzz")
+        '--hljs-title': isDarkMode ? '#dcdcaa' : '#6f42c1', // Yellow for function names (log)
+        '--hljs-keyword': isDarkMode ? '#569cd6' : '#005cc5', // Blue for keywords (for, if, else)
+        '--hljs-operator': isDarkMode ? '#d4d4d4' : '#333333', // White/gray for operators (=, %, ==, etc.)
+        '--hljs-punctuation': isDarkMode ? '#d4d4d4' : '#333333' // White/gray for punctuation ({, }, ;, etc.)
    }
 }))

 // define your extension array
 const extensions = (availableNodesForVariable, availableState, acceptNodeOutputAsVariable, nodes, nodeData, isNodeInsideInteration) => [
-    StarterKit,
+    StarterKit.configure({
+        codeBlock: false
+    }),
    Mention.configure({
        HTMLAttributes: {
            class: 'variable'
@@ -86,6 +98,11 @@ const extensions = (availableNodesForVariable, availableState, acceptNodeOutputA
            isNodeInsideInteration
        ),
        deleteTriggerWithBackspace: true
+    }),
+    CodeBlockLowlight.configure({
+        lowlight,
+        enableTabIndentation: true,
+        tabSize: 2
    })
 ]

@@ -93,6 +110,8 @@ const ExpandRichInputDialog = ({ show, dialogProps, onCancel, onInputHintDialogC
    const portalElement = document.getElementById('portal')

    const dispatch = useDispatch()
+    const customization = useSelector((state) => state.customization)
+    const isDarkMode = customization.isDarkMode

    const [inputValue, setInputValue] = useState('')
    const [inputParam, setInputParam] = useState(null)
@@ -201,7 +220,12 @@ const ExpandRichInputDialog = ({ show, dialogProps, onCancel, onInputHintDialogC
                                }}
                            >
                                <Box sx={{ mt: 1, border: '' }}>
-                                    <StyledEditorContent editor={editor} rows={15} />
+                                    <StyledEditorContent
+                                        editor={editor}
+                                        rows={15}
+                                        disabled={dialogProps.disabled}
+                                        isDarkMode={isDarkMode}
+                                    />
                                </Box>
                            </PerfectScrollbar>
                        </div>
@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react'
 import PropTypes from 'prop-types'
+import { useSelector } from 'react-redux'
 import { useEditor, EditorContent } from '@tiptap/react'
 import Placeholder from '@tiptap/extension-placeholder'
 import { mergeAttributes } from '@tiptap/core'
@@ -7,12 +8,18 @@ import StarterKit from '@tiptap/starter-kit'
 import { styled } from '@mui/material/styles'
 import { Box } from '@mui/material'
 import Mention from '@tiptap/extension-mention'
+import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
+import { common, createLowlight } from 'lowlight'
 import { suggestionOptions } from './suggestionOption'
 import { getAvailableNodesForVariable } from '@/utils/genericHelper'

+const lowlight = createLowlight(common)
+
 // define your extension array
 const extensions = (availableNodesForVariable, availableState, acceptNodeOutputAsVariable, nodes, nodeData, isNodeInsideInteration) => [
-    StarterKit,
+    StarterKit.configure({
+        codeBlock: false
+    }),
    Mention.configure({
        HTMLAttributes: {
            class: 'variable'
@@ -33,11 +40,16 @@ const extensions = (availableNodesForVariable, availableState, acceptNodeOutputA
            isNodeInsideInteration
        ),
        deleteTriggerWithBackspace: true
+    }),
+    CodeBlockLowlight.configure({
+        lowlight,
+        enableTabIndentation: true,
+        tabSize: 2
    })
 ]

 // Add styled component for editor wrapper
-const StyledEditorContent = styled(EditorContent)(({ theme, rows, disabled }) => ({
+const StyledEditorContent = styled(EditorContent)(({ theme, rows, disabled, isDarkMode }) => ({
    '& .ProseMirror': {
        padding: '0px 14px',
        height: rows ? `${rows * 1.4375}rem` : '2.4rem',
@@ -67,11 +79,24 @@ const StyledEditorContent = styled(EditorContent)(({ theme, rows, disabled }) =>
            opacity: disabled ? 0.6 : 0.4,
            pointerEvents: 'none',
            height: 0
-        }
+        },
+        // Set CSS custom properties for theme-aware styling based on the screenshot
+        '--code-bg': isDarkMode ? '#2d2d2d' : '#f5f5f5',
+        '--code-color': isDarkMode ? '#d4d4d4' : '#333333',
+        '--hljs-comment': isDarkMode ? '#6a9955' : '#6a9955',
+        '--hljs-variable': isDarkMode ? '#9cdcfe' : '#d73a49', // Light blue for variables (var, i)
+        '--hljs-number': isDarkMode ? '#b5cea8' : '#e36209', // Light green for numbers (1, 20, 15, etc.)
+        '--hljs-string': isDarkMode ? '#ce9178' : '#22863a', // Orange/peach for strings ("FizzBuzz", "Fizz", "Buzz")
+        '--hljs-title': isDarkMode ? '#dcdcaa' : '#6f42c1', // Yellow for function names (log)
+        '--hljs-keyword': isDarkMode ? '#569cd6' : '#005cc5', // Blue for keywords (for, if, else)
+        '--hljs-operator': isDarkMode ? '#d4d4d4' : '#333333', // White/gray for operators (=, %, ==, etc.)
+        '--hljs-punctuation': isDarkMode ? '#d4d4d4' : '#333333' // White/gray for punctuation ({, }, ;, etc.)
    }
 }))

 export const RichInput = ({ inputParam, value, nodes, edges, nodeId, onChange, disabled = false }) => {
+    const customization = useSelector((state) => state.customization)
+    const isDarkMode = customization.isDarkMode
    const [availableNodesForVariable, setAvailableNodesForVariable] = useState([])
    const [availableState, setAvailableState] = useState([])
    const [nodeData, setNodeData] = useState({})
@@ -117,7 +142,7 @@ export const RichInput = ({ inputParam, value, nodes, edges, nodeId, onChange, d

    return (
        <Box sx={{ mt: 1, border: '' }}>
-            <StyledEditorContent editor={editor} rows={inputParam?.rows} disabled={disabled} />
+            <StyledEditorContent editor={editor} rows={inputParam?.rows} disabled={disabled} isDarkMode={isDarkMode} />
        </Box>
    )
 }
@@ -977,6 +977,9 @@ importers:
            '@tabler/icons-react':
                specifier: ^3.30.0
                version: 3.31.0(react@18.2.0)
+            '@tiptap/extension-code-block-lowlight':
+                specifier: ^3.4.3
+                version: 3.4.3(@tiptap/core@2.12.0(@tiptap/pm@2.12.0))(@tiptap/extension-code-block@2.12.0(@tiptap/core@2.12.0(@tiptap/pm@2.12.0))(@tiptap/pm@2.12.0))(@tiptap/pm@2.12.0)(highlight.js@11.11.1)(lowlight@3.3.0)
            '@tiptap/extension-mention':
                specifier: ^2.11.5
                version: 2.12.0(@tiptap/core@2.12.0(@tiptap/pm@2.12.0))(@tiptap/pm@2.12.0)(@tiptap/suggestion@2.12.0(@tiptap/core@2.12.0(@tiptap/pm@2.12.0))(@tiptap/pm@2.12.0))
@@ -1037,6 +1040,9 @@ importers:
            lodash:
                specifier: ^4.17.21
                version: 4.17.21
+            lowlight:
+                specifier: ^3.3.0
+                version: 3.3.0
            moment:
                specifier: ^2.29.3
                version: 2.30.1
@@ -7135,6 +7141,15 @@ packages:
        peerDependencies:
            '@tiptap/core': ^2.7.0

+    '@tiptap/extension-code-block-lowlight@3.4.3':
+        resolution: { integrity: sha512-d3vEhv2cLDdWL2unqRkF0LkGEDEm/pJCWZwSjqzYFe3vrTEsTExorpwZoVV8i9uX/DPG4AdM+mf3hLK9L5FZoA== }
+        peerDependencies:
+            '@tiptap/core': ^3.4.3
+            '@tiptap/extension-code-block': ^3.4.3
+            '@tiptap/pm': ^3.4.3
+            highlight.js: ^11
+            lowlight: ^2 || ^3
+
    '@tiptap/extension-code-block@2.12.0':
        resolution: { integrity: sha512-1D7cYAjgxEFHdfC/35Ooi4GqWKB5sszbW8iI7N16XILNln26xb0d5KflXqYrwr9CN/ZnZoCl2o6YsP7xEObcZA== }
        peerDependencies:
@@ -11595,6 +11610,10 @@ packages:
    highlight.js@10.7.3:
        resolution: { integrity: sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A== }

+    highlight.js@11.11.1:
+        resolution: { integrity: sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w== }
+        engines: { node: '>=12.0.0' }
+
    history@5.3.0:
        resolution: { integrity: sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ== }

@@ -13090,6 +13109,9 @@ packages:
    lowlight@1.20.0:
        resolution: { integrity: sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw== }

+    lowlight@3.3.0:
+        resolution: { integrity: sha512-0JNhgFoPvP6U6lE/UdVsSq99tn6DhjjpAj5MxG49ewd2mOBVtwWYIT8ClyABhq198aXXODMU6Ox8DrGy/CpTZQ== }
+
    lru-cache@10.2.0:
        resolution: { integrity: sha512-2bIM8x+VAf6JT4bKAljS1qUWgMsqZRPGJS6FSahIMPVvctcNhyVp7AJu7quxOW9jwkryBReKZY5tY5JYv2n/7Q== }
        engines: { node: 14 || >=16.14 }
@@ -27410,6 +27432,14 @@ snapshots:
        dependencies:
            '@tiptap/core': 2.12.0(@tiptap/pm@2.12.0)

+    '@tiptap/extension-code-block-lowlight@3.4.3(@tiptap/core@2.12.0(@tiptap/pm@2.12.0))(@tiptap/extension-code-block@2.12.0(@tiptap/core@2.12.0(@tiptap/pm@2.12.0))(@tiptap/pm@2.12.0))(@tiptap/pm@2.12.0)(highlight.js@11.11.1)(lowlight@3.3.0)':
+        dependencies:
+            '@tiptap/core': 2.12.0(@tiptap/pm@2.12.0)
+            '@tiptap/extension-code-block': 2.12.0(@tiptap/core@2.12.0(@tiptap/pm@2.12.0))(@tiptap/pm@2.12.0)
+            '@tiptap/pm': 2.12.0
+            highlight.js: 11.11.1
+            lowlight: 3.3.0
+
    '@tiptap/extension-code-block@2.12.0(@tiptap/core@2.12.0(@tiptap/pm@2.12.0))(@tiptap/pm@2.12.0)':
        dependencies:
            '@tiptap/core': 2.12.0(@tiptap/pm@2.12.0)
@@ -33109,6 +33139,8 @@ snapshots:

    highlight.js@10.7.3: {}

+    highlight.js@11.11.1: {}
+
    history@5.3.0:
        dependencies:
            '@babel/runtime': 7.24.0
@@ -35299,6 +35331,12 @@ snapshots:
            fault: 1.0.4
            highlight.js: 10.7.3

+    lowlight@3.3.0:
+        dependencies:
+            '@types/hast': 3.0.4
+            devlop: 1.1.0
+            highlight.js: 11.11.1
+
    lru-cache@10.2.0: {}

    lru-cache@4.1.5: