Позиция предварительного просмотра редактора

[Alteras (Steven Chang)]

	Краткое описание	Позволяет пользователю перемещать и изменять размер окна предпросмотра в редакторе Discourse.
	Репозиторий	GitHub - Alteras1/discourse-editor-preview-position: Discourse theme component for users to reposition and resize the preview · GitHub
	Руководство по установке	Как установить тему или компонент темы
	Новичок в темах Discourse?	Руководство для начинающих по использованию тем Discourse

Установить этот компонент темы

Позволяет пользователю перемещать и изменять размер окна предпросмотра в редакторе Discourse. Дважды щелкните по полосе перетаскивания, чтобы расположить разделение по центру.

Предпросмотр в полноэкранном режиме

https://github.com/Alteras1/discourse-editor-preview-position/raw/main/.github/images/editor-preview-position-fullscreen.gif

https://github.com/Alteras1/discourse-editor-preview-position/raw/main/.github/images/editor-preview-position-fullscreen.gif(image larger than 10 MB)

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

Настройки

Кнопка предпросмотра на верхней панели

Перемещает кнопку предпросмотра на верхнюю панель. По умолчанию: true

Скриншоты

Неполноэкранный режим:

Полноэкранный режим:

Разрешить предпросмотр сверху/снизу

Разрешает размещение предпросмотра выше/ниже редактора. По умолчанию: true

Скриншоты

Разрешить изменение размера горизонтальных предпросмотров

Разрешает изменение размера предпросмотров по горизонтальной оси. По умолчанию: true

Разрешить изменение размера вертикальных предпросмотров

Разрешает изменение размера предпросмотров по вертикальной оси. По умолчанию: true

Чистый стиль редактора

Изменяет стиль редактора, чтобы он больше соответствовал стилю полноэкранного редактора. По умолчанию: false.

Скриншоты

Скриншоты стиля в разных ориентациях.

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

Совместимость и примечания

Работает только в Discourse версии 3.2.0 и выше из-за использования функции api.renderInOutlet() и новых компонентов Glimmer.

Так как предпросмотр бок о бок доступен только в десктопных версиях, этот компонент темы применяется только к десктопным версиям.

Аналогично, поскольку в редакторе Rich Text нет отдельного предпросмотра, этот компонент отключен в режиме RTE.

Тема, которую я использовал на скриншотах, — Graceful.

[Heliosurge (Dan DeMontmorency)]

Очень хорошо. Спасибо, уверены, что участники это оценят!

[Monikas (JustMonika)]

Изменение вертикали вызовет ошибку

[Alteras (Steven Chang)]

Спасибо за отчет! Исправление уже выкатили.

Fix vertical preview not capping with new topic composer (#1)

Хм… Я только что понял, что панель перетаскивания находится между панелью инструментов и полями новой темы… Не уверен, как я к этому отношусь…

[Lilly (Lillian)]

Только что установил на свой тестовый форум. Мне это очень нравится. Спасибо за то, что поделились

[jordan.vidrine]

Это супер классно, спасибо, что поделились!

[Lilly (Lillian)]

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

Отличная работа и ещё раз спасибо за то, что поделились.

[MihirR (Mihir)]

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

[Alteras (Steven Chang)]

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