feat: implement script component (viewer)

Related to #1102

Author: Skaiir

package-lock.json

@@ -1203,6 +1203,10 @@
   margin-right: 4px;
 }
 
+.fjs-container .fjs-sandbox-iframe-container {
+  display: none;
+}
+
 /**
 * Flatpickr style adjustments
 */

packages/form-js-viewer/assets/form-js-base.css

@@ -46,6 +46,7 @@
   },
   "dependencies": {
     "@carbon/grid": "^11.11.0",
+    "@jetbrains/websandbox": "^1.0.10",
     "big.js": "^6.2.1",
     "classnames": "^2.3.1",
     "didi": "^10.2.2",
@@ -57,7 +58,8 @@
     "lodash": "^4.5.0",
     "marked": "^12.0.1",
     "min-dash": "^4.2.1",
-    "preact": "^10.5.14"
+    "preact": "^10.5.14",
+    "uuid": "^9.0.1"
   },
   "sideEffects": [
     "*.css"

packages/form-js-viewer/package.json

@@ -58,6 +58,7 @@ export default [
       'flatpickr',
       'marked',
       '@carbon/grid',
+      '@jetbrains/websandbox',
       'feelers',
       'dompurify'
     ],

packages/form-js-viewer/rollup.config.js

@@ -446,42 +446,44 @@ export class Form {
     const pathRegistry = this.get('pathRegistry');
     const formData = this._getState().data;
 
-    function collectSubmitDataRecursively(submitData, formField, indexes) {
-      const { disabled, type } = formField;
+    function collectSubmitDataRecursively(submitData, field, indexes) {
+      const { disabled, type } = field;
       const { config: fieldConfig } = formFields.get(type);
 
       // (1) Process keyed fields
-      if (!disabled && fieldConfig.keyed) {
-        const valuePath = pathRegistry.getValuePath(formField, { indexes });
+      const isSubmittedKeyedField = fieldConfig.keyed && !disabled && !(fieldConfig.allowDoNotSubmit && field.doNotSubmit);
+
+      if (isSubmittedKeyedField) {
+        const valuePath = pathRegistry.getValuePath(field, { indexes });
         const value = get(formData, valuePath);
         set(submitData, valuePath, value);
       }
 
       // (2) Process parents
-      if (!Array.isArray(formField.components)) {
+      if (!Array.isArray(field.components)) {
         return;
       }
 
       // (3a) Recurse repeatable parents both across the indexes of repetition and the children
-      if (fieldConfig.repeatable && formField.isRepeating) {
+      if (fieldConfig.repeatable && field.isRepeating) {
 
-        const valueData = get(formData, pathRegistry.getValuePath(formField, { indexes }));
+        const valueData = get(formData, pathRegistry.getValuePath(field, { indexes }));
 
         if (!Array.isArray(valueData)) {
           return;
         }
 
         valueData.forEach((_, index) => {
-          formField.components.forEach((component) => {
-            collectSubmitDataRecursively(submitData, component, { ...indexes, [formField.id]: index });
+          field.components.forEach((component) => {
+            collectSubmitDataRecursively(submitData, component, { ...indexes, [field.id]: index });
           });
         });
 
         return;
       }
 
       // (3b) Recurse non-repeatable parents only across the children
-      formField.components.forEach((component) => collectSubmitDataRecursively(submitData, component, indexes));
+      field.components.forEach((component) => collectSubmitDataRecursively(submitData, component, indexes));
     }
 
     const workingSubmitData = {};

packages/form-js-viewer/src/Form.js

@@ -41,9 +41,10 @@ export function ExpressionField(props) {
 ExpressionField.config = {
   type,
   label: 'Expression',
-  group: 'basic-input',
+  group: 'advanced',
   keyed: true,
   emptyValue: null,
+  allowDoNotSubmit: true,
   escapeGridRender: true,
   create: (options = {}) => ({
     computeOn: 'change',