Custom menu item does not redraw when disabled state changes

[semicolin]

I'm using vanilla-jsoneditor in an Angular application. I added a custom "save" button on the menu. The menu does not redraw when disabled state changes (unless the state of built-in buttons also changes coincidentally). I need a way to trigger refresh of the menu from onChange function.

    this.editor = new JSONEditor({
      target,
      props: {
        content: { json: this.json },
        mode: Mode.text,
        onChange: (content: Content, previousContent: Content, changeStatus: OnChangeStatus) => {
          this.canSave = !changeStatus.contentErrors;
        },
        onRenderMenu: (items: MenuItem[]) => {
          return [
            ...items,
            {
              type: 'button',
              icon: faSave as any,
              title: 'Save Changes',
              disabled: !this.canSave,
              onClick: () => console.log('click'),
            },
          ];
        },
      },
    });

[josdejong]

That is indeed a good question, outside of the Svelte lifecycle this doesn't happen magically.

What you can do is create a createOnRenderMenu function which creates the onRenderMenu based on the canSave state:

function createOnRenderMenu(canSave) {
  return function onRenderMenu (items: MenuItem[]) {
    return [
      ...items,
      {
        type: 'button',
        icon: faSave as any,
        title: 'Save Changes',
        disabled: !canSave,
        onClick: () => console.log('click'),
      },
    ];
  }
}

Then, create the menu on creation of the editor, and re-create it whenever the state of the menu (canSave) changes:

this.editor = new JSONEditor({
  target,
  props: {
    content: { json: this.json },
    mode: Mode.text,
    onChange: (content: Content, previousContent: Content, changeStatus: OnChangeStatus) => {
      this.canSave = !changeStatus.contentErrors;
      this.editor.updateProps({
        onRenderMenu: createOnRenderMenu(this.canSave)
      })
    },
    onRenderMenu: createOnRenderMenu(this.canSave),
  },
});

[semicolin]

Good solution. Thank you!

[josdejong]

👍