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.

- The example uses lodash functions filter, sort, and pick. + This basic example uses lodash functions filter, sort, and pick, + but you can run any JavaScript code.

WARNING: this example uses new Function() which can be dangerous when executed with arbitrary code. + Don't use it in production.

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 = '