Failing to add CodeMirror 6 (and then Succeeding)

Failing to add CodeMirror 6 (and then Succeeding)

Failing to add CodeMirror 6 (and then Succeeding) - I put CodeMirror version 6 into a React component. DevLog 004. CodeMirror v6 is out and it’s a fantastic opportunity to try it out.

In the last post I created a React component that intercepted and formatted the arguments for console.log and console.error.

In this post I’ll be upgrading from a simple <textarea> to something that is designed to show code.

What Should I Use?

After mulling over a few different options, even considering making something from scratch, I decided that  CodeMirror would be the best fit for short code snippets.

Fortunately, CodeMirror v6 is out and it’s a fantastic opportunity to try it out.

Creating the Editor Component

The editor component will live in src/components/editor/index.tsx. For now, it will be an empty react component.

import React from "react";

export const Editor = () => {
  return <></>;
};

We’ll also need to install some libraries from npm

npm i @codemirror/view @codemirror/state

CodeMirror needs to be attached to a DOM node, so we’ll add it via a ref. We’ll also use a <section> for some added semantics. In the world of TypeScript types, I learned that any HTML element that doesn’t need more than what the base interface provides, like <section>, should use the HTMLElement type.

import React from "react";

export const Editor = () => {
  const editorRef = React.useRef<HTMLElement>(null);
  return <section ref="editorRef"/>;
};

react codemirror typescript typescript-with-react

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

React Native - React Navigation with TypeScript in React Mobile App

Learn how to set up React Navigation in a React Native project using TypeScript, routing for modals and nested navigation, type declaration for navigation, and route props.

Typescript in React — How to Add

In this article, I will be showing you how to add typescript from your existing react application. If you are a software developer that started from strongly typed programming languages.

How to Select and Hire the Best React JS and React Native Developers?

Hire React JS developer from Technoduce, we have a team of experienced and expert Angular JS developer. With our hire React JS developer, you have complete control over the technical resource throughout the development process.

React With Typescript, Redux And Thunk - React Javascript Tutorial

Wanted to make a video with redux and redux-thunk using typescript. I found this a bit confusing when I first learned it and hopefully this videos makes the ...