feat: provide the current selection in onRenderContextMenu (#376)

README.md

@@ -333,10 +333,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.23.0",
  "@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() })}