Migrate to twenty-ui - input/code-editor (#8072)

This PR was created by [GitStart](https://gitstart.com/) to address the requirements from this ticket: [TWNTY-7062](https://clients.gitstart.com/twenty/5449/tickets/TWNTY-7062). --- ### Description. Migrate `code-editor` component to twenty ui.\ \ Fixes twentyhq/private-issues#94 --------- Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com> Co-authored-by: Charles Bochet <charles@twenty.com>
2024-10-28 13:34:06 +01:00
parent fa0933b292
commit 9b6359984d
9 changed files with 24 additions and 10 deletions
@@ -0,0 +1,55 @@
+import { useTheme } from '@emotion/react';
+import Editor, { EditorProps } from '@monaco-editor/react';
+import { codeEditorTheme } from '@ui/input';
+import { isDefined } from '@ui/utilities';
+
+export type CodeEditorPackage = {
+  [packageName: string]: string;
+};
+
+type CodeEditorProps = Omit<EditorProps, 'onChange'> & {
+  onChange?: (value: string) => void;
+};
+
+export const CodeEditor = ({
+  value,
+  language,
+  onMount,
+  onChange,
+  onValidate,
+  height = 450,
+  options,
+}: CodeEditorProps) => {
+  const theme = useTheme();
+
+  return (
+    <Editor
+      height={height}
+      value={value}
+      language={language}
+      onMount={(editor, monaco) => {
+        monaco.editor.defineTheme('codeEditorTheme', codeEditorTheme(theme));
+        monaco.editor.setTheme('codeEditorTheme');
+
+        onMount?.(editor, monaco);
+      }}
+      onChange={(value) => {
+        if (isDefined(value)) {
+          onChange?.(value);
+        }
+      }}
+      onValidate={onValidate}
+      options={{
+        overviewRulerLanes: 0,
+        scrollbar: {
+          vertical: 'hidden',
+          horizontal: 'hidden',
+        },
+        minimap: {
+          enabled: false,
+        },
+        ...options,
+      }}
+    />
+  );
+};