chore: revert #33540 #32966 (#33566)

web/app/components/workflow/nodes/_base/components/editor/code-editor/index.tsx

@@ -1,18 +1,24 @@
 'use client'
 import type { FC } from 'react'
+import Editor, { loader } from '@monaco-editor/react'
 import { noop } from 'es-toolkit/function'
 import * as React from 'react'
-import { useMemo, useRef, useState } from 'react'
-import { useTranslation } from 'react-i18next'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import {
   getFilesInLogs,
 } from '@/app/components/base/file-uploader/utils'
-import { ModernMonacoEditor } from '@/app/components/base/modern-monaco/modern-monaco-editor'
 import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
+import useTheme from '@/hooks/use-theme'
+import { Theme } from '@/types/app'
 import { cn } from '@/utils/classnames'
+import { basePath } from '@/utils/var'
 import Base from '../base'
 import './style.css'
 
+// load file from local instead of cdn https://github.com/suren-atoyan/monaco-react/issues/482
+if (typeof window !== 'undefined')
+  loader.config({ paths: { vs: `${window.location.origin}${basePath}/vs` } })
+
 const CODE_EDITOR_LINE_HEIGHT = 18
 
 export type Props = {
@@ -66,10 +72,15 @@ const CodeEditor: FC<Props> = ({
   tip,
   footer,
 }) => {
-  const { t } = useTranslation()
   const [isFocus, setIsFocus] = React.useState(false)
+  const [isMounted, setIsMounted] = React.useState(false)
   const minHeight = height || 200
   const [editorContentHeight, setEditorContentHeight] = useState(56)
+  const { theme: appTheme } = useTheme()
+  const valueRef = useRef(value)
+  useEffect(() => {
+    valueRef.current = value
+  }, [value])
 
   const fileList = useMemo(() => {
     if (typeof value === 'object')
@@ -95,15 +106,18 @@ const CodeEditor: FC<Props> = ({
   const handleEditorDidMount = (editor: any, monaco: any) => {
     editorRef.current = editor
     resizeEditorToContent()
+
+    editor.onDidFocusEditorText(() => {
+      setIsFocus(true)
+    })
+    editor.onDidBlurEditorText(() => {
+      setIsFocus(false)
+    })
+
+    monaco.editor.setTheme(appTheme === Theme.light ? 'light' : 'vs-dark') // Fix: sometimes not load the default theme
+
     onMount?.(editor, monaco)
-  }
-
-  const handleEditorFocus = () => {
-    setIsFocus(true)
-  }
-
-  const handleEditorBlur = () => {
-    setIsFocus(false)
+    setIsMounted(true)
   }
 
   const outPutValue = (() => {
@@ -117,23 +131,31 @@ const CodeEditor: FC<Props> = ({
     }
   })()
 
+  const theme = useMemo(() => {
+    if (appTheme === Theme.light)
+      return 'light'
+    return 'vs-dark'
+  }, [appTheme])
+
   const main = (
     <>
-      <ModernMonacoEditor
+      {/* https://www.npmjs.com/package/@monaco-editor/react */}
+      <Editor
         // className='min-h-[100%]' // h-full
         // language={language === CodeLanguage.javascript ? 'javascript' : 'python'}
         language={languageMap[language] || 'javascript'}
+        theme={isMounted ? theme : 'default-theme'} // sometimes not load the default theme
         value={outPutValue}
-        readOnly={readOnly}
+        loading={<span className="text-text-primary">Loading...</span>}
         onChange={handleEditorChange}
-        onFocus={handleEditorFocus}
-        onBlur={handleEditorBlur}
-        onReady={handleEditorDidMount}
-        loading={<span className="text-text-primary">{t('loading', { ns: 'common' })}</span>}
         // https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IEditorOptions.html
         options={{
+          readOnly,
+          domReadOnly: true,
           quickSuggestions: false,
+          minimap: { enabled: false },
           lineNumbersMinChars: 1, // would change line num width
+          wordWrap: 'on', // auto line wrap
           // lineNumbers: (num) => {
           //   return <div>{num}</div>
           // }
@@ -143,6 +165,7 @@ const CodeEditor: FC<Props> = ({
           },
           stickyScroll: { enabled: false },
         }}
+        onMount={handleEditorDidMount}
       />
       {!outPutValue && !isFocus && <div className="pointer-events-none absolute left-[36px] top-0 text-[13px] font-normal leading-[18px] text-components-input-text-placeholder">{placeholder}</div>}
     </>

web/app/components/workflow/nodes/llm/components/json-schema-config-modal/code-editor.tsx

@@ -1,11 +1,13 @@
 import type { FC } from 'react'
+import { Editor } from '@monaco-editor/react'
 import { RiClipboardLine, RiIndentIncrease } from '@remixicon/react'
 import copy from 'copy-to-clipboard'
 import * as React from 'react'
-import { useCallback, useRef } from 'react'
+import { useCallback, useEffect, useMemo, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
-import { ModernMonacoEditor } from '@/app/components/base/modern-monaco/modern-monaco-editor'
 import Tooltip from '@/app/components/base/tooltip'
+import useTheme from '@/hooks/use-theme'
+import { Theme } from '@/types/app'
 import { cn } from '@/utils/classnames'
 
 type CodeEditorProps = {
@@ -33,11 +35,54 @@ const CodeEditor: FC<CodeEditorProps> = ({
   onBlur,
 }) => {
   const { t } = useTranslation()
+  const { theme } = useTheme()
+  const monacoRef = useRef<any>(null)
   const editorRef = useRef<any>(null)
+  const [isMounted, setIsMounted] = React.useState(false)
+  const containerRef = useRef<HTMLDivElement>(null)
 
-  const handleEditorReady = useCallback((editor: any) => {
+  useEffect(() => {
+    if (monacoRef.current) {
+      if (theme === Theme.light)
+        monacoRef.current.editor.setTheme('light-theme')
+      else
+        monacoRef.current.editor.setTheme('dark-theme')
+    }
+  }, [theme])
+
+  const handleEditorDidMount = useCallback((editor: any, monaco: any) => {
     editorRef.current = editor
-    editor.getModel()?.updateOptions({ tabSize: 2 })
+    monacoRef.current = monaco
+
+    editor.onDidFocusEditorText(() => {
+      onFocus?.()
+    })
+    editor.onDidBlurEditorText(() => {
+      onBlur?.()
+    })
+
+    monaco.editor.defineTheme('light-theme', {
+      base: 'vs',
+      inherit: true,
+      rules: [],
+      colors: {
+        'editor.background': '#00000000',
+        'editor.lineHighlightBackground': '#00000000',
+        'focusBorder': '#00000000',
+      },
+    })
+    monaco.editor.defineTheme('dark-theme', {
+      base: 'vs-dark',
+      inherit: true,
+      rules: [],
+      colors: {
+        'editor.background': '#00000000',
+        'editor.lineHighlightBackground': '#00000000',
+        'focusBorder': '#00000000',
+      },
+    })
+    monaco.editor.setTheme('light-theme')
+    setIsMounted(true)
   }, [])
 
   const formatJsonContent = useCallback(() => {
@@ -50,11 +95,29 @@ const CodeEditor: FC<CodeEditorProps> = ({
       onUpdate?.(value)
   }, [onUpdate])
 
+  const editorTheme = useMemo(() => {
+    if (theme === Theme.light)
+      return 'light-theme'
+    return 'dark-theme'
+  }, [theme])
+  useEffect(() => {
+    const resizeObserver = new ResizeObserver(() => {
+      editorRef.current?.layout()
+    })
+
+    if (containerRef.current)
+      resizeObserver.observe(containerRef.current)
+
+    return () => {
+      resizeObserver.disconnect()
+    }
+  }, [])
+
   return (
     <div className={cn('flex h-full flex-col overflow-hidden bg-components-input-bg-normal', hideTopMenu && 'pt-2', className)}>
       {!hideTopMenu && (
         <div className="flex items-center justify-between pl-2 pr-1 pt-1">
-          <div className="py-0.5 text-text-secondary system-xs-semibold-uppercase">
+          <div className="system-xs-semibold-uppercase py-0.5 text-text-secondary">
             <span className="px-1 py-0.5">JSON</span>
           </div>
           <div className="flex items-center gap-x-0.5">
@@ -83,17 +146,19 @@ const CodeEditor: FC<CodeEditorProps> = ({
       )}
       {topContent}
       <div className={cn('relative overflow-hidden', editorWrapperClassName)}>
-        <ModernMonacoEditor
-          language="json"
+        <Editor
+          defaultLanguage="json"
+          theme={isMounted ? editorTheme : 'default-theme'} // sometimes not load the default theme
           value={value}
-          readOnly={readOnly}
           onChange={handleEditorChange}
-          onReady={handleEditorReady}
-          onFocus={onFocus}
-          onBlur={onBlur}
-          loading={<span className="text-text-primary">{t('loading', { ns: 'common' })}</span>}
+          onMount={handleEditorDidMount}
           options={{
+            readOnly,
+            domReadOnly: true,
+            minimap: { enabled: false },
+            tabSize: 2,
             scrollBeyondLastLine: false,
+            wordWrap: 'on',
             wrappingIndent: 'same',
             overviewRulerBorder: false,
             hideCursorInOverviewRuler: true,

web/app/components/workflow/utils/__tests__/common.spec.ts

@@ -146,16 +146,6 @@ describe('isEventTargetInputArea', () => {
     expect(isEventTargetInputArea(el)).toBe(true)
   })
 
-  it('should return true for monaco editor descendants', () => {
-    const wrapper = document.createElement('div')
-    wrapper.className = 'monaco-editor'
-    const child = document.createElement('div')
-    wrapper.appendChild(child)
-    document.body.appendChild(wrapper)
-    expect(isEventTargetInputArea(child)).toBe(true)
-    wrapper.remove()
-  })
-
   it('should return undefined for non-input elements', () => {
     const el = document.createElement('div')
     expect(isEventTargetInputArea(el)).toBeUndefined()

web/app/components/workflow/utils/common.ts

@@ -32,9 +32,6 @@ export const isEventTargetInputArea = (target: HTMLElement) => {
 
   if (target.contentEditable === 'true')
     return true
-
-  if (target.closest?.('.monaco-editor, .monaco-diff-editor'))
-    return true
 }
 
 /**