Composer ボタン祭り

テーマコンポーネント
28

このTCのクローンをGitHubリポジトリ GitHub - denvergeeks/DiscourseComposerButtonBonanza に作成し、これらのエラーに対する修正を適用しました（Codeberg.orgサービスへのアクセスがフォークに機能しないようだったため）。

こちらが私の変更のコミットログです：

29

DCBB でエラーが発生した場合、あるいはそのエラーの修正方法をご存知の場合は、リポジトリをどこか別の場所にクローンして、皆さんにそのクローンを使うように伝えるのではなく、私が修正できるように、上流のイシューを開いていただけると大変助かります。 (何らかの理由で Codeberg でリポジトリをフォークできない場合は、その旨も、私が常にメール更新を受け取るわけではないディスカッショントピック経由で偶発的に知らされるのではなく、直接教えていただけるとありがたいです。)

おや、ちょうど「返信」を押そうとしたら、PR が現れました！ありがとうございます！

この PR は、WYSIWYG Composer で発生している <div> と <span> に関する問題（@shauny を悩ませていたもの）に対処しているのでしょうか、それとも他のエラー/機能不全に対処しているのでしょうか、あるいは単に非推奨の警告（つまり、まもなく壊れるがまだ壊れていないもの）に対処しているのでしょうか？

舞台裏で何が変わったのかを理解したいです。トピックや Discourse のドキュメントへのポインターをいただけると大変ありがたいです。

30

ChatGPTと協力して、JSファイルにそのままドロップできる修正を作成しました。

これは、「Spoiler」ボタンをインターセプトし、代わりにデフォルトのボタンをトリガーするものです。

（メニューを呼び出してボタンをクリックさせるのではなく、ボタンがトリガーするものと同じものをトリガーできれば理想的ですが）プラグインの一部としてこれを実装できれば幸いです。

テーマのJSファイルに追加したコードは次のとおりです。

import { apiInitializer } from "discourse/lib/api";

export default apiInitializer((api) => {
  /**
   * === Composer Button Bonanza のための RTE スポイラー修正 ===
   *
   * デスクトップ: オプションをクリックし、次に「Blur spoiler」をクリックすることで機能します。
   * モバイル: ドロップダウンのマークアップが異なるため、厳密なセレクターではなくテキストで項目を見つける必要があります。
   *
   */

  const BONANZA_SPOILER_SELECTOR = "button.ComposerButtonBonanza-btn-spoiler";

  const OPTIONS_TRIGGER_SELECTORS = [
    'button[aria-label="Options"]',
    'button[title="Options"]',
    'button[aria-label*="options" i]',
    'button[title*="options" i]',
  ].join(",");

  function isRichTextComposerContext(el) {
    const composer = el.closest(".d-editor, .composer, .composer-controls");
    if (!composer) return false;

    const hasProseMirror = !!composer.querySelector(".ProseMirror");
    const hasTextarea = !!composer.querySelector("textarea");
    return hasProseMirror && !hasTextarea;
  }

  function getComposerRoot(el) {
    return el.closest(".d-editor, .composer, .composer-controls") || document;
  }

  function normalizeText(s) {
    return (s || "").trim().replace(/\s+/g, " ");
  }

  function isVisible(el) {
    if (!el) return false;
    const style = window.getComputedStyle(el);
    if (!style) return false;
    if (style.display === "none" || style.visibility === "hidden") return false;
    const r = el.getBoundingClientRect?.();
    return !!r && r.width > 0 && r.height > 0;
  }

  function openOptionsMenu(composerRoot) {
    const btn = composerRoot.querySelector(OPTIONS_TRIGGER_SELECTORS);
    if (!btn) return false;
    btn.click();
    return true;
  }

  function findOpenDropdownMenuRoot() {
    // Discourseでは、ドロップダウンは通常これらのコンテナのいずれかを使用します。
    // 最後に表示されたもの（最も新しく開かれたもの）を選択します。
    const candidates = [
      ...document.querySelectorAll(".dropdown-menu, .dropdown-menu__items, .dropdown-menu__content"),
    ].filter(isVisible);

    return candidates.length ? candidates[candidates.length - 1] : null;
  }

  function findBlurSpoilerButton(menuRoot) {
    if (!menuRoot) return null;

    // まず、デスクトップのような構造を試します（高速パス）
    const exact =
      menuRoot.querySelector('button[title="Blur spoiler"]') ||
      menuRoot.querySelector('button[aria-label="Blur spoiler"]');
    if (exact) return exact;

    // それ以外の場合は、ドロップダウン項目のどこかにあるテキストコンテンツで検索します
    const itemRoots = Array.from(
      menuRoot.querySelectorAll(".dropdown-menu__item, li, div, button")
    );

    for (const node of itemRoots) {
      const text = normalizeText(node.textContent).toLowerCase();
      if (text === "blur spoiler" || text.includes("blur spoiler")) {
        // 最も近い実際のボタンをクリックします
        const btn = node.closest("button") || node.querySelector?.("button");
        if (btn) return btn;
        // すでにボタンのような要素である場合は、それを返します
        if (node.tagName === "BUTTON") return node;
      }
    }

    // 最後の手段: ラベルテキストでメニュー内のすべてのボタンをスキャンします
    const buttons = Array.from(menuRoot.querySelectorAll("button"));
    for (const btn of buttons) {
      const t = normalizeText(btn.textContent).toLowerCase();
      const title = normalizeText(btn.getAttribute("title") || "").toLowerCase();
      const aria = normalizeText(btn.getAttribute("aria-label") || "").toLowerCase();

      if (t.includes("blur spoiler") || title === "blur spoiler" || aria === "blur spoiler") {
        return btn;
      }
    }

    return null;
  }

  function clickBlurSpoilerFromOpenMenu() {
    const menuRoot = findOpenDropdownMenuRoot();
    const btn = findBlurSpoilerButton(menuRoot);
    if (!btn) return false;

    // 一部のモバイルドロップダウンでは、ハンドラの位置決め/アタッチを完了するためにティックが必要です
    requestAnimationFrame(() => {
      requestAnimationFrame(() => btn.click());
    });

    return true;
  }

  function openOptionsAndClickBlurSpoiler(composerRoot) {
    if (!openOptionsMenu(composerRoot)) return false;

    // メニューと項目が存在するまでリトライします
    let tries = 0;
    const maxTries = 30;

    const attempt = () => {
      tries++;
      if (clickBlurSpoilerFromOpenMenu()) return;
      if (tries < maxTries) setTimeout(attempt, 35);
    };

    setTimeout(attempt, 0);
    return true;
  }

  document.addEventListener(
    "click",
    (e) => {
      const bonanzaBtn = e.target.closest(BONANZA_SPOILER_SELECTOR);
      if (!bonanzaBtn) return;

      // RTEでのみオーバーライドします。マークダウンモードではBonanzaをそのままにします。
      if (!isRichTextComposerContext(bonanzaBtn)) return;

      // RTEでのBonanzaのBBCode挿入を防ぎます
      e.preventDefault();
      e.stopImmediatePropagation();

      const composerRoot = getComposerRoot(bonanzaBtn);
      openOptionsAndClickBlurSpoiler(composerRoot);
    },
    true
  );
});

ハックですが、動作します。iOS/macOS SafariとmacOS Chromeでのみテスト済みで、Androidではまだテストしていません。