feat: force context menu

src/lib/components/JSONEditor.svelte

@@ -75,6 +75,7 @@
   export let askToFormat = true
   export let escapeControlCharacters = false
   export let escapeUnicodeCharacters = false
+  export let forceContextMenu = false
   export let flattenColumns = true
   export let parser: JSONParser = JSON
   export let validator: Validator | null = null
@@ -393,6 +394,7 @@
         onPatch,
 
         readOnly,
+        forceContextMenu,
         indentation,
         tabSize,
         mainMenuBar,
@@ -462,6 +464,7 @@
             {navigationBar}
             {escapeControlCharacters}
             {escapeUnicodeCharacters}
+            {forceContextMenu}
             {flattenColumns}
             {parser}
             {parseMemoizeOne}

src/lib/components/modals/JSONEditorModal.svelte

@@ -41,6 +41,7 @@
   export let onPatch: OnPatch
 
   export let readOnly: boolean
+  export let forceContextMenu: boolean
   export let indentation: number | string
   export let tabSize: number
   export let mainMenuBar: boolean
@@ -244,6 +245,7 @@
         {askToFormat}
         {mainMenuBar}
         {navigationBar}
+        {forceContextMenu}
         {escapeControlCharacters}
         {escapeUnicodeCharacters}
         {flattenColumns}

src/lib/components/modals/TransformModal.svelte

@@ -41,6 +41,7 @@
   export let indentation: number | string
   export let escapeControlCharacters: boolean
   export let escapeUnicodeCharacters: boolean
+  export let forceContextMenu: boolean
   export let parser: JSONParser
   export let parseMemoizeOne: JSONParser['parse']
   export let validationParser: JSONParser
@@ -279,6 +280,7 @@
                 {indentation}
                 {escapeControlCharacters}
                 {escapeUnicodeCharacters}
+                {forceContextMenu}
                 {parser}
                 {parseMemoizeOne}
                 {onRenderValue}

src/lib/components/modes/JSONEditorRoot.svelte

@@ -49,6 +49,7 @@
   export let escapeControlCharacters: boolean
   export let escapeUnicodeCharacters: boolean
   export let flattenColumns: boolean
+  export let forceContextMenu: boolean
   export let parser: JSONParser
   export let parseMemoizeOne: JSONParser['parse']
   export let validator: Validator | null
@@ -271,6 +272,7 @@
     externalSelection={selection}
     {readOnly}
     {mainMenuBar}
+    {forceContextMenu}
     {escapeControlCharacters}
     {escapeUnicodeCharacters}
     {flattenColumns}
@@ -301,6 +303,7 @@
     {indentation}
     {mainMenuBar}
     {navigationBar}
+    {forceContextMenu}
     {escapeControlCharacters}
     {escapeUnicodeCharacters}
     {parser}

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

@@ -155,6 +155,8 @@
   debug('isSSR:', isSSR)
 
   export let readOnly: boolean
+  export let forceContextMenu: boolean
+
   export let externalContent: Content
   export let externalSelection: JSONEditorSelection | null
   export let mainMenuBar: boolean
@@ -979,7 +981,7 @@
   }
 
   function handleContextMenu(event: Event) {
-    if (readOnly || isEditingSelection(documentState.selection)) {
+    if ((readOnly && !forceContextMenu) || isEditingSelection(documentState.selection)) {
       return
     }
 
@@ -1028,7 +1030,7 @@
   }
 
   function handleContextMenuFromTableMenu(event: MouseEvent) {
-    if (readOnly) {
+    if (readOnly && !forceContextMenu) {
       return
     }
 

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

@@ -181,6 +181,7 @@
   const jump = createJump()
 
   export let readOnly: boolean
+  export let forceContextMenu: boolean
   export let externalContent: Content
   export let externalSelection: JSONEditorSelection | null
   export let mainMenuBar: boolean
@@ -1879,7 +1880,7 @@
   }
 
   function handleContextMenu(event?: Event) {
-    if (readOnly || isEditingSelection(documentState.selection)) {
+    if ((readOnly && !forceContextMenu) || isEditingSelection(documentState.selection)) {
       return
     }
 
@@ -1928,7 +1929,7 @@
   }
 
   function handleContextMenuFromTreeMenu(event: MouseEvent) {
-    if (readOnly) {
+    if (readOnly && !forceContextMenu) {
       return
     }
 

src/lib/types.ts

@@ -436,6 +436,7 @@ export interface JSONEditorPropsOptional {
   escapeControlCharacters?: boolean
   escapeUnicodeCharacters?: boolean
   flattenColumns?: true
+  forceContextMenu?: boolean
   parser?: JSONParser
   validator?: Validator | null
   validationParser?: JSONParser

src/routes/development/+page.svelte

@@ -235,6 +235,7 @@
   const validate = useLocalStorage('svelte-jsoneditor-demo-validate', false)
   const validateArray = useLocalStorage('svelte-jsoneditor-demo-validate-array', false)
   const readOnly = useLocalStorage('svelte-jsoneditor-demo-readOnly', false)
+  const forceContextMenu = useLocalStorage('svelte-jsoneditor-demo-forceContextMenu', false)
   const mainMenuBar = useLocalStorage('svelte-jsoneditor-demo-mainMenuBar', true)
   const navigationBar = useLocalStorage('svelte-jsoneditor-demo-navigationBar', true)
   const statusBar = useLocalStorage('svelte-jsoneditor-demo-statusBar', true)
@@ -540,6 +541,9 @@
     <label>
       <input type="checkbox" bind:checked={$readOnly} /> readOnly
     </label>
+    <label>
+      <input type="checkbox" bind:checked={$forceContextMenu} /> forceContextMenu
+    </label>
     <label>
       <input type="checkbox" bind:checked={$useCustomValueRenderer} /> Custom onRenderValue
     </label>
@@ -767,6 +771,7 @@
             escapeUnicodeCharacters={$escapeUnicodeCharacters}
             flattenColumns={$flattenColumns}
             readOnly={$readOnly}
+            forceContextMenu={$forceContextMenu}
             indentation={$selectedIndentation}
             tabSize={$tabSize}
             parser={selectedParser}