Реализация Code Editor (Monaco/CodeMirror) на сайте

Реализация Code Editor (Monaco/CodeMirror) на сайте

Встроенный редактор кода нужен в IDE-инструментах, обучающих платформах, конфигураторах, playground-страницах и любых SaaS где пользователь пишет скрипты или конфигурации. Подключить <textarea> — не вариант: нет подсветки синтаксиса, нет автодополнения, нет нормальной работы с отступами.

Monaco Editor vs CodeMirror 6

Monaco Editor — это VS Code в браузере. Полное автодополнение TypeScript с type-checking, go-to-definition, find-all-references. Весит ~7 МБ в бандле. Оправдан для серьёзных IDE-like интерфейсов.

CodeMirror 6 — модульный, весит от 50 КБ (только то, что подключено). Быстрее инициализируется, лучше работает на мобильных. Для большинства use-case — правильный выбор.

Интеграция Monaco в React

npm install @monaco-editor/react

Пакет загружает Monaco через CDN из web worker, не раздувая бандл:

import Editor, { OnMount, BeforeMount } from '@monaco-editor/react'
import * as monaco from 'monaco-editor'

interface CodeEditorProps {
  value: string
  onChange: (value: string) => void
  language?: string
  readOnly?: boolean
}

export function CodeEditor({ value, onChange, language = 'typescript', readOnly = false }: CodeEditorProps) {
  const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null)

  const handleBeforeMount: BeforeMount = (monacoInstance) => {
    // Регистрируем кастомный язык или тему до монтирования
    monacoInstance.editor.defineTheme('my-dark', {
      base: 'vs-dark',
      inherit: true,
      rules: [],
      colors: {
        'editor.background': '#0f172a',
        'editor.lineHighlightBackground': '#1e293b',
      },
    })
  }

  const handleMount: OnMount = (editor, monacoInstance) => {
    editorRef.current = editor

    // TypeScript/JavaScript — настройка compiler options
    monacoInstance.languages.typescript.typescriptDefaults.setCompilerOptions({
      target: monacoInstance.languages.typescript.ScriptTarget.ES2020,
      moduleResolution: monacoInstance.languages.typescript.ModuleResolutionKind.NodeJs,
      strict: true,
    })

    // Добавляем type definitions для автодополнения
    monacoInstance.languages.typescript.typescriptDefaults.addExtraLib(
      `declare module 'my-api' { export function query(sql: string): Promise<any[]> }`,
      'file:///node_modules/my-api/index.d.ts'
    )

    // Горячие клавиши
    editor.addCommand(monacoInstance.KeyMod.CtrlCmd | monacoInstance.KeyCode.KeyS, () => {
      onSave?.(editor.getValue())
    })
  }

  return (
    <Editor
      height="400px"
      language={language}
      value={value}
      theme="my-dark"
      beforeMount={handleBeforeMount}
      onMount={handleMount}
      onChange={(val) => onChange(val ?? '')}
      options={{
        readOnly,
        minimap: { enabled: false },
        fontSize: 14,
        tabSize: 2,
        wordWrap: 'on',
        scrollBeyondLastLine: false,
        renderLineHighlight: 'line',
        padding: { top: 16, bottom: 16 },
      }}
    />
  )
}

Несколько файлов (multi-model)

Когда нужно переключаться между файлами без потери cursor position и undo-history:

function MultiFileEditor({ files }: { files: File[] }) {
  const [activeFile, setActiveFile] = useState(files[0].path)
  const modelsRef = useRef<Record<string, monaco.editor.ITextModel>>({})
  const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null)

  const handleMount: OnMount = (editor, monacoInstance) => {
    editorRef.current = editor

    // Создаём model для каждого файла
    files.forEach((file) => {
      const uri = monacoInstance.Uri.parse(`file:///${file.path}`)
      modelsRef.current[file.path] = monacoInstance.editor.createModel(
        file.content,
        detectLanguage(file.path),
        uri
      )
    })

    editor.setModel(modelsRef.current[activeFile])
  }

  function switchFile(path: string) {
    setActiveFile(path)
    editorRef.current?.setModel(modelsRef.current[path])
  }

  return (
    <div>
      <div className="flex gap-1 border-b">
        {files.map((f) => (
          <button
            key={f.path}
            onClick={() => switchFile(f.path)}
            className={activeFile === f.path ? 'bg-gray-800 text-white' : ''}
          >
            {f.name}
          </button>
        ))}
      </div>
      <Editor onMount={handleMount} /* ... */ />
    </div>
  )
}

CodeMirror 6: более лёгкая альтернатива

npm install @codemirror/view @codemirror/state @codemirror/lang-javascript \
  @codemirror/lang-python @codemirror/lang-css \
  @codemirror/theme-one-dark @codemirror/basic-setup

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

function CodeMirrorEditor({ value, onChange }: { value: string; onChange: (v: string) => void }) {
  const containerRef = useRef<HTMLDivElement>(null)
  const viewRef = useRef<EditorView | null>(null)

  useEffect(() => {
    if (!containerRef.current) return

    const updateListener = EditorView.updateListener.of((update) => {
      if (update.docChanged) {
        onChange(update.state.doc.toString())
      }
    })

    const view = new EditorView({
      state: EditorState.create({
        doc: value,
        extensions: [
          basicSetup,
          javascript({ typescript: true }),
          oneDark,
          updateListener,
          EditorView.lineWrapping,
        ],
      }),
      parent: containerRef.current,
    })

    viewRef.current = view
    return () => view.destroy()
  }, []) // Монтируем один раз

  // Обновляем значение извне без пересоздания редактора
  useEffect(() => {
    const view = viewRef.current
    if (!view) return
    const current = view.state.doc.toString()
    if (current !== value) {
      view.dispatch({
        changes: { from: 0, to: current.length, insert: value },
      })
    }
  }, [value])

  return <div ref={containerRef} className="border rounded overflow-hidden" />
}

Что делаем

Выбираем редактор под задачу (Monaco для IDE-like, CodeMirror для компактных сценариев), настраиваем языки, тему под дизайн проекта, горячие клавиши, валидацию. При необходимости подключаем language server по WebSocket для полноценного IntelliSense на бэкенде.

Срок: базовый редактор с подсветкой и автодополнением — 1–2 дня. Мультифайловый редактор с LSP — 3–4 дня.