React CodeMirror 2 Wrapper

Common errors

• Syntax highlighting missing or 'Mode not found for ...'

  cause CodeMirror base CSS or specific language mode/theme files are not imported.
  fix Ensure `import 'codemirror/lib/codemirror.css';` is present, and `require('codemirror/mode/<your-mode>/<your-mode>.js');` is called for each mode used. Also check `options.mode`.

• Component does not update when 'value' prop changes in Controlled component.

  cause The `onBeforeChange` callback is not correctly updating the component's state, preventing the editor from reflecting new `value` props.
  fix For controlled components, ensure `onBeforeChange={(editor, data, value) => this.setState({ value })}` (or equivalent for functional components) is implemented to update the parent component's state.

• TypeError: Cannot read properties of undefined (reading 'mode') or similar CJS/ESM interop errors in modern bundlers.

  cause An ESM-first bundler (e.g., Vite) is struggling to process the CommonJS output of `react-codemirror2` or its dependencies (like `codemirror`).
  fix For Vite, configure `vite.config.js` with `optimizeDeps: { include: ['react-codemirror2', 'codemirror'] }` and consider using `@rollup/plugin-commonjs` if issues persist during build.

Warnings

• breaking Version 9.0.0 bumps the React peer dependency to `v19.x`. Ensure your project uses a compatible React version.
  Fix: Upgrade your React installation to `^19.x.x` or ensure compatibility if using an older `react-codemirror2` version.
• breaking Version 8.0.0 bumps the React peer dependency to `v18.x`. Ensure your project uses a compatible React version.
  Fix: Upgrade your React installation to `^18.x.x`.
• breaking Version 7.0.0 removed the `event` parameter from `copy`, `cut`, and `paste` event callbacks to align with `@types/codemirror`.
  Fix: Update your event handler signatures for `copy`, `cut`, and `paste` to remove the fourth `event` parameter, typically leaving `(editor, data, value)`.
• gotcha This library is exclusively for CodeMirror 5 and is not compatible with CodeMirror 6. CodeMirror 6 is a complete rewrite with a different API.
  Fix: If you require CodeMirror 6, you must use a different wrapper library, such as `react-codemirror` (without the '2'), or integrate CodeMirror 6 directly.
• gotcha The package build process is CommonJS-based. Modern ESM-centric bundlers (like Vite) might require specific configuration to handle these modules correctly.
  Fix: For Vite, consider adding `react-codemirror2` and `codemirror` to `optimizeDeps.include` in `vite.config.js` and potentially using `@rollup/plugin-commonjs`.
• gotcha CodeMirror modes, themes, and base CSS must be explicitly imported by the user. Failure to do so will result in missing features or styling.
  Fix: Always include `import 'codemirror/lib/codemirror.css';` and `require('codemirror/mode/<mode>/<mode>.js');` (or similar for themes) in your project.

Install

• npm install react-codemirror2 npm
• yarn add react-codemirror2 yarn
• pnpm add react-codemirror2 pnpm

Imports

• UnControlled
  wrong:

  import CodeMirror from 'react-codemirror2'

  correct:

  import { UnControlled as CodeMirror } from 'react-codemirror2'

  The default export behavior is not provided, and the package is CommonJS-based, which might require specific bundler configurations for ESM projects.
• Controlled
  wrong:

  const CodeMirror = require('react-codemirror2').Controlled

  correct:

  import { Controlled as CodeMirror } from 'react-codemirror2'

  For TypeScript, ensure you import types correctly. This component requires explicit state management via `onBeforeChange`.
• CodeMirror assets (CSS, modes, themes)
  wrong:

  import { xml } from 'codemirror/mode/xml/xml'

  correct:

  import 'codemirror/lib/codemirror.css';
  require('codemirror/mode/xml/xml');

  CodeMirror assets often rely on side-effect imports (`import '...'` for CSS, `require(...)` for modes/themes) to modify the global CodeMirror instance. Bundler configuration might be needed for ESM contexts.

Quickstart

Demonstrates a controlled React component wrapping CodeMirror 5, showing how to manage editor state and include necessary CSS and language modes. This setup allows external control over the editor's content.

import React from 'react';
import { Controlled as CodeMirror } from 'react-codemirror2';
import 'codemirror/lib/codemirror.css';
import 'codemirror/theme/material.css';
import 'codemirror/mode/xml/xml';
import 'codemirror/mode/javascript/javascript';

interface MyEditorState {
  value: string;
}

class MyControlledEditor extends React.Component<{}, MyEditorState> {
  constructor(props: {}) {
    super(props);
    this.state = {
      value: '<h1>Hello, controlled CodeMirror!</h1>\n<script>\n  console.log("This is JavaScript");\n</script>',
    };
  }

  render() {
    const options = {
      mode: 'xml',
      theme: 'material',
      lineNumbers: true,
      indentUnit: 2,
      tabSize: 2,
    };

    return (
      <div>
        <p>Edit the code below:</p>
        <CodeMirror
          value={this.state.value}
          options={options}
          onBeforeChange={(editor, data, value) => {
            this.setState({ value });
          }}
          onChange={(editor, data, value) => {
            console.log('Editor value changed:', value);
          }}
        />
      </div>
    );
  }
}

export default MyControlledEditor;