Skip to content

alxnddr/solid-monaco

Repository files navigation

solid-monaco

solid-monaco

pnpm

Monaco Editor for SolidJS

Quick start

Install it:

npm i solid-monaco

or

yarn add solid-monaco

or

pnpm add solid-monaco

MonacoEditor

Basic usage:

You can import and use the MonacoEditor component in your Solid application:

import { MonacoEditor } from 'solid-monaco';

function MyEditor() {
  return <MonacoEditor language="javascript" value="console.log('Hello World');" />;
}

Props

The MonacoEditor component accepts the following props:

Prop Type Default Description
language string - The programming language for the editor. E.g., "javascript", "typescript".
value string - Content of the editor.
loadingState JSX.Element "Loading…" JSX element to be displayed during the loading state.
class string - CSS class for the editor container.
theme BuiltinTheme or string "vs" The theme to be applied to the editor.
path string "" Path used for Monaco model management for multiple files.
overrideServices object - Services to override the default ones provided by Monaco.
width string "100%" Width of the editor container.
height string "100%" Height of the editor container.
options object - Additional options for the Monaco editor.
saveViewState string true Whether to save the model view state for a given path of the editor.
onChange (value: string, event: editor.IModelContentChangedEvent) => void - Callback triggered when the content of the editor changes.
onMount (monaco: Monaco, editor: editor.IStandaloneCodeEditor) => void - Callback triggered when the editor mounts.
onBeforeUnmount (monaco: Monaco, editor: editor.IStandaloneCodeEditor) => void - Callback triggered before the editor unmounts.

Getting Monaco and Editor Instances

You can get instances of both monaco and the editor by using the onMount callback:

import { MonacoEditor } from 'solid-monaco';

function MyEditor() {
  const handleMount = (monaco, editor) => {
    // Use monaco and editor instances here
  };

  return (
    <MonacoEditor
      language="javascript"
      value="console.log('Hello World');"
      onMount={handleMount}
    />
  );
}

MonacoDiffEditor

For a side-by-side comparison view of code, the package provides a MonacoDiffEditor component.

Basic Usage

You can incorporate the MonacoDiffEditor component into your Solid application:

import { MonacoDiffEditor } from 'solid-monaco';

function MyDiffEditor() {
  return (
    <MonacoDiffEditor
      original="const foo = 1;"
      modified="const foo = 2;"
      originalLanguage="javascript"
      modifiedLanguage="javascript"
    />
  );
}

Props

The MonacoDiffEditor component accepts the following props:

Prop Type Default Description
original string - Original content to be displayed on the left side of the diff editor.
modified string - Modified content to be displayed on the right side of the diff editor.
originalLanguage string - Language for the original content.
modifiedLanguage string - Language for the modified content.
originalPath string - Path for the original content used in Monaco model management.
modifiedPath string - Path for the modified content used in Monaco model management.
loadingState JSX.Element "Loading…" JSX element displayed during the loading state.
class string - CSS class for the diff editor container.
theme BuiltinTheme or string "vs" Theme applied to the diff editor.
overrideServices object - Services to override the default ones provided by Monaco.
width string "100%" Width of the diff editor container.
height string "100%" Height of the diff editor container.
options object - Additional options for the Monaco diff editor.
saveViewState boolean true Whether to save the model view state.
onChange (value: string) => void - Callback triggered when the content of the modified editor changes.
onMount (monaco: Monaco, editor: editor.IStandaloneDiffEditor) => void - Callback triggered when the diff editor mounts.
onBeforeUnmount (monaco: Monaco, editor: editor.IStandaloneDiffEditor) => void - Callback triggered before the diff editor unmounts.

Contributing

Contributions to solid-monaco are welcomed!

Acknowledgments

License

MIT