Easy way to redefine an action?

[roipoussiere]

I'm submitting a...

• [ ] Bug report
• [x] Feature request

I would like to redefine some actions. The only way I found to do this is to use the toolbar option, but this one overwrite all default items, so I need to set all default icons and create a new icon with the same values instead the custom action, like this:

toolbar: [
    'bold', 'italic', 'heading', '|', 'quote', 'unordered-list', 'ordered-list', '|', 'link',
    {
        name: 'image',
        action: function customFunction(editor){
            alert('Hey!')
        },
        className: 'fa fa-image',
        title: 'Insert image'
    },
    '|', 'preview', 'side-by-side', 'fullscreen', 'guide'
]

Is there an easier way to do this?

If not, I would suggest a toolbarAction option, which could work like this:

new EasyMDE({
    toolbarAction: {
        image: function customFunction(editor){
            alert('Hey!')
        },
    }
});

[Ionaru]

The first section is currently the easiest way to redefine an action.

[roipoussiere]

Okay.

So what do you think about the suggested toolbarAction? I can send a PR for this.

[sn3p]

You could override toolbar actions like this:

const editor = new EasyMDE(options);

// Override toolbar image action
editor.toolbar.find(a => a.name === "image").action = () => {
  // do stuff
};

[sn3p]

In addition to my previous comment, maybe exposing (default) actions for overriding would be useful. For example take drawImage, which is exposed as a static and instance method. But overriding either of them doesn't work:

https://codepen.io/snap/pen/KjbVpz?editors=1010

It would be nice to be able to overwrite these methods (per instance and globally), so they work with the toolbar actions and keyboard shortcuts like Cmd-Alt-I.

Maybe using options, similar to what @roipoussiere suggested:

new EasyMDE({
  actions: {
    drawImage: () => alert("overridden method")
  }
});

And by overriding them directly:

// Override static method (globally)
EasyMDE.drawImage = (editor) => alert("overridden static method");
const editor = new EasyMDE();

// Override instance method
const editor = new EasyMDE();
editor.drawImage = () => alert("overridden instance method");

I would expect the static override above would work already but it doesn't. It works when you assign the action manually:

EasyMDE.drawImage = (editor) => alert("overridden static method");

const editor = new EasyMDE({
  shortcuts: {
    image: "Cmd-Alt-I"
  },
  toolbar: [
    {
      name: "image",
      action: EasyMDE.drawImage,
      className: "fa fa-image",
    }
  ]
});

This feels a bit cumbersome, and you don't have the advantage of easily overriding actions without having to rebuild the whole toolbar.

Hope this makes sense. What do you think?