feat: refactor editor

Author: yeonjuan

package-lock.json

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { Container, Row, Col, Tabs, Tab, Spinner } from "react-bootstrap";
-import { Editor } from "@/components/Editor";
+import { CodeEditor } from "@/components/CodeEditor";
 import { RuleConfig } from "@/components/RuleConfig";
 import { Messages } from "@/components/Messages";
 import { Header } from "@/components/Header";
@@ -38,7 +38,7 @@ export const App: FC = () => {
   useEffect(() => {
     (async () => setLinter(await loadDemoLinter()))();
   }, []);
-
+  console.log(queryParamsState.get().code || DEFAULT_CODE);
   return (
     <>
       <Header />
@@ -47,7 +47,7 @@ export const App: FC = () => {
           <Col md={12}>
             <Tabs>
               <Tab eventKey="code" title="Code">
-                <Editor
+                <CodeEditor
                   initial={queryParamsState.get().code || DEFAULT_CODE}
                   onChange={(code) => {
                     queryParamsState.set({ code, rules });

src/App.tsx

@@ -0,0 +1,74 @@
+import React, { useState, useEffect, useRef } from "react";
+import CodeMirror, { TextMarker } from "codemirror";
+import { EDITING_TIMEOUT } from "@/components/constants";
+import { debounce } from "@/shared/debounce";
+import type { FC } from "react";
+import type { Editor } from "codemirror";
+import "codemirror/lib/codemirror.css";
+import "codemirror/mode/javascript/javascript.js";
+import "@/css/editor.css";
+
+export type Marker = [CodeMirror.Position, CodeMirror.Position];
+
+interface Props {
+  id: string;
+  mode: "text/typescript" | "application/ld+json";
+  markers?: Marker[];
+  initial?: string;
+  onChange?: (text: string) => void;
+}
+
+const CODE_MIRROR_OPTIONS = {
+  lineNumbers: true,
+  showCursorWhenSelecting: true,
+  matchBrackets: true,
+} as const;
+
+export const BaseEditor: FC<Props> = (props) => {
+  const [editor, setEditor] = useState<Editor | null>(null);
+  const [text, setText] = useState<string>(props.initial ?? "");
+  const [errorMarkers, setErrorMarkers] = useState<TextMarker[]>([]);
+  const ref = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    if (ref.current) {
+      const codeMirror = CodeMirror.fromTextArea(ref.current, {
+        mode: props.mode,
+        ...CODE_MIRROR_OPTIONS,
+      });
+      setEditor(codeMirror);
+
+      codeMirror.on(
+        "change",
+        debounce(() => {
+          const value = codeMirror.getValue();
+          props.onChange?.(value);
+          setText(value);
+        }, EDITING_TIMEOUT)
+      );
+    }
+  }, []);
+
+  useEffect(() => {
+    errorMarkers.forEach((marker) => marker.clear());
+    if (props.markers && editor) {
+      setErrorMarkers(
+        props.markers.map(([start, end]) =>
+          editor.markText(start, end, {
+            className: "editor-error",
+          })
+        )
+      );
+    }
+  }, [props.markers, editor]);
+
+  return (
+    <textarea
+      id={props.id}
+      readOnly
+      autoComplete="off"
+      ref={ref}
+      value={text}
+    />
+  );
+};

src/components/BaseEditor.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { BaseEditor } from "@/components/BaseEditor";
+import type { Marker } from "@/components/BaseEditor";
+import type { FC } from "react";
+import type { Linter } from "eslint";
+
+interface Props {
+  initial: string;
+  onChange?: (text: string) => void;
+  messages?: Linter.LintMessage[];
+}
+
+function messageToMarker(message: Linter.LintMessage): Marker {
+  const from = { line: message.line - 1, ch: message.column - 1 };
+  const to = {
+    line: (message.endLine || message.line) - 1,
+    ch: (message.endColumn || message.column) - 1,
+  };
+  return [from, to];
+}
+
+export const CodeEditor: FC<Props> = (props) => (
+  <div className="editor">
+    <BaseEditor
+      id="code"
+      mode="text/typescript"
+      initial={props.initial}
+      markers={props.messages?.map(messageToMarker)}
+    />
+  </div>
+);