diff --git a/package.json b/package.json index 87c61aa..ffe3754 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ "@cashscript/utils": "^0.12.0", "@emotion/react": "^11.14.0", "@emotion/styled": "^11.14.0", - "@monaco-editor/react": "^3.6.2", + "@monaco-editor/react": "^4.7.0", "bootstrap": "^5.3.7", "cashc": "^0.12.0", "cashscript": "^0.12.0", @@ -30,6 +30,7 @@ "@types/react-dom": "18.0.11", "eslint": "^9.36.0", "eslint-config-next": "^15.5.4", + "monaco-editor": "^0.52.2", "typescript": "^5.9.3" } } diff --git a/src/components/Editor.tsx b/src/components/Editor.tsx index 24cabd0..34ee9e0 100644 --- a/src/components/Editor.tsx +++ b/src/components/Editor.tsx @@ -1,7 +1,9 @@ -import React, { useState } from 'react' -import { ControlledEditor } from '@monaco-editor/react' +import React, { useState, useEffect } from 'react' +import MonacoEditor, { loader } from '@monaco-editor/react' import { Button } from 'react-bootstrap' import { ColumnFlex } from './shared' +import { setupCashScriptLanguage, CASHSCRIPT_LANGUAGE_ID } from '@/editor/cashscript' +import type * as Monaco from 'monaco-editor' interface Props { code: string @@ -11,8 +13,17 @@ interface Props { const Editor: React.FC = ({ code, setCode, compile }) => { const [isEditorReady, setIsEditorReady] = useState(false) + const [isLanguageReady, setIsLanguageReady] = useState(false) - function handleEditorDidMount() { + // Initialize CashScript language support + useEffect(() => { + loader.init().then((monacoInstance: typeof Monaco) => { + setupCashScriptLanguage(monacoInstance) + setIsLanguageReady(true) + }) + }, []) + + function handleEditorMount() { setIsEditorReady(true) } @@ -21,12 +32,12 @@ const Editor: React.FC = ({ code, setCode, compile }) => { id="editor" style={{ flex: 3, margin: '16px', border: '2px solid black', background: 'white' }} > - setCode(code?? "") } - editorDidMount={handleEditorDidMount} + onChange={(value) => setCode(value ?? "")} + onMount={handleEditorMount} />