diff --git a/app/assets/javascripts/discourse/app/components/d-editor.hbs b/app/assets/javascripts/discourse/app/components/d-editor.hbs
index cc32e10af3c..085df8eb9d3 100644
--- a/app/assets/javascripts/discourse/app/components/d-editor.hbs
+++ b/app/assets/javascripts/discourse/app/components/d-editor.hbs
@@ -27,27 +27,29 @@
{{#each this.toolbar.groups as |group|}}
{{#each group.buttons as |b|}}
- {{#if b.popupMenu}}
-
- {{else}}
-
+ {{#if (b.condition this)}}
+ {{#if b.popupMenu}}
+
+ {{else}}
+
+ {{/if}}
{{/if}}
{{/each}}
{{/each}}
diff --git a/app/assets/javascripts/discourse/app/components/d-editor.js b/app/assets/javascripts/discourse/app/components/d-editor.js
index 0f0fc1bcbd3..ff57d3d7b5a 100644
--- a/app/assets/javascripts/discourse/app/components/d-editor.js
+++ b/app/assets/javascripts/discourse/app/components/d-editor.js
@@ -170,12 +170,13 @@ class Toolbar {
tabindex: button.tabindex || "-1",
className: button.className || button.id,
label: button.label,
- icon: button.label ? null : button.icon || button.id,
+ icon: button.icon || button.id,
action: button.action || ((a) => this.context.send("toolbarButton", a)),
perform: button.perform || function () {},
trimLeading: button.trimLeading,
popupMenu: button.popupMenu || false,
preventFocus: button.preventFocus || false,
+ condition: button.condition || (() => true),
};
if (button.sendAction) {
diff --git a/app/assets/javascripts/discourse/tests/integration/components/d-editor-test.js b/app/assets/javascripts/discourse/tests/integration/components/d-editor-test.js
index 41c18cf63d5..ba84af0a100 100644
--- a/app/assets/javascripts/discourse/tests/integration/components/d-editor-test.js
+++ b/app/assets/javascripts/discourse/tests/integration/components/d-editor-test.js
@@ -695,6 +695,33 @@ third line`
);
});
+ test("Toolbar buttons are only rendered when condition is met", async function (assert) {
+ withPluginApi("0.1", (api) => {
+ api.onToolbarCreate((toolbar) => {
+ toolbar.addButton({
+ id: "shown",
+ group: "extras",
+ icon: "far-smile",
+ action: () => {},
+ condition: () => true,
+ });
+
+ toolbar.addButton({
+ id: "not-shown",
+ group: "extras",
+ icon: "far-frown",
+ action: () => {},
+ condition: () => false,
+ });
+ });
+ });
+
+ await render(hbs``);
+
+ assert.ok(exists(".d-editor-button-bar button.shown"));
+ assert.notOk(exists(".d-editor-button-bar button.not-shown"));
+ });
+
test("toolbar buttons tabindex", async function (assert) {
await render(hbs``);
const buttons = queryAll(".d-editor-button-bar .btn");