Realtime Monaco

1'use client'
2 
3import { Editor } from '@monaco-editor/react'
4import { SupabasePersistenceOptions } from '@supabase-labs/y-supabase'
5import { Awareness } from 'y-protocols/awareness.js'
6 
7import { useConnectOnMount } from '../hooks/use-connect-on-mount'
8 
9type RealtimeMonacoProps = {
10  channel: string
11  language?: string
12  height?: string | number
13  className?: string
14  awareness?: boolean | Awareness
15  persistence?: boolean | SupabasePersistenceOptions
16  theme?: 'light' | 'dark'
17}
18 
19const DEFAULT_HEIGHT = 550
20 
21const RealtimeMonaco = ({
22  channel,
23  language = 'javascript',
24  height = DEFAULT_HEIGHT,
25  awareness = true,
26  persistence,
27  theme,
28  ...rest
29}: RealtimeMonacoProps) => {
30  const { connectOnMount } = useConnectOnMount({ channel, persistence, awareness })
31 
32  return (
33    <Editor
34      height={height}
35      language={language}
36      theme={theme === 'dark' ? 'vs-dark' : 'light'}
37      onMount={connectOnMount}
38      {...rest}
39    />
40  )
41}
42 
43export { RealtimeMonaco }