feat: extend the transform method with a callback onTransform

This replaces the separate `onTransform` callback

README.md

@@ -225,8 +225,6 @@ const editor = new JSONEditor({
     }
     ```
 
-- `onTransform(operations: JSONPatchDocument) : JSONPatchDocument | undefined`.
-  Intercept a transform operation. The returned operations will be applied. This makes it possible to adjust the transform operations, or effectively cancel it by returning an empty JSONPatchDocument. When `undefined` is returned, the original `operations` will be applied.
 - `onFocus()` callback fired when the editor got focus.
 - `onBlur()` callback fired when the editor lost focus.
 
@@ -237,13 +235,13 @@ const editor = new JSONEditor({
 - `set(json: JSON)` Replace the current JSON document. Will reset the state of the editor.
 - `setText(text: string)` Replace the current JSON document, passing stringified JSON contents.
 - `update(json: JSON)` Update the loaded JSON document, keeping the state of the editor (like expanded objects).
-- `updateText(text: JSON)` Update the loaded JSON document, keeping the state of the editor (like expanded objects).
+- `updateText(text: string)` Update the loaded JSON document, keeping the state of the editor (like expanded objects).
 - `patch(operations: JSONPatchDocument)` Apply a JSON patch document to update the contents of the JSON document. A JSON patch document is a list with JSON Patch operations.
 - `expand([callback: (path: Path) => boolean])` Expand or collapse paths in the editor. The `callback` determines which paths will be expanded. If no `callback` is provided, all paths will be expanded. It is only possible to expand a path when all of its parent paths are expanded too. Examples:
   - `editor.expand(path => true)` expand all
   - `editor.expand(path => false)` collapse all
   - `editor.expand(path => path.length < 2)` expand all paths up to 2 levels deep
-- `transform()` programmatically trigger clicking of the transform button in the main menu, opening the transform model. See also `onTransform` to intercept the result.
+- `transform({ id?: string, onTransform?: ({ operations: JSONPatchDocument, json: JSON, transformedJson: JSON }) => void, onClose?: () => void })` programmatically trigger clicking of the transform button in the main menu, opening the transform model. If a callback `onTransform` is provided, it will replace the build-in logic to apply a transform, allowing you to process the transform operations in an alternative way. If provided, `onClose` callback will trigger when the transform modal closes, both after the user clicked apply or cancel. If an `id` is provided, the transform modal will load the previous status of this `id` instead of the status of the editors transform modal.
 - `scrollTo(path: Array.<string|number>)` Scroll the editor vertically such that the specified path comes into view. The path will be expanded when needed.
 - `focus()`. Give the editor focus.
 - `destroy()`. Destroy the editor, remove it from the DOM.

src/lib/components/JSONEditor.svelte

@@ -31,9 +31,6 @@
   export let onRenderMenu = () => {
     // no op by default
   }
-  export let onTransform = () => {
-    // no op by default
-  }
   export let onChangeMode = () => {
     // no op by default
   }
@@ -127,14 +124,20 @@
     throw new Error(`Method expand is not available in mode "${mode}"`)
   }
 
-  export function transform() {
-    const selectedPath = []
-
+  /**
+   * @param {Object} options
+   * @property {string} [id]
+   * @property {({ operations: JSONPatchDocument, json: JSON, transformedJson: JSON }) => void} [onTransform]
+   * @property {() => void} [onClose]
+   */
+  export function transform(options) {
     if (refCodeMode) {
-      refCodeMode.openTransformModal(selectedPath)
+      refCodeMode.openTransformModal(options)
     } else if (refTreeMode) {
-      refTreeMode.openTransformModal(selectedPath)
+      refTreeMode.openTransformModal(options)
     }
+
+    throw new Error(`Method transform is not available in mode "${mode}"`)
   }
 
   export function scrollTo(path) {
@@ -290,7 +293,6 @@
             onFocus={handleFocus}
             onBlur={handleBlur}
             onRenderMenu={handleRenderMenu}
-            {onTransform}
           />
         {:else}
           <!-- mode === MODE.TREE -->
@@ -310,7 +312,6 @@
             onFocus={handleFocus}
             onBlur={handleBlur}
             onRenderMenu={handleRenderMenu}
-            {onTransform}
           />
         {/if}
       {/key}

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

@@ -38,7 +38,6 @@
   export let onFocus = () => {}
   export let onBlur = () => {}
   export let onRenderMenu = () => {}
-  export let onTransform = () => {}
 
   const debug = createDebug('jsoneditor:CodeMode')
 
@@ -246,31 +245,39 @@
     }
   }
 
-  export function openTransformModal(selectedPath) {
+  export function openTransformModal({ id, selectedPath, onTransform, onClose }) {
     try {
       const json = JSON.parse(text)
 
       open(
         TransformModal,
         {
-          id: transformModalId,
+          id: id || transformModalId,
           json: json,
           selectedPath,
           indentation,
-          onTransform: async (operations) => {
-            debug('onTransform', selectedPath, operations)
-
-            const updatedOperations = onTransform(operations) || operations
-            if (isEmpty(updatedOperations)) {
-              return
-            }
-
-            patch(updatedOperations)
-          }
+          onTransform: onTransform
+            ? (operations) => {
+                onTransform({
+                  operations,
+                  json,
+                  transformedJson: immutableJSONPatch(json, operations)
+                })
+              }
+            : async (operations) => {
+                debug('onTransform', selectedPath, operations)
+
+                patch(operations)
+              }
         },
         TRANSFORM_MODAL_OPTIONS,
         {
-          onClose: focus
+          onClose: () => {
+            focus()
+            if (onClose) {
+              onClose()
+            }
+          }
         }
       )
     } catch (err) {
@@ -283,8 +290,9 @@
       return
     }
 
-    const selectedPath = []
-    openTransformModal(selectedPath)
+    openTransformModal({
+      selectedPath: []
+    })
   }
 
   function handleToggleSearch() {

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

@@ -110,7 +110,6 @@
   export let onChangeText
   export let onRequestRepair = () => {}
   export let onRenderMenu = () => {}
-  export let onTransform = () => {}
 
   function noop() {}
 
@@ -962,40 +961,48 @@
     openSortModal(selectedPath)
   }
 
-  export function openTransformModal(selectedPath) {
+  export function openTransformModal({ id, selectedPath, onTransform, onClose }) {
     if (readOnly) {
       return
     }
 
     open(
       TransformModal,
       {
-        id: transformModalId,
+        id: id || transformModalId,
         json: json,
         selectedPath,
         indentation,
-        onTransform: async (operations) => {
-          debug('onTransform', selectedPath, operations)
-
-          const updatedOperations = onTransform(operations) || operations
-          if (isEmpty(updatedOperations)) {
-            return
-          }
-
-          const newSelection = createSelection(json, state, {
-            type: SELECTION_TYPE.VALUE,
-            path: selectedPath
-          })
-          handlePatch(updatedOperations, 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
-        }
+        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
+            }
       },
       TRANSFORM_MODAL_OPTIONS,
       {
-        onClose: () => focus()
+        onClose: () => {
+          focus()
+          if (onClose) {
+            onClose()
+          }
+        }
       }
     )
   }
@@ -1006,12 +1013,15 @@
     }
 
     const selectedPath = findRootPath(json, selection)
-    openTransformModal(selectedPath)
+    openTransformModal({
+      selectedPath
+    })
   }
 
   function handleTransformAll() {
-    const selectedPath = []
-    openTransformModal(selectedPath)
+    openTransformModal({
+      selectedPath: []
+    })
   }
 
   /**