@solid-codemirror/codemirror NPM

@solid-codemirror/codemirror

CodeMirror 6 component for SolidJS

Demo

https://solid-codemirror.vercel.app/

Installation

yarn add @solid-codemirror/codemirror
# or
npm i @solid-codemirror/codemirror

Note The @codemirror/state and @codemirror/view libraries are flagged as peer dependencies and are recommeneded to be installed alongside this package.

Known issue with `Vite`

Warning You may encounter the following error if you're using Vite as your bundling tool:
Error: Unrecognized extension value in extension set ([object Object]). This sometimes happens because multipleinstances of @codemirror/state are loaded, breaking instanceof checks.
This error can be fixed by adding the following configuration option to your vite.config.{js,ts} file.
export default defineConfig({
  // Your configuration
  optimizeDeps: {
    // Add both @codemirror/state and @codemirror/view to included deps for optimization
    include: ["@codemirror/state", "@codemirror/view"],
  },
});

Basic Usage

import { CodeMirror } from "@solid-codemirror/codemirror";

export default function App() {
  return <CodeMirror />;
}

Controlling the `CodeMirror` component

You can control the CodeMirror component through the following props. All props are optional.

Prop	Type	Description
`value`	`string`	The initial value of the editor
`onValueChange`	`(value: string) => void`	Called whenever the editor code value changes
`onEditorMount`	`(editor: EditorView) => void`	Called when the editor first mounts, receiving the current EditorView instance
`showLineNumbers`	`boolean`	Whether to display line numbers
`wrapLine`	`boolean`	Whether to wrap lines
`readOnly`	`boolean`	Whether to set the editor to read-only
`theme`	`Extension`	The CodeMirror theme extension to use
`extensions`	`Extension[]`	An array of CodeMirror extensions to use

Configure Line Numbers / Read Only / Line Wrapping

import { CodeMirror } from "@solid-codemirror/codemirror";

export default function App() {
  return <CodeMirror showLineNumbers={true} readOnly={false} wrapLine={true} />;
}

Configure theme

import { CodeMirror } from "@solid-codemirror/codemirror";
import { oneDark } from "@codemirror/theme-one-dark";

export default function App() {
  return <CodeMirror theme={oneDark} />;
}

Configure Extensions

import { CodeMirror } from "@solid-codemirror/codemirror";
import { basicSetup } from "codemirror";
import { python } from "@codemirror/lang-python";
import { oneDark } from "@codemirror/theme-one-dark";

export default function App() {
  return <CodeMirror extensions={[basicSetup, python()]} />;
}

Register callbacks on editor value change or editor mount

import { CodeMirror } from "@solid-codemirror/codemirror";
import type { EditorView } from "@codemirror/view";

export default function App() {
  const onValueChange = (value: string) => {
    console.log(value);
  };

  const onEditorMount = (view: EditorView) => {
    console.log(view);
  };

  return (
    <CodeMirror onEditorMount={onEditorMount} onValueChange={onValueChange} />
  );
}