Change `showTransformModal` to pass an object with properties. Fix transform not working in `text` and `preview` mode.

examples/23_custom_query_language.html

@@ -35,10 +35,12 @@
   Click on the "Transform" button and try it out.
 </p>
 <p>
-  The example uses lodash functions <code>filter</code>, <code>sort</code>, and <code>pick</code>.
+  This basic example uses lodash functions <code>filter</code>, <code>sort</code>, and <code>pick</code>,
+  but you can run any JavaScript code.
 </p>
 <p class="warning">
   WARNING: this example uses <code>new Function()</code> which can be dangerous when executed with arbitrary code.
+  Don't use it in production.
 </p>
 <div id="jsoneditor"></div>
 

src/js/Node.js

@@ -3865,8 +3865,12 @@ export class Node {
     const anchor = this.editor.options.modalAnchor || DEFAULT_MODAL_ANCHOR
     const json = node.getValue()
     const { createQuery, executeQuery } = this.editor.options
-    showTransformModal(anchor, json, createQuery, executeQuery, query => {
-      node.transform(query)
+    showTransformModal({
+      anchor,
+      json,
+      createQuery,
+      executeQuery,
+      onTransform: query => { node.transform(query) }
     })
   }
 

src/js/previewmode.js

@@ -387,20 +387,24 @@ previewmode._showSortModal = function () {
  * @private
  */
 previewmode._showTransformModal = function () {
-  const me = this
-
   this.executeWithBusyMessage(() => {
-    const anchor = me.options.modalAnchor || DEFAULT_MODAL_ANCHOR
-    const json = me.get()
-    const { createQuery, executeQuery } = this.editor.options
+    const anchor = this.options.modalAnchor || DEFAULT_MODAL_ANCHOR
+    const json = this.get()
+    const { createQuery, executeQuery } = this.options
 
-    me._renderPreview() // update array count
+    this._renderPreview() // update array count
 
-    showTransformModal(anchor, json, createQuery, executeQuery, query => {
-      me.executeWithBusyMessage(() => {
+    showTransformModal({
+      anchor,
+      json,
+      createQuery,
+      executeQuery,
+      onTransform: query => {
+        this.executeWithBusyMessage(() => {
           const updatedJson = this.options.executeQuery(json, query)
-        me._setAndFireOnChange(updatedJson)
+          this._setAndFireOnChange(updatedJson)
         }, 'transforming...')
+      }
     })
   }, 'parsing...')
 }

src/js/showTransformModal.js

@@ -7,16 +7,17 @@ import { MAX_PREVIEW_CHARACTERS } from './constants'
 
 /**
  * Show advanced filter and transform modal using JMESPath
- * @param {HTMLElement} container   The container where to center
+ * @param {Object} params
+ * @property {HTMLElement} container   The container where to center
  *                                     the modal and create an overlay
- * @param {JSON} json               The json data to be transformed
- * @param {function} createQuery    Function called to create a query
+ * @property {JSON} json               The json data to be transformed
+ * @property {function} createQuery    Function called to create a query
  *                                     from the wizard form
- * @param {function} executeQuery   Execute a query for the preview pane
- * @param {function} onTransform    Callback invoked with the created
+ * @property {function} executeQuery   Execute a query for the preview pane
+ * @property {function} onTransform    Callback invoked with the created
  *                                     query as callback
  */
-export function showTransformModal (container, json, createQuery, executeQuery, onTransform) {
+export function showTransformModal ({ container, json, createQuery, executeQuery, onTransform }) {
   const value = json
 
   const content = '<label class="pico-modal-contents">' +

src/js/textmode.js

@@ -427,13 +427,19 @@ textmode._showSortModal = function () {
  * @private
  */
 textmode._showTransformModal = function () {
-  const me = this
   const anchor = this.options.modalAnchor || DEFAULT_MODAL_ANCHOR
   const json = this.get()
-  const { createQuery, executeQuery } = this.editor.options
-  showTransformModal(anchor, json, createQuery, executeQuery, query => {
+  const { createQuery, executeQuery } = this.options
+
+  showTransformModal({
+    anchor,
+    json,
+    createQuery,
+    executeQuery,
+    onTransform: query => {
       const updatedJson = this.options.executeQuery(json, query)
-    me.set(updatedJson)
+      this.set(updatedJson)
+    }
   })
 }