Replacing Details Toolbar Button?

Development

AI-generated summary

Kankuro is trying to replace the existing details toolbar button with a custom “Insert Spoiler” button. The desired functionality includes:

  • A modal with input fields for title and contents when the button is clicked
  • Using HTML to avoid issues with video embedding
  • Final output in the format <details><summary>title</summary>contents</details>

Kankuro has tried following a tutorial on the plugin API, but it didn’t work, and is seeking help to accomplish this customization.

1

Hello,

I’m trying to replace the existing details toolbar button with my own custom one, but I’m not having much success. I was following this tutorial about the plugin API along with my existing knowledge about JS but nothing seemed to be working.
I even copied the exact code from that example and pasted it in the theme editor under the </body> tab but even the heart icon didn’t appear. I’m not sure if an update made that tutorial inaccurate or what, but any help would be greatly appreciated.


What I’m trying to accomplish:

  • Replace the existing details with a new button that is titled “Insert Spoiler”
  • When clicked a modal will appear that has two input fields, one for the title and one for the contents.
  • Instead of using the markup, I want to use HTML to avoid issues with videos not embedding as mentioned here.

Final Output:

<details>
<summary>value_from_title_input</summary>
Value_From_Contents_Input
</details>

Note: If a modal would be a lot of work, I can settle with placeholder text being inserted instead such as “Spoiler Title” for the title and “Contents” for the contents.