feat: onRenderContextMenu context selection

README.md

@@ -331,10 +331,10 @@ const editor = new JSONEditor({
       }
       ```
 
-  - `onRenderContextMenu(items: ContextMenuItem[], context: { mode: 'tree' | 'text' | 'table', modal: boolean }) : ContextMenuItem[] | undefined`.
+  - `onRenderContextMenu(items: ContextMenuItem[], context: { mode: 'tree' | 'text' | 'table', modal: boolean, selection: JSONEditorSelection | null }) : ContextMenuItem[] | 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` and `modal`, different actions can be taken depending on the mode of the editor and whether the editor is rendered inside a modal or not.
+    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.
 
     A menu item `ContextMenuItem` can be one of the following types:
 

package.json

@@ -85,6 +85,7 @@
     "@codemirror/view": "^6.22.1",
     "@fortawesome/free-regular-svg-icons": "^6.5.1",
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
+    "@lezer/highlight": "^1.2.0",
     "@replit/codemirror-indentation-markers": "^6.5.0",
     "ajv": "^8.12.0",
     "codemirror-wrapped-line-indent": "^1.0.0",

src/lib/components/modes/JSONEditorRoot.svelte

@@ -117,7 +117,7 @@
 
   let handleRenderContextMenu: OnRenderContextMenuInternal
   $: handleRenderContextMenu = (items: ContextMenuItem[]) => {
-    return onRenderContextMenu(items, { mode, modal: insideModal }) || items
+    return onRenderContextMenu(items, { mode, modal: insideModal, selection }) || items
   }
 
   export function patch(operations: JSONPatchDocument): JSONPatchResult {

src/lib/types.ts

@@ -306,6 +306,7 @@ export type OnContextMenu = (contextMenuProps: AbsolutePopupOptions) => void
 export type RenderMenuContext = {
   mode: 'tree' | 'text' | 'table'
   modal: boolean
+  selection: JSONEditorSelection | null
 }
 export type OnRenderMenu = (items: MenuItem[], context: RenderMenuContext) => MenuItem[] | undefined
 export type OnRenderMenuInternal = (items: MenuItem[]) => MenuItem[]

src/routes/development/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import {
     type Content,
+    type ContextMenuItem,
     createAjvValidator,
     createValueSelection,
     EditableValue,
@@ -377,6 +378,10 @@
     console.log('onChangeQueryLanguage', newQueryLanguageId)
     queryLanguageId = newQueryLanguageId
   }
+  function onRenderContextMenu(item: ContextMenuItem[], content: RenderMenuContext) {
+    console.log('onRenderContextMenu', item, content)
+    return item
+  }
 
   function openInWindow() {
     const popupWindow = window.open(
@@ -773,6 +778,7 @@
             onChange={onChangeTree}
             onSelect={onSelectTree}
             onRenderValue={$useCustomValueRenderer ? customRenderValue : renderValue}
+            {onRenderContextMenu}
             {onChangeMode}
             onFocus={() => console.log('onFocus tree')}
             onBlur={() => console.log('onBlur tree', { content: refTreeEditor?.get() })}