diff --git a/README.md b/README.md index fa67138c..d1673849 100644 --- a/README.md +++ b/README.md @@ -333,10 +333,11 @@ const editor = new JSONEditor({ } ``` - - `onRenderContextMenu(items: ContextMenuItem[], context: { mode: 'tree' | 'text' | 'table', modal: boolean, selection: JSONEditorSelection | null }) : ContextMenuItem[] | undefined`. + - `onRenderContextMenu(items: ContextMenuItem[], context: { mode: 'tree' | 'text' | 'table', modal: boolean, selection: JSONEditorSelection | null }) : ContextMenuItem[] | false | undefined`. Callback which can be used to make changes to the context menu items. New items can be added, or existing items can be removed or reorganized. When the function - returns `undefined`, the original `items` will be applied. Using the context values `mode`, `modal` and `selection`, different actions can be taken depending on the mode of the editor, whether the editor is rendered inside a modal or not and the path of selection. + returns `undefined`, the original `items` will be applied and the context menu will be displayed when `readOnly` is `false`. When the function + returns `false`, the context menu will never be displayed. Using the context values `mode`, `modal` and `selection`, different actions can be taken depending on the mode of the editor, whether the editor is rendered inside a modal or not and the path of selection. A menu item `ContextMenuItem` can be one of the following types: diff --git a/src/lib/components/modes/JSONEditorRoot.svelte b/src/lib/components/modes/JSONEditorRoot.svelte index 65f376d3..0029fcf6 100644 --- a/src/lib/components/modes/JSONEditorRoot.svelte +++ b/src/lib/components/modes/JSONEditorRoot.svelte @@ -117,7 +117,10 @@ let handleRenderContextMenu: OnRenderContextMenuInternal $: handleRenderContextMenu = (items: ContextMenuItem[]) => { - return onRenderContextMenu(items, { mode, modal: insideModal, selection }) || items + return ( + onRenderContextMenu(items, { mode, modal: insideModal, selection }) ?? + (readOnly ? false : items) + ) } export function patch(operations: JSONPatchDocument): JSONPatchResult { diff --git a/src/lib/components/modes/tablemode/TableMode.svelte b/src/lib/components/modes/tablemode/TableMode.svelte index 1ee192a6..ce56f0a4 100644 --- a/src/lib/components/modes/tablemode/TableMode.svelte +++ b/src/lib/components/modes/tablemode/TableMode.svelte @@ -979,7 +979,7 @@ } function handleContextMenu(event: Event) { - if (readOnly || isEditingSelection(documentState.selection)) { + if (!onRenderContextMenu([]) || isEditingSelection(documentState.selection)) { return } @@ -1028,7 +1028,7 @@ } function handleContextMenuFromTableMenu(event: MouseEvent) { - if (readOnly) { + if (!onRenderContextMenu([])) { return } diff --git a/src/lib/components/modes/treemode/TreeMode.svelte b/src/lib/components/modes/treemode/TreeMode.svelte index ab42838d..2bd14577 100644 --- a/src/lib/components/modes/treemode/TreeMode.svelte +++ b/src/lib/components/modes/treemode/TreeMode.svelte @@ -1879,7 +1879,7 @@ } function handleContextMenu(event?: Event) { - if (readOnly || isEditingSelection(documentState.selection)) { + if (!onRenderContextMenu([]) || isEditingSelection(documentState.selection)) { return } @@ -1928,7 +1928,7 @@ } function handleContextMenuFromTreeMenu(event: MouseEvent) { - if (readOnly) { + if (!onRenderContextMenu([])) { return } diff --git a/src/lib/types.ts b/src/lib/types.ts index 40b9c6a1..00ed89d9 100644 --- a/src/lib/types.ts +++ b/src/lib/types.ts @@ -313,8 +313,8 @@ export type RenderContextMenuContext = RenderMenuContext & { selection: JSONEdit export type OnRenderContextMenu = ( items: ContextMenuItem[], context: RenderContextMenuContext -) => ContextMenuItem[] | undefined -export type OnRenderContextMenuInternal = (items: ContextMenuItem[]) => ContextMenuItem[] +) => ContextMenuItem[] | false | undefined +export type OnRenderContextMenuInternal = (items: ContextMenuItem[]) => ContextMenuItem[] | false export type OnError = (error: Error) => void export type OnFocus = () => void export type OnBlur = () => void