引用の呼び出し

カスタマイズ テーマコンポーネント
43

ここにエラーがあるかもしれません。これを有効にした（元の設定を無効にした）ところ、管理者アクセス権のないアカウントで問題が発生しました。何が競合したのか正確にはわかりませんが、一部のトピックが非表示になり、カテゴリ/タグのナビゲーションが非許可アカウント（TL1）では全く使用できなくなりました。

Arkshineのアップデートを待ちます。

「いいね！」 2
44

本日アップデートした際に、以下が表示されました

[管理者通知] テーマ「Quote Callouts」（https://connect.amicalnet.org/admin/customize/themes/41?safe_mode=no_themes）には、更新が必要なコードが含まれています。(id:discourse.widgets-decommissioned)（詳細はこちら）

「いいね！」 1
45

修正をプッシュしました。コンポーネントを更新して試していただけますか？:folded_hands:

「いいね！」 7
46

今のところ順調に動作しています！

「いいね！」 2
47

現在、引用ブロックが折りたたんだり展開したりできなくなるという問題が発生しています。

48

再現可能な例をここに貼り付けていただくか、フォーラムへの投稿へのリンクをいただけますでしょうか（ご希望であればプライベートメッセージで送っていただいても構いません）。

「いいね！」 1
49

もちろんです、このトピックの最後はこちらです

50

ここに、コンポーネントを最新化し、リッチテキストエディタのサポートを追加するアップデートがあります！:rocket:
微調整や予期せぬエッジケースが必要になるかもしれませんが、これはかなりの良いスタートだと考えています。:folded_hands:

要約

  • リッチテキストエディタのサポートを追加（詳細な概要は下記参照）
  • レンダリングをglimmerコンポーネントに変換
  • ネストされたcalloutでのCSSカラーを修正
  • エイリアスでのCSSカラーを修正
  • 折りたたみのアニメーションがよりスムーズになるはず
  • callout_transition_duration_ms設定（折りたたみアニメーション）を追加
  • デフォルトのcalloutを挿入するためのショートカットとしてCtrl + qを追加。両方のエディタで動作し、ショートカットはキーボードショートカットモーダルに追加されます
    画像

    chrome_7HSSbReBtO
    chrome_7HSSbReBtO329×348 15.5 KB

    chrome_YaDrphqvbV
    chrome_YaDrphqvbV712×275 19.1 KB

  • チャット：ツールバーにデフォルトのcalloutを挿入するボタンを追加
    画像

    chrome_CWig42tWHY
    chrome_CWig42tWHY478×551 16.3 KB

    chrome_TsyfsoA82R
    chrome_TsyfsoA82R291×373 12.8 KB

    chrome_nWk7hUyRGr
    chrome_nWk7hUyRGr445×181 5.07 KB

  • Markdownプレビュー：アイコンをクリックしてタイプを変更する機能を追加
    画像

    chrome_atmmLf0v3c
    chrome_atmmLf0v3c1522×462 41.3 KB

リッチテキストエディタ

リッチテキストエディタについて、そして期待できることについて話しましょう！

calloutの作成:

calloutを挿入するには4つの方法があります:

  • キーボードショートカット
  • ツールバー
  • 入力ルール
    • /callout<:type>
    • !!<type>
  • 貼り付けサポート
    ビデオ

calloutの編集

calloutを編集するためのコントロールは、選択した場合にのみ表示されます。

  • タイプセレクター
    アイコンをクリックすると、フローティングメニューが表示されます。
  • カスタムタイトル
    インラインフォーマットと絵文字をサポート
  • 折りたたみ
    calloutを折りたたみ可能に設定します。オプションメニューからアクセスできます。
    ビデオ

calloutの整理

  • 移動コントロール

    • デスクトップ
      calloutをドラッグアンドドロップするためのハンドルがあります。
    • タッチデバイス
      calloutを上下に移動したり、隣接するcalloutの中にネストしたりできます。これは、頻繁に行う操作ではないため、ビューの肥大化を避けるためにデフォルトで無効になっています。オプションで切り替えることができます。
    ビデオ

  • キーボードナビゲーション
    これにより、ネストされたcalloutに出入りしやすくなります。
    このバージョンでは動作を consistent に保つために、将来的に調整が必要になるかもしれません。

    • ← タイトルの先頭で、calloutセレクターが自動的に開きます。
    • ↑ ↓ 段落がないcallout本文内では、段落が作成されます。空のコンテンツで終了した場合、段落は削除されます。
    • タイトル内でEnterを押すと、カーソルが本文内に移動します（必要に応じて段落が作成されます）。
    ビデオ

  • クリックして挿入

    • 段落がない領域では、内部をクリックして段落を開くことができます。
    • お好みで、calloutの内部または外部に段落を開くためにボタンを使用することもできます。
      ビデオ

おそらく、後で調べることは次のとおりです:

  • 入力ルールのオートコンプリート
  • 特にダークモードでの一貫性と視認性を確保するために、最新のCSSを使用して色を改善する。

  • 設定をすべて削除し、まずシンプルさに重点を置き、高度なカスタマイズはCSSのみで行いたいと思っていましたが、それはもう手遅れでした :rofl:

フィードバックをくれたMoinに特に感謝します。

