homeio

1"use client";
2
3import { useEffect, useRef, useState } from "react";
4
5function getMonacoTheme() {
6  if (typeof document === "undefined") return "vs-dark";
7
8  const theme = document.documentElement.dataset.desktopTheme;
9  if (theme === "light") return "vs";
10  if (theme === "dark") return "vs-dark";
11
12  return window.matchMedia("(prefers-color-scheme: dark)").matches
13    ? "vs-dark"
14    : "vs";
15}
16
17const MONACO_CDN_BASE =
18  "https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.52.2/min";
19
20type MonacoSubscription = { dispose: () => void };
21type MonacoModel = { dispose: () => void };
22type MonacoEditorInstance = {
23  onDidChangeModelContent: (listener: () => void) => MonacoSubscription;
24  addCommand: (keybinding: number, handler: () => void) => string | null;
25  getValue: () => string;
26  layout: () => void;
27  getModel: () => MonacoModel | null;
28  dispose: () => void;
29  __changeSub?: MonacoSubscription;
30};
31type MonacoNamespace = {
32  editor: {
33    createModel: (value: string, language: string) => MonacoModel;
34    create: (
35      container: HTMLElement,
36      options: Record<string, unknown>,
37    ) => MonacoEditorInstance;
38    setTheme: (theme: string) => void;
39  };
40};
41type MonacoRequire = {
42  config: (config: { paths: { vs: string } }) => void;
43  (deps: string[], onLoad: () => void, onError: (error: unknown) => void): void;
44};
45
46let monacoLoaderPromise: Promise<MonacoNamespace> | null = null;
47
48function loadMonacoFromCdn(): Promise<MonacoNamespace> {
49  if (typeof window === "undefined") {
50    return Promise.reject(new Error("Monaco can only load in the browser"));
51  }
52
53  const win = window as typeof window & {
54    monaco?: MonacoNamespace;
55    require?: MonacoRequire;
56  };
57  if (win.monaco?.editor) return Promise.resolve(win.monaco);
58  if (monacoLoaderPromise) return monacoLoaderPromise;
59
60  monacoLoaderPromise = new Promise((resolve, reject) => {
61    const fail = (err: unknown) => {
62      monacoLoaderPromise = null;
63      reject(err instanceof Error ? err : new Error(String(err)));
64    };
65
66    const boot = () => {
67      const monacoRequire = win.require;
68      if (!monacoRequire) {
69        fail(new Error("Monaco loader is unavailable"));
70        return;
71      }
72      monacoRequire.config({ paths: { vs: `${MONACO_CDN_BASE}/vs` } });
73      monacoRequire(
74        ["vs/editor/editor.main"],
75        () => {
76          if (!win.monaco) {
77            fail(new Error("Monaco editor did not initialize"));
78            return;
79          }
80          resolve(win.monaco);
81        },
82        fail,
83      );
84    };
85
86    const existingRequire = win.require as MonacoRequire | undefined;
87    if (existingRequire) {
88      boot();
89      return;
90    }
91
92    const existing = document.getElementById(
93      "monaco-loader-script",
94    ) as HTMLScriptElement | null;
95    if (existing) {
96      existing.addEventListener("load", boot, { once: true });
97      existing.addEventListener(
98        "error",
99        () => fail(new Error("Failed to load Monaco loader script")),
100        { once: true },
101      );
102      return;
103    }
104
105    const script = document.createElement("script");
106    script.id = "monaco-loader-script";
107    script.src = `${MONACO_CDN_BASE}/vs/loader.min.js`;
108    script.async = true;
109    script.onload = boot;
110    script.onerror = () => fail(new Error("Failed to load Monaco loader script"));
111    document.body.appendChild(script);
112  });
113
114  return monacoLoaderPromise;
115}
116
117export function MonacoEditorPane({
118  language,
119  value,
120  onChange,
121  onSave,
122}: {
123  language: string;
124  value: string;
125  onChange: (value: string) => void;
126  onSave?: () => void;
127}) {
128  const containerRef = useRef<HTMLDivElement>(null);
129  const onChangeRef = useRef(onChange);
130  const onSaveRef = useRef(onSave);
131  const [fallbackMode, setFallbackMode] = useState(false);
132
133  useEffect(() => {
134    onChangeRef.current = onChange;
135  }, [onChange]);
136
137  useEffect(() => {
138    onSaveRef.current = onSave;
139  }, [onSave]);
140
141  useEffect(() => {
142    let mounted = true;
143    let editor: MonacoEditorInstance | undefined;
144    let resizeObserver: ResizeObserver | null = null;
145    let themeObserver: MutationObserver | null = null;
146
147    loadMonacoFromCdn()
148      .then((monaco) => {
149        if (!mounted || !containerRef.current) return;
150        const model = monaco.editor.createModel(value, language);
151        const currentEditor = monaco.editor.create(containerRef.current, {
152          model,
153          theme: getMonacoTheme(),
154          minimap: { enabled: false },
155          automaticLayout: true,
156          fontSize: 13,
157          lineHeight: 20,
158          scrollBeyondLastLine: false,
159          roundedSelection: false,
160          padding: { top: 12, bottom: 12 },
161        });
162        editor = currentEditor;
163
164        const changeSub = currentEditor.onDidChangeModelContent(() => {
165          onChangeRef.current(currentEditor.getValue());
166        });
167
168        // KeyMod.CtrlCmd | KeyCode.KeyS = 2048 | 49 = 2097 (platform-aware Cmd/Ctrl+S)
169        currentEditor.addCommand(2097, () => {
170          onSaveRef.current?.();
171        });
172
173        if (typeof ResizeObserver !== "undefined" && containerRef.current) {
174          resizeObserver = new ResizeObserver(() => {
175            currentEditor.layout();
176          });
177          resizeObserver.observe(containerRef.current);
178        }
179
180        themeObserver = new MutationObserver(() => {
181          monaco.editor.setTheme(getMonacoTheme());
182        });
183        themeObserver.observe(document.documentElement, {
184          attributes: true,
185          attributeFilter: ["data-desktop-theme"],
186        });
187
188        currentEditor.__changeSub = changeSub;
189      })
190      .catch(() => {
191        if (mounted) setFallbackMode(true);
192      });
193
194    return () => {
195      mounted = false;
196      resizeObserver?.disconnect();
197      themeObserver?.disconnect();
198      if (editor?.__changeSub) editor.__changeSub.dispose();
199      const model = editor?.getModel?.();
200      if (model) model.dispose();
201      if (editor?.dispose) editor.dispose();
202    };
203    // Monaco model is initialized once per language to avoid recreating editor per keystroke.
204    // eslint-disable-next-line react-hooks/exhaustive-deps
205  }, [language]);
206
207  if (fallbackMode) {
208    return (
209      <div className="flex h-full flex-col">
210        <div className="border-b border-glass-border bg-status-amber/10 px-3 py-2 text-xs text-status-amber">
211          Monaco failed to load. Showing fallback editor.
212        </div>
213        <textarea
214          value={value}
215          onChange={(event) => onChange(event.target.value)}
216          className="h-full w-full resize-none border-0 bg-card/90 p-4 font-mono text-sm leading-5 text-foreground outline-none"
217          spellCheck={false}
218        />
219      </div>
220    );
221  }
222
223  return <div ref={containerRef} className="h-full w-full bg-card/90" />;
224}
225