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

FenLanPHE · July 23, 2022, 6:46am

I have added some custom buttons as shown below, but I want to know how to delete the buttons already added in TOOLBAR CLASS?

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?

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

hawm · July 23, 2022, 9:04am

Using CSS to hide the toolbar button may be enough.

And the bold function implemented by the applySurround method.

github.com

discourse/discourse/blob/c94a011d9fe334f82e41900b871ca13dff38897d/app/assets/javascripts/discourse/app/mixins/textarea-text-manipulation.js#L209


      
            }
          } else {
            const lines = sel.value.split("\n");
          
          
  let [hval, hlen] = getHead(head);
            if (
              lines.length === 1 &&
              pre.slice(-tlen) === tail &&
              post.slice(0, hlen) === hval
            ) {
              // Already wrapped in the surround. Remove it.
              this._insertAt(sel.start - hlen, sel.end + tlen, sel.value);
              this.selectText(sel.start - hlen, sel.value.length);
            } else {
              const contents = this._getMultilineContents(
                lines,
                head,
                hval,
                hlen,
                tail,
                tlen,

FenLanPHE · July 23, 2022, 6:04pm

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>

hawm · July 24, 2022, 6:30am

Give a try the opts argument.

github.com

discourse/discourse-spoiler-alert/blob/a1e4d543e1bafeb11cbb9d09a887ce210b7eecb8/assets/javascripts/initializers/spoiler-alert.js#L35


      
            };
          });
          
          
ComposerController.reopen({
            actions: {
              insertSpoiler() {
                this.get("toolbarEvent").applySurround(
                  "[spoiler]",
                  "[/spoiler]",
                  "spoiler_text",
                  { multiline: false, useBlockMode: true }
                );
              },
            },
          });
          
          
addTagDecorateCallback(function () {
            if (this.element.attributes.class === "spoiled") {
              this.prefix = "[spoiler]";
              this.suffix = "[/spoiler]";
            }

Topic		Replies	Views
How to customize the composer toolbar? Feature	2	63	August 27, 2024
How to customize editor button? (remove couple option) Dev	5	883	September 22, 2024
Adding a poll button to the bottom of the composer Dev	9	1176	February 28, 2020
Markdown headings and the composer Feature	6	1788	May 28, 2018
Hiding post buttons Feature	2	1077	December 19, 2021

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

Related topics