以上です。ご意見をお聞かせください。フィードバックは大歓迎です！

「いいね！」 7
51

特定の型に複数のエイリアスがある場合、リッチテキストエディタでその型を選択すると、各エイリアスがオプションとして連続して表示されるという効果に気づきました。
これは良い設計ですが、さらに拡張が必要なようです。タイトルが定義されていない場合、コールアウトタイプが表示されるため、同じ最終的な配色を共有するこれらの連続したオプションは、異なる名前とタイトルを表示します。しかし、タイトルが定義されている場合、引用符を作成するときと同じようにリスト内で同じタイトルが表示され使用されるため、いくらか混乱を招きます。
この拡張の実装が難しい場合は、タイトルが定義されている場合に、エイリアスに一対一で対応する余分なエントリを型選択リストに追加しないようにするためのチェックボックスを提供することを提案します。:slightly_smiling_face:

image
image840×380 77.6 KB

「いいね！」 3
52

おっしゃるとおりです！フィードバックありがとうございます。TCをご利用いただいているのを見るのは嬉しいです。
実は、そのことについては以前考えたことがあったのですが、修正するのを完全に忘れていました。 :grinning_face_with_smiling_eyes:
タイトルが設定されている場合にリストを適切にフィルタリングするための修正に取り組むつもりです。

「いいね！」 2
53

修正をプッシュしました。どうなったか教えてください！:+1:

「いいね！」 3
54

最新バージョンをテストしたところ、タイトルが付いているものは、エイリアスの数に関わらず、カテゴリ選択リストに1つしか表示されなくなりました。:smiley:

image
image581×317 17.4 KB

「いいね！」 3
55

de翻訳を使用している場合のみ、以下のエラーが発生します：

引用コールアウトのエラーを示す赤いバナーのスクリーンショット

JSコンソール:

client-error-handler.js:109 [THEME 6 'Quote Callouts'] TypeError: Cannot set properties of undefined (setting 'callout_sample')
    at new po (callouts.gjs:30:19)
    at callouts.gjs:265:23
    at eK (plugin-api.gjs:3582:10)
    at Object.initialize (callouts.gjs:264:5)
    at i.initialize (app.js:304:28)
    at index.js:375:19
    at e.each (index.js:183:7)
    at e.walk (index.js:112:10)
    at e.each (index.js:59:20)
    at e.topsort (index.js:65:10)
    at ij._runInitializer (index.js:388:11)
    at ij.runInstanceInitializers (index.js:373:10)
    at l._bootSync (instance.js:111:22)
    at ij.didBecomeReady (index.js:780:18)
    at invoke (index.js:262:14)
    at m.flush (index.js:180:11)
    at g.flush (index.js:334:19)
    at Y._end (index.js:762:32)
    at Y._boundAutorunEnd (index.js:499:12)
h	@	client-error-handler.js:109

このエラーは、以下の引用の最後の行で発生しています：

class QuoteCallouts {
  constructor(owner, api) {
    [...]
    window.I18n.translations[
      window.I18n.fallbackLocale || "en"
    ].js.composer.callout_sample = ``;

️ * /u/<username>/preferences/interface の「インターフェース言語」を「ドイツ語 (Deutsch)」に設定してください

このエラーは、2026.3.0-latest と 2026.4.0-latest の間の最近の Discourse アップデートのいずれかで導入されたもののようですが、原因を特定できていません。現在は 2026.4.0-latest 4b2c45376d および Quote Callout v0.0.1 9aa6548 を使用しています。

「いいね！」 2
56

この種の問題はもう修正されていると思っていたのですが。
サイトのロケールはデフォルトの英語（米国）に設定されていて、ユーザーのロケールはドイツ語に設定されている、という理解で合っていますか？

「いいね！」 1
57

はい、それで問題が解決しました。ありがとうございます！ <3

「いいね！」 1
58

@Arkshine さん、素晴らしいプラグインをありがとうございます！

コールアウトをタイトルなし、またはアイコンのみで表示することは可能でしょうか？

「いいね！」 2
59

今はそれを行うことはできないと思いますが、次のアップデートで方法を考えます！

その間、トリックがあります：ゼロ幅スペースを挿入すると機能するはずです :grinning_face_with_smiling_eyes: 。例えば、このページからコピーできます：​ U+200B ZERO WIDTH SPACE - Unicode Explorer

chrome_4Pa7RJUTb4
chrome_4Pa7RJUTb4937×196 13.8 KB

chrome_fgCimP8Pt6
chrome_fgCimP8Pt6761×192 11.2 KB

これでうまくいったか教えてくださいね。

「いいね！」 4
60

うまくいったと思います！ありがとうございます！:heart_eyes:

「いいね！」 2
61

こんにちは、@Arkshine :waving_hand:

「詳細を隠す」機能を使用しても、元の呼び出しボックスの色を維持することは可能でしょうか？

投稿エディタモードでは元の色が保存されますが、変更を保存すると背景がグレーになってしまいます：

image
image1239×654 45.8 KB

image
image643×475 16.1 KB

「いいね！」 2
62

ご報告ありがとうございます！
修正をプッシュしました。コンポーネントを更新して、再度発生するか確認してもらえますか？

「いいね！」 3