我在我的 GitHub 仓库 GitHub - denvergeeks/DiscourseComposerButtonBonanza 中克隆了这个 TC，并应用了针对这些错误的修复 [因为似乎无法访问 Codeberg.org 服务进行分叉]。
这是我的更改的提交日志：
如果您在使用 DCBB 时遇到错误，或者即使您有修复这些错误的方案，如果您能打开一个上游问题来报告所有这些情况，那就太好了，这样我就可以修复它们——而不是仅仅在别处克隆仓库，然后告诉人们使用您的克隆版本。（如果您因为某些原因无法在 Codeberg 上分叉（fork）该仓库，也请直接告知我，而不是通过我并不总能收到邮件更新的讨论主题间接告知。）
哦，嘿……就在我准备点击 回复 时，一个 PR 出现了！谢谢！
这个 PR 是否解决了 WYSIWYG-Composer 下 <div> 与 <span> 之间出现的问题（困扰了 @shauny 的问题）——或者它是否解决了其他错误/功能失常，或者仅仅是解决了弃用警告（即那些随时可能中断但尚未中断的事情）？
我想了解幕后发生了哪些变化。任何指向相关主题或 Discourse 文档的指引都将非常感谢。
我与 ChatGPT 合作创建了一个可以简单地放入我的 JS 文件中的修复程序。
它的作用是拦截“Spoiler”（剧透）按钮，然后触发默认按钮。
我很希望看到这成为插件的一部分，如果没有其他方法可以实现（理想情况下，不是调用菜单并强制点击按钮，而是只触发按钮触发的相同操作）。
这是我添加到主题 JS 文件中的代码：
import { apiInitializer } from "discourse/lib/api";
export default apiInitializer((api) => {
/**
* === RTE 剧透按钮混乱修复 ===
*
* 桌面端：通过点击“Options”（选项），然后点击“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;
// 一些移动端下拉菜单需要一个“tick”来完成定位/附加处理程序
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）中覆盖；将 Markdown 模式留给 Bonanza 处理。
if (!isRichTextComposerContext(bonanzaBtn)) return;
// 阻止 Bonanza 在 RTE 中插入 BBCode
e.preventDefault();
e.stopImmediatePropagation();
const composerRoot = getComposerRoot(bonanzaBtn);
openOptionsAndClickBlurSpoiler(composerRoot);
},
true
);
});
它很粗糙，但有效。仅在 iOS/macOS Safari 和 macOS Chrome 上进行了测试，尚未在 Android 上测试。