solid-codemirror

CodeMirror component for SolidJS. Porting from react-codemirror

Features:

✅ Quickly and easily configure the API.
✅ Uses codemirror 6
✅ Written in TypeScript.

Install

• npm

  npm install solid-codemirror --save
  

• pnpm

  pnpm install solid-codemirror --save
  

• yarn

  yarn install solid-codemirror --save
  

Usage

import {CodeMirror} from 'solid-codemirror';
import {javascript} from '@codemirror/lang-javascript';

export const App = () => {
  return (
    <CodeMirror
      value="console.log('hello world!');"
      height="200px"
      extensions={[javascript({jsx: true})]}
      onChange={(value, viewUpdate) => {
        console.log('value:', value);
      }}
    />
  );
}

With createCodeMirror

import {createEffect} from 'solid-js';
import {createCodeMirror} from 'solid-codemirror';
import {javascript} from '@codemirror/lang-javascript';

const code = "console.log('hello world!')";

export const App = () => {
  let editor: HTMLDivElement;

  const {
    options,
    setOptions,
    state,
    setState,
    view,
    setView
  } = useCodeMirror({
    container: editor.current,
    extensions: [javascript()],
    value: code,
  });

  createEffect(() => setContainer(editor))

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

Using component / custom theme

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

export const App = () => {
  return (
    <CodeMirror
      value="console.log('hello world!');"
      height="100%"
      extensions={[
        oneDark(),
        javascript({jsx: true})
      ]}
      onChange={(value, viewUpdate) => {
        console.log('value:', value);
      }}
    />
  );
}

License

Licensed under the MIT License.