From 71f3511ffc3cb6eab2ef2d6fd9f1abae18c2f3e4 Mon Sep 17 00:00:00 2001
From: Jos de Jong <wjosdejong@gmail.com>
Date: Wed, 6 Apr 2022 11:48:15 +0200
Subject: [PATCH] fix: solve circular dependency to TreeMode in the Transform
 modal

---
 src/lib/components/JSONEditor.svelte          |  66 +++++++--
 src/lib/components/modals/TransformModal.scss |   6 +-
 .../components/modals/TransformModal.svelte   |  34 ++++-
 .../components/modes/codemode/CodeMode.svelte | 113 +++++----------
 .../components/modes/treemode/TreeMode.svelte | 132 ++++++------------
 5 files changed, 169 insertions(+), 182 deletions(-)

diff --git a/src/lib/components/JSONEditor.svelte b/src/lib/components/JSONEditor.svelte
index 37facede..cdb12b05 100644
--- a/src/lib/components/JSONEditor.svelte
+++ b/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}
diff --git a/src/lib/components/modals/TransformModal.scss b/src/lib/components/modals/TransformModal.scss
index 4ffb901a..27074e24 100644
--- a/src/lib/components/modals/TransformModal.scss
+++ b/src/lib/components/modals/TransformModal.scss
@@ -121,7 +121,7 @@
         }
 
         .data-contents {
-          :global(.jsoneditor-main) {
+          :global(.tree-mode) {
             height: 300px;
             flex: none;
           }
@@ -148,7 +148,7 @@
     }
   }
 
-  :global(.jsoneditor-main) {
+  :global(.tree-mode) {
     flex: 1;
     border: 1px solid $background-gray;
     box-shadow: none;
@@ -156,7 +156,7 @@
     min-height: 300px;
   }
 
-  :global(.jsoneditor-main.focus) {
+  :global(.tree-mode.focus) {
     border: 1px solid $theme-color;
   }
 
diff --git a/src/lib/components/modals/TransformModal.svelte b/src/lib/components/modals/TransformModal.svelte
index 1a9c9198..db3962bd 100644
--- a/src/lib/components/modals/TransformModal.svelte
+++ b/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,7 +14,7 @@
   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')
 
@@ -22,6 +22,9 @@
   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">
diff --git a/src/lib/components/modes/codemode/CodeMode.svelte b/src/lib/components/modes/codemode/CodeMode.svelte
index 6987e19b..cebc989b 100644
--- a/src/lib/components/modes/codemode/CodeMode.svelte
+++ b/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
diff --git a/src/lib/components/modes/treemode/TreeMode.svelte b/src/lib/components/modes/treemode/TreeMode.svelte
index 236e8d22..09b6df18 100644
--- a/src/lib/components/modes/treemode/TreeMode.svelte
+++ b/src/lib/components/modes/treemode/TreeMode.svelte
@@ -24,10 +24,8 @@
     SCROLL_DURATION,
     SEARCH_UPDATE_THROTTLE,
     SIMPLE_MODAL_OPTIONS,
-    SORT_MODAL_OPTIONS,
     STATE_ENFORCE_STRING,
-    STATE_EXPANDED,
-    TRANSFORM_MODAL_OPTIONS
+    STATE_EXPANDED
   } from '$lib/constants'
   import {
     createState,
@@ -88,8 +86,6 @@
   import ValidationErrorsOverview from '../../controls/ValidationErrorsOverview.svelte'
   import CopyPasteModal from '../../modals/CopyPasteModal.svelte'
   import JSONRepairModal from '../../modals/JSONRepairModal.svelte'
-  import SortModal from '../../modals/SortModal.svelte'
-  import TransformModal from '../../modals/TransformModal.svelte'
   import ContextMenu from './contextmenu/ContextMenu.svelte'
   import JSONNode from './JSONNode.svelte'
   import TreeMenu from './menu/TreeMenu.svelte'
@@ -124,15 +120,6 @@
   export let escapeUnicodeCharacters = false
   export let validator = null
 
-  /** @type {QueryLanguage[]} */
-  export let queryLanguages
-
-  /** @type {string} */
-  export let queryLanguageId
-
-  /** @type {(queryLanguageId: string) => void} */
-  export let onChangeQueryLanguage
-
   export let visible = true
   export let indentation = 2
   export let onError
@@ -151,6 +138,8 @@
   export let onClassName
   export let onFocus
   export let onBlur
+  export let onSortModal
+  export let onTransformModal
 
   // modalOpen is true when one of the modals is open.
   // This is used to track whether the editor still has focus
@@ -1179,34 +1168,29 @@
 
     modalOpen = true
 
-    open(
-      SortModal,
-      {
-        id: sortModalId,
-        json: json,
-        selectedPath,
-        onSort: async (operations) => {
-          debug('onSort', selectedPath, operations)
+    onSortModal({
+      id: sortModalId,
+      json,
+      selectedPath,
+      onSort: async (operations) => {
+        debug('onSort', selectedPath, operations)
 
-          const newSelection = createSelection(json, state, {
-            type: SELECTION_TYPE.VALUE,
-            path: selectedPath
-          })
-          handlePatch(operations, newSelection)
+        const newSelection = createSelection(json, state, {
+          type: SELECTION_TYPE.VALUE,
+          path: selectedPath
+        })
+        handlePatch(operations, newSelection)
 
-          // expand the newly replaced array
-          handleExpand(selectedPath, true)
-          // FIXME: because we apply expand *after* the patch, when doing undo/redo, the expanded state is not restored
-        }
+        // expand the newly replaced array
+        handleExpand(selectedPath, true)
+        // FIXME: because we apply expand *after* the patch, when doing undo/redo, the expanded state is not restored
       },
-      SORT_MODAL_OPTIONS,
-      {
-        onClose: () => {
-          modalOpen = false
-          focus()
-        }
-      }
-    )
+      onClose: () => {
+        modalOpen = false
+        focus()
+      },
+      open
+    })
   }
 
   function handleSortSelection() {
@@ -1223,56 +1207,32 @@
     openSortModal(selectedPath)
   }
 
-  export function openTransformModal({ id, selectedPath, onTransform, onClose }) {
-    if (readOnly) {
-      return
-    }
-
+  export function openTransformModal({ selectedPath }) {
     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)
-
-              const newSelection = createSelection(json, state, {
-                type: SELECTION_TYPE.VALUE,
-                path: selectedPath
-              })
-              handlePatch(operations, newSelection)
-
-              // expand the newly replaced array
-              handleExpand(selectedPath, true)
-              // FIXME: because we apply expand *after* the patch, when doing undo/redo, the expanded state is not restored
-            }
+    onTransformModal({
+      id: transformModalId,
+      json,
+      selectedPath,
+      onTransform: (operations) => {
+        debug('onTransform', selectedPath, operations)
+
+        const newSelection = createSelection(json, state, {
+          type: SELECTION_TYPE.VALUE,
+          path: selectedPath
+        })
+        handlePatch(operations, newSelection)
+
+        // expand the newly replaced array
+        handleExpand(selectedPath, true)
+        // FIXME: because we apply expand *after* the patch, when doing undo/redo, the expanded state is not restored
       },
-      TRANSFORM_MODAL_OPTIONS,
-      {
-        onClose: () => {
-          modalOpen = false
-          focus()
-          if (onClose) {
-            onClose()
-          }
-        }
-      }
-    )
+      onClose: () => {
+        modalOpen = false
+        focus()
+      },
+      open
+    })
   }
 
   function handleTransformSelection() {