fix(json-schema-editor): Add container reference for resize observer in CodeEditor; Update language hook and help doc URL in JsonSchemaConfig (#20488)

This commit is contained in:
Wu Tianwei 2025-05-30 13:54:12 +08:00 committed by GitHub
parent f65c2fcb1d
commit 9b47f9f786
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 22 additions and 15 deletions

View File

@ -28,6 +28,7 @@ const CodeEditor: FC<CodeEditorProps> = ({
const { theme } = useTheme()
const monacoRef = useRef<any>(null)
const editorRef = useRef<any>(null)
const containerRef = useRef<HTMLDivElement>(null)
useEffect(() => {
if (monacoRef.current) {
@ -74,6 +75,19 @@ const CodeEditor: FC<CodeEditorProps> = ({
onUpdate?.(value)
}, [onUpdate])
useEffect(() => {
const resizeObserver = new ResizeObserver(() => {
editorRef.current?.layout()
})
if (containerRef.current)
resizeObserver.observe(containerRef.current)
return () => {
resizeObserver.disconnect()
}
}, [])
return (
<div className={classNames('flex flex-col h-full bg-components-input-bg-normal overflow-hidden', className)}>
<div className='flex items-center justify-between pl-2 pr-1 pt-1'>
@ -102,9 +116,11 @@ const CodeEditor: FC<CodeEditorProps> = ({
</Tooltip>
</div>
</div>
<div className={classNames('relative', editorWrapperClassName)}>
<div
ref={containerRef}
className={classNames('relative overflow-hidden', editorWrapperClassName)}
>
<Editor
height='100%'
defaultLanguage='json'
value={value}
onChange={handleEditorChange}
@ -117,7 +133,6 @@ const CodeEditor: FC<CodeEditorProps> = ({
scrollBeyondLastLine: false,
wordWrap: 'on',
wrappingIndent: 'same',
// Add these options
overviewRulerBorder: false,
hideCursorInOverviewRuler: true,
renderLineHighlightOnlyWhenFocus: false,

View File

@ -21,7 +21,7 @@ import { MittProvider, VisualEditorContextProvider, useMittContext } from './vis
import ErrorMessage from './error-message'
import { useVisualEditorStore } from './visual-editor/store'
import Toast from '@/app/components/base/toast'
import { useGetLanguage } from '@/context/i18n'
import { useGetDocLanguage } from '@/context/i18n'
import { JSON_SCHEMA_MAX_DEPTH } from '@/config'
type JsonSchemaConfigProps = {
@ -47,21 +47,13 @@ const DEFAULT_SCHEMA: SchemaRoot = {
additionalProperties: false,
}
const HELP_DOC_URL = {
zh_Hans: 'https://docs.dify.ai/zh-hans/guides/workflow/structured-outputs',
en_US: 'https://docs.dify.ai/en/guides/workflow/structured-outputs',
ja_JP: 'https://docs.dify.ai/ja-jp/guides/workflow/structured-outputs',
}
type LocaleKey = keyof typeof HELP_DOC_URL
const JsonSchemaConfig: FC<JsonSchemaConfigProps> = ({
defaultSchema,
onSave,
onClose,
}) => {
const { t } = useTranslation()
const locale = useGetLanguage() as LocaleKey
const docLanguage = useGetDocLanguage()
const [currentTab, setCurrentTab] = useState(SchemaView.VisualEditor)
const [jsonSchema, setJsonSchema] = useState(defaultSchema || DEFAULT_SCHEMA)
const [json, setJson] = useState(JSON.stringify(jsonSchema, null, 2))
@ -260,7 +252,7 @@ const JsonSchemaConfig: FC<JsonSchemaConfigProps> = ({
<div className='flex items-center gap-x-2 p-6 pt-5'>
<a
className='flex grow items-center gap-x-1 text-text-accent'
href={HELP_DOC_URL[locale]}
href={`https://docs.dify.ai/${docLanguage}/guides/workflow/structured-outputs`}
target='_blank'
rel='noopener noreferrer'
>

View File

@ -12,7 +12,7 @@ const SchemaEditor: FC<SchemaEditorProps> = ({
}) => {
return (
<CodeEditor
className='rounded-xl'
className='grow rounded-xl'
editorWrapperClassName='grow'
value={schema}
onUpdate={onUpdate}