| 98 | _: editor.IStandaloneCodeEditor, |
| 99 | monaco: Monaco, |
| 100 | ) => void = (_, monaco) => { |
| 101 | if (typeof window !== 'undefined') { |
| 102 | window['__MONACO_LOADED__'] = true; |
| 103 | } |
| 104 | setMonaco(monaco); |
| 105 | |
| 106 | const tscOptions = { |
| 107 | allowNonTsExtensions: true, |
| 108 | target: monaco.languages.typescript.ScriptTarget.ES2015, |
| 109 | moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs, |
| 110 | jsx: monaco.languages.typescript.JsxEmit.Preserve, |
| 111 | typeRoots: ['node_modules/@types'], |
| 112 | allowSyntheticDefaultImports: true, |
| 113 | }; |
| 114 | monaco.languages.typescript.javascriptDefaults.setCompilerOptions( |
| 115 | tscOptions, |
| 116 | ); |
| 117 | monaco.languages.typescript.typescriptDefaults.setCompilerOptions({ |
| 118 | ...tscOptions, |
| 119 | checkJs: true, |
| 120 | allowJs: true, |
| 121 | }); |
| 122 | |
| 123 | // Add React type declarations to Monaco |
| 124 | const reactLib = [ |
| 125 | React$Types, |
| 126 | 'file:///node_modules/@types/react/index.d.ts', |
| 127 | ] as [any, string]; |
| 128 | monaco.languages.typescript.javascriptDefaults.addExtraLib(...reactLib); |
| 129 | monaco.languages.typescript.typescriptDefaults.addExtraLib(...reactLib); |
| 130 | |
| 131 | /** |
| 132 | * Remeasure the font in case the custom font is loaded only after |
| 133 | * Monaco Editor is mounted. |
| 134 | * N.B. that this applies also to the output editor as it seems |
| 135 | * Monaco Editor instances share the same font config. |
| 136 | */ |
| 137 | document.fonts.ready.then(() => { |
| 138 | monaco.editor.remeasureFonts(); |
| 139 | }); |
| 140 | }; |
| 141 | |
| 142 | const editorContent = ( |
| 143 | <MonacoEditor |