React: Code Editor

Привет, друзья!

В этом небольшом туториале я покажу вам, как разработать простой редактор кода на React.

Обратите внимание: туториал рассчитан, преимущественно, на начинающих разработчиков, хотя, смею надеяться, что и опытные найдут в нем что-нибудь интересное для себя.

Функционал нашего приложения будет следующим:

• имеется три вкладки: для ручного редактирования HTML, CSS и JavaScript, соответственно;
• пользователь имеет возможность загружать файлы, соответствующие текущей вкладке;
• пользователь имеет возможность бросать (drop) файлы, соответствующие текущей вкладке;
• код, введенный пользователем, загружается в iframe и выполняется в режиме песочницы (sandbox) при нажатии соответствующей кнопки.

Репозиторий.

Источник вдохновения.

Если вам это интересно, прошу под кат.

Для разработки редактора мы будем использовать 2 библиотеки:

• CodeMirror — универсальный текстовый редактор на JavaScript для браузера, предназначенный для редактирования кода, поддерживающий более 100 языков программирования и предоставляющий большое количество различных плагинов (addons) для реализации продвинутого функционала;
• react-codemirror2 — абстракция над codemirror для react.

Для создания шаблона приложения мы будем использовать Vite.

Для стилизации — Sass.

Для установки зависимостей — Yarn.

Создаем шаблон приложения:

# code-editor - название проекта # --template react - используемый шаблон yarn create vite code-editor --template react

Переходим в созданную директорию и устанавливаем codemirror и react-codemirror2 в качестве производственных зависимостей, а также sass в качестве зависимости для разработки:

cd code-editor  yarn add codemirror react-codemirror2  yarn -D sass

Структура директории src будет следующей:

- components   - Button.jsx - кнопка   - CodeEditor.jsx - компонент для редактирования кода   - CodeExecutor.jsx - компонент для выполнения кода   - Tabs.jsx - компонент для переключения вкладок   - ThemeSelector.jsx - компонент для выбора темы для редактора кода - App.jsx - App.scss - main.jsx

При выполнении кода react-codemirror2 может возникнуть ошибка ReferenceError: global is not defined. Для того чтобы устранить этот баг, необходимо добавить в index.html такую строку:

<script>   window.global = window </script>

Дефолтная обработка события drop в браузере предполагает открытие «брошенного» файла в новой вкладке (см. Drag and Drop API). Мы будем обрабатывать указанное событие самостоятельно, поэтому отключаем его обработку по умолчанию в main.jsx:

window.ondrop = (e) => {   e.preventDefault() }

Займемся реализацией компонентов.

Начнем с самого простого — кнопки (components/Button.jsx):

// функция принимает название класса, текст и обработчик нажатия кнопки export const Button = ({ className, title, onClick }) => (   <button className={className} onClick={onClick}>     {title}   </button> )

Думаю, здесь все понятно.

Язык, поддерживаемый редактором кода, определяется пропом mode (режим) компонента Controlled из react-codemirror2. Поэтому для переключения вкладки нам достаточно переключить режим редактора. Реализуем эту логику в компоненте Tabs (components/Tabs.jsx):

// импортируем кнопку import { Button } from './Button'  // определяем массив режимов (они же являются текстами кнопок) const tabs = ['HTML', 'CSS', 'JS']  // функция принимает режим и метод для его установки export const Tabs = ({ mode, setMode }) => {   // TODO }

Определяем функцию для установки режима:

