=({
}
ErrorBoundary={LexicalErrorBoundary}
/>
- {/* Editor plugins */}
- {language === 'jinja2' &&
}
- {enableLineNumbers &&
}
-
+
{ setCount(count) }} onChange={onChange} />
-
-
+
+
);
diff --git a/web/src/views/Workflow/components/Editor/plugin/CharacterCountPlugin.tsx b/web/src/views/Workflow/components/Editor/plugin/CharacterCountPlugin.tsx
index ed07392d..4579375a 100644
--- a/web/src/views/Workflow/components/Editor/plugin/CharacterCountPlugin.tsx
+++ b/web/src/views/Workflow/components/Editor/plugin/CharacterCountPlugin.tsx
@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
import { $getRoot, $isParagraphNode } from 'lexical';
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
@@ -6,9 +6,15 @@ import { $isVariableNode } from '../nodes/VariableNode';
const CharacterCountPlugin = ({ setCount, onChange }: { setCount: (count: number) => void; onChange?: (value: string) => void }) => {
const [editor] = useLexicalComposerContext();
+ const isReadyRef = useRef(false);
useEffect(() => {
- return editor.registerUpdateListener(({ editorState }) => {
+ return editor.registerUpdateListener(({ editorState, tags }) => {
+ if (tags.has('programmatic')) {
+ isReadyRef.current = true;
+ return;
+ }
+ if (!isReadyRef.current) return;
editorState.read(() => {
const root = $getRoot();
let serializedContent = '';
diff --git a/web/src/views/Workflow/hooks/useWorkflowGraph.ts b/web/src/views/Workflow/hooks/useWorkflowGraph.ts
index c427788b..fa6a2ec8 100644
--- a/web/src/views/Workflow/hooks/useWorkflowGraph.ts
+++ b/web/src/views/Workflow/hooks/useWorkflowGraph.ts
@@ -491,32 +491,36 @@ export const useWorkflowGraph = ({
* @param node - Clicked node
*/
const nodeClick = ({ node }: { node: Node }) => {
- // Ignore add-node type node clicks
- const nodeData = node.getData()
- if (nodeData?.type === 'add-node' || nodeData.type === 'break' || nodeData.type === 'cycle-start') {
- setSelectedNode(null)
- return;
- }
+ blankClick()
- const nodes = graphRef.current?.getNodes();
-
- nodes?.forEach(vo => {
- const data = vo.getData();
- if (data.isSelected) {
- vo.setData({
- ...data,
- isSelected: false,
- });
+ setTimeout(() => {
+ // Ignore add-node type node clicks
+ const nodeData = node.getData()
+ if (nodeData?.type === 'add-node' || nodeData.type === 'break' || nodeData.type === 'cycle-start') {
+ setSelectedNode(null)
+ return;
}
- });
- node.setData({
- ...nodeData,
- isSelected: true,
- });
- clearEdgeSelect()
- if (nodeData.type !== 'notes') {
- setSelectedNode(node);
- }
+
+ const nodes = graphRef.current?.getNodes();
+
+ nodes?.forEach(vo => {
+ const data = vo.getData();
+ if (data.isSelected) {
+ vo.setData({
+ ...data,
+ isSelected: false,
+ });
+ }
+ });
+ node.setData({
+ ...nodeData,
+ isSelected: true,
+ });
+ clearEdgeSelect()
+ if (nodeData.type !== 'notes') {
+ setSelectedNode(node);
+ }
+ }, 0)
};
/**
* Handle edge click event