How to add a class to an image figure in redactor?

Question

Using Redactor Custom Styles plugin we're adding a button with options to toggle classes on figures. It mostly works except for images. Here's an entry in our redactor config.

"customStyles": {
  "figureStyles": {
      "icon": "<span class='fas fa-images'></span>",
      "dropdown": {
        "Center Max 70%": {
          "api": "module.block.format",
          "args": {
            "tag": "figure",
            "class": "image-center-max-70",
            "type": "toggle"
          }
        }

Answer 1

I've never had a lot of luck using the custom styles drop down to do things like this, so I created a Redactor plugin that inserts a class name drop down directly to the image edit modal.

Full code and documentation is here:

https://github.com/simplicate-web/redactor-image-class

When I saw your question I realized I could whip this up pretty quickly by basing it off of another plugin I wrote for managing class names on links.

So if you notice any bugs, shoot me a message and I'll try to get them cleared up for you.