Monaco

The Monaco Editor is the code editor that powers VS Code. It is a feature-rich web editor with syntax highlighting, IntelliSense, and code completion.

Due to bundle size considerations, Codespark uses CodeMirror as the default editor. However, we highly recommend trying Monaco for a more advanced editing experience.

Monaco vs CodeMirror

Setup

Monaco in Codespark is loaded on demand:

import { Monaco } from '@codespark/react/monaco';

Pass Monaco to the editor prop of the Codespark or CodesparkEditor component to replace the default CodeMirror editor.

import { Codespark } from '@codespark/react';
import { Monaco } from '@codespark/react/monaco';

const code = `export default function App() {
  return (
    <div className="text-center">
      <h1 className="text-xl font-bold">Hello World</h1>
      <p>This is my first Codes Park!</p>
    </div>
  );
}`;

export default function App() {
  return <Codespark editor={Monaco} code={code} />;
}

You can also configure Monaco globally so that all Codespark instances use it by default:

import { ConfigProvider } from '@codespark/react';

<ConfigProvider editor={Monaco}>                  
  {/* your app root */}
</ConfigProvider>

Features

TypeScript Type Inference

Codespark Monaco provides excellent TypeScript support. It automatically fetches type definitions from imported npm packages and displays type information on hover.

Path Auto-completion

In multi-file mode, Codespark Monaco supports automatic path completion for imports, inferring paths from all modules defined in the files object.

Syntax Error Diagnostics

Codespark Monaco provides real-time syntax error diagnostics. When your code contains syntax errors, the editor will highlight the problematic areas and display error messages to help you identify and fix issues quickly.

via NPM

By default, Monaco is loaded from a CDN to minimize bundle size. If you prefer to bundle Monaco locally from npm, follow these steps:

npm install monaco-editor

import * as monaco from 'monaco-editor';
import { Monaco } from '@codespark/react/monaco';

Monaco.load({ monaco });

import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';

self.MonacoEnvironment = {
  getWorker(_, label) {
    if (label === 'json') {
      return new jsonWorker();
    }
    if (label === 'css' || label === 'scss' || label === 'less') {
      return new cssWorker();
    }
    if (label === 'html' || label === 'handlebars' || label === 'razor') {
      return new htmlWorker();
    }
    if (label === 'typescript' || label === 'javascript') {
      return new tsWorker();
    }
    return new editorWorker();
  },
};

Configurations

Monaco has an extensive configuration system. Codespark supports passing through all Monaco configuration options to customize your editor. Check the API reference for more detail.

import { CodesparkEditor } from '@codespark/react';
import { Monaco } from '@codespark/react/monaco';

<CodesparkEditor editor={Monaco} options={{...}} />;