feat: implement method transform() and callback `onTransform(operat…

…ions)`

README.md

@@ -225,6 +225,8 @@ 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.
 
@@ -236,7 +238,12 @@ const editor = new JSONEditor({
 - `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).
-- `patch(operations: JSONPatchDocument)` Apply a JSON patch document to update the contents of the JSON document.
+- `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.
 - `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

@@ -2,11 +2,11 @@
 
 <script>
   import { faCode } from '@fortawesome/free-solid-svg-icons'
-  import AbsolutePopup from './modals/popup/AbsolutePopup.svelte'
   import createDebug from 'debug'
   import Modal from 'svelte-simple-modal'
   import { MODE } from '../constants.js'
   import { uniqueId } from '../utils/uniqueId.js'
+  import AbsolutePopup from './modals/popup/AbsolutePopup.svelte'
   import CodeMode from './modes/codemode/CodeMode.svelte'
   import TreeMode from './modes/treemode/TreeMode.svelte'
 
@@ -31,6 +31,9 @@
   export let onRenderMenu = () => {
     // no op by default
   }
+  export let onTransform = () => {
+    // no op by default
+  }
   export let onChangeMode = () => {
     // no op by default
   }
@@ -124,12 +127,14 @@
     throw new Error(`Method expand is not available in mode "${mode}"`)
   }
 
-  export function collapse(callback) {
-    if (refTreeMode) {
-      return refTreeMode.collapse(callback)
-    }
+  export function transform() {
+    const selectedPath = []
 
-    throw new Error(`Method collapse is not available in mode "${mode}"`)
+    if (refCodeMode) {
+      refCodeMode.openTransformModal(selectedPath)
+    } else if (refTreeMode) {
+      refTreeMode.openTransformModal(selectedPath)
+    }
   }
 
   export function scrollTo(path) {
@@ -285,6 +290,7 @@
             onFocus={handleFocus}
             onBlur={handleBlur}
             onRenderMenu={handleRenderMenu}
+            {onTransform}
           />
         {:else}
           <!-- mode === MODE.TREE -->
@@ -301,9 +307,10 @@
             onChangeText={handleChangeText}
             onRequestRepair={handleRequestRepair}
             {onClassName}
-            onRenderMenu={handleRenderMenu}
             onFocus={handleFocus}
             onBlur={handleBlur}
+            onRenderMenu={handleRenderMenu}
+            {onTransform}
           />
         {/if}
       {/key}

src/lib/components/modals/TransformModal.svelte

@@ -1,6 +1,7 @@
 <svelte:options immutable={true} />
 
 <script>
+  import { uniqueId } from '../../utils/uniqueId.js'
   import { faCaretDown, faCaretRight } from '@fortawesome/free-solid-svg-icons'
   import * as _ from 'lodash-es'
   import { debounce, isEmpty } from 'lodash-es'
@@ -14,9 +15,9 @@
   import { transformModalState } from './transformModalState.js'
   import TransformWizard from './TransformWizard.svelte'
 
-  export let id
+  export let id = 'transform-modal-' + uniqueId()
   export let json
-  export let selectedPath
+  export let selectedPath = []
   export let onTransform
   export let indentation = 2
 

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

@@ -3,7 +3,7 @@
   import createDebug from 'debug'
   import { immutableJSONPatch, revertJSONPatch } from 'immutable-json-patch'
   import jsonrepair from 'jsonrepair'
-  import { debounce, uniqueId } from 'lodash-es'
+  import { debounce, isEmpty, uniqueId } from 'lodash-es'
   import { getContext, onDestroy, onMount } from 'svelte'
   import {
     CHECK_VALID_JSON_DELAY,
@@ -38,6 +38,7 @@
   export let onFocus = () => {}
   export let onBlur = () => {}
   export let onRenderMenu = () => {}
+  export let onTransform = () => {}
 
   const debug = createDebug('jsoneditor:CodeMode')
 
@@ -245,11 +246,7 @@
     }
   }
 
-  function handleTransform() {
-    if (readOnly) {
-      return
-    }
-
+  export function openTransformModal(selectedPath) {
     try {
       const json = JSON.parse(text)
 
@@ -258,11 +255,17 @@
         {
           id: transformModalId,
           json: json,
-          selectedPath: [],
+          selectedPath,
           indentation,
           onTransform: async (operations) => {
-            debug('onTransform', operations)
-            patch(operations)
+            debug('onTransform', selectedPath, operations)
+
+            const updatedOperations = onTransform(operations) || operations
+            if (isEmpty(updatedOperations)) {
+              return
+            }
+
+            patch(updatedOperations)
           }
         },
         TRANSFORM_MODAL_OPTIONS,
@@ -275,6 +278,15 @@
     }
   }
 
+  function handleTransform() {
+    if (readOnly) {
+      return
+    }
+
+    const selectedPath = []
+    openTransformModal(selectedPath)
+  }
+
   function handleToggleSearch() {
     if (aceEditor.searchBox) {
       // toggle

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

@@ -110,6 +110,7 @@
   export let onChangeText
   export let onRequestRepair = () => {}
   export let onRenderMenu = () => {}
+  export let onTransform = () => {}
 
   function noop() {}
 
@@ -230,10 +231,6 @@
     state = syncState(json, state, [], callback, true)
   }
 
-  export function collapse(callback = () => false) {
-    state = syncState(json, state, [], callback, true)
-  }
-
   // two-way binding of externalJson and json (internal)
   // when receiving an updated prop, we have to update state.
   // when changing json in the editor, the bound external property must be updated
@@ -965,7 +962,7 @@
     openSortModal(selectedPath)
   }
 
-  function openTransformModal(selectedPath) {
+  export function openTransformModal(selectedPath) {
     if (readOnly) {
       return
     }
@@ -980,11 +977,16 @@
         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(operations, newSelection)
+          handlePatch(updatedOperations, newSelection)
 
           // expand the newly replaced array
           handleExpand(selectedPath, true)

tools/develop-vanilla.html

@@ -147,8 +147,9 @@
         json,
         onChange: ({ json, text }) => console.log('onChange', { json, text }),
         onChangeMode: (mode) => console.log('onChangeMode', mode),
-        onFocus: () => console.log('got focus...'),
-        onBlur: () => console.log('lost focus...'),
+        onFocus: () => console.log('onFocus'),
+        onBlur: () => console.log('onBlur'),
+        onTransform: (operations) => console.log('onTransform', operations),
         validator: (json) => {
           if (
             json &&
@@ -275,7 +276,7 @@
       }
 
       document.getElementById('collapseAll').onclick = function () {
-        testEditor.collapse(() => false)
+        testEditor.expand(() => false)
       }
 
       document.getElementById('mainMenuBar').onclick = function (event) {