Бонанза кнопок композитора

:warning: Редактор richtext (однопанельный, WYSIWYG) ещё не завершён и пока не поддерживает этот компонент темы должным образом.

:information_source: Краткое описание Composer Button Bonanza позволяет администратору сайта определять и добавлять новые кнопки разметки на панель инструментов Composer, а в конфигурации по умолчанию предоставляет целый набор новых кнопок.
:hammer_and_wrench: Репозиторий centertap/DiscourseComposerButtonBonanza - Codeberg.org
:eyes: Readme README.md
:spiral_notepad: Примечания к выпуску RELEASE-NOTES.md
:question: Руководство по установке Как установить тему или компонент темы
:heart: Спонсорство Представлено… CTAP
Этот компонент темы разработан Центром прозрачного анализа и политики — некоммерческой организацией 501(c)(3). Если этот компонент оказался полезен для вашего сайта, рассмотрите возможность пожертвования в поддержку CTAP.

Установить Composer Button Bonanza

«Возможности Composer, которые вы можете себе позволить!»

Composer Button Bonanza — это компонент темы, который добавляет дополнительные кнопки разметки на панель инструментов Composer.

Из коробки он предоставляет множество новых кнопок — настоящий бонанза кнопок. В конфигурации по умолчанию на панель инструментов добавляются три новые кнопки (Сможете ли вы их заметить? :smile:), а остальные скрываются за кнопкой переключения в выпадающем меню :gear::

После нажатия на кнопку переключения становятся видимыми остальные кнопки:

С помощью настроек конфигурации компонента темы вы можете:

  • добавлять новые определения кнопок (и/или удалять предоставленные);
  • выбирать, какие кнопки отображать и когда их показывать;
  • изменять порядок кнопок, размещая их на панели инструментов или в выпадающем меню с шестерёнкой :gear:;
  • предоставлять переводы/локализацию для кнопок.

Этот компонент не определяет никакой разметки или стилей — он лишь добавляет удобные кнопки (возможности!) для ввода существующей разметки, которая активирует уже существующие стили. Его основная цель — помочь пользователям открывать и использовать функциональность Composer. Например, пользователи, которые часто используют сноски, скорее всего, просто будут вводить ^[ и ] напрямую с клавиатуры; но остальные из нас будут рады иметь кнопку :asterisk:, которая напомнит, что нужно сделать.

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

Конфигурация по умолчанию

Конфигурация по умолчанию предоставляет определения для большинства (если не всех) дополнительных элементов разметки, доступных в стандартной установке Discourse (со всеми встроенными плагинами включёнными и без дополнительных плагинов):

  • Стили текста:
    • подчёркивание, зачёркивание
    • верхний индекс и нижний индекс
    • большой текст, маленький текст
    • стиль клавиатуры
  • Форматирование
    • Заголовок 1, Заголовок 2, Заголовок 3
    • Сноска[1]
    • Текст руби( ルビー テキスト)
    • Изображение по внешней ссылке (<img>)
    • Чек-лист
    • Выделенный, Вставленный, Удалённый текст
  • Символы
    • Авторское право ©, Зарегистрировано ®, Торговая марка ™
    • Евро €, Иена ¥
    • Каомодзи «пожатие плечами» (потому что, почему бы и нет? ¯\_(ツ)_/¯ )
  • и кнопка переключения для показа/скрытия большинства вышеупомянутых кнопок

Как упоминалось выше, это лишь значения по умолчанию. Все эти кнопки можно переставить или удалить, а также добавить новые.}


  1. …например, как эта сноска. ↩︎

21 лайк

Это круто, спасибо!

Можно ли добавить тег «спойлер» прямо на верхнюю панель инструментов? Мы часто его используем.

Редактирование: Я разобрался :smiley:

3 лайка

Как работают горячие клавиши?

Я хотел бы создать сочетание клавиш для моей кнопки «спойлер», но разве большинство горячих клавиш уже заняты для других функций?

В примере указано shift-4, но для меня это знак доллара…

3 лайка

Да, очень хороший компонент. Я искал кнопку для отображения дополнительных кнопок в панели редактора.

Кажется, крутой фичей было бы добавить кнопку в панель редактора. Возможно, два варианта: показать/скрыть и/или меню панели редактора. Так можно сгруппировать функции в выбираемую панель.

