for-editor-herb

# npm
npm install for-editor-herb -S
# yarn
yarn add for-editor-herb

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Editor from 'for-editor-herb';
// Включение пакета выделения кода
const Hljs = require('highlight.js');

class App extends Component {
  constructor() {
    super();
    this.state = {
      value: '',
    };
  }

  componentDidMount() {
    // В компоненте componentDidMount регистрируются языки, которые вы хотите подсветить
    Hljs.registerLanguage('css', require('highlight.js/lib/languages/css'));
    Hljs.registerLanguage('json', require('highlight.js/lib/languages/json'));
    Hljs.registerLanguage('less', require('highlight.js/lib/languages/less'));
    Hljs.registerLanguage('scss', require('highlight.js/lib/languages/scss'));
    Hljs.registerLanguage('javascript', require('highlight.js/lib/languages/javascript'));
    Hljs.registerLanguage('typescript', require('highlight.js/lib/languages/typescript'));
    Hljs.registerLanguage('go', require('highlight.js/lib/languages/go'));
  }

  handleChange(value) {
    this.setState({
      value,
    });
  }
}
```  render() {
    const { значение } = this.state;
    // Поддерживает язык по умолчанию ('en', 'zh-CN', 'zh-TW', 'jp'), а также локализацию
    const customLang: any = {
      placeholder: 'Начните вводить...',
      undo: 'Отменить',
      redo: 'Повторить',
      h1: 'Заголовок первого уровня',
      h2: 'Заголовок второго уровня',
      h3: 'Заголовок третьего уровня',
      h4: 'Заголовок четвертого уровня',
      h5: 'Заголовок пятого уровня',
      h6: 'Заголовок шестого уровня',
      para: 'Параграф',
      italic: 'Курсив',
      bold: 'Жирный',
      bolditalic: 'Жирный курсив',
      delline: 'Зачеркнутый',
      underline: 'Подчеркнутый',
      keytext: 'Клавишный текст',
      superscript: 'Сверхстрочный',
      subscript: 'Нижнестрочный',
      marktag: 'Выделенный тег',
      table: 'Таблица',
      quote: 'Цитата',
      img: 'Добавить ссылку на изображение',
      link: 'Ссылка',
      list: 'Список',
      orderlist: 'Упорядоченный список',
      disorderlist: 'Неупорядоченный список',
      checklist: 'Список с флажками',
      inlinecode: 'Встроенный код',
      code: 'Блок кода',
      collapse: 'Разделённый блок',
      katex: 'KaTeX',
      save: 'Сохранить',
      preview: 'Просмотреть',
      singleColumn: 'Одна колонка',
      doubleColumn:: 'Две колонки',
      fullscreenOn: 'Перейти в полноэкранный режим',
      fullscreenOff: 'Выйти из полноэкранного режима',
      addImgLink: 'Добавить ссылку на изображение',
      addImg: 'Загрузить изображение',
      toc: 'Сгенерировать содержание'
    };
    // Передать Hljs.highlightAuto функцию
    return (
      <Editor
        language={customLang}
        value={значение}
        onChange={() => this.handleChange()}
        highlight={Hljs.highlightAuto}
      />
    );
  }
}ReactDOM.render(<App />, document.getElementById('root'))

## API### Атрибуты| name        | type    | default     | description                                                   |
 | ----------- | ------- | ----------- | ------------------------------------------------------------- |
 | value       | String  | -           | Введенное значение                                             |
 | placeholder | String  | Начните редактирование...  | Место заполнителя                                          |
 | lineNum     | Boolean | true        | Отображение номеров строк                                      |
 | style       | Object  | -           | Стили редактора                                                |
 | height      | String  | 600px       | Высота редактора                                               |
 | preview     | Boolean | false       | Предварительный просмотр                                       |
 | expand      | Boolean | false       | Полноэкранный режим                                            |
 | subfield    | Boolean | false       | Двойной столбец (активен при включенном предварительном просмотре) |
 | language    | String / IWords | en       | По умолчанию язык (поддерживает zh-CN: китайский упрощённый, en: английский, zh-TW: традиционный китайский, jp: японский), поддержка локализации по интерфейсу IWords |
 | toolbar     | Object  | как указано ниже | Пользовательская панель инструментов                        |
 | outline     | Boolean | true        | Отображение提纲（outline）应翻译为“提纲”或“概要”，此处选择更常用的“提纲”。  | 显示Markdown的提纲                                              |
 | highlight   | Function | Hljs.highlightAuto | Функция Hljs.highlightAuto библиотеки Hljs               |
 | anchor      | Boolean  | true       | Отображение закрепленных заголовков в режиме предварительного просмотра |```js
 /*По умолчанию все кнопки в панели инструментов активированы, передайте объект с настройками
например:
{
     h1: true, // заголовок H1
     code: true, // кодовый блок
     preview: true, // предварительный просмотр
}
в этом случае будут отображены только три указанных функционала
Примечание: если передать пустой объект, то панель инструментов не будет отображаться

> Интерфейсы

```js
interface IWords {
  placeholder: string
  h1: string
  h2: string
  h3: string
  h4: string
  h5: string
  h6: string
  undo: string
  redo: string
  list: string
  orderedList: string
  unorderedList: string
  checkedList: string
  paragraph: string
  italicText: string
  boldText: string
  boldItalicText: string
  deleteLine: string
  underlineText: string
  keyText: string
  superscriptText: string
  subscriptText: string
  markedTag: string
  quoteText: string
  tableText: string
  image: string
  linkText: string
  inlineCode: string
  codeBlock: string
  collapseSection: string
  katexFormula: string
  saveButton: string
  previewMode: string
  singleColumnLayout: string
  doubleColumnLayout: string
  fullScreenOn: string
  fullScreenOff: string
  addImageLink: string
  addImage: string
  tableOfContents: string
}

class App extends Component {
  constructor() {
    super()
    this.state = {
      value: ''
    }
    this.$vm = React.createRef()
  }