How to delete the toolbar bottom but not by display none？

Development

AI-generated summary

FenLanPHE wants to delete the default buttons in the toolbar class without using display: none; and also make their custom “dice” button toggle the text it adds, similar to the bold button. hawm suggests using CSS to hide the toolbar button and applying the applySurround method for the toggle functionality.

FenLanPHE shares their custom button code and asks for help with the toggle functionality. hawm recommends using the opts argument to achieve this, providing an example from the discourse-spoiler-alert repository.

1

I have added some custom buttons as shown below, but I want to know how to delete the buttons already added in TOOLBAR CLASS? :thinking:
image
Also, my custom button function is a snippet of code for me to quickly add dice, I would like to know how to give this button the ability to make the text already added disappear when clicked again like the bold button?

image
image706×134 4.43 KB

I’ve searched up many topics but still can’t find a solution
Thanks for your reples!

2

Using CSS to hide the toolbar button may be enough.

https://github.com/discourse/discourse/commit/e303b4d1818422863ac8cc17b34dd65186f50989

And the bold function implemented by the applySurround method.

3

Thanks for your reply! But I noticed that when I click the BOLD button, the code ** appears and then disappears when I click it again. My custom button does not have the ability to disappear the code when clicked again.

Do you have any solution for this? The code for my custom button is as follows:

<script type="text/discourse-plugin" version="0.8">
  const currentLocale = I18n.currentLocale();
  if (!I18n.translations[currentLocale].js.composer) {
    I18n.translations[currentLocale].js.composer = {};
  }
  I18n.translations[currentLocale].js.composer.ttl_spoiler_text = "Insert hidden content";
  I18n.translations[currentLocale].js.ttl_dice_title = "ttl-spoiler";
  api.onToolbarCreate(function(toolbar) {
    toolbar.addButton({
      id: "ttl-spoiler",
      icon: "ttl-spoiler-icon",
      group: "extras",
      preventFocus: true,
      trimLeading: true,
      perform: (e) => e.applySurround("[spoiler]", "[/spoiler]", "ttl_spoiler_text")
    });
  });
</script>
4

Give a try the opts argument.