react simple code editor Скачать - react simple code editor Support Code Скачать

react simple code editor

Другие ресурсы

Release 0.14.1

Скачать

Редакция-код-редактор

Простой редактор кода без излишеств с синтаксисом выделения.

Почему

Несколько редакторов кодов на основе браузеров, таких как ACE, Codemirror, Monaco и т. Д., Дают возможность внедрить полнофункциональный редактор кода на вашу веб-страницу. Однако, если вам просто нужен простой редактор с синтаксисом, выделяющим без каких -либо дополнительных функций, они могут быть чрезмерными, поскольку они обычно не имеют небольшого места размера пучка. Эта библиотека направлена на предоставление простого редактора кода с поддержкой синтаксиса без каких -либо дополнительных функций, идеально подходящих для простых встроений и форм, где пользователи могут отправлять код.

Функции

Модульный синтаксис, выделяющий со стороны сторонней библиотеки
Строка отступления или выбранное текст, нажав клавишу вкладок, с настраиваемым отступлением
Автоматическое отступ на новых линиях
Обернуть выбранный текст в париен, скобки или цитаты
Отменить целые слова вместо буквы
Доступный, используйте Ctrl+Shift+M (Mac) / Ctrl+M , чтобы переключить ключ захвата

Установка

npm install react-simple-code-editor

или

yarn add react-simple-code-editor

Использование

Вам нужно использовать редактор с сторонней библиотекой, которая обеспечивает выделение синтаксиса. Например, это будет выглядеть как следовать prismjs :

 import React from 'react' ;
import Editor from 'react-simple-code-editor' ;
import { highlight , languages } from 'prismjs/components/prism-core' ;
import 'prismjs/components/prism-clike' ;
import 'prismjs/components/prism-javascript' ;
import 'prismjs/themes/prism.css' ; //Example style, you can use another

function App ( ) {
  const [ code , setCode ] = React . useState (
    `function add(a, b) {n  return a + b;n}`
  ) ;
  return (
    < Editor
      value = { code }
      onValueChange = { code => setCode ( code ) }
      highlight = { code => highlight ( code , languages . js ) }
      padding = { 10 }
      style = { {
        fontFamily : '"Fira code", "Fira Mono", monospace' ,
        fontSize : 12 ,
      } }
    />
  ) ;
}

Обратите внимание, что в зависимости от вашего синтаксиса, вам, возможно, придется включить дополнительные CSS для синтаксиса.

Реквизит

Редактор принимает все реквизиты, принятые textarea . Кроме того, вы можете передать следующие реквизиты:

value ( string ): текущее значение редактора, т. Е. Код для отображения. Это должно быть контролируемой опорой.
onValueChange ( string => mixed ): обратный вызов, который вызывается при изменении значения редактора. Вам нужно обновить опору значения, когда это вызвано.
highlight ( string => string | React.Node ): обратный вызов, который будет получать текст для выделения. Вам нужно будет вернуть строку HTML или элемент реагирования с синтаксисом, выделяя библиотеку, такую как prismjs .
tabSize ( number ): количество символов для вставки при нажатии клавиши вкладок. Например, для 4 космического отступления tabSize будет 4 , а insertSpaces будут true . По умолчанию: 2 .
insertSpaces ( boolean ): использовать ли пространства для вдавления. По умолчанию: true . Если вы установите его на false , вы также можете установить tabSize на 1 .
ignoreTabKey ( boolean ): должен ли редактор игнорировать нажатие клавиши вкладки, чтобы пользователи клавиатуры могли вкладывать вклад в редактор. Пользователи могут переключать это поведение, используя Ctrl+Shift+M (Mac) / Ctrl+M вручную, когда это false . По умолчанию: false .
padding ( number ): дополнительная накладка для кода. По умолчанию: 0 .
textareaId ( string ): идентификатор для базовой textarea может быть полезен для настройки label .
textareaClassName ( string ): имя класса для базовой textarea может быть полезно для более точного контроля над его стилями.
preClassName ( string ): имя класса для базового pre , может быть полезно для более точного контроля его стилей.

Демо

React-simple-code-editor.github.io/react-simple-code-editor

Как это работает

Он работает, накладывая синтаксис, выделенный <pre> , на <textarea> . Когда вы вводите, выбираете, копируете текст и т. Д., Вы взаимодействуете с основным <textarea> , чтобы опыт казался нативным. Это очень простой подход по сравнению с другими редакторами, которые переосмысливают поведение.

Синтаксическое выделение может быть сделано любой сторонней библиотекой, если он возвращает HTML и полностью управляется пользователем.

Vanilla <textarea> не поддерживает вставку символов вкладок для вдавления, поэтому мы переосмысливаем его, прослушивая события keydown и программно обновляя текст. Одним из предостережений с программным обновлением текста является то, что мы теряем стек отмены, поэтому нам нужно поддерживать наш собственный стек. В результате мы также можем реализовать улучшенное отмену поведения, такое как уничтожение целых слов, аналогичных редакторам, таким как VSCODE.

Ограничения

Из -за того, как он работает, он имеет определенные ограничения:

Код, выделенный синтаксисом, не может иметь разных шрифтов, веса шрифта, стиля шрифта, высоты линии и т. Д. Для его содержания. Поскольку редактор работает, выравнивая выделенный код над <textarea> , изменение всего, что влияет на макет, может свести его в замешательство.
Пользовательский стек Undo несовместим с контекстным меню браузера Undo/Refo. Тем не менее, другие полные избранные редакторы также не поддерживают пункты меню «Отмены/повтор» браузера.
Редактор не оптимизирован для производительности, и большие документы могут повлиять на скорость набора текста.
Мы скрываем текст в Textarea, используя -webkit-text-fill-color: transparent , который работает во всех современных браузерах (даже не-Webkit, такие как Firefox и Edge). На IE 10+ мы используем color: transparent , который не скрывает курсор. Текст может выглядеть смелее в неподдерживаемых браузерах.