const changeMode = ({ target: { textContent } }) => {   // значение режима - текст кнопки в нижнем регистре   setMode(textContent.toLowerCase()) }

Возвращаем разметку:

return (   <div className='tabs'>     {tabs.map((m) => (       <Button         key={m}         title={m}         onClick={changeMode}         // индикатор текущей вкладки         className={m.toLowerCase() === mode ? 'current' : ''}       />     ))}   </div> )

Тема редактора определяется пропом theme компонента Controlled. Для использования темы достаточно импортировать нужный CSS-файл в код компонента. codemirror предоставляет большой набор готовых тем, демо которых можно посмотреть здесь. Мы возьмем 3 темы: dracula, material и mdn-like. Импортируем темы в компоненте ThemeSelector (components/ThemeSelector.jsx):

// импортируем темы import 'codemirror/theme/dracula.css' import 'codemirror/theme/material.css' import 'codemirror/theme/mdn-like.css'  // определяем массив тем const themes = ['dracula', 'material', 'mdn-like']  // функция принимает метод для установки темы export const ThemeSelector = ({ setTheme }) => {   // TODO }

Определяем функцию для установки темы:

const selectTheme = ({ target: { value } }) => {   setTheme(value) }

Возвращаем разметку:

return (   <div className='theme-selector'>     <label htmlFor='theme'>Theme: </label>     <select id='theme' name='theme' onChange={selectTheme}>       {themes.map((t) => (         <option key={t} value={t}>           {t}         </option>       ))}     </select>   </div> )

Определим простейший редактор кода (components/CodeEditor.jsx).

Импортируем хуки, обертку и компоненты:

// хук import { useState } from 'react' // обертка import { Controlled } from 'react-codemirror2' // компоненты import { Button } from './Button' import { ThemeSelector } from './ThemeSelector'

Импортируем дефолтные стили редактора и режимы:

// стили import 'codemirror/lib/codemirror.css' // режимы import 'codemirror/mode/xml/xml' import 'codemirror/mode/css/css' import 'codemirror/mode/javascript/javascript'  // функция принимает режим, код и метод для его изменения export const CodeEditor = ({ mode, value, setValue }) => {   // TODO }

Определяем локальное состояние для темы:

// дефолтной темой является `dracula` const [theme, setTheme] = useState('dracula')

Определяем функцию для изменения кода:

// нас интересует только последний аргумент, передаваемый функции const changeCode = (editor, data, value) => {   setValue(value) }

Возвращаем разметку:

<div className='code-editor'>     {/* компонент для выбора темы */}     <ThemeSelector setTheme={setTheme} />     {/* обертка */}     <Controlled       value={value}       onBeforeChange={changeCode}       // настройки       options={{         // режим (условно, текущий язык программирования)         mode,         // тема         theme       }}       onDrop={onDrop}     />   </div> )

Давайте определим еще несколько настроек, чтобы наш редактор был более user friendly:

options={{   mode,   theme,   // new   lint: true,   lineNumbers: true,   lineWrapping: true,   spellcheck: true }}

• lint: true: включаем «линтинг» кода;
• lineWrapping: true: при достижении конца строки выполняется перевод на новую строку (это позволяет избежать появления горизонтальной прокрутки);
• lineNumbers: true: нумерация строк;
• spellcheck: true: проверка правописания.

С полным списком доступных настроек можно ознакомиться здесь.

Также добавим парочку плагинов. Импортируем их:

import 'codemirror/addon/edit/closetag' import 'codemirror/addon/edit/closebrackets' import 'codemirror/addon/edit/matchtags' import 'codemirror/addon/edit/matchbrackets'

И передаем в настройки:

options={{   mode,   theme,   lint: true,   lineNumbers: true,   lineWrapping: true,   spellcheck: true,   // new   autoCloseTags: true,   autoCloseBrackets: true,   matchTags: true,   matchBrackets: true }}

• autoCloseTags: true — автоматическое проставление закрывающих HTML-тегов;
• autoCloseBrackets: true — автоматическое проставление закрывающих скобок;
• matchTags: true — подсветка парных тегов;
• matchBrackets: true — подсветка парных скобок.

С полным списком доступных плагинов можно ознакомиться здесь.

Поднимаемся к родительскому компоненту (App.jsx).

Импортируем стили, хук и компоненты:

import './App.scss' import { useState } from 'react' import { Tabs } from './components/Tabs' import { CodeEditor } from './components/CodeEditor'

Определяем начальные значения HTML, CSS и JS для редактора:

// заголовок с текстом `hi` const initialHTML = '<h1>hi</h1>' // зеленого цвета const initialCSS = ` h1 {   color: green; } ` // при клике текст заголовка меняется на `bye`, // а цвет становится красным // обработчик является одноразовым const initialJavaScript = ` document.querySelector("h1").addEventListener('click', function () {   this.textContent = "bye"   this.style.color = "red" }, { once: true }) `  export default function App() {   // TODO }

Определяем локальное состояние для режима, HTML, CSS и JS:

// режимом по умолчанию является `HTML` const [mode, setMode] = useState('html') const [html, setHtml] = useState(initialHTML) const [css, setCss] = useState(initialCSS.trim()) const [js, setJs] = useState(initialJavaScript.trim())

Один нюанс: интересующие нас режимы носят названия xml, css и javascript в codemirror, однако в компонентах мы используем другие названия — html вместо xml и js вместо javascript.

Определяем объект с пропами для редактора:

const propsByMode = {   html: {     mode: 'xml',     value: html,     setValue: setHtml   },   css: {     mode: 'css',     value: css,     setValue: setCss   },   js: {     mode: 'javascript',     value: js,     setValue: setJs   } }

Ключами объекта являются «локальные» режимы.

Возвращаем разметку:

return (   <div className='app'>     <h1>React Code Editor</h1>     <Tabs mode={mode} setMode={setMode} />     {/* распаковываем объект */}     <CodeEditor {...propsByMode[mode]} />   </div> )

$primary: #0275d8; $success: #5cb85c; $warning: #f0ad4e; $danger: #d9534f; $light: #f7f7f7; $dark: #292b2c;  @mixin reset($font-family, $font-size, $color) {   margin: 0;   padding: 0;   box-sizing: border-box;   @if $font-family {     font-family: $font-family;   }   @if $font-size {     font-size: $font-size;   }   @if $color {     color: $color;   } }  @mixin flex-center($column: false) {   display: flex;   justify-content: center;   align-items: center;    @if $column {     & {       flex-direction: column;     }   } }  @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;400;600&display=swap');  *:not(.react-codemirror2 *) {   @include reset('Montserrat', 1rem, $dark); }  .app {   @include flex-center(true);   margin: 0 auto;   max-width: 600px;    h1 {     margin: 1rem 0;     font-size: 1.6rem;     text-align: center;   }    .tabs {     button {       margin: 0.5rem;       padding: 0.5rem;       background: none;       border: none;       outline: none;       border-radius: 6px;       transition: 0.4s;       cursor: pointer;       user-select: none;        &:hover,       &.current {         background: $dark;         color: $light;       }     }   }    .theme-selector {     margin: 0.75rem 0;     text-align: center;      select {       border-radius: 4px;     }   }    .code-editor {     width: 100%;      .CodeMirror-wrap {       border-radius: 4px;       padding: 0.25rem;     }   }    .code-executor {     width: 100%;   }    .btn {     margin: 0.75rem;     padding: 0.25rem 0.75rem;     background: $primary;     border: none;     border-radius: 4px;     outline: none;     color: $light;     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);     cursor: pointer;     user-select: none;     transition: 0.3s;      &:active {       box-shadow: none;     }      &.run {       background: $success;     }   }    iframe {     padding: 0.25rem;     width: 100%;     border: 1px dashed $dark;     border-radius: 4px;   } }

Выполняем команду yarn dev для запуска сервера для разработки и открываем вкладку браузера по адресу http://localhost:3000:

Наш редактор функционирует: мы можем переключаться между вкладками, редактировать код и менять темы.

Но что толку от кода, который нельзя выполнять?

В простейшем случае для выполнения HTML+CSS+JS можно использовать элемент iframe. Нас интересует 2 атрибута этого элемента:

• srcdoc: позволяет загружать в iframe инлайновый HTML;
• sandbox: позволяет накладывать ограничения на загружаемый в iframe контент.

Реализуем компонент для выполнения кода (components/CodeExecutor.jsx):

import { Button } from './Button'  // функция принимает значение атрибута `srcdoc` и метод для изменения этого значения export const CodeExecutor = ({ srcDoc, runCode }) => (   <div className='code-executor'>     <Button className='btn run' title='Run code' onClick={runCode} />     <iframe       srcDoc={srcDoc}       title='output'       // разрешаем выполнение скриптов       sandbox='allow-scripts'     />   </div> )

Возвращаемся в App.jsx и импортируем CodeExecutor:

import { CodeExecutor } from './components/CodeExecutor'

Определяем локальное состояние для атрибута srcdoc и метод для установки его значения:

const [srcDoc, setSrcDoc] = useState('')  const runCode = () => {   setSrcDoc(     `<html>       <style>${css}</style>       <body>${html}</body>       <script>${js}</script>     </html>`   ) }

Передаем соответствующие пропы компоненту CodeExecutor:

<CodeExecutor srcDoc={srcDoc} runCode={runCode} />

Возвращаемся в браузер:

Нажимаем на кнопку Run code:

Видим, что наш код благополучно выполняется. Круто!

Осталось реализовать загрузку и бросание файлов.

Загрузку файлов мы реализуем с помощью скрытого инпута и нескольких методов в компоненте CodeEditor.

Определяем иммутабельную переменную для хранения ссылки на инпут:

const fileInputRef = useRef()

Определяем метод для проверки валидности файла, т.е. того, что загружаемый файл соответствует текущему режиму-вкладке:

const isFileValid = (file) =>   (mode === 'xml' && file.type === 'text/html') || file.type.includes(mode)

Определяем метод для чтения файла как текста с помощью FileReader:

const readFile = (file) => {   if (!isFileValid(file)) return    // создаем экземпляр `FileReader`   const reader = new FileReader()    // обрабатываем чтение файла   reader.onloadend = () => {     // обновляем значение кода     setValue(reader.result)   }    // читаем файл как текст   reader.readAsText(file) }

Определяем метод для загрузки файла:

const loadFile = (e) => {   const file = e.target.files[0]    readFile(file) }

Добавляем в разметку кнопку и инпут:

<Button   className='btn file'   title='Load file'   onClick={() => {     // передаем клик скрытому инпуту     fileInputRef.current.click()   }} /> <input   type='file'   accept='text/html, text/css, text/javascript'   style={{ display: 'none' }}   aria-hidden='true'   ref={fileInputRef}   // выполняем загрузку и чтение файла   onChange={loadFile} />

Аналогичным образом определяем функцию для обработки бросания файла:

 const onDrop = (editor, e) => {   e.preventDefault()    const file = e.dataTransfer.items[0].getAsFile()    readFile(file) }

И передаем ее в качестве соответствующего пропа компоненту Controlled:

<Controlled   onDrop={onDrop}   // другие пропы />

import { useState, useRef } from 'react' import { Controlled } from 'react-codemirror2' import { Button } from './Button' import { ThemeSelector } from './ThemeSelector'  import 'codemirror/lib/codemirror.css'  import 'codemirror/mode/xml/xml' import 'codemirror/mode/css/css' import 'codemirror/mode/javascript/javascript'  import 'codemirror/addon/edit/closetag' import 'codemirror/addon/edit/closebrackets' import 'codemirror/addon/edit/matchtags' import 'codemirror/addon/edit/matchbrackets'  export const CodeEditor = ({ mode, value, setValue }) => {   const [theme, setTheme] = useState('dracula')   const fileInputRef = useRef()    const changeCode = (editor, data, value) => {     setValue(value)   }    const isFileValid = (file) =>     (mode === 'xml' && file.type === 'text/html') || file.type.includes(mode)    const readFile = (file) => {     if (!isFileValid(file)) return      const reader = new FileReader()      reader.onloadend = () => {       setValue(reader.result)     }      reader.readAsText(file)   }    const loadFile = (e) => {     const file = e.target.files[0]      readFile(file)   }    const onDrop = (editor, e) => {     e.preventDefault()      const file = e.dataTransfer.items[0].getAsFile()      readFile(file)   }    return (     <div className='code-editor'>       <ThemeSelector setTheme={setTheme} />       <Button         className='btn file'         title='Load file'         onClick={() => {           fileInputRef.current.click()         }}       />       <input         type='file'         accept='text/html, text/css, text/javascript'         style={{ display: 'none' }}         aria-hidden='true'         ref={fileInputRef}         onChange={loadFile}       />       <Controlled         value={value}         onBeforeChange={changeCode}         onDrop={onDrop}         options={{           mode,           theme,           lint: true,           lineNumbers: true,           lineWrapping: true,           spellcheck: true,           autoCloseTags: true,           autoCloseBrackets: true,           matchTags: true,           matchBrackets: true         }}       />     </div>   ) }

Теперь мы имеем возможность не только редактировать разметку, стили и скрипты вручную, но также загружать и бросать соответствующие файлы:

Пожалуй, это все, чем я хотел поделиться с вами в данной статье.

Надеюсь, вам было интересно и вы не жалеете потраченного времени.

Благодарю за внимание и happy coding!