@bpmn-io/form-js-playground 0.8.0-alpha.1 → 0.8.0

package/dist/index.cjs

@@ -7,9 +7,12 @@ var fileDrop = require('file-drops');
 var mitt = require('mitt');
 var hooks = require('preact/hooks');
 var download = require('downloadjs');
-var formJs = require('@bpmn-io/form-js');
+var classNames = require('classnames');
+var formJsViewer = require('@bpmn-io/form-js-viewer');
+var formJsEditor = require('@bpmn-io/form-js-editor');
 var jsxRuntime = require('preact/jsx-runtime');
-var basicSetup = require('@codemirror/basic-setup');
+var codemirror = require('codemirror');
+var view = require('@codemirror/view');
 var state = require('@codemirror/state');
 var langJson = require('@codemirror/lang-json');
 
@@ -18,6 +21,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var fileDrop__default = /*#__PURE__*/_interopDefaultLegacy(fileDrop);
 var mitt__default = /*#__PURE__*/_interopDefaultLegacy(mitt);
 var download__default = /*#__PURE__*/_interopDefaultLegacy(download);
+var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
 
 function Modal(props) {
   hooks.useEffect(() => {
@@ -123,53 +127,53 @@ function JSONEditor(options = {}) {
   function createState(doc, extensions = []) {
     return state.EditorState.create({
       doc,
-      extensions: [basicSetup.basicSetup, language, tabSize, ...extensions]
+      extensions: [codemirror.basicSetup, language, tabSize, ...extensions]
     });
   }
 
   function createView(readonly) {
-    const updateListener = basicSetup.EditorView.updateListener.of(update => {
+    const updateListener = view.EditorView.updateListener.of(update => {
       if (update.docChanged) {
         emitter.emit('changed', {
           value: update.view.state.doc.toString()
         });
       }
     });
-    const editable = basicSetup.EditorView.editable.of(!readonly);
-    const view = new basicSetup.EditorView({
+    const editable = view.EditorView.editable.of(!readonly);
+    const view$1 = new view.EditorView({
       state: createState('', [updateListener, editable])
     });
 
-    view.setValue = function (value) {
+    view$1.setValue = function (value) {
       this.setState(createState(value, [updateListener, editable]));
     };
 
-    return view;
+    return view$1;
   }
 
-  const view = createView(readonly);
+  const view$1 = createView(readonly);
 
   this.setValue = function (value) {
-    view.setValue(value);
+    view$1.setValue(value);
   };
 
   this.getValue = function () {
-    return view.state.doc.toString();
+    return view$1.state.doc.toString();
   };
 
   this.on = emitter.on;
   this.off = emitter.off;
 
   this.attachTo = function (container) {
-    container.appendChild(view.dom);
+    container.appendChild(view$1.dom);
   };
 
   this.destroy = function () {
-    if (view.dom.parentNode) {
-      view.dom.parentNode.removeChild(view.dom);
+    if (view$1.dom.parentNode) {
+      view$1.dom.parentNode.removeChild(view$1.dom);
     }
 
-    view.destroy();
+    view$1.destroy();
   };
 }
 
@@ -206,23 +210,45 @@ Section.HeaderItem = function (props) {
 };
 
 function PlaygroundRoot(props) {
+  const {
+    actions: actionsConfig = {},
+    editor: editorConfig = {},
+    emit
+  } = props;
+  const {
+    display: displayActions = true
+  } = actionsConfig;
+  const {
+    inlinePropertiesPanel = true
+  } = editorConfig;
   const paletteContainerRef = hooks.useRef();
   const editorContainerRef = hooks.useRef();
   const formContainerRef = hooks.useRef();
   const dataContainerRef = hooks.useRef();
   const resultContainerRef = hooks.useRef();
+  const propertiesPanelContainerRef = hooks.useRef();
+  const paletteRef = hooks.useRef();
   const formEditorRef = hooks.useRef();
   const formRef = hooks.useRef();
   const dataEditorRef = hooks.useRef();
   const resultViewRef = hooks.useRef();
+  const propertiesPanelRef = hooks.useRef();
   const [showEmbed, setShowEmbed] = hooks.useState(false);
   const [initialData] = hooks.useState(props.data || {});
   const [initialSchema, setInitialSchema] = hooks.useState(props.schema);
   const [data, setData] = hooks.useState(props.data || {});
   const [schema, setSchema] = hooks.useState(props.schema);
-  const [resultData, setResultData] = hooks.useState(props.data || {});
+  const [resultData, setResultData] = hooks.useState(props.data || {}); // pipe to playground API
+
   hooks.useEffect(() => {
     props.onInit({
+      attachDataContainer: node => dataEditorRef.current.attachTo(node),
+      attachEditorContainer: node => formEditorRef.current.attachTo(node),
+      attachFormContainer: node => formRef.current.attachTo(node),
+      attachPaletteContainer: node => paletteRef.current.attachTo(node),
+      attachPropertiesPanelContainer: node => propertiesPanelRef.current.attachTo(node),
+      attachResultContainer: node => resultViewRef.current.attachTo(node),
+      get: (name, strict) => formEditorRef.current.get(name, strict),
       setSchema: setInitialSchema
     });
   });
@@ -237,18 +263,27 @@ function PlaygroundRoot(props) {
       readonly: true,
       value: toJSON(resultData)
     });
-    const form = formRef.current = new formJs.Form();
-    const formEditor = formEditorRef.current = new formJs.FormEditor({
+    const form = formRef.current = new formJsViewer.Form();
+    const formEditor = formEditorRef.current = new formJsEditor.FormEditor({
       renderer: {
         compact: true
       },
       palette: {
         parent: paletteContainerRef.current
+      },
+      propertiesPanel: {
+        parent: !inlinePropertiesPanel && propertiesPanelContainerRef.current
       }
     });
+    paletteRef.current = formEditor.get('palette');
+    propertiesPanelRef.current = formEditor.get('propertiesPanel');
     formEditor.on('changed', () => {
       setSchema(formEditor.getSchema());
     });
+    formEditor.on('formEditor.rendered', () => {
+      // notifiy interested parties after render
+      emit('formPlayground.rendered');
+    });
     form.on('changed', event => {
       setResultData(event.data);
     });
@@ -301,7 +336,9 @@ function PlaygroundRoot(props) {
     setShowEmbed(true);
   }, []);
   return jsxRuntime.jsxs("div", {
-    class: "fjs-container fjs-pgl-root",
+    class: classNames__default['default']('fjs-container', 'fjs-pgl-root', {
+      'fjs-pgl-inline-editor-panel': inlinePropertiesPanel
+    }),
     children: [jsxRuntime.jsx("div", {
       class: "fjs-pgl-modals",
       children: showEmbed ? jsxRuntime.jsx(EmbedModal, {
@@ -316,14 +353,14 @@ function PlaygroundRoot(props) {
       class: "fjs-pgl-main",
       children: [jsxRuntime.jsxs(Section, {
         name: "Form Definition",
-        children: [jsxRuntime.jsx(Section.HeaderItem, {
+        children: [displayActions && jsxRuntime.jsx(Section.HeaderItem, {
           children: jsxRuntime.jsx("button", {
             class: "fjs-pgl-button",
             title: "Download form definition",
             onClick: handleDownload,
             children: "Download"
           })
-        }), jsxRuntime.jsx(Section.HeaderItem, {
+        }), displayActions && jsxRuntime.jsx(Section.HeaderItem, {
           children: jsxRuntime.jsx("button", {
             class: "fjs-pgl-button",
             onClick: showEmbedModal,
@@ -352,6 +389,9 @@ function PlaygroundRoot(props) {
           class: "fjs-pgl-text-container"
         })
       })]
+    }), jsxRuntime.jsx("div", {
+      class: "fjs-pgl-properties-container",
+      ref: propertiesPanelContainerRef
     })]
   });
 } // helpers ///////////////
@@ -364,7 +404,8 @@ function Playground(options) {
   const {
     container: parent,
     schema,
-    data
+    data,
+    ...rest
   } = options;
   const emitter = mitt__default['default']();
   let state = {
@@ -374,7 +415,11 @@ function Playground(options) {
   let ref;
   const container = document.createElement('div');
   container.classList.add('fjs-pgl-parent');
-  parent.appendChild(container);
+
+  if (parent) {
+    parent.appendChild(container);
+  }
+
   const handleDrop = fileDrop__default['default']('Drop a form file', function (files) {
     const file = files[0];
 
@@ -385,12 +430,25 @@ function Playground(options) {
       }
     }
   });
+
+  const withRef = function (fn) {
+    return function (...args) {
+      if (!ref) {
+        throw new Error('Playground is not initialized.');
+      }
+
+      fn(...args);
+    };
+  };
+
   container.addEventListener('dragover', handleDrop);
   preact.render(jsxRuntime.jsx(PlaygroundRoot, {
     schema: schema,
     data: data,
     onStateChanged: _state => state = _state,
-    onInit: _ref => ref = _ref
+    onInit: _ref => ref = _ref,
+    emit: emitter.emit,
+    ...rest
   }), container);
   this.on = emitter.on;
   this.off = emitter.off;
@@ -410,9 +468,32 @@ function Playground(options) {
     return ref.setSchema(schema);
   };
 
+  this.get = function (name, strict) {
+    return ref.get(name, strict);
+  };
+
   this.destroy = function () {
     this.emit('destroy');
   };
+
+  this.attachEditorContainer = withRef(function (node) {
+    return ref.attachEditorContainer(node);
+  });
+  this.attachPreviewContainer = withRef(function (node) {
+    return ref.attachFormContainer(node);
+  });
+  this.attachDataContainer = withRef(function (node) {
+    return ref.attachDataContainer(node);
+  });
+  this.attachResultContainer = withRef(function (node) {
+    return ref.attachResultContainer(node);
+  });
+  this.attachPaletteContainer = withRef(function (node) {
+    return ref.attachPaletteContainer(node);
+  });
+  this.attachPropertiesPanelContainer = withRef(function (node) {
+    return ref.attachPropertiesPanelContainer(node);
+  });
 }
 
 exports.Playground = Playground;

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';\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 mitt from 'mitt';\n\nimport { basicSetup, EditorView } from '@codemirror/basic-setup';\nimport { EditorState, Compartment } from '@codemirror/state';\nimport { json } from '@codemirror/lang-json';\n\n\nexport function JSONEditor(options = {}) {\n\n  const emitter = mitt();\n\n  const {\n    readonly = false\n  } = options;\n\n  let language = new Compartment().of(json());\n  let tabSize = new Compartment().of(EditorState.tabSize.of(2));\n\n  function createState(doc, extensions = []) {\n    return EditorState.create({\n      doc,\n      extensions: [\n        basicSetup,\n        language,\n        tabSize,\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    return view;\n  }\n\n  const 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  this.on = emitter.on;\n  this.off = emitter.off;\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 {\n  Form,\n  FormEditor\n} from '@bpmn-io/form-js';\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 paletteContainerRef = useRef();\n  const editorContainerRef = useRef();\n  const formContainerRef = useRef();\n  const dataContainerRef = useRef();\n  const resultContainerRef = useRef();\n\n  const formEditorRef = useRef();\n  const formRef = useRef();\n  const dataEditorRef = useRef();\n  const resultViewRef = 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(props.data || {});\n\n  useEffect(() => {\n    props.onInit({\n      setSchema: setInitialSchema\n    });\n  });\n\n  useEffect(() => {\n    setInitialSchema(props.schema || {});\n  }, [ props.schema ]);\n\n  useEffect(() => {\n    const dataEditor = dataEditorRef.current = new JSONEditor({\n      value: toJSON(data)\n    });\n\n    const resultView = resultViewRef.current = new JSONEditor({\n      readonly: true,\n      value: toJSON(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    });\n\n    formEditor.on('changed', () => {\n      setSchema(formEditor.getSchema());\n    });\n\n    form.on('changed', event => {\n      setResultData(event.data);\n    });\n\n    dataEditor.on('changed', event => {\n      try {\n        setData(JSON.parse(event.value));\n      } catch (err) {\n\n        // TODO(nikku): indicate JSON parse 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(toJSON(initialData));\n  }, [ initialData ]);\n\n  useEffect(() => {\n    formEditorRef.current.importSchema(initialSchema);\n  }, [ initialSchema ]);\n\n  useEffect(() => {\n    formRef.current.importSchema(schema, data);\n  }, [ schema, data ]);\n\n  useEffect(() => {\n    resultViewRef.current.setValue(toJSON(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=\"fjs-container fjs-pgl-root\">\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          <Section.HeaderItem>\n            <button\n              class=\"fjs-pgl-button\"\n              title=\"Download form definition\"\n              onClick={ handleDownload }\n            >Download</button>\n          </Section.HeaderItem>\n          <Section.HeaderItem>\n            <button\n              class=\"fjs-pgl-button\"\n              onClick={ showEmbedModal }\n            >Embed</button>\n          </Section.HeaderItem>\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 Data (Input)\">\n          <div ref={ dataContainerRef } class=\"fjs-pgl-text-container\"></div>\n        </Section>\n        <Section name=\"Form Data (Submit)\">\n          <div ref={ resultContainerRef } class=\"fjs-pgl-text-container\"></div>\n        </Section>\n      </div>\n    </div>\n  );\n}\n\n\n// helpers ///////////////\n\nfunction toJSON(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\nexport default function Playground(options) {\n\n  const {\n    container: parent,\n    schema,\n    data\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  parent.appendChild(container);\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  container.addEventListener('dragover', handleDrop);\n\n  render(\n    <PlaygroundRoot\n      schema={ schema }\n      data={ data }\n      onStateChanged={ (_state) => state = _state }\n      onInit={ _ref => ref = _ref }\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.setSchema = function(schema) {\n    return ref.setSchema(schema);\n  };\n\n  this.destroy = function() {\n    this.emit('destroy');\n  };\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","createState","doc","extensions","create","basicSetup","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","paletteContainerRef","editorContainerRef","formContainerRef","dataContainerRef","resultContainerRef","formEditorRef","formRef","dataEditorRef","resultViewRef","showEmbed","setShowEmbed","useState","initialData","initialSchema","setInitialSchema","setData","setSchema","resultData","setResultData","onInit","dataEditor","toJSON","resultView","form","Form","formEditor","FormEditor","renderer","compact","palette","parent","getSchema","parse","err","formContainer","editorContainer","dataContainer","resultContainer","importSchema","onStateChanged","handleDownload","useCallback","download","hideEmbedModal","showEmbedModal","Playground","ref","createElement","classList","add","handleDrop","fileDrop","files","file","contents","render","_state","_ref","getState"],"mappings":"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"}
+{"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 { json } 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  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        ...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\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  } = 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(props.data || {});\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      setSchema: setInitialSchema\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    });\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', event => {\r\n      setResultData(event.data);\r\n    });\r\n\r\n    dataEditor.on('changed', event => {\r\n      try {\r\n        setData(JSON.parse(event.value));\r\n      } catch (err) {\r\n\r\n        // TODO(nikku): indicate JSON parse 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    formEditorRef.current.importSchema(initialSchema);\r\n  }, [ initialSchema ]);\r\n\r\n  useEffect(() => {\r\n    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 *  container?: Element,\r\n *  schema: any,\r\n *  data: any,\r\n *  editor?: { inlinePropertiesPanel: Boolean }\r\n *  actions?: { display: Boolean }\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      fn(...args);\r\n    };\r\n  };\r\n\r\n  container.addEventListener('dragover', handleDrop);\r\n\r\n  render(\r\n    <PlaygroundRoot\r\n      schema={ schema }\r\n      data={ data }\r\n      onStateChanged={ (_state) => state = _state }\r\n      onInit={ _ref => ref = _ref }\r\n      emit={ emitter.emit }\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.setSchema = function(schema) {\r\n    return ref.setSchema(schema);\r\n  };\r\n\r\n  this.get = function(name, strict) {\r\n    return ref.get(name, strict);\r\n  };\r\n\r\n  this.destroy = function() {\r\n    this.emit('destroy');\r\n  };\r\n\r\n  this.attachEditorContainer = withRef(function(node) {\r\n    return ref.attachEditorContainer(node);\r\n  });\r\n\r\n  this.attachPreviewContainer = withRef(function(node) {\r\n    return ref.attachFormContainer(node);\r\n  });\r\n\r\n  this.attachDataContainer = withRef(function(node) {\r\n    return ref.attachDataContainer(node);\r\n  });\r\n\r\n  this.attachResultContainer = withRef(function(node) {\r\n    return ref.attachResultContainer(node);\r\n  });\r\n\r\n  this.attachPaletteContainer = withRef(function(node) {\r\n    return ref.attachPaletteContainer(node);\r\n  });\r\n\r\n  this.attachPropertiesPanelContainer = withRef(function(node) {\r\n    return ref.attachPropertiesPanelContainer(node);\r\n  });\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","createState","doc","extensions","create","basicSetup","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","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","dataEditor","toJSON","resultView","form","Form","formEditor","FormEditor","renderer","compact","palette","parent","propertiesPanel","getSchema","parse","err","formContainer","editorContainer","dataContainer","resultContainer","importSchema","onStateChanged","handleDownload","useCallback","download","hideEmbedModal","showEmbedModal","classNames","Playground","rest","ref","createElement","classList","add","handleDrop","fileDrop","files","file","contents","withRef","fn","args","Error","render","_state","_ref","getState","attachPreviewContainer"],"mappings":"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"}

package/dist/index.es.js

@@ -3,9 +3,12 @@ import fileDrop from 'file-drops';
 import mitt from 'mitt';
 import { useEffect, useRef, useState, useCallback } from 'preact/hooks';
 import download from 'downloadjs';
-import { Form, FormEditor } from '@bpmn-io/form-js';
+import classNames from 'classnames';
+import { Form } from '@bpmn-io/form-js-viewer';
+import { FormEditor } from '@bpmn-io/form-js-editor';
 import { jsxs, jsx } from 'preact/jsx-runtime';
-import { EditorView, basicSetup } from '@codemirror/basic-setup';
+import { basicSetup } from 'codemirror';
+import { EditorView } from '@codemirror/view';
 import { Compartment, EditorState } from '@codemirror/state';
 import { json } from '@codemirror/lang-json';
 
@@ -196,23 +199,45 @@ Section.HeaderItem = function (props) {
 };
 
 function PlaygroundRoot(props) {
+  const {
+    actions: actionsConfig = {},
+    editor: editorConfig = {},
+    emit
+  } = props;
+  const {
+    display: displayActions = true
+  } = actionsConfig;
+  const {
+    inlinePropertiesPanel = true
+  } = editorConfig;
   const paletteContainerRef = useRef();
   const editorContainerRef = useRef();
   const formContainerRef = useRef();
   const dataContainerRef = useRef();
   const resultContainerRef = useRef();
+  const propertiesPanelContainerRef = useRef();
+  const paletteRef = useRef();
   const formEditorRef = useRef();
   const formRef = useRef();
   const dataEditorRef = useRef();
   const resultViewRef = useRef();
+  const propertiesPanelRef = useRef();
   const [showEmbed, setShowEmbed] = useState(false);
   const [initialData] = useState(props.data || {});
   const [initialSchema, setInitialSchema] = useState(props.schema);
   const [data, setData] = useState(props.data || {});
   const [schema, setSchema] = useState(props.schema);
-  const [resultData, setResultData] = useState(props.data || {});
+  const [resultData, setResultData] = useState(props.data || {}); // pipe to playground API
+
   useEffect(() => {
     props.onInit({
+      attachDataContainer: node => dataEditorRef.current.attachTo(node),
+      attachEditorContainer: node => formEditorRef.current.attachTo(node),
+      attachFormContainer: node => formRef.current.attachTo(node),
+      attachPaletteContainer: node => paletteRef.current.attachTo(node),
+      attachPropertiesPanelContainer: node => propertiesPanelRef.current.attachTo(node),
+      attachResultContainer: node => resultViewRef.current.attachTo(node),
+      get: (name, strict) => formEditorRef.current.get(name, strict),
       setSchema: setInitialSchema
     });
   });
@@ -234,11 +259,20 @@ function PlaygroundRoot(props) {
       },
       palette: {
         parent: paletteContainerRef.current
+      },
+      propertiesPanel: {
+        parent: !inlinePropertiesPanel && propertiesPanelContainerRef.current
       }
     });
+    paletteRef.current = formEditor.get('palette');
+    propertiesPanelRef.current = formEditor.get('propertiesPanel');
     formEditor.on('changed', () => {
       setSchema(formEditor.getSchema());
     });
+    formEditor.on('formEditor.rendered', () => {
+      // notifiy interested parties after render
+      emit('formPlayground.rendered');
+    });
     form.on('changed', event => {
       setResultData(event.data);
     });
@@ -291,7 +325,9 @@ function PlaygroundRoot(props) {
     setShowEmbed(true);
   }, []);
   return jsxs("div", {
-    class: "fjs-container fjs-pgl-root",
+    class: classNames('fjs-container', 'fjs-pgl-root', {
+      'fjs-pgl-inline-editor-panel': inlinePropertiesPanel
+    }),
     children: [jsx("div", {
       class: "fjs-pgl-modals",
       children: showEmbed ? jsx(EmbedModal, {
@@ -306,14 +342,14 @@ function PlaygroundRoot(props) {
       class: "fjs-pgl-main",
       children: [jsxs(Section, {
         name: "Form Definition",
-        children: [jsx(Section.HeaderItem, {
+        children: [displayActions && jsx(Section.HeaderItem, {
           children: jsx("button", {
             class: "fjs-pgl-button",
             title: "Download form definition",
             onClick: handleDownload,
             children: "Download"
           })
-        }), jsx(Section.HeaderItem, {
+        }), displayActions && jsx(Section.HeaderItem, {
           children: jsx("button", {
             class: "fjs-pgl-button",
             onClick: showEmbedModal,
@@ -342,6 +378,9 @@ function PlaygroundRoot(props) {
           class: "fjs-pgl-text-container"
         })
       })]
+    }), jsx("div", {
+      class: "fjs-pgl-properties-container",
+      ref: propertiesPanelContainerRef
     })]
   });
 } // helpers ///////////////
@@ -354,7 +393,8 @@ function Playground(options) {
   const {
     container: parent,
     schema,
-    data
+    data,
+    ...rest
   } = options;
   const emitter = mitt();
   let state = {
@@ -364,7 +404,11 @@ function Playground(options) {
   let ref;
   const container = document.createElement('div');
   container.classList.add('fjs-pgl-parent');
-  parent.appendChild(container);
+
+  if (parent) {
+    parent.appendChild(container);
+  }
+
   const handleDrop = fileDrop('Drop a form file', function (files) {
     const file = files[0];
 
@@ -375,12 +419,25 @@ function Playground(options) {
       }
     }
   });
+
+  const withRef = function (fn) {
+    return function (...args) {
+      if (!ref) {
+        throw new Error('Playground is not initialized.');
+      }
+
+      fn(...args);
+    };
+  };
+
   container.addEventListener('dragover', handleDrop);
   render(jsx(PlaygroundRoot, {
     schema: schema,
     data: data,
     onStateChanged: _state => state = _state,
-    onInit: _ref => ref = _ref
+    onInit: _ref => ref = _ref,
+    emit: emitter.emit,
+    ...rest
   }), container);
   this.on = emitter.on;
   this.off = emitter.off;
@@ -400,9 +457,32 @@ function Playground(options) {
     return ref.setSchema(schema);
   };
 
+  this.get = function (name, strict) {
+    return ref.get(name, strict);
+  };
+
   this.destroy = function () {
     this.emit('destroy');
   };
+
+  this.attachEditorContainer = withRef(function (node) {
+    return ref.attachEditorContainer(node);
+  });
+  this.attachPreviewContainer = withRef(function (node) {
+    return ref.attachFormContainer(node);
+  });
+  this.attachDataContainer = withRef(function (node) {
+    return ref.attachDataContainer(node);
+  });
+  this.attachResultContainer = withRef(function (node) {
+    return ref.attachResultContainer(node);
+  });
+  this.attachPaletteContainer = withRef(function (node) {
+    return ref.attachPaletteContainer(node);
+  });
+  this.attachPropertiesPanelContainer = withRef(function (node) {
+    return ref.attachPropertiesPanelContainer(node);
+  });
 }
 
 export { Playground };