@bpmn-io/form-js-playground 0.8.0 → 0.9.0

package/dist/form-playground.umd.js

@@ -3442,10 +3442,10 @@
     injector.init();
     return injector;
   }
-  /**
-   * @param {string?} prefix
-   *
-   * @returns Element
+  /**
+   * @param {string?} prefix
+   *
+   * @returns Element
    */
 
 
@@ -3482,11 +3482,11 @@
   function generateIdForType(type) {
     return `${type}${generateIndexForType(type)}`;
   }
-  /**
-   * @template T
-   * @param {T} data
-   * @param {(this: any, key: string, value: any) => any} [replacer]
-   * @return {T}
+  /**
+   * @template T
+   * @param {T} data
+   * @param {(this: any, key: string, value: any) => any} [replacer]
+   * @return {T}
    */
 
 
@@ -3495,24 +3495,24 @@
   }
 
   class Importer$1 {
-    /**
-     * @constructor
-     * @param { import('../core').FormFieldRegistry } formFieldRegistry
-     * @param { import('../render/FormFields').default } formFields
+    /**
+     * @constructor
+     * @param { import('../core').FormFieldRegistry } formFieldRegistry
+     * @param { import('../render/FormFields').default } formFields
      */
     constructor(formFieldRegistry, formFields) {
       this._formFieldRegistry = formFieldRegistry;
       this._formFields = formFields;
     }
-    /**
-     * Import schema adding `id`, `_parent` and `_path`
-     * information to each field and adding it to the
-     * form field registry.
-     *
-     * @param {any} schema
-     * @param {any} [data]
-     *
-     * @return { { warnings: Array<any>, schema: any, data: any } }
+    /**
+     * Import schema adding `id`, `_parent` and `_path`
+     * information to each field and adding it to the
+     * form field registry.
+     *
+     * @param {any} schema
+     * @param {any} [data]
+     *
+     * @return { { warnings: Array<any>, schema: any, data: any } }
      */
 
 
@@ -3533,11 +3533,11 @@
         throw err;
       }
     }
-    /**
-     * @param {any} formField
-     * @param {string} [parentId]
-     *
-     * @return {any} importedField
+    /**
+     * @param {any} formField
+     * @param {string} [parentId]
+     *
+     * @return {any} importedField
      */
 
 
@@ -3599,10 +3599,10 @@
         this.importFormField(component, parentId);
       });
     }
-    /**
-     * @param {Object} data
-     *
-     * @return {Object} importedData
+    /**
+     * @param {Object} data
+     *
+     * @return {Object} importedData
      */
 
 
@@ -3662,11 +3662,11 @@
   const ATTR_WHITESPACE_PATTERN = /[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205F\u3000]/g; // eslint-disable-line no-control-regex
 
   const FORM_ELEMENT = document.createElement('form');
-  /**
-   * Sanitize a HTML string and return the cleaned, safe version.
-   *
-   * @param {string} html
-   * @return {string}
+  /**
+   * Sanitize a HTML string and return the cleaned, safe version.
+   *
+   * @param {string} html
+   * @return {string}
    */
 
   function sanitizeHTML(html) {
@@ -3685,15 +3685,15 @@
       return '';
     }
   }
-  /**
-   * Recursively sanitize a HTML node, potentially
-   * removing it, its children or attributes.
-   *
-   * Inspired by https://github.com/developit/snarkdown/issues/70
-   * and https://github.com/cure53/DOMPurify. Simplified
-   * for our use-case.
-   *
-   * @param {Element} node
+  /**
+   * Recursively sanitize a HTML node, potentially
+   * removing it, its children or attributes.
+   *
+   * Inspired by https://github.com/developit/snarkdown/issues/70
+   * and https://github.com/cure53/DOMPurify. Simplified
+   * for our use-case.
+   *
+   * @param {Element} node
    */
 
 
@@ -3741,13 +3741,13 @@
       node.childNodes[i]);
     }
   }
-  /**
-   * Validates attributes for validity.
-   *
-   * @param {string} lcTag
-   * @param {string} lcName
-   * @param {string} value
-   * @return {boolean}
+  /**
+   * Validates attributes for validity.
+   *
+   * @param {string} lcTag
+   * @param {string} lcName
+   * @param {string} value
+   * @return {boolean}
    */
 
 
@@ -3891,11 +3891,11 @@
       return props.children;
     }
   });
