@bpmn-io/form-js-playground 0.7.2 → 0.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +22 -22
- package/README.md +15 -5
- package/dist/assets/form-js-playground.css +250 -189
- package/dist/form-playground.umd.js +36542 -30408
- package/dist/index.cjs +204 -116
- package/dist/index.cjs.map +1 -1
- package/dist/index.es.js +197 -110
- package/dist/index.es.js.map +1 -1
- package/dist/types/Playground.d.ts +64 -0
- package/dist/types/components/EmbedModal.d.ts +1 -0
- package/dist/types/components/JSONEditor.d.ts +16 -0
- package/dist/types/components/Modal.d.ts +1 -0
- package/dist/types/components/PlaygroundRoot.d.ts +1 -0
- package/dist/types/components/Section.d.ts +4 -0
- package/dist/types/index.d.ts +1 -0
- package/package.json +24 -9
- package/karma.conf.js +0 -100
- package/resources/screenshot.png +0 -0
- package/rollup.config.js +0 -60
- package/src/FileDrop.css +0 -33
- package/src/JSONView.js +0 -78
- package/src/Playground.css +0 -158
- package/src/Playground.js +0 -375
- package/src/index.js +0 -1
- package/test/.eslintrc +0 -8
- package/test/TestHelper.js +0 -26
- package/test/coverageBundle.js +0 -9
- package/test/spec/Playground.spec.js +0 -90
- package/test/spec/form.json +0 -86
- package/test/spec/other-form.json +0 -11
- package/test/test.css +0 -9
- package/test/testBundle.js +0 -4
package/dist/index.es.js
CHANGED
|
@@ -1,13 +1,109 @@
|
|
|
1
|
-
import mitt from 'mitt';
|
|
2
|
-
import { EditorView, basicSetup } from '@codemirror/basic-setup';
|
|
3
|
-
import { Compartment, EditorState } from '@codemirror/state';
|
|
4
|
-
import { json } from '@codemirror/lang-json';
|
|
5
1
|
import { render } from 'preact';
|
|
6
|
-
import { useRef, useState, useEffect, useCallback } from 'preact/hooks';
|
|
7
2
|
import fileDrop from 'file-drops';
|
|
3
|
+
import mitt from 'mitt';
|
|
4
|
+
import { useEffect, useRef, useState, useCallback } from 'preact/hooks';
|
|
8
5
|
import download from 'downloadjs';
|
|
9
|
-
import
|
|
10
|
-
import {
|
|
6
|
+
import classNames from 'classnames';
|
|
7
|
+
import { Form } from '@bpmn-io/form-js-viewer';
|
|
8
|
+
import { FormEditor } from '@bpmn-io/form-js-editor';
|
|
9
|
+
import { jsxs, jsx } from 'preact/jsx-runtime';
|
|
10
|
+
import { basicSetup } from 'codemirror';
|
|
11
|
+
import { EditorView } from '@codemirror/view';
|
|
12
|
+
import { Compartment, EditorState } from '@codemirror/state';
|
|
13
|
+
import { json } from '@codemirror/lang-json';
|
|
14
|
+
|
|
15
|
+
function Modal(props) {
|
|
16
|
+
useEffect(() => {
|
|
17
|
+
function handleKey(event) {
|
|
18
|
+
if (event.key === 'Escape') {
|
|
19
|
+
event.stopPropagation();
|
|
20
|
+
props.onClose();
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
document.addEventListener('keydown', handleKey);
|
|
25
|
+
return () => {
|
|
26
|
+
document.removeEventListener('keydown', handleKey);
|
|
27
|
+
};
|
|
28
|
+
});
|
|
29
|
+
return jsxs("div", {
|
|
30
|
+
class: "fjs-pgl-modal",
|
|
31
|
+
children: [jsx("div", {
|
|
32
|
+
class: "fjs-pgl-modal-backdrop",
|
|
33
|
+
onClick: props.onClose
|
|
34
|
+
}), jsxs("div", {
|
|
35
|
+
class: "fjs-pgl-modal-content",
|
|
36
|
+
children: [jsx("h1", {
|
|
37
|
+
class: "fjs-pgl-modal-header",
|
|
38
|
+
children: props.name
|
|
39
|
+
}), jsx("div", {
|
|
40
|
+
class: "fjs-pgl-modal-body",
|
|
41
|
+
children: props.children
|
|
42
|
+
}), jsx("div", {
|
|
43
|
+
class: "fjs-pgl-modal-footer",
|
|
44
|
+
children: jsx("button", {
|
|
45
|
+
class: "fjs-pgl-button fjs-pgl-button-default",
|
|
46
|
+
onClick: props.onClose,
|
|
47
|
+
children: "Close"
|
|
48
|
+
})
|
|
49
|
+
})]
|
|
50
|
+
})]
|
|
51
|
+
});
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
function EmbedModal(props) {
|
|
55
|
+
const schema = serializeValue(props.schema);
|
|
56
|
+
const data = serializeValue(props.data || {});
|
|
57
|
+
const fieldRef = useRef();
|
|
58
|
+
const snippet = `<!-- styles needed for rendering -->
|
|
59
|
+
<link rel="stylesheet" href="https://unpkg.com/@bpmn-io/form-js@0.2.4/dist/assets/form-js.css">
|
|
60
|
+
|
|
61
|
+
<!-- container to render the form into -->
|
|
62
|
+
<div class="fjs-pgl-form-container"></div>
|
|
63
|
+
|
|
64
|
+
<!-- scripts needed for embedding -->
|
|
65
|
+
<script src="https://unpkg.com/@bpmn-io/form-js@0.2.4/dist/form-viewer.umd.js"></script>
|
|
66
|
+
|
|
67
|
+
<!-- actual script to instantiate the form and load form schema + data -->
|
|
68
|
+
<script>
|
|
69
|
+
const data = JSON.parse(${data});
|
|
70
|
+
const schema = JSON.parse(${schema});
|
|
71
|
+
|
|
72
|
+
const form = new FormViewer.Form({
|
|
73
|
+
container: document.querySelector(".fjs-pgl-form-container")
|
|
74
|
+
});
|
|
75
|
+
|
|
76
|
+
form.on("submit", (event) => {
|
|
77
|
+
console.log(event.data, event.errors);
|
|
78
|
+
});
|
|
79
|
+
|
|
80
|
+
form.importSchema(schema, data).catch(err => {
|
|
81
|
+
console.error("Failed to render form", err);
|
|
82
|
+
});
|
|
83
|
+
</script>
|
|
84
|
+
`.trim();
|
|
85
|
+
useEffect(() => {
|
|
86
|
+
fieldRef.current.select();
|
|
87
|
+
});
|
|
88
|
+
return jsxs(Modal, {
|
|
89
|
+
name: "Embed form",
|
|
90
|
+
onClose: props.onClose,
|
|
91
|
+
children: [jsxs("p", {
|
|
92
|
+
children: ["Use the following HTML snippet to embed your form with ", jsx("a", {
|
|
93
|
+
href: "https://github.com/bpmn-io/form-js",
|
|
94
|
+
children: "form-js"
|
|
95
|
+
}), ":"]
|
|
96
|
+
}), jsx("textarea", {
|
|
97
|
+
spellCheck: "false",
|
|
98
|
+
ref: fieldRef,
|
|
99
|
+
children: snippet
|
|
100
|
+
})]
|
|
101
|
+
});
|
|
102
|
+
} // helpers ///////////
|
|
103
|
+
|
|
104
|
+
function serializeValue(obj) {
|
|
105
|
+
return JSON.stringify(JSON.stringify(obj)).replace(/</g, '<').replace(/>/g, '>');
|
|
106
|
+
}
|
|
11
107
|
|
|
12
108
|
function JSONEditor(options = {}) {
|
|
13
109
|
const emitter = mitt();
|
|
@@ -70,45 +166,6 @@ function JSONEditor(options = {}) {
|
|
|
70
166
|
};
|
|
71
167
|
}
|
|
72
168
|
|
|
73
|
-
function Modal(props) {
|
|
74
|
-
useEffect(() => {
|
|
75
|
-
function handleKey(event) {
|
|
76
|
-
if (event.key === 'Escape') {
|
|
77
|
-
event.stopPropagation();
|
|
78
|
-
props.onClose();
|
|
79
|
-
}
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
document.addEventListener('keydown', handleKey);
|
|
83
|
-
return () => {
|
|
84
|
-
document.removeEventListener('keydown', handleKey);
|
|
85
|
-
};
|
|
86
|
-
});
|
|
87
|
-
return jsxs("div", {
|
|
88
|
-
class: "fjs-pgl-modal",
|
|
89
|
-
children: [jsx("div", {
|
|
90
|
-
class: "fjs-pgl-modal-backdrop",
|
|
91
|
-
onClick: props.onClose
|
|
92
|
-
}), jsxs("div", {
|
|
93
|
-
class: "fjs-pgl-modal-content",
|
|
94
|
-
children: [jsx("h1", {
|
|
95
|
-
class: "fjs-pgl-modal-header",
|
|
96
|
-
children: props.name
|
|
97
|
-
}), jsx("div", {
|
|
98
|
-
class: "fjs-pgl-modal-body",
|
|
99
|
-
children: props.children
|
|
100
|
-
}), jsx("div", {
|
|
101
|
-
class: "fjs-pgl-modal-footer",
|
|
102
|
-
children: jsx("button", {
|
|
103
|
-
class: "fjs-pgl-button fjs-pgl-button-default",
|
|
104
|
-
onClick: props.onClose,
|
|
105
|
-
children: "Close"
|
|
106
|
-
})
|
|
107
|
-
})]
|
|
108
|
-
})]
|
|
109
|
-
});
|
|
110
|
-
}
|
|
111
|
-
|
|
112
169
|
function Section(props) {
|
|
113
170
|
const elements = Array.isArray(props.children) ? props.children : [props.children];
|
|
114
171
|
const {
|
|
@@ -141,77 +198,46 @@ Section.HeaderItem = function (props) {
|
|
|
141
198
|
return props.children;
|
|
142
199
|
};
|
|
143
200
|
|
|
144
|
-
function serializeValue(obj) {
|
|
145
|
-
return JSON.stringify(JSON.stringify(obj)).replace(/</g, '<').replace(/>/g, '>');
|
|
146
|
-
}
|
|
147
|
-
|
|
148
|
-
function EmbedModal(props) {
|
|
149
|
-
const schema = serializeValue(props.schema);
|
|
150
|
-
const data = serializeValue(props.data || {});
|
|
151
|
-
const fieldRef = useRef();
|
|
152
|
-
const snippet = `<!-- styles needed for rendering -->
|
|
153
|
-
<link rel="stylesheet" href="https://unpkg.com/@bpmn-io/form-js@0.2.4/dist/assets/form-js.css">
|
|
154
|
-
|
|
155
|
-
<!-- container to render the form into -->
|
|
156
|
-
<div class="fjs-pgl-form-container"></div>
|
|
157
|
-
|
|
158
|
-
<!-- scripts needed for embedding -->
|
|
159
|
-
<script src="https://unpkg.com/@bpmn-io/form-js@0.2.4/dist/form-viewer.umd.js"></script>
|
|
160
|
-
|
|
161
|
-
<!-- actual script to instantiate the form and load form schema + data -->
|
|
162
|
-
<script>
|
|
163
|
-
const data = JSON.parse(${data});
|
|
164
|
-
const schema = JSON.parse(${schema});
|
|
165
|
-
|
|
166
|
-
const form = new FormViewer.Form({
|
|
167
|
-
container: document.querySelector(".fjs-pgl-form-container")
|
|
168
|
-
});
|
|
169
|
-
|
|
170
|
-
form.on("submit", (event) => {
|
|
171
|
-
console.log(event.data, event.errors);
|
|
172
|
-
});
|
|
173
|
-
|
|
174
|
-
form.importSchema(schema, data).catch(err => {
|
|
175
|
-
console.error("Failed to render form", err);
|
|
176
|
-
});
|
|
177
|
-
</script>
|
|
178
|
-
`.trim();
|
|
179
|
-
useEffect(() => {
|
|
180
|
-
fieldRef.current.select();
|
|
181
|
-
});
|
|
182
|
-
return jsxs(Modal, {
|
|
183
|
-
name: "Embed form",
|
|
184
|
-
onClose: props.onClose,
|
|
185
|
-
children: [jsxs("p", {
|
|
186
|
-
children: ["Use the following HTML snippet to embed your form with ", jsx("a", {
|
|
187
|
-
href: "https://github.com/bpmn-io/form-js",
|
|
188
|
-
children: "form-js"
|
|
189
|
-
}), ":"]
|
|
190
|
-
}), jsx("textarea", {
|
|
191
|
-
spellCheck: "false",
|
|
192
|
-
ref: fieldRef,
|
|
193
|
-
children: snippet
|
|
194
|
-
})]
|
|
195
|
-
});
|
|
196
|
-
}
|
|
197
|
-
|
|
198
201
|
function PlaygroundRoot(props) {
|
|
202
|
+
const {
|
|
203
|
+
actions: actionsConfig = {},
|
|
204
|
+
editor: editorConfig = {},
|
|
205
|
+
emit
|
|
206
|
+
} = props;
|
|
207
|
+
const {
|
|
208
|
+
display: displayActions = true
|
|
209
|
+
} = actionsConfig;
|
|
210
|
+
const {
|
|
211
|
+
inlinePropertiesPanel = true
|
|
212
|
+
} = editorConfig;
|
|
213
|
+
const paletteContainerRef = useRef();
|
|
199
214
|
const editorContainerRef = useRef();
|
|
200
215
|
const formContainerRef = useRef();
|
|
201
216
|
const dataContainerRef = useRef();
|
|
202
217
|
const resultContainerRef = useRef();
|
|
218
|
+
const propertiesPanelContainerRef = useRef();
|
|
219
|
+
const paletteRef = useRef();
|
|
203
220
|
const formEditorRef = useRef();
|
|
204
221
|
const formRef = useRef();
|
|
205
222
|
const dataEditorRef = useRef();
|
|
206
223
|
const resultViewRef = useRef();
|
|
224
|
+
const propertiesPanelRef = useRef();
|
|
207
225
|
const [showEmbed, setShowEmbed] = useState(false);
|
|
208
226
|
const [initialData] = useState(props.data || {});
|
|
209
227
|
const [initialSchema, setInitialSchema] = useState(props.schema);
|
|
210
228
|
const [data, setData] = useState(props.data || {});
|
|
211
229
|
const [schema, setSchema] = useState(props.schema);
|
|
212
|
-
const [resultData, setResultData] = useState(props.data || {});
|
|
230
|
+
const [resultData, setResultData] = useState(props.data || {}); // pipe to playground API
|
|
231
|
+
|
|
213
232
|
useEffect(() => {
|
|
214
233
|
props.onInit({
|
|
234
|
+
attachDataContainer: node => dataEditorRef.current.attachTo(node),
|
|
235
|
+
attachEditorContainer: node => formEditorRef.current.attachTo(node),
|
|
236
|
+
attachFormContainer: node => formRef.current.attachTo(node),
|
|
237
|
+
attachPaletteContainer: node => paletteRef.current.attachTo(node),
|
|
238
|
+
attachPropertiesPanelContainer: node => propertiesPanelRef.current.attachTo(node),
|
|
239
|
+
attachResultContainer: node => resultViewRef.current.attachTo(node),
|
|
240
|
+
get: (name, strict) => formEditorRef.current.get(name, strict),
|
|
215
241
|
setSchema: setInitialSchema
|
|
216
242
|
});
|
|
217
243
|
});
|
|
@@ -230,11 +256,23 @@ function PlaygroundRoot(props) {
|
|
|
230
256
|
const formEditor = formEditorRef.current = new FormEditor({
|
|
231
257
|
renderer: {
|
|
232
258
|
compact: true
|
|
259
|
+
},
|
|
260
|
+
palette: {
|
|
261
|
+
parent: paletteContainerRef.current
|
|
262
|
+
},
|
|
263
|
+
propertiesPanel: {
|
|
264
|
+
parent: !inlinePropertiesPanel && propertiesPanelContainerRef.current
|
|
233
265
|
}
|
|
234
266
|
});
|
|
267
|
+
paletteRef.current = formEditor.get('palette');
|
|
268
|
+
propertiesPanelRef.current = formEditor.get('propertiesPanel');
|
|
235
269
|
formEditor.on('changed', () => {
|
|
236
270
|
setSchema(formEditor.getSchema());
|
|
237
271
|
});
|
|
272
|
+
formEditor.on('formEditor.rendered', () => {
|
|
273
|
+
// notifiy interested parties after render
|
|
274
|
+
emit('formPlayground.rendered');
|
|
275
|
+
});
|
|
238
276
|
form.on('changed', event => {
|
|
239
277
|
setResultData(event.data);
|
|
240
278
|
});
|
|
@@ -287,7 +325,9 @@ function PlaygroundRoot(props) {
|
|
|
287
325
|
setShowEmbed(true);
|
|
288
326
|
}, []);
|
|
289
327
|
return jsxs("div", {
|
|
290
|
-
class:
|
|
328
|
+
class: classNames('fjs-container', 'fjs-pgl-root', {
|
|
329
|
+
'fjs-pgl-inline-editor-panel': inlinePropertiesPanel
|
|
330
|
+
}),
|
|
291
331
|
children: [jsx("div", {
|
|
292
332
|
class: "fjs-pgl-modals",
|
|
293
333
|
children: showEmbed ? jsx(EmbedModal, {
|
|
@@ -295,18 +335,21 @@ function PlaygroundRoot(props) {
|
|
|
295
335
|
data: data,
|
|
296
336
|
onClose: hideEmbedModal
|
|
297
337
|
}) : null
|
|
338
|
+
}), jsx("div", {
|
|
339
|
+
class: "fjs-pgl-palette-container",
|
|
340
|
+
ref: paletteContainerRef
|
|
298
341
|
}), jsxs("div", {
|
|
299
342
|
class: "fjs-pgl-main",
|
|
300
343
|
children: [jsxs(Section, {
|
|
301
344
|
name: "Form Definition",
|
|
302
|
-
children: [jsx(Section.HeaderItem, {
|
|
345
|
+
children: [displayActions && jsx(Section.HeaderItem, {
|
|
303
346
|
children: jsx("button", {
|
|
304
347
|
class: "fjs-pgl-button",
|
|
305
348
|
title: "Download form definition",
|
|
306
349
|
onClick: handleDownload,
|
|
307
350
|
children: "Download"
|
|
308
351
|
})
|
|
309
|
-
}), jsx(Section.HeaderItem, {
|
|
352
|
+
}), displayActions && jsx(Section.HeaderItem, {
|
|
310
353
|
children: jsx("button", {
|
|
311
354
|
class: "fjs-pgl-button",
|
|
312
355
|
onClick: showEmbedModal,
|
|
@@ -335,15 +378,23 @@ function PlaygroundRoot(props) {
|
|
|
335
378
|
class: "fjs-pgl-text-container"
|
|
336
379
|
})
|
|
337
380
|
})]
|
|
381
|
+
}), jsx("div", {
|
|
382
|
+
class: "fjs-pgl-properties-container",
|
|
383
|
+
ref: propertiesPanelContainerRef
|
|
338
384
|
})]
|
|
339
385
|
});
|
|
386
|
+
} // helpers ///////////////
|
|
387
|
+
|
|
388
|
+
function toJSON(obj) {
|
|
389
|
+
return JSON.stringify(obj, null, ' ');
|
|
340
390
|
}
|
|
341
391
|
|
|
342
392
|
function Playground(options) {
|
|
343
393
|
const {
|
|
344
394
|
container: parent,
|
|
345
395
|
schema,
|
|
346
|
-
data
|
|
396
|
+
data,
|
|
397
|
+
...rest
|
|
347
398
|
} = options;
|
|
348
399
|
const emitter = mitt();
|
|
349
400
|
let state = {
|
|
@@ -353,7 +404,11 @@ function Playground(options) {
|
|
|
353
404
|
let ref;
|
|
354
405
|
const container = document.createElement('div');
|
|
355
406
|
container.classList.add('fjs-pgl-parent');
|
|
356
|
-
|
|
407
|
+
|
|
408
|
+
if (parent) {
|
|
409
|
+
parent.appendChild(container);
|
|
410
|
+
}
|
|
411
|
+
|
|
357
412
|
const handleDrop = fileDrop('Drop a form file', function (files) {
|
|
358
413
|
const file = files[0];
|
|
359
414
|
|
|
@@ -364,12 +419,25 @@ function Playground(options) {
|
|
|
364
419
|
}
|
|
365
420
|
}
|
|
366
421
|
});
|
|
422
|
+
|
|
423
|
+
const withRef = function (fn) {
|
|
424
|
+
return function (...args) {
|
|
425
|
+
if (!ref) {
|
|
426
|
+
throw new Error('Playground is not initialized.');
|
|
427
|
+
}
|
|
428
|
+
|
|
429
|
+
fn(...args);
|
|
430
|
+
};
|
|
431
|
+
};
|
|
432
|
+
|
|
367
433
|
container.addEventListener('dragover', handleDrop);
|
|
368
434
|
render(jsx(PlaygroundRoot, {
|
|
369
435
|
schema: schema,
|
|
370
436
|
data: data,
|
|
371
437
|
onStateChanged: _state => state = _state,
|
|
372
|
-
onInit: _ref => ref = _ref
|
|
438
|
+
onInit: _ref => ref = _ref,
|
|
439
|
+
emit: emitter.emit,
|
|
440
|
+
...rest
|
|
373
441
|
}), container);
|
|
374
442
|
this.on = emitter.on;
|
|
375
443
|
this.off = emitter.off;
|
|
@@ -389,13 +457,32 @@ function Playground(options) {
|
|
|
389
457
|
return ref.setSchema(schema);
|
|
390
458
|
};
|
|
391
459
|
|
|
460
|
+
this.get = function (name, strict) {
|
|
461
|
+
return ref.get(name, strict);
|
|
462
|
+
};
|
|
463
|
+
|
|
392
464
|
this.destroy = function () {
|
|
393
465
|
this.emit('destroy');
|
|
394
466
|
};
|
|
395
|
-
}
|
|
396
467
|
|
|
397
|
-
function
|
|
398
|
-
|
|
468
|
+
this.attachEditorContainer = withRef(function (node) {
|
|
469
|
+
return ref.attachEditorContainer(node);
|
|
470
|
+
});
|
|
471
|
+
this.attachPreviewContainer = withRef(function (node) {
|
|
472
|
+
return ref.attachFormContainer(node);
|
|
473
|
+
});
|
|
474
|
+
this.attachDataContainer = withRef(function (node) {
|
|
475
|
+
return ref.attachDataContainer(node);
|
|
476
|
+
});
|
|
477
|
+
this.attachResultContainer = withRef(function (node) {
|
|
478
|
+
return ref.attachResultContainer(node);
|
|
479
|
+
});
|
|
480
|
+
this.attachPaletteContainer = withRef(function (node) {
|
|
481
|
+
return ref.attachPaletteContainer(node);
|
|
482
|
+
});
|
|
483
|
+
this.attachPropertiesPanelContainer = withRef(function (node) {
|
|
484
|
+
return ref.attachPropertiesPanelContainer(node);
|
|
485
|
+
});
|
|
399
486
|
}
|
|
400
487
|
|
|
401
488
|
export { Playground };
|
package/dist/index.es.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.es.js","sources":["../src/JSONView.js","../src/Playground.js"],"sourcesContent":["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 default 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","import JSONView from './JSONView';\n\nimport { render } from 'preact';\n\nimport { useRef, useEffect, useState, useCallback } from 'preact/hooks';\n\nimport fileDrop from 'file-drops';\n\nimport mitt from 'mitt';\n\nimport download from 'downloadjs';\n\nimport {\n Form,\n FormEditor\n} from '@bpmn-io/form-js';\n\nimport './FileDrop.css';\nimport './Playground.css';\n\n\nfunction 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\nfunction 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};\n\nfunction serializeValue(obj) {\n return JSON.stringify(JSON.stringify(obj)).replace(/</g, '<').replace(/>/g, '>');\n}\n\nfunction 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\nfunction PlaygroundRoot(props) {\n\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 JSONView({\n value: toJSON(data)\n });\n\n const resultView = resultViewRef.current = new JSONView({\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 });\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-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-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\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}\n\n\nfunction toJSON(obj) {\n return JSON.stringify(obj, null, ' ');\n}"],"names":["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","Modal","props","useEffect","handleKey","event","key","stopPropagation","onClose","document","addEventListener","removeEventListener","_jsxs","_jsx","name","children","Section","elements","Array","isArray","headerItems","reduce","_","child","bucket","type","HeaderItem","push","length","serializeValue","obj","JSON","stringify","replace","EmbedModal","schema","data","fieldRef","useRef","snippet","trim","current","select","PlaygroundRoot","editorContainerRef","formContainerRef","dataContainerRef","resultContainerRef","formEditorRef","formRef","dataEditorRef","resultViewRef","showEmbed","setShowEmbed","useState","initialData","initialSchema","setInitialSchema","setData","setSchema","resultData","setResultData","onInit","dataEditor","JSONView","toJSON","resultView","form","Form","formEditor","FormEditor","renderer","compact","getSchema","parse","err","formContainer","editorContainer","dataContainer","resultContainer","importSchema","onStateChanged","handleDownload","useCallback","download","hideEmbedModal","showEmbedModal","Playground","parent","ref","createElement","classList","add","handleDrop","fileDrop","files","file","contents","render","_state","_ref","getState"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.es.js","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, '<').replace(/>/g, '>');\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":";;;;;;;;;;;;;;AAEO,SAASA,KAAT,CAAeC,KAAf,EAAsB;EAE3BC,SAAS,CAAC,MAAM;IACd,SAASC,SAAT,CAAmBC,KAAnB,EAA0B;MAExB,IAAIA,KAAK,CAACC,GAAN,KAAc,QAAlB,EAA4B;QAC1BD,KAAK,CAACE,eAAN;QAEAL,KAAK,CAACM,OAAN;;;;IAIJC,QAAQ,CAACC,gBAAT,CAA0B,SAA1B,EAAqCN,SAArC;IAEA,OAAO,MAAM;MACXK,QAAQ,CAACE,mBAAT,CAA6B,SAA7B,EAAwCP,SAAxC;KADF;GAZO,CAAT;EAiBA,OACEQ;IAAK,KAAK,EAAC,eAAX;IAAA,WACEC;MAAK,KAAK,EAAC,wBAAX;MAAoC,OAAO,EAAGX,KAAK,CAACM;MADtD,EAEEI;MAAK,KAAK,EAAC,uBAAX;MAAA,WACEC;QAAI,KAAK,EAAC,sBAAV;QAAA,UAAmCX,KAAK,CAACY;QAD3C,EAEED;QAAK,KAAK,EAAC,oBAAX;QAAA,UACIX,KAAK,CAACa;QAHZ,EAKEF;QAAK,KAAK,EAAC,sBAAX;QAAA,UACEA;UAAQ,KAAK,EAAC,uCAAd;UAAsD,OAAO,EAAGX,KAAK,CAACM,OAAtE;UAAA;;QANJ;MAFF;IADF;AAcD;;AC9BM,SAASQ,UAAT,CAAoBd,KAApB,EAA2B;EAEhC,MAAMe,MAAM,GAAGC,cAAc,CAAChB,KAAK,CAACe,MAAP,CAA7B;EACA,MAAME,IAAI,GAAGD,cAAc,CAAChB,KAAK,CAACiB,IAAN,IAAc,EAAf,CAA3B;EAEA,MAAMC,QAAQ,GAAGC,MAAM,EAAvB;EAEA,MAAMC,OAAO,GAAI;AACnB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,4BAA4BH,IAAK;AACjC,8BAA8BF,MAAO;AACrC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GA1BkB,CA0BdM,IA1Bc,EAAhB;EA4BApB,SAAS,CAAC,MAAM;IACdiB,QAAQ,CAACI,OAAT,CAAiBC,MAAjB;GADO,CAAT;EAIA,OACEb,KAAC,KAAD;IAAO,IAAI,EAAC,YAAZ;IAAyB,OAAO,EAAGV,KAAK,CAACM,OAAzC;IAAA,WACEI;MAAA,sEAA0DC;QAAG,IAAI,EAAC,oCAAR;QAAA;QAA1D;MADF,EAGEA;MAAU,UAAU,EAAC,OAArB;MAA6B,GAAG,EAAGO,QAAnC;MAAA,UAA+CE;MAHjD;IADF;AAOD;;AAKD,SAASJ,cAAT,CAAwBQ,GAAxB,EAA6B;EAC3B,OAAOC,IAAI,CAACC,SAAL,CAAeD,IAAI,CAACC,SAAL,CAAeF,GAAf,CAAf,EAAoCG,OAApC,CAA4C,IAA5C,EAAkD,MAAlD,EAA0DA,OAA1D,CAAkE,IAAlE,EAAwE,MAAxE,CAAP;AACD;;AClDM,SAASC,UAAT,CAAoBC,OAAO,GAAG,EAA9B,EAAkC;EAEvC,MAAMC,OAAO,GAAGC,IAAI,EAApB;EAEA,MAAM;IACJC,QAAQ,GAAG;MACTH,OAFJ;EAIA,IAAII,QAAQ,GAAG,IAAIC,WAAJ,GAAkBC,EAAlB,CAAqBC,IAAI,EAAzB,CAAf;EACA,IAAIC,OAAO,GAAG,IAAIH,WAAJ,GAAkBC,EAAlB,CAAqBG,WAAW,CAACD,OAAZ,CAAoBF,EAApB,CAAuB,CAAvB,CAArB,CAAd;;EAEA,SAASI,WAAT,CAAqBC,GAArB,EAA0BC,UAAU,GAAG,EAAvC,EAA2C;IACzC,OAAOH,WAAW,CAACI,MAAZ,CAAmB;MACxBF,GADwB;MAExBC,UAAU,EAAE,CACVE,UADU,EAEVV,QAFU,EAGVI,OAHU,EAIV,GAAGI,UAJO;KAFP,CAAP;;;EAWF,SAASG,UAAT,CAAoBZ,QAApB,EAA8B;IAE5B,MAAMa,cAAc,GAAGC,UAAU,CAACD,cAAX,CAA0BV,EAA1B,CAA6BY,MAAM,IAAI;MAC5D,IAAIA,MAAM,CAACC,UAAX,EAAuB;QACrBlB,OAAO,CAACmB,IAAR,CAAa,SAAb,EAAwB;UACtBC,KAAK,EAAEH,MAAM,CAACI,IAAP,CAAYC,KAAZ,CAAkBZ,GAAlB,CAAsBa,QAAtB;SADT;;KAFmB,CAAvB;IAQA,MAAMC,QAAQ,GAAGR,UAAU,CAACQ,QAAX,CAAoBnB,EAApB,CAAuB,CAACH,QAAxB,CAAjB;IAEA,MAAMmB,IAAI,GAAG,IAAIL,UAAJ,CAAe;MAC1BM,KAAK,EAAEb,WAAW,CAAC,EAAD,EAAK,CAAEM,cAAF,EAAkBS,QAAlB,CAAL;KADP,CAAb;;IAIAH,IAAI,CAACI,QAAL,GAAgB,UAASL,KAAT,EAAgB;MAC9B,KAAKM,QAAL,CAAcjB,WAAW,CAACW,KAAD,EAAQ,CAAEL,cAAF,EAAkBS,QAAlB,CAAR,CAAzB;KADF;;IAIA,OAAOH,IAAP;;;EAGF,MAAMA,IAAI,GAAGP,UAAU,CAACZ,QAAD,CAAvB;;EAEA,KAAKuB,QAAL,GAAgB,UAASL,KAAT,EAAgB;IAC9BC,IAAI,CAACI,QAAL,CAAcL,KAAd;GADF;;EAIA,KAAKO,QAAL,GAAgB,YAAW;IACzB,OAAON,IAAI,CAACC,KAAL,CAAWZ,GAAX,CAAea,QAAf,EAAP;GADF;;EAIA,KAAKK,EAAL,GAAU5B,OAAO,CAAC4B,EAAlB;EACA,KAAKC,GAAL,GAAW7B,OAAO,CAAC6B,GAAnB;;EAEA,KAAKC,QAAL,GAAgB,UAASC,SAAT,EAAoB;IAClCA,SAAS,CAACC,WAAV,CAAsBX,IAAI,CAACY,GAA3B;GADF;;EAIA,KAAKC,OAAL,GAAe,YAAW;IACxB,IAAIb,IAAI,CAACY,GAAL,CAASE,UAAb,EAAyB;MACvBd,IAAI,CAACY,GAAL,CAASE,UAAT,CAAoBC,WAApB,CAAgCf,IAAI,CAACY,GAArC;;;IAGFZ,IAAI,CAACa,OAAL;GALF;AAOD;;AC9EM,SAASG,OAAT,CAAiBnE,KAAjB,EAAwB;EAE7B,MAAMoE,QAAQ,GACZC,KAAK,CAACC,OAAN,CAActE,KAAK,CAACa,QAApB,IACIb,KAAK,CAACa,QADV,GAEE,CAAEb,KAAK,CAACa,QAAR,CAHJ;EAKA,MAAM;IACJ0D,WADI;IAEJ1D;MACEuD,QAAQ,CAACI,MAAT,CAAgB,CAACC,CAAD,EAAIC,KAAJ,KAAc;IAChC,MAAMC,MAAM,GACVD,KAAK,CAACE,IAAN,KAAeT,OAAO,CAACU,UAAvB,GACIJ,CAAC,CAACF,WADN,GAEIE,CAAC,CAAC5D,QAHR;IAKA8D,MAAM,CAACG,IAAP,CAAYJ,KAAZ;IAEA,OAAOD,CAAP;GARE,EASD;IAAEF,WAAW,EAAE,EAAf;IAAmB1D,QAAQ,EAAE;GAT5B,CAHJ;EAcA,OACEH;IAAK,KAAK,EAAC,iBAAX;IAAA,WACEA;MAAI,KAAK,EAAC,QAAV;MAAA,WAAqBV,KAAK,CAACY,IAA3B,OAAoC2D,WAAW,CAACQ,MAAZ,GAAqBpE;QAAM,KAAK,EAAC,cAAZ;QAAA,UAA6B4D;QAAlD,GAAyE,IAA7G;MADF,EAEE5D;MAAK,KAAK,EAAC,MAAX;MAAA,UACIE;MAHN;IADF;AAQD;;AAEDsD,OAAO,CAACU,UAAR,GAAqB,UAAS7E,KAAT,EAAgB;EACnC,OAAOA,KAAK,CAACa,QAAb;AACD,CAFD;;ACRO,SAASmE,cAAT,CAAwBhF,KAAxB,EAA+B;EAEpC,MAAM;IACJiF,OAAO,EAAEC,aAAa,GAAG,EADrB;IAEJC,MAAM,EAAEC,YAAY,GAAG,EAFnB;IAGJnC;MACEjD,KAJJ;EAMA,MAAM;IACJqF,OAAO,EAAEC,cAAc,GAAG;MACxBJ,aAFJ;EAIA,MAAM;IACJK,qBAAqB,GAAG;MACtBH,YAFJ;EAIA,MAAMI,mBAAmB,GAAGrE,MAAM,EAAlC;EACA,MAAMsE,kBAAkB,GAAGtE,MAAM,EAAjC;EACA,MAAMuE,gBAAgB,GAAGvE,MAAM,EAA/B;EACA,MAAMwE,gBAAgB,GAAGxE,MAAM,EAA/B;EACA,MAAMyE,kBAAkB,GAAGzE,MAAM,EAAjC;EACA,MAAM0E,2BAA2B,GAAG1E,MAAM,EAA1C;EAEA,MAAM2E,UAAU,GAAG3E,MAAM,EAAzB;EACA,MAAM4E,aAAa,GAAG5E,MAAM,EAA5B;EACA,MAAM6E,OAAO,GAAG7E,MAAM,EAAtB;EACA,MAAM8E,aAAa,GAAG9E,MAAM,EAA5B;EACA,MAAM+E,aAAa,GAAG/E,MAAM,EAA5B;EACA,MAAMgF,kBAAkB,GAAGhF,MAAM,EAAjC;EAEA,MAAM,CAAEiF,SAAF,EAAaC,YAAb,IAA8BC,QAAQ,CAAC,KAAD,CAA5C;EAEA,MAAM,CAAEC,WAAF,IAAkBD,QAAQ,CAACtG,KAAK,CAACiB,IAAN,IAAc,EAAf,CAAhC;EACA,MAAM,CAAEuF,aAAF,EAAiBC,gBAAjB,IAAsCH,QAAQ,CAACtG,KAAK,CAACe,MAAP,CAApD;EAEA,MAAM,CAAEE,IAAF,EAAQyF,OAAR,IAAoBJ,QAAQ,CAACtG,KAAK,CAACiB,IAAN,IAAc,EAAf,CAAlC;EACA,MAAM,CAAEF,MAAF,EAAU4F,SAAV,IAAwBL,QAAQ,CAACtG,KAAK,CAACe,MAAP,CAAtC;EAEA,MAAM,CAAE6F,UAAF,EAAcC,aAAd,IAAgCP,QAAQ,CAACtG,KAAK,CAACiB,IAAN,IAAc,EAAf,CAA9C,CAtCoC;;EAyCpChB,SAAS,CAAC,MAAM;IACdD,KAAK,CAAC8G,MAAN,CAAa;MACXC,mBAAmB,EAAGC,IAAD,IAAUf,aAAa,CAAC3E,OAAd,CAAsBsC,QAAtB,CAA+BoD,IAA/B,CADpB;MAEXC,qBAAqB,EAAGD,IAAD,IAAUjB,aAAa,CAACzE,OAAd,CAAsBsC,QAAtB,CAA+BoD,IAA/B,CAFtB;MAGXE,mBAAmB,EAAGF,IAAD,IAAUhB,OAAO,CAAC1E,OAAR,CAAgBsC,QAAhB,CAAyBoD,IAAzB,CAHpB;MAIXG,sBAAsB,EAAGH,IAAD,IAAUlB,UAAU,CAACxE,OAAX,CAAmBsC,QAAnB,CAA4BoD,IAA5B,CAJvB;MAKXI,8BAA8B,EAAGJ,IAAD,IAAUb,kBAAkB,CAAC7E,OAAnB,CAA2BsC,QAA3B,CAAoCoD,IAApC,CAL/B;MAMXK,qBAAqB,EAAGL,IAAD,IAAUd,aAAa,CAAC5E,OAAd,CAAsBsC,QAAtB,CAA+BoD,IAA/B,CANtB;MAOXM,GAAG,EAAE,CAAC1G,IAAD,EAAO2G,MAAP,KAAkBxB,aAAa,CAACzE,OAAd,CAAsBgG,GAAtB,CAA0B1G,IAA1B,EAAgC2G,MAAhC,CAPZ;MAQXZ,SAAS,EAAEF;KARb;GADO,CAAT;EAaAxG,SAAS,CAAC,MAAM;IACdwG,gBAAgB,CAACzG,KAAK,CAACe,MAAN,IAAgB,EAAjB,CAAhB;GADO,EAEN,CAAEf,KAAK,CAACe,MAAR,CAFM,CAAT;EAIAd,SAAS,CAAC,MAAM;IACd,MAAMuH,UAAU,GAAGvB,aAAa,CAAC3E,OAAd,GAAwB,IAAIM,UAAJ,CAAe;MACxDsB,KAAK,EAAEuE,MAAM,CAACxG,IAAD;KAD4B,CAA3C;IAIA,MAAMyG,UAAU,GAAGxB,aAAa,CAAC5E,OAAd,GAAwB,IAAIM,UAAJ,CAAe;MACxDI,QAAQ,EAAE,IAD8C;MAExDkB,KAAK,EAAEuE,MAAM,CAACb,UAAD;KAF4B,CAA3C;IAKA,MAAMe,IAAI,GAAG3B,OAAO,CAAC1E,OAAR,GAAkB,IAAIsG,IAAJ,EAA/B;IACA,MAAMC,UAAU,GAAG9B,aAAa,CAACzE,OAAd,GAAwB,IAAIwG,UAAJ,CAAe;MACxDC,QAAQ,EAAE;QACRC,OAAO,EAAE;OAF6C;MAIxDC,OAAO,EAAE;QACPC,MAAM,EAAE1C,mBAAmB,CAAClE;OAL0B;MAOxD6G,eAAe,EAAE;QACfD,MAAM,EAAE,CAAC3C,qBAAD,IAA0BM,2BAA2B,CAACvE;;KARvB,CAA3C;IAYAwE,UAAU,CAACxE,OAAX,GAAqBuG,UAAU,CAACP,GAAX,CAAe,SAAf,CAArB;IACAnB,kBAAkB,CAAC7E,OAAnB,GAA6BuG,UAAU,CAACP,GAAX,CAAe,iBAAf,CAA7B;IAEAO,UAAU,CAACnE,EAAX,CAAc,SAAd,EAAyB,MAAM;MAC7BiD,SAAS,CAACkB,UAAU,CAACO,SAAX,EAAD,CAAT;KADF;IAIAP,UAAU,CAACnE,EAAX,CAAc,qBAAd,EAAqC,MAAM;;MAGzCT,IAAI,CAAC,yBAAD,CAAJ;KAHF;IAMA0E,IAAI,CAACjE,EAAL,CAAQ,SAAR,EAAmBvD,KAAK,IAAI;MAC1B0G,aAAa,CAAC1G,KAAK,CAACc,IAAP,CAAb;KADF;IAIAuG,UAAU,CAAC9D,EAAX,CAAc,SAAd,EAAyBvD,KAAK,IAAI;MAChC,IAAI;QACFuG,OAAO,CAACjF,IAAI,CAAC4G,KAAL,CAAWlI,KAAK,CAAC+C,KAAjB,CAAD,CAAP;OADF,CAEE,OAAOoF,GAAP,EAAY;;KAHhB;IASA,MAAMC,aAAa,GAAG7C,gBAAgB,CAACpE,OAAvC;IACA,MAAMkH,eAAe,GAAG/C,kBAAkB,CAACnE,OAA3C;IACA,MAAMmH,aAAa,GAAG9C,gBAAgB,CAACrE,OAAvC;IACA,MAAMoH,eAAe,GAAG9C,kBAAkB,CAACtE,OAA3C;IAEAkG,UAAU,CAAC5D,QAAX,CAAoB6E,aAApB;IACAf,UAAU,CAAC9D,QAAX,CAAoB8E,eAApB;IACAf,IAAI,CAAC/D,QAAL,CAAc2E,aAAd;IACAV,UAAU,CAACjE,QAAX,CAAoB4E,eAApB;IAEA,OAAO,MAAM;MACXhB,UAAU,CAACxD,OAAX;MACA0D,UAAU,CAAC1D,OAAX;MACA2D,IAAI,CAAC3D,OAAL;MACA6D,UAAU,CAAC7D,OAAX;KAJF;GA3DO,EAiEN,EAjEM,CAAT;EAmEA/D,SAAS,CAAC,MAAM;IACdgG,aAAa,CAAC3E,OAAd,CAAsBiC,QAAtB,CAA+BkE,MAAM,CAAClB,WAAD,CAArC;GADO,EAEN,CAAEA,WAAF,CAFM,CAAT;EAIAtG,SAAS,CAAC,MAAM;IACd8F,aAAa,CAACzE,OAAd,CAAsBqH,YAAtB,CAAmCnC,aAAnC;GADO,EAEN,CAAEA,aAAF,CAFM,CAAT;EAIAvG,SAAS,CAAC,MAAM;IACd+F,OAAO,CAAC1E,OAAR,CAAgBqH,YAAhB,CAA6B5H,MAA7B,EAAqCE,IAArC;GADO,EAEN,CAAEF,MAAF,EAAUE,IAAV,CAFM,CAAT;EAIAhB,SAAS,CAAC,MAAM;IACdiG,aAAa,CAAC5E,OAAd,CAAsBiC,QAAtB,CAA+BkE,MAAM,CAACb,UAAD,CAArC;GADO,EAEN,CAAEA,UAAF,CAFM,CAAT;EAIA3G,SAAS,CAAC,MAAM;IACdD,KAAK,CAAC4I,cAAN,CAAqB;MACnB7H,MADmB;MAEnBE;KAFF;GADO,EAKN,CAAEF,MAAF,EAAUE,IAAV,CALM,CAAT;EAOA,MAAM4H,cAAc,GAAGC,WAAW,CAAC,MAAM;IAEvCC,QAAQ,CAACtH,IAAI,CAACC,SAAL,CAAeX,MAAf,EAAuB,IAAvB,EAA6B,IAA7B,CAAD,EAAqC,WAArC,EAAkD,WAAlD,CAAR;GAFgC,EAG/B,CAAEA,MAAF,CAH+B,CAAlC;EAKA,MAAMiI,cAAc,GAAGF,WAAW,CAAC,MAAM;IACvCzC,YAAY,CAAC,KAAD,CAAZ;GADgC,EAE/B,EAF+B,CAAlC;EAIA,MAAM4C,cAAc,GAAGH,WAAW,CAAC,MAAM;IACvCzC,YAAY,CAAC,IAAD,CAAZ;GADgC,EAE/B,EAF+B,CAAlC;EAIA,OACE3F;IAAK,KAAK,EAAGwI,UAAU,CACrB,eADqB,EAErB,cAFqB,EAGrB;MAAE,+BAA+B3D;KAHZ,CAAvB;IAAA,WAIE5E;MAAK,KAAK,EAAC,gBAAX;MAAA,UACIyF,SAAS,GAAGzF,IAAC,UAAD;QAAY,MAAM,EAAGI,MAArB;QAA8B,IAAI,EAAGE,IAArC;QAA4C,OAAO,EAAG+H;QAAzD,GAA+E;MAL9F,EAOErI;MAAK,KAAK,EAAC,2BAAX;MAAuC,GAAG,EAAG6E;MAP/C,EAQE9E;MAAK,KAAK,EAAC,cAAX;MAAA,WAEEA,KAAC,OAAD;QAAS,IAAI,EAAC,iBAAd;QAAA,WAGI4E,cAAc,IAAI3E,IAAC,OAAD,CAAS,UAAT;UAAA,UAChBA;YACE,KAAK,EAAC,gBADR;YAEE,KAAK,EAAC,0BAFR;YAGE,OAAO,EAAGkI,cAHZ;YAAA;;UAJN,EAaIvD,cAAc,IAAI3E,IAAC,OAAD,CAAS,UAAT;UAAA,UAChBA;YACE,KAAK,EAAC,gBADR;YAEE,OAAO,EAAGsI,cAFZ;YAAA;;UAdN,EAqBEtI;UAAK,GAAG,EAAG8E,kBAAX;UAAgC,KAAK,EAAC;UArBxC;QAFF,EAyBE9E,IAAC,OAAD;QAAS,IAAI,EAAC,cAAd;QAAA,UACEA;UAAK,GAAG,EAAG+E,gBAAX;UAA8B,KAAK,EAAC;;QA1BxC,EA4BE/E,IAAC,OAAD;QAAS,IAAI,EAAC,mBAAd;QAAA,UACEA;UAAK,GAAG,EAAGgF,gBAAX;UAA8B,KAAK,EAAC;;QA7BxC,EA+BEhF,IAAC,OAAD;QAAS,IAAI,EAAC,oBAAd;QAAA,UACEA;UAAK,GAAG,EAAGiF,kBAAX;UAAgC,KAAK,EAAC;;QAhC1C;MARF,EA2CEjF;MAAK,KAAK,EAAC,8BAAX;MAA0C,GAAG,EAAGkF;MA3ClD;IADF;AA+CD;;AAKD,SAAS4B,MAAT,CAAgBjG,GAAhB,EAAqB;EACnB,OAAOC,IAAI,CAACC,SAAL,CAAeF,GAAf,EAAoB,IAApB,EAA0B,IAA1B,CAAP;AACD;;ACzNc,SAAS2H,UAAT,CAAoBtH,OAApB,EAA6B;EAE1C,MAAM;IACJgC,SAAS,EAAEqE,MADP;IAEJnH,MAFI;IAGJE,IAHI;IAIJ,GAAGmI;MACDvH,OALJ;EAOA,MAAMC,OAAO,GAAGC,IAAI,EAApB;EAEA,IAAIqB,KAAK,GAAG;IAAEnC,IAAF;IAAQF;GAApB;EACA,IAAIsI,GAAJ;EAEA,MAAMxF,SAAS,GAAGtD,QAAQ,CAAC+I,aAAT,CAAuB,KAAvB,CAAlB;EAEAzF,SAAS,CAAC0F,SAAV,CAAoBC,GAApB,CAAwB,gBAAxB;;EAEA,IAAItB,MAAJ,EAAY;IACVA,MAAM,CAACpE,WAAP,CAAmBD,SAAnB;;;EAGF,MAAM4F,UAAU,GAAGC,QAAQ,CAAC,kBAAD,EAAqB,UAASC,KAAT,EAAgB;IAC9D,MAAMC,IAAI,GAAGD,KAAK,CAAC,CAAD,CAAlB;;IAEA,IAAIC,IAAJ,EAAU;MACR,IAAI;QACFP,GAAG,CAAC1C,SAAJ,CAAclF,IAAI,CAAC4G,KAAL,CAAWuB,IAAI,CAACC,QAAhB,CAAd;OADF,CAEE,OAAOvB,GAAP,EAAY;;;GANS,CAA3B;;EAaA,MAAMwB,OAAO,GAAG,UAASC,EAAT,EAAa;IAC3B,OAAO,UAAS,GAAGC,IAAZ,EAAkB;MACvB,IAAI,CAACX,GAAL,EAAU;QACR,MAAM,IAAIY,KAAJ,CAAU,gCAAV,CAAN;;;MAGFF,EAAE,CAAC,GAAGC,IAAJ,CAAF;KALF;GADF;;EAUAnG,SAAS,CAACrD,gBAAV,CAA2B,UAA3B,EAAuCiJ,UAAvC;EAEAS,MAAM,CACJvJ,IAAC,cAAD;IACE,MAAM,EAAGI,MADX;IAEE,IAAI,EAAGE,IAFT;IAGE,cAAc,EAAIkJ,MAAD,IAAY/G,KAAK,GAAG+G,MAHvC;IAIE,MAAM,EAAGC,IAAI,IAAIf,GAAG,GAAGe,IAJzB;IAKE,IAAI,EAAGtI,OAAO,CAACmB,IALjB;IAAA,GAMOmG;IAPH,EASJvF,SATI,CAAN;EAYA,KAAKH,EAAL,GAAU5B,OAAO,CAAC4B,EAAlB;EACA,KAAKC,GAAL,GAAW7B,OAAO,CAAC6B,GAAnB;EAEA,KAAKV,IAAL,GAAYnB,OAAO,CAACmB,IAApB;EAEA,KAAKS,EAAL,CAAQ,SAAR,EAAmB,YAAW;IAC5BwG,MAAM,CAAC,IAAD,EAAOrG,SAAP,CAAN;GADF;EAIA,KAAKH,EAAL,CAAQ,SAAR,EAAmB,YAAW;IAC5BwE,MAAM,CAAChE,WAAP,CAAmBL,SAAnB;GADF;;EAIA,KAAKwG,QAAL,GAAgB,YAAW;IACzB,OAAOjH,KAAP;GADF;;EAIA,KAAKuD,SAAL,GAAiB,UAAS5F,MAAT,EAAiB;IAChC,OAAOsI,GAAG,CAAC1C,SAAJ,CAAc5F,MAAd,CAAP;GADF;;EAIA,KAAKuG,GAAL,GAAW,UAAS1G,IAAT,EAAe2G,MAAf,EAAuB;IAChC,OAAO8B,GAAG,CAAC/B,GAAJ,CAAQ1G,IAAR,EAAc2G,MAAd,CAAP;GADF;;EAIA,KAAKvD,OAAL,GAAe,YAAW;IACxB,KAAKf,IAAL,CAAU,SAAV;GADF;;EAIA,KAAKgE,qBAAL,GAA6B6C,OAAO,CAAC,UAAS9C,IAAT,EAAe;IAClD,OAAOqC,GAAG,CAACpC,qBAAJ,CAA0BD,IAA1B,CAAP;GADkC,CAApC;EAIA,KAAKsD,sBAAL,GAA8BR,OAAO,CAAC,UAAS9C,IAAT,EAAe;IACnD,OAAOqC,GAAG,CAACnC,mBAAJ,CAAwBF,IAAxB,CAAP;GADmC,CAArC;EAIA,KAAKD,mBAAL,GAA2B+C,OAAO,CAAC,UAAS9C,IAAT,EAAe;IAChD,OAAOqC,GAAG,CAACtC,mBAAJ,CAAwBC,IAAxB,CAAP;GADgC,CAAlC;EAIA,KAAKK,qBAAL,GAA6ByC,OAAO,CAAC,UAAS9C,IAAT,EAAe;IAClD,OAAOqC,GAAG,CAAChC,qBAAJ,CAA0BL,IAA1B,CAAP;GADkC,CAApC;EAIA,KAAKG,sBAAL,GAA8B2C,OAAO,CAAC,UAAS9C,IAAT,EAAe;IACnD,OAAOqC,GAAG,CAAClC,sBAAJ,CAA2BH,IAA3B,CAAP;GADmC,CAArC;EAIA,KAAKI,8BAAL,GAAsC0C,OAAO,CAAC,UAAS9C,IAAT,EAAe;IAC3D,OAAOqC,GAAG,CAACjC,8BAAJ,CAAmCJ,IAAnC,CAAP;GAD2C,CAA7C;AAGD;;;;"}
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @typedef { {
|
|
3
|
+
* container?: Element,
|
|
4
|
+
* schema: any,
|
|
5
|
+
* data: any,
|
|
6
|
+
* editor?: { inlinePropertiesPanel: Boolean }
|
|
7
|
+
* actions?: { display: Boolean }
|
|
8
|
+
* } } FormPlaygroundOptions
|
|
9
|
+
*/
|
|
10
|
+
/**
|
|
11
|
+
* @param {FormPlaygroundOptions} options
|
|
12
|
+
*/
|
|
13
|
+
export default function Playground(options: FormPlaygroundOptions): void;
|
|
14
|
+
export default class Playground {
|
|
15
|
+
/**
|
|
16
|
+
* @typedef { {
|
|
17
|
+
* container?: Element,
|
|
18
|
+
* schema: any,
|
|
19
|
+
* data: any,
|
|
20
|
+
* editor?: { inlinePropertiesPanel: Boolean }
|
|
21
|
+
* actions?: { display: Boolean }
|
|
22
|
+
* } } FormPlaygroundOptions
|
|
23
|
+
*/
|
|
24
|
+
/**
|
|
25
|
+
* @param {FormPlaygroundOptions} options
|
|
26
|
+
*/
|
|
27
|
+
constructor(options: FormPlaygroundOptions);
|
|
28
|
+
on: {
|
|
29
|
+
<Key extends import("mitt").EventType>(type: Key, handler: import("mitt").Handler<Record<import("mitt").EventType, unknown>[Key]>): void;
|
|
30
|
+
(type: "*", handler: import("mitt").WildcardHandler<Record<import("mitt").EventType, unknown>>): void;
|
|
31
|
+
};
|
|
32
|
+
off: {
|
|
33
|
+
<Key_1 extends import("mitt").EventType>(type: Key_1, handler?: import("mitt").Handler<Record<import("mitt").EventType, unknown>[Key_1]>): void;
|
|
34
|
+
(type: "*", handler: import("mitt").WildcardHandler<Record<import("mitt").EventType, unknown>>): void;
|
|
35
|
+
};
|
|
36
|
+
emit: {
|
|
37
|
+
<Key_2 extends import("mitt").EventType>(type: Key_2, event: Record<import("mitt").EventType, unknown>[Key_2]): void;
|
|
38
|
+
<Key_3 extends import("mitt").EventType>(type: undefined extends Record<import("mitt").EventType, unknown>[Key_3] ? Key_3 : never): void;
|
|
39
|
+
};
|
|
40
|
+
getState: () => {
|
|
41
|
+
data: any;
|
|
42
|
+
schema: any;
|
|
43
|
+
};
|
|
44
|
+
setSchema: (schema: any) => any;
|
|
45
|
+
get: (name: any, strict: any) => any;
|
|
46
|
+
destroy: () => void;
|
|
47
|
+
attachEditorContainer: (...args: any[]) => void;
|
|
48
|
+
attachPreviewContainer: (...args: any[]) => void;
|
|
49
|
+
attachDataContainer: (...args: any[]) => void;
|
|
50
|
+
attachResultContainer: (...args: any[]) => void;
|
|
51
|
+
attachPaletteContainer: (...args: any[]) => void;
|
|
52
|
+
attachPropertiesPanelContainer: (...args: any[]) => void;
|
|
53
|
+
}
|
|
54
|
+
export type FormPlaygroundOptions = {
|
|
55
|
+
container?: Element;
|
|
56
|
+
schema: any;
|
|
57
|
+
data: any;
|
|
58
|
+
editor?: {
|
|
59
|
+
inlinePropertiesPanel: boolean;
|
|
60
|
+
};
|
|
61
|
+
actions?: {
|
|
62
|
+
display: boolean;
|
|
63
|
+
};
|
|
64
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export function EmbedModal(props: any): any;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
export function JSONEditor(options?: {}): void;
|
|
2
|
+
export class JSONEditor {
|
|
3
|
+
constructor(options?: {});
|
|
4
|
+
setValue: (value: any) => void;
|
|
5
|
+
getValue: () => string;
|
|
6
|
+
on: {
|
|
7
|
+
<Key extends import("mitt").EventType>(type: Key, handler: import("mitt").Handler<Record<import("mitt").EventType, unknown>[Key]>): void;
|
|
8
|
+
(type: "*", handler: import("mitt").WildcardHandler<Record<import("mitt").EventType, unknown>>): void;
|
|
9
|
+
};
|
|
10
|
+
off: {
|
|
11
|
+
<Key_1 extends import("mitt").EventType>(type: Key_1, handler?: import("mitt").Handler<Record<import("mitt").EventType, unknown>[Key_1]>): void;
|
|
12
|
+
(type: "*", handler: import("mitt").WildcardHandler<Record<import("mitt").EventType, unknown>>): void;
|
|
13
|
+
};
|
|
14
|
+
attachTo: (container: any) => void;
|
|
15
|
+
destroy: () => void;
|
|
16
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export function Modal(props: any): any;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export function PlaygroundRoot(props: any): any;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as Playground } from "./Playground";
|