forked from bots-garden/ori
| ✨ Workspace panel, selectors, previews, desktop app, sandbox template, resizable file tree, light/dark theme | 1 | /** |
| 2 | * MonacoViewer wraps the Monaco editor for both the read-only code preview | |
| 3 | * and the editable editor pane. It is the only module importing Monaco, and | |
| 4 | * is meant to be lazy-loaded (see CodeView / EditorPane). | |
| 5 | * | |
| 6 | * @example | |
| 7 | * <MonacoViewer content="package main" language="go" readOnly /> | |
| 8 | */ | |
| 9 | ||
| 10 | import Editor, { type OnChange, type OnMount } from "@monaco-editor/react"; | |
| 11 | import "../monaco-setup"; | |
| 12 | import { useTheme } from "../theme"; | |
| 13 | ||
| 14 | interface MonacoViewerProps { | |
| 15 | content: string; | |
| 16 | language: string; | |
| 17 | readOnly?: boolean; | |
| 18 | /** Called with the new text on every edit (editable mode). */ | |
| 19 | onChange?: OnChange; | |
| 20 | /** Gives access to the editor instance (key bindings, focus). */ | |
| 21 | onMount?: OnMount; | |
| 22 | } | |
| 23 | ||
| 24 | export default function MonacoViewer({ | |
| 25 | content, | |
| 26 | language, | |
| 27 | readOnly = false, | |
| 28 | onChange, | |
| 29 | onMount, | |
| 30 | }: MonacoViewerProps) { | |
| 31 | // Monaco has its own palettes; pick the one matching the app theme. | |
| 32 | const theme = | |
| 33 | useTheme((state) => state.theme) === "dark" ? "vs-dark" : "light"; | |
| 34 | return ( | |
| 35 | <Editor | |
| 36 | height="100%" | |
| 37 | language={language} | |
| 38 | value={content} | |
| 39 | theme={theme} | |
| 40 | onChange={onChange} | |
| 41 | onMount={onMount} | |
| 42 | options={{ | |
| 43 | readOnly, | |
| 44 | minimap: { enabled: false }, | |
| 45 | scrollBeyondLastLine: false, | |
| 46 | fontSize: 13, | |
| 47 | automaticLayout: true, | |
| 48 | }} | |
| 49 | /> | |
| 50 | ); | |
| 51 | } |