mirror of
https://git.mirrors.martin98.com/https://github.com/langgenius/dify.git
synced 2025-06-30 18:55:08 +08:00
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:
parent
f65c2fcb1d
commit
9b47f9f786
@ -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,
|
||||||
|
@ -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'
|
||||||
>
|
>
|
||||||
|
@ -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}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user