エディタのプレビュー位置

:information_source: 概要 Discourse のコンポーザーでのプレビューの再配置とサイズ変更をユーザーに許可します。
:hammer_and_wrench: リポジトリ GitHub - Alteras1/discourse-editor-preview-position: Discourse theme component for users to reposition and resize the preview
:question: インストールガイド テーマまたはテーマコンポーネントのインストール方法
:open_book: Discourse テーマ初心者の方へ Discourse テーマ使用の初心者ガイド

このテーマコンポーネントをインストール

Discourse のコンポーザーでのプレビューの再配置とサイズ変更をユーザーに許可します。ドラッグバーをダブルクリックすると、分割位置が中央に再配置されます。

preview

フルスクリーンプレビュー

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

また、フルスクリーン表示と同じスタイルでコンポーザーをスタイリングするオプションも追加されます。

clean composer mode

設定

トップバープレビューボタン

プレビューボタンをトップバーに移動します。デフォルト: true

スクリーンショット

フルスクリーンではない:


フルスクリーン:


上下プレビューを許可

プレビューをエディターの上または下に配置することを許可します。デフォルト: true

スクリーンショット


水平プレビューのリサイズを許可

プレビューを水平方向にリサイズできるようにします。デフォルト: true

垂直プレビューのリサイズを許可

プレビューを垂直方向にリサイズできるようにします。デフォルト: true

クリーンコンポーザースタイル

コンポーザースタイルをフルスクリーンコンポーザースタイルにより近いものに変更します。デフォルト: false

スクリーンショット

さまざまな向きでのスタイルのスクリーンショット。




この設定は個人の好みに大きく依存します。このテーマコンポーネントの開発中、フルスクリーンエディターと非フルスクリーンエディターの違いが気になりました。そのため、より「統一された」体験を作成するために、このスタイリングを追加しました。デフォルトではオフになっています。

互換性・注記

api.renderInOutlet() 関数と新しい Glimmer コンポーネントの使用により、Discourse v3.2.0 以降でのみ動作します。

サイドバイサイドプレビューはデスクトップビューでのみ発生するため、このテーマコンポーネントはデスクトップビューにのみ適用されます。

同様に、リッチテキストエディターには個別のプレビューがないため、このコンポーネントは RTE モードでは無効になります。

スクリーンショットで使用しているテーマは Graceful テーマです。

「いいね!」 18

素晴らしい。メンバーの皆様にも喜んでいただけると思います!

「いいね!」 1

縦を変更するとバグが発生します

「いいね!」 1

レポートありがとうございます!修正をプッシュしました。

うーん…ドラッグバーがツールバーと新規トピックフィールドの間にあることに気づきました…どう感じるかわかりません…

「いいね!」 2

テストフォーラムにインストールしました。とても気に入っています。共有していただきありがとうございます :slight_smile:

「いいね!」 2

これはとても良いですね、共有ありがとうございます!

「いいね!」 1

このコンポーネントがどれほど気に入っているかをもう一度投稿したかっただけです。私は自分のインスタンスで日々の仕事の多くを行っており、それは私のDiscourseユーザーエクスペリエンスを計り知れないほど向上させました。特に、大きな画面のデスクトップモニターで、プレビューアが上部にある、より広いコンポーザーが気に入っています。モバイルでもそのビューを適応させることが可能かもしれないと感じています(モバイルキーボードがそれに何か言うかもしれませんが)、なので、時間があるとき(つまり、ほとんどない時ですが lol)にフォークして試してみるかもしれません。

素晴らしい仕事です :star_struck: そして、これを共有してくれてありがとう。 :purple_heart: :discourse:

「いいね!」 4

これは主にデスクトップ向けに設計されていますか?

はい、デスクトップ向けに設計されました。

「いいね!」 1