-  /**
-   * @param {string} type
-   * @param {boolean} [strict]
-   *
-   * @returns {any}
+  /**
+   * @param {string} type
+   * @param {boolean} [strict]
+   *
+   * @returns {any}
    */
 
   function getService$2(type, strict) {}
@@ -4026,8 +4026,8 @@
     } = F$1(FormContext);
     return getService(type, strict);
   }
-  /**
-   * @enum { String }
+  /**
+   * @enum { String }
    */
 
 
@@ -4036,17 +4036,17 @@
     LOADED: 'loaded',
     ERROR: 'error'
   };
-  /**
-   * @typedef {Object} ValuesGetter
-   * @property {Object[]} values - The values data
-   * @property {(LOAD_STATES)} state - The values data's loading state, to use for conditional rendering
+  /**
+   * @typedef {Object} ValuesGetter
+   * @property {Object[]} values - The values data
+   * @property {(LOAD_STATES)} state - The values data's loading state, to use for conditional rendering
    */
 
-  /**
-   * A hook to load values for single and multiselect components.
-   *
-   * @param {Object} field - The form field to handle values for
-   * @return {ValuesGetter} valuesGetter - A values getter object providing loading state and values
+  /**
+   * A hook to load values for single and multiselect components.
+   *
+   * @param {Object} field - The form field to handle values for
+   * @return {ValuesGetter} valuesGetter - A values getter object providing loading state and values
    */
 
   function useValuesAsync(field) {
@@ -4249,10 +4249,10 @@
 
   Default.type = 'default';
   Default.keyed = false;
-  /**
-   * This file must not be changed or exchanged.
-   *
-   * @see http://bpmn.io/license for more information.
+  /**
+   * This file must not be changed or exchanged.
+   *
+   * @see http://bpmn.io/license for more information.
    */
 
   function Logo() {
@@ -7142,10 +7142,10 @@
   function invokeFunction(fn, args) {
     return fn.apply(null, args);
   }
-  /**
-   * A factory to create a configurable debouncer.
-   *
-   * @param {number|boolean} [config=true]
+  /**
+   * A factory to create a configurable debouncer.
+   *
+   * @param {number|boolean} [config=true]
    */
 
 
@@ -7162,11 +7162,11 @@
   DebounceFactory.$inject = ['config.debounce'];
 
   class FieldFactory {
-    /**
-     * @constructor
-     *
-     * @param { import('./FormFieldRegistry').default } formFieldRegistry
-     * @param { import('@bpmn-io/form-js-viewer').FormFields } formFields
+    /**
+     * @constructor
+     *
+     * @param { import('./FormFieldRegistry').default } formFieldRegistry
+     * @param { import('@bpmn-io/form-js-viewer').FormFields } formFields
      */
     constructor(formFieldRegistry, formFields) {
       this._formFieldRegistry = formFieldRegistry;
@@ -7244,11 +7244,11 @@
   FieldFactory.$inject = ['formFieldRegistry', 'formFields'];
 
   class FormFieldRegistry extends FormFieldRegistry$1 {
-    /**
-     * Updates a form fields id.
-     *
-     * @param {Object} formField
-     * @param {string} newId
+    /**
+     * Updates a form fields id.
+     *
+     * @param {Object} formField
+     * @param {string} newId
      */
     updateId(formField, newId) {
       this._validateId(newId);
@@ -7269,13 +7269,13 @@
         }
       }
     }
-    /**
-     * Validate the suitability of the given id and signals a problem
-     * with an exception.
-     *
-     * @param {string} id
-     *
-     * @throws {Error} if id is empty or already assigned
+    /**
+     * Validate the suitability of the given id and signals a problem
+     * with an exception.
+     *
+     * @param {string} id
+     *
+     * @throws {Error} if id is empty or already assigned
      */
 
 
@@ -7292,30 +7292,30 @@
   }
 
   class Importer {
-    /**
-     * @constructor
-     * @param { import('../core/FormFieldRegistry').default } formFieldRegistry
-     * @param { import('../core/FieldFactory').default } fieldFactory
+    /**
+     * @constructor
+     * @param { import('../core/FormFieldRegistry').default } formFieldRegistry
+     * @param { import('../core/FieldFactory').default } fieldFactory
      */
     constructor(formFieldRegistry, fieldFactory) {
       this._formFieldRegistry = formFieldRegistry;
       this._fieldFactory = fieldFactory;
     }
-    /**
-     * Import schema creating fields, attaching additional
-     * information to each field and adding fields to the
-     * field registry.
-     *
-     * Additional information attached:
-     *
-     *   * `id` (unless present)
-     *   * `_parent`
-     *   * `_path`
-     *
-     * @param {any} schema
-     *
-     * @typedef {{ warnings: Error[], schema: any }} ImportResult
-     * @returns {ImportResult}
+    /**
+     * Import schema creating fields, attaching additional
+     * information to each field and adding fields to the
+     * field registry.
+     *
+     * Additional information attached:
+     *
+     *   * `id` (unless present)
+     *   * `_parent`
+     *   * `_path`
+     *
+     * @param {any} schema
+     *
+     * @typedef {{ warnings: Error[], schema: any }} ImportResult
+     * @returns {ImportResult}
      */
 
 
@@ -7334,12 +7334,12 @@
         throw err;
       }
     }
-    /**
-     * @param {{[x: string]: any}} fieldAttrs
-     * @param {String} [parentId]
-     * @param {number} [index]
-     *
-     * @return {any} field
+    /**
+     * @param {{[x: string]: any}} fieldAttrs
+     * @param {String} [parentId]
+     * @param {number} [index]
+     *
+     * @return {any} field
      */
 
 
@@ -7381,11 +7381,11 @@
 
       return field;
     }
-    /**
-     * @param {Array<any>} components
-     * @param {string} parentId
-     *
-     * @return {Array<any>} imported components
+    /**
+     * @param {Array<any>} components
+     * @param {string} parentId
+     *
+     * @return {Array<any>} imported components
      */
 
 
@@ -7404,11 +7404,11 @@
   const DragAndDropContext = D$1({
     drake: null
   });
-  /**
-   * @param {string} type
-   * @param {boolean} [strict]
-   *
-   * @returns {any}
+  /**
+   * @param {string} type
+   * @param {boolean} [strict]
+   *
+   * @returns {any}
    */
 
   function getService$1(type, strict) {}
@@ -8935,10 +8935,10 @@
   }
 
   class AddFormFieldHandler {
-    /**
-     * @constructor
-     * @param { import('../../../FormEditor').default } formEditor
-     * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
+    /**
+     * @constructor
+     * @param { import('../../../FormEditor').default } formEditor
+     * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
      */
     constructor(formEditor, formFieldRegistry) {
       this._formEditor = formEditor;
@@ -9001,10 +9001,10 @@
   AddFormFieldHandler.$inject = ['formEditor', 'formFieldRegistry'];
 
   class EditFormFieldHandler {
-    /**
-     * @constructor
-     * @param { import('../../../FormEditor').default } formEditor
-     * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
+    /**
+     * @constructor
+     * @param { import('../../../FormEditor').default } formEditor
+     * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
      */
     constructor(formEditor, formFieldRegistry) {
       this._formEditor = formEditor;
@@ -9080,10 +9080,10 @@
   EditFormFieldHandler.$inject = ['formEditor', 'formFieldRegistry'];
 
   class MoveFormFieldHandler {
-    /**
-     * @constructor
-     * @param { import('../../../FormEditor').default } formEditor
-     * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
+    /**
+     * @constructor
+     * @param { import('../../../FormEditor').default } formEditor
+     * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
      */
     constructor(formEditor, formFieldRegistry) {
       this._formEditor = formEditor;
@@ -9163,10 +9163,10 @@
   MoveFormFieldHandler.$inject = ['formEditor', 'formFieldRegistry'];
 
   class RemoveFormFieldHandler {
-    /**
-     * @constructor
-     * @param { import('../../../FormEditor').default } formEditor
-     * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
+    /**
+     * @constructor
+     * @param { import('../../../FormEditor').default } formEditor
+     * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
      */
     constructor(formEditor, formFieldRegistry) {
       this._formEditor = formEditor;
@@ -9228,9 +9228,9 @@
   RemoveFormFieldHandler.$inject = ['formEditor', 'formFieldRegistry'];
 
   class UpdateIdClaimHandler {
-    /**
-     * @constructor
-     * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
+    /**
+     * @constructor
+     * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
      */
     constructor(formFieldRegistry) {
       this._formFieldRegistry = formFieldRegistry;
@@ -9269,9 +9269,9 @@
   UpdateIdClaimHandler.$inject = ['formFieldRegistry'];
 
   class UpdateKeyClaimHandler {
-    /**
-     * @constructor
-     * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
+    /**
+     * @constructor
+     * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
      */
     constructor(formFieldRegistry) {
       this._formFieldRegistry = formFieldRegistry;
@@ -10267,7 +10267,7 @@
               height: "36",
               viewBox: "0 0 54 54"
             }) : null, e$1("span", {
-              class: "fjs-palette-field-text fjs-hide-compact",
+              class: "fjs-palette-field-text",
               children: label
             })]
           });
@@ -10292,10 +10292,10 @@
         this._render();
       });
     }
-    /**
-     * Attach the palette to a parent node.
-     *
-     * @param {HTMLElement} container
+    /**
+     * Attach the palette to a parent node.
+     *
+     * @param {HTMLElement} container
      */
 
 
@@ -10315,8 +10315,8 @@
 
       this._eventBus.fire('palette.attach');
     }
-    /**
-     * Detach the palette from its parent node.
+    /**
+     * Detach the palette from its parent node.
      */
 
 
@@ -11971,11 +11971,11 @@
   function prefixId$1(id) {
     return `bio-properties-panel-${id}`;
   }
-  /**
-   * @param {string} type
-   * @param {boolean} [strict]
-   *
-   * @returns {any}
+  /**
+   * @param {string} type
+   * @param {boolean} [strict]
+   *
+   * @returns {any}
    */
 
 
@@ -12051,8 +12051,8 @@
       return labelsByType[type];
     }
   };
-  /**
-   * Provide placeholders for empty and multiple state.
+  /**
+   * Provide placeholders for empty and multiple state.
    */
 
   const PropertiesPanelPlaceholderProvider = {
@@ -12935,14 +12935,14 @@
     });
   } // helpers //////////
 
