fix: prompt-editor

web/app/components/base/prompt-editor/index.tsx

@@ -9,10 +9,7 @@ import {
   $getRoot,
   TextNode,
 } from 'lexical'
-import {
-  CodeHighlightNode,
-  CodeNode,
-} from '@lexical/code'
+import { CodeNode } from '@lexical/code'
 import { LexicalComposer } from '@lexical/react/LexicalComposer'
 import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin'
 import { ContentEditable } from '@lexical/react/LexicalContentEditable'
@@ -47,7 +44,6 @@ import { VariableValueBlockNode } from './plugins/variable-value-block/node'
 import { CustomTextNode } from './plugins/custom-text/node'
 import OnBlurBlock from './plugins/on-blur-or-focus-block'
 import UpdateBlock from './plugins/update-block'
-import CodeHighlightBlock from './plugins/code-highlight-block'
 import { textToEditorState } from './utils'
 import type {
   ContextBlockType,
@@ -107,7 +103,6 @@ const PromptEditor: FC<PromptEditorProps> = ({
     namespace: 'prompt-editor',
     nodes: [
       CodeNode,
-      CodeHighlightNode,
       CustomTextNode,
       {
         replace: TextNode,
@@ -214,7 +209,6 @@ const PromptEditor: FC<PromptEditorProps> = ({
         <OnChangePlugin onChange={handleEditorChange} />
         <OnBlurBlock onBlur={onBlur} onFocus={onFocus} />
         <UpdateBlock instanceId={instanceId} />
-        <CodeHighlightBlock />
         {/* <TreeView /> */}
       </div>
     </LexicalComposer>

web/app/components/base/prompt-editor/plugins/code-highlight-block.tsx

@@ -1,13 +0,0 @@
-import { useEffect } from 'react'
-import { registerCodeHighlighting } from '@lexical/code'
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
-
-export default function CodeHighlightPlugin() {
-  const [editor] = useLexicalComposerContext()
-
-  useEffect(() => {
-    return registerCodeHighlighting(editor)
-  }, [editor])
-
-  return null
-}

web/app/components/base/prompt-editor/plugins/component-picker-block/index.tsx

@@ -125,7 +125,7 @@ const ComponentPicker = ({
     anchorElementRef,
     { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex },
   ) => {
-    if (anchorElementRef.current && (allOptions.length || workflowVariableOptions.length)) {
+    if (anchorElementRef.current && (allOptions.length || workflowVariableBlock?.show)) {
       return (
         <>
           {
@@ -224,7 +224,7 @@ const ComponentPicker = ({
                     )
                   }
                   {
-                    !!workflowVariableOptions.length && (
+                    workflowVariableBlock?.show && (
                       <>
                         {
                           (!!promptOptions.length || !!variableOptions.length || !!externalToolOptions.length) && (
@@ -257,8 +257,9 @@ const ComponentPicker = ({
     promptOptions,
     variableOptions,
     externalToolOptions,
-    workflowVariableOptions,
     queryString,
+    workflowVariableBlock?.show,
+    workflowVariableOptions,
     handleSelectWorkflowVariable,
     elements,
     floatingStyles,