トピックのRich Textエディタがホワイトスペース文字を複数の方法で壊す

皆さん、こんにちは!

このトピックでは、他のトピックを参照しますが、他のレポートで言及されているよりも大きな問題について説明していると思います。

私のテスト環境

  • OS: MacOS 15.6.1
  • ブラウザ: Google Chrome 139.0.7258.140 (Official Build) (arm64)

元の観察

コンポーザーのリッチテキストエディターがコードブロックを頻繁に壊すことに気づきました。ユーザーはコードやログを1行で投稿し始め、最初はコンポーザーにコンテンツをコピーする際に間違いを犯したのだと思いました。改行だけでなく、投稿された行の間には空白文字が全くありませんでした。

時々、ユーザーはYAMLのインデントを失って、複数の単一行コードを投稿しました。時には複数行のコードが単一行としてハイライトされ、時にはコードブロック内の単一行でした。これは頻繁に発生したので、昨日リッチテキストモードをテストしましたが、報告は保留していました。今日、その問題を再現することはできませんでしたが、リッチテキストエディターで改行を壊す別の方法を見つけました。

それがバグかどうか確信が持てなかったので、モデレーターと問題を話し合い、バグが修正されたという確認を待っていました。その後、同じ動作を見つけられなかったことが判明しましたが、すべての問題は空白文字に関連していました。ただし、別のモデレーターが言及した問題は再現できませんでしたが、それは彼がコードエディターまたはターミナルからテキストをコピーし、私がフォーラムの以前のコードブロックからコピーしたため、空白文字の問題が異なって発生したことに気づきました。

コードブロックの空白文字を壊すさまざまな方法

最初の方法

  • ターミナルから出力をコピーする
  • このように、リッチテキストモードのコンポーザーにその出力を貼り付ける(runcの引数なしの出力の一部)
COMMANDS:
   checkpoint  checkpoint a running container
   create      create a container
   delete      delete any resources held by the container often used with detached
  • 複数行の出力が表示されますが、インデントが削除されています
  • コードブロックが必要だと気づき、テキストを選択して「コード」ボタンをクリックしてコードブロックにします。
  • コードは少し奇妙に見えます。コードのように見えますが、コードブロックのようではありません。理由を確認するためにマークダウンに戻り、次を確認します。
`COMMANDS:`
`checkpoint  checkpoint a running container`
`create      create a container`
`delete      delete any resources held by the container often used with detached container`

同じトピックの別の投稿または別のトピックからコードをコピーする

既存のトピック:`white-space` CSS property of clipboard data not respected when pasting in rich text editor

もちろん、これはDiscourseでコピーする正しい方法ではありません。「Quote」ボタンを使用して選択したテキスト(通常はコードブロックの一部でも機能します)を引用することもできますし、各コードブロックの隅にあるコピーボタンもありますが、これが問題に気づいた方法であり、コピーボタンも機能しませんでした。

  • HTMLページから複数行のコードをコピーする
  • リッチテキストモードのコンポーザーに貼り付ける
  • 改行が失われていることに気づく
  • この時点で、HTML内だけの問題だと思うかもしれません。そのため、コードにします。
  • 改行は戻ってきませんでした。

他の投稿のコードブロックの右上隅にあるコピーボタンを使用する

  • マウスカーソルを既存のコードブロックの上に移動する
  • 右上隅に小さな「コピー」ボタンが表示されることに気づく
  • そのボタンをクリックしてコードをコピーする
  • リッチテキストモードのコンポーザーに貼り付ける
  • 改行は保持されますが、HTMLから直接コピーしたときと同じようにインデントが失われます。
  • コードブロックにして、インデントのない複数の単一行コードを取得する

マークダウンに切り替えたときに発生した問題(修正された可能性あり)

  • リッチテキストエディターでコードブロックを作成する
  • 完全に正常な複数行コードブロックが表示される
  • マークダウンに切り替える
  • コードブロックの代わりに単一行が表示される
  • コードブロックではなくなっていることに気づきますが、テキストが長い場合はインデントが失われていることを見逃す可能性があります。
  • コードブロックにする
  • 投稿すると、改行が完全に削除され、スペースさえも保持されていない単一行を含むコードブロックが表示されます。

これも、今日再現できないものであり、修正されたかどうかリリースノートを検索していませんが、他のトピックでもこの問題が報告されているのを見つけることができませんでした。

結論

リッチテキストモードは、複数の点でコードブロックに問題があるようです。モデレーションが難しくなります。なぜなら、ユーザーが投稿を正しくフォーマットしなかったと想定することが多く、フォーマットガイドをリンクしますが、リッチテキストモードでは機能しません。しかし、これは問題ではありません。ガイドは変更できるからです。しかし、ユーザーは実際に投稿をフォーマットしようとしますが、リッチテキストエディターのために失敗します。

私が最初に気づいた問題は、おそらくすでに修正されたものなので、一部のユーザーはリッチテキストエディターから始め、気に入らず、マークダウンに切り替え、コードブロックを壊したことに気づき、修正しようとしましたが、できず、すべてを再度貼り付けなかったようです。

ここで、リッチテキストエディターを完全に無効にすることに関するこのトピックにも言及したいと思います:How can i set disable Markdown & Default to Rich Text

これは、昨日既存のレポートを検索しているときに見つけた最初のトピックの1つであり、デフォルトをマークダウンに戻しただけなのでリンクします。この部分に誰かが反応するのを避けるためにここで止まります。おそらく、他のトピックにいくつかのメモを追加します。

追伸:この投稿で校正機能を使用しました。素晴らしいです!

ここに専用のバグレポートがあります。

「いいね!」 1

ありがとうございます!探すのに十分な時間を費やしたと思ったのですが、これを見つけられませんでした。

rimelekさん、詳細なレポートをありがとうございます。大変助かります。

バックログに追加しました(一部は既に作業を開始している件です)が、対応まで数週間かかる可能性があります。

「いいね!」 3

この報告以降、いくつかの改善を行いました。主に、ツールバーのアクションがインライン/ブロック間でよりコンテキストを認識するようになり、複数の段落と単一のコードブロック間を行き来するサポートも追加されました。

残りの「問題」は、コンポーザー内にプレーンテキストを貼り付けた場合に、それがプリフォーマットされたテキストであるという識別がないと、コードブロックを自動作成できないことだと思います。例えば、ターミナルからコピーした場合、plain/text クリップボードしか追加されず、現在コードブロックを自動作成するには pre 要素を持つ text/html が必要になります。

これ以降、状況が改善されたか確認していただけますでしょうか?まだ正しく動作していないと思われる点があれば、お知らせください。

ありがとうございます!

「いいね!」 2