diff --git a/web/src/components/Markdown/index.tsx b/web/src/components/Markdown/index.tsx index 6b9dc12a..10cf177b 100644 --- a/web/src/components/Markdown/index.tsx +++ b/web/src/components/Markdown/index.tsx @@ -2,7 +2,7 @@ * @Author: ZhaoYing * @Date: 2026-02-02 15:17:31 * @Last Modified by: ZhaoYing - * @Last Modified time: 2026-04-02 16:06:03 + * @Last Modified time: 2026-04-07 15:14:02 */ /** * RbMarkdown Component @@ -97,10 +97,6 @@ const buildComponents = (onFormSubmit?: (values: Record) => void) = const ctx = useContext(FormContext) return ctx?.onSubmit?.(ctx.values)}>{[children]} }, - table: ({ children, ...props }: any) =>
{children}
, - tr: ({ children, ...props }: any) => {children}, - th: ({ children, ...props }: any) => {children}, - td: ({ children, ...props }: any) => {children}, input: ({ children, ...props }: any) => { const ctx = useContext(FormContext) const handleChange = useCallback((val: any) => { diff --git a/web/src/views/Workflow/components/Editor/Jinja2Editor.tsx b/web/src/views/Workflow/components/Editor/Jinja2Editor.tsx index 0ee795ba..9a21a3b2 100644 --- a/web/src/views/Workflow/components/Editor/Jinja2Editor.tsx +++ b/web/src/views/Workflow/components/Editor/Jinja2Editor.tsx @@ -1,8 +1,8 @@ /* * @Author: ZhaoYing * @Date: 2026-04-02 15:15:36 - * @Last Modified by: ZhaoYing - * @Last Modified time: 2026-04-02 15:15:36 + * @Last Modified by: ZhaoYing + * @Last Modified time: 2026-04-07 14:48:00 */ import { type FC, useEffect, useMemo } from 'react'; import { LexicalComposer } from '@lexical/react/LexicalComposer'; @@ -12,7 +12,7 @@ import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin'; import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary'; import { type Suggestion } from './plugin/AutocompletePlugin'; -import CharacterCountPlugin from './plugin/CharacterCountPlugin'; +import Jinjia2CharacterCountPlugin from './plugin/Jinjia2CharacterCountPlugin'; import Jinja2InitialValuePlugin from './plugin/Jinja2InitialValuePlugin'; import Jinja2AutocompletePlugin from './plugin/Jinja2AutocompletePlugin'; import Jinja2HighlightPlugin from './plugin/Jinja2HighlightPlugin'; @@ -89,7 +89,7 @@ export interface Jinja2EditorProps { const Jinja2Editor: FC = ({ placeholder = '请输入内容...', - value = '', + value, onChange, options = [], variant = 'borderless', @@ -174,8 +174,8 @@ const Jinja2Editor: FC = ({ - {}} onChange={onChange} waitForInit /> - + {}} /> + diff --git a/web/src/views/Workflow/components/Editor/plugin/Jinja2AutocompletePlugin.tsx b/web/src/views/Workflow/components/Editor/plugin/Jinja2AutocompletePlugin.tsx index 00b4c3d1..86e8fa45 100644 --- a/web/src/views/Workflow/components/Editor/plugin/Jinja2AutocompletePlugin.tsx +++ b/web/src/views/Workflow/components/Editor/plugin/Jinja2AutocompletePlugin.tsx @@ -1,8 +1,8 @@ /* * @Author: ZhaoYing * @Date: 2026-04-02 17:10:59 - * @Last Modified by: ZhaoYing - * @Last Modified time: 2026-04-02 17:10:59 + * @Last Modified by: ZhaoYing + * @Last Modified time: 2026-04-07 14:50:14 */ import { useEffect, useState, useRef, type FC } from 'react'; import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'; @@ -161,7 +161,7 @@ const Jinja2AutocompletePlugin: FC<{ options: Suggestion[] }> = ({ options }) => {Object.entries(groupedSuggestions).map(([nodeId, nodeOptions]) => (
- {nodeOptions[0]?.nodeData?.icon && } + {nodeOptions[0]?.nodeData?.icon &&
} {nodeOptions[0]?.nodeData?.name || nodeId} {nodeOptions.map((option) => { diff --git a/web/src/views/Workflow/components/Editor/plugin/Jinja2InitialValuePlugin.tsx b/web/src/views/Workflow/components/Editor/plugin/Jinja2InitialValuePlugin.tsx index 6b5f7363..b146ecee 100644 --- a/web/src/views/Workflow/components/Editor/plugin/Jinja2InitialValuePlugin.tsx +++ b/web/src/views/Workflow/components/Editor/plugin/Jinja2InitialValuePlugin.tsx @@ -6,53 +6,50 @@ */ import { useEffect, useRef } from 'react'; import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'; -import { $getRoot, $createParagraphNode, $createTextNode } from 'lexical'; +import { $getRoot, $createParagraphNode, $createTextNode, $isParagraphNode } from 'lexical'; interface Jinja2InitialValuePluginProps { - value: string; + value?: string; + onChange?: (value: string) => void; } -const Jinja2InitialValuePlugin: React.FC = ({ value }) => { +const Jinja2InitialValuePlugin: React.FC = ({ value, onChange }) => { const [editor] = useLexicalComposerContext(); - const prevValueRef = useRef(''); - const isUserInputRef = useRef(false); + const internalValueRef = useRef(undefined); + const onChangeRef = useRef(onChange); + onChangeRef.current = onChange; useEffect(() => { return editor.registerUpdateListener(({ editorState, tags }) => { if (tags.has('programmatic')) return; + if (internalValueRef.current === undefined) return; editorState.read(() => { - const textContent = $getRoot().getTextContent(); - if (textContent !== prevValueRef.current) { - isUserInputRef.current = true; - prevValueRef.current = textContent; + const paragraphs = $getRoot().getChildren() + .filter($isParagraphNode) + .map(p => p.getChildren().map(n => n.getTextContent()).join('')); + const text = paragraphs.join('\n'); + if (text !== internalValueRef.current) { + internalValueRef.current = text; + onChangeRef.current?.(text); } }); }); }, [editor]); useEffect(() => { - if (value === prevValueRef.current) return; + if (value === undefined) return; + if (value === internalValueRef.current) return; - if (isUserInputRef.current) { - prevValueRef.current = value; - isUserInputRef.current = false; - return; - } - - prevValueRef.current = value; - isUserInputRef.current = false; - - queueMicrotask(() => { - editor.update(() => { - const root = $getRoot(); - root.clear(); - value.split('\n').forEach((line) => { - const paragraph = $createParagraphNode(); - paragraph.append($createTextNode(line)); - root.append(paragraph); - }); - }, { tag: 'programmatic' }); - }); + internalValueRef.current = value; + editor.update(() => { + const root = $getRoot(); + root.clear(); + value.split('\n').forEach((line) => { + const paragraph = $createParagraphNode(); + paragraph.append($createTextNode(line)); + root.append(paragraph); + }); + }, { tag: 'programmatic' }); }, [value, editor]); return null; diff --git a/web/src/views/Workflow/components/Editor/plugin/Jinjia2CharacterCountPlugin.tsx b/web/src/views/Workflow/components/Editor/plugin/Jinjia2CharacterCountPlugin.tsx new file mode 100644 index 00000000..75189f92 --- /dev/null +++ b/web/src/views/Workflow/components/Editor/plugin/Jinjia2CharacterCountPlugin.tsx @@ -0,0 +1,23 @@ +import { useEffect } from 'react'; +import { $getRoot, $isParagraphNode } from 'lexical'; +import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'; + +const Jinjia2CharacterCountPlugin = ({ setCount }: { setCount: (count: number) => void }) => { + const [editor] = useLexicalComposerContext(); + + useEffect(() => { + return editor.registerUpdateListener(({ editorState }) => { + editorState.read(() => { + const root = $getRoot(); + const paragraphs = root.getChildren() + .filter($isParagraphNode) + .map(p => p.getChildren().map(n => n.getTextContent()).join('')); + setCount(paragraphs.join('\n').length); + }); + }); + }, [editor, setCount]); + + return null; +} + +export default Jinjia2CharacterCountPlugin \ No newline at end of file