DEV: Switch to new addComposerToolbarPopupMenuOption plugin API (#113)

Why this change?

`api.addToolbarPopupMenuOptionsCallback` has been deprecated in discourse/discourse@913fd3a

.discourse-compatibility

@@ -1,2 +1,3 @@
+< 3.2.0.beta2: 09b4e50441d4e30d2e3aec14f862fa2cede644e1
 3.1.999: 65989714af08eda44196cca3a0afe85c9e9443f9
 2.9.0.beta3: c65972911f7ab3323dfe3de4a727a9cb2961b57b

assets/javascripts/initializers/spoiler-alert.js

@@ -1,10 +1,9 @@
 import { withPluginApi } from "discourse/lib/plugin-api";
-import ComposerController from "discourse/controllers/composer";
-import applySpoiler from "discourse/plugins/discourse-spoiler-alert/lib/apply-spoiler";
 import {
   addBlockDecorateCallback,
   addTagDecorateCallback,
 } from "discourse/lib/to-markdown";
+import applySpoiler from "discourse/plugins/discourse-spoiler-alert/lib/apply-spoiler";
 
 function spoil(element) {
   element.querySelectorAll(".spoiler").forEach((spoiler) => {
@@ -17,24 +16,14 @@ function spoil(element) {
 export function initializeSpoiler(api) {
   api.decorateCookedElement(spoil, { id: "spoiler-alert" });
 
-  api.addToolbarPopupMenuOptionsCallback(() => {
-    return {
-      action: "insertSpoiler",
-      icon: "magic",
-      label: "spoiler.title",
-    };
-  });
-
-  ComposerController.reopen({
-    actions: {
-      insertSpoiler() {
-        this.get("toolbarEvent").applySurround(
-          "[spoiler]",
-          "[/spoiler]",
-          "spoiler_text",
-          { multiline: false, useBlockMode: true }
-        );
-      },
+  api.addComposerToolbarPopupMenuOption({
+    icon: "magic",
+    label: "spoiler.title",
+    action: (toolbarEvent) => {
+      toolbarEvent.applySurround("[spoiler]", "[/spoiler]", "spoiler_text", {
+        multiline: false,
+        useBlockMode: true,
+      });
     },
   });
 
@@ -61,8 +50,9 @@ export default {
 
   initialize(container) {
     const siteSettings = container.lookup("site-settings:main");
+
     if (siteSettings.spoiler_enabled) {
-      withPluginApi("1.3.0", initializeSpoiler);
+      withPluginApi("1.15.0", initializeSpoiler);
     }
   },
 };

test/javascripts/acceptance/spoiler-button-test.js

@@ -1,20 +1,16 @@
+import { click, fillIn, visit } from "@ember/test-helpers";
+import { test } from "qunit";
 import {
   acceptance,
   exists,
   query,
 } from "discourse/tests/helpers/qunit-helpers";
-import { test } from "qunit";
-import { click, fillIn, visit } from "@ember/test-helpers";
-import I18n from "I18n";
 import selectKit from "discourse/tests/helpers/select-kit-helper";
-import { clearPopupMenuOptionsCallback } from "discourse/controllers/composer";
+import I18n from "discourse-i18n";
 
 acceptance("Spoiler Button", function (needs) {
   needs.user();
   needs.settings({ spoiler_enabled: true });
-  needs.hooks.beforeEach(() => {
-    clearPopupMenuOptionsCallback();
-  });
 
   test("spoiler button", async (assert) => {
     const popUpMenu = selectKit(".toolbar-popup-menu-options");
@@ -28,7 +24,7 @@ acceptance("Spoiler Button", function (needs) {
     await categoryChooser.expand();
     await categoryChooser.selectRowByValue(2);
     await popUpMenu.expand();
-    await popUpMenu.selectRowByValue("insertSpoiler");
+    await popUpMenu.selectRowByName(I18n.t("spoiler.title"));
 
     assert.strictEqual(
       query(".d-editor-input").value,
@@ -54,7 +50,7 @@ acceptance("Spoiler Button", function (needs) {
     textarea.selectionEnd = textarea.value.length;
 
     await popUpMenu.expand();
-    await popUpMenu.selectRowByValue("insertSpoiler");
+    await popUpMenu.selectRowByName(I18n.t("spoiler.title"));
 
     assert.strictEqual(
       query(".d-editor-input").value,
@@ -79,7 +75,7 @@ acceptance("Spoiler Button", function (needs) {
     textarea.selectionEnd = 21;
 
     await popUpMenu.expand();
-    await popUpMenu.selectRowByValue("insertSpoiler");
+    await popUpMenu.selectRowByName(I18n.t("spoiler.title"));
 
     assert.strictEqual(
       query(".d-editor-input").value,
@@ -104,7 +100,7 @@ acceptance("Spoiler Button", function (needs) {
     textarea.selectionEnd = 21;
 
     await popUpMenu.expand();
-    await popUpMenu.selectRowByValue("insertSpoiler");
+    await popUpMenu.selectRowByName(I18n.t("spoiler.title"));
 
     assert.strictEqual(
       query(".d-editor-input").value,
@@ -130,7 +126,7 @@ acceptance("Spoiler Button", function (needs) {
     textarea.selectionEnd = 22;
 
     await popUpMenu.expand();
-    await popUpMenu.selectRowByValue("insertSpoiler");
+    await popUpMenu.selectRowByName(I18n.t("spoiler.title"));
 
     assert.strictEqual(
       query(".d-editor-input").value,