Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/nimeshnayaju/solid-codemirror

CodeMirror 6 component for SolidJS
https://github.com/nimeshnayaju/solid-codemirror

codemirror codemirror6 editor solid solid-codemirror solidjs

Last synced: about 1 month ago
JSON representation

CodeMirror 6 component for SolidJS

Awesome Lists containing this project

README 

        


  solid-codemirror




# solid-codemirror



A set of libraries to integrate CodeMirror to any SolidJS app. This repository contains two packages:



- [@solid-codemirror/core](https://github.com/nimeshnayaju/solid-codemirror/tree/main/packages/core)



- [@solid-codemirror/codemirror](https://github.com/nimeshnayaju/solid-codemirror/tree/main/packages/codemirror)



## Demo



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



## Installation



```bash

yarn add @solid-codemirror/codemirror

# or

npm i @solid-codemirror/codemirror

```



> **Note** The [@codemirror/state](https://github.com/codemirror/state) and [@codemirror/view](https://github.com/codemirror/state) 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:

>

> ```bash

> 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.

>

> ```typescript

> 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



```tsx

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



export default function App() {

  return ;

}

```



## Configure Line Numbers / Read Only / Line Wrapping



```tsx

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



export default function App() {

  return ;

}

```



## Configure theme



```tsx

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

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



export default function App() {

  return ;

}

```



## Configure Extensions



```tsx

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 ;

}

```



## Register callbacks on editor value change or editor mount



```tsx

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 (

    

  );

}

```



## 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                                       |



For more information on the usage of the `CodeMirror` component, check out [@solid-codemirror/codemirror](https://github.com/nimeshnayaju/solid-codemirror/tree/main/packages/codemirror).

\

 

\

 



# Advanced usage



### Want more control over your `CodeMirror` component? Create your custom component using the `createCodeMirror` function.



## Installation



```bash

yarn add @solid-codemirror/core @codemirror/state @codemirror/view

# or

npm i @solid-codemirror/core @codemirror/state @codemirror/view

```



## `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



```tsx

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



export default function CodeMirror(props: CodeMirrorProps) {

  let ref: HTMLDivElement | undefined;



  createCodeMirror(props, () => ref);



  return 
;

}

```



## Add Extension



```tsx

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 
;

}

```



## Reconfigure Extension



```tsx

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 (

    


      



      {/* Buttons to show/hide line numbers */}

      


         reconfigureLineNumbers([])}>

          Hide line numbers

        

         reconfigureLineNumbers(lineNumbers())}>

          Show line numbers

        

      


    


  );

}

```



> **Note** Extensions in `@codemirror/core` are wrapped inside an editor [Comparment](https://codemirror.net/docs/ref/#state.Compartment). Compartments enable [dynamic reconfiguration](https://codemirror.net/examples/config/) (partially reconfigure a tree of extensions) of the editor.



> **Note** The `@solid-codemirror/codemirror` package is based on `@codemirror/core`. You can view the [source code](https://github.com/nimeshnayaju/solid-codemirror/tree/main/packages/codemirror) of the library here.



For more information on the usage of the `createCodeMirror` function, check out [@solid-codemirror/core](https://github.com/nimeshnayaju/solid-codemirror/tree/main/packages/core).



## License



This project is licensed under MIT.



## Author



- [@nayajunimesh](https://twitter.com/nayajunimesh)