A Simple CodeMirror and Remark Markdown Editor
Here is a simple CodeMirror 6 and Remark Markdown Editor, with syntax highlighting and a live preview, written in React, on CodeSandbox.
It uses React hooks, with useDebounce to make it so it only updates every few hundred milliseconds, and with a useImperativeHandle hook so it can provide its own interface to get the text from CodeMirror.
import React, { useState, useRef } from "react";
import { useDebouncedCallback } from "use-debounce";
import CodeEditor from "./CodeEditor";
import MarkdownView from "./MarkdownView";
import "./styles.css";
const example = `# Hello, World.
Here is some M… (682 characters)
The CodeEditor and MarkdownView components are simplified versions of what we're using in the new web app we're building.