From aba0a5838327cc6bb4551f34fe0c841659aa4112 Mon Sep 17 00:00:00 2001
From: jos <wjosdejong@gmail.com>
Date: Sat, 4 Jan 2020 10:16:32 +0100
Subject: [PATCH] Change `showTransformModal` to pass an object with
 properties. Fix transform not working in `text` and `preview` mode.

---
 examples/23_custom_query_language.html |  4 +++-
 src/js/Node.js                         |  8 ++++++--
 src/js/previewmode.js                  | 26 +++++++++++++++-----------
 src/js/showTransformModal.js           | 19 ++++++++++---------
 src/js/textmode.js                     | 16 +++++++++++-----
 5 files changed, 45 insertions(+), 28 deletions(-)

diff --git a/examples/23_custom_query_language.html b/examples/23_custom_query_language.html
index c31ed24..f0d6d21 100644
--- a/examples/23_custom_query_language.html
+++ b/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>
 
diff --git a/src/js/Node.js b/src/js/Node.js
index 134c201..a2b357a 100644
--- a/src/js/Node.js
+++ b/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) }
     })
   }
 
diff --git a/src/js/previewmode.js b/src/js/previewmode.js
index b818373..4694d42 100644
--- a/src/js/previewmode.js
+++ b/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(() => {
-        const updatedJson = this.options.executeQuery(json, query)
-        me._setAndFireOnChange(updatedJson)
-      }, 'transforming...')
+    showTransformModal({
+      anchor,
+      json,
+      createQuery,
+      executeQuery,
+      onTransform: query => {
+        this.executeWithBusyMessage(() => {
+          const updatedJson = this.options.executeQuery(json, query)
+          this._setAndFireOnChange(updatedJson)
+        }, 'transforming...')
+      }
     })
   }, 'parsing...')
 }
diff --git a/src/js/showTransformModal.js b/src/js/showTransformModal.js
index 3f60767..20b8cb8 100644
--- a/src/js/showTransformModal.js
+++ b/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
- *                                  the modal and create an overlay
- * @param {JSON} json               The json data to be transformed
- * @param {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
- *                                  query as callback
+ * @param {Object} params
+ * @property {HTMLElement} container   The container where to center
+ *                                     the modal and create an overlay
+ * @property {JSON} json               The json data to be transformed
+ * @property {function} createQuery    Function called to create a query
+ *                                     from the wizard form
+ * @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">' +
diff --git a/src/js/textmode.js b/src/js/textmode.js
index 6967be8..8636dda 100644
--- a/src/js/textmode.js
+++ b/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 updatedJson = this.options.executeQuery(json, query)
-    me.set(updatedJson)
+  const { createQuery, executeQuery } = this.options
+
+  showTransformModal({
+    anchor,
+    json,
+    createQuery,
+    executeQuery,
+    onTransform: query => {
+      const updatedJson = this.options.executeQuery(json, query)
+      this.set(updatedJson)
+    }
   })
 }