Давайте создадим быстрый, удобный и настраиваемый редактор форматированного текста с помощью Slate.js и React

Что такое редактор форматированного текста?

Цель редактора форматированного текста - уменьшить усилия пользователей, пытающихся выразить свое форматирование как допустимую разметку HTML. Редактор форматированного текста дает пользователям возможность форматировать свой текст.

В какой-то момент каждый пользовался редактором форматированного текста. Так почему бы не построить такой? Вот некоторые из наиболее часто используемых редакторов форматированного текста.

Комментарии Reddit, YouTube и Hacker News.

Онлайн-редакторы для создания контента - написания блогов, руководств, новостей и т. Д.

Твиты, упоминания, хэштеги, опросы, списки и т. Д. В Twitter.

Редактирование документов и листов Excel, таких как Google Docs, Microsoft Word, Dropbox Paper.

Draft.js

В 2016 году Facebook представила свой новый фреймворк для редактора форматированного текста под названием Draft.js.

Вот вводная речь о Draft.js. Стоит посмотреть 25-минутное видео, чтобы понять, с какими проблемами столкнулась команда Facebook и как они их решили.

Slate.js

Ian Storm Taylor создал Slate.js вскоре после того, как Facebook открыл исходный код Draft.js.

Вот обсуждение Slate.js в Hacker News thread.

Аргументы в пользу создания Slate веские. Давайте проверим это, создав редактор форматированного текста.

Начиная

Для этого проекта нам понадобится следующее:

Текстовый редактор, подойдет любой, не стесняйтесь выбирать.
Node.js устанавливается вместе с npm / Yarn.
Базовые знания JavaScript. Если вы изучаете основы - этот список для изучения JavaScript может быть вам полезен.

Пойдем!

Запустите свой терминал и создайте новый проект React с помощью create-react-app.

npx create-react-app slate-react-rich-text-editor
cd slate-react-rich-text-editor
npm start

Slate предоставляет набор модулей, которые вы будете использовать для создания своего редактора. Самый важный из них - это Editor компонент. Компонент Editor - это фундаментальный уровень, на котором все будет построено. Думайте об этом как о корневом компоненте для всего редактора.

Для начала создадим папку components. Внутри каталога components мы создадим два файла с именами index.js и TextEditor.js.

Если мы откроем браузер, то увидим вот что.

Без проблем! Компонент Editor ожидает начальный value - как вы можете видеть в исходном коде.

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

У нас должно получиться My first paragraph!, отображаемое в нашем приложении.

Сначала текст выглядит как простой <p> абзац. Но если мы исследуем элемент, от нас отвлечется океан сложности.

Попробуйте нажать на текст. Что ты видишь?

Текст доступен для редактирования! Если у вас нет инструментов разработчика React, вот ссылка на магазин приложений Chrome.

Помните, что мы добавили onChange прослушиватель событий в наш Editor компонент.

Приемник событий onChange прослушивает события клавиатуры.
После ловли нажатия клавиши.
Мы обновляем текущее состояние новым нажатием клавиши.
Отправьте новое состояние.
Отрисовываем новое состояние на экране.

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

Добавление пользовательского форматирования

Обычно текст имеет большой заголовок, подзаголовок, курсив, полужирный, code и т. Д.

Давайте подумаем о следующих шагах по форматированию текста.

Обычная практика - начать с нажатия командной клавиши, например ctrl или cmd. Нажатие командной клавиши сообщает редактору, что мы редактируем, а не печатаем.

Например, мы могли бы сделать следующее: cmd ⌘+ b или alt + b - для добавления полужирного к нашему выделенному тексту.

Наш поток будет выглядеть так:

Слушайте события / нажатия клавиш.

2. Различайте нажатые клавиши: alt, cmd или b и в каком порядке? А что произойдет, если эти клавиши действительно будут нажаты?

3. Активируйте фактическое изменение текста с желаемым форматированием.

Начните с добавления события onKeyDown для Editor и передайте обратный вызов.

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

Хорошо, теперь у нас есть вся логика. Если пользователь нажал alt + b, измените текст на полужирный. Как вы думаете, нам следует подходить к стилизации?

Один из способов - создать новый многократно используемый компонент под названием BoldMark.js, который мы можем повторно использовать каждый раз, когда нам понадобится полужирный текст.