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

Written by

javascriptfundamentals

in

In the ever-evolving landscape of web development, the ability to build interactive and dynamic user interfaces is paramount. ReactJS, a JavaScript library for building user interfaces, has become a cornerstone for developers worldwide. One of the most common and essential tools for developers is a code editor. Wouldn’t it be amazing if you could build your own, tailored to your specific needs? This tutorial will guide you through creating a basic code editor with auto-completion using ReactJS. This project isn’t just about learning; it’s about empowering you to customize your development environment and understand the core principles behind modern web applications.

Why Build a Code Editor?

While numerous code editors are available, building your own provides several advantages:

  • Customization: Tailor the editor to your specific needs, adding features or integrations that suit your workflow.
  • Learning: Deepen your understanding of ReactJS and web development concepts.
  • Portfolio: Showcase your skills and create a unique project for your portfolio.
  • Efficiency: Optimize your coding experience with features like auto-completion, syntax highlighting, and more.

This project will provide a solid foundation for more complex features, allowing you to expand your editor’s capabilities as you learn.

Prerequisites

Before we begin, ensure you have the following:

  • Node.js and npm (or yarn) installed: These are essential for managing project dependencies.
  • A basic understanding of HTML, CSS, and JavaScript: Familiarity with these languages is crucial for understanding the code.
  • A code editor of your choice: You’ll use this to write the code for our editor.

Setting Up the Project

Let’s get started by creating a new React project. Open your terminal and run the following commands:

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

This will create a new React project named “code-editor.” Now, let’s clean up the project by removing unnecessary files. Delete the following files from the `src` directory:

  • App.css
  • App.test.js
  • index.css
  • logo.svg
  • reportWebVitals.js
  • setupTests.js

Next, modify the `src/App.js` and `src/index.js` files to remove the references to the deleted files and clear out the default content. Your `src/App.js` should look something like this:

import React from 'react';

function App() {
  return (
    <div className="App">
      <h1>Code Editor</h1>
      <textarea
        style={{
          width: '100%',
          height: '400px',
          fontFamily: 'monospace',
          fontSize: '14px',
          padding: '10px',
          boxSizing: 'border-box',
        }}
      ></textarea>
    </div>
  );
}

export default App;

And your `src/index.js` should look like this:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Now, run the project using the command npm start in your terminal. You should see a basic code editor with a textarea.

Implementing Auto-Completion

The core of our code editor is the auto-completion feature. We’ll implement this using a combination of JavaScript, React state, and a simple data structure. First, let’s create a component to handle the auto-completion suggestions.

Create a new file called src/components/AutoCompletion.js and add the following code:

import React from 'react';

function AutoCompletion({
  suggestions, // The list of suggestions to display
  onSuggestionClick, // Function to handle suggestion clicks
  cursorPosition, // The current cursor position
  editorRef, // Reference to the editor's textarea
}) {
  if (!suggestions || suggestions.length === 0) {
    return null;
  }

  const { top, left } = cursorPosition;

  const suggestionStyle = {
    position: 'absolute',
    top: top + 'px',
    left: left + 'px',
    backgroundColor: '#fff',
    border: '1px solid #ccc',
    borderRadius: '4px',
    boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
    zIndex: 10,
    padding: '5px',
    minWidth: '100px',
  };

  const suggestionItemStyle = {
    padding: '5px',
    cursor: 'pointer',
  };

  return (
    <div style={suggestionStyle}>
      {suggestions.map((suggestion, index) => (
        <div
          key={index}
          style={suggestionItemStyle}
          onClick={() => onSuggestionClick(suggestion)}
        >
          {suggestion}
        </div>
      ))}
    </div>
  );
}

export default AutoCompletion;

This component takes in an array of suggestions, a function to handle clicks on the suggestions, the cursor position, and a reference to the editor’s textarea. It renders a list of suggestions below the cursor position, styling each suggestion appropriately.

Now, modify `src/App.js` to integrate the AutoCompletion component and add the auto-completion logic:

import React, { useState, useRef, useEffect } from 'react';
import AutoCompletion from './components/AutoCompletion';

function App() {
  const [text, setText] = useState('');
  const [suggestions, setSuggestions] = useState([]);
  const [cursorPosition, setCursorPosition] = useState({ top: 0, left: 0 });
  const textareaRef = useRef(null);

  const keywords = ['function', 'const', 'let', 'return', 'if', 'else', 'for', 'while'];

  useEffect(() => {
    if (textareaRef.current) {
      const { top, left } = getCursorPosition(textareaRef.current);
      setCursorPosition({ top, left });
    }
  }, [text]);

  const getCursorPosition = (textarea) => {
    const { selectionStart, offsetWidth, offsetHeight } = textarea;
    const lineHeight = 16; // Approximate line height
    const paddingLeft = 10;

    const preCursor = text.substring(0, selectionStart);
    const lines = preCursor.split('n');
    const currentLine = lines[lines.length - 1];

    const charWidth = 8; // Approximate character width
    const left = textarea.offsetLeft + paddingLeft + currentLine.length * charWidth;
    const top = textarea.offsetTop + (lines.length - 1) * lineHeight;

    return { top, left };
  };

  const handleChange = (e) => {
    const newText = e.target.value;
    setText(newText);
    const lastWord = newText.split(/s+/).pop(); // Get the last word
    if (lastWord.length > 0) {
      const filteredSuggestions = keywords.filter((keyword) =>
        keyword.startsWith(lastWord)
      );
      setSuggestions(filteredSuggestions);
    } else {
      setSuggestions([]);
    }
  };

  const handleSuggestionClick = (suggestion) => {
    const currentText = text;
    const lastWord = currentText.split(/s+/).pop();
    const newText = currentText.substring(0, currentText.length - lastWord.length) + suggestion + ' ';
    setText(newText);
    setSuggestions([]);
    textareaRef.current.focus();
  };

  return (
    <div className="App">
      <h1>Code Editor</h1>
      <textarea
        ref={textareaRef}
        style={{
          width: '100%',
          height: '400px',
          fontFamily: 'monospace',
          fontSize: '14px',
          padding: '10px',
          boxSizing: 'border-box',
        }}
        value={text}
        onChange={handleChange}
      ></textarea>
      <AutoCompletion
        suggestions={suggestions}
        onSuggestionClick={handleSuggestionClick}
        cursorPosition={cursorPosition}
        editorRef={textareaRef}
      />
    </div>
  );
}

