@remirror/extension-codemirror5

Add CodeMirror to your editor.

Installation

yarn add @remirror/extension-codemirror5 # yarn
pnpm add @remirror/extension-codemirror5 # pnpm
npm install @remirror/extension-codemirror5 # npm

You will also need to make sure you have a version of codemirror@5 installed. If you are using TypeScript you can also install the @types/codemirror package alongside.

yarn add codemirror @types/codemirror
pnpm add codemirror @types/codemirror
npm install codemirror @types/codemirror

Usage

The following code sample will create a limited editor and run the available commands from this extension.

In order to support codemirror the extension requires you to provide an instance of the CodeMirror import. This is necessary because by default CodeMirror interacts with the DOM and will cause errors when running in node.

import 'codemirror/mode/meta'; // This must be imported.
import 'codemirror/lib/codemirror.css';
import 'codemirror/mode/javascript/javascript';
import 'codemirror/mode/yaml/yaml';

import CodeMirror from 'codemirror';
import { RemirrorManager } from 'remirror/core';
import { CorePreset } from 'remirror/preset/core';
import { CodeMirrorExtension } from '@remirror/extension-codemirror5';

// Create the codeMirror extension with an instance of the codemirror import.
const codeMirrorExtension = new CodeMirrorExtension({ CodeMirror });
const corePreset = new CorePreset();

// Create the Editor Manager with the codeMirror extension passed through.
const manager = RemirrorManager.create([codeMirrorExtension, corePreset]);

// Pass the dom element to the editor. If you are using `@remirror/react` or
// other framework wrappers then this is handled for you.
const element = document.createElement('div');
document.body.append(element);

// Add the view to the editor manager.
manager.addView(element);

// Access the codeMirror commands
manager.store.commands.createCodeMirror({ language: 'yaml' });

// Update the codeMirror
manager.store.chain
  .updateCodeBlock({ language: 'js', codeMirrorConfig: { lineNumbers: true } })
  .run();