CodeEditor

import { CodeEditor, CodeEditorHeader } from 'twenty-ui/components/code-editor';

export const WorkspaceEditor = () => (
  <>
    <CodeEditorHeader title="workspace.json" />
    <CodeEditor
      variant="with-header"
      language="json"
      defaultValue={JSON.stringify(
        { name: 'Acme', plan: 'Pro', seats: 12 },
        null,
        2,
      )}
      height={160}
    />
  </>
);

yarn add @monaco-editor/react monaco-editor

import { useState } from 'react';
import { isDefined } from 'twenty-ui/utilities';
import { CodeEditor } from 'twenty-ui/components/code-editor';

export const PayloadEditor = () => {
  const [payload, setPayload] = useState('{\n  "name": "Acme"\n}');

  return (
    <CodeEditor
      language="json"
      value={payload}
      onChange={(value) => {
        if (isDefined(value)) {
          setPayload(value);
        }
      }}
      height={200}
    />
  );
};

import { CodeEditor } from 'twenty-ui/components/code-editor';

export const FileEditor = () => (
  <CodeEditor
    defaultPath="file:///workspace/settings.json"
    defaultLanguage="json"
    defaultValue={'{\n  "name": "Acme"\n}'}
    saveViewState
  />
);

import { useRef } from 'react';
import { CodeEditor } from 'twenty-ui/components/code-editor';

export const NamedEditor = () => {
  const containerRef = useRef<HTMLDivElement>(null);

  return (
    <CodeEditor
      ref={containerRef}
      containerProps={{ id: 'payload-editor' }}
      wrapperProps={{ 'data-editor-surface': 'payload' }}
      options={{ ariaLabel: 'Payload code' }}
    />
  );
};

import { CodeEditor, CodeEditorHeader } from 'twenty-ui/components/code-editor';
import { Button } from 'twenty-ui/primitives/input';

type ScriptEditorProps = {
  script: string;
  onRun: () => void;
};

export const ScriptEditor = ({ script, onRun }: ScriptEditorProps) => (
  <div>
    <CodeEditorHeader
      title="index.ts"
      endElement={
        <Button size="sm" onClick={onRun}>
          Run
        </Button>
      }
    />
    <CodeEditor language="typescript" value={script} variant="with-header" />
  </div>
);