Как и обещал, я начал постепенно внедрять новый UI/UX, но это довольно масштабная задача, и она не уместится в рамках одного релиза. И дело не только в изменении цветов, иконок и структуры страниц, но и в реализации нескольких крупных компонентов, которые у нас отсутствовали. Первый из них - визуальный редактор.

Честно говоря, я не рассчитывал, что это займёт так много времени. Я собирался взять Quill, в котором уже всё, вроде бы, реализовано, вставить его и допилить по необходимости. Но уже ближе к концу работы над редактором, основанным на Quill, я понял, что он вообще не умеет работать со вложенными структурами (цитаты, спойлеры, многоуровневые списки), и обойти это никак не получится, как ни старайся. В результате, мне пришлось, скрепя сердце, выкинуть два месяца работы и начать писать редактор с нуля на Slate.

По прошествии ещё двух месяцев, я совершенно не жалею о сделанном выборе. Во-первых, я теперь знаю о редакторах всё 😉 А во-вторых, Slate - действительно великолепный фреймворк, хоть и не очень хорошо документирован. Я сомневаюсь, что на чём-то другом мне удалось бы достичь настолько хорошего результата. Этим релизом я завершаю этот этап и приступаю к следующему, который, уверен, вам тоже понравится 😉

После релиза 0.16.0 я начну нумеровать версии немного по-другому. Не будет 0.17.0-beta0 и т.п. Вместо этого я постараюсь присваивать номер каждому билду, выкладываемому на production: 0.16.1, 0.16.2, ... Я не буду писать подробные release notes для каждого из них, но, по крайней мере, будет видно, что сейчас на сервере работает. Если у вас есть собственный сервер Moera, ориентируйтесь на эти дробные релизы при обновлениях. Когда очередной цикл будет закончен, выйдет 0.17.0 и его подробное описание.

А пока - самое интересное в релизе 0.16.0.

Новые фичи

Визуальный редактор. Для постов, комментариев, профиля и других мест, где разрешён текст с форматированием, реализован визуальный (WYSIWYG) редактор. В отличие от существующего текстового редактора, в визуальном разные шрифты, ссылки, вставленные картинки, цитаты, списки, формулы показываются так, как они будут выглядеть в реальности, а не в виде тегов или значков Markdown. Панель инструментов расширена, чтобы вместить все часто используемые возможности редактора. Реже используемые скрыты под кнопкой "More". Такая же панель теперь доступна и в редакторе Markdown/HTML. Только для визуального редактора добавлена кнопка для вставки видео с YouTube и других сайтов, а также кнопка очистки форматирования. Добавлены новые горячие клавиши.

Добавлена кнопка для выбора эмодзи и вставки их в текст.

На маленьких экранах вместо панели инструментов показывается кнопка форматирования с выпадающим меню. На Android кнопки для выделения текста теперь не заслоняют это меню.

Проделана большая работа, чтобы сохранить в визуальном редакторе все возможности старого редактора (кроме сносок), обеспечить правильную работу copy-paste и лёгкое переключение на старый редактор и обратно. Переключиться можно в редакторе постов - нажав на Advanced options внизу редактора; для редактора комментов и прочего - в настройках (My Client > Other).

Рядом с каждой ссылкой в визуальном редакторе показывается кнопочка, позволяющая открыть эту ссылку (в новом окне).

Новый дизайн редакторов. Внедрён новый дизайн редактора постов и редактора комментов. В редакторе постов уменьшено количество цветов и кнопок. Предпросмотр, изменение даты и имени спрятаны в меню кнопки "Publish". Дополнительные возможности не показываются иконками, а спрятаны под ссылкой "Advanced options". Галочка "Compress images" перенесена в диалог загрузки картинок. Вставка загруженной картинки в текст поста делается теперь не нажатием на картинку, а выбором пункта "Insert into text" в меню картинки. Диалог вставки картинки в текст упрощён.

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

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

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

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

Другие изменения

• Разрешена вставка видео с LinkedIn.
• Добавлена настройка, чтобы все внешние ссылки по умолчанию открывались в новой вкладке. (спасибо Leonid Kogan Stavsky за идею)
• В диалоге выбора имени теперь можно ввести любое имя. Даже если оно не появляется в результатах поиска, его всё равно можно вставить.
• Разделены теги <mr-spoiler> и <mr-spoiler-block> - для спойлеров размером в несколько строк и спойлеров размером в несколько абзацев соответственно.
• Добавлена возможность выделять текст "жёлтым маркером" (тег <mark>).
• Если вставляемый в редактор текст содержит символы, зачёркнутые при помощи специальных символов Unicode, они автоматически заменяются на соответствующее форматирование.
• Bootstrap теперь не подключается готовый из модуля, а собирается из SASS. Ненужные части Bootstrap отключены, что уменьшило общий размер CSS.
• Исправлена ошибка, приводившая к потере отдельных картинок при загрузке сразу множества картинок в пост.
• Если размер картинки превышает максимальный разрешённый сервером, это сразу показывается в диалоге загрузки картинок.
• Убраны многоточия из пунктов меню - они уже не используются в современном дизайне.
• Исправлены ошибки при обновлении на лету числа реакций и комментариев у постов в ленте новостей.
• Исправлена ошибка, приводившая к "исчезновению" картинок, прикреплённых к черновику.