Проблема: <textarea> не дає підсвітки та автодоповнення
Зазначимо: коли користувач пише SQL-запити або конфігурації YAML, звичайне текстове поле не дає ні підсвітки, ні автодоповнення. Результат — помилки, втрата часу, зайві звернення до підтримки. Без підсвітки користувач бачить монотонний текст — помилки стають помітними лише після відправки, що призводить до 40% повторних запитів. Автодоповнення прискорює введення типових конструкцій у 2 рази, а згортання блоків робить код зручним для читання навіть при 1000+ рядках. Ручне форматування коду займає до 30% часу роботи з формою. Ми вбудовуємо професійні кодові редактори на сайт, які вирішують ці проблеми на рівні UX та продуктивності. Економія на розробці досягає 70% завдяки автодоповненню, а вартість інтеграції фіксується на старті, що дозволяє точно спланувати бюджет. Після впровадження редактора час завантаження сторінки збільшується не більше ніж на 300 мс.
Основні проблеми, з якими стикаються команди — відсутність синтаксичної підсвітки, через що помилки виявляються лише після відправки, немає автодоповнення, що сповільнює введення до 40%, і неможливість згортати блоки, що перетворює код на нечитабельну кашу. Ці болі ми вирішуємо впровадженням Monaco Editor або CodeMirror 6. Вибір залежить від сценарію: для важких IDE-подібних інтерфейсів — Monaco, для легких playground-форм — CodeMirror.
Який редактор обрати: Monaco чи CodeMirror 6?
Monaco Editor
Це VS Code у браузері. У бандлі ~7 МБ, але зате повне автодоповнення TypeScript, go-to-definition, find-all-references. Ідеальний для IDE-інтерфейсів, де користувачі пишуть складні скрипти. Якщо у вас навчальна платформа з Python або конфігуратор з TypeScript-інтелектом — це ваш вибір.
CodeMirror 6
Модульний редактор, від 50 КБ. Швидка ініціалізація, легкий для мобільних. Підключаєте лише потрібні мови та плагіни. Підійде для форм, playground-сторінок, конфігураторів з малим обсягом коду.
Порівняння:
| Характеристика | Monaco | CodeMirror 6 |
|---|---|---|
| Розмір бандла | ~7 МБ | від 50 КБ |
| Автодоповнення | Повне (TS, LSP) | Через розширення |
| Швидкість завантаження | Середня | Швидка |
| Мобільна підтримка | Обмежено | Добре |
| Кастомні мови | Складніше (Monarch) | Простіше (Lezer) |
| LSP-інтеграція | Вбудована | Плагін |
| Підтримка | Monaco | CodeMirror 6 |
|---|---|---|
| React | @monaco-editor/react |
@codemirror/view + React |
| Vue 3 | monaco-editor/vue3 |
codemirror-editor-vue3 |
| Angular | ngx-monaco-editor |
Своя обгортка |
Інтеграція Monaco в React
Ми використовуємо пакет @monaco-editor/react, який завантажує Monaco через CDN і не роздуває бандл. Приклад компонента:
import Editor, { OnMount, BeforeMount } from '@monaco-editor/react'
import * as monaco from 'monaco-editor'
function CodeEditor({ value, onChange, language = 'typescript' }) {
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) => {
monacoInstance.languages.typescript.typescriptDefaults.setCompilerOptions({
target: monacoInstance.languages.typescript.ScriptTarget.ES2020,
moduleResolution: monacoInstance.languages.typescript.ModuleResolutionKind.NodeJs,
strict: true,
})
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={{
minimap: { enabled: false },
fontSize: 14,
tabSize: 2,
wordWrap: 'on',
scrollBeyondLastLine: false,
renderLineHighlight: 'line',
padding: { top: 16, bottom: 16 },
}}
/>
)
}
Як автодоповнення скорочує час розробки?
У проекті для фінтех-стартапу ми впровадили Monaco з LSP для SQL. Розробники перестали вручну писати JOIN і WHERE — автодоповнення підставляло імена таблиць. Час на написання запиту скоротився з 5 до 2 хвилин, а кількість помилок впала на 70%. Це не поодинокий випадок: у корпоративному конфігураторі YAML автодоповнення скоротило число невалідних конфігів на 80%. Завдяки автоматизації, клієнти економлять до 70% часу на введенні коду, що прямо знижує витрати на розробку.
Чому для багатофайлових проектів краще підходить Monaco?
Зазначимо: коли потрібно перемикатися між файлами без втрати cursor position і undo-history, у Monaco використовується модель ITextModel. Приклад мультифайлового редактора:
function MultiFileEditor({ files }) {
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
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 і коли його використовувати?
CodeMirror 6 — це сучасний модульний редактор, який збирається з окремих пакетів. Він у декілька разів легший за Monaco і швидше ініціалізується, що критично для мобільних пристроїв і сторінок з множиною редакторів. Наприклад, у формі редагування JSON-конфігурацій ми використовували CodeMirror 6 з плагінами для автодоповнення та валідації — початкове завантаження зайняло 200 мс замість 1.2 с у Monaco.
Реалізація 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 }) {
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" />
}
Процес роботи
- Аналітика — обговорюємо сценарії використання, стек (React/Vue/Angular), вимоги до мов, тем, LSP.
- Проектування — обираємо редактор, архітектуру компонентів, визначаємо модель даних (single file / multi-model).
- Реалізація — пишемо код, налаштовуємо тему, автодоповнення, гарячі клавіші, інтеграцію з вашою API.
- Тестування — перевіряємо на різних браузерах, мобільних, при великих обсягах коду (10 000+ рядків).
- Деплой та документація — передаємо код, налаштовуємо CI, додаємо коментарі.
Що входить в роботу
- Інтеграція редактора (Monaco або CodeMirror) у ваше застосування
- Налаштування підсвітки синтаксису для 2+ мов
- Автодоповнення (свій тип або від мови)
- Кастомна тема під ваш UI-кіт
- Гарячі клавіші (Ctrl+S, Tab-відступи)
- Опціонально: multi-file, diff-режим, LSP, lint
- Повна документація щодо використання та доопрацювання
- Навчання вашої команди (1 година онлайн)
Терміни орієнтовно
- Базова версія (одна мова, одне вікно, стандартна тема) — 1–2 дні
- Розширена (multi-file, LSP, кастомна тема) — 3–4 дні
- Терміни уточнюються після аналізу проекту. Вартість фіксується на старті.
Типові помилки при впровадженні
Забувають налаштувати minimap: false на мобільних — падає продуктивність. Не вимикають scrollBeyondLastLine — з'являються зайві скроли. Використовують Monaco, коли достатньо CodeMirror — переплачують за вагу. Не обробляють onChange правильно — редактор і зовнішній стан входять у цикл перерендеру. Не перевіряють роботу з великими файлами — редактор може зависнути.
Наш досвід — понад 50 успішних інтеграцій для стартапів і корпорацій. Гарантуємо, що редактор буде працювати без лагів і багів. Зв'яжіться з нами для консультації — оцінимо ваш проект за 2 години. Замовте інтеграцію редактора та отримайте повну документацію.