export default App;

Here’s a breakdown of the code:

  • State Variables:
    • text: Stores the text in the textarea.
    • suggestions: Stores the auto-completion suggestions.
    • cursorPosition: Stores the position of the cursor for displaying suggestions.
  • textareaRef: A reference to the textarea element, allowing us to interact with it.
  • keywords: An array of keywords that the editor will suggest.
  • useEffect Hook: This hook is used to update the cursor position whenever the text changes.
  • getCursorPosition Function: Calculates the position of the cursor relative to the textarea.
  • handleChange Function: Handles changes in the textarea, updates the text state, filters suggestions based on the last word typed, and updates the suggestions state.
  • handleSuggestionClick Function: Handles clicks on suggestions, inserts the selected suggestion into the textarea, and clears the suggestions.
  • AutoCompletion Component: Renders the auto-completion suggestions.

Styling the Editor

While the basic functionality is in place, let’s enhance the editor’s appearance with some CSS. You can add the following CSS to your src/App.css file:

.App {
  font-family: sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

textarea {
  width: 100%;
  height: 400px;
  font-family: monospace;
  font-size: 14px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}

This CSS provides basic styling for the editor, including a container, the textarea, and the auto-completion suggestions.

Testing the Auto-Completion

Now, test your code editor. Type any of the keywords defined in the keywords array (e.g., “function”, “const”, “let”) in the textarea. You should see a list of suggestions appear below the cursor. Clicking on a suggestion should insert it into the textarea. The cursor position should also be updated correctly.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to fix them:

  • Suggestions Not Appearing:
    • Problem: The suggestions list does not appear when typing.
    • Solution: Double-check the handleChange function. Ensure that the filter method is correctly filtering the keywords based on the last word typed. Verify that the setSuggestions function is being called with the correct filtered results. Also, ensure the AutoCompletion component is receiving the suggestions.
  • Incorrect Cursor Position:
    • Problem: The suggestions appear in the wrong location.
    • Solution: The getCursorPosition function is crucial here. Review the calculations for determining the cursor’s top and left positions. Make sure you are correctly accounting for padding, font size, and line height. Test with different font sizes and padding values to ensure the positioning is accurate.
  • Suggestions Not Inserting Correctly:
    • Problem: Clicking a suggestion does not insert it into the textarea correctly.
    • Solution: Examine the handleSuggestionClick function. Verify that the correct text is being inserted, and that the text is being updated in the correct position. Also check that the focus is returned to the textarea after the suggestion is inserted.
  • Performance Issues:
    • Problem: The editor becomes slow when typing.
    • Solution: Optimize the handleChange function. Consider debouncing or throttling the update of the suggestions list to prevent excessive re-renders. If you have a large list of keywords, optimize the filtering process.

Enhancements and Next Steps

This is a basic code editor. Here are some ideas for enhancements:

  • Syntax Highlighting: Implement syntax highlighting to improve readability. There are several libraries available for React to help with this, such as react-syntax-highlighter.
  • More Advanced Auto-Completion: Handle more complex scenarios, like suggesting function parameters or object properties.
  • Error Checking: Integrate a linter to check for errors in the code.
  • Themes: Allow users to customize the editor’s appearance with different themes.
  • Code Formatting: Add a code formatting feature to automatically format the code.
  • Keybindings: Add custom keybindings for common actions like saving, formatting, and more.
  • Support for Multiple Languages: Extend the editor to support multiple programming languages.

Summary / Key Takeaways

In this tutorial, we created a basic code editor with auto-completion using ReactJS. We covered the essential steps, from project setup to implementing the auto-completion feature. You’ve learned how to create a React component, handle user input, manage state, and dynamically display suggestions. This project offers a practical application of ReactJS principles and provides a solid foundation for building more complex and feature-rich code editors. This is a powerful starting point for anyone looking to build their own tools or customize their development environment.

FAQ

  1. How do I add more keywords to the auto-completion?

    Simply add more keywords to the keywords array in the App.js file.

  2. Can I use this editor for any programming language?

    Currently, the auto-completion is limited to the keywords provided. To support other languages, you will need to expand the keywords list and possibly modify the logic for filtering suggestions.

  3. How do I change the editor’s appearance?

    You can modify the CSS in the App.css file to change the appearance. You can also add more advanced styling with CSS-in-JS libraries or third-party CSS frameworks.

  4. How can I make the auto-completion more intelligent?

    You can improve the auto-completion by adding logic to suggest based on context, such as suggesting function parameters or object properties. This would require more advanced parsing and analysis of the code.

Building a code editor, even a basic one, is a rewarding project. It combines the fundamental concepts of React with the practical application of creating a useful tool. The skills you’ve gained in this tutorial, from state management and component composition to event handling and user interface design, are directly applicable to a wide range of web development projects. Remember that the journey of a thousand lines of code begins with a single function, and each step you take in building your editor brings you closer to mastering the art of web development.

More posts