Например:

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

(Имейте в виду, что этот компонент просто предоставляет параметры/опции, которые уже есть в коде JS Discourse…)

Для ярлыков вы указываете клавишу-ярлык вместе с любыми модификаторами… а затем Discourse всегда добавляет в начало ctrl+ (или cmd+ на оборудовании Apple?). Например, строка «shift+4» (как параметр кнопки) преобразуется в ctrl+shift+4 (как клавиши ярлыка).

:grimacing: Я не пытался найти способ удалить ярлыки — ещё раз, этот компонент добавляется поверх базового набора кнопок, уже встроенных в Композитор. (Я хотел бы, чтобы ctrl+e не был ярлыком для предварительно отформатированного текста, а просто переходил в конец строки!)

3 лайка

О боже, это просто ваааааау!

2 лайка

У меня возникла проблема: я использую этот инструмент, и он мне нравится, но я добавил кнопку «спойлер», и она создаёт теги спойлеров с использованием DIV вместо SPAN, из-за чего они всегда переносятся на новую строку при использовании WYSIWYG-редактора.

Можно ли это изменить, пожалуйста?

Это всё ещё поддерживается?

Проблема с тем, что спойлеры находятся в DIV, а не в SPAN, всё ещё сохраняется.

Похоже, это больше не поддерживается?

Не могли бы вы подсказать, как это исправить? Кнопка «спойлер» работает некорректно (см. мой предыдущий пост)

Я разберусь в этом, но мне нужно, чтобы вы конкретно показали, как вы добавили эту кнопку «спойлер».

Спасибо!

Вот моя конфигурация:

Под этим есть ещё больше. Но спойлер добавляется так:

spoiler,shift+x

В режиме Markdown всё работает идеально.
В режиме WYSIWYG, когда вы выделяете текст и нажимаете кнопку спойлера, он помещается в DIV, а не в SPAN, поэтому становится блочным элементом, расположенным на отдельной строке.

Спасибо!

Буквально час назад я только что осознал, что ComposerButtonBonanza (CBB) сломан в WYSIWYG-Composer. (Или, возможно, наоборот.) Мы не используем WYSIWYG на сайте, который я поддерживаю, поэтому я никогда этого не замечал! Так что… ух.

(Я не фанат WYSIWYG. MediaWiki (например, Википедия) более десяти лет назад вложила много усилий в разработку редактора WYSIWYG, полагая, что это привлечёт больше людей к редактированию. В итоге это ничего не изменило, и они не смогли отказаться от оригинального редактора, поскольку с помощью версии WYSIWYG нельзя решить множество задач, да и в целом она получается довольно неудобной по сравнению с оригинальным редактором вики-разметки с предпросмотром.)

Хм… независимо от CBB… если я вставляю спойлер в WYSIWYG-Composer, а затем кликаю вне поля спойлера, чтобы редактировать что-то другое, он навсегда размывается, и, кажется, я больше не могу редактировать текст спойлера… если только не переключусь в режим Markdown. Я что-то упускаю, или это просто баг в режиме WYSIWYG?

…О, ладно! Если я трижды кликну (из-за раздражения и/или скуки), то смогу снова редактировать текст спойлера! (Я не фанат режима WYSIWYG; я уже упоминал об этом?)

1 лайк

Если вы сможете исправить спойлеры так, чтобы они не становились блочными элементами, я буду очень благодарен :folded_hands:

Я добавил предупреждение в первый пост о том, что он несовместим с редактором WYSIWYG.

Я не проверял это, но мне кажется, что проблема не связана с данным конкретным компонентом. Я бы создал новый отчёт об ошибке с шагами для воспроизведения.

Мне не удалось воспроизвести это. Какой браузер вы используете?

Эта проблема специфична для компонента: исходное действие «Размыть спойлер» в ядре использует другую реализацию, которая не сводится лишь к добавлению тега [spoiler].

2 лайка

Ах, отлично, спасибо, что разобрались. :+1:

Я использую Firefox 140.5.0esr.

1 лайк

Спасибо за отчёт, это должно быть исправлено сейчас. (И извините за оффтоп)

Я попробую написать дополнительный компонент, чтобы переопределить его поведение в режиме «Rich Text» и заставить использовать реализацию из ядра.

2 лайка

В настоящее время этот компонент темы вызывает следующую ошибку: