@bpmn-io/form-js-playground 0.10.1 → 0.11.0

package/dist/index.cjs

@@ -16,6 +16,9 @@ var view = require('@codemirror/view');
 var state = require('@codemirror/state');
 var lint = require('@codemirror/lint');
 var langJson = require('@codemirror/lang-json');
+var commands = require('@codemirror/commands');
+var autocomplete = require('@codemirror/autocomplete');
+var language = require('@codemirror/language');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -118,18 +121,56 @@ function serializeValue(obj) {
   return JSON.stringify(JSON.stringify(obj)).replace(/</g, '&lt;').replace(/>/g, '&gt;');
 }
 
+/**
+ * @type {Facet<import('..').Variables>} Variables
+ */
+const variablesFacet = state.Facet.define();
+
+function autocompletion () {
+  return [autocomplete.autocompletion({
+    override: [completions]
+  })];
+}
+function completions(context) {
+  const variables = context.state.facet(variablesFacet)[0];
+  const options = variables.map(v => ({
+    label: v,
+    type: 'variable'
+  }));
+  let nodeBefore = language.syntaxTree(context.state).resolve(context.pos, -1);
+
+  // handle inside property name as explicit call
+  if (nodeBefore.type.name === 'PropertyName') {
+    context.explicit = true;
+  }
+  let word = context.matchBefore(/\w*/);
+  if (word.from == word.to && !context.explicit) {
+    return null;
+  }
+  return {
+    from: word.from,
+    options
+  };
+}
+
 function JSONEditor(options = {}) {
-  const emitter = mitt__default['default']();
   const {
     readonly = false
   } = options;
+  const emitter = mitt__default['default']();
   let language = new state.Compartment().of(langJson.json());
   let tabSize = new state.Compartment().of(state.EditorState.tabSize.of(2));
+
+  /**
+   * @typedef {Array<string>} Variables
+   */
+
+  const autocompletionConf = new state.Compartment();
   const linterExtension = lint.linter(langJson.jsonParseLinter());
-  function createState(doc, extensions = []) {
+  function createState(doc, extensions = [], variables = []) {
     return state.EditorState.create({
       doc,
-      extensions: [codemirror.basicSetup, language, tabSize, linterExtension, lint.lintGutter(), ...extensions]
+      extensions: [codemirror.basicSetup, language, tabSize, linterExtension, lint.lintGutter(), autocompletionConf.of(variablesFacet.of(variables)), autocompletion(), view.keymap.of([commands.indentWithTab]), ...extensions]
     });
   }
   function createView(readonly) {
@@ -147,15 +188,25 @@ function JSONEditor(options = {}) {
     view$1.setValue = function (value) {
       this.setState(createState(value, [updateListener, editable]));
     };
+    view$1.setVariables = function (variables) {
+      this.setState(createState(view$1.state.doc.toString(), [updateListener, editable], variables));
+    };
     return view$1;
   }
-  const view$1 = createView(readonly);
+  const view$1 = this._view = createView(readonly);
   this.setValue = function (value) {
     view$1.setValue(value);
   };
   this.getValue = function () {
     return view$1.state.doc.toString();
   };
+
+  /**
+   * @param {Variables} variables
+   */
+  this.setVariables = function (variables) {
+    view$1.setVariables(variables);
+  };
   this.on = emitter.on;
   this.off = emitter.off;
   this.emit = emitter.emit;
@@ -204,16 +255,12 @@ Section.HeaderItem = function (props) {
 function PlaygroundRoot(props) {
   const {
     actions: actionsConfig = {},
-    editor: editorConfig = {},
     emit,
     exporter: exporterConfig = {}
   } = props;
   const {
     display: displayActions = true
   } = actionsConfig;
-  const {
-    inlinePropertiesPanel = true
-  } = editorConfig;
   const paletteContainerRef = hooks.useRef();
   const editorContainerRef = hooks.useRef();
   const formContainerRef = hooks.useRef();
@@ -257,11 +304,11 @@ function PlaygroundRoot(props) {
   }, [props.schema]);
   hooks.useEffect(() => {
     const dataEditor = dataEditorRef.current = new JSONEditor({
-      value: toJSON(data)
+      value: toString(data)
     });
     const resultView = resultViewRef.current = new JSONEditor({
       readonly: true,
-      value: toJSON(resultData)
+      value: toString(resultData)
     });
     const form = formRef.current = new formJsViewer.Form();
     const formEditor = formEditorRef.current = new formJsEditor.FormEditor({
@@ -272,7 +319,7 @@ function PlaygroundRoot(props) {
         parent: paletteContainerRef.current
       },
       propertiesPanel: {
-        parent: !inlinePropertiesPanel && propertiesPanelContainerRef.current
+        parent: propertiesPanelContainerRef.current
       },
       exporter: exporterConfig
     });
@@ -312,16 +359,25 @@ function PlaygroundRoot(props) {
     };
   }, []);
   hooks.useEffect(() => {
-    dataEditorRef.current.setValue(toJSON(initialData));
+    dataEditorRef.current.setValue(toString(initialData));
   }, [initialData]);
   hooks.useEffect(() => {
-    initialSchema && formEditorRef.current.importSchema(initialSchema);
+    if (initialSchema) {
+      formEditorRef.current.importSchema(initialSchema);
+      dataEditorRef.current.setVariables(formJsViewer.getSchemaVariables(initialSchema));
+    }
   }, [initialSchema]);
+  hooks.useEffect(() => {
+    if (schema && dataContainerRef.current) {
+      const variables = formJsViewer.getSchemaVariables(schema);
+      dataEditorRef.current.setVariables(variables);
+    }
+  }, [schema]);
   hooks.useEffect(() => {
     schema && formRef.current.importSchema(schema, data);
   }, [schema, data]);
   hooks.useEffect(() => {
-    resultViewRef.current.setValue(toJSON(resultData));
+    resultViewRef.current.setValue(toString(resultData));
   }, [resultData]);
   hooks.useEffect(() => {
     props.onStateChanged({
@@ -339,9 +395,7 @@ function PlaygroundRoot(props) {
     setShowEmbed(true);
   }, []);
   return jsxRuntime.jsxs("div", {
-    class: classNames__default['default']('fjs-container', 'fjs-pgl-root', {
-      'fjs-pgl-inline-editor-panel': inlinePropertiesPanel
-    }),
+    class: classNames__default['default']('fjs-container', 'fjs-pgl-root'),
     children: [jsxRuntime.jsx("div", {
       class: "fjs-pgl-modals",
       children: showEmbed ? jsxRuntime.jsx(EmbedModal, {
@@ -380,13 +434,13 @@ function PlaygroundRoot(props) {
           class: "fjs-pgl-form-container"
         })
       }), jsxRuntime.jsx(Section, {
-        name: "Form Data (Input)",
+        name: "Form Input",
         children: jsxRuntime.jsx("div", {
           ref: dataContainerRef,
           class: "fjs-pgl-text-container"
         })
       }), jsxRuntime.jsx(Section, {
-        name: "Form Data (Submit)",
+        name: "Form Output",
         children: jsxRuntime.jsx("div", {
           ref: resultContainerRef,
           class: "fjs-pgl-text-container"
@@ -401,7 +455,7 @@ function PlaygroundRoot(props) {
 
 // helpers ///////////////
 
-function toJSON(obj) {
+function toString(obj) {
   return JSON.stringify(obj, null, '  ');
 }
 

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../src/components/Modal.js","../src/components/EmbedModal.js","../src/components/JSONEditor.js","../src/components/Section.js","../src/components/PlaygroundRoot.js","../src/Playground.js"],"sourcesContent":["import { useEffect } from 'preact/hooks';\r\n\r\nexport function Modal(props) {\r\n\r\n  useEffect(() => {\r\n    function handleKey(event) {\r\n\r\n      if (event.key === 'Escape') {\r\n        event.stopPropagation();\r\n\r\n        props.onClose();\r\n      }\r\n    }\r\n\r\n    document.addEventListener('keydown', handleKey);\r\n\r\n    return () => {\r\n      document.removeEventListener('keydown', handleKey);\r\n    };\r\n  });\r\n\r\n  return (\r\n    <div class=\"fjs-pgl-modal\">\r\n      <div class=\"fjs-pgl-modal-backdrop\" onClick={ props.onClose }></div>\r\n      <div class=\"fjs-pgl-modal-content\">\r\n        <h1 class=\"fjs-pgl-modal-header\">{ props.name }</h1>\r\n        <div class=\"fjs-pgl-modal-body\">\r\n          { props.children }\r\n        </div>\r\n        <div class=\"fjs-pgl-modal-footer\">\r\n          <button class=\"fjs-pgl-button fjs-pgl-button-default\" onClick={ props.onClose }>Close</button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n","import { useEffect, useRef } from 'preact/hooks';\r\n\r\nimport { Modal } from './Modal';\r\n\r\n\r\nexport function EmbedModal(props) {\r\n\r\n  const schema = serializeValue(props.schema);\r\n  const data = serializeValue(props.data || {});\r\n\r\n  const fieldRef = useRef();\r\n\r\n  const snippet = `<!-- styles needed for rendering -->\r\n<link rel=\"stylesheet\" href=\"https://unpkg.com/@bpmn-io/form-js@0.2.4/dist/assets/form-js.css\">\r\n\r\n<!-- container to render the form into -->\r\n<div class=\"fjs-pgl-form-container\"></div>\r\n\r\n<!-- scripts needed for embedding -->\r\n<script src=\"https://unpkg.com/@bpmn-io/form-js@0.2.4/dist/form-viewer.umd.js\"></script>\r\n\r\n<!-- actual script to instantiate the form and load form schema + data -->\r\n<script>\r\n  const data = JSON.parse(${data});\r\n  const schema = JSON.parse(${schema});\r\n\r\n  const form = new FormViewer.Form({\r\n    container: document.querySelector(\".fjs-pgl-form-container\")\r\n  });\r\n\r\n  form.on(\"submit\", (event) => {\r\n    console.log(event.data, event.errors);\r\n  });\r\n\r\n  form.importSchema(schema, data).catch(err => {\r\n    console.error(\"Failed to render form\", err);\r\n  });\r\n</script>\r\n  `.trim();\r\n\r\n  useEffect(() => {\r\n    fieldRef.current.select();\r\n  });\r\n\r\n  return (\r\n    <Modal name=\"Embed form\" onClose={ props.onClose }>\r\n      <p>Use the following HTML snippet to embed your form with <a href=\"https://github.com/bpmn-io/form-js\">form-js</a>:</p>\r\n\r\n      <textarea spellCheck=\"false\" ref={ fieldRef }>{snippet}</textarea>\r\n    </Modal>\r\n  );\r\n}\r\n\r\n\r\n// helpers ///////////\r\n\r\nfunction serializeValue(obj) {\r\n  return JSON.stringify(JSON.stringify(obj)).replace(/</g, '&lt;').replace(/>/g, '&gt;');\r\n}","import mitt from 'mitt';\r\n\r\nimport { basicSetup } from 'codemirror';\r\nimport { EditorView } from '@codemirror/view';\r\nimport { EditorState, Compartment } from '@codemirror/state';\r\nimport { lintGutter, linter } from '@codemirror/lint';\r\nimport { json, jsonParseLinter } from '@codemirror/lang-json';\r\n\r\n\r\nexport function JSONEditor(options = {}) {\r\n\r\n  const emitter = mitt();\r\n\r\n  const {\r\n    readonly = false\r\n  } = options;\r\n\r\n  let language = new Compartment().of(json());\r\n  let tabSize = new Compartment().of(EditorState.tabSize.of(2));\r\n\r\n  const linterExtension = linter(jsonParseLinter());\r\n\r\n  function createState(doc, extensions = []) {\r\n    return EditorState.create({\r\n      doc,\r\n      extensions: [\r\n        basicSetup,\r\n        language,\r\n        tabSize,\r\n        linterExtension,\r\n        lintGutter(),\r\n        ...extensions\r\n      ]\r\n    });\r\n  }\r\n\r\n  function createView(readonly) {\r\n\r\n    const updateListener = EditorView.updateListener.of(update => {\r\n      if (update.docChanged) {\r\n        emitter.emit('changed', {\r\n          value: update.view.state.doc.toString()\r\n        });\r\n      }\r\n    });\r\n\r\n    const editable = EditorView.editable.of(!readonly);\r\n\r\n    const view = new EditorView({\r\n      state: createState('', [ updateListener, editable ])\r\n    });\r\n\r\n    view.setValue = function(value) {\r\n      this.setState(createState(value, [ updateListener, editable ]));\r\n    };\r\n\r\n    return view;\r\n  }\r\n\r\n  const view = createView(readonly);\r\n\r\n  this.setValue = function(value) {\r\n    view.setValue(value);\r\n  };\r\n\r\n  this.getValue = function() {\r\n    return view.state.doc.toString();\r\n  };\r\n\r\n  this.on = emitter.on;\r\n  this.off = emitter.off;\r\n  this.emit = emitter.emit;\r\n\r\n  this.attachTo = function(container) {\r\n    container.appendChild(view.dom);\r\n  };\r\n\r\n  this.destroy = function() {\r\n    if (view.dom.parentNode) {\r\n      view.dom.parentNode.removeChild(view.dom);\r\n    }\r\n\r\n    view.destroy();\r\n  };\r\n}\r\n","export function Section(props) {\r\n\r\n  const elements =\r\n    Array.isArray(props.children)\r\n      ? props.children :\r\n      [ props.children ];\r\n\r\n  const {\r\n    headerItems,\r\n    children\r\n  } = elements.reduce((_, child) => {\r\n    const bucket =\r\n      child.type === Section.HeaderItem\r\n        ? _.headerItems\r\n        : _.children;\r\n\r\n    bucket.push(child);\r\n\r\n    return _;\r\n  }, { headerItems: [], children: [] });\r\n\r\n  return (\r\n    <div class=\"fjs-pgl-section\">\r\n      <h1 class=\"header\">{ props.name } { headerItems.length ? <span class=\"header-items\">{ headerItems }</span> : null }</h1>\r\n      <div class=\"body\">\r\n        { children }\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n\r\nSection.HeaderItem = function(props) {\r\n  return props.children;\r\n};","import { useRef, useEffect, useState, useCallback } from 'preact/hooks';\r\n\r\nimport download from 'downloadjs';\r\n\r\nimport classNames from 'classnames';\r\n\r\nimport {\r\n  Form\r\n} from '@bpmn-io/form-js-viewer';\r\n\r\nimport {\r\n  FormEditor\r\n} from '@bpmn-io/form-js-editor';\r\n\r\nimport { EmbedModal } from './EmbedModal';\r\nimport { JSONEditor } from './JSONEditor';\r\nimport { Section } from './Section';\r\n\r\n\r\nimport './FileDrop.css';\r\nimport './PlaygroundRoot.css';\r\n\r\n\r\nexport function PlaygroundRoot(props) {\r\n\r\n  const {\r\n    actions: actionsConfig = {},\r\n    editor: editorConfig = {},\r\n    emit,\r\n    exporter: exporterConfig = {}\r\n  } = props;\r\n\r\n  const {\r\n    display: displayActions = true\r\n  } = actionsConfig;\r\n\r\n  const {\r\n    inlinePropertiesPanel = true\r\n  } = editorConfig;\r\n\r\n  const paletteContainerRef = useRef();\r\n  const editorContainerRef = useRef();\r\n  const formContainerRef = useRef();\r\n  const dataContainerRef = useRef();\r\n  const resultContainerRef = useRef();\r\n  const propertiesPanelContainerRef = useRef();\r\n\r\n  const paletteRef = useRef();\r\n  const formEditorRef = useRef();\r\n  const formRef = useRef();\r\n  const dataEditorRef = useRef();\r\n  const resultViewRef = useRef();\r\n  const propertiesPanelRef = useRef();\r\n\r\n  const [ showEmbed, setShowEmbed ] = useState(false);\r\n\r\n  const [ initialData ] = useState(props.data || {});\r\n  const [ initialSchema, setInitialSchema ] = useState(props.schema);\r\n\r\n  const [ data, setData ] = useState(props.data || {});\r\n  const [ schema, setSchema ] = useState(props.schema);\r\n\r\n  const [ resultData, setResultData ] = useState({});\r\n\r\n  // pipe to playground API\r\n  useEffect(() => {\r\n    props.onInit({\r\n      attachDataContainer: (node) => dataEditorRef.current.attachTo(node),\r\n      attachEditorContainer: (node) => formEditorRef.current.attachTo(node),\r\n      attachFormContainer: (node) => formRef.current.attachTo(node),\r\n      attachPaletteContainer: (node) => paletteRef.current.attachTo(node),\r\n      attachPropertiesPanelContainer: (node) => propertiesPanelRef.current.attachTo(node),\r\n      attachResultContainer: (node) => resultViewRef.current.attachTo(node),\r\n      get: (name, strict) => formEditorRef.current.get(name, strict),\r\n      getDataEditor: () => dataEditorRef.current,\r\n      getEditor: () => formEditorRef.current,\r\n      getForm: () => formRef.current,\r\n      getResultView: () => resultViewRef.current,\r\n      getSchema: () => formEditorRef.current.getSchema(),\r\n      setSchema: setInitialSchema,\r\n      saveSchema: () => formEditorRef.current.saveSchema()\r\n    });\r\n  });\r\n\r\n  useEffect(() => {\r\n    setInitialSchema(props.schema || {});\r\n  }, [ props.schema ]);\r\n\r\n  useEffect(() => {\r\n    const dataEditor = dataEditorRef.current = new JSONEditor({\r\n      value: toJSON(data)\r\n    });\r\n\r\n    const resultView = resultViewRef.current = new JSONEditor({\r\n      readonly: true,\r\n      value: toJSON(resultData)\r\n    });\r\n\r\n    const form = formRef.current = new Form();\r\n    const formEditor = formEditorRef.current = new FormEditor({\r\n      renderer: {\r\n        compact: true\r\n      },\r\n      palette: {\r\n        parent: paletteContainerRef.current\r\n      },\r\n      propertiesPanel: {\r\n        parent: !inlinePropertiesPanel && propertiesPanelContainerRef.current\r\n      },\r\n      exporter: exporterConfig\r\n    });\r\n\r\n    paletteRef.current = formEditor.get('palette');\r\n    propertiesPanelRef.current = formEditor.get('propertiesPanel');\r\n\r\n    formEditor.on('changed', () => {\r\n      setSchema(formEditor.getSchema());\r\n    });\r\n\r\n    formEditor.on('formEditor.rendered', () => {\r\n\r\n      // notifiy interested parties after render\r\n      emit('formPlayground.rendered');\r\n    });\r\n\r\n    form.on('changed', () => {\r\n      setResultData(form._getSubmitData());\r\n    });\r\n\r\n    dataEditor.on('changed', event => {\r\n      try {\r\n        setData(JSON.parse(event.value));\r\n      } catch (error) {\r\n\r\n        // notify interested about input data error\r\n        emit('formPlayground.inputDataError', error);\r\n      }\r\n    });\r\n\r\n    const formContainer = formContainerRef.current;\r\n    const editorContainer = editorContainerRef.current;\r\n    const dataContainer = dataContainerRef.current;\r\n    const resultContainer = resultContainerRef.current;\r\n\r\n    dataEditor.attachTo(dataContainer);\r\n    resultView.attachTo(resultContainer);\r\n    form.attachTo(formContainer);\r\n    formEditor.attachTo(editorContainer);\r\n\r\n    return () => {\r\n      dataEditor.destroy();\r\n      resultView.destroy();\r\n      form.destroy();\r\n      formEditor.destroy();\r\n    };\r\n  }, []);\r\n\r\n  useEffect(() => {\r\n    dataEditorRef.current.setValue(toJSON(initialData));\r\n  }, [ initialData ]);\r\n\r\n  useEffect(() => {\r\n    initialSchema && formEditorRef.current.importSchema(initialSchema);\r\n  }, [ initialSchema ]);\r\n\r\n  useEffect(() => {\r\n    schema && formRef.current.importSchema(schema, data);\r\n  }, [ schema, data ]);\r\n\r\n  useEffect(() => {\r\n    resultViewRef.current.setValue(toJSON(resultData));\r\n  }, [ resultData ]);\r\n\r\n  useEffect(() => {\r\n    props.onStateChanged({\r\n      schema,\r\n      data\r\n    });\r\n  }, [ schema, data ]);\r\n\r\n  const handleDownload = useCallback(() => {\r\n\r\n    download(JSON.stringify(schema, null, '  '), 'form.json', 'text/json');\r\n  }, [ schema ]);\r\n\r\n  const hideEmbedModal = useCallback(() => {\r\n    setShowEmbed(false);\r\n  }, []);\r\n\r\n  const showEmbedModal = useCallback(() => {\r\n    setShowEmbed(true);\r\n  }, []);\r\n\r\n  return (\r\n    <div class={ classNames(\r\n      'fjs-container',\r\n      'fjs-pgl-root',\r\n      { 'fjs-pgl-inline-editor-panel': inlinePropertiesPanel }) }>\r\n      <div class=\"fjs-pgl-modals\">\r\n        { showEmbed ? <EmbedModal schema={ schema } data={ data } onClose={ hideEmbedModal } /> : null }\r\n      </div>\r\n      <div class=\"fjs-pgl-palette-container\" ref={ paletteContainerRef } />\r\n      <div class=\"fjs-pgl-main\">\r\n\r\n        <Section name=\"Form Definition\">\r\n\r\n          {\r\n            displayActions && <Section.HeaderItem>\r\n              <button\r\n                class=\"fjs-pgl-button\"\r\n                title=\"Download form definition\"\r\n                onClick={ handleDownload }\r\n              >Download</button>\r\n            </Section.HeaderItem>\r\n          }\r\n\r\n          {\r\n            displayActions && <Section.HeaderItem>\r\n              <button\r\n                class=\"fjs-pgl-button\"\r\n                onClick={ showEmbedModal }\r\n              >Embed</button>\r\n            </Section.HeaderItem>\r\n          }\r\n\r\n          <div ref={ editorContainerRef } class=\"fjs-pgl-form-container\"></div>\r\n        </Section>\r\n        <Section name=\"Form Preview\">\r\n          <div ref={ formContainerRef } class=\"fjs-pgl-form-container\"></div>\r\n        </Section>\r\n        <Section name=\"Form Data (Input)\">\r\n          <div ref={ dataContainerRef } class=\"fjs-pgl-text-container\"></div>\r\n        </Section>\r\n        <Section name=\"Form Data (Submit)\">\r\n          <div ref={ resultContainerRef } class=\"fjs-pgl-text-container\"></div>\r\n        </Section>\r\n      </div>\r\n      <div class=\"fjs-pgl-properties-container\" ref={ propertiesPanelContainerRef } />\r\n    </div>\r\n  );\r\n}\r\n\r\n\r\n// helpers ///////////////\r\n\r\nfunction toJSON(obj) {\r\n  return JSON.stringify(obj, null, '  ');\r\n}","import { render } from 'preact';\r\n\r\nimport fileDrop from 'file-drops';\r\n\r\nimport mitt from 'mitt';\r\n\r\nimport { PlaygroundRoot } from './components/PlaygroundRoot';\r\n\r\n/**\r\n * @typedef { {\r\n *  actions?: { display: Boolean }\r\n *  container?: Element\r\n *  data: any\r\n *  editor?: { inlinePropertiesPanel: Boolean }\r\n *  exporter?: { name: String, version: String }\r\n *  schema: any\r\n * } } FormPlaygroundOptions\r\n */\r\n\r\n/**\r\n * @param {FormPlaygroundOptions} options\r\n */\r\nexport default function Playground(options) {\r\n\r\n  const {\r\n    container: parent,\r\n    schema,\r\n    data,\r\n    ...rest\r\n  } = options;\r\n\r\n  const emitter = mitt();\r\n\r\n  let state = { data, schema };\r\n  let ref;\r\n\r\n  const container = document.createElement('div');\r\n\r\n  container.classList.add('fjs-pgl-parent');\r\n\r\n  if (parent) {\r\n    parent.appendChild(container);\r\n  }\r\n\r\n  const handleDrop = fileDrop('Drop a form file', function(files) {\r\n    const file = files[0];\r\n\r\n    if (file) {\r\n      try {\r\n        ref.setSchema(JSON.parse(file.contents));\r\n      } catch (err) {\r\n\r\n        // TODO(nikku): indicate JSON parse error\r\n      }\r\n    }\r\n  });\r\n\r\n  const withRef = function(fn) {\r\n    return function(...args) {\r\n      if (!ref) {\r\n        throw new Error('Playground is not initialized.');\r\n      }\r\n\r\n      return fn(...args);\r\n    };\r\n  };\r\n\r\n  const onInit = function(_ref) {\r\n    ref = _ref;\r\n    emitter.emit('formPlayground.init');\r\n  };\r\n\r\n  container.addEventListener('dragover', handleDrop);\r\n\r\n  render(\r\n    <PlaygroundRoot\r\n      data={ data }\r\n      emit={ emitter.emit }\r\n      onInit={ onInit }\r\n      onStateChanged={ (_state) => state = _state }\r\n      schema={ schema }\r\n      { ...rest }\r\n    />,\r\n    container\r\n  );\r\n\r\n  this.on = emitter.on;\r\n  this.off = emitter.off;\r\n\r\n  this.emit = emitter.emit;\r\n\r\n  this.on('destroy', function() {\r\n    render(null, container);\r\n  });\r\n\r\n  this.on('destroy', function() {\r\n    parent.removeChild(container);\r\n  });\r\n\r\n  this.getState = function() {\r\n    return state;\r\n  };\r\n\r\n  this.getSchema = withRef(() => ref.getSchema());\r\n\r\n  this.setSchema = withRef((schema) => ref.setSchema(schema));\r\n\r\n  this.saveSchema = withRef(() => ref.saveSchema());\r\n\r\n  this.get = withRef((name, strict) => ref.get(name, strict));\r\n\r\n  this.getDataEditor = withRef(() => ref.getDataEditor());\r\n\r\n  this.getEditor = withRef(() => ref.getEditor());\r\n\r\n  this.getForm = withRef((name, strict) => ref.getForm(name, strict));\r\n\r\n  this.getResultView = withRef(() => ref.getResultView());\r\n\r\n  this.destroy = function() {\r\n    this.emit('destroy');\r\n  };\r\n\r\n  this.attachEditorContainer = withRef((node) => ref.attachEditorContainer(node));\r\n\r\n  this.attachPreviewContainer = withRef((node) => ref.attachFormContainer(node));\r\n\r\n  this.attachDataContainer = withRef((node) => ref.attachDataContainer(node));\r\n\r\n  this.attachResultContainer = withRef((node) => ref.attachResultContainer(node));\r\n\r\n  this.attachPaletteContainer = withRef((node) => ref.attachPaletteContainer(node));\r\n\r\n  this.attachPropertiesPanelContainer = withRef((node) => ref.attachPropertiesPanelContainer(node));\r\n}"],"names":["Modal","props","useEffect","handleKey","event","key","stopPropagation","onClose","document","addEventListener","removeEventListener","_jsxs","_jsx","name","children","EmbedModal","schema","serializeValue","data","fieldRef","useRef","snippet","trim","current","select","obj","JSON","stringify","replace","JSONEditor","options","emitter","mitt","readonly","language","Compartment","of","json","tabSize","EditorState","linterExtension","linter","jsonParseLinter","createState","doc","extensions","create","basicSetup","lintGutter","createView","updateListener","EditorView","update","docChanged","emit","value","view","state","toString","editable","setValue","setState","getValue","on","off","attachTo","container","appendChild","dom","destroy","parentNode","removeChild","Section","elements","Array","isArray","headerItems","reduce","_","child","bucket","type","HeaderItem","push","length","PlaygroundRoot","actions","actionsConfig","editor","editorConfig","exporter","exporterConfig","display","displayActions","inlinePropertiesPanel","paletteContainerRef","editorContainerRef","formContainerRef","dataContainerRef","resultContainerRef","propertiesPanelContainerRef","paletteRef","formEditorRef","formRef","dataEditorRef","resultViewRef","propertiesPanelRef","showEmbed","setShowEmbed","useState","initialData","initialSchema","setInitialSchema","setData","setSchema","resultData","setResultData","onInit","attachDataContainer","node","attachEditorContainer","attachFormContainer","attachPaletteContainer","attachPropertiesPanelContainer","attachResultContainer","get","strict","getDataEditor","getEditor","getForm","getResultView","getSchema","saveSchema","dataEditor","toJSON","resultView","form","Form","formEditor","FormEditor","renderer","compact","palette","parent","propertiesPanel","_getSubmitData","parse","error","formContainer","editorContainer","dataContainer","resultContainer","importSchema","onStateChanged","handleDownload","useCallback","download","hideEmbedModal","showEmbedModal","classNames","Playground","rest","ref","createElement","classList","add","handleDrop","fileDrop","files","file","contents","err","withRef","fn","args","Error","_ref","render","_state","getState","attachPreviewContainer"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../src/components/Modal.js","../src/components/EmbedModal.js","../src/components/autocompletion/VariablesFacet.js","../src/components/autocompletion/index.js","../src/components/JSONEditor.js","../src/components/Section.js","../src/components/PlaygroundRoot.js","../src/Playground.js"],"sourcesContent":["import { useEffect } from 'preact/hooks';\n\nexport function Modal(props) {\n\n  useEffect(() => {\n    function handleKey(event) {\n\n      if (event.key === 'Escape') {\n        event.stopPropagation();\n\n        props.onClose();\n      }\n    }\n\n    document.addEventListener('keydown', handleKey);\n\n    return () => {\n      document.removeEventListener('keydown', handleKey);\n    };\n  });\n\n  return (\n    <div class=\"fjs-pgl-modal\">\n      <div class=\"fjs-pgl-modal-backdrop\" onClick={ props.onClose }></div>\n      <div class=\"fjs-pgl-modal-content\">\n        <h1 class=\"fjs-pgl-modal-header\">{ props.name }</h1>\n        <div class=\"fjs-pgl-modal-body\">\n          { props.children }\n        </div>\n        <div class=\"fjs-pgl-modal-footer\">\n          <button class=\"fjs-pgl-button fjs-pgl-button-default\" onClick={ props.onClose }>Close</button>\n        </div>\n      </div>\n    </div>\n  );\n}\n","import { useEffect, useRef } from 'preact/hooks';\n\nimport { Modal } from './Modal';\n\n\nexport function EmbedModal(props) {\n\n  const schema = serializeValue(props.schema);\n  const data = serializeValue(props.data || {});\n\n  const fieldRef = useRef();\n\n  const snippet = `<!-- styles needed for rendering -->\n<link rel=\"stylesheet\" href=\"https://unpkg.com/@bpmn-io/form-js@0.2.4/dist/assets/form-js.css\">\n\n<!-- container to render the form into -->\n<div class=\"fjs-pgl-form-container\"></div>\n\n<!-- scripts needed for embedding -->\n<script src=\"https://unpkg.com/@bpmn-io/form-js@0.2.4/dist/form-viewer.umd.js\"></script>\n\n<!-- actual script to instantiate the form and load form schema + data -->\n<script>\n  const data = JSON.parse(${data});\n  const schema = JSON.parse(${schema});\n\n  const form = new FormViewer.Form({\n    container: document.querySelector(\".fjs-pgl-form-container\")\n  });\n\n  form.on(\"submit\", (event) => {\n    console.log(event.data, event.errors);\n  });\n\n  form.importSchema(schema, data).catch(err => {\n    console.error(\"Failed to render form\", err);\n  });\n</script>\n  `.trim();\n\n  useEffect(() => {\n    fieldRef.current.select();\n  });\n\n  return (\n    <Modal name=\"Embed form\" onClose={ props.onClose }>\n      <p>Use the following HTML snippet to embed your form with <a href=\"https://github.com/bpmn-io/form-js\">form-js</a>:</p>\n\n      <textarea spellCheck=\"false\" ref={ fieldRef }>{snippet}</textarea>\n    </Modal>\n  );\n}\n\n\n// helpers ///////////\n\nfunction serializeValue(obj) {\n  return JSON.stringify(JSON.stringify(obj)).replace(/</g, '&lt;').replace(/>/g, '&gt;');\n}","import { Facet } from '@codemirror/state';\n\n/**\n * @type {Facet<import('..').Variables>} Variables\n */\nexport const variablesFacet = Facet.define();","import { autocompletion } from '@codemirror/autocomplete';\n\nimport { syntaxTree } from '@codemirror/language';\n\nimport { variablesFacet } from './VariablesFacet';\n\nexport default function() {\n  return [\n    autocompletion({\n      override: [\n        completions\n      ]\n    })\n  ];\n}\n\nfunction completions(context) {\n\n  const variables = context.state.facet(variablesFacet)[0];\n\n  const options = variables.map(v => ({\n    label: v,\n    type: 'variable'\n  }));\n\n  let nodeBefore = syntaxTree(context.state).resolve(context.pos, -1);\n\n  // handle inside property name as explicit call\n  if (nodeBefore.type.name === 'PropertyName') {\n    context.explicit = true;\n  }\n\n  let word = context.matchBefore(/\\w*/);\n\n  if (word.from == word.to && !context.explicit) {\n    return null;\n  }\n\n  return {\n    from: word.from,\n    options\n  };\n}","import mitt from 'mitt';\n\nimport { basicSetup } from 'codemirror';\nimport { EditorView, keymap } from '@codemirror/view';\nimport { EditorState, Compartment } from '@codemirror/state';\nimport { lintGutter, linter } from '@codemirror/lint';\nimport { json, jsonParseLinter } from '@codemirror/lang-json';\nimport { indentWithTab } from '@codemirror/commands';\n\nimport autocompletion from './autocompletion/index';\nimport { variablesFacet } from './autocompletion/VariablesFacet';\n\n\nexport function JSONEditor(options = {}) {\n  const {\n    readonly = false\n  } = options;\n\n  const emitter = mitt();\n\n  let language = new Compartment().of(json());\n  let tabSize = new Compartment().of(EditorState.tabSize.of(2));\n\n\n  /**\n   * @typedef {Array<string>} Variables\n   */\n\n  const autocompletionConf = new Compartment();\n\n  const linterExtension = linter(jsonParseLinter());\n\n  function createState(doc, extensions = [], variables = []) {\n    return EditorState.create({\n      doc,\n      extensions: [\n        basicSetup,\n        language,\n        tabSize,\n        linterExtension,\n        lintGutter(),\n        autocompletionConf.of(variablesFacet.of(variables)),\n        autocompletion(),\n        keymap.of([ indentWithTab ]),\n        ...extensions\n      ]\n    });\n  }\n\n  function createView(readonly) {\n\n    const updateListener = EditorView.updateListener.of(update => {\n      if (update.docChanged) {\n        emitter.emit('changed', {\n          value: update.view.state.doc.toString()\n        });\n      }\n    });\n\n    const editable = EditorView.editable.of(!readonly);\n\n    const view = new EditorView({\n      state: createState('', [ updateListener, editable ])\n    });\n\n    view.setValue = function(value) {\n      this.setState(createState(value, [ updateListener, editable ]));\n    };\n\n    view.setVariables = function(variables) {\n      this.setState(createState(\n        view.state.doc.toString(),\n        [ updateListener, editable ],\n        variables\n      ));\n    };\n\n    return view;\n  }\n\n  const view = this._view = createView(readonly);\n\n  this.setValue = function(value) {\n    view.setValue(value);\n  };\n\n  this.getValue = function() {\n    return view.state.doc.toString();\n  };\n\n  /**\n   * @param {Variables} variables\n   */\n  this.setVariables = function(variables) {\n    view.setVariables(variables);\n  };\n\n  this.on = emitter.on;\n  this.off = emitter.off;\n  this.emit = emitter.emit;\n\n  this.attachTo = function(container) {\n    container.appendChild(view.dom);\n  };\n\n  this.destroy = function() {\n    if (view.dom.parentNode) {\n      view.dom.parentNode.removeChild(view.dom);\n    }\n\n    view.destroy();\n  };\n}\n","export function Section(props) {\n\n  const elements =\n    Array.isArray(props.children)\n      ? props.children :\n      [ props.children ];\n\n  const {\n    headerItems,\n    children\n  } = elements.reduce((_, child) => {\n    const bucket =\n      child.type === Section.HeaderItem\n        ? _.headerItems\n        : _.children;\n\n    bucket.push(child);\n\n    return _;\n  }, { headerItems: [], children: [] });\n\n  return (\n    <div class=\"fjs-pgl-section\">\n      <h1 class=\"header\">{ props.name } { headerItems.length ? <span class=\"header-items\">{ headerItems }</span> : null }</h1>\n      <div class=\"body\">\n        { children }\n      </div>\n    </div>\n  );\n}\n\nSection.HeaderItem = function(props) {\n  return props.children;\n};","import { useRef, useEffect, useState, useCallback } from 'preact/hooks';\n\nimport download from 'downloadjs';\n\nimport classNames from 'classnames';\n\nimport {\n  Form,\n  getSchemaVariables\n} from '@bpmn-io/form-js-viewer';\n\nimport {\n  FormEditor\n} from '@bpmn-io/form-js-editor';\n\nimport { EmbedModal } from './EmbedModal';\nimport { JSONEditor } from './JSONEditor';\nimport { Section } from './Section';\n\n\nimport './FileDrop.css';\nimport './PlaygroundRoot.css';\n\n\nexport function PlaygroundRoot(props) {\n\n  const {\n    actions: actionsConfig = {},\n    emit,\n    exporter: exporterConfig = {}\n  } = props;\n\n  const {\n    display: displayActions = true\n  } = actionsConfig;\n\n  const paletteContainerRef = useRef();\n  const editorContainerRef = useRef();\n  const formContainerRef = useRef();\n  const dataContainerRef = useRef();\n  const resultContainerRef = useRef();\n  const propertiesPanelContainerRef = useRef();\n\n  const paletteRef = useRef();\n  const formEditorRef = useRef();\n  const formRef = useRef();\n  const dataEditorRef = useRef();\n  const resultViewRef = useRef();\n  const propertiesPanelRef = useRef();\n\n  const [ showEmbed, setShowEmbed ] = useState(false);\n\n  const [ initialData ] = useState(props.data || {});\n  const [ initialSchema, setInitialSchema ] = useState(props.schema);\n\n  const [ data, setData ] = useState(props.data || {});\n  const [ schema, setSchema ] = useState(props.schema);\n\n  const [ resultData, setResultData ] = useState({});\n\n  // pipe to playground API\n  useEffect(() => {\n    props.onInit({\n      attachDataContainer: (node) => dataEditorRef.current.attachTo(node),\n      attachEditorContainer: (node) => formEditorRef.current.attachTo(node),\n      attachFormContainer: (node) => formRef.current.attachTo(node),\n      attachPaletteContainer: (node) => paletteRef.current.attachTo(node),\n      attachPropertiesPanelContainer: (node) => propertiesPanelRef.current.attachTo(node),\n      attachResultContainer: (node) => resultViewRef.current.attachTo(node),\n      get: (name, strict) => formEditorRef.current.get(name, strict),\n      getDataEditor: () => dataEditorRef.current,\n      getEditor: () => formEditorRef.current,\n      getForm: () => formRef.current,\n      getResultView: () => resultViewRef.current,\n      getSchema: () => formEditorRef.current.getSchema(),\n      setSchema: setInitialSchema,\n      saveSchema: () => formEditorRef.current.saveSchema()\n    });\n  });\n\n  useEffect(() => {\n    setInitialSchema(props.schema || {});\n  }, [ props.schema ]);\n\n  useEffect(() => {\n    const dataEditor = dataEditorRef.current = new JSONEditor({\n      value: toString(data)\n    });\n\n    const resultView = resultViewRef.current = new JSONEditor({\n      readonly: true,\n      value: toString(resultData)\n    });\n\n    const form = formRef.current = new Form();\n    const formEditor = formEditorRef.current = new FormEditor({\n      renderer: {\n        compact: true\n      },\n      palette: {\n        parent: paletteContainerRef.current\n      },\n      propertiesPanel: {\n        parent: propertiesPanelContainerRef.current\n      },\n      exporter: exporterConfig\n    });\n\n    paletteRef.current = formEditor.get('palette');\n    propertiesPanelRef.current = formEditor.get('propertiesPanel');\n\n    formEditor.on('changed', () => {\n      setSchema(formEditor.getSchema());\n    });\n\n    formEditor.on('formEditor.rendered', () => {\n\n      // notifiy interested parties after render\n      emit('formPlayground.rendered');\n    });\n\n    form.on('changed', () => {\n      setResultData(form._getSubmitData());\n    });\n\n    dataEditor.on('changed', event => {\n      try {\n        setData(JSON.parse(event.value));\n      } catch (error) {\n\n        // notify interested about input data error\n        emit('formPlayground.inputDataError', error);\n      }\n    });\n\n    const formContainer = formContainerRef.current;\n    const editorContainer = editorContainerRef.current;\n    const dataContainer = dataContainerRef.current;\n    const resultContainer = resultContainerRef.current;\n\n    dataEditor.attachTo(dataContainer);\n    resultView.attachTo(resultContainer);\n    form.attachTo(formContainer);\n    formEditor.attachTo(editorContainer);\n\n    return () => {\n      dataEditor.destroy();\n      resultView.destroy();\n      form.destroy();\n      formEditor.destroy();\n    };\n  }, []);\n\n  useEffect(() => {\n    dataEditorRef.current.setValue(toString(initialData));\n  }, [ initialData ]);\n\n  useEffect(() => {\n    if (initialSchema) {\n      formEditorRef.current.importSchema(initialSchema);\n      dataEditorRef.current.setVariables(getSchemaVariables(initialSchema));\n    }\n  }, [ initialSchema ]);\n\n  useEffect(() => {\n    if (schema && dataContainerRef.current) {\n      const variables = getSchemaVariables(schema);\n      dataEditorRef.current.setVariables(variables);\n    }\n  }, [ schema ]);\n\n  useEffect(() => {\n    schema && formRef.current.importSchema(schema, data);\n  }, [ schema, data ]);\n\n  useEffect(() => {\n    resultViewRef.current.setValue(toString(resultData));\n  }, [ resultData ]);\n\n  useEffect(() => {\n    props.onStateChanged({\n      schema,\n      data\n    });\n  }, [ schema, data ]);\n\n  const handleDownload = useCallback(() => {\n\n    download(JSON.stringify(schema, null, '  '), 'form.json', 'text/json');\n  }, [ schema ]);\n\n  const hideEmbedModal = useCallback(() => {\n    setShowEmbed(false);\n  }, []);\n\n  const showEmbedModal = useCallback(() => {\n    setShowEmbed(true);\n  }, []);\n\n  return (\n    <div class={ classNames(\n      'fjs-container',\n      'fjs-pgl-root'\n    ) }>\n      <div class=\"fjs-pgl-modals\">\n        { showEmbed ? <EmbedModal schema={ schema } data={ data } onClose={ hideEmbedModal } /> : null }\n      </div>\n      <div class=\"fjs-pgl-palette-container\" ref={ paletteContainerRef } />\n      <div class=\"fjs-pgl-main\">\n\n        <Section name=\"Form Definition\">\n\n          {\n            displayActions && <Section.HeaderItem>\n              <button\n                class=\"fjs-pgl-button\"\n                title=\"Download form definition\"\n                onClick={ handleDownload }\n              >Download</button>\n            </Section.HeaderItem>\n          }\n\n          {\n            displayActions && <Section.HeaderItem>\n              <button\n                class=\"fjs-pgl-button\"\n                onClick={ showEmbedModal }\n              >Embed</button>\n            </Section.HeaderItem>\n          }\n\n          <div ref={ editorContainerRef } class=\"fjs-pgl-form-container\"></div>\n        </Section>\n        <Section name=\"Form Preview\">\n          <div ref={ formContainerRef } class=\"fjs-pgl-form-container\"></div>\n        </Section>\n        <Section name=\"Form Input\">\n          <div ref={ dataContainerRef } class=\"fjs-pgl-text-container\"></div>\n        </Section>\n        <Section name=\"Form Output\">\n          <div ref={ resultContainerRef } class=\"fjs-pgl-text-container\"></div>\n        </Section>\n      </div>\n      <div class=\"fjs-pgl-properties-container\" ref={ propertiesPanelContainerRef } />\n    </div>\n  );\n}\n\n\n// helpers ///////////////\n\nfunction toString(obj) {\n  return JSON.stringify(obj, null, '  ');\n}","import { render } from 'preact';\n\nimport fileDrop from 'file-drops';\n\nimport mitt from 'mitt';\n\nimport { PlaygroundRoot } from './components/PlaygroundRoot';\n\n/**\n * @typedef { {\n *  actions?: { display: Boolean }\n *  container?: Element\n *  data: any\n *  editor?: { inlinePropertiesPanel: Boolean }\n *  exporter?: { name: String, version: String }\n *  schema: any\n * } } FormPlaygroundOptions\n */\n\n/**\n * @param {FormPlaygroundOptions} options\n */\nexport default function Playground(options) {\n\n  const {\n    container: parent,\n    schema,\n    data,\n    ...rest\n  } = options;\n\n  const emitter = mitt();\n\n  let state = { data, schema };\n  let ref;\n\n  const container = document.createElement('div');\n\n  container.classList.add('fjs-pgl-parent');\n\n  if (parent) {\n    parent.appendChild(container);\n  }\n\n  const handleDrop = fileDrop('Drop a form file', function(files) {\n    const file = files[0];\n\n    if (file) {\n      try {\n        ref.setSchema(JSON.parse(file.contents));\n      } catch (err) {\n\n        // TODO(nikku): indicate JSON parse error\n      }\n    }\n  });\n\n  const withRef = function(fn) {\n    return function(...args) {\n      if (!ref) {\n        throw new Error('Playground is not initialized.');\n      }\n\n      return fn(...args);\n    };\n  };\n\n  const onInit = function(_ref) {\n    ref = _ref;\n    emitter.emit('formPlayground.init');\n  };\n\n  container.addEventListener('dragover', handleDrop);\n\n  render(\n    <PlaygroundRoot\n      data={ data }\n      emit={ emitter.emit }\n      onInit={ onInit }\n      onStateChanged={ (_state) => state = _state }\n      schema={ schema }\n      { ...rest }\n    />,\n    container\n  );\n\n  this.on = emitter.on;\n  this.off = emitter.off;\n\n  this.emit = emitter.emit;\n\n  this.on('destroy', function() {\n    render(null, container);\n  });\n\n  this.on('destroy', function() {\n    parent.removeChild(container);\n  });\n\n  this.getState = function() {\n    return state;\n  };\n\n  this.getSchema = withRef(() => ref.getSchema());\n\n  this.setSchema = withRef((schema) => ref.setSchema(schema));\n\n  this.saveSchema = withRef(() => ref.saveSchema());\n\n  this.get = withRef((name, strict) => ref.get(name, strict));\n\n  this.getDataEditor = withRef(() => ref.getDataEditor());\n\n  this.getEditor = withRef(() => ref.getEditor());\n\n  this.getForm = withRef((name, strict) => ref.getForm(name, strict));\n\n  this.getResultView = withRef(() => ref.getResultView());\n\n  this.destroy = function() {\n    this.emit('destroy');\n  };\n\n  this.attachEditorContainer = withRef((node) => ref.attachEditorContainer(node));\n\n  this.attachPreviewContainer = withRef((node) => ref.attachFormContainer(node));\n\n  this.attachDataContainer = withRef((node) => ref.attachDataContainer(node));\n\n  this.attachResultContainer = withRef((node) => ref.attachResultContainer(node));\n\n  this.attachPaletteContainer = withRef((node) => ref.attachPaletteContainer(node));\n\n  this.attachPropertiesPanelContainer = withRef((node) => ref.attachPropertiesPanelContainer(node));\n}"],"names":["Modal","props","useEffect","handleKey","event","key","stopPropagation","onClose","document","addEventListener","removeEventListener","_jsxs","_jsx","name","children","EmbedModal","schema","serializeValue","data","fieldRef","useRef","snippet","trim","current","select","obj","JSON","stringify","replace","variablesFacet","Facet","define","autocompletion","override","completions","context","variables","state","facet","options","map","v","label","type","nodeBefore","syntaxTree","resolve","pos","explicit","word","matchBefore","from","to","JSONEditor","readonly","emitter","mitt","language","Compartment","of","json","tabSize","EditorState","autocompletionConf","linterExtension","linter","jsonParseLinter","createState","doc","extensions","create","basicSetup","lintGutter","keymap","indentWithTab","createView","updateListener","EditorView","update","docChanged","emit","value","view","toString","editable","setValue","setState","setVariables","_view","getValue","on","off","attachTo","container","appendChild","dom","destroy","parentNode","removeChild","Section","elements","Array","isArray","headerItems","reduce","_","child","bucket","HeaderItem","push","length","PlaygroundRoot","actions","actionsConfig","exporter","exporterConfig","display","displayActions","paletteContainerRef","editorContainerRef","formContainerRef","dataContainerRef","resultContainerRef","propertiesPanelContainerRef","paletteRef","formEditorRef","formRef","dataEditorRef","resultViewRef","propertiesPanelRef","showEmbed","setShowEmbed","useState","initialData","initialSchema","setInitialSchema","setData","setSchema","resultData","setResultData","onInit","attachDataContainer","node","attachEditorContainer","attachFormContainer","attachPaletteContainer","attachPropertiesPanelContainer","attachResultContainer","get","strict","getDataEditor","getEditor","getForm","getResultView","getSchema","saveSchema","dataEditor","resultView","form","Form","formEditor","FormEditor","renderer","compact","palette","parent","propertiesPanel","_getSubmitData","parse","error","formContainer","editorContainer","dataContainer","resultContainer","importSchema","getSchemaVariables","onStateChanged","handleDownload","useCallback","download","hideEmbedModal","showEmbedModal","classNames","Playground","rest","ref","createElement","classList","add","handleDrop","fileDrop","files","file","contents","err","withRef","fn","args","Error","_ref","render","_state","getState","attachPreviewContainer"],"mappings":"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"}

package/dist/index.es.js

@@ -4,14 +4,17 @@ import mitt from 'mitt';
 import { useEffect, useRef, useState, useCallback } from 'preact/hooks';
 import download from 'downloadjs';
 import classNames from 'classnames';
-import { Form } from '@bpmn-io/form-js-viewer';
+import { Form, getSchemaVariables } from '@bpmn-io/form-js-viewer';
 import { FormEditor } from '@bpmn-io/form-js-editor';
 import { jsxs, jsx } from 'preact/jsx-runtime';
 import { basicSetup } from 'codemirror';
-import { EditorView } from '@codemirror/view';
-import { Compartment, EditorState } from '@codemirror/state';
+import { EditorView, keymap } from '@codemirror/view';
+import { Facet, Compartment, EditorState } from '@codemirror/state';
 import { linter, lintGutter } from '@codemirror/lint';
 import { json, jsonParseLinter } from '@codemirror/lang-json';
+import { indentWithTab } from '@codemirror/commands';
+import { autocompletion as autocompletion$1 } from '@codemirror/autocomplete';
+import { syntaxTree } from '@codemirror/language';
 
 function Modal(props) {
   useEffect(() => {
@@ -107,18 +110,56 @@ function serializeValue(obj) {
   return JSON.stringify(JSON.stringify(obj)).replace(/</g, '&lt;').replace(/>/g, '&gt;');
 }
 
+/**
+ * @type {Facet<import('..').Variables>} Variables
+ */
+const variablesFacet = Facet.define();
+
+function autocompletion () {
+  return [autocompletion$1({
+    override: [completions]
+  })];
+}
+function completions(context) {
+  const variables = context.state.facet(variablesFacet)[0];
+  const options = variables.map(v => ({
+    label: v,
+    type: 'variable'
+  }));
+  let nodeBefore = syntaxTree(context.state).resolve(context.pos, -1);
+
+  // handle inside property name as explicit call
+  if (nodeBefore.type.name === 'PropertyName') {
+    context.explicit = true;
+  }
+  let word = context.matchBefore(/\w*/);
+  if (word.from == word.to && !context.explicit) {
+    return null;
+  }
+  return {
+    from: word.from,
+    options
+  };
+}
+
 function JSONEditor(options = {}) {
-  const emitter = mitt();
   const {
     readonly = false
   } = options;
+  const emitter = mitt();
   let language = new Compartment().of(json());
   let tabSize = new Compartment().of(EditorState.tabSize.of(2));
+
+  /**
+   * @typedef {Array<string>} Variables
+   */
+
+  const autocompletionConf = new Compartment();
   const linterExtension = linter(jsonParseLinter());
-  function createState(doc, extensions = []) {
+  function createState(doc, extensions = [], variables = []) {
     return EditorState.create({
       doc,
-      extensions: [basicSetup, language, tabSize, linterExtension, lintGutter(), ...extensions]
+      extensions: [basicSetup, language, tabSize, linterExtension, lintGutter(), autocompletionConf.of(variablesFacet.of(variables)), autocompletion(), keymap.of([indentWithTab]), ...extensions]
     });
   }
   function createView(readonly) {
@@ -136,15 +177,25 @@ function JSONEditor(options = {}) {
     view.setValue = function (value) {
       this.setState(createState(value, [updateListener, editable]));
     };
+    view.setVariables = function (variables) {
+      this.setState(createState(view.state.doc.toString(), [updateListener, editable], variables));
+    };
     return view;
   }
-  const view = createView(readonly);
+  const view = this._view = createView(readonly);
   this.setValue = function (value) {
     view.setValue(value);
   };
   this.getValue = function () {
     return view.state.doc.toString();
   };
+
+  /**
+   * @param {Variables} variables
+   */
+  this.setVariables = function (variables) {
+    view.setVariables(variables);
+  };
   this.on = emitter.on;
   this.off = emitter.off;
   this.emit = emitter.emit;
@@ -193,16 +244,12 @@ Section.HeaderItem = function (props) {
 function PlaygroundRoot(props) {
   const {
     actions: actionsConfig = {},
-    editor: editorConfig = {},
     emit,
     exporter: exporterConfig = {}
   } = props;
   const {
     display: displayActions = true
   } = actionsConfig;
-  const {
-    inlinePropertiesPanel = true
-  } = editorConfig;
   const paletteContainerRef = useRef();
   const editorContainerRef = useRef();
   const formContainerRef = useRef();
@@ -246,11 +293,11 @@ function PlaygroundRoot(props) {
   }, [props.schema]);
   useEffect(() => {
     const dataEditor = dataEditorRef.current = new JSONEditor({
-      value: toJSON(data)
+      value: toString(data)
     });
     const resultView = resultViewRef.current = new JSONEditor({
       readonly: true,
-      value: toJSON(resultData)
+      value: toString(resultData)
     });
     const form = formRef.current = new Form();
     const formEditor = formEditorRef.current = new FormEditor({
@@ -261,7 +308,7 @@ function PlaygroundRoot(props) {
         parent: paletteContainerRef.current
       },
       propertiesPanel: {
-        parent: !inlinePropertiesPanel && propertiesPanelContainerRef.current
+        parent: propertiesPanelContainerRef.current
       },
       exporter: exporterConfig
     });
@@ -301,16 +348,25 @@ function PlaygroundRoot(props) {
     };
   }, []);
   useEffect(() => {
-    dataEditorRef.current.setValue(toJSON(initialData));
+    dataEditorRef.current.setValue(toString(initialData));
   }, [initialData]);
   useEffect(() => {
-    initialSchema && formEditorRef.current.importSchema(initialSchema);
+    if (initialSchema) {
+      formEditorRef.current.importSchema(initialSchema);
+      dataEditorRef.current.setVariables(getSchemaVariables(initialSchema));
+    }
   }, [initialSchema]);
+  useEffect(() => {
+    if (schema && dataContainerRef.current) {
+      const variables = getSchemaVariables(schema);
+      dataEditorRef.current.setVariables(variables);
+    }
+  }, [schema]);
   useEffect(() => {
     schema && formRef.current.importSchema(schema, data);
   }, [schema, data]);
   useEffect(() => {
-    resultViewRef.current.setValue(toJSON(resultData));
+    resultViewRef.current.setValue(toString(resultData));
   }, [resultData]);
   useEffect(() => {
     props.onStateChanged({
@@ -328,9 +384,7 @@ function PlaygroundRoot(props) {
     setShowEmbed(true);
   }, []);
   return jsxs("div", {
-    class: classNames('fjs-container', 'fjs-pgl-root', {
-      'fjs-pgl-inline-editor-panel': inlinePropertiesPanel
-    }),
+    class: classNames('fjs-container', 'fjs-pgl-root'),
     children: [jsx("div", {
       class: "fjs-pgl-modals",
       children: showEmbed ? jsx(EmbedModal, {
@@ -369,13 +423,13 @@ function PlaygroundRoot(props) {
           class: "fjs-pgl-form-container"
         })
       }), jsx(Section, {
-        name: "Form Data (Input)",
+        name: "Form Input",
         children: jsx("div", {
           ref: dataContainerRef,
           class: "fjs-pgl-text-container"
         })
       }), jsx(Section, {
-        name: "Form Data (Submit)",
+        name: "Form Output",
         children: jsx("div", {
           ref: resultContainerRef,
           class: "fjs-pgl-text-container"
@@ -390,7 +444,7 @@ function PlaygroundRoot(props) {
 
 // helpers ///////////////
 
-function toJSON(obj) {
+function toString(obj) {
   return JSON.stringify(obj, null, '  ');
 }