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

examples/23_custom_query_language.html

@@ -75,7 +75,9 @@
       const execute = new Function('data', 'return ' + query)
 
       return execute(json)
-    }
+    },
+    queryDescription: 'Enter a JavaScript query to filter, sort, or transform the JSON data.<br/>' +
+      'The <a href="https://lodash.com/" target="_blank">Lodash</a> library is available via <code>_</code> to facilitate this.'
   }
   const json = []
   for (let i = 0; i < 100; i++) {

src/js/JSONEditor.js

@@ -185,7 +185,7 @@ JSONEditor.VALID_OPTIONS = [
   'sortObjectKeys', 'navigationBar', 'statusBar', 'mainMenuBar', 'languages', 'language', 'enableSort', 'enableTransform',
   'maxVisibleChilds', 'onValidationError',
   'modalAnchor', 'popupAnchor',
-  'createQuery', 'executeQuery'
+  'createQuery', 'executeQuery', 'queryDescription'
 ]
 
 /**

src/js/Node.js

@@ -3860,17 +3860,16 @@ export class Node {
    * Show transform modal
    */
   showTransformModal () {
-    const node = this
+    const { modalAnchor, createQuery, executeQuery, queryDescription } = this.editor.options
+    const json = this.getValue()
 
-    const anchor = this.editor.options.modalAnchor || DEFAULT_MODAL_ANCHOR
-    const json = node.getValue()
-    const { createQuery, executeQuery } = this.editor.options
     showTransformModal({
-      anchor,
+      anchor: modalAnchor || DEFAULT_MODAL_ANCHOR,
       json,
+      queryDescription, // can be undefined
       createQuery,
       executeQuery,
-      onTransform: query => { node.transform(query) }
+      onTransform: query => { this.transform(query) }
     })
   }
 

src/js/previewmode.js

@@ -388,20 +388,20 @@ previewmode._showSortModal = function () {
  */
 previewmode._showTransformModal = function () {
   this.executeWithBusyMessage(() => {
-    const anchor = this.options.modalAnchor || DEFAULT_MODAL_ANCHOR
+    const { createQuery, executeQuery, modalAnchor, queryDescription } = this.options
     const json = this.get()
-    const { createQuery, executeQuery } = this.options
 
     this._renderPreview() // update array count
 
     showTransformModal({
-      anchor,
+      anchor: modalAnchor || DEFAULT_MODAL_ANCHOR,
       json,
+      queryDescription, // can be undefined
       createQuery,
       executeQuery,
       onTransform: query => {
         this.executeWithBusyMessage(() => {
-          const updatedJson = this.options.executeQuery(json, query)
+          const updatedJson = executeQuery(json, query)
           this._setAndFireOnChange(updatedJson)
         }, 'transforming...')
       }

src/js/showTransformModal.js

@@ -5,27 +5,39 @@ import { stringifyPartial } from './jsonUtils'
 import { getChildPaths, debounce } from './util'
 import { MAX_PREVIEW_CHARACTERS } from './constants'
 
+const DEFAULT_DESCRIPTION =
+  'Enter a <a href="http://jmespath.org" target="_blank">JMESPath</a> query to filter, sort, or transform the JSON data.<br/>' +
+  'To learn JMESPath, go to <a href="http://jmespath.org/tutorial.html" target="_blank">the interactive tutorial</a>.'
+
 /**
  * Show advanced filter and transform modal using JMESPath
  * @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 {string} [queryDescription] Optional custom description explaining
+ *                                       the transform functionality
  * @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,
+    queryDescription = DEFAULT_DESCRIPTION,
+    createQuery,
+    executeQuery,
+    onTransform
+  }
+) {
   const value = json
 
   const content = '<label class="pico-modal-contents">' +
       '<div class="pico-modal-header">' + translate('transform') + '</div>' +
-      '<p>' +
+      '<p>' + queryDescription + '</p>' +
-      'Enter a <a href="http://jmespath.org" target="_blank">JMESPath</a> query to filter, sort, or transform the JSON data.<br/>' +
-      'To learn JMESPath, go to <a href="http://jmespath.org/tutorial.html" target="_blank">the interactive tutorial</a>.' +
-      '</p>' +
       '<div class="jsoneditor-jmespath-label">' + translate('transformWizardLabel') + ' </div>' +
       '<div id="wizard" class="jsoneditor-jmespath-block jsoneditor-jmespath-wizard">' +
       '  <table class="jsoneditor-jmespath-wizard-table">' +

src/js/textmode.js

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