react-codemirror

The `react-codemirror` (specifically `@uiw/react-codemirror` which is a popular and well-maintained wrapper) is a React component that integrates CodeMirror 6, a powerful, extensible code editor written in TypeScript, into React applications. CodeMirror 6 is a complete rewrite of previous versions, offering a modern architecture, better performance, and a more robust extension system.

Key aspects and features of using `react-codemirror`:

1. Modern Integration: It provides a convenient React wrapper, abstracting away the direct DOM manipulation required by CodeMirror and allowing you to manage the editor's state and behavior using React's declarative paradigm.
2. Extensibility: CodeMirror 6 is built around an extension system. `react-codemirror` exposes this by allowing you to pass an array of 'extensions' to the component. These extensions can cover:
* Languages: Support for various programming languages with proper syntax highlighting (e.g., JavaScript, Python, HTML, CSS, Markdown) via `@codemirror/lang-*` packages.
* Themes: Visual styles for the editor (e.g., `oneDark`, `light` via `@codemirror/theme-*` packages or custom themes).
* Autocompletion: Intelligent code suggestions.
* Linting: Highlighting errors and warnings.
* Keymaps: Custom keyboard shortcuts.
* Line numbers, fold gutters, bracket matching: Core editor functionalities.
3. Controlled Component: Typically, `react-codemirror` can be used as a controlled component, meaning its value is managed by React state. You pass a `value` prop and an `onChange` callback that updates the state when the editor's content changes.
4. Performance: CodeMirror 6 is designed for performance, capable of handling large files and complex interactions smoothly.
5. Use Cases: It's ideal for building applications that require an embedded code editor, such as:
* Online IDEs and code playgrounds.
* Markdown editors with syntax highlighting.
* Configuration file editors (JSON, YAML).
* Custom script editors within larger applications.
* Interactive coding tutorials.

Installation: To use `react-codemirror`, you typically install it along with desired language and theme extensions:
`npm install @uiw/react-codemirror @codemirror/lang-javascript @codemirror/theme-one-dark` (or other languages/themes).

By leveraging `react-codemirror`, developers can easily incorporate a feature-rich and highly customizable code editing experience into their React applications, providing a professional and interactive environment for users to write and edit code.

```jsx
import React, { useState, useCallback } from 'react';
import CodeMirror from '@uiw/react-codemirror';
import { javascript } from '@codemirror/lang-javascript';
import { oneDark } from '@codemirror/theme-one-dark';
// If you need HTML language support for the second editor:
// import { html } from '@codemirror/lang-html'; 

function App() {
  const initialCode = `function greet(name) {
  console.log('Hello, ' + name + '!');
}

greet('World');
`;

  const [code, setCode] = useState(initialCode);

  const onChange = useCallback((value, viewUpdate) => {
    console.log('value:', value);
    setCode(value);
  }, []);

  return (
    <div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
      <h1>React CodeMirror 6 Example</h1>

      <div style={{ marginBottom: '20px' }}>
        <h2>JavaScript Editor</h2>
        <CodeMirror
          value={code}
          height="200px"
          theme={oneDark}
          extensions={[javascript({ jsx: true })]}
          onChange={onChange}
          basicSetup={{
            lineNumbers: true, // Enables line numbers
            foldGutter: true,  // Enables code folding
            // You can also disable other basic features if needed:
            // dropCursor: false,
            // allowMultipleSelections: false,
            // indentOnInput: false,
            // highlightActiveLine: false,
            // lintKeymap: false
          }}
        />
      </div>

      <div>
        <h2>Current Code Value:</h2>
        <pre style={{ background: '#f0f0f0', padding: '10px', borderRadius: '5px' }}>
          {code}
        </pre>
      </div>

      <div style={{ marginTop: '30px' }}>
        <h2>Another Editor (Read-only HTML)</h2>
        <CodeMirror
          value={`<!DOCTYPE html>
<html>
<head>
    <title>Hello</title>
</head>
<body>
    <h1>Welcome!</h1>
</body>
</html>`}
          height="150px"
          theme={oneDark}
          extensions={[] /* Add [html()] here if @codemirror/lang-html is installed */}
          readOnly={true}
          basicSetup={{ lineNumbers: true, foldGutter: true }}
        />
      </div>
    </div>
  );
}

export default App;
```