02 Марта 2021
Reading time: 4 min
Создание редактора форматированного текста - довольно сложная задача, но с помощью фреймворка это сделать гораздо проще, чем писать свое решение с нуля. Для этой цели нами был выбран такой фреймворк как Slate.
Рассмотрим подробнее, что представляет из себя Slate
![Scheme](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fmue5t0ky2rh8%2FTy4WHDcPKjv02wpktrhGV%2F31e2ad9769994e4b959d3602aeb89f0f%2Fimage_11.jpg&w=1920&q=75)
Данный фреймворк имеет отличную и в то же время простую структуру данных, в которой используется всего несколько концепций.
Структура данных в Slate
Редактор (Editor)Представляет собой контейнер верхнего уровня.
Уровень блока (Block level elements)Описывают блоки с содержимым (абзацы, блок кода, списки и т.д.).
Строковые элементы (Inline elements)Элементы, размещаемые в тексте документа, например, ссылки.
Текстовые узлы (Text nodes)Представляет собой текст документа
Метки (Marks)Аннотации, помещаемые внутрь текста, в том числе выделение текста подчеркиванием или, например, курсивом.
Какие проблемы могут возникнуть?
В нашей обзорной статье о редакторах мы рассматривали преимущества и недостатки некоторых популярных фреймворков, в том числе и Slate.
Но есть еще ряд моментов, на которые стоит обратить внимание при выборе данного фреймворка.
Документация
Есть некоторые проблемы с документацией, она недостаточно полная, к тому же некоторые моменты вырезаны после недавней переработки ядра. Но данному фреймворку посвящено довольно большое сообщество в Slack, где вопросы решаются достаточно оперативно.
Open-source
Так как это open-source проект, то его разработку нельзя назвать стабильной, существует много открытых issues и PR, которые решаются довольно медленно.
Android
Разработчики Slate все еще активно трудятся над адаптацией редактора под платформу Android. Уже есть продвижение с Android 10, но над Android 11 еще ведутся работы.
Давайте реализуем редактор, позволяющий делать простое форматирование
![example](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fmue5t0ky2rh8%2F1Im7nb9mMMEduqGcPBooFJ%2Ff75dafcb4e52fbc4e1a124ba14db55b0%2Fimage_12.jpg&w=1920&q=75)
В результате мы получили вот такой редактор, который умеет выделять текст жирным, курсивом, делать текст подчеркнутым, надстрочным, подстрочным, выделенным маркером, имитирующим ввод с клавиатуры, а также позволяет выделять текст как код.
Вот здесь можно посмотреть обширный пример использования данного редактора, со всеми подробностями.
Можно использовать не только готовые плагины, но и собственные компоненты. Попробуем добавить вставку формул самостоятельно, так как для них готового плагина пока что нет.
![formula](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fmue5t0ky2rh8%2F47PYo9XLyi3C0cw4ovUy4v%2F714fe8d4e234e06b03b0e8271754b12a%2Fimage_13.jpg&w=1920&q=75)
В итоге у нас есть редактор, в котором с помощью кнопок можно вставлять формулы (или блок, или прямо в строку). Синтаксис формул должен соответствовать KaTeX.
Предлагаем к рассмотрению еще один плагин - Drag & Drop.
![fields](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fmue5t0ky2rh8%2F5omETGka8dSOapzbUDbKHc%2Fa6fc7e84c82da972ca30a87ddee4dd05%2Fimage_14.jpg&w=1920&q=75)
Результатом данного кода является простой редактор, где можно создавать блоки с текстом и менять их местами просто перетаскивая.
Хотя Slate все еще находится в стадии Beta, тем не менее, с его помощью можно делать многофункциональные редакторы, причем довольно просто и быстро, благодаря большому количеству имеющихся плагинов и удобной для кастомизации схеме данных.
Читайте также