@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} />
  );
}

License

This project is licensed under MIT.

Author

• @nayajunimesh