-  /**
-   * Returns copy of object with updated value.
-   *
-   * @param {Object} properties
-   * @param {string} key
-   * @param {string} value
-   *
-   * @returns {Object}
+  /**
+   * Returns copy of object with updated value.
+   *
+   * @param {Object} properties
+   * @param {string} key
+   * @param {string} value
+   *
+   * @returns {Object}
    */
 
 
@@ -12951,14 +12951,14 @@
       [key]: value
     };
   }
-  /**
-   * Returns copy of object with updated key.
-   *
-   * @param {Object} properties
-   * @param {string} oldKey
-   * @param {string} newKey
-   *
-   * @returns {Object}
+  /**
+   * Returns copy of object with updated key.
+   *
+   * @param {Object} properties
+   * @param {string} oldKey
+   * @param {string} newKey
+   *
+   * @returns {Object}
    */
 
 
@@ -13398,8 +13398,8 @@
       field
     };
     const valuesSourceId = `${fieldId}-valuesSource`;
-    /**
-     * @type {Array<Group|ListGroup>}
+    /**
+     * @type {Array<Group|ListGroup>}
      */
 
     const groups = [{
@@ -13504,13 +13504,13 @@
     };
   } // helpers //////////
 
-  /**
-   * Returns copy of object without key.
-   *
-   * @param {Object} properties
-   * @param {string} oldKey
-   *
-   * @returns {Object}
+  /**
+   * Returns copy of object without key.
+   *
+   * @param {Object} properties
+   * @param {string} oldKey
+   *
+   * @returns {Object}
    */
 
 
@@ -13577,9 +13577,9 @@
     }, []);
     h(() => {
       const onFieldChanged = () => {
-        /**
-         * TODO(pinussilvestrus): update with actual updated element,
-         * once we have a proper updater/change support
+        /**
+         * TODO(pinussilvestrus): update with actual updated element,
+         * once we have a proper updater/change support
          */
         _update(selection.get() || schema);
       };
@@ -13637,10 +13637,10 @@
         this._render();
       });
     }
-    /**
-     * Attach the properties panel to a parent node.
-     *
-     * @param {HTMLElement} container
+    /**
+     * Attach the properties panel to a parent node.
+     *
+     * @param {HTMLElement} container
      */
 
 
@@ -13660,8 +13660,8 @@
 
       this._eventBus.fire('propertiesPanel.attach');
     }
-    /**
-     * Detach the properties panel from its parent node.
+    /**
+     * Detach the properties panel from its parent node.
      */
 
 
