Discourseでの執筆をこれまでにないほど簡単にする新コンポーザーをご紹介します

[lindsey (Lindsey Fogle)]

今年、当社の主要プロジェクトの一つは、Discourse での執筆をより親しみやすく直感的にする、新しいリッチテキスト編集モードのコンポーザー開発に注力することでした。この新しいコンポーザーは、以前から Meta 上で利用可能であり、実験的な設定としても提供されてきましたが、ついに「実験的」というラベルを外し、コミュニティの皆様に試していただける段階に至りました！

このトピックでは、コンポーザーの詳細、その仕組み、そして数回のクリックでコミュニティで利用可能にする方法についてご紹介します。

Discourse 向け新しいリッチテキストエディター

新しいリッチテキストエディターは、特に技術に詳しくない方々や、Markdown での執筆に慣れていない・苦手意識を持っている方々にとって、執筆体験を簡素化します。このエディターは Markdown をサポートするほか、一般的なキーボードショートカットやツールバーによる書式設定も対応していますが、書式は即座に反映され、Google ドキュメントや Notion のような馴染みのあるツールと同様の WYSIWYG（What You See Is What You Get：見たままが出力される）体験を提供します。

Markdown の未来

多くの Discourse ユーザーが、現在の Markdown コンポーザーを愛し、その予測可能でシンプルな執筆体験を楽しんでいることは承知しています。新しいエディターは、既存の Markdown モードと並行して動作するコンポーザーの「モード」であり、メンバーそれぞれが自分に最適な執筆スタイルを選択できるようになっています。

従来の Markdown コンポーザーで行っていたことのほとんどは、新しいリッチテキストエディターでもサポートされています。具体的には以下の通りです：

• Markdown でサポートされているすべての基本書式設定（**太字**）、一般的なキーボードショートカット（Command + B）、およびツールバーのアイコンによる操作。
  

  

• テーブル作成、アンケート作成、日時挿入、詳細隠しセクションの追加、ネタバレ隠しセクションの追加、ファイル/画像/動画のアップロード、リンクのワンボックス化、カテゴリ/タグ/ユーザーメンションのスタイル設定、引用、脚注の挿入などの高度な機能への対応。

• リンクの移動、編集、コピー、タイトル設定、削除のための専用リンク UI
  

  

• 画像のサイズ変更、キャプション追加、削除のための専用画像 UI
  

  

ただし、テーブルやアンケートの編集をより容易にするなど、まだ改善中の領域もあります。コンポーザー間の機能同等化に向けて引き続き取り組んでおり、どの機能や能力が最も重要かを共有していただき、優先順位付けにご協力いただけるよう、#contribute:機能リクエストをお寄せいただくことをお勧めします。それまでの間、高度なニーズに対応するために、いつでも Markdown モードに戻すことができます。

開発の背景

私たちの実装は、優れた ProseMirror とその非コア機能である Markdown モジュール に基づいています。このモジュールのスキーマ、パーシング、シリアライゼーション定義を基盤とし、Discourse 固有の機能を追加しています。

新しいコンポーザーの有効化

リッチエディターは、すべてのコミュニティでデフォルトで有効化されています 。あなたやメンバーがコンポーザーを開くと、ツールバーに切り替えボタンが表示されることに気づくでしょう。これにより、従来の Markdown のみのモードと新しいリッチテキストエディターの間で切り替えることができます。

---

更新：メンバーにデフォルトで Markdown コンポーザーを表示させたい場合：

@lindsey

最近、コミュニティでデフォルトで表示されるエディターを制御できる新しい設定を追加しました：コミュニティのデフォルトのコンポーザーモードを選択する

[volanar]

素晴らしいニュースですね。ロードマップには、すべてのリッチエディターに既に存在する機能はありますか？ 文字色のことですか？ Markdownは文字色をサポートしていないため、これはCSSアドオンを使用して実現できます。あるいは、私たちが知らない他の選択肢があるかもしれません。

[Jonathan5]

@lindsey

リッチエディターを検索し、オンにする設定を確認してください。

その後、デフォルトのエディターを設定するオプションはありますか？よろしくお願いします。

[sam (Sam Saffron)]

@Jonathan5

その後、デフォルトのエディターを設定するオプションはありますか？ありがとうございます。

まだありませんが、追加する予定です。

[Kartoon]

「文字サイズ」ボタン（このサイトには表示されていませんが、私のサイトにはあります）を押すと、このエラーが発生します。

また、投稿に「画像UI」が表示されないのですが？

[MarkDoerr]

@lindsey

画像をリサイズ、キャプション追加、または削除するための専用画像UI

画像のスケーリングオプションをずっと心待ちにしていました。このシンプルさが大好きです！

[awesomerobot (Kris)]

@Kartoon

これはこのサイトには表示されていませんが、私のサイトにはあります。

これは、新しいエディターと互換性を持たせるために更新する必要があるカスタマイズです。おそらく、Composer Button Bonanza のようなテーマコンポーネントを使用していますか？（他にもある可能性が高いです）

@Kartoon

また、投稿に「画像UI」が表示されません。

Discourseを最近更新しましたか？もしそうなら、コンポーザー内の画像をクリックして表示する必要があります。

[sam (Sam Saffron)]

これが公式のbbcodeプラグインだと思います。色のサポートやサイズのような、いろいろな機能があったのを覚えています。

[alltiagocom (Tiago)]

私の提案です。

