Add extensible customer buttons

[danielpine]

Added the ability to add customer buttons to the menu bar and the examples\25_custom_buttons.html

1.add a new option ( buttons ) which contains the configuration of a custom buttons array,
the button config fileds are [
title(description of this button's function),
className(define the custom button icon),
target(function to call onclick) ];

2.Render the buttons after create-mode-box step in text mode.

[josdejong]

Thanks Daniel, I think your PR will address #831, right?

I think we have to think a couple of things through:

1. I think this should work for other modes too, not just text
2. Probably, not all buttons are relevant for every mode, so the user may want to pass different custom buttons for different modes. Any idea how we could address that?
3. I can imagine the user would like to have control over the order of the buttons: left or right from the built-in buttons? Or even in the middle? Or remove/replace some of the built-in buttons? We could also see that as a second step and start simple, but at least it would be good to have a clear idea on where we want to go.

[danielpine]

@josdejong

Yes, the idea is consistent with address #831 although I've never seen it, but it addressed by chance. The three points you mentioned came into my mind as soon as I submitted the PR today , haha.

1|2. Because I wanted to send JSON directly to my server in my application, I found a extra button in my page looks a little ugly or disharmony, so I first extended this feature and found it to be very useful, We can simply add a mode option to determine which mode the button is applied in;

3.We can add a option [index] and then we can add an array [hidden] to decide which buttons not to display whether it's built in or the custom, We can even manage the built-in buttons in such a data format in one place, and unify their behavior and use the same rendering method in different modes.

So finally the option buttons like this:

buttons:{
  "hidden": [
    "sort"
  ],
  "ext": [
    {
      "title": "Custom button 1",
      "id":"cb1",
      "name":"cb1",
      "className": "jsoneditor-custom-1",
      "target": "[function]",
      "mode": "[code,text,...]",
      "index": 1,
      "align": [
        "left(Render in sequence with the built-in buttons to display)",
        "right(backwards the index)"
      ]
    }
  ]
}

That's all I can think of for now, and then I'll implement it in my branch and show you, and I think we can make it better

[danielpine]

@josdejong

Hi,
I just submited some commits about changing the button creating method in textmode and treemode:

1.Move regular buttons configuration into component defaultOptions.js
2.Use editor._createButtons() to render the specified button for their mode
3.Add option disableButtons to disable buttons by the name of their configuration
4.User can manage the customer button order by the index configuration of button

It doesn't look perfect, let's optimize it next step.

[josdejong]

Thanks for the updates Daniel, and sorry for my late reply, I have sometimes trouble keeping up with all open issues and PR's.

Very neat that you extracted the default buttons into defaultOptions already 👍.

I like your API proposal where you can pass an array to mode. The properties name, title, className, also make sense. Maybe we can rename target to onClick? That sounds more intuitive to me.

I'm still a bit in doubt about the index. It can get tricky when in the future a new built-in button will be added, and (though not a show stopper), you can't create one button for multiple modes when they need a different index.

I have another idea: we can do exactly the same as for the context menu, which has a onCreateMenu callback (see docs). So, instead of specifying an array buttons, specify a callback function:

const options = {
  onCreateMainMenu: function (items, mode, editor) {
    // add buttons at the position you want (beginning, end, or somewhere in the middle)
    // remove buttons you do not want
    // determine whether or not to add/remove buttons depending on the current mode
    const extendedItems = items.concat([myNewButton1, myNewButton2])
  
    return extendedItems
  }
}

What do you think?

[vlador4ik]

@josdejong
Hi! I want realize copy and paste buttons and find this conversation. Will you plan implement this feature with buttons?

[josdejong]

@vlador4ik it is on the wishlist yes.

On a side note: the successor of jsoneditor, svelte-jsoneditor, is fully built around supporting copying/pasting data. You can give it a try at https://jsoneditoronline.org/beta/. Just select something in the editor and use cut/copy/paste.