@@ -13700,48 +13700,48 @@
     propertiesPanel: ['type', PropertiesPanelRenderer]
   };
   const ids = new Ids([32, 36, 1]);
-  /**
-   * @typedef { import('./types').Injector } Injector
-   * @typedef { import('./types').Module } Module
-   * @typedef { import('./types').Schema } Schema
-   *
-   * @typedef { import('./types').FormEditorOptions } FormEditorOptions
-   * @typedef { import('./types').FormEditorProperties } FormEditorProperties
-   *
-   * @typedef { {
-   *   properties: FormEditorProperties,
-   *   schema: Schema
-   * } } State
-   *
-   * @typedef { (type:string, priority:number, handler:Function) => void } OnEventWithPriority
-   * @typedef { (type:string, handler:Function) => void } OnEventWithOutPriority
-   * @typedef { OnEventWithPriority & OnEventWithOutPriority } OnEventType
+  /**
+   * @typedef { import('./types').Injector } Injector
+   * @typedef { import('./types').Module } Module
+   * @typedef { import('./types').Schema } Schema
+   *
+   * @typedef { import('./types').FormEditorOptions } FormEditorOptions
+   * @typedef { import('./types').FormEditorProperties } FormEditorProperties
+   *
+   * @typedef { {
+   *   properties: FormEditorProperties,
+   *   schema: Schema
+   * } } State
+   *
+   * @typedef { (type:string, priority:number, handler:Function) => void } OnEventWithPriority
+   * @typedef { (type:string, handler:Function) => void } OnEventWithOutPriority
+   * @typedef { OnEventWithPriority & OnEventWithOutPriority } OnEventType
    */
 
-  /**
-   * The form editor.
+  /**
+   * The form editor.
    */
 
   class FormEditor {
-    /**
-     * @constructor
-     * @param {FormEditorOptions} options
+    /**
+     * @constructor
+     * @param {FormEditorOptions} options
      */
     constructor(options = {}) {
-      /**
-       * @public
-       * @type {OnEventType}
+      /**
+       * @public
+       * @type {OnEventType}
        */
       this.on = this._onEvent;
-      /**
-       * @public
-       * @type {String}
+      /**
+       * @public
+       * @type {String}
        */
 
       this._id = ids.next();
-      /**
-       * @private
-       * @type {Element}
+      /**
+       * @private
+       * @type {Element}
        */
 
       this._container = createFormContainer();
@@ -13754,15 +13754,15 @@
         injector = this._createInjector(options, this._container),
         properties = {}
       } = options;
-      /**
-       * @private
-       * @type {any}
+      /**
+       * @private
+       * @type {any}
        */
 
       this.exporter = exporter;
-      /**
-       * @private
-       * @type {State}
+      /**
+       * @private
+       * @type {State}
        */
 
       this._state = {
@@ -13794,10 +13794,10 @@
 
       this._detach(false);
     }
-    /**
-     * @param {Schema} schema
-     *
-     * @return {Promise<{ warnings: Array<any> }>}
+    /**
+     * @param {Schema} schema
+     *
+     * @return {Promise<{ warnings: Array<any> }>}
      */
 
 
@@ -13831,16 +13831,16 @@
         }
       });
     }
-    /**
-     * @returns {Schema}
+    /**
+     * @returns {Schema}
      */
 
 
     saveSchema() {
       return this.getSchema();
     }
-    /**
-     * @returns {Schema}
+    /**
+     * @returns {Schema}
      */
 
 
@@ -13851,8 +13851,8 @@
 
       return exportSchema(schema, this.exporter, schemaVersion);
     }
-    /**
-     * @param {Element|string} parentNode
+    /**
+     * @param {Element|string} parentNode
      */
 
 
@@ -13876,10 +13876,10 @@
     detach() {
       this._detach();
     }
-    /**
-     * @internal
-     *
-     * @param {boolean} [emit]
+    /**
+     * @internal
+     *
+     * @param {boolean} [emit]
      */
 
 
@@ -13897,9 +13897,9 @@
 
       parentNode.removeChild(container);
     }
-    /**
-     * @param {any} property
-     * @param {any} value
+    /**
+     * @param {any} property
+     * @param {any} value
      */
 
 
@@ -13910,22 +13910,22 @@
         properties
       });
     }
-    /**
-     * @param {string} type
-     * @param {Function} handler
+    /**
+     * @param {string} type
+     * @param {Function} handler
      */
 
 
     off(type, handler) {
       this.get('eventBus').off(type, handler);
     }