1. Markdownで書くのが好きです（慣れてしまっただけかもしれませんが）、Markdownバージョンを使用するとき、新しい等幅フォントが好きではないので、コミュニティにリッチエディタを含めるのは私には意味がありません（おそらく私が最も多く書くことになるでしょう）。そうは言っても、これはユーザーが有効/無効にできる設定かもしれません。たとえば、無効にした場合、常にMarkdownバージョンのみが表示され、「通常の」フォント（等幅ではない）が維持されます。有効にした場合、実装されているものが表示されます。管理者としてコミュニティで有効にできますが、各ユーザーが有効/無効にできます。あるいは、各ユーザーがMarkdownバージョンで使用するフォントを決定できる、という方法もあります。
2. リッチエディタが有効になっているときに、コンポーザ全体がリサイズされて移動するのが少し気が散ると感じます。特に両方のバージョンを切り替えて使用する場合（私はそうするつもりです）、トグルをクリックするたびにウィンドウがリサイズされるのは、私には気が散るように感じます。リッチエディタを使用すると、追加の右プレビューペインが不要になることは理解していますが、それでも…そのスペースは他の何かに使用できるのではないでしょうか？
3. これは些細なことですが、リサイズが維持される場合、コンポーザがページの真ん中に配置されているのに、トピックの領域と比較して配置されておらず、私の目にはオフセットしているように見えるのは奇妙に感じます。

正直なところ、この機能を使用するかどうかはまだ確信が持てません。最終的には役立つ可能性があることはわかりますが、現時点では、それを使用することを考えると常に「むずがゆい」感じがします。

[JonLewit]

ユーザーがHTMLコードを試しましたが、WYSIWYGモードではレンダリングされず、HTMLテキストがボックスに入れられただけでした。Markdownに切り替えると、プレビューパネルで正しい結果が表示されます。HTMLの結果を表示するべきなのでしょうか、それともプレビューにはMarkdownに切り替える必要があるのでしょうか？例：

---

Wiki記事作成中

作成者が作業できる範囲で作業を進めさせてください。返信でヘルプやアドバイスを提供していただいても構いませんが、許可なく編集しないでください。

---

[renato (Renato Atilio)]

それは意図したものであり、複雑なHTMLサポートは、見たとおり、「パススルー」HTMLブロックを介してのみ行われます。

<hr>

<H2 style="color:red;">Wiki article under construction</H2>

<p> Please allow the creator to work on this as they are able.  You are free to offer help or advice by replying, but please do not edit it without permission.</p>

<hr>

sanitizerによってstyleが削除されることを考慮すると、これを記述するだけではどうでしょうか。

---
## Wiki article under construction

Please allow the creator to work on this as they are able.  You are free to offer help or advice by replying, but please do not edit it without permission.
---

[TomoftheFog (Tom)]

新しいコンポーザーをフォーラムでテストしており、気に入っていますが、テスト中に意図されたものかどうかわからない奇妙な動作に遭遇しました。

古いエディターを使用して誰かを引用する場合、レイアウトは問題なく、カーソルは引用の下に表示されます。

しかし、デフォルトで新しいエディターを使用するか、返信の作成中に変更すると、カーソルは引用テキストの末尾に自動的にジャンプします。

何かを入力すると引用に含まれ、返信しようとすると、投稿エラーが表示されます。

これがデフォルトであればユーザーに通知できます。新しいエディターでユーザーを引用する際の新しい動作かどうかを確認したかっただけです。

ありがとうございます。

[renato (Renato Atilio)]

意図したものではありません。この動作を特に改善するための内部タスクがあります。

[Don]

こんにちは:waving_hand: ありがとう、これはかなりクールです:heart_eyes:

まだ [wrap]Hello[/wrap] のようなラップをサポートしていないことに気づきました。それを使おうとすると、このメッセージが表示されました。

Markdownパーサーでサポートされていないトークンタイプ wrap_open

[renato (Renato Atilio)]

汎用的な「ラップ」ノードのサポート計画はないと思いますが、どのようなものになるでしょうか？単なるdivでしょうか？

それとも、新しいコンポーザーで使用することを想定している [wrap=something] のようなものはありますか？

[Ethsim2 (Ethan)]

このエラーメッセージはどこで見ましたか？私のインスタンスではBBcodeがそのまま表示されます。

---

@Don

[wrap]Hello[/wrap]

---

次のように変換されます。

---

Hello

[Don]

私たちは、Discourse Icon や Discourse Stickers のようなテーマコンポーネントを使用しています。

ステッカーコンポーネントは、ターゲットのためだけのものなので、ラップせずにスタイルを追加できると思います。

@Ethsim2

このエラーメッセージはどこで見ましたか？

リッチテキストエディタ側に貼り付けるか、Markdown側に貼り付けた場合はそちらに切り替えてください。

[Ethsim2 (Ethan)]

@Don

@Ethsim2

このエラーメッセージはどこで見ましたか？

リッチテキストエディタ側に貼り付けるか、マークダウン側に貼り付けた場合はそちらに切り替えてください。

エラーは発生しませんが、BBコードが残ったままになります。リッチテキストエディタを選択している場合、デスクトップではプレビューが表示されません。

---

これはDiscourseのコミットハッシュlatest-release +269で発生しました。

そして

BBcodeのコミットハッシュ1fbff6b1

[renato (Renato Atilio)]

これは意図した通りに動作しています。認識されていない、またはまだ実装されていないBBCodeは意図的にエスケープ（テキストとして表示）されます。

[Jagster (Jakke Flemming)]

@alltiagocom

新しい等幅フォントは好きではありません

これでよろしいでしょうか？

.d-editor-container .d-editor-textarea-wrapper textarea.d-editor-input {
    font-family: var(--font-family);
}