farcasclaudiu/Flowise
1
0
Fork 0
mirror of https://github.com/farcasclaudiu/Flowise.git synced 2026-06-28 17:01:00 +03:00
Code Issues Packages Projects Releases Wiki Activity

Bugfix/Parse JSON correctly (#5220)

Browse Source 
* parse JSON correctly

* add codeblock highlight
This commit is contained in:
Henry Heng
2025-09-18 19:18:50 +01:00
committed by GitHub
parent 011d60332e
commit cf6539cd3f
18 changed files with 283 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/package.json
+2
View File
@@ -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",
packages/ui/src/assets/scss/style.scss
+74
View File
@@ -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 {
packages/ui/src/ui-component/dialog/ExpandRichInputDialog.jsx
+41 -17
View File
@@ -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>
packages/ui/src/ui-component/input/RichInput.jsx
+29 -4
View File
@@ -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>
)
}