could anybody tell me how to install codemirror2 on react18.2.0

[Pranav-Rustagi]

Having same issue

[ThaBeanBoy]

O man, I'm also having the same issue

[martinholecekmax]

I was able to successfully implement the feature by downgrading the codemirror library to version ^5.65.13. Here's how I did it:

In your package.json file, adjust the dependencies to include these versions:

// package.json
"dependencies": {
    "codemirror": "^5.65.13",
    "react-codemirror2": "^7.2.1",
}

Then, in your main.js file, you should import the necessary language and CSS styles. Here's how:

// main.js
import ReactDOM from 'react-dom/client';

// Importing the necessary language and CSS styles
import 'codemirror/mode/htmlmixed/htmlmixed';
import 'codemirror/lib/codemirror.css';
import 'codemirror/theme/material.css';

// Other necessary imports
import './index.css';
import App from './App.js';

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <App />
);

Finally, here is the component that utilizes the editor. You can find it in the html-editor.js file:

// html-editor.js
import React from 'react';
import { Controlled as ControlledEditor } from 'react-codemirror2';

const HtmlEditor = ({ field, value, onChange }) => {
  return (
    <ControlledEditor
      value={value}
      options={{
        lineWrapping: true,
        lint: true,
        lineNumbers: true,
        mode: 'htmlmixed',
        htmlMode: true,
        theme: 'material',
      }}
      onBeforeChange={(editor, data, value) => {
        onChange({ field, value });
      }}
    />
  );
};

export default HtmlEditor;