Particle1Particle2Particle3Particle4Particle5
HWdTech / Блог /

Slate

Editor

Вы слышали про такой фреймворк? Если нет, то сейчас мы это исправим.

March 2, 2021
#front-end #it #rich_text_editor #slate

Reading time: 4 min

Создание редактора форматированного текста - довольно сложная задача, но с помощью фреймворка это сделать гораздо проще, чем писать свое решение с нуля. Для этой цели нами был выбран такой фреймворк как Slate.

Рассмотрим подробнее, что представляет из себя Slate

Scheme

Данный фреймворк имеет отличную и в то же время простую структуру данных, в которой используется всего несколько концепций.

Структура данных в Slate

  1. Редактор (Editor)Представляет собой контейнер верхнего уровня.

  2. Уровень блока (Block level elements)Описывают блоки с содержимым (абзацы, блок кода, списки и т.д.).

  3. Строковые элементы (Inline elements)Элементы, размещаемые в тексте документа, например, ссылки.

  4. Текстовые узлы (Text nodes)Представляет собой текст документа

  5. Метки (Marks)Аннотации, помещаемые внутрь текста, в том числе выделение текста подчеркиванием или, например, курсивом.

Какие проблемы могут возникнуть?

В нашей обзорной статье о редакторах мы рассматривали преимущества и недостатки некоторых популярных фреймворков, в том числе и Slate. Но есть еще ряд моментов, на которые стоит обратить внимание при выборе данного фреймворка.

Документация

Есть некоторые проблемы с документацией, она недостаточно полная, к тому же некоторые моменты вырезаны после недавней переработки ядра. Но данному фреймворку посвящено довольно большое сообщество в Slack, где вопросы решаются достаточно оперативно.

Open-source

Так как это open-source проект, то его разработку нельзя назвать стабильной, существует много открытых issues и PR, которые решаются довольно медленно.

Android

Разработчики Slate все еще активно трудятся над адаптацией редактора под платформу Android. Уже есть продвижение с Android 10, но над Android 11 еще ведутся работы.

Давайте реализуем редактор, позволяющий делать простое форматирование

example

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

Можно использовать не только готовые плагины, но и собственные компоненты. Попробуем добавить вставку формул самостоятельно, так как для них готового плагина пока что нет.

formula

В итоге у нас есть редактор, в котором с помощью кнопок можно вставлять формулы (или блок, или прямо в строку). Синтаксис формул должен соответствовать KaTeX.

Предлагаем к рассмотрению еще один плагин - Drag & Drop.

fields

Результатом данного кода является простой редактор, где можно создавать блоки с текстом и менять их местами просто перетаскивая.

Хотя Slate все еще находится в стадии Beta, тем не менее, с его помощью можно делать многофункциональные редакторы, причем довольно просто и быстро, благодаря большому количеству имеющихся плагинов и удобной для кастомизации схеме данных.

Читайте также

Наши статьи!

Подписка

Раз в месяц мы делаем рассылку с анонсом новых кейсов и статей, опубликованных на сайте.

* - обязательное поле

Гарантируем - никакого спама. Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь c политикой в отношении обработки персональных данных.