реклама
разместить

Разработка текстового виджета: опыт Readymag

Автор: Илья Медведев, full stack developer в Readymag

В этой статье мы поделимся нашим опытом разработки текстового редактора в вебе, начиная с обзора существующих возможностей html/css и заканчивая best practices, которые мы вынесли во время разработки. Также мы расскажем о нюансах создания текстовых редакторов: как правильно работать с клавиатурой, выделением текста, вставкой из буфера обмена.

Разработка текстового виджета: опыт Readymag

Readymag — это дизайн-инструмент, который позволяет создавать сайты и мультимедийные проекты в вебе без помощи разработчиков. При работе в нашем редакторе используются виджеты — и текстовый, конечно, самый популярный из них.

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

Редактирование текста в вебе

Разработка текстового виджета: опыт Readymag

Текстовый виджет в Readymag — это поле ввода текста и контролы для управления различными свойствами текста.

Сегодня в вебе есть несколько вариантов реализации полей ввода:

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

Если вам нужно редактировать всю страницу целиком, вы можете воспользоваться document.designMode. Этот режим может быть полезен, например, при работе внутри iframe, т.к. вы можете редактировать все существующие элементы в документе.

Мы остановили свой выбор на атрибуте contenteditable, который включает в себя все необходимые возможности для редактирования текста.

Стилизация текста и свойства шрифтов

Разработка текстового виджета: опыт Readymag

Для стилизации текста мы можем использовать все возможные опции, которые включает в себя CSS. Помимо общеизвестных свойств (таких, как шрифт, начертание, цвет, оформление), мы дали нашим пользователям возможность использовать OpenType font features.

С помощью свойства font-feature-settings появляется возможность включать необычные фичи шрифта. Например: ligatures, stylistic sets, fractions и т.д.

Рекомендую познакомиться с обзорной статьей о демонстрации всех фич шрифтов.

Разработка текстового виджета: опыт Readymag

Современная типографика продвинулась далеко вперед: теперь в вебе вы можете использовать вариативные шрифты. Для этих целей существует свойство font-variation-settings.

Разработка текстового виджета: опыт Readymag

Все фичи, которые вы хотите использовать, должны быть описаны в шрифте. Каким образом мы можем определить, позволяет ли выбранный шрифт использовать ту или иную фичу? Обратимся к спецификациям шрифтов. Каждый шрифт можно представить в виде таблиц с различной информацией, используемой при рендере символов.

Мы используем две таблицы для сбора информации о шрифте:

  • GSUB — Glyph Substitution Table. Данная таблица содержит в себе перечень данных по отрисовке глифов. Объект GSUB.featureList — это перечисление фич шрифта и их свойств. Данные в таблице выглядят следующим образом:

В этой таблице нам интересно поле tag, которое является наименованием фичи шрифта и говорит о том, что она доступна в данном шрифте. tag мы можем смело использовать в CSS-свойстве font-feature-settings.

  • fvar — Font Variations Table. Данная таблица является представлением вариативных свойств шрифта. Она выглядит так:

Каждый объект является свойством шрифта с описанием возможных значений (min/max/default) и локализованным названием (при наличии). Их мы используем в свойстве font-variation-settings.

Работа с клавиатурой

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

Разработка текстового виджета: опыт Readymag

В текстовом виджете есть вспомогательные иконки, которые показывают скрытые символы: например, специальные символы пробелов или мягкий перенос текста. Это обычные svg-иконки, вставленные в текст. Но если вы используете contenteditable, то эти иконки станут препятствием при навигации между параграфами — при нажатии на стрелки на клавиатуре, вы не сможете перейти на следующий параграф.

Мы нашли достаточно простое решение, которое реализовали с помощью span и псевдоэлемента before. Таким образом, браузер воспринимает иконку как текст и она не создает препятствий при навигации с помощью клавиатуры.

Шорткаты

Среди всех шорткатов, которые мы сделали доступными в текстовом виджете, есть два шортката для вставки текста.

Cmd + V — выполняет вставку текста из буфера обмена с сохранением стилей. Если текст был скопирован из какого-либо редактора (Pages, Notes, Microsoft Word, Google Docs и так далее), то у вас будет возможность получить html-представление данных из буфера обмена.

Данный html можно спарсить и вставить с сохранением первоначальных стилей. Получить данные в виде html вы можете следующим образом:

Дополнительно существует шорткат Cmd + Shift + V. При вставке текста с помощью данной комбинации клавиш, браузер оставит в payload только данные в виде text/plain, что позволяет вставить чистый текст без стилей. Эти шорткаты существуют в браузере по умолчанию, но нужно не забывать о реализации работы с ними.

Выделение текста и фокус

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

В этом примере вы можете выделить фрагмент текста и нажать кнопку Bold — при этом выделение в тексте будет сохранено и после нажатия. Но что, если наш пример станет сложнее, и мы добавим input, где пользователь будет устанавливать размер текста? Тогда фокус будет переведен на новый инпут с нашего текстового блока. Существует два варианта решения данной проблемы:

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

2. Мы можем поместить текстовый блок в iframe. Как известно, iframe имеет свой глобальный объект window, а, соответственно, и выделение внутри iframe будет сохраняться, когда пользователь переведет фокус на input снаружи этого iframe.

Перформанс при вводе текста

Немаловажную роль при работе с текстом играет отзывчивость интерфейса. Мы должны строго следить за значением fps при работе в редакторе. Особенно это касается случаев, когда пользователь вводит текст с высокой скоростью или изменяет, например, кегль шрифта. В Readymag существуют десктопный и мобильный вьюпорты: пользователь может создавать разные стили для одного и того же текста в разных вьюпортах. Конструктор в момент изменения текста производит различные вычисления, чтобы синхронизировать данные между ними. Добиться высокой отзывчивости возможно с помощью браузерных api: requestAnimationFrame и requestIdleCallback.

  • requestAnimationFrame вызывается каждый раз при обновлении экрана;
  • requestIdleCallback вызывается только в момент простоя браузера.

Это отличный способ выполнить трудоемкие операции, не блокируя основной поток.

Best Practices

В конце статьи — немного советов, которые помогут при разработке текстовых редакторов в вебе:

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

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

- Следите за работой в разных браузерах. Хотя большинство из них хорошо поддерживают все новинки в вебе, могут возникать проблемы с отображением одних и тех же стилей в разных браузерах.

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

- Замеряйте fps в браузере при вводе текста. Не выполняйте тяжеловесные задачи в одном потоке.

- Не бойтесь экспериментировать.

- Попробуйте текстовый виджет в Readymag.

Полезные ссылки

88
реклама
разместить
1 комментарий

Горячие, мать его, клавиши.

P.S.
Ваш сайт делал псих.

Президентство Дональда Тампа может дать иностранным компаниям «повод задержаться в России» — Reuters

Но может сработать и наоборот — компании чаще станут уходить из страны.

Источник: Reuters
1111
33
11
11
11
Может, да, а может и нет. Аналитика от бога просто.
реклама
разместить
В Москве начнут развивать новую сеть магазинов у дома «Фуд сити экспресс» — «Ведомости»

Её запустили на базе продовольственного комплекса «Фуд сити».

Фото «Ведомости» 
1313
77
22
11
11
"Фуд сити экспресс" Борьба с заимствованиями и чистотой языка где? ))
«Теневой» прокат зарубежных новинок принёс российским кинотеатрам 4,3 млрд рублей в 2024 году

Против 4,8 млрд рублей в 2023 году.

Кадр из фильма «Дэдпул и Россомаха», 2024 год
1010
33
22
11
Почему он теневой? Это чистой воды пиратство с целью наживы. Таким Макаром я могу поставить теневую копию софта на комп....
Российские экспортёры столкнулись со сложностями при возврате валютной выручки в страну

Проблемы усугубились после ноября 2024 года, когда Минфин США ввёл санкции против нескольких десятков финансовых компаний.

Источник фото: «Портал малого и среднего предпринимательства Республики Саха»
1111
55
11
11
11
11
11
Что за вранье опять. Президент твердо и четко сказал: санкции нам на пользу.
Какие функции ИИ-монтажёра Director могут сэкономить время при работе с видео

Нейросеть вырезает и склеивает фрагменты, накладывает субтитры, делает дубляж и цензурирует мат.

77
22
Как я открыл и продал самую крупную сеть настольных игр в России

Мы открыли 79 магазинов, на нас работало 300 человек, а на пике оборот магазинов составил 700 млн рублей. За 10 лет я видел миллионы прибыли, долги в 150 млн ₽, обороты в 700 млн в год, скандалы с правообладателями и кризисы.

Мосигра
6666
1010
11
11
#H2 Автоматизация маркетинга: как мы собрали более 300.000 просмотров для нашей инди-игры

Привет, меня зовут Лев, я владелец студии разработки Keyron. Сегодня я расскажу о том, как мне удалось продумать стратегию взаимодействия с лидом. В данном контексте моим лидом являлся ютюбер с большой(ну или малой) аудиторией.

#H2 Автоматизация маркетинга: как мы собрали более 300.000 просмотров для нашей инди-игры
2626
44
22
11
11
11
С 1 января любой гражданин РФ может получить цифровую профессию бесплатно. Для участия достаточно заполнить анкету и пройти тест.
С 1 января любой гражданин РФ может получить цифровую профессию бесплатно. Для участия достаточно заполнить анкету и пройти тест.
22
22
[]