Discourse での執筆がこれまで以上に簡単になる、新しいコンポーザーのご紹介

[lindsey (Lindsey Fogle)]

今年度の主要プロジェクトの一つは、新しいリッチテキスト編集モードの開発でした。これにより、Discourseでの執筆がより馴染み深く直感的なものになります。新しいエディタは、Metaでしばらくの間、実験的な設定として利用可能でしたが、この度「experimental」のラベルを外し、コミュニティの皆様に試していただく準備が整いました！

このトピックでは、エディタの詳細、その仕組み、そして数クリックでコミュニティで利用可能にする方法について説明します。

Discourseのための新しいリッチテキストエディタ

新しいリッチテキストエディタは、Discourseユーザー、特に技術に詳しくない方や、Markdownでの執筆に慣れていない方、または快適でない方にとって、執筆体験を簡素化します。リッチテキストエディタはMarkdownだけでなく、一般的なキーボードショートカットやツールバーの書式設定調整もサポートしていますが、書式設定は即座にレンダリングされるため、Google DocsやNotionのような使い慣れたツールと同様のWYSIWYG（「見たままが得られる」）体験を提供します。

Markdownの未来

多くのDiscourseユーザーが現在のMarkdownエディタを愛用しており、その予測可能でわかりやすい執筆体験を楽しんでいることを私たちは知っています。新しいエディタは、既存のMarkdownモードと並んで存在するエディタ「モード」であり、あなたとあなたのメンバーは、最適な執筆スタイルを選択できます。

クラシックなMarkdownエディタで行っていたほとんどのことは、リッチテキストエディタでもサポートされています。これには以下が含まれます：

• Markdown（**太字**）、一般的なキーボードショートカット（Command + B）、およびツールバーアイコンを使用した基本的な書式設定。
  

  

• テーブルの作成、投票の作成、日付/時刻の挿入、詳細非表示セクションの追加、ぼかしスポイラーセクションの追加、ファイル/画像/動画のアップロード、リンクのワンボックスとしてのレンダリング、カテゴリ/タグ/ユーザーメンションのスタイリング、コンテンツの引用、脚注の挿入などの高度な機能のサポート。

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

  

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

  

ただし、テーブルや投票の編集を容易にするなど、まだ作業中の領域がいくつかあります。私たちは、エディタモード間の機能同等性を実現するために引き続き取り組んでいきます。また、皆様が最も重要だと考える機能や能力について#featureリクエストを共有していただくことで、私たちの作業の優先順位付けを支援していただけることを奨励します。それまでの間、高度なニーズに対応するためにいつでもMarkdownモードに切り替えることができます。

構築方法

私たちの実装は、優れたProseMirrorとその非コアMarkdownモジュールを基盤としており、モジュールのスキーマ、解析、シリアライゼーション定義を、Discourse固有の機能の基盤として使用しています。

新しいエディタの有効化

リッチエディタはすべてのコミュニティでデフォルトで有効になっています。あなたやあなたのメンバーがエディタを開くと、ツールバーにトグルが表示されます。これにより、クラシックなMarkdown専用モードと新しいリッチテキストエディタを切り替えることができます。

---

更新：メンバーにデフォルトでMarkdownエディタを表示したい場合：

@lindsey

コミュニティでデフォルトで表示されるエディタを制御できる新しい設定を追加しました：Choosing the default composer mode for your community

[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 Lehtonen)]

@alltiagocom

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

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

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