feat: add more context information to onRenderMenu: mode and modal

BREAKING CHANGE:

Callback changed from `onRenderMenu(mode, items)` to `onRenderMenu(items, { mode, modal })`.

README.md

@@ -268,10 +268,10 @@ const editor = new JSONEditor({
   }
   ```
 
-- `onRenderMenu(mode: 'tree' | 'text' | 'table', items: MenuItem[]) : MenuItem[] | undefined`.
+- `onRenderMenu(items: MenuItem[], context: { mode: 'tree' | 'text' | 'table', modal: boolean }) : MenuItem[] | undefined`.
   Callback which can be used to make changes to the 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.
+  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.
 
   A menu item `MenuItem` can be one of the following types:
 

src/lib/components/JSONEditor.svelte

@@ -422,6 +422,7 @@
             {validator}
             {validationParser}
             {pathParser}
+            insideModal={false}
             {onError}
             onChange={handleChange}
             onChangeMode={toggleMode}

src/lib/components/modals/JSONEditorModal.svelte

@@ -215,6 +215,7 @@
         {validator}
         {validationParser}
         {pathParser}
+        insideModal={true}
         onError={handleError}
         onChange={handleChange}
         onChangeMode={handleChangeMode}

src/lib/components/modes/JSONEditorRoot.svelte

@@ -16,6 +16,7 @@
     OnFocus,
     OnJSONEditorModal,
     OnRenderMenu,
+    OnRenderMenuWithoutContext,
     OnRenderValue,
     OnSortModal,
     OnTransformModal,
@@ -46,6 +47,7 @@
   export let validator: Validator | null
   export let validationParser: JSONParser
   export let pathParser: JSONPathParser
+  export let insideModal: boolean
 
   export let onChange: OnChange
   export let onRenderValue: OnRenderValue
@@ -95,12 +97,13 @@
     separator: true
   }
 
-  $: handleRenderMenu = (mode: 'tree' | 'text' | 'table', items: MenuItem[]) => {
+  let handleRenderMenu: OnRenderMenuWithoutContext
+  $: handleRenderMenu = (items: MenuItem[]) => {
     const updatedItems = isMenuSpaceItem(items[0])
       ? modeMenuItems.concat(items) // menu is empty, readOnly mode
       : modeMenuItems.concat(separatorMenuItem, items)
 
-    return onRenderMenu(mode, updatedItems) || updatedItems
+    return onRenderMenu(updatedItems, { mode, modal: insideModal }) || updatedItems
   }
 
   export function patch(operations: JSONPatchDocument): JSONPatchResult {

src/lib/components/modes/tablemode/TableMode.svelte

@@ -18,7 +18,7 @@
     OnChangeMode,
     OnFocus,
     OnJSONEditorModal,
-    OnRenderMenu,
+    OnRenderMenuWithoutContext,
     OnRenderValue,
     OnSortModal,
     OnTransformModal,
@@ -144,7 +144,7 @@
   export let onChange: OnChange
   export let onChangeMode: OnChangeMode
   export let onRenderValue: OnRenderValue
-  export let onRenderMenu: OnRenderMenu
+  export let onRenderMenu: OnRenderMenuWithoutContext
   export let onFocus: OnFocus
   export let onBlur: OnBlur
   export let onSortModal: OnSortModal

src/lib/components/modes/tablemode/menu/TableMenu.svelte

@@ -1,7 +1,7 @@
 <svelte:options immutable={true} />
 
 <script lang="ts">
-  import type { MenuItem, OnRenderMenu } from '../../../../types'
+  import type { MenuItem, OnRenderMenuWithoutContext } from '$lib/types'
   import Menu from '../../../controls/Menu.svelte'
   import {
     faEllipsisV,
@@ -22,7 +22,7 @@
   export let onContextMenu: () => void
   export let onUndo: () => void
   export let onRedo: () => void
-  export let onRenderMenu: OnRenderMenu
+  export let onRenderMenu: OnRenderMenuWithoutContext
 
   let defaultItems: MenuItem[]
   $: defaultItems = !readOnly
@@ -80,7 +80,7 @@
       ]
 
   let items: MenuItem[]
-  $: items = onRenderMenu('table', defaultItems) || defaultItems
+  $: items = onRenderMenu(defaultItems) || defaultItems
 </script>
 
 <Menu {items} />

src/lib/components/modes/textmode/TextMode.svelte

@@ -48,7 +48,7 @@
     OnChangeMode,
     OnError,
     OnFocus,
-    OnRenderMenu,
+    OnRenderMenuWithoutContext,
     OnSortModal,
     OnTransformModal,
     ParseError,
@@ -79,7 +79,7 @@
   export let onError: OnError
   export let onFocus: OnFocus
   export let onBlur: OnBlur
-  export let onRenderMenu: OnRenderMenu
+  export let onRenderMenu: OnRenderMenuWithoutContext
   export let onSortModal: OnSortModal
   export let onTransformModal: OnTransformModal
 

src/lib/components/modes/textmode/menu/TextMenu.svelte

@@ -10,8 +10,7 @@
   } from '@fortawesome/free-solid-svg-icons'
   import { faJSONEditorCompact, faJSONEditorFormat } from '$lib/img/customFontawesomeIcons'
   import Menu from '../../../controls/Menu.svelte'
-  import { noop } from 'lodash-es'
-  import type { MenuItem } from '$lib'
+  import type { MenuItem, OnRenderMenuWithoutContext } from '$lib/types'
 
   export let readOnly = false
   export let onFormat
@@ -27,7 +26,7 @@
   export let canCompact
   export let canSort
   export let canTransform
-  export let onRenderMenu = noop
+  export let onRenderMenu: OnRenderMenuWithoutContext
 
   let defaultItems: MenuItem[]
   $: defaultItems = !readOnly
@@ -103,7 +102,7 @@
         }
       ]
 
-  $: items = onRenderMenu('text', defaultItems) || defaultItems
+  $: items = onRenderMenu(defaultItems) || defaultItems
 </script>
 
 <Menu {items} />

src/lib/components/modes/treemode/TreeMode.svelte

@@ -119,7 +119,7 @@
     OnExpand,
     OnFocus,
     OnJSONEditorModal,
-    OnRenderMenu,
+    OnRenderMenuWithoutContext,
     OnRenderValue,
     OnSortModal,
     OnTransformModal,
@@ -173,7 +173,7 @@
   export let onChange: OnChange
   export let onChangeMode: OnChangeMode
   export let onRenderValue: OnRenderValue
-  export let onRenderMenu: OnRenderMenu
+  export let onRenderMenu: OnRenderMenuWithoutContext
   export let onClassName: OnClassName | undefined
   export let onFocus: OnFocus
   export let onBlur: OnBlur

src/lib/components/modes/treemode/menu/TreeMenu.svelte

@@ -14,7 +14,7 @@
   import { faJSONEditorCollapse, faJSONEditorExpand } from '$lib/img/customFontawesomeIcons'
   import { isObjectOrArray } from '$lib/utils/typeUtils'
   import Menu from '../../../controls/Menu.svelte'
-  import type { JSONSelection, MenuItem, OnRenderMenu } from '$lib/types'
+  import type { JSONSelection, MenuItem, OnRenderMenuWithoutContext } from '$lib/types'
   import type { JSONValue } from 'immutable-json-patch'
   import { isKeySelection, isMultiSelection, isValueSelection } from '../../../../logic/selection'
   import type { HistoryState } from '../../../../logic/history'
@@ -34,7 +34,7 @@
   export let onTransform: () => void
   export let onContextMenu: () => void
   export let onCopy: () => void
-  export let onRenderMenu: OnRenderMenu
+  export let onRenderMenu: OnRenderMenuWithoutContext
 
   function handleToggleSearch() {
     showSearch = !showSearch
@@ -154,7 +154,7 @@
         }
       ]
 
-  $: items = onRenderMenu('tree', defaultItems) || defaultItems
+  $: items = onRenderMenu(defaultItems) || defaultItems
 </script>
 
 <Menu {items} />

src/lib/plugins/value/components/EnumValue.svelte

@@ -5,6 +5,7 @@
   import { compileJSONPointer } from 'immutable-json-patch'
   import { getValueClass } from '$lib/plugins/value/components/utils/getValueClass'
   import type { JSONParser, JSONSelection, OnPatch } from '../../../types'
+  import { isValueSelection } from '$lib/logic/selection'
 
   export let path: JSONPath
   export let value: JSONValue
@@ -54,7 +55,7 @@
 
 <select
   class={`jse-enum-value ${getValueClass(bindValue, parser)}`}
-  class:jse-selected={selection !== undefined}
+  class:jse-selected={isValueSelection(selection)}
   bind:value={bindValue}
   bind:this={refSelect}
   on:change={handleSelect}

src/lib/types.ts

@@ -308,10 +308,12 @@ export type OnRenderValue = (props: RenderValueProps) => RenderValueComponentDes
 export type OnClassName = (path: JSONPath, value: JSONValue) => string | undefined
 export type OnChangeMode = (mode: Mode) => void
 export type OnContextMenu = (contextMenuProps: AbsolutePopupOptions) => void
-export type OnRenderMenu = (
-  mode: 'tree' | 'text' | 'table',
-  items: MenuItem[]
-) => MenuItem[] | undefined
+export type RenderMenuContext = {
+  mode: 'tree' | 'text' | 'table'
+  modal: boolean
+}
+export type OnRenderMenu = (items: MenuItem[], context: RenderMenuContext) => MenuItem[] | undefined
+export type OnRenderMenuWithoutContext = (items: MenuItem[]) => MenuItem[] | undefined
 export type OnError = (error: Error) => void
 export type OnFocus = () => void
 export type OnBlur = () => void

src/routes/components/ReadonlyPassword.svelte

@@ -8,7 +8,6 @@
   export let value
   export let path
   export let readOnly
-  export let isSelected
   export let onSelect
 
   $: hiddenValue = '*'.repeat(String(value).length)
@@ -25,9 +24,8 @@
 </script>
 
 <div
-  class="jse-readonly-password"
+  class="jse-value jse-readonly-password"
   data-type="selectable-value"
-  class:selected={isSelected}
   on:dblclick={handleValueDoubleClick}
 >
   <Icon data={faLock} />
@@ -42,8 +40,4 @@
   .jse-readonly-password:hover {
     background: #ededed;
   }
-
-  .jse-readonly-password.selected {
-    background: #d3d3d3;
-  }
 </style>

src/routes/development/+page.svelte

@@ -6,6 +6,7 @@
     jmespathQueryLanguage,
     JSONEditor,
     lodashQueryLanguage,
+    type MenuItem,
     ReadonlyValue,
     renderValue
   } from 'svelte-jsoneditor'
@@ -253,6 +254,7 @@
     enforceString,
     searchResultItems,
     isEditing,
+    parser,
     normalization,
     onPatch,
     onPasteJson,
@@ -269,6 +271,7 @@
           path,
           value,
           enforceString,
+          parser,
           normalization,
           onPatch,
           onPasteJson,
@@ -282,14 +285,14 @@
     if (!isEditing) {
       renderers.push({
         component: ReadonlyValue,
-        props: { path, value, readOnly, normalization, searchResultItems, onSelect }
+        props: { path, value, readOnly, parser, normalization, searchResultItems, onSelect }
       })
     }
 
     return renderers
   }
 
-  function onRenderMenu(mode, items) {
+  function onRenderMenu(items: MenuItem[], { mode }) {
     if (!import.meta.env.SSR) {
       console.log('onRenderMenu', mode, items)
     }

src/routes/examples/custom_menu_buttons/+page.svelte

@@ -25,7 +25,9 @@
     await copyToClipboard(contents)
   }
 
-  function handleRenderMenu(mode, items) {
+  function handleRenderMenu(items, context) {
+    console.log('handleRenderMenu', { items, context })
+
     const separator = {
       separator: true
     }

src/routes/examples/custom_value_renderer/+page.svelte

@@ -19,7 +19,7 @@
   ]
 
   function onRenderValue(props) {
-    const { path, value, readOnly, parser, isEditing, isSelected, onSelect, onPatch } = props
+    const { path, value, readOnly, parser, isEditing, selection, onSelect, onPatch } = props
 
     const key = props.path[props.path.length - 1]
     if (key === 'password' && !isEditing) {
@@ -30,7 +30,6 @@
             value,
             path,
             readOnly,
-            isSelected,
             onSelect
           }
         }
@@ -47,7 +46,7 @@
             readOnly,
             parser,
             onPatch,
-            isSelected,
+            selection,
             options: genderOptions
           }
         }