fix: code full screen in web app cause error (#3935)

web/app/components/workflow/nodes/_base/components/editor/base.tsx

@@ -3,6 +3,7 @@ import type { FC } from 'react'
 import React, { useCallback, useRef, useState } from 'react'
 import copy from 'copy-to-clipboard'
 import cn from 'classnames'
+import Wrap from './wrap'
 import PromptEditorHeightResizeWrap from '@/app/components/app/configuration/config-prompt/prompt-editor-height-resize-wrap'
 import { Clipboard, ClipboardCheck } from '@/app/components/base/icons/src/vender/line/files'
 import ToggleExpandBtn from '@/app/components/workflow/nodes/_base/components/toggle-expand-btn'
@@ -48,7 +49,7 @@ const Base: FC<Props> = ({
   }, [value])
 
   return (
-    <div className={cn(wrapClassName)} style={wrapStyle}>
+    <Wrap className={cn(wrapClassName)} style={wrapStyle} isInNode={isInNode} isExpand={isExpand}>
       <div ref={ref} className={cn(className, isExpand && 'h-full', 'rounded-lg border', isFocus ? 'bg-white border-gray-200' : 'bg-gray-100 border-gray-100 overflow-hidden')}>
         <div className='flex justify-between items-center h-7 pt-1 pl-3 pr-2'>
           <div className='text-xs font-semibold text-gray-700'>{title}</div>
@@ -81,7 +82,7 @@ const Base: FC<Props> = ({
           </div>
         </PromptEditorHeightResizeWrap>
       </div>
-    </div>
+    </Wrap>
   )
 }
 export default React.memo(Base)

web/app/components/workflow/nodes/_base/components/editor/wrap.tsx

@@ -0,0 +1,48 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { useStore } from '@/app/components/workflow/store'
+
+type Props = {
+  isInNode?: boolean
+  isExpand: boolean
+  className: string
+  style: React.CSSProperties
+  children: React.ReactNode
+}
+
+// It doesn't has workflow store
+const WrapInWebApp = ({
+  className,
+  style,
+  children,
+}: Props) => {
+  return <div className={className} style={style}>{children}</div>
+}
+
+const Wrap = ({
+  className,
+  style,
+  isExpand,
+  children,
+}: Props) => {
+  const panelWidth = useStore(state => state.panelWidth)
+  const wrapStyle = (() => {
+    if (isExpand) {
+      return {
+        ...style,
+        width: panelWidth - 1,
+      }
+    }
+    return style
+  })()
+  return <div className={className} style={wrapStyle}>{children}</div>
+}
+
+const Main: FC<Props> = ({
+  isInNode,
+  ...otherProps
+}: Props) => {
+  return isInNode ? <Wrap {...otherProps} /> : <WrapInWebApp {...otherProps} />
+}
+export default React.memo(Main)

web/app/components/workflow/nodes/_base/components/prompt/editor.tsx

@@ -10,6 +10,7 @@ import {
   type Node,
   type NodeOutPutVar,
 } from '../../../../types'
+import Wrap from '../editor/wrap'
 import ToggleExpandBtn from '@/app/components/workflow/nodes/_base/components/toggle-expand-btn'
 import useToggleExpend from '@/app/components/workflow/nodes/_base/hooks/use-toggle-expend'
 import PromptEditor from '@/app/components/base/prompt-editor'
@@ -20,7 +21,6 @@ import { useEventEmitterContextContext } from '@/context/event-emitter'
 import { PROMPT_EDITOR_INSERT_QUICKLY } from '@/app/components/base/prompt-editor/plugins/update-block'
 import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
 import TooltipPlus from '@/app/components/base/tooltip-plus'
-
 type Props = {
   className?: string
   headerClassName?: string
@@ -106,7 +106,7 @@ const Editor: FC<Props> = ({
   }
 
   return (
-    <div className={cn(className, wrapClassName)} style={wrapStyle}>
+    <Wrap className={cn(className, wrapClassName)} style={wrapStyle} isInNode isExpand={isExpand}>
       <div ref={ref} className={cn(isFocus ? s.gradientBorder : 'bg-gray-100', isExpand && 'h-full', '!rounded-[9px] p-0.5')}>
         <div className={cn(isFocus ? 'bg-gray-50' : 'bg-gray-100', isExpand && 'h-full flex flex-col', 'rounded-lg')}>
           <div className={cn(headerClassName, 'pt-1 pl-3 pr-2 flex justify-between h-6 items-center')}>
@@ -195,7 +195,7 @@ const Editor: FC<Props> = ({
 
         </div>
       </div>
-    </div>
+    </Wrap>
 
   )
 }

web/app/components/workflow/nodes/_base/hooks/use-toggle-expend.ts

@@ -1,5 +1,4 @@
 import { useEffect, useState } from 'react'
-import { useStore } from '@/app/components/workflow/store'
 
 type Params = {
   ref: React.RefObject<HTMLDivElement>
@@ -10,7 +9,6 @@ type Params = {
 const useToggleExpend = ({ ref, hasFooter = true, isInNode }: Params) => {
   const [isExpand, setIsExpand] = useState(false)
   const [wrapHeight, setWrapHeight] = useState(ref.current?.clientHeight)
-  const panelWidth = useStore(state => state.panelWidth)
   const editorExpandHeight = isExpand ? wrapHeight! - (hasFooter ? 56 : 29) : 0
   useEffect(() => {
     setWrapHeight(ref.current?.clientHeight)
@@ -29,7 +27,6 @@ const useToggleExpend = ({ ref, hasFooter = true, isInNode }: Params) => {
   const wrapStyle = isExpand
     ? {
       boxShadow: '0px 0px 12px -4px rgba(16, 24, 40, 0.05), 0px -3px 6px -2px rgba(16, 24, 40, 0.03)',
-      width: panelWidth - 1,
     }
     : {}
   return {