@bpmn-io/form-js-viewer 0.12.1 → 0.13.0

package/dist/index.es.js

@@ -1,17 +1,143 @@
 import Ids from 'ids';
-import { isString, isArray, isFunction, isNumber, bind, assign, isNil, get, isUndefined, set, findIndex, isObject } from 'min-dash';
-import { unaryTest, evaluate, parseUnaryTests, parseExpressions } from 'feelin';
+import { isString, isArray, isFunction, isNumber, bind, assign, isNil, groupBy, flatten, get, isUndefined, set, findIndex, isObject } from 'min-dash';
+import { evaluate, parseExpressions, parseUnaryTests, unaryTest } from 'feelin';
+import { evaluate as evaluate$1 } from 'feelers';
+import showdown from 'showdown';
 import Big from 'big.js';
-import snarkdown from '@bpmn-io/snarkdown';
 import classNames from 'classnames';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'preact/jsx-runtime';
-import { useContext, useState, useEffect, useRef, useCallback, useMemo } from 'preact/hooks';
+import { useContext, useState, useEffect, useMemo, useRef, useCallback } from 'preact/hooks';
 import { createContext, createElement, Fragment, render } from 'preact';
 import React, { createPortal } from 'preact/compat';
 import flatpickr from 'flatpickr';
 import Markup from 'preact-markup';
 import { Injector } from 'didi';
 
+class FeelExpressionLanguage {
+  constructor(eventBus) {
+    this._eventBus = eventBus;
+  }
+
+  /**
+   * Determines if the given string is a FEEL expression.
+   *
+   * @param {string} value
+   * @returns {boolean}
+   *
+   */
+  isExpression(value) {
+    return isString(value) && value.startsWith('=');
+  }
+
+  /**
+   * Retrieve variable names from a given FEEL expression.
+   *
+   * @param {string} expression
+   * @param {object} [options]
+   * @param {string} [options.type]
+   *
+   * @returns {string[]}
+   */
+  getVariableNames(expression, options = {}) {
+    const {
+      type = 'expression'
+    } = options;
+    if (!this.isExpression(expression)) {
+      return [];
+    }
+    if (type === 'unaryTest') {
+      return this._getUnaryVariableNames(expression);
+    } else if (type === 'expression') {
+      return this._getExpressionVariableNames(expression);
+    }
+    throw new Error('Unknown expression type: ' + options.type);
+  }
+
+  /**
+   * Evaluate an expression.
+   *
+   * @param {string} expression
+   * @param {import('../../types').Data} [data]
+   *
+   * @returns {any}
+   */
+  evaluate(expression, data = {}) {
+    if (!expression) {
+      return null;
+    }
+    if (!isString(expression) || !expression.startsWith('=')) {
+      return null;
+    }
+    try {
+      const result = evaluate(expression.slice(1), data);
+      return result;
+    } catch (error) {
+      this._eventBus.fire('error', {
+        error
+      });
+      return null;
+    }
+  }
+  _getExpressionVariableNames(expression) {
+    const tree = parseExpressions(expression);
+    const cursor = tree.cursor();
+    const variables = new Set();
+    do {
+      const node = cursor.node;
+      if (node.type.name === 'VariableName') {
+        variables.add(expression.slice(node.from, node.to));
+      }
+    } while (cursor.next());
+    return Array.from(variables);
+  }
+  _getUnaryVariableNames(unaryTest) {
+    const tree = parseUnaryTests(unaryTest);
+    const cursor = tree.cursor();
+    const variables = new Set();
+    do {
+      const node = cursor.node;
+      if (node.type.name === 'VariableName') {
+        variables.add(unaryTest.slice(node.from, node.to));
+      }
+    } while (cursor.next());
+    return Array.from(variables);
+  }
+}
+FeelExpressionLanguage.$inject = ['eventBus'];
+
+class FeelersTemplating {
+  constructor() {}
+  isTemplate(value) {
+    return isString(value) && (value.startsWith('=') || /{{/.test(value));
+  }
+
+  /**
+   * Evaluate a template.
+   *
+   * @param {string} template
+   * @param {Object<string, any>} context
+   * @param {Object} options
+   * @param {boolean} [options.debug = false]
+   * @param {boolean} [options.strict = false]
+   * @param {Function} [options.buildDebugString]
+   *
+   * @returns
+   */
+  evaluate(template, context = {}, options = {}) {
+    const {
+      debug = false,
+      strict = false,
+      buildDebugString = err => ' {{⚠}} '
+    } = options;
+    return evaluate$1(template, context, {
+      debug,
+      strict,
+      buildDebugString
+    });
+  }
+}
+FeelersTemplating.$inject = [];
+
 /**
  * @typedef {object} Condition
  * @property {string} [hide]
@@ -50,7 +176,7 @@ class ConditionChecker {
    * Check if given condition is met. Returns null for invalid/missing conditions.
    *
    * @param {string} condition
-   * @param {import('../types').Data} [data]
+   * @param {import('../../types').Data} [data]
    *
    * @returns {boolean|null}
    */
@@ -87,32 +213,6 @@ class ConditionChecker {
     const result = this.check(condition.hide, data);
     return result === true;
   }
-
-  /**
-   * Evaluate an expression.
-   *
-   * @param {string} expression
-   * @param {import('../types').Data} [data]
-   *
-   * @returns {any}
-   */
-  evaluate(expression, data = {}) {
-    if (!expression) {
-      return null;
-    }
-    if (!isString(expression) || !expression.startsWith('=')) {
-      return null;
-    }
-    try {
-      const result = evaluate(expression.slice(1), data);
-      return result;
-    } catch (error) {
-      this._eventBus.fire('error', {
-        error
-      });
-      return null;
-    }
-  }
   _getConditions() {
     const formFields = this._formFieldRegistry.getAll();
     return formFields.reduce((conditions, formField) => {
@@ -132,6 +232,38 @@ class ConditionChecker {
 }
 ConditionChecker.$inject = ['formFieldRegistry', 'eventBus'];
 
+var ExpressionLanguageModule = {
+  __init__: ['expressionLanguage', 'templating', 'conditionChecker'],
+  expressionLanguage: ['type', FeelExpressionLanguage],
+  templating: ['type', FeelersTemplating],
+  conditionChecker: ['type', ConditionChecker]
+};
+
+// bootstrap showdown to support github flavored markdown
+showdown.setFlavor('github');
+class MarkdownRenderer {
+  constructor() {
+    this._converter = new showdown.Converter();
+  }
+
+  /**
+   * Render markdown to HTML.
+   *
+   * @param {string} markdown - The markdown to render
+   *
+   * @returns {string} HTML
+   */
+  render(markdown) {
+    return this._converter.makeHtml(markdown);
+  }
+}
+MarkdownRenderer.$inject = [];
+
+var MarkdownModule = {
+  __init__: ['markdownRenderer'],
+  markdownRenderer: ['type', MarkdownRenderer]
+};
+
 var FN_REF = '__fn';
 var DEFAULT_PRIORITY = 1000;
 var slice = Array.prototype.slice;
@@ -704,44 +836,148 @@ class FormFieldRegistry {
 FormFieldRegistry.$inject = ['eventBus'];
 
 /**
- * Retrieve variable names from given FEEL unary test.
- *
- * @param {string} unaryTest
- * @returns {string[]}
+ * @typedef { { id: String, components: Array<String> } } FormRow
+ * @typedef { { formFieldId: String, rows: Array<FormRow> } } FormRows
  */
-function getVariableNames(unaryTest) {
-  const tree = parseUnaryTests(unaryTest);
-  const cursor = tree.cursor();
-  const variables = new Set();
-  do {
-    const node = cursor.node;
-    if (node.type.name === 'VariableName') {
-      variables.add(unaryTest.slice(node.from, node.to));
-    }
-  } while (cursor.next());
-  return Array.from(variables);
-}
 
 /**
- * Retrieve variable names from given FEEL expression.
+ * Maintains the Form layout in a given structure, for example
+ *
+ *  [
+ *    {
+ *      formFieldId: 'FormField_1',
+ *      rows: [
+ *        { id: 'Row_1', components: [ 'Text_1', 'Textdield_1', ... ]  }
+ *      ]
+ *    }
+ *  ]
  *
- * @param {string} expression
- * @returns {string[]}
  */
-function getExpressionVariableNames(expression) {
-  const tree = parseExpressions(expression);
-  const cursor = tree.cursor();
-  const variables = new Set();
-  do {
-    const node = cursor.node;
-    if (node.type.name === 'VariableName') {
-      variables.add(expression.slice(node.from, node.to));
+class FormLayouter {
+  constructor(eventBus) {
+    /** @type Array<FormRows>  */
+    this._rows = [];
+    this._ids = new Ids([32, 36, 1]);
+    this._eventBus = eventBus;
+  }
+
+  /**
+   * @param {FormRow} row
+   */
+  addRow(formFieldId, row) {
+    let rowsPerComponent = this._rows.find(r => r.formFieldId === formFieldId);
+    if (!rowsPerComponent) {
+      rowsPerComponent = {
+        formFieldId,
+        rows: []
+      };
+      this._rows.push(rowsPerComponent);
+    }
+    rowsPerComponent.rows.push(row);
+  }
+
+  /**
+   * @param {String} id
+   * @returns {FormRow}
+   */
+  getRow(id) {
+    const rows = allRows(this._rows);
+    return rows.find(r => r.id === id);
+  }
+
+  /**
+   * @param {any} formField
+   * @returns {FormRow}
+   */
+  getRowForField(formField) {
+    return allRows(this._rows).find(r => {
+      const {
+        components
+      } = r;
+      return components.includes(formField.id);
+    });
+  }
+
+  /**
+   * @param {String} formFieldId
+   * @returns { Array<FormRow> }
+   */
+  getRows(formFieldId) {
+    const rowsForField = this._rows.find(r => formFieldId === r.formFieldId);
+    if (!rowsForField) {
+      return [];
+    }
+    return rowsForField.rows;
+  }
+
+  /**
+   * @returns {string}
+   */
+  nextRowId() {
+    return this._ids.nextPrefixed('Row_');
+  }
+
+  /**
+   * @param {any} formField
+   */
+  calculateLayout(formField) {
+    const {
+      type,
+      components
+    } = formField;
+    if (type !== 'default' || !components) {
+      return;
+    }
+
+    // (1) calculate rows order (by component order)
+    const rowsInOrder = groupByRow(components, this._ids);
+    Object.entries(rowsInOrder).forEach(([id, components]) => {
+      // (2) add fields to rows
+      this.addRow(formField.id, {
+        id: id,
+        components: components.map(c => c.id)
+      });
+    });
+
+    // (3) traverse through nested components
+    components.forEach(field => this.calculateLayout(field));
+
+    // (4) fire event to notify interested parties
+    this._eventBus.fire('form.layoutCalculated', {
+      rows: this._rows
+    });
+  }
+  clear() {
+    this._rows = [];
+    this._ids.clear();
+
+    // fire event to notify interested parties
+    this._eventBus.fire('form.layoutCleared');
+  }
+}
+FormLayouter.$inject = ['eventBus'];
+
+// helpers //////
+
+function groupByRow(components, ids) {
+  return groupBy(components, c => {
+    // mitigate missing row by creating new (handle legacy)
+    const {
+      layout
+    } = c;
+    if (!layout || !layout.row) {
+      return ids.nextPrefixed('Row_');
     }
-  } while (cursor.next());
-  return Array.from(variables);
+    return layout.row;
+  });
 }
-function isExpression$1(value) {
-  return isString(value) && value.startsWith('=');
+
+/**
+ * @param {Array<FormRows>} formRows
+ * @returns {Array<FormRow>}
+ */
+function allRows(formRows) {
+  return flatten(formRows.map(c => c.rows));
 }
 
 // config  ///////////////////
@@ -880,7 +1116,7 @@ function clone(data, replacer) {
  *
  * @return {string[]}
  */
-function getSchemaVariables(schema) {
+function getSchemaVariables(schema, expressionLanguage = new FeelExpressionLanguage(null)) {
   if (!schema.components) {
     return [];
   }
@@ -901,15 +1137,17 @@ function getSchemaVariables(schema) {
       variables = [...variables, valuesKey];
     }
     if (conditional && conditional.hide) {
-      // cut off initial '='
-      const conditionVariables = getVariableNames(conditional.hide.slice(1));
+      const conditionVariables = expressionLanguage.getVariableNames(conditional.hide, {
+        type: 'unaryTest'
+      });
       variables = [...variables, ...conditionVariables];
     }
     EXPRESSION_PROPERTIES.forEach(prop => {
       const property = component[prop];
-      if (property && isExpression$1(property)) {
-        // cut off initial '='
-        const expressionVariables = getExpressionVariableNames(property.slice(1));
+      if (property && expressionLanguage.isExpression(property)) {
+        const expressionVariables = expressionLanguage.getVariableNames(property, {
+          type: 'expression'
+        });
         variables = [...variables, ...expressionVariables];
       }
     });
@@ -925,10 +1163,12 @@ class Importer {
    * @constructor
    * @param { import('../core').FormFieldRegistry } formFieldRegistry
    * @param { import('../render/FormFields').default } formFields
+   * @param { import('../core').FormLayouter } formLayouter
    */
-  constructor(formFieldRegistry, formFields) {
+  constructor(formFieldRegistry, formFields, formLayouter) {
     this._formFieldRegistry = formFieldRegistry;
     this._formFields = formFields;
+    this._formLayouter = formLayouter;
   }
 
   /**
@@ -945,8 +1185,10 @@ class Importer {
     // TODO: Add warnings - https://github.com/bpmn-io/form-js/issues/289
     const warnings = [];
     try {
+      this._formLayouter.clear();
       const importedSchema = this.importFormField(clone(schema)),
         initializedData = this.initializeFieldValues(clone(data));
+      this._formLayouter.calculateLayout(clone(importedSchema));
       return {
         warnings,
         schema: importedSchema,
@@ -1050,126 +1292,11 @@ class Importer {
     }, data);
   }
 }
-Importer.$inject = ['formFieldRegistry', 'formFields'];
-
-var importModule = {
-  importer: ['type', Importer]
-};
-
-const NODE_TYPE_TEXT = 3,
-  NODE_TYPE_ELEMENT = 1;
-const ALLOWED_NODES = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span', 'em', 'a', 'p', 'div', 'ul', 'ol', 'li', 'hr', 'blockquote', 'img', 'pre', 'code', 'br', 'strong'];
-const ALLOWED_ATTRIBUTES = ['align', 'alt', 'class', 'href', 'id', 'name', 'rel', 'target', 'src'];
-const ALLOWED_URI_PATTERN = /^(?:(?:(?:f|ht)tps?|mailto|tel|callto|cid|xmpp):|[^a-z]|[a-z+.\-]+(?:[^a-z+.\-:]|$))/i; // eslint-disable-line no-useless-escape
-const ALLOWED_IMAGE_SRC_PATTERN = /^(https?|data):.*/i; // eslint-disable-line no-useless-escape
-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}
- */
-function sanitizeHTML(html) {
-  const doc = new DOMParser().parseFromString(`<!DOCTYPE html>\n<html><body><div>${html}`, 'text/html');
-  doc.normalize();
-  const element = doc.body.firstChild;
-  if (element) {
-    sanitizeNode( /** @type Element */element);
-    return new XMLSerializer().serializeToString(element);
-  } else {
-    // handle the case that document parsing
-    // does not work at all, due to HTML gibberish
-    return '';
-  }
-}
-function sanitizeImageSource(src) {
-  const valid = ALLOWED_IMAGE_SRC_PATTERN.test(src);
-  return valid ? src : '';
-}
-
-/**
- * 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
- */
-function sanitizeNode(node) {
-  // allow text nodes
-  if (node.nodeType === NODE_TYPE_TEXT) {
-    return;
-  }
-
-  // disallow all other nodes but Element
-  if (node.nodeType !== NODE_TYPE_ELEMENT) {
-    return node.remove();
-  }
-  const lcTag = node.tagName.toLowerCase();
-
-  // disallow non-whitelisted tags
-  if (!ALLOWED_NODES.includes(lcTag)) {
-    return node.remove();
-  }
-  const attributes = node.attributes;
-
-  // clean attributes
-  for (let i = attributes.length; i--;) {
-    const attribute = attributes[i];
-    const name = attribute.name;
-    const lcName = name.toLowerCase();
-
-    // normalize node value
-    const value = attribute.value.trim();
-    node.removeAttribute(name);
-    const valid = isValidAttribute(lcTag, lcName, value);
-    if (valid) {
-      node.setAttribute(name, value);
-    }
-  }
-
-  // force noopener on target="_blank" links
-  if (lcTag === 'a' && node.getAttribute('target') === '_blank' && node.getAttribute('rel') !== 'noopener') {
-    node.setAttribute('rel', 'noopener');
-  }
-  for (let i = node.childNodes.length; i--;) {
-    sanitizeNode( /** @type Element */node.childNodes[i]);
-  }
-}
-
-/**
- * Validates attributes for validity.
- *
- * @param {string} lcTag
- * @param {string} lcName
- * @param {string} value
- * @return {boolean}
- */
-function isValidAttribute(lcTag, lcName, value) {
-  // disallow most attributes based on whitelist
-  if (!ALLOWED_ATTRIBUTES.includes(lcName)) {
-    return false;
-  }
-
-  // disallow "DOM clobbering" / polution of document and wrapping form elements
-  if ((lcName === 'id' || lcName === 'name') && (value in document || value in FORM_ELEMENT)) {
-    return false;
-  }
-  if (lcName === 'target' && value !== '_blank') {
-    return false;
-  }
-
-  // allow valid url links only
-  if (lcName === 'href' && !ALLOWED_URI_PATTERN.test(value.replace(ATTR_WHITESPACE_PATTERN, ''))) {
-    return false;
-  }
-  return true;
-}
+Importer.$inject = ['formFieldRegistry', 'formFields', 'formLayouter'];
+
+var importModule = {
+  importer: ['type', Importer]
+};
 
 function formFieldClasses(type, {
   errors = [],
@@ -1183,35 +1310,23 @@ function formFieldClasses(type, {
     'fjs-disabled': disabled
   });
 }
+function gridColumnClasses(formField) {
+  const {
+    layout = {}
+  } = formField;
+  const {
+    columns
+  } = layout;
+  return classNames('fjs-layout-column', `cds--col${columns ? '-lg-' + columns : ''}`,
+  // always fall back to top-down on smallest screens
+  'cds--col-sm-16', 'cds--col-md-16');
+}
 function prefixId(id, formId) {
   if (formId) {
     return `fjs-form-${formId}-${id}`;
   }
   return `fjs-form-${id}`;
 }
-function markdownToHTML(markdown) {
-  const htmls = markdown.toString().split(/(?:\r?\n){2,}/).map(line => /^((\d+.)|[><\s#-*])/.test(line) ? snarkdown(line) : `<p>${snarkdown(line)}</p>`);
-  return htmls.join('\n\n');
-}
-
-// see https://github.com/developit/snarkdown/issues/70
-function safeMarkdown(markdown) {
-  const html = markdownToHTML(markdown);
-  return sanitizeHTML(html);
-}
-
-/**
- * Sanitizes an image source to ensure we only allow for data URI and links
- * that start with http(s).
- *
- * Note: Most browsers anyway do not support script execution in <img> elements.
- *
- * @param {string} src
- * @returns {string}
- */
-function safeImageSource(src) {
-  return sanitizeImageSource(src);
-}
 
 const type$b = 'button';
 function Button(props) {
@@ -1246,10 +1361,31 @@ const FormRenderContext = createContext({
     return null;
   },
   Children: props => {
-    return props.children;
+    return jsx("div", {
+      class: props.class,
+      children: props.children
+    });
   },
   Element: props => {
-    return props.children;
+    return jsx("div", {
+      class: props.class,
+      children: props.children
+    });
+  },
+  Row: props => {
+    return jsx("div", {
+      class: props.class,
+      children: props.children
+    });
+  },
+  Column: props => {
+    if (props.field.type === 'default') {
+      return props.children;
+    }
+    return jsx("div", {
+      class: props.class,
+      children: props.children
+    });
   }
 });
 var FormRenderContext$1 = FormRenderContext;
@@ -1380,7 +1516,53 @@ Checkbox.sanitizeValue = ({
 }) => value === true;
 Checkbox.group = 'selection';
 
-function useService (type, strict) {
+// parses the options data from the provided form field and form data
+function getValuesData(formField, formData) {
+  const {
+    valuesKey,
+    values
+  } = formField;
+  return valuesKey ? get(formData, [valuesKey]) : values;
+}
+
+// transforms the provided options into a normalized format, trimming invalid options
+function normalizeValuesData(valuesData) {
+  return valuesData.filter(_isValueSomething).map(v => _normalizeValueData(v)).filter(v => v);
+}
+function _normalizeValueData(valueData) {
+  if (_isAllowedValue(valueData)) {
+    // if a primitive is provided, use it as label and value
+    return {
+      value: valueData,
+      label: `${valueData}`
+    };
+  }
+  if (typeof valueData === 'object') {
+    if (!valueData.label && _isAllowedValue(valueData.value)) {
+      // if no label is provided, use the value as label
+      return {
+        value: valueData.value,
+        label: `${valueData.value}`
+      };
+    }
+    if (_isValueSomething(valueData.value) && _isAllowedValue(valueData.label)) {
+      // if both value and label are provided, use them as is, in this scenario, the value may also be an object
+      return valueData;
+    }
+  }
+  return null;
+}
+function _isAllowedValue(value) {
+  return _isReadableType(value) && _isValueSomething(value);
+}
+function _isReadableType(value) {
+  return ['number', 'string', 'boolean'].includes(typeof value);
+}
+function _isValueSomething(value) {
+  return value || value === 0 || value === false;
+}
+
+function useService(type, strict) {
   const {
     getService
   } = useContext(FormContext$1);
@@ -1421,22 +1603,30 @@ function useValuesAsync (field) {
   const initialData = useService('form')._getState().initialData;
   useEffect(() => {
     let values = [];
+
+    // dynamic values
     if (valuesKey !== undefined) {
       const keyedValues = (initialData || {})[valuesKey];
       if (keyedValues && Array.isArray(keyedValues)) {
         values = keyedValues;
       }
-    } else if (staticValues !== undefined) {
+    }
+
+    // static values
+    else if (staticValues !== undefined) {
       values = Array.isArray(staticValues) ? staticValues : [];
     } else {
-      setValuesGetter(getErrorState('No values source defined in the form definition'));
+      setValuesGetter(buildErrorState('No values source defined in the form definition'));
       return;
     }
+
+    // normalize data to support primitives and partially defined objects
+    values = normalizeValuesData(values);
     setValuesGetter(buildLoadedState(values));
   }, [valuesKey, staticValues, initialData]);
   return valuesGetter;
 }
-const getErrorState = error => ({
+const buildErrorState = error => ({
   values: [],
   error,
   state: LOAD_STATES.ERROR
@@ -1629,12 +1819,8 @@ function sanitizeSingleSelectValue(options) {
     data,
     value
   } = options;
-  const {
-    valuesKey,
-    values
-  } = formField;
   try {
-    const validValues = (valuesKey ? get(data, [valuesKey]) : values).map(v => v.value) || [];
+    const validValues = normalizeValuesData(getValuesData(formField, data)).map(v => v.value);
     return validValues.includes(value) ? value : null;
   } catch (error) {
     // use default value in case of formatting error
@@ -1648,12 +1834,8 @@ function sanitizeMultiSelectValue(options) {
     data,
     value
   } = options;
-  const {
-    valuesKey,
-    values
-  } = formField;
   try {
-    const validValues = (valuesKey ? get(data, [valuesKey]) : values).map(v => v.value) || [];
+    const validValues = normalizeValuesData(getValuesData(formField, data)).map(v => v.value);
     return value.filter(v => validValues.includes(v));
   } catch (error) {
     // use default value in case of formatting error
@@ -1748,26 +1930,95 @@ Checklist.sanitizeValue = sanitizeMultiSelectValue;
 Checklist.group = 'selection';
 
 /**
- * Check if condition is met with given variables.
+ * Returns the conditionally filtered data of a form reactively.
+ * Memoised to minimize re-renders
+ *
+ */
+function useFilteredFormData() {
+  const {
+    initialData,
+    data
+  } = useService('form')._getState();
+  const conditionChecker = useService('conditionChecker', false);
+  return useMemo(() => {
+    const newData = conditionChecker ? conditionChecker.applyConditions(data, data) : data;
+    return {
+      ...initialData,
+      ...newData
+    };
+  }, [conditionChecker, data, initialData]);
+}
+
+/**
+ * Evaluate if condition is met reactively based on the conditionChecker and form data.
  *
  * @param {string | undefined} condition
- * @param {import('../../types').Data} data
  *
  * @returns {boolean} true if condition is met or no condition or condition checker exists
  */
-function useCondition(condition, data) {
-  const initialData = useService('form')._getState().initialData;
+function useCondition(condition) {
   const conditionChecker = useService('conditionChecker', false);
-  if (!conditionChecker) {
-    return null;
+  const filteredData = useFilteredFormData();
+  return useMemo(() => {
+    return conditionChecker ? conditionChecker.check(condition, filteredData) : null;
+  }, [conditionChecker, condition, filteredData]);
+}
+
+/**
+ * Evaluate a string reactively based on the expressionLanguage and form data.
+ * If the string is not an expression, it is returned as is.
+ * Memoised to minimize re-renders.
+ *
+ * @param {string} value
+ *
+ */
+function useExpressionEvaluation(value) {
+  const formData = useFilteredFormData();
+  const expressionLanguage = useService('expressionLanguage');
+  return useMemo(() => {
+    if (expressionLanguage && expressionLanguage.isExpression(value)) {
+      return expressionLanguage.evaluate(value, formData);
+    }
+    return value;
+  }, [expressionLanguage, formData, value]);
+}
+
+function useKeyDownAction(targetKey, action, listenerElement = window) {
+  function downHandler({
+    key
+  }) {
+    if (key === targetKey) {
+      action();
+    }
   }
+  useEffect(() => {
+    listenerElement.addEventListener('keydown', downHandler);
+    return () => {
+      listenerElement.removeEventListener('keydown', downHandler);
+    };
+  });
+}
 
-  // make sure we do not use data from hidden fields
-  const filteredData = {
-    ...initialData,
-    ...conditionChecker.applyConditions(data, data)
-  };
-  return conditionChecker.check(condition, filteredData);
+/**
+ * Template a string reactively based on form data. If the string is not a template, it is returned as is.
+ * Memoised to minimize re-renders
+ *
+ * @param {string} value
+ * @param {Object} options
+ * @param {boolean} [options.debug = false]
+ * @param {boolean} [options.strict = false]
+ * @param {Function} [options.buildDebugString]
+ *
+ */
+function useTemplateEvaluation(value, options) {
+  const filteredData = useFilteredFormData();
+  const templating = useService('templating');
+  return useMemo(() => {
+    if (templating.isTemplate(value)) {
+      return templating.evaluate(value, filteredData, options);
+    }
+    return value;
+  }, [filteredData, templating, value, options]);
 }
 
 const noop$1 = () => false;
@@ -1788,7 +2039,8 @@ function FormField(props) {
   } = form._getState();
   const {
     Element,
-    Empty
+    Empty,
+    Column
   } = useContext(FormRenderContext$1);
   const FormFieldComponent = formFields.get(field.type);
   if (!FormFieldComponent) {
@@ -1797,45 +2049,67 @@ function FormField(props) {
   const value = get(data, _path);
   const fieldErrors = findErrors(errors, _path);
   const disabled = properties.readOnly || field.disabled || false;
-  const hidden = useHideCondition(field, data);
+  const hidden = useCondition(field.conditional && field.conditional.hide || null);
   if (hidden) {
     return jsx(Empty, {});
   }
-  return jsx(Element, {
+  return jsx(Column, {
     field: field,
-    children: jsx(FormFieldComponent, {
-      ...props,
-      disabled: disabled,
-      errors: fieldErrors,
-      onChange: disabled ? noop$1 : onChange,
-      value: value
+    class: gridColumnClasses(field),
+    children: jsx(Element, {
+      class: "fjs-element",
+      field: field,
+      children: jsx(FormFieldComponent, {
+        ...props,
+        disabled: disabled,
+        errors: fieldErrors,
+        onChange: disabled ? noop$1 : onChange,
+        value: value
+      })
     })
   });
 }
-function useHideCondition(field, data) {
-  const hideCondition = field.conditional && field.conditional.hide;
-  return useCondition(hideCondition, data) === true;
-}
 
 function Default(props) {
   const {
     Children,
-    Empty
+    Empty,
+    Row
   } = useContext(FormRenderContext$1);
   const {
     field
   } = props;
   const {
+    id,
     components = []
   } = field;
+  const formLayouter = useService('formLayouter');
+  const formFieldRegistry = useService('formFieldRegistry');
+  const rows = formLayouter.getRows(id);
   return jsxs(Children, {
-    class: "fjs-vertical-layout",
+    class: "fjs-vertical-layout fjs-children cds--grid cds--grid--condensed",
     field: field,
-    children: [components.map(childField => {
-      return createElement(FormField, {
-        ...props,
-        key: childField.id,
-        field: childField
+    children: [rows.map(row => {
+      const {
+        components = []
+      } = row;
+      if (!components.length) {
+        return null;
+      }
+      return jsx(Row, {
+        row: row,
+        class: "fjs-layout-row cds--row",
+        children: components.map(id => {
+          const childField = formFieldRegistry.get(id);
+          if (!childField) {
+            return null;
+          }
+          return createElement(FormField, {
+            ...props,
+            key: childField.id,
+            field: childField
+          });
+        })
       });
     }), components.length ? null : jsx(Empty, {})]
   });
@@ -2059,22 +2333,6 @@ var ClockIcon = (({
   d: "M6.222 25.64A14 14 0 1021.778 2.36 14 14 0 006.222 25.64zM7.333 4.023a12 12 0 1113.334 19.955A12 12 0 017.333 4.022z"
 })));
 
-function useKeyDownAction(targetKey, action, listenerElement = window) {
-  function downHandler({
-    key
-  }) {
-    if (key === targetKey) {
-      action();
-    }
-  }
-  useEffect(() => {
-    listenerElement.addEventListener('keydown', downHandler);
-    return () => {
-      listenerElement.removeEventListener('keydown', downHandler);
-    };
-  });
-}
-
 const DEFAULT_LABEL_GETTER = value => value;
 const NOOP = () => {};
 function DropdownList(props) {
@@ -2621,46 +2879,131 @@ function FormComponent(props) {
   });
 }
 
+const NODE_TYPE_TEXT = 3,
+  NODE_TYPE_ELEMENT = 1;
+const ALLOWED_NODES = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span', 'em', 'a', 'p', 'div', 'ul', 'ol', 'li', 'hr', 'blockquote', 'img', 'pre', 'code', 'br', 'strong'];
+const ALLOWED_ATTRIBUTES = ['align', 'alt', 'class', 'href', 'id', 'name', 'rel', 'target', 'src'];
+const ALLOWED_URI_PATTERN = /^(?:(?:(?:f|ht)tps?|mailto|tel|callto|cid|xmpp):|[^a-z]|[a-z+.\-]+(?:[^a-z+.\-:]|$))/i; // eslint-disable-line no-useless-escape
+const ALLOWED_IMAGE_SRC_PATTERN = /^(https?|data):.*/i; // eslint-disable-line no-useless-escape
+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 | undefined} expression
- * @param {import('../../types').Data} data
+ * @param {string} html
+ * @return {string}
  */
-function useEvaluation(expression, data) {
-  const initialData = useService('form')._getState().initialData;
-  const conditionChecker = useService('conditionChecker', false);
-  if (!conditionChecker) {
-    return null;
+
+// see https://github.com/developit/snarkdown/issues/70
+function sanitizeHTML(html) {
+  const doc = new DOMParser().parseFromString(`<!DOCTYPE html>\n<html><body><div>${html}`, 'text/html');
+  doc.normalize();
+  const element = doc.body.firstChild;
+  if (element) {
+    sanitizeNode( /** @type Element */element);
+    return new XMLSerializer().serializeToString(element);
+  } else {
+    // handle the case that document parsing
+    // does not work at all, due to HTML gibberish
+    return '';
   }
+}
 
-  // make sure we do not use data from hidden fields
-  const filteredData = {
-    ...initialData,
-    ...conditionChecker.applyConditions(data, data)
-  };
-  return conditionChecker.evaluate(expression, filteredData);
+/**
+ * Sanitizes an image source to ensure we only allow for data URI and links
+ * that start with http(s).
+ *
+ * Note: Most browsers anyway do not support script execution in <img> elements.
+ *
+ * @param {string} src
+ * @returns {string}
+ */
+function sanitizeImageSource(src) {
+  const valid = ALLOWED_IMAGE_SRC_PATTERN.test(src);
+  return valid ? src : '';
 }
 
 /**
+ * Recursively sanitize a HTML node, potentially
+ * removing it, its children or attributes.
  *
- * @param {string} value
+ * Inspired by https://github.com/developit/snarkdown/issues/70
+ * and https://github.com/cure53/DOMPurify. Simplified
+ * for our use-case.
+ *
+ * @param {Element} node
  */
-function useExpressionValue(value) {
-  const formData = useService('form')._getState().data;
-  if (!isExpression(value)) {
-    return value;
+function sanitizeNode(node) {
+  // allow text nodes
+  if (node.nodeType === NODE_TYPE_TEXT) {
+    return;
+  }
+
+  // disallow all other nodes but Element
+  if (node.nodeType !== NODE_TYPE_ELEMENT) {
+    return node.remove();
+  }
+  const lcTag = node.tagName.toLowerCase();
+
+  // disallow non-whitelisted tags
+  if (!ALLOWED_NODES.includes(lcTag)) {
+    return node.remove();
+  }
+  const attributes = node.attributes;
+
+  // clean attributes
+  for (let i = attributes.length; i--;) {
+    const attribute = attributes[i];
+    const name = attribute.name;
+    const lcName = name.toLowerCase();
+
+    // normalize node value
+    const value = attribute.value.trim();
+    node.removeAttribute(name);
+    const valid = isValidAttribute(lcTag, lcName, value);
+    if (valid) {
+      node.setAttribute(name, value);
+    }
   }
 
-  // We can ignore this hook rule as we do not use
-  // state or effects in our custom hooks
-  /* eslint-disable-next-line react-hooks/rules-of-hooks */
-  return useEvaluation(value, formData);
+  // force noopener on target="_blank" links
+  if (lcTag === 'a' && node.getAttribute('target') === '_blank' && node.getAttribute('rel') !== 'noopener') {
+    node.setAttribute('rel', 'noopener');
+  }
+  for (let i = node.childNodes.length; i--;) {
+    sanitizeNode( /** @type Element */node.childNodes[i]);
+  }
 }
 
-// helper ///////////////
+/**
+ * Validates attributes for validity.
+ *
+ * @param {string} lcTag
+ * @param {string} lcName
+ * @param {string} value
+ * @return {boolean}
+ */
+function isValidAttribute(lcTag, lcName, value) {
+  // disallow most attributes based on whitelist
+  if (!ALLOWED_ATTRIBUTES.includes(lcName)) {
+    return false;
+  }
+
+  // disallow "DOM clobbering" / polution of document and wrapping form elements
+  if ((lcName === 'id' || lcName === 'name') && (value in document || value in FORM_ELEMENT)) {
+    return false;
+  }
+  if (lcName === 'target' && value !== '_blank') {
+    return false;
+  }
 
-function isExpression(value) {
-  return isString(value) && value.startsWith('=');
+  // allow valid url links only
+  if (lcName === 'href' && !ALLOWED_URI_PATTERN.test(value.replace(ATTR_WHITESPACE_PATTERN, ''))) {
+    return false;
+  }
+  return true;
 }
 
 function _extends$h() { _extends$h = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$h.apply(this, arguments); }
@@ -2703,8 +3046,9 @@ function Image(props) {
     id,
     source
   } = field;
-  const safeSource = safeImageSource(useExpressionValue(source));
-  const altText = useExpressionValue(alt);
+  const evaluatedImageSource = useExpressionEvaluation(source);
+  const safeSource = useMemo(() => sanitizeImageSource(evaluatedImageSource), [evaluatedImageSource]);
+  const altText = useExpressionEvaluation(alt);
   const {
     formId
   } = useContext(FormContext$1);
@@ -3596,16 +3940,29 @@ function Text(props) {
     disableLinks
   } = props;
   const {
-    text = ''
+    text = '',
+    strict = false
   } = field;
-  const textValue = useExpressionValue(text) || '';
-  const componentOverrides = disableLinks ? {
+  const markdownRenderer = useService('markdownRenderer');
+
+  // feelers => pure markdown
+  const markdown = useTemplateEvaluation(text, {
+    debug: true,
+    strict
+  });
+
+  // markdown => safe HTML
+  const safeHtml = useMemo(() => {
+    const html = markdownRenderer.render(markdown);
+    return sanitizeHTML(html);
+  }, [markdownRenderer, markdown]);
+  const componentOverrides = useMemo(() => disableLinks ? {
     'a': DisabledLink
-  } : {};
+  } : {}, [disableLinks]);
   return jsx("div", {
     class: formFieldClasses(type$2),
     children: jsx(Markup, {
-      markup: safeMarkdown(textValue),
+      markup: safeHtml,
       components: componentOverrides,
       trim: false
     })
@@ -4105,9 +4462,9 @@ var renderModule = {
 
 var core = {
   __depends__: [importModule, renderModule],
-  conditionChecker: ['type', ConditionChecker],
   eventBus: ['type', EventBus],
   formFieldRegistry: ['type', FormFieldRegistry],
+  formLayouter: ['type', FormLayouter],
   validator: ['type', Validator]
 };
 
@@ -4369,7 +4726,7 @@ class Form {
   _createInjector(options, container) {
     const {
       additionalModules = [],
-      modules = []
+      modules = this._getModules()
     } = options;
     const config = {
       renderer: {
@@ -4435,6 +4792,13 @@ class Form {
     this._emit('changed', this._getState());
   }
 
+  /**
+  * @internal
+  */
+  _getModules() {
+    return [ExpressionLanguageModule, MarkdownModule];
+  }
+
   /**
    * @internal
    */
@@ -4477,7 +4841,7 @@ class Form {
   }
 }
 
-const schemaVersion = 7;
+const schemaVersion = 8;
 
 /**
  * @typedef { import('./types').CreateFormOptions } CreateFormOptions
@@ -4502,5 +4866,5 @@ function createForm(options) {
   });
 }
 
-export { Button, Checkbox, Checklist, DATETIME_SUBTYPES, DATETIME_SUBTYPES_LABELS, DATETIME_SUBTYPE_PATH, DATE_DISALLOW_PAST_PATH, DATE_LABEL_PATH, Datetime, Default, Form, FormComponent, FormContext$1 as FormContext, FormFieldRegistry, FormFields, FormRenderContext$1 as FormRenderContext, Image, MINUTES_IN_DAY, Numberfield, Radio, Select, TIME_INTERVAL_PATH, TIME_LABEL_PATH, TIME_SERIALISINGFORMAT_LABELS, TIME_SERIALISING_FORMATS, TIME_SERIALISING_FORMAT_PATH, TIME_USE24H_PATH, Taglist, Text, Textarea, Textfield, VALUES_SOURCES, VALUES_SOURCES_DEFAULTS, VALUES_SOURCES_LABELS, VALUES_SOURCES_PATHS, VALUES_SOURCE_DEFAULT, clone, createForm, createFormContainer, createInjector, findErrors, formFields, generateIdForType, generateIndexForType, getExpressionVariableNames, getSchemaVariables, getValuesSource, getVariableNames, iconsByType, isExpression$1 as isExpression, isRequired, pathParse, pathStringify, pathsEqual, schemaVersion };
+export { Button, Checkbox, Checklist, ConditionChecker, DATETIME_SUBTYPES, DATETIME_SUBTYPES_LABELS, DATETIME_SUBTYPE_PATH, DATE_DISALLOW_PAST_PATH, DATE_LABEL_PATH, Datetime, Default, ExpressionLanguageModule, FeelExpressionLanguage, FeelersTemplating, Form, FormComponent, FormContext$1 as FormContext, FormFieldRegistry, FormFields, FormLayouter, FormRenderContext$1 as FormRenderContext, Image, MINUTES_IN_DAY, MarkdownModule, MarkdownRenderer, Numberfield, Radio, Select, TIME_INTERVAL_PATH, TIME_LABEL_PATH, TIME_SERIALISINGFORMAT_LABELS, TIME_SERIALISING_FORMATS, TIME_SERIALISING_FORMAT_PATH, TIME_USE24H_PATH, Taglist, Text, Textarea, Textfield, VALUES_SOURCES, VALUES_SOURCES_DEFAULTS, VALUES_SOURCES_LABELS, VALUES_SOURCES_PATHS, VALUES_SOURCE_DEFAULT, clone, createForm, createFormContainer, createInjector, findErrors, formFields, generateIdForType, generateIndexForType, getSchemaVariables, getValuesSource, iconsByType, isRequired, pathParse, pathStringify, pathsEqual, schemaVersion };
 //# sourceMappingURL=index.es.js.map