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

View File

@ -21,7 +21,7 @@ import { MittProvider, VisualEditorContextProvider, useMittContext } from './vis
import ErrorMessage from './error-message' import ErrorMessage from './error-message'
import { useVisualEditorStore } from './visual-editor/store' import { useVisualEditorStore } from './visual-editor/store'
import Toast from '@/app/components/base/toast' import Toast from '@/app/components/base/toast'
import { useGetLanguage } from '@/context/i18n' import { useGetDocLanguage } from '@/context/i18n'
import { JSON_SCHEMA_MAX_DEPTH } from '@/config' import { JSON_SCHEMA_MAX_DEPTH } from '@/config'
type JsonSchemaConfigProps = { type JsonSchemaConfigProps = {
@ -47,21 +47,13 @@ const DEFAULT_SCHEMA: SchemaRoot = {
additionalProperties: false, 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> = ({ const JsonSchemaConfig: FC<JsonSchemaConfigProps> = ({
defaultSchema, defaultSchema,
onSave, onSave,
onClose, onClose,
}) => { }) => {
const { t } = useTranslation() const { t } = useTranslation()
const locale = useGetLanguage() as LocaleKey const docLanguage = useGetDocLanguage()
const [currentTab, setCurrentTab] = useState(SchemaView.VisualEditor) const [currentTab, setCurrentTab] = useState(SchemaView.VisualEditor)
const [jsonSchema, setJsonSchema] = useState(defaultSchema || DEFAULT_SCHEMA) const [jsonSchema, setJsonSchema] = useState(defaultSchema || DEFAULT_SCHEMA)
const [json, setJson] = useState(JSON.stringify(jsonSchema, null, 2)) 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'> <div className='flex items-center gap-x-2 p-6 pt-5'>
<a <a
className='flex grow items-center gap-x-1 text-text-accent' 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' target='_blank'
rel='noopener noreferrer' rel='noopener noreferrer'
> >

View File

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