Inception of a Powerful Code Editor: My Summer Internship Project

Building a Web-Based Code Editor using CodeMirror in ReactJS

Introduction

Welcome to the first chapter of my exciting journey during my Summer Internship, where I developed a powerful and versatile code editor using CodeMirror. As an aspiring developer, I embarked on this project with a vision to create a cutting-edge code editor that caters to the needs of programmers and learners across various domains. This blog will take you through the inception of my project, the challenges I encountered, and how I harnessed the capabilities of CodeMirror to craft an intuitive and efficient code editing experience.

TL;DR

In this blog, I will introduce my code editor project and share the driving factors behind my decision to utilise CodeMirror as the framework for my development. Additionally, I will provide an insightful comparison between popular code editor libraries, including Monaco, CodeMirror, VueJS, DraftJS, EditorJS, and ACE. This analysis will highlight CodeMirror’s outstanding advantages in terms of versatility, ease of integration, and feature-richness, positioning it as the ultimate choice for empowering developers and learners alike.

The Sparks of Inspiration

During my Summer Internship at Virtual Labs, I delved into the realm of interactive and immersive learning platforms. The potential of virtual labs to revolutionise overall education by providing learners with a safe and supportive environment for hands-on experience inspired me greatly. However, I identified a critical missing component — a powerful and user-friendly code editor that could seamlessly integrate with these labs, enhancing the coding education experience and fostering a deeper understanding of programming concepts. This realisation made me recognise the importance of creating an advanced solution to fulfill this requirement.

The Birth of the Code Editor Project

Determined to bridge this gap, I embarked on the journey to develop a custom code editor. My goal was to create an editor that not only supported various programming languages but also enhanced the coding experience with essential features like syntax highlighting, code validation, and more. This editor had to be the perfect companion for learners and developers, nurturing their coding skills and igniting their passion for programming.

Choosing CodeMirror: A Perfect Fit

During my exploration of code editor libraries, I encountered a wide array of options, each offering its own set of advantages. Choosing the ideal one for my project proved to be a challenging endeavour.

Here is a comparative analysis of various code editor libraries based on their versatility, ease of integration, feature richness, and frequency of updates:

   Library             Versatility            Ease of Integration           Feature-Rich            Frequency of Updates     
 ------------ ------------------------------ ----------------------- --------------------------- --------------------------- 
  CodeMirror   ✓ Supports various languages   ✓ Easy to integrate     ✓ Syntax highlighting       ✓ Frequently updated       
  Monaco       ✓ Supports various languages   ✗ Complex integration   ✓ IntelliSense              ✓ Frequently updated       
  VueJS        ✗ Limited code features        ✓ Easy integration      ✗ Lacks code highlighting   ✓ Frequently updated       
  DraftJS      ✗ Not tailored for coding      ✓ Easy integration      ✗ Lacks code highlighting   ✗ Less frequently updated  
  EditorJS     ✗ Not tailored for coding      ✓ Easy integration      ✗ Lacks code highlighting   ✗ Less frequently updated  
  ACE          ✓ Supports various languages   ✗ Complex integration   ✓ Extensive feature set     ✗ Less frequently updated 

After careful consideration and a thorough examination of the pros and cons, CodeMirror emerged as the most suitable and optimal choice for our project in the long run. The ease of integration into our projects streamlines the development process and facilitates seamless adoption to CodeMirror.

Why Choose CodeMirror

Among the contenders, CodeMirror stood out for several compelling reasons:

1. Versatility: CodeMirror is a flexible JavaScript library that supports an extensive range of programming languages. This adaptability makes it a perfect solution for projects that demand multi-language support, whether it’s web development, data analysis, or embedded scripting.
2. Ease of Integration: Integrating CodeMirror into my project was a seamless process, thanks to its well-documented and user-friendly examples. This allowed me to focus my efforts on developing additional features for the code editor.
3. Feature-Rich: CodeMirror comes equipped with essential code editing features, including syntax highlighting, code folding, and line numbering. These functionalities greatly enhance code comprehension and facilitate efficient debugging, making CodeMirror an excellent choice for developers.
4. Frequent Updates: CodeMirror enjoys active maintenance and continuous improvement by a dedicated team of developers. Its regular updates ensure a seamless development experience with enhanced functionality and bug fixes.

Embracing Challenges and Finding My Way

Like every coding odyssey, my journey with CodeMirror was not without challenges. Integrating CodeMirror with React proved to be an adventurous task, especially with limited documentation available for some npm packages and CDNs. However, these obstacles became stepping stones, pushing me to delve deeper into the library and explore the wisdom of the developer community. During my development process, I encountered the following hurdles:

1. Multiple NPM Packages: There are multiple NPM packages available for CodeMirror integration with React, and each package might have slightly different configurations and usage. Deciding which package to use and understanding its intricacies required thorough investigation.
2. Varying Documentation Quality: Some NPM packages lacked comprehensive documentation, making it challenging to grasp their full potential and utilize their features effectively. This forced me to dive into the source code and community discussions to discover hidden functionalities.
3. Multiple CDN Options: While CodeMirror can be integrated into a project via Content Delivery Networks (CDNs), the variety of available CDNs can be overwhelming. Choosing the appropriate CDN that matches my project requirements and version compatibility became a crucial task.
4. Lack of Clear Resources: The absence of readily available tutorials or guides on integrating CodeMirror with React made the learning curve steeper. I had to rely on trial and error and community forums to resolve specific implementation issues.

Despite these challenges, I persevered and utilised the official documentation, explored community-driven solutions, and sought insights from experienced developers. The powerful features and flexibility offered by CodeMirror ultimately justified the extra effort required to overcome these hurdles.

Remember, while integrating CodeMirror with React might present initial obstacles, the benefits of having a versatile and feature-rich code editor outweigh the challenges. As you venture into using CodeMirror, embrace the learning process, and don’t hesitate to explore the available resources to maximise its potential in your projects.

The Result: A Simple Code Editor with Limitless Potential

After days of coding, debugging, and refining, I unveiled the fruit of my labor — a simple yet potent code editor powered by CodeMirror. The editor boasted syntax highlighting, code folding, and line numbering, making coding an enjoyable and productive experience. As I gazed at my creation, I knew that this was only the beginning of the impact it would make.

Building a Simple Code Editor with CodeMirror and React

To get started, we need to install the required codemirror@version5 and react-codemirror2 package via npm or yarn:

npm i codemirror@version5 react-codemirror2 --legacy-peer-deps
# or
yarn add codemirror@version5 react-codemirror2

Next, let’s create a simple code editor using CodeMirror in a React component. First, import the required libraries:

import React, { useState, useEffect } from 'react';
import CodeMirror from 'codemirror';
import 'codemirror/lib/codemirror.css';
import 'codemirror/theme/dracula.css';
import 'codemirror/mode/javascript/javascript';
import { Controlled as ControlledEditor } from 'react-codemirror2'

In this example, we will create a functional component called Editor:

import React, { useState, useEffect } from 'react';
import CodeMirror from 'codemirror';
import 'codemirror/lib/codemirror.css';
import 'codemirror/theme/dracula.css';
import 'codemirror/mode/javascript/javascript';
import { Controlled as ControlledEditor } from 'react-codemirror2'

const Editor = () => {
  const [value, setValue] = useState("")

  const handleChange = (value) => {
    setValue(value)
  }

  return (
 <ControlledEditor
        onChange={handleChange}
        value={value}
        className='controlled-editor'
        options={{
          mode: 'javascript',   // Set the programming language mode (e.g., 'javascript', 'python', 'htmlmixed', etc.)
          theme: 'dracula',     // Set the editor theme (you can choose from various themes or use the default)
          lineNumbers: true,    // Show line numbers
          autofocus: true,      // Auto focus the editor
        }}
      />
)

export default Editor

• The component uses the useState hook to create a value state variable that will store the content of the code editor.
• The handleChange function is defined to update the value state whenever the code in the editor changes.
• The component returns a ControlledEditor component from react-codemirror2. This component is a controlled version of CodeMirror, which means its value is controlled by the value state variable and updates are handled by the handleChange function.
• The ControlledEditor is passed the onChange prop, which is set to the handleChange function to synchronise the editor's content with the value state.
• The value prop of ControlledEditor is set to the value state, ensuring that the editor displays the content stored in the value state.
• The options prop of ControlledEditor is an object that contains configuration options for CodeMirror. It sets the editor mode to JavaScript, applies the Dracula theme, shows line numbers, and auto-focuses the editor.

Conclusion and Stay Tuned for More!

As we come to the end of this exciting chapter in my journey to develop a powerful code editor using CodeMirror, I am filled with immense gratitude for all the support and enthusiasm shown by the coding community. The inception of this code editor project during my Summer Internship has been an enlightening experience, driving me to explore new horizons and overcome challenges.

In the upcoming blogs, we will delve deeper into the design of the user interface, uncovering the secrets behind creating an intuitive and user-friendly coding environment. We’ll address major hurdles faced during the development process and share ingenious solutions that will elevate your coding experience to new heights.

Stay tuned as we embark on this coding odyssey together! Whether you’re a seasoned developer or just starting your coding journey, my future blogs will cater to all levels of expertise. If you have any specific queries or topics you’d like me to explore, feel free to reach out and join in the discussion.

Let’s continue to embrace the spirit of innovation, learning, and collaboration. Together, we’ll unlock the true potential of code editing tools and shape the future of coding education. Happy coding, and I look forward to sharing more thrilling updates with you soon!

Stay connected and keep coding!