From 2068823bc302b7be47bfdc6e977cbe65b92e2794 Mon Sep 17 00:00:00 2001
From: Jesse Rodriguez <54310591+1pone@users.noreply.github.com>
Date: Wed, 10 Jan 2024 18:50:38 +0800
Subject: [PATCH] feat: provide the current `selection` in
 `onRenderContextMenu` (#376)

---
 README.md                                      | 4 ++--
 package.json                                   | 1 +
 src/lib/components/modes/JSONEditorRoot.svelte | 2 +-
 src/lib/types.ts                               | 1 +
 src/routes/development/+page.svelte            | 6 ++++++
 5 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 3969f171..85c56129 100644
--- a/README.md
+++ b/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:
 
diff --git a/package.json b/package.json
index e2e1da83..f00da84f 100644
--- a/package.json
+++ b/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",
diff --git a/src/lib/components/modes/JSONEditorRoot.svelte b/src/lib/components/modes/JSONEditorRoot.svelte
index d62ce5ce..65f376d3 100644
--- a/src/lib/components/modes/JSONEditorRoot.svelte
+++ b/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 {
diff --git a/src/lib/types.ts b/src/lib/types.ts
index 7cd115e5..6bb94d72 100644
--- a/src/lib/types.ts
+++ b/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[]
diff --git a/src/routes/development/+page.svelte b/src/routes/development/+page.svelte
index 5347bc61..a5f1f624 100644
--- a/src/routes/development/+page.svelte
+++ b/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() })}