@bpmn-io/form-js-editor 1.4.1 → 1.5.0

package/dist/index.es.js

@@ -1,9 +1,9 @@
-import { FormFieldRegistry as FormFieldRegistry$1, iconsByType, Text as Text$1, FormFields, sanitizeImageSource, FormContext, FormRenderContext, FormComponent, Importer, PathRegistry, FormLayouter, FieldFactory, runRecursively, clone, VALUES_SOURCES, VALUES_SOURCES_PATHS, getSchemaVariables, DATETIME_SUBTYPES, DATE_LABEL_PATH, TIME_LABEL_PATH, DATETIME_SUBTYPE_PATH, DATETIME_SUBTYPES_LABELS, TIME_SERIALISING_FORMAT_PATH, TIME_SERIALISING_FORMATS, TIME_INTERVAL_PATH, TIME_USE24H_PATH, DATE_DISALLOW_PAST_PATH, TIME_SERIALISINGFORMAT_LABELS, getValuesSource, VALUES_SOURCES_DEFAULTS, VALUES_SOURCES_LABELS, FeelExpressionLanguage, createFormContainer, createInjector, MarkdownModule, schemaVersion } from '@bpmn-io/form-js-viewer';
+import { FormFieldRegistry as FormFieldRegistry$1, iconsByType, IFrame, Text as Text$1, FormFields, sanitizeImageSource, FormContext, FormRenderContext, FormComponent, Importer, PathRegistry, FormLayouter, FieldFactory, runRecursively, clone, VALUES_SOURCES, VALUES_SOURCES_PATHS, getSchemaVariables, DATETIME_SUBTYPES, DATE_LABEL_PATH, TIME_LABEL_PATH, DATETIME_SUBTYPE_PATH, DATETIME_SUBTYPES_LABELS, TIME_SERIALISING_FORMAT_PATH, TIME_SERIALISING_FORMATS, TIME_INTERVAL_PATH, TIME_USE24H_PATH, DATE_DISALLOW_PAST_PATH, TIME_SERIALISINGFORMAT_LABELS, getValuesSource, VALUES_SOURCES_DEFAULTS, VALUES_SOURCES_LABELS, FeelExpressionLanguage, createFormContainer, createInjector, MarkdownModule, schemaVersion } from '@bpmn-io/form-js-viewer';
 export { schemaVersion } from '@bpmn-io/form-js-viewer';
 import Ids from 'ids';
 import { isArray, isFunction, isNumber, bind, assign, debounce, forEach, get, isObject, uniqueBy, sortBy, find, isString, set as set$1, reduce, isUndefined, without, has } from 'min-dash';
-import classnames from 'classnames';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'preact/jsx-runtime';
+import classnames from 'classnames';
 import { useContext, useRef, useEffect, useMemo, useState, useCallback, useLayoutEffect } from 'preact/hooks';
 import { createContext, Fragment, render, createElement } from 'preact';
 import * as React from 'preact/compat';
@@ -644,6 +644,25 @@ function calculateMaxColumnsWithAuto(autoCols) {
   return MAX_COLUMNS_PER_ROW - autoCols * 2;
 }
 
+function EditorIFrame(props) {
+  const {
+    field
+  } = props;
+  const Icon = iconsByType(field.type);
+  return jsx("div", {
+    class: "fjs-iframe-placeholder",
+    children: jsxs("p", {
+      class: "fjs-iframe-placeholder-text",
+      children: [jsx(Icon, {
+        width: "32",
+        height: "24",
+        viewBox: "0 0 56 56"
+      }), "iFrame"]
+    })
+  });
+}
+EditorIFrame.config = IFrame.config;
+
 const emptyImage = createEmptyImage();
 function editorFormFieldClasses(type, {
   disabled = false
@@ -979,7 +998,7 @@ function EditorText(props) {
 }
 EditorText.config = Text$1.config;
 
-const editorFormFields = [EditorText];
+const editorFormFields = [EditorIFrame, EditorText];
 
 class EditorFormFields extends FormFields {
   constructor() {
@@ -1278,6 +1297,9 @@ const PALETTE_GROUPS = [{
 }, {
   label: 'Presentation',
   id: 'presentation'
+}, {
+  label: 'Containers',
+  id: 'container'
 }, {
   label: 'Action',
   id: 'action'
@@ -3300,11 +3322,13 @@ class MoveFormFieldHandler {
    * @param { import('../../../FormEditor').default } formEditor
    * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
    * @param { import('@bpmn-io/form-js-viewer').PathRegistry } pathRegistry
+   * @param { import('@bpmn-io/form-js-viewer').FormLayouter } formLayouter
    */
-  constructor(formEditor, formFieldRegistry, pathRegistry) {
+  constructor(formEditor, formFieldRegistry, pathRegistry, formLayouter) {
     this._formEditor = formEditor;
     this._formFieldRegistry = formFieldRegistry;
     this._pathRegistry = pathRegistry;
+    this._formLayouter = formLayouter;
   }
   execute(context) {
     this.moveFormField(context);
@@ -3351,8 +3375,8 @@ class MoveFormFieldHandler {
       }
       const formField = get(schema, [...sourcePath, sourceIndex]);
 
-      // (1) Add to row
-      updateRow(formField, targetRow ? targetRow.id : null);
+      // (1) Add to row or create new one
+      updateRow(formField, targetRow ? targetRow.id : this._formLayouter.nextRowId());
 
       // (2) Move form field
       mutate(get(schema, sourcePath), sourceIndex, targetIndex);
@@ -3377,8 +3401,8 @@ class MoveFormFieldHandler {
       get(schema, sourcePath).forEach((formField, index) => updatePath(this._formFieldRegistry, formField, index));
       const targetPath = [...targetFormField._path, 'components'];
 
-      // (4) Add to row
-      updateRow(formField, targetRow ? targetRow.id : null);
+      // (4) Add to row or create new one
+      updateRow(formField, targetRow ? targetRow.id : this._formLayouter.nextRowId());
 
       // (5) Add form field
       arrayAdd$1(get(schema, targetPath), targetIndex, formField);
@@ -3401,7 +3425,7 @@ class MoveFormFieldHandler {
     });
   }
 }
-MoveFormFieldHandler.$inject = ['formEditor', 'formFieldRegistry', 'pathRegistry'];
+MoveFormFieldHandler.$inject = ['formEditor', 'formFieldRegistry', 'pathRegistry', 'formLayouter'];
 
 class RemoveFormFieldHandler {
   /**
@@ -3991,12 +4015,21 @@ class FormLayoutUpdater extends CommandInterceptor {
     const {
       schema
     } = this._formEditor._getState();
+    const setRowIds = parent => {
+      if (!parent.components || !parent.components.length) {
+        return;
+      }
+      parent.components.forEach(formField => {
+        const row = this._formLayouter.getRowForField(formField);
+        updateRow(formField, row.id);
+
+        // handle children recursively
+        setRowIds(formField);
+      });
+    };
 
     // make sure rows are persisted in schema (e.g. for migration case)
-    schema.components.forEach(formField => {
-      const row = this._formLayouter.getRowForField(formField);
-      updateRow(formField, row.id);
-    });
+    setRowIds(schema);
   }
 }
 FormLayoutUpdater.$inject = ['eventBus', 'formLayouter', 'modeling', 'formEditor'];
@@ -9540,6 +9573,8 @@ function simpleBoolEntryFactory(options) {
     description,
     path,
     props,
+    getValue,
+    setValue,
     isDefaultVisible
   } = options;
   const {
@@ -9554,8 +9589,10 @@ function simpleBoolEntryFactory(options) {
     editField,
     description,
     component: SimpleBoolComponent,
-    isEdited: isEdited$5,
-    isDefaultVisible
+    isEdited: isEdited$8,
+    isDefaultVisible,
+    getValue,
+    setValue
   };
 }
 const SimpleBoolComponent = props => {
@@ -9565,16 +9602,17 @@ const SimpleBoolComponent = props => {
     path,
     field,
     editField,
+    getValue = () => get(field, path, ''),
+    setValue = value => editField(field, path, value || false),
     description
   } = props;
-  const getValue = () => get(field, path, '');
-  const setValue = value => editField(field, path, value || false);
-  return CheckboxEntry({
+  return ToggleSwitchEntry({
     element: field,
     getValue,
     id,
     label,
     setValue,
+    inline: true,
     description
   });
 };
@@ -9630,7 +9668,7 @@ function LabelEntry(props) {
     editField,
     field,
     isEdited: isEdited$6,
-    isDefaultVisible: field => INPUTS.includes(field.type) || field.type === 'button' || field.type === 'group'
+    isDefaultVisible: field => INPUTS.includes(field.type) || field.type === 'button' || field.type === 'group' || field.type === 'iframe'
   });
   return entries;
 }
@@ -9651,7 +9689,7 @@ function Label$1(props) {
   const setValue = value => {
     return editField(field, path, value || '');
   };
-  const label = field.type === 'group' ? 'Group label' : 'Field label';
+  const label = getLabelText(field);
   return FeelTemplatingEntry({
     debounce,
     element: field,
@@ -9720,6 +9758,165 @@ function TimeLabel(props) {
   });
 }
 
+// helpers //////////
+
+function getLabelText(field) {
+  const {
+    type
+  } = field;
+  if (type === 'group') {
+    return 'Group label';
+  }
+  if (type === 'iframe') {
+    return 'Title';
+  }
+  return 'Field label';
+}
+
+function HeightEntry(props) {
+  const {
+    editField,
+    field,
+    id,
+    description,
+    isDefaultVisible,
+    defaultValue
+  } = props;
+  const entries = [];
+  entries.push({
+    id: id + '-height',
+    component: Height,
+    description,
+    isEdited: isEdited$7,
+    editField,
+    field,
+    defaultValue,
+    isDefaultVisible: field => {
+      if (isFunction(isDefaultVisible)) {
+        return isDefaultVisible(field);
+      }
+      return field.type === 'spacer';
+    }
+  });
+  return entries;
+}
+function Height(props) {
+  const {
+    description,
+    editField,
+    field,
+    id,
+    defaultValue = 60 // default value for spacer
+  } = props;
+  const debounce = useService('debounce');
+  const getValue = e => get(field, ['height'], defaultValue);
+  const setValue = (value, error) => {
+    if (error) {
+      return;
+    }
+    editField(field, ['height'], value);
+  };
+  return NumberFieldEntry({
+    debounce,
+    description,
+    label: 'Height',
+    element: field,
+    id,
+    getValue,
+    setValue,
+    validate: value => {
+      if (value === undefined || value === null) return;
+      if (value < 1) return 'Should be greater than zero.';
+      if (!Number.isInteger(value)) return 'Should be an integer.';
+    }
+  });
+}
+
+function IFrameHeightEntry(props) {
+  return [...HeightEntry({
+    ...props,
+    defaultValue: 300,
+    description: 'Height of the container in pixels.',
+    isDefaultVisible: field => field.type === 'iframe'
+  })];
+}
+
+const HTTPS_PATTERN = /^(https):\/\/*/i; // eslint-disable-line no-useless-escape
+
+function IFrameUrlEntry(props) {
+  const {
+    editField,
+    field
+  } = props;
+  const entries = [];
+  entries.push({
+    id: 'url',
+    component: Url,
+    editField: editField,
+    field: field,
+    isEdited: isEdited$6,
+    isDefaultVisible: field => field.type === 'iframe'
+  });
+  return entries;
+}
+function Url(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
+  const debounce = useService('debounce');
+  const variables = useVariables().map(name => ({
+    name
+  }));
+  const path = ['url'];
+  const getValue = () => {
+    return get(field, path, '');
+  };
+  const setValue = value => {
+    return editField(field, path, value);
+  };
+  const validate = value => {
+    if (!value) {
+      return;
+    }
+    if (!HTTPS_PATTERN.test(value)) {
+      return 'For security reasons the URL must start with "https".';
+    }
+  };
+  return FeelTemplatingEntry({
+    debounce,
+    element: field,
+    feel: 'optional',
+    getValue,
+    id,
+    label: 'URL',
+    setValue,
+    singleLine: true,
+    tooltip: getTooltip(),
+    validate,
+    variables
+  });
+}
+
+// helper //////////////////////
+
+function getTooltip() {
+  return jsxs(Fragment$1, {
+    children: [jsx("p", {
+      children: "Enter a HTTPS URL to a source or populate it dynamically via a template or an expression (e.g., to pass a value from the variable)."
+    }), jsx("p", {
+      children: "Please make sure that the URL is safe as it might impose security risks."
+    }), jsxs("p", {
+      children: ["Not all external sources can be displayed in the iFrame. Read more about it in the ", jsx("a", {
+        target: "_blank",
+        href: "https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options",
+        children: "X-FRAME-OPTIONS documentation"
+      }), "."]
+    })]
+  });
+}
+
 function SourceEntry(props) {
   const {
     editField,
@@ -9832,52 +10029,6 @@ function Text(props) {
   });
 }
 
-function SpacerEntry(props) {
-  const {
-    editField,
-    field,
-    id
-  } = props;
-  const entries = [];
-  entries.push({
-    id: id + '-height',
-    component: SpacerHeight,
-    isEdited: isEdited$7,
-    editField,
-    field,
-    isDefaultVisible: field => field.type === 'spacer'
-  });
-  return entries;
-}
-function SpacerHeight(props) {
-  const {
-    editField,
-    field,
-    id
-  } = props;
-  const debounce = useService('debounce');
-  const getValue = e => get(field, ['height']);
-  const setValue = (value, error) => {
-    if (error) {
-      return;
-    }
-    editField(field, ['height'], value);
-  };
-  return NumberFieldEntry({
-    debounce,
-    label: 'Height',
-    element: field,
-    id,
-    getValue,
-    setValue,
-    validate: value => {
-      if (value === undefined || value === null) return;
-      if (value < 1) return 'Should be greater than zero.';
-      if (!Number.isInteger(value)) return 'Should be an integer.';
-    }
-  });
-}
-
 function NumberEntries(props) {
   const {
     editField,
@@ -10948,7 +11099,13 @@ function GeneralGroup(field, editField, getService) {
     field,
     editField,
     getService
-  }), ...SpacerEntry({
+  }), ...IFrameUrlEntry({
+    field,
+    editField
+  }), ...IFrameHeightEntry({
+    field,
+    editField
+  }), ...HeightEntry({
     field,
     editField
   }), ...NumberEntries({