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
Adding a poll button to the bottom of the composer dev	9	1094	February 28, 2020
Show disabled delete button when category can't be deleted ux	10	2470	March 21, 2017
Markdown headings and the composer feature	6	1661	May 28, 2018
Hiding post buttons feature	2	1027	December 19, 2021
Can I disable the + Section button in the sidebar for non-admins? dev css , sidebar	5	330	November 19, 2023

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

Related Topics