-    /**
-     * @internal
-     *
-     * @param {FormEditorOptions} options
-     * @param {Element} container
-     *
-     * @returns {Injector}
+    /**
+     * @internal
+     *
+     * @param {FormEditorOptions} options
+     * @param {Element} container
+     *
+     * @returns {Injector}
      */
 
 
@@ -13946,24 +13946,24 @@
         formEditor: ['value', this]
       }, core, ...modules, ...additionalModules]);
     }
-    /**
-     * @internal
+    /**
+     * @internal
      */
 
 
     _emit(type, data) {
       this.get('eventBus').fire(type, data);
     }
-    /**
-     * @internal
+    /**
+     * @internal
      */
 
 
     _getState() {
       return this._state;
     }
-    /**
-     * @internal
+    /**
+     * @internal
      */
 
 
@@ -13974,16 +13974,16 @@
 
       this._emit('changed', this._getState());
     }
-    /**
-     * @internal
+    /**
+     * @internal
      */
 
 
     _getModules() {
       return [ModelingModule, EditorActionsModule, KeyboardModule, SelectionModule, PaletteModule, PropertiesPanelModule];
     }
-    /**
-     * @internal
+    /**
+     * @internal
      */
 
 
@@ -42765,7 +42765,8 @@
     const {
       actions: actionsConfig = {},
       editor: editorConfig = {},
-      emit
+      emit,
+      exporter: exporterConfig = {}
     } = props;
     const {
       display: displayActions = true
@@ -42801,7 +42802,10 @@
         attachPropertiesPanelContainer: node => propertiesPanelRef.current.attachTo(node),
         attachResultContainer: node => resultViewRef.current.attachTo(node),
         get: (name, strict) => formEditorRef.current.get(name, strict),
-        setSchema: setInitialSchema
+        getEditor: () => formEditorRef.current,
+        getSchema: () => formEditorRef.current.getSchema(),
+        setSchema: setInitialSchema,
+        saveSchema: () => formEditorRef.current.saveSchema()
       });
     });
     y(() => {
@@ -42825,7 +42829,8 @@
         },
         propertiesPanel: {
           parent: !inlinePropertiesPanel && propertiesPanelContainerRef.current
-        }
+        },
+        exporter: exporterConfig
       });
       paletteRef.current = formEditor.get('palette');
       propertiesPanelRef.current = formEditor.get('propertiesPanel');
@@ -42864,10 +42869,10 @@
       dataEditorRef.current.setValue(toJSON(initialData));
     }, [initialData]);
     y(() => {
-      formEditorRef.current.importSchema(initialSchema);
+      initialSchema && formEditorRef.current.importSchema(initialSchema);
     }, [initialSchema]);
     y(() => {
-      formRef.current.importSchema(schema, data);
+      schema && formRef.current.importSchema(schema, data);
     }, [schema, data]);
     y(() => {
       resultViewRef.current.setValue(toJSON(resultData));
@@ -42989,17 +42994,22 @@
           throw new Error('Playground is not initialized.');
         }
 
-        fn(...args);
+        return fn(...args);
       };
     };
 
+    const onInit = function (_ref) {
+      ref = _ref;
+      emitter.emit('formPlayground.init');
+    };
+
     container.addEventListener('dragover', handleDrop);
     S$1(e$1(PlaygroundRoot, {
-      schema: schema,
       data: data,
-      onStateChanged: _state => state = _state,
-      onInit: _ref => ref = _ref,
       emit: emitter.emit,
+      onInit: onInit,
+      onStateChanged: _state => state = _state,
+      schema: schema,
       ...rest
     }), container);
     this.on = emitter.on;
@@ -43016,13 +43026,21 @@
       return state;
     };
 
-    this.setSchema = function (schema) {
+    this.getSchema = withRef(function () {
+      return ref.getSchema();
+    });
+    this.setSchema = withRef(function (schema) {
       return ref.setSchema(schema);
-    };
-
-    this.get = function (name, strict) {
+    });
+    this.saveSchema = withRef(function () {
+      return ref.saveSchema();
+    });
+    this.get = withRef(function (name, strict) {
       return ref.get(name, strict);
-    };
+    });
+    this.getEditor = withRef(function () {
+      return ref.getEditor();
+    });
 
     this.destroy = function () {
       this.emit('destroy');