fix: solve circular dependency to TreeMode in the Transform modal

src/lib/components/JSONEditor.svelte

@@ -4,7 +4,7 @@
   import { faCode } from '@fortawesome/free-solid-svg-icons'
   import { createDebug } from '../utils/debug'
   import Modal from 'svelte-simple-modal'
-  import { MODE } from '../constants.js'
+  import { MODE, SORT_MODAL_OPTIONS, TRANSFORM_MODAL_OPTIONS } from '../constants.js'
   import { uniqueId } from '../utils/uniqueId.js'
   import { isTextContent, validateContentType } from '../utils/jsonUtils'
   import AbsolutePopup from './modals/popup/AbsolutePopup.svelte'
@@ -13,6 +13,8 @@
   import { javascriptQueryLanguage } from '../plugins/query/javascriptQueryLanguage.js'
   import { renderValue } from '$lib/plugins/value/renderValue'
   import { tick } from 'svelte'
+  import TransformModal from './modals/TransformModal.svelte'
+  import SortModal from './modals/SortModal.svelte'
 
   // TODO: document how to enable debugging in the readme: localStorage.debug="jsoneditor:*", then reload
   const debug = createDebug('jsoneditor:Main')
@@ -288,6 +290,57 @@
     queryLanguageId = newQueryLanguageId
     onChangeQueryLanguage(newQueryLanguageId)
   }
+
+  // The onTransformModal method is located in JSONEditor to prevent circular references:
+  //     TreeMode -> TransformModal -> TreeMode
+  // And `open` is passed along as parameter because we cannot define it in JSONEditor itself
+  export function onTransformModal({ id, json, selectedPath, onTransform, onClose, open }) {
+    if (readOnly) {
+      return
+    }
+
+    open(
+      TransformModal,
+      {
+        id,
+        json,
+        selectedPath,
+        escapeControlCharacters,
+        escapeUnicodeCharacters,
+        queryLanguages,
+        queryLanguageId,
+        onChangeQueryLanguage: handleChangeQueryLanguage,
+        onRenderValue,
+        onClassName,
+        onTransform
+      },
+      TRANSFORM_MODAL_OPTIONS,
+      {
+        onClose
+      }
+    )
+  }
+
+  // The onSortModal is positioned here for consistency with TransformModal
+  export function onSortModal({ id, json, selectedPath, onSort, onClose, open }) {
+    if (readOnly) {
+      return
+    }
+
+    open(
+      SortModal,
+      {
+        id,
+        json,
+        selectedPath,
+        onSort
+      },
+      SORT_MODAL_OPTIONS,
+      {
+        onClose
+      }
+    )
+  }
 </script>
 
 <Modal>
@@ -303,16 +356,14 @@
             {mainMenuBar}
             {escapeUnicodeCharacters}
             {validator}
-            {queryLanguages}
-            {queryLanguageId}
-            {onRenderValue}
-            onChangeQueryLanguage={handleChangeQueryLanguage}
             onChange={handleChangeText}
             onSwitchToTreeMode={handleSwitchToTreeMode}
             {onError}
             onFocus={handleFocus}
             onBlur={handleBlur}
             onRenderMenu={handleRenderMenu}
+            {onSortModal}
+            {onTransformModal}
           />
         {:else}
           <!-- mode === MODE.TREE -->
@@ -326,9 +377,6 @@
             {escapeControlCharacters}
             {escapeUnicodeCharacters}
             {validator}
-            {queryLanguages}
-            {queryLanguageId}
-            onChangeQueryLanguage={handleChangeQueryLanguage}
             {onError}
             onChange={handleChange}
             onRequestRepair={handleRequestRepair}
@@ -337,6 +385,8 @@
             onFocus={handleFocus}
             onBlur={handleBlur}
             onRenderMenu={handleRenderMenu}
+            {onSortModal}
+            {onTransformModal}
           />
         {/if}
       {/key}

