Repository navigation
Code Editor - add documentation how to use JSON Schemas #10647
Description
Activity
The process to load a JSON Schema in the code editor (used for both JSON and YAML autocompletion) looks like the following:
- create a
beforeMountcallback that will receive themonacoinstance and use theconfigureMonacoYamlfunction from themonaco-yamlpackage to set the desired JSON Schema. - Capture the output of the
configureMonacoYamlfunction into aRefso we can dispose of it when the component is unmounted, otherwise the yaml worker is not released and a duplicated autocompletion appears in addition to the memory leak - Provide an empty
useEffectthat returns a dispose function, so we ensure it executes when leaving the component.
For reference:
Setting the schema
const editorProps = useRef({ beforeMount: (monaco) => { if (currentSchema) { // Keep the output of the `configureMonacoYaml` function const monacoYamlHandler = configureMonacoYaml(monaco, { enableSchemaRequest: true, hover: true, completion: true, validate: true, format: true, schemas: [ { schema: '<your schema goes here>', uri: '<your schema URI>', fileMatch: ['*'], }, ], }); /** Capturing the monacoYamlHandlerRef so we can dispose it when unmounting this component */ monacoYamlHandlerRef.current = monacoYamlHandler; } }, });
Disposing the workers
useEffect(() => { /** * This useEffect acts as an unmount hook for the CodeEditor component * It disposes the monacoYamlHandlerRef.current when the component is unmounted */ return () => { monacoYamlHandlerRef.current?.dispose(); }; }, []);
Setting the editorProps
return ( <CodeEditor language={Language.yaml} editorProps={editorProps.current!} />
- create a
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
It is not super straight forward to get the beforeMount call to cooperate with yaml parsing and many people using our code editor are using it for parsing/editing yaml files.
it might be wise to add an example which includes yaml parsing. A working example in a codebase is in this PR: https://github.com/KaotoIO/kaoto/pull/1179/files#diff-c64390323d50afca275373be6b4e3da7e76d1faefb849499e4aa47ae537c7b36
This request originates from this slack thread.
Jira Issue: PF-52