IPS Invision Community 5: Совершенно новый редактор

Invision Community 5 предлагает  совершенно  новые возможности редактирования, основанные на легком и быстром текстовом редакторе React, созданном для мобильных устройств и современных браузеров.

Почтенный CKEditor v4, лежащий в основе нашего текущего редактора, начинает показывать свой возраст, поэтому мы хотели создать Invision Community v5 с чистого листа, с редактором, который был бы оптимизирован для мобильного использования, легко расширялся и имел набор функций, который позволил бы нам следующая эра сообщества Invision и далее.

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

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

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

Панель инструментов

Панель инструментов была переработана: наиболее часто используемые стили помещаются в первую очередь, а наименее используемые стили и функции выводятся в меню с многоточием. Новое меню абзацев содержит стили заголовков, а также блок кода. Меню «плюс» добавляет списки, поля и цитаты. Преимущество этого нового компактного меню в том, что оно одинаково отображается на мобильных устройствах. В настоящее время существуют различные стили редактора для настольных компьютеров, планшетов и мобильных устройств, при этом некоторые кнопки стилей удалены для экономии места. С Invision Community 5 это уже не так. Даже самый маленький дисплей обладает всей функциональностью.

Эмодзи и значки

Эмодзи стали отличным способом украсить текст и выразить эмоции. Новый инструмент выбора смайлов был модернизирован за счет более крупных смайлов и всплывающих подсказок для демонстрации  коротких кодов смайлов  .

Вкладка «Значки», новая для Invision Community 5, позволяет добавлять значки Font Awesome непосредственно в ваш контент.

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

Контент-боксы

Особенность, которая меня лично больше всего волнует, — это коробки.

Концепция началась как абстракция спойлеров, потому что иногда вам просто нужна «коробка» — раздел, который выделяется на фоне остального контента, что мы делаем вручную в нашей документации и руководствах на этом сайте.  В каждом ящике есть плитка и следующие опции:

• Расширяемый — вы можете пометить блок как «расширяемый »  , что функционально  аналогично спойлеру.  Одним из улучшений является то, что расширяемые блоки используют собственные детали HTML и элементы сводки вместо простых анимированных элементов div Javascript.
• Цвета. При желании вы можете оставить его серым на сером, как спойлеры, но я думаю, что это так  скучно! Цвета автоматически подстраиваются под цвета темы ,  поэтому  они будут  отлично смотреться как в темном, так и в светлом режиме.
• Плавающее (слева/справа/нет). Вы можете расположить поле слева или справа от другого содержимого так же, как и для изображений.
• Ширина. Когда поле плавающее , вы можете установить большую, среднюю или маленькую ширину.

Расширение ссылок

Сообщество Invision уже давно расширило некоторые ссылки, такие как YouTube, предлагая больше контекста или даже мини-плеер, где это необходимо.

В Invision Community 5 мы добавили поддержку встраивания предварительного просмотра динамических ссылок с использованием метаданных сайта. Это превью темы на нашем форуме.

Для тех, кто не знает, протокол Open Graph (OG) — это, по сути, способ, с помощью которого веб-страницы  могут  указывать заголовок, изображение и описание для  динамического внедрения  на другую платформу.  Это основная технология, когда вы видите предварительный просмотр ссылки в Meta, X, Slack или iMessage.

Блоки кода и встроенный код

В новом редакторе добавлены встроенные блоки кода с подсветкой синтаксиса и встроенный код. Оба формата можно применить через панель инструментов или, при желании, вы можете обернуть текст одной обратной кавычкой (`), чтобы преобразовать его во встроенный блок кода, или тройными обратными кавычками (```), чтобы преобразовать его в блок кода.

Блоки кода также поддерживают множество языков для подсветки синтаксиса, включая новую специальную подсветку для синтаксиса HTML-шаблона Invision (создатели тем сообщества Invision и  разработчики приложений, пожалуйста  !) 

Семантические заголовки и относительные размеры

В Invision Community 5 в новом редакторе добавлен селектор блоков с заголовками от 1 до 6.  Вероятно, это   самый распространенный запрос, который я слышу,  чтобы  люди  могли использовать единообразный стиль, а не  просто  большой жирный текст в теге абзаца.  Семантические заголовки также идеально подходят для SEO и доступности.

Помимо селектора блоков, вы можете создавать заголовки с помощью соответствующего ярлыка уценки. Последовательные знаки решетки (#) в начале строки, за которыми следует пробел (количество фунтов соответствует «уровне» заголовка. Например,  ###  создает заголовок 3 (<h3/>) создает заголовок для ты.

Использование четких тегов заголовков означает, что программы чтения с экрана и поисковые системы смогут лучше понять ваш контент, поскольку использование абсолютных размеров шрифта, например 16 пикселей, может сделать неясным, какой тип элемента на самом деле используется. Это заголовок или просто абзац с большим жирным текстом?

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

Дальнейшие улучшения UX

Новый редактор Invision Community 5 имеет несколько ощутимых улучшений, включая дизайн, ориентированный на мобильные устройства.

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

Стрелки новой линии

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

Прикрепленная панель инструментов

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

Ярлыки стиля Markdown

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

Цвета

Общая проблема редакторов форматированного текста на сайтах с несколькими темами заключается в том, что цвета часто должны одинаково выглядеть во всех темах. Это еще более важно для Invision Community 5, поскольку оно имеет встроенную функцию темного режима. По этой причине мы решили предложить сокращенный набор цветовых вариантов, которые динамически адаптируются к теме. Я упоминал выше о цветах блоков, но это также относится и к цвету шрифта. Разница в оттенке небольшая, но и без нее очень заметна. Переключение между светлым и темным режимом никогда не приведет к нечитаемому тексту.

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