44 lines
1,000 B
TypeScript
44 lines
1,000 B
TypeScript
import React, { useCallback, useRef } from "react";
|
|
|
|
import Editor from "@monaco-editor/react";
|
|
import { useTheme } from "@saleor/macaw-ui";
|
|
|
|
type Props = {
|
|
onChange(value: string): void;
|
|
initialTemplate: string;
|
|
value: string;
|
|
language: string;
|
|
};
|
|
|
|
export const CodeEditor = ({ initialTemplate, onChange, value, language }: Props) => {
|
|
const { themeType } = useTheme();
|
|
const editorRef = useRef(null);
|
|
|
|
// @ts-ignore
|
|
function handleEditorDidMount(editor, monaco) {
|
|
editorRef.current = editor;
|
|
}
|
|
|
|
const handleOnChange = useCallback(
|
|
(value?: string) => {
|
|
console.log("ON CHANGE");
|
|
onChange(value ?? "");
|
|
},
|
|
[value]
|
|
);
|
|
|
|
return (
|
|
<>
|
|
<Editor
|
|
height="40vh"
|
|
width="100%"
|
|
value={value}
|
|
theme={themeType === "dark" ? "vs-dark" : "vs-light"}
|
|
defaultLanguage={language}
|
|
defaultValue={initialTemplate}
|
|
onMount={handleEditorDidMount}
|
|
onChange={handleOnChange}
|
|
/>
|
|
</>
|
|
);
|
|
};
|