Build a Dynamic React JS Interactive Simple Interactive Component: Interactive Code Editor with Auto-Completion

npx create-react-app interactive-code-editor
cd interactive-code-editor

npm install react-codemirror2 @codemirror/lang-javascript @codemirror/autocomplete

import React, { useState } from 'react';
import { Controlled as CodeMirror } from 'react-codemirror2';
import 'codemirror/lib/codemirror.css';
import 'codemirror/theme/material.css'; // You can choose a different theme
import { javascript } from '@codemirror/lang-javascript';
import { autocompletion } from '@codemirror/autocomplete';

function CodeEditor() {
  const [code, setCode] = useState('console.log('Hello, world!');');

  const options = {
    lineNumbers: true,
    theme: 'material',
    mode: 'javascript',
    extraKeys: { "Ctrl-Space": "autocomplete" }, // Enable autocomplete with Ctrl+Space
    lineWrapping: true,  // Enable line wrapping
    gutters: ["CodeMirror-linenumbers"],
  };

  return (
    <div>
      <h2>Interactive Code Editor</h2>
       {
          setCode(value);
        }}
        onChange={(editor, data, value) => {
          setCode(value);
        }}
      />
      <pre><code>{code}

);
}

export default CodeEditor;

Let’s break down this code:

• We import the necessary modules from react-codemirror2, @codemirror/lang-javascript, and @codemirror/autocomplete.
• We import the CodeMirror CSS for styling and a theme.
• We initialize a state variable code to hold the code entered by the user.
• The CodeMirror component is used to render the code editor.
• We configure the editor with options like line numbers, theme, and the mode (JavaScript).
• The onBeforeChange and onChange props update the code state whenever the user types in the editor.
• We also render the code below the editor using a <pre> tag, so users can see the code they typed.

Integrating the Code Editor into Your App

Now, let’s integrate our CodeEditor component into the main app. Open src/App.js and modify it as follows:

import React from 'react';
import CodeEditor from './CodeEditor';
import './App.css';

function App() {
  return (
    <div>
      
    </div>
  );
}

export default App;

And add some basic styling to src/App.css:

.App {
  font-family: sans-serif;
  text-align: center;
  padding: 20px;
}

Adding Auto-Completion

Auto-completion is a crucial feature for any code editor. It helps users write code faster and reduces the chances of errors. To add auto-completion to our editor, we’ll use the @codemirror/autocomplete package.

As you saw in the CodeEditor.js file, we’ve already imported autocompletion. We also need to add the autocompletion() extension to the CodeMirror component:

import { autocompletion } from '@codemirror/autocomplete';

// ... inside the CodeMirror component ...
   {
      setCode(value);
    }}
    onChange={(editor, data, value) => {
      setCode(value);
    }}
  />

Now, as the user types, the editor will provide auto-completion suggestions. Press Ctrl+Space to trigger the autocomplete suggestions.

Running the Application

To run the application, execute the following command in your terminal:

npm start

This will start the development server, and you should see the code editor in your browser. You can now type JavaScript code, and the editor will provide syntax highlighting and auto-completion.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to address them:

• Incorrect Import Paths: Ensure that you are importing the modules from the correct paths. Double-check your import statements.
• Theme Not Applied: Make sure you have imported the theme CSS file correctly. Also, verify that the theme name matches the one you’re using.
• Mode Not Set: The mode option is crucial for syntax highlighting. Ensure you have set the appropriate mode (e.g., ‘javascript’, ‘jsx’).
• Autocomplete Not Working: Check that you have included the autocompletion() extension in the CodeMirror options and that you are triggering it with Ctrl+Space (or another key binding you’ve configured).
• Typo in JSX: Make sure you type valid JSX in the editor, and that your components are correctly imported and used.

Extending the Code Editor

You can extend the functionality of the code editor in several ways:

• Error Highlighting: Integrate a linter (like ESLint) to highlight errors in real-time.
• Custom Themes: Create custom themes for the editor to match your application’s design.
• Code Execution: Add a button to execute the code and display the output.
• Code Formatting: Integrate a code formatter (like Prettier) to automatically format the code.
• Multiple Languages: Support multiple programming languages by adding the respective CodeMirror language packages.

Summary / Key Takeaways

In this tutorial, we’ve successfully built a simple, yet effective, interactive code editor in React JS. We covered the necessary setup, component structure, and the integration of essential features like syntax highlighting and auto-completion. This editor is not only a great tool for learning and experimenting with code but can also be integrated into various applications to enhance user experience. Remember that practice is key. Try experimenting with different themes, adding more features, and exploring the capabilities of CodeMirror to create a code editor that perfectly suits your needs.

FAQ

Q: Can I use this code editor for other programming languages?
A: Yes, you can. You’ll need to install the CodeMirror language packages for the languages you want to support (e.g., @codemirror/lang-python for Python) and configure the mode option accordingly.

Q: How can I add a button to run the code and display the output?
A: You can add a button that, when clicked, evaluates the code in the editor using the eval() function (though use with caution, especially with untrusted user input) or by sending the code to a server-side API for execution. Display the output in a separate area of your component.

Q: How do I implement a code formatter?
A: You can use a code formatter like Prettier. Install Prettier and its CodeMirror integration, then integrate it into the editor. When the user clicks a format button (or on a specific event like saving), you can use Prettier to format the code in the editor.

Q: What are the alternatives to CodeMirror for a React code editor?
A: Other popular options include Monaco Editor (used by VS Code) and Ace Editor. Each has its strengths and weaknesses, so choose the one that best fits your project’s needs.

Building an interactive code editor in React is a rewarding project that combines practical skills with the potential to significantly enhance user experience. You’ve learned how to set up the environment, integrate the CodeMirror library, and add crucial features like syntax highlighting and auto-completion. By following this guide, you’ve equipped yourself with the knowledge to create a powerful tool that can be tailored to various applications. Remember to experiment, iterate, and continuously improve your code editor to meet specific project requirements. With the right tools and a bit of creativity, you can build a highly functional and engaging code editor that will greatly benefit your users. Continue to explore the possibilities and expand your skills in web development.