src/lib/components/modals/TransformModal.scss

@@ -121,7 +121,7 @@
         }
 
         .data-contents {
-          :global(.jsoneditor-main) {
+          :global(.tree-mode) {
             height: 300px;
             flex: none;
           }
@@ -148,15 +148,15 @@
     }
   }
 
-  :global(.jsoneditor-main) {
+  :global(.tree-mode) {
     flex: 1;
     border: 1px solid $background-gray;
     box-shadow: none;
     box-sizing: border-box;
     min-height: 300px;
   }
 
-  :global(.jsoneditor-main.focus) {
+  :global(.tree-mode.focus) {
     border: 1px solid $theme-color;
   }
 

src/lib/components/modals/TransformModal.svelte

@@ -3,7 +3,7 @@
 <script>
   import { uniqueId } from '../../utils/uniqueId.js'
   import { faCaretDown, faCaretRight } from '@fortawesome/free-solid-svg-icons'
-  import { debounce, isEmpty } from 'lodash-es'
+  import { debounce, isEmpty, noop } from 'lodash-es'
   import { getContext } from 'svelte'
   import Icon from 'svelte-awesome'
   import { DEBOUNCE_DELAY } from '../../constants.js'
@@ -14,14 +14,17 @@
   import TransformModalHeader from './TransformModalHeader.svelte'
   import AbsolutePopup from './popup/AbsolutePopup.svelte'
   import { createDebug } from '../../utils/debug'
-  import JSONEditor from '../JSONEditor.svelte'
+  import TreeMode from '../modes/treemode/TreeMode.svelte'
 
   const debug = createDebug('jsoneditor:TransformModal')
 
   export let id = 'transform-modal-' + uniqueId()
   export let json
   export let selectedPath = []
 
+  export let escapeControlCharacters
+  export let escapeUnicodeCharacters
+
   /** @type {QueryLanguage[]} */
   export let queryLanguages
 
@@ -33,6 +36,7 @@
 
   /** @type {(props: RenderValueProps) => RenderValueConstructor[]} */
   export let onRenderValue
+  export let onClassName
 
   export let onTransform
 
@@ -227,12 +231,21 @@
               </div>
             </div>
             {#if showOriginal}
-              <JSONEditor
-                content={selectedContent}
+              <TreeMode
+                externalContent={selectedContent}
                 readOnly={true}
                 mainMenuBar={false}
                 navigationBar={false}
+                {escapeControlCharacters}
+                {escapeUnicodeCharacters}
                 {onRenderValue}
+                onError={console.error}
+                onChange={noop}
+                onFocus={noop}
+                onBlur={noop}
+                onSortModal={noop}
+                onTransformModal={noop}
+                {onClassName}
               />
             {/if}
           </div>
@@ -241,12 +254,21 @@
               <div class="label-inner">Preview</div>
             </div>
             {#if !previewError}
-              <JSONEditor
-                content={previewContent}
+              <TreeMode
+                externalContent={previewContent}
                 readOnly={true}
                 mainMenuBar={false}
                 navigationBar={false}
+                {escapeControlCharacters}
+                {escapeUnicodeCharacters}
                 {onRenderValue}
+                onError={console.error}
+                onChange={noop}
+                onFocus={noop}
+                onBlur={noop}
+                onSortModal={noop}
+                onTransformModal={noop}
+                {onClassName}
               />
             {:else}
               <div class="preview error">

src/lib/components/modes/codemode/CodeMode.svelte

@@ -13,9 +13,7 @@
     JSON_STATUS_REPAIRABLE,
     JSON_STATUS_VALID,
     MAX_AUTO_REPAIRABLE_SIZE,
-    MAX_DOCUMENT_SIZE_CODE_MODE,
-    SORT_MODAL_OPTIONS,
-    TRANSFORM_MODAL_OPTIONS
+    MAX_DOCUMENT_SIZE_CODE_MODE
   } from '$lib/constants'
   import {
     activeElementIsChildOf,
@@ -27,8 +25,6 @@
   import { createFocusTracker } from '../../controls/createFocusTracker.js'
   import Message from '../../controls/Message.svelte'
   import ValidationErrorsOverview from '../../controls/ValidationErrorsOverview.svelte'
-  import SortModal from '../../modals/SortModal.svelte'
-  import TransformModal from '../../modals/TransformModal.svelte'
   import CodeMenu from './menu/CodeMenu.svelte'
   import { basicSetup, EditorState } from '@codemirror/basic-setup'
   import { EditorView, keymap } from '@codemirror/view'
@@ -54,23 +50,13 @@
   /** @type {((text: string, previousText: string) => void) | null} */
   export let onChange = null
 
-  /** @type {QueryLanguage[]} */
-  export let queryLanguages
-
-  /** @type {string} */
-  export let queryLanguageId
-
-  /** @type {(queryLanguageId: string) => void} */
-  export let onChangeQueryLanguage
-
-  /** @type {(props: RenderValueProps) => RenderValueConstructor[]} */
-  export let onRenderValue
-
   export let onSwitchToTreeMode = () => {}
   export let onError
   export let onFocus = () => {}
   export let onBlur = () => {}
   export let onRenderMenu = () => {}
+  export let onSortModal
+  export let onTransformModal
 
   const debug = createDebug('jsoneditor:CodeMode')
 
@@ -269,86 +255,55 @@
 
       modalOpen = true
 
-      open(
-        SortModal,
-        {
-          id: sortModalId,
-          json,
-          selectedPath: [],
-          onSort: async (operations) => {
-            debug('onSort', operations)
-            patch(operations)
-          }
+      onSortModal({
+        id: sortModalId,
+        json,
+        selectedPath: [],
+        onSort: async (operations) => {
+          debug('onSort', operations)
+          patch(operations)
         },
-        SORT_MODAL_OPTIONS,
-        {
-          onClose: () => {
-            modalOpen = false
-            focus()
-          }
-        }
-      )
+        onClose: () => {
+          modalOpen = false
+          focus()
+        },
+        open
+      })
     } catch (err) {
       onError(err)
     }
   }
 
-  export function openTransformModal({ id, selectedPath, onTransform, onClose }) {
+  function handleTransform() {
+    if (readOnly) {
+      return
+    }
+
     try {
       const json = JSON.parse(text)
 
       modalOpen = true
 
-      open(
-        TransformModal,
-        {
-          id: id || transformModalId,
-          json: json,
-          selectedPath,
-          queryLanguages,
-          queryLanguageId,
-          onChangeQueryLanguage,
-          onRenderValue,
-          onTransform: onTransform
-            ? (operations) => {
-                onTransform({
-                  operations,
-                  json,
-                  transformedJson: immutableJSONPatch(json, operations)
-                })
-              }
-            : async (operations) => {
-                debug('onTransform', selectedPath, operations)
+      onTransformModal({
+        id: transformModalId,
+        json,
+        selectedPath: [],
+        onTransform: async (operations) => {
+          debug('onTransform', operations)
 
-                patch(operations)
-              }
+          patch(operations)
         },
-        TRANSFORM_MODAL_OPTIONS,
-        {
-          onClose: () => {
-            modalOpen = false
-            focus()
-            if (onClose) {
-              onClose()
-            }
-          }
-        }
-      )
+        onClose: () => {
+          modalOpen = false
+          focus()
+        },
+        open
+      })
     } catch (err) {
       onError(err)
     }
   }
 
-  function handleTransform() {
-    if (readOnly) {
-      return
-    }
-
-    openTransformModal({
-      selectedPath: []
-    })
-  }
-
   function handleToggleSearch() {
     if (codeMirrorView) {
       // TODO: figure out the proper way to detect whether the search panel is open