Why is Redactor trying to order my plugins?

[lindseydiloreto]

For a few of the plugins being added automatically, they are telling Redactor to addButtonBefore or addButtonAfter another specific button...

• https://github.com/craftcms/redactor/blob/v2/lib/redactor-plugins/table/table.js#L105
• https://github.com/craftcms/redactor/blob/v2/lib/redactor-plugins/video/video.js#L70
• https://github.com/craftcms/redactor/blob/v2/lib/redactor-plugins/inlinestyle/inlinestyle.js#L56

It feels like the Craft plugin shouldn't be making decisions as to what order our Redactor plugins show up. Ideally, they would just appear in whatever order I have them listed in the JSON file.

  "buttons": [
    "bold",
    "italic",
    "underline",
    "link",
    "lists"
  ],
  "plugins": [
    "alignment",
    "table"   <--- Table is at the end
  ],

Because the Craft plugin is making these decisions, it's leading to strange behavior in my custom toolbar. When I add a plugin (for example table), it automatically places itself in the toolbar in a specific position. It's confusing because the plugin button ends up not where I placed it.

Can we please remove the preset order preferences? Or somehow make them overridable?

[andris-sevcenko]

Those are plugins provided by Redactor, so not sure how smart it would be to tamper with that code.

[lindseydiloreto]

Huh, I assumed that was just Craft's implementation of those libraries. It's odd that Redactor would be so strict about where those buttons will appear... isn't the entire point of Redactor its flexibility?

Is there any way to override that? I find it hard to believe that a Table button must go next to a Link button, no exceptions. 😕

[andris-sevcenko]

It's probably possible to override that with some JS code, but, if we're going to tamper with this, let's do it right.

If you wanted to insert the table button in the middle there - how would you expect to define this in the config?

[lindseydiloreto]

Hmm... that's a great question, because Redactor is already squirrely about how you arrange the buttons.

Ideally, we'd be able to use the before and after methods to place them anywhere we want...

https://imperavi.com/redactor/docs/settings/button/#s-buttonsaddafter

But worst case scenario, I'd just expect it to land exactly where I put it in the plugins array...

  "plugins": [
    "alignment",
    "fontcolor",
    "table",   <--- Table should be in the middle
    "fullscreen",
    "clips"
  ]

[andris-sevcenko]

@lindseydiloreto what I meant is how would you insert it between the bold and italic buttons, for example?

[lindseydiloreto]

Are you asking "how do I envision it working?" Maybe something like this...

  "buttonsAddAfter": {
    "after": "bold",
    "buttons": ["table"] // Places the plugin button
  },
  "plugins": [
    "table" // Loads the plugin
  ],

... or possibly like this...

  "pluginsAddAfter": {
    "after": "bold",
    "buttons": ["table"] // Loads & places the button
  },

I have no idea how easily that jives with what Redactor and/or the Craft plugin are already doing. Glancing at this commit, it seems that the Craft plugin occasionally needs to use brute force with Redactor anyway.

Let me know your thoughts, or if I completely misunderstood the question! 😄

[visuallization]

It is really weird that redactor isn't able to just order the buttons like they are defined in the array. It is the default behaviour I would expect when defining buttons. Considering that redactor is a paid tool I would wish for more flexibility and predictability.

[andris-sevcenko]

Took me a few months, but the solution is finally here in the form of a brand new enforceButtonOrder Redactor config option!

[andris-sevcenko]

(With the next release)

[lindseydiloreto]

Ahh, brilliant @andris-sevcenko! Thanks so much for nailing that down, my OCD will be much happier for it. 😄

Can't wait to take it for a spin! 🍺