2024-06-03 20:35:06 +02:00
|
|
|
// Copyright 2024, Command Line Inc.
|
|
|
|
// SPDX-License-Identifier: Apache-2.0
|
|
|
|
|
2024-07-25 21:00:35 +02:00
|
|
|
import { useHeight } from "@/app/hook/useHeight";
|
2024-06-03 20:35:06 +02:00
|
|
|
import loader from "@monaco-editor/loader";
|
|
|
|
import { Editor, Monaco } from "@monaco-editor/react";
|
|
|
|
import type * as MonacoTypes from "monaco-editor/esm/vs/editor/editor.api";
|
2024-07-25 21:00:35 +02:00
|
|
|
import { useEffect, useRef } from "react";
|
2024-07-18 08:41:33 +02:00
|
|
|
|
2024-07-25 21:00:35 +02:00
|
|
|
import { adaptFromReactOrNativeKeyEvent, checkKeyPressed } from "@/util/keyutil";
|
2024-07-18 08:41:33 +02:00
|
|
|
import "./codeeditor.less";
|
2024-06-03 20:35:06 +02:00
|
|
|
|
|
|
|
// there is a global monaco variable (TODO get the correct TS type)
|
|
|
|
declare var monaco: Monaco;
|
|
|
|
|
|
|
|
function loadMonaco() {
|
2024-06-14 01:49:25 +02:00
|
|
|
loader.config({ paths: { vs: "monaco" } });
|
2024-06-03 20:35:06 +02:00
|
|
|
loader
|
|
|
|
.init()
|
|
|
|
.then(() => {
|
|
|
|
monaco.editor.defineTheme("wave-theme-dark", {
|
|
|
|
base: "hc-black",
|
|
|
|
inherit: true,
|
|
|
|
rules: [],
|
|
|
|
colors: {
|
|
|
|
"editor.background": "#000000",
|
|
|
|
},
|
|
|
|
});
|
|
|
|
monaco.editor.defineTheme("wave-theme-light", {
|
|
|
|
base: "hc-light",
|
|
|
|
inherit: true,
|
|
|
|
rules: [],
|
|
|
|
colors: {
|
|
|
|
"editor.background": "#fefefe",
|
|
|
|
},
|
|
|
|
});
|
|
|
|
})
|
|
|
|
.catch((e) => {
|
|
|
|
console.error("error loading monaco", e);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
// TODO: need to update these on theme change (pull from CSS vars)
|
|
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
|
|
setTimeout(loadMonaco, 30);
|
|
|
|
});
|
|
|
|
|
|
|
|
function defaultEditorOptions(): MonacoTypes.editor.IEditorOptions {
|
|
|
|
const opts: MonacoTypes.editor.IEditorOptions = {
|
|
|
|
scrollBeyondLastLine: false,
|
|
|
|
fontSize: 12,
|
|
|
|
fontFamily: "Hack",
|
2024-07-18 08:41:33 +02:00
|
|
|
smoothScrolling: true,
|
|
|
|
scrollbar: {
|
|
|
|
useShadows: false,
|
|
|
|
verticalScrollbarSize: 5,
|
|
|
|
horizontalScrollbarSize: 5,
|
|
|
|
},
|
2024-06-03 20:35:06 +02:00
|
|
|
};
|
|
|
|
return opts;
|
|
|
|
}
|
|
|
|
|
2024-07-25 21:00:35 +02:00
|
|
|
interface CodeEditorProps {
|
|
|
|
parentRef: React.MutableRefObject<HTMLDivElement>;
|
2024-06-05 02:58:29 +02:00
|
|
|
text: string;
|
2024-06-06 23:52:01 +02:00
|
|
|
filename: string;
|
2024-07-25 21:00:35 +02:00
|
|
|
readonly: boolean;
|
|
|
|
language?: string;
|
2024-07-18 08:41:33 +02:00
|
|
|
onChange?: (text: string) => void;
|
2024-07-25 21:00:35 +02:00
|
|
|
onSave?: () => void;
|
|
|
|
onCancel?: () => void;
|
|
|
|
onEdit?: () => void;
|
2024-06-05 02:58:29 +02:00
|
|
|
}
|
|
|
|
|
2024-07-25 21:00:35 +02:00
|
|
|
export function CodeEditor({
|
|
|
|
readonly = false,
|
|
|
|
parentRef,
|
|
|
|
text,
|
|
|
|
language,
|
|
|
|
filename,
|
|
|
|
onChange,
|
|
|
|
onSave,
|
|
|
|
onCancel,
|
|
|
|
onEdit,
|
|
|
|
}: CodeEditorProps) {
|
2024-07-18 08:41:33 +02:00
|
|
|
const divRef = useRef<HTMLDivElement>(null);
|
|
|
|
|
2024-07-25 21:00:35 +02:00
|
|
|
const parentHeight = useHeight(parentRef);
|
2024-07-18 08:41:33 +02:00
|
|
|
const theme = "wave-theme-dark";
|
|
|
|
|
|
|
|
useEffect(() => {
|
2024-07-25 21:00:35 +02:00
|
|
|
function handleKeyDown(e: KeyboardEvent) {
|
|
|
|
const waveEvent = adaptFromReactOrNativeKeyEvent(e);
|
|
|
|
if (onSave) {
|
|
|
|
if (checkKeyPressed(waveEvent, "Cmd:s")) {
|
|
|
|
e.preventDefault();
|
|
|
|
onSave();
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
if (onCancel) {
|
|
|
|
if (checkKeyPressed(waveEvent, "Cmd:r")) {
|
|
|
|
e.preventDefault();
|
|
|
|
onCancel();
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
if (onEdit) {
|
|
|
|
if (checkKeyPressed(waveEvent, "Cmd:e")) {
|
|
|
|
e.preventDefault();
|
|
|
|
onEdit();
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
}
|
2024-06-03 20:35:06 +02:00
|
|
|
}
|
2024-07-18 08:41:33 +02:00
|
|
|
|
2024-07-25 21:00:35 +02:00
|
|
|
const currentParentRef = parentRef.current;
|
|
|
|
currentParentRef.addEventListener("keydown", handleKeyDown);
|
2024-06-03 20:35:06 +02:00
|
|
|
|
2024-07-25 21:00:35 +02:00
|
|
|
return () => {
|
|
|
|
currentParentRef.removeEventListener("keydown", handleKeyDown);
|
|
|
|
};
|
|
|
|
}, [onSave, onCancel, onEdit]);
|
2024-06-03 20:35:06 +02:00
|
|
|
|
2024-07-18 08:41:33 +02:00
|
|
|
function handleEditorChange(text: string, ev: MonacoTypes.editor.IModelContentChangedEvent) {
|
2024-07-25 21:00:35 +02:00
|
|
|
if (onChange) {
|
|
|
|
onChange(text);
|
|
|
|
}
|
2024-06-03 20:35:06 +02:00
|
|
|
}
|
|
|
|
|
2024-08-01 04:41:16 +02:00
|
|
|
function handleEditorOnMount(editor: MonacoTypes.editor.IStandaloneCodeEditor, monaco: Monaco) {
|
|
|
|
// bind Cmd:e
|
|
|
|
editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyE, () => {
|
|
|
|
if (onEdit) {
|
|
|
|
onEdit();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
// bind Cmd:s
|
|
|
|
editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => {
|
|
|
|
if (onSave) {
|
|
|
|
onSave();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
// bind Cmd:r
|
|
|
|
editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyR, () => {
|
|
|
|
if (onCancel) {
|
|
|
|
onCancel();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2024-06-03 20:35:06 +02:00
|
|
|
const editorOpts = defaultEditorOptions();
|
2024-06-05 02:58:29 +02:00
|
|
|
editorOpts.readOnly = readonly;
|
2024-06-03 20:35:06 +02:00
|
|
|
|
|
|
|
return (
|
2024-07-18 08:41:33 +02:00
|
|
|
<div className="code-editor-wrapper">
|
|
|
|
<div className="code-editor" ref={divRef}>
|
2024-07-25 21:00:35 +02:00
|
|
|
<Editor
|
|
|
|
theme={theme}
|
|
|
|
height={parentHeight}
|
|
|
|
value={text}
|
|
|
|
options={editorOpts}
|
|
|
|
onChange={handleEditorChange}
|
2024-08-01 04:41:16 +02:00
|
|
|
onMount={handleEditorOnMount}
|
2024-07-25 21:00:35 +02:00
|
|
|
path={filename}
|
|
|
|
language={language}
|
|
|
|
/>
|
2024-06-14 01:49:25 +02:00
|
|
|
</div>
|
2024-06-03 20:35:06 +02:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|