Frontend Blocks typescript Advanced

CodeMirror 6 Editor React Component

Syntax-highlighted code editor using CodeMirror 6 with dark theme and language packs.

typescript

import { useEffect, useRef } from "react";
import { EditorView, basicSetup } from "codemirror";
import { javascript } from "@codemirror/lang-javascript";
import { oneDark } from "@codemirror/theme-one-dark";

export function CodeEditor({ value }: { value: string }) {
  const ref = useRef<HTMLDivElement>(null);
  useEffect(() => {
    if (!ref.current) return;
    const view = new EditorView({
      doc: value,
      extensions: [basicSetup, javascript(), oneDark],
      parent: ref.current,
    });
    return () => view.destroy();
  }, [value]);
  return <div ref={ref} className="rounded-lg overflow-hidden" />;
}