mirror of
https://github.com/langgenius/dify.git
synced 2026-05-05 01:48:04 +08:00
Merge branch 'feat/model-plugins-implementing' into deploy/dev
# Conflicts: # api/tests/unit_tests/services/test_conversation_variable_updater.py
This commit is contained in:
yyh
25
web/app/components/base/modern-monaco/init.ts
Normal file
25
web/app/components/base/modern-monaco/init.ts
Normal file
@ -0,0 +1,25 @@
|
||||
import type { InitOptions } from 'modern-monaco'
|
||||
|
||||
export const LIGHT_THEME_ID = 'light-plus'
|
||||
export const DARK_THEME_ID = 'dark-plus'
|
||||
|
||||
const DEFAULT_INIT_OPTIONS: InitOptions = {
|
||||
defaultTheme: DARK_THEME_ID,
|
||||
themes: [
|
||||
LIGHT_THEME_ID,
|
||||
DARK_THEME_ID,
|
||||
],
|
||||
}
|
||||
|
||||
let monacoInitPromise: Promise<typeof import('modern-monaco/editor-core') | null> | null = null
|
||||
|
||||
export const initMonaco = async () => {
|
||||
if (!monacoInitPromise) {
|
||||
monacoInitPromise = (async () => {
|
||||
const { init } = await import('modern-monaco')
|
||||
return init(DEFAULT_INIT_OPTIONS)
|
||||
})()
|
||||
}
|
||||
|
||||
return monacoInitPromise
|
||||
}
|
||||
250
web/app/components/base/modern-monaco/modern-monaco-editor.tsx
Normal file
250
web/app/components/base/modern-monaco/modern-monaco-editor.tsx
Normal file
@ -0,0 +1,250 @@
|
||||
'use client'
|
||||
|
||||
import type { editor as MonacoEditor } from 'modern-monaco/editor-core'
|
||||
import type { FC } from 'react'
|
||||
import * as React from 'react'
|
||||
import { useEffect, useMemo, useRef, useState } from 'react'
|
||||
import useTheme from '@/hooks/use-theme'
|
||||
import { Theme } from '@/types/app'
|
||||
import { cn } from '@/utils/classnames'
|
||||
import { DARK_THEME_ID, initMonaco, LIGHT_THEME_ID } from './init'
|
||||
|
||||
type ModernMonacoEditorProps = {
|
||||
value: string
|
||||
language: string
|
||||
readOnly?: boolean
|
||||
options?: MonacoEditor.IEditorOptions
|
||||
onChange?: (value: string) => void
|
||||
onFocus?: () => void
|
||||
onBlur?: () => void
|
||||
onReady?: (editor: MonacoEditor.IStandaloneCodeEditor, monaco: typeof import('modern-monaco/editor-core')) => void
|
||||
loading?: React.ReactNode
|
||||
className?: string
|
||||
style?: React.CSSProperties
|
||||
}
|
||||
|
||||
type MonacoModule = typeof import('modern-monaco/editor-core')
|
||||
type EditorCallbacks = Pick<ModernMonacoEditorProps, 'onBlur' | 'onChange' | 'onFocus' | 'onReady'>
|
||||
type EditorSetup = {
|
||||
editorOptions: MonacoEditor.IEditorOptions
|
||||
language: string
|
||||
resolvedTheme: string
|
||||
}
|
||||
|
||||
const syncEditorValue = (
|
||||
editor: MonacoEditor.IStandaloneCodeEditor,
|
||||
monaco: MonacoModule,
|
||||
model: MonacoEditor.ITextModel,
|
||||
value: string,
|
||||
preventTriggerChangeEventRef: React.RefObject<boolean>,
|
||||
) => {
|
||||
const currentValue = model.getValue()
|
||||
if (currentValue === value)
|
||||
return
|
||||
|
||||
if (editor.getOption(monaco.editor.EditorOption.readOnly)) {
|
||||
editor.setValue(value)
|
||||
return
|
||||
}
|
||||
|
||||
preventTriggerChangeEventRef.current = true
|
||||
try {
|
||||
editor.executeEdits('', [{
|
||||
range: model.getFullModelRange(),
|
||||
text: value,
|
||||
forceMoveMarkers: true,
|
||||
}])
|
||||
editor.pushUndoStop()
|
||||
}
|
||||
finally {
|
||||
preventTriggerChangeEventRef.current = false
|
||||
}
|
||||
}
|
||||
|
||||
const bindEditorCallbacks = (
|
||||
editor: MonacoEditor.IStandaloneCodeEditor,
|
||||
monaco: MonacoModule,
|
||||
callbacksRef: React.RefObject<EditorCallbacks>,
|
||||
preventTriggerChangeEventRef: React.RefObject<boolean>,
|
||||
) => {
|
||||
const changeDisposable = editor.onDidChangeModelContent(() => {
|
||||
if (preventTriggerChangeEventRef.current)
|
||||
return
|
||||
callbacksRef.current.onChange?.(editor.getValue())
|
||||
})
|
||||
const keydownDisposable = editor.onKeyDown((event) => {
|
||||
const { key, code } = event.browserEvent
|
||||
if (key === ' ' || code === 'Space')
|
||||
event.stopPropagation()
|
||||
})
|
||||
const focusDisposable = editor.onDidFocusEditorText(() => {
|
||||
callbacksRef.current.onFocus?.()
|
||||
})
|
||||
const blurDisposable = editor.onDidBlurEditorText(() => {
|
||||
callbacksRef.current.onBlur?.()
|
||||
})
|
||||
|
||||
return () => {
|
||||
blurDisposable.dispose()
|
||||
focusDisposable.dispose()
|
||||
keydownDisposable.dispose()
|
||||
changeDisposable.dispose()
|
||||
}
|
||||
}
|
||||
|
||||
export const ModernMonacoEditor: FC<ModernMonacoEditorProps> = ({
|
||||
value,
|
||||
language,
|
||||
readOnly = false,
|
||||
options,
|
||||
onChange,
|
||||
onFocus,
|
||||
onBlur,
|
||||
onReady,
|
||||
loading,
|
||||
className,
|
||||
style,
|
||||
}) => {
|
||||
const { theme: appTheme } = useTheme()
|
||||
const resolvedTheme = appTheme === Theme.light ? LIGHT_THEME_ID : DARK_THEME_ID
|
||||
const [isEditorReady, setIsEditorReady] = useState(false)
|
||||
const containerRef = useRef<HTMLDivElement>(null)
|
||||
const editorRef = useRef<MonacoEditor.IStandaloneCodeEditor | null>(null)
|
||||
const modelRef = useRef<MonacoEditor.ITextModel | null>(null)
|
||||
const monacoRef = useRef<MonacoModule | null>(null)
|
||||
const preventTriggerChangeEventRef = useRef(false)
|
||||
const valueRef = useRef(value)
|
||||
const callbacksRef = useRef<EditorCallbacks>({ onChange, onFocus, onBlur, onReady })
|
||||
|
||||
const editorOptions = useMemo<MonacoEditor.IEditorOptions>(() => ({
|
||||
automaticLayout: true,
|
||||
readOnly,
|
||||
domReadOnly: true,
|
||||
minimap: { enabled: false },
|
||||
wordWrap: 'on',
|
||||
fixedOverflowWidgets: true,
|
||||
tabFocusMode: false,
|
||||
...options,
|
||||
}), [readOnly, options])
|
||||
const setupRef = useRef<EditorSetup>({
|
||||
editorOptions,
|
||||
language,
|
||||
resolvedTheme,
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
valueRef.current = value
|
||||
}, [value])
|
||||
|
||||
useEffect(() => {
|
||||
callbacksRef.current = { onChange, onFocus, onBlur, onReady }
|
||||
}, [onChange, onFocus, onBlur, onReady])
|
||||
|
||||
useEffect(() => {
|
||||
setupRef.current = {
|
||||
editorOptions,
|
||||
language,
|
||||
resolvedTheme,
|
||||
}
|
||||
}, [editorOptions, language, resolvedTheme])
|
||||
|
||||
useEffect(() => {
|
||||
let disposed = false
|
||||
let cleanup: (() => void) | undefined
|
||||
|
||||
const setup = async () => {
|
||||
const monaco = await initMonaco()
|
||||
if (!monaco || disposed || !containerRef.current)
|
||||
return
|
||||
|
||||
monacoRef.current = monaco
|
||||
|
||||
const editor = monaco.editor.create(containerRef.current, setupRef.current.editorOptions)
|
||||
editorRef.current = editor
|
||||
|
||||
const model = monaco.editor.createModel(valueRef.current, setupRef.current.language)
|
||||
modelRef.current = model
|
||||
|
||||
editor.setModel(model)
|
||||
|
||||
monaco.editor.setTheme(setupRef.current.resolvedTheme)
|
||||
|
||||
const disposeCallbacks = bindEditorCallbacks(
|
||||
editor,
|
||||
monaco,
|
||||
callbacksRef,
|
||||
preventTriggerChangeEventRef,
|
||||
)
|
||||
const resizeObserver = new ResizeObserver(() => {
|
||||
editor.layout()
|
||||
})
|
||||
resizeObserver.observe(containerRef.current)
|
||||
callbacksRef.current.onReady?.(editor, monaco)
|
||||
setIsEditorReady(true)
|
||||
|
||||
cleanup = () => {
|
||||
resizeObserver.disconnect()
|
||||
disposeCallbacks()
|
||||
editor.dispose()
|
||||
model.dispose()
|
||||
setIsEditorReady(false)
|
||||
}
|
||||
}
|
||||
|
||||
setup()
|
||||
|
||||
return () => {
|
||||
disposed = true
|
||||
cleanup?.()
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
const editor = editorRef.current
|
||||
if (!editor)
|
||||
return
|
||||
editor.updateOptions(editorOptions)
|
||||
}, [editorOptions])
|
||||
|
||||
useEffect(() => {
|
||||
const monaco = monacoRef.current
|
||||
const model = modelRef.current
|
||||
if (!monaco || !model)
|
||||
return
|
||||
monaco.editor.setModelLanguage(model, language)
|
||||
}, [language])
|
||||
|
||||
useEffect(() => {
|
||||
const monaco = monacoRef.current
|
||||
if (!monaco)
|
||||
return
|
||||
monaco.editor.setTheme(resolvedTheme)
|
||||
}, [resolvedTheme])
|
||||
|
||||
useEffect(() => {
|
||||
const editor = editorRef.current
|
||||
const monaco = monacoRef.current
|
||||
const model = modelRef.current
|
||||
if (!editor || !monaco || !model)
|
||||
return
|
||||
|
||||
syncEditorValue(editor, monaco, model, value, preventTriggerChangeEventRef)
|
||||
}, [value])
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn('relative h-full w-full', className)}
|
||||
style={style}
|
||||
>
|
||||
<div
|
||||
ref={containerRef}
|
||||
className="h-full w-full"
|
||||
/>
|
||||
{!isEditorReady && !!loading && (
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
{loading}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -3,16 +3,18 @@ import { describe, expect, it, vi } from 'vitest'
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../index'
|
||||
|
||||
const renderOpenSelect = ({
|
||||
rootProps = {},
|
||||
triggerProps = {},
|
||||
contentProps = {},
|
||||
onValueChange,
|
||||
}: {
|
||||
rootProps?: Record<string, unknown>
|
||||
triggerProps?: Record<string, unknown>
|
||||
contentProps?: Record<string, unknown>
|
||||
onValueChange?: (value: string | null) => void
|
||||
} = {}) => {
|
||||
return render(
|
||||
<Select open defaultValue="seattle" onValueChange={onValueChange}>
|
||||
<Select open defaultValue="seattle" onValueChange={onValueChange} {...rootProps}>
|
||||
<SelectTrigger aria-label="city select" {...triggerProps}>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
@ -109,6 +111,107 @@ describe('Select wrappers', () => {
|
||||
const clearButton = screen.getByRole('button', { name: /clear selection/i })
|
||||
expect(() => fireEvent.click(clearButton)).not.toThrow()
|
||||
})
|
||||
|
||||
it('should apply regular size variant classes by default', () => {
|
||||
renderOpenSelect()
|
||||
|
||||
const trigger = screen.getByRole('combobox', { name: 'city select' })
|
||||
expect(trigger.className).toMatch(/system-sm-regular/)
|
||||
expect(trigger.className).toMatch(/rounded-lg/)
|
||||
})
|
||||
|
||||
it('should apply small size variant classes when size is small', () => {
|
||||
renderOpenSelect({
|
||||
triggerProps: { size: 'small' },
|
||||
})
|
||||
|
||||
const trigger = screen.getByRole('combobox', { name: 'city select' })
|
||||
expect(trigger.className).toMatch(/system-xs-regular/)
|
||||
expect(trigger.className).toMatch(/rounded-md/)
|
||||
})
|
||||
|
||||
it('should apply large size variant classes when size is large', () => {
|
||||
renderOpenSelect({
|
||||
triggerProps: { size: 'large' },
|
||||
})
|
||||
|
||||
const trigger = screen.getByRole('combobox', { name: 'city select' })
|
||||
expect(trigger.className).toMatch(/system-md-regular/)
|
||||
})
|
||||
|
||||
it('should apply disabled styling via data attributes when disabled', () => {
|
||||
renderOpenSelect({
|
||||
triggerProps: { disabled: true },
|
||||
})
|
||||
|
||||
const trigger = screen.getByRole('combobox', { name: 'city select' })
|
||||
expect(trigger).toHaveAttribute('data-disabled')
|
||||
expect(trigger.className).toContain('data-[disabled]:bg-components-input-bg-disabled')
|
||||
})
|
||||
|
||||
it('should apply disabled placeholder color class for compound state', () => {
|
||||
renderOpenSelect({
|
||||
triggerProps: { disabled: true },
|
||||
})
|
||||
|
||||
const trigger = screen.getByRole('combobox', { name: 'city select' })
|
||||
expect(trigger.className).toContain('data-[disabled]:data-[placeholder]:text-components-input-text-disabled')
|
||||
})
|
||||
|
||||
it('should show error icon and apply destructive styling when variant is destructive', () => {
|
||||
renderOpenSelect({
|
||||
triggerProps: { variant: 'destructive' },
|
||||
})
|
||||
|
||||
const trigger = screen.getByRole('combobox', { name: 'city select' })
|
||||
expect(trigger.className).toContain('border-components-input-border-destructive')
|
||||
expect(trigger.className).toContain('bg-components-input-bg-destructive')
|
||||
const errorIcon = trigger.querySelector('.i-ri-error-warning-line')
|
||||
expect(errorIcon).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('should hide clear button when variant is destructive even if clearable', () => {
|
||||
renderOpenSelect({
|
||||
triggerProps: { clearable: true, variant: 'destructive' },
|
||||
})
|
||||
|
||||
expect(screen.queryByRole('button', { name: /clear selection/i })).not.toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('should apply readonly styling via data attributes when Root is readOnly', () => {
|
||||
renderOpenSelect({
|
||||
rootProps: { readOnly: true },
|
||||
})
|
||||
|
||||
const trigger = screen.getByRole('combobox', { name: 'city select' })
|
||||
expect(trigger).toHaveAttribute('data-readonly')
|
||||
expect(trigger.className).toContain('data-[readonly]:bg-transparent')
|
||||
})
|
||||
|
||||
it('should hide arrow icon via CSS when Root is readOnly', () => {
|
||||
renderOpenSelect({
|
||||
rootProps: { readOnly: true },
|
||||
})
|
||||
|
||||
const trigger = screen.getByRole('combobox', { name: 'city select' })
|
||||
const iconWrapper = trigger.querySelector('[class*="group-data-[readonly]:hidden"]')
|
||||
expect(iconWrapper).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('should set aria-hidden on decorative icons', () => {
|
||||
renderOpenSelect()
|
||||
|
||||
const trigger = screen.getByRole('combobox', { name: 'city select' })
|
||||
const arrowIcon = trigger.querySelector('.i-ri-arrow-down-s-line')
|
||||
expect(arrowIcon).toHaveAttribute('aria-hidden', 'true')
|
||||
})
|
||||
|
||||
it('should include placeholder color class via data attribute', () => {
|
||||
renderOpenSelect()
|
||||
|
||||
const trigger = screen.getByRole('combobox', { name: 'city select' })
|
||||
expect(trigger.className).toContain('data-[placeholder]:text-components-input-text-placeholder')
|
||||
})
|
||||
})
|
||||
|
||||
describe('SelectContent', () => {
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
'use client'
|
||||
|
||||
import type { VariantProps } from 'class-variance-authority'
|
||||
import type { Placement } from '@/app/components/base/ui/placement'
|
||||
import { Select as BaseSelect } from '@base-ui/react/select'
|
||||
import { cva } from 'class-variance-authority'
|
||||
import * as React from 'react'
|
||||
import { parsePlacement } from '@/app/components/base/ui/placement'
|
||||
import { cn } from '@/utils/classnames'
|
||||
@ -12,61 +14,110 @@ export const SelectGroup = BaseSelect.Group
|
||||
export const SelectGroupLabel = BaseSelect.GroupLabel
|
||||
export const SelectSeparator = BaseSelect.Separator
|
||||
|
||||
export const selectTriggerVariants = cva(
|
||||
'',
|
||||
{
|
||||
variants: {
|
||||
size: {
|
||||
small: 'h-6 gap-px rounded-md px-[5px] py-0 system-xs-regular',
|
||||
regular: 'h-8 gap-0.5 rounded-lg px-2 py-1 system-sm-regular',
|
||||
large: 'h-9 gap-0.5 rounded-[10px] px-2.5 py-1 system-md-regular',
|
||||
},
|
||||
variant: {
|
||||
default: '',
|
||||
destructive: 'border border-components-input-border-destructive bg-components-input-bg-destructive shadow-xs hover:border-components-input-border-destructive hover:bg-components-input-bg-destructive',
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
size: 'regular',
|
||||
variant: 'default',
|
||||
},
|
||||
},
|
||||
)
|
||||
|
||||
const contentPadding: Record<string, string> = {
|
||||
small: 'px-[3px] py-1',
|
||||
regular: 'p-1',
|
||||
large: 'px-1.5 py-1',
|
||||
}
|
||||
|
||||
type SelectTriggerProps = React.ComponentPropsWithoutRef<typeof BaseSelect.Trigger> & {
|
||||
clearable?: boolean
|
||||
onClear?: () => void
|
||||
loading?: boolean
|
||||
}
|
||||
} & VariantProps<typeof selectTriggerVariants>
|
||||
|
||||
export function SelectTrigger({
|
||||
className,
|
||||
children,
|
||||
size = 'regular',
|
||||
variant = 'default',
|
||||
clearable = false,
|
||||
onClear,
|
||||
loading = false,
|
||||
...props
|
||||
}: SelectTriggerProps) {
|
||||
const showClear = clearable && !loading
|
||||
const paddingClass = contentPadding[size ?? 'regular']
|
||||
const isDestructive = variant === 'destructive'
|
||||
|
||||
let trailingIcon: React.ReactNode = null
|
||||
if (loading) {
|
||||
trailingIcon = (
|
||||
<span className="shrink-0 text-text-quaternary" aria-hidden="true">
|
||||
<span className="i-ri-loader-4-line h-3.5 w-3.5 animate-spin" />
|
||||
</span>
|
||||
)
|
||||
}
|
||||
else if (isDestructive) {
|
||||
trailingIcon = (
|
||||
<span className="shrink-0 text-text-destructive-secondary" aria-hidden="true">
|
||||
<span className="i-ri-error-warning-line h-4 w-4" />
|
||||
</span>
|
||||
)
|
||||
}
|
||||
else if (clearable) {
|
||||
trailingIcon = (
|
||||
<span
|
||||
role="button"
|
||||
aria-label="Clear selection"
|
||||
tabIndex={-1}
|
||||
className="shrink-0 cursor-pointer text-text-quaternary hover:text-text-secondary group-data-[disabled]:hidden group-data-[readonly]:hidden"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
onClear?.()
|
||||
}}
|
||||
onMouseDown={e => e.stopPropagation()}
|
||||
>
|
||||
<span className="i-ri-close-circle-fill h-3.5 w-3.5" aria-hidden="true" />
|
||||
</span>
|
||||
)
|
||||
}
|
||||
else {
|
||||
trailingIcon = (
|
||||
<BaseSelect.Icon className="shrink-0 text-text-quaternary transition-colors group-hover:text-text-secondary data-[open]:text-text-secondary group-data-[readonly]:hidden">
|
||||
<span className="i-ri-arrow-down-s-line h-4 w-4" aria-hidden="true" />
|
||||
</BaseSelect.Icon>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<BaseSelect.Trigger
|
||||
className={cn(
|
||||
'group relative flex h-8 w-full items-center rounded-lg border-0 bg-components-input-bg-normal px-2 text-left text-components-input-text-filled outline-none',
|
||||
'hover:bg-state-base-hover-alt focus-visible:bg-state-base-hover-alt disabled:cursor-not-allowed disabled:opacity-50',
|
||||
'group relative flex w-full items-center border-0 bg-components-input-bg-normal text-left text-components-input-text-filled outline-none',
|
||||
'hover:bg-state-base-hover-alt focus-visible:bg-state-base-hover-alt',
|
||||
'data-[placeholder]:text-components-input-text-placeholder',
|
||||
selectTriggerVariants({ size, variant }),
|
||||
'data-[readonly]:cursor-default data-[readonly]:bg-transparent data-[readonly]:hover:bg-transparent',
|
||||
'data-[disabled]:cursor-not-allowed data-[disabled]:bg-components-input-bg-disabled data-[disabled]:text-components-input-text-filled-disabled data-[disabled]:hover:bg-components-input-bg-disabled',
|
||||
'data-[disabled]:data-[placeholder]:text-components-input-text-disabled',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<span className="grow truncate">{children}</span>
|
||||
{loading
|
||||
? (
|
||||
<span className="ml-1 shrink-0 text-text-quaternary">
|
||||
<span className="i-ri-loader-4-line h-3.5 w-3.5 animate-spin" />
|
||||
</span>
|
||||
)
|
||||
: showClear
|
||||
? (
|
||||
<span
|
||||
role="button"
|
||||
aria-label="Clear selection"
|
||||
tabIndex={-1}
|
||||
className="ml-1 shrink-0 cursor-pointer text-text-quaternary hover:text-text-secondary"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
onClear?.()
|
||||
}}
|
||||
onMouseDown={(e) => {
|
||||
e.stopPropagation()
|
||||
}}
|
||||
>
|
||||
<span className="i-ri-close-circle-fill h-3.5 w-3.5" />
|
||||
</span>
|
||||
)
|
||||
: (
|
||||
<BaseSelect.Icon className="ml-1 shrink-0 text-text-quaternary transition-colors group-hover:text-text-secondary data-[open]:text-text-secondary">
|
||||
<span className="i-ri-arrow-down-s-line h-4 w-4" />
|
||||
</BaseSelect.Icon>
|
||||
)}
|
||||
<span className={cn('min-w-0 grow truncate', paddingClass)}>
|
||||
{children}
|
||||
</span>
|
||||
{trailingIcon}
|
||||
</BaseSelect.Trigger>
|
||||
)
|
||||
}
|
||||
@ -152,11 +203,11 @@ export function SelectItem({
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<BaseSelect.ItemText className="mr-1 grow truncate px-1">
|
||||
<BaseSelect.ItemText className="mr-1 min-w-0 grow truncate px-1">
|
||||
{children}
|
||||
</BaseSelect.ItemText>
|
||||
<BaseSelect.ItemIndicator className="flex shrink-0 items-center text-text-accent">
|
||||
<span className="i-ri-check-line h-4 w-4" />
|
||||
<span className="i-ri-check-line h-4 w-4" aria-hidden="true" />
|
||||
</BaseSelect.ItemIndicator>
|
||||
</BaseSelect.Item>
|
||||
)
|
||||
|
||||
@ -1,24 +1,18 @@
|
||||
'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 { useEffect, useMemo, useRef, useState } from 'react'
|
||||
import { useMemo, useRef, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
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 = {
|
||||
@ -72,15 +66,10 @@ 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')
|
||||
@ -106,18 +95,15 @@ 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)
|
||||
setIsMounted(true)
|
||||
}
|
||||
|
||||
const handleEditorFocus = () => {
|
||||
setIsFocus(true)
|
||||
}
|
||||
|
||||
const handleEditorBlur = () => {
|
||||
setIsFocus(false)
|
||||
}
|
||||
|
||||
const outPutValue = (() => {
|
||||
@ -131,31 +117,23 @@ const CodeEditor: FC<Props> = ({
|
||||
}
|
||||
})()
|
||||
|
||||
const theme = useMemo(() => {
|
||||
if (appTheme === Theme.light)
|
||||
return 'light'
|
||||
return 'vs-dark'
|
||||
}, [appTheme])
|
||||
|
||||
const main = (
|
||||
<>
|
||||
{/* https://www.npmjs.com/package/@monaco-editor/react */}
|
||||
<Editor
|
||||
<ModernMonacoEditor
|
||||
// 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}
|
||||
loading={<span className="text-text-primary">Loading...</span>}
|
||||
readOnly={readOnly}
|
||||
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>
|
||||
// }
|
||||
@ -165,7 +143,6 @@ 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>}
|
||||
</>
|
||||
|
||||
@ -1,13 +1,11 @@
|
||||
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, useEffect, useMemo, useRef } from 'react'
|
||||
import { useCallback, 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 = {
|
||||
@ -35,54 +33,11 @@ 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)
|
||||
|
||||
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) => {
|
||||
const handleEditorReady = useCallback((editor: any) => {
|
||||
editorRef.current = editor
|
||||
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)
|
||||
editor.getModel()?.updateOptions({ tabSize: 2 })
|
||||
}, [])
|
||||
|
||||
const formatJsonContent = useCallback(() => {
|
||||
@ -95,24 +50,6 @@ 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 && (
|
||||
@ -146,19 +83,17 @@ const CodeEditor: FC<CodeEditorProps> = ({
|
||||
)}
|
||||
{topContent}
|
||||
<div className={cn('relative overflow-hidden', editorWrapperClassName)}>
|
||||
<Editor
|
||||
defaultLanguage="json"
|
||||
theme={isMounted ? editorTheme : 'default-theme'} // sometimes not load the default theme
|
||||
<ModernMonacoEditor
|
||||
language="json"
|
||||
value={value}
|
||||
readOnly={readOnly}
|
||||
onChange={handleEditorChange}
|
||||
onMount={handleEditorDidMount}
|
||||
onReady={handleEditorReady}
|
||||
onFocus={onFocus}
|
||||
onBlur={onBlur}
|
||||
loading={<span className="text-text-primary">{t('loading', { ns: 'common' })}</span>}
|
||||
options={{
|
||||
readOnly,
|
||||
domReadOnly: true,
|
||||
minimap: { enabled: false },
|
||||
tabSize: 2,
|
||||
scrollBeyondLastLine: false,
|
||||
wordWrap: 'on',
|
||||
wrappingIndent: 'same',
|
||||
overviewRulerBorder: false,
|
||||
hideCursorInOverviewRuler: true,
|
||||
|
||||
@ -146,6 +146,16 @@ 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()
|
||||
|
||||
@ -32,6 +32,9 @@ export const isEventTargetInputArea = (target: HTMLElement) => {
|
||||
|
||||
if (target.contentEditable === 'true')
|
||||
return true
|
||||
|
||||
if (target.closest?.('.monaco-editor, .monaco-diff-editor'))
|
||||
return true
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
Reference in New Issue
Block a user