onRenderContextMenu prop is missing

[rafaelsilva81]

Hello, i'm currently trying to use the vanilla-jsoneditor package on a react typescript project and faced this small problem.

I've used the base react example as shown on the README of this repo to start trying some stuff in the library, I added all corresponding types and this is my end result

import { useEffect, useRef } from 'react';

import {
  JSONEditor as Editor,
  JSONEditorPropsOptional,
} from 'vanilla-jsoneditor';

export default function JSONEditor(props: JSONEditorPropsOptional) {
  const refContainer = useRef<Element | Document | ShadowRoot>();
  const refEditor = useRef<Editor | null>();

  useEffect(() => {
    // create editor
    console.log('create editor', refContainer.current);
    refEditor.current = new Editor({
      target: refContainer.current!,
      props: {}
    });

    return () => {
      // destroy editor
      if (refEditor.current) {
        console.log('destroy editor');
        refEditor.current.destroy();
        refEditor.current = null;
      }
    };
  }, []);

  // update props
  useEffect(() => {
    if (refEditor.current) {
      console.log('update props', props);
      refEditor.current.updateProps(props);
    }
  }, [props]);

  return (
    <div
      className="vanilla-jsoneditor-react"
      ref={refContainer as React.RefObject<HTMLDivElement>}
    ></div>
  );
}

however, whenever I try to use this editor on another component, the property onRenderContextMenu seems to be missing on the type definitions:

for now, if anyone is having this same issue, this is how I managed to fix it:

import {
  ContextMenuItem, // add this import
  JSONEditor as Editor,
  JSONEditorPropsOptional,
  RenderContextMenuContext // add this import
} from 'vanilla-jsoneditor';

type OnRenderContextMenu = (
  items: ContextMenuItem[],
  context: RenderContextMenuContext
) => ContextMenuItem[] | undefined;

type JSONEditorProps = JSONEditorPropsOptional & {
  onRenderContextMenu?: OnRenderContextMenu | undefined;
};

and then use JSONEditorProps as the type for the properties in your component.

[josdejong]

Thanks for reporting, you're right, this property was simply missing in JSONEditorPropsOptional .

[josdejong]

A fix has been published now in v0.21.5