@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