···66import Schema from "@site/static/schemas/aio.json";
77import ConfigExample from "@site/static/configExample.json";
88import './Playground.scss';
99-import { JsonSchemaViewer } from 'cf-json-schema-viz';
99+import { JSONSchema, JsonSchemaViewer } from 'cf-json-schema-viz';
1010import "./json-schema-viewer-styles.css";
1111import "./modern-json-react-styles.css";
1212-import { ReactJsonEditor, createAjvValidator, type Content } from 'modern-react-json-editor';
1212+import { Mode, ReactJsonEditor, createAjvValidator, type Content } from 'modern-react-json-editor';
1313import f from "ajv-formats"
1414import DetailsAdmo from "./AdmonitionDetails";
1515···4747 <p>Use this to understand how to write a valid config.</p>
4848 </DetailsAdmo>
4949 <JsonSchemaViewer
5050- name="Todos Model"
5151- schema={Schema}
5252- expanded={false}
5353- hideTopBar={false}
5050+ schema={Schema as JSONSchema}
5151+ // expanded={false}
5252+ // hideTopBar={false}
5453 renderRootTreeLines={true}
5554 emptyText="No schema defined"
5655 defaultExpandedDepth={0}
···9392 validator={validator}
9493 theme={colorMode}
9594 content={data}
9696- mode="text"
9595+ mode={"text" as Mode.text}
9796 style={{height: 'initial'}}
9897 />
9998 )}
-7
docsite/src/components/Schema/ExplorerSSR.tsx
···11-import Schema from "@site/static/aio.json";
22-import Explorer from './Explorer';
33-44-export default function ExplorerSSR(): JSX.Element {
55-66- return <Explorer schema={Schema}/>
77-}
+2-2
docsite/src/components/Schema/SchemaEditor.tsx
···4455const STRINGIFY_JSON = (json: unknown) => JSON.stringify(json, null, "\t");
66import "../modern-json-react-styles.css";
77-import { JSONSchema, ReactJsonEditor, createAjvValidator, type Content, type Validator } from 'modern-react-json-editor';
77+import { JSONSchema, Mode, ReactJsonEditor, createAjvValidator, type Content, type Validator } from 'modern-react-json-editor';
88import f from "ajv-formats"
99import json5 from 'json5';
1010···5858 <ReactJsonEditor
5959 validator={validator}
6060 theme={colorMode}
6161- mode="text"
6161+ mode={"text" as Mode.text}
6262 content={initialData}
6363 style={{height: 'initial'}}
6464 />
-50
docsite/src/contexts/PlaygroundContext.tsx
···11-import { useContext, createContext } from "react"
22-33-// Type I need for useRef
44-import type { MonacoEditorTypes } from "@theme/MonacoEditor"
55-66-export type State = {
77- // The full schema
88- // We might need to scope it with a JSON Pointer
99- fullSchema: unknown
1010- // The current schema displayed (after the json pointer)
1111- userSchema: unknown
1212- // The current json pointer
1313- jsonPointer: string
1414- // Schema editor ref
1515- schemaRef: undefined | MonacoEditorTypes.IStandaloneCodeEditor
1616- // Data editor ref
1717- editorRef: undefined | MonacoEditorTypes.IStandaloneCodeEditor
1818- // Data on the data editor
1919- // When using "Infer schema from data", it would be annoying to lose our written
2020- data: string
2121- // Errors in schema
2222- schemaErrors: MonacoEditorTypes.IMarkerData[]
2323- // Errors in data
2424- dataErrors: MonacoEditorTypes.IMarkerData[]
2525-}
2626-2727-export type Playground = {
2828- // state
2929- state: State
3030- // update function
3131- updateState: (_: Partial<State>) => void
3232-}
3333-3434-export const PlaygroundContext = createContext<Playground>({
3535- state: {
3636- fullSchema: {},
3737- userSchema: {},
3838- jsonPointer: "",
3939- data: "{}",
4040- schemaRef: undefined,
4141- editorRef: undefined,
4242- schemaErrors: [],
4343- dataErrors: [],
4444- },
4545- updateState: () => {},
4646-})
4747-4848-export const usePlaygroundContext = () => useContext(PlaygroundContext)
4949-5050-export const PlaygroundContextProvider = PlaygroundContext.Provider
···22 // This file is not used in compilation. It is here just for a nice editor experience.
33 "extends": "@docusaurus/tsconfig",
44 "compilerOptions": {
55+ "jsx": "react-jsx",
56 "baseUrl": ".",
67 "resolveJsonModule": true,
78 "types": ["node", "@docusaurus/module-type-aliases", "@docusaurus/theme-classic","docusaurus-plugin-sass"]