Мы рады поделиться с вами хорошими новостями – обновленный Webix 11.3 уже доступен пользователям! В этом релизе мы провели работу по оптимизации Webix Core, добавили новые возможности в Rich Text Editor, а также реализовали другие важные изменения, чтобы сделать работу с библиотекой еще более удобной. Вас ждут улучшенный рендеринг Grid на сенсорных устройствах, расширенные функции в Colorboard, поддержка Markdown и кастомизируемое контекстное меню в Rich Text Editor, а также многое другое. Ниже мы подробно рассмотрим все ключевые обновления.
Обновления Webix Core
Улучшенный динамический рендеринг на сенсорных устройствах
Помимо других обновлений инженеры Webix продолжают работать над повышением удобства использования Webix Grid* на сенсорных экранах. В прошлом релизе виджет получил возможность изменения ширины колонок. В этот раз была улучшена отзывчивость Grid на мобильных и гибридных устройствах при прокрутке строк и колонок таблицы.
Протестируйте на мобильном устройстве >>
*Webix Grid – самостоятельный продукт, выпущенный в этом году. Все обновления, которые получает Grid, также получает и DataTable в Webix Core.
Возможность вернуться к исходному цвету в Colorboard
В этом релизе Colorboard был дополнен возможностью вернуться к цвету по умолчанию в случае, если выбранный цвет оказался неподходящим. Сделать это можно с помощью кнопки «Remove color». Для ее активации в виджете необходимо добавить clear: true; в конфигурацию Colorboard (или в конфигурацию Suggest, если Colorboard используется для инпутов, таких как Colorpicker). По умолчанию свойство clear имеет значение false.
Обновления Rich Text Editor
Поддержка Markdown
В версии 11.3 Rich Text Editor получил важное обновление – нативную поддержку Markdown. Эта функция является ключевой для WYSIWYG‑редакторов, поскольку Markdown – наиболее распространённый формат для LLM и промпт-инжиниринга. Благодаря данному нововведению пользователи виджета могут добавлять ответы, полученные от AI‑ассистентов, напрямую в редактор, а также копировать контент из редактора в свои любимые приложения для заметок или системы управления знаниями, такие как Google Docs или Notion.
Давайте рассмотрим новые возможности более подробно, включая изменения API и улучшения для пользователей редактора.
Копирование и вставка Markdown
Теперь пользователи могут копировать содержимое редактора в формате Markdown с помощью опции Copy as Markdown, доступной в основном и контекстном меню Rich Text Editor. Чтобы скопировать контент, необходимо его выделить и выбрать соответствующую опцию – операция копирования будет применена к текущему выделенному блоку. Вставка содержимого в формате Markdown выполняется через стандартный буфер обмена.
Импорт и экспорт Markdown
В версии 11.3 пользователи получили возможность импортировать и экспортировать файлы .txt и .md в Rich Text Editor и из него. Новый функционал позволяет создавать контент с унифицированным форматированием, что упрощает работу с системами, совместимыми с CommonMark, такими как Obsidian, Notion или популярные движки документации. Опции импорта и экспорта доступны в основном меню редактора (элементы меню Export и Import).
API: getValue/setValue методы получили опцию «markdown»
Чтобы обеспечить поддержку работы с Markdown на уровне API, методы setValue и getValue, используемые для задания и получения значения Rich Text Editor, были расширены новой опцией «markdown» для параметра type (в дополнение к существующим «html», «text» и «raw»). Теперь вы можете задавать и получать значения редактора следующим образом:
const mdValue = editor.getValue("markdown");
API: расширенная поддержка форматов в свойстве value
Поскольку Rich Text Editor теперь поддерживает более широкий набор форматов, его свойство value, определяющее значение редактора при инициализации, было дополнено новым параметром datatype. Данный параметр позволяет указать формат по умолчанию для начального значения редактора и может быть установлен как: «text», «html», «markdown» (ранее поддерживался только формат HTML).
view: "editor",
datatype: "markdown",
value: "**Hello World**",
});
Обратите внимание, что парсер Markdown не поддерживает вложенные структуры. Это означает, что если вы попытаетесь вставить, например, жирный текст внутри курсивного, ссылки внутри элементов списка или многоуровневые списки через setValue(…, «markdown») либо при импорте файлов .md, содержимое будет отображаться некорректно.
Контекстное меню
Чтобы обеспечить быстрый доступ к контекстным действиям, Rich Text Editor был дополнен контекстным меню. Оно включает три группы операций – clipboard, format, и insert – что позволяет держать часто используемые функции под рукой и не тратить время на их поиск в основном меню или тулбаре. По умолчанию контекстное меню отключено, для его активации необходимо установить свойство contextMenu в значение true в конфигурации виджета.
Вы можете кастомизировать меню: оставить только те операции из дефолтной конфигурации, которые вам нужны, или добавить новые и обработать их через событие onContextMenuItemClick. Ознакомьтесь с данным примером кода, чтобы узнать, как создать кастомизированное контекстное меню.
Возврат к исходному цвету текста и фона
В связи с обновлением Colorboard новая функция сброса цвета теперь доступна и в Webix Rich Text Editor. В контролах Colorpicker, которые используются для выбора цвета текста и фона, теперь есть кнопка «Remove color». Новая опция может быть полезна в случаях, когда вы переключаетесь между светлым и тёмным режимами и замечаете, что выбранные цвета трудно различимы или не соответствуют дизайну приложения. Кнопка включена по умолчанию, но её можно отключить в настройках тулбара или в методе config() класса JetView.
Другие обновления
Для ознакомления с полным перечнем последних обновлений перейдите на страницу What’s New. Чтобы получить новую версию библиотеки, обновите ее через npm, Client area или кликните по большой фиолетовой кнопке ниже. Если хотите задать вопрос или оставить комментарий – ждем вас на нашем форуме.
