Code Editor - add documentation how to use JSON Schemas #10647

Activity

1. nicolethoen

   added

   Documentation 📝

   on Jun 24, 2024
2. patternfly-build

   added this to PatternFly Issueson Jun 24, 2024
3. github-project-automation

   moved this to Needs triage in PatternFly Issueson Jun 24, 2024
4. lordrip commented on Jul 12, 2024

   

   lordrip

   on Jul 12, 2024

   More actions

   The process to load a JSON Schema in the code editor (used for both JSON and YAML autocompletion) looks like the following:

   1. create a beforeMount callback that will receive the monaco instance and use the configureMonacoYaml function from the monaco-yaml package to set the desired JSON Schema.
   2. Capture the output of the configureMonacoYaml function into a Ref so 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
   3. Provide an empty useEffect that 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!}
       />
5. tlabaj

   moved this from Needs triage to Backlog in PatternFly Issueson Aug 27, 2024
6. github-actions commented on Sep 11, 2024

   

   github-actionsBot

   on Sep 11, 2024 – with GitHub Actions

   More actions

   This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
7. github-actions

   added

   wontfix

   on Sep 11, 2024
8. nicolethoen

   added

   Pinned

   and removed

   wontfix

   on Sep 17, 2024
9. nicolethoen

   added

   PF Team

   on Apr 29, 2026