@solid-codemirror/core

Provides a createCodeMirror function that takes in a ref object and attaches a CodeMirror view to it.

Demo

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

Installation

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

createCodeMirror

Attaches a CodeMirror view to the specified ref object and returns a object with a createExtension method to add extension compartments to the codemirror state instance.

Basic Usage

import { CodeMirrorProps, createCodeMirror } from "@solid-codemirror/core";

export default function CodeMirror(props: CodeMirrorProps) {
  let ref: HTMLDivElement | undefined;

  createCodeMirror(props, () => ref);

  return <div ref={ref} />;
}

Add Extension

import { CodeMirrorProps, createCodeMirror } from "@solid-codemirror/core";
import { lineNumbers } from "@codemirror/view";

export default function App(props: CodeMirrorProps) {
  let ref: HTMLDivElement | undefined;

  const { createExtension } = createCodeMirror(props, () => ref);

  createExtension(lineNumbers());

  return <div ref={ref} />;
}

Reconfigure Extension

import { CodeMirrorProps, createCodeMirror } from "@solid-codemirror/core";
import { lineNumbers } from "@codemirror/view";

export default function App(props: CodeMirrorProps) {
  let ref: HTMLDivElement | undefined;

  const { createExtension } = createCodeMirror(props, () => ref);

  const reconfigureLineNumbers = createExtension(lineNumbers());

  return (
    <div>
      <div ref={ref} />

      {/* Buttons to show/hide line numbers */}
      <div>
        <button onClick={() => reconfigureLineNumbers([])}>
          Hide line numbers
        </button>
        <button onClick={() => reconfigureLineNumbers(lineNumbers())}>
          Show line numbers
        </button>
      </div>
    </div>
  );
}

Info Extensions in @codemirror/core are wrapped inside an editor Comparment. Compartments enable dynamic reconfiguration (partially reconfigure a tree of extensions) of the editor.

CodeMirrorProps

You can control the CodeMirror editor instance 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

Definition

function createCodeMirror(
  props: {
    value?: string;
    onValueChange?: (value: string) => void;
    onEditorMount?: (editor: EditorView) => void;
  }
  ref: Accessor<HTMLDivElement | undefined>
): {
  createExtension: (extension: Extension) => (extension: Extension) => void;
};

License

This project is licensed under MIT.

Author

• @nayajunimesh