feat(viewer): support image view

Author: Niklas Kiefer

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

@@ -482,3 +482,17 @@
   padding: 6px 8px;
   color: var(--color-text-lighter);
 }
+
+.fjs-container .fjs-image-container {
+  width: fit-content;
+  height: fit-content;
+}
+
+.fjs-container .fjs-image {
+  object-fit: contain;
+}
+
+.fjs-container .fjs-image-placeholder {
+  height: 64px;
+  margin: 2px 0;
+}

packages/form-js-viewer/src/render/components/Sanitizer.js

@@ -37,6 +37,7 @@ const ALLOWED_ATTRIBUTES = [
 ];
 
 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');
@@ -70,6 +71,12 @@ export function sanitizeHTML(html) {
   }
 }
 
+export 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.

packages/form-js-viewer/src/render/components/Util.js

@@ -2,7 +2,7 @@ import snarkdown from '@bpmn-io/snarkdown';
 import { get } from 'min-dash';
 import classNames from 'classnames';
 
-import { sanitizeHTML } from './Sanitizer';
+import { sanitizeHTML, sanitizeImageSource } from './Sanitizer';
 
 export function formFieldClasses(type, { errors = [], disabled = false } = {}) {
   if (!type) {
@@ -43,6 +43,19 @@ export function safeMarkdown(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}
+ */
+export function safeImageSource(src) {
+  return sanitizeImageSource(src);
+}
+
 export function sanitizeSingleSelectValue(options) {
   const {
     formField,

packages/form-js-viewer/src/render/components/form-fields/Image.js

@@ -0,0 +1,60 @@
+import { useContext } from 'preact/hooks';
+
+import { FormContext } from '../../context';
+
+import { useExpressionValue } from '../../hooks/useExpressionValue';
+
+import {
+  formFieldClasses,
+  prefixId,
+  safeImageSource
+} from '../Util';
+
+import ImagePlaceholder from './icons/ImagePlaceholder.svg';
+
+const type = 'image';
+
+
+export default function Image(props) {
+  const {
+    field
+  } = props;
+
+  const {
+    alt,
+    id,
+    source
+  } = field;
+
+  const safeSource = safeImageSource(useExpressionValue(source));
+  const altText = useExpressionValue(alt);
+
+  const { formId } = useContext(FormContext);
+
+  return <div class={ formFieldClasses(type) }>
+    <div class="fjs-image-container">
+      {
+        safeSource &&
+        <img
+          alt={ altText }
+          src={ safeSource }
+          class="fjs-image"
+          id={ prefixId(id, formId) } />
+      }
+      { !safeSource &&
+        <div class="fjs-image-placeholder">
+          <ImagePlaceholder alt="This is an image placeholder" />
+        </div>
+      }
+    </div>
+  </div>;
+}
+
+Image.create = function(options = {}) {
+  return {
+    ...options
+  };
+};
+
+Image.type = type;
+Image.keyed = false;

packages/form-js-viewer/src/render/components/form-fields/icons/ImagePlaceholder.svg

@@ -3,6 +3,7 @@ import Checkbox from './form-fields/Checkbox';
 import Checklist from './form-fields/Checklist';
 import Default from './form-fields/Default';
 import FormComponent from './FormComponent';
+import Image from './form-fields/Image';
 import Numberfield from './form-fields/Number';
 import Radio from './form-fields/Radio';
 import Select from './form-fields/Select';
@@ -17,6 +18,7 @@ export {
   Checklist,
   Default,
   FormComponent,
+  Image,
   Numberfield,
   Radio,
   Select,
@@ -31,6 +33,7 @@ export const formFields = [
   Checkbox,
   Checklist,
   Default,
+  Image,
   Numberfield,
   Radio,
   Select,

packages/form-js-viewer/src/render/components/index.js

@@ -0,0 +1,16 @@
+import useService from './useService.js';
+
+/**
+ *
+ * @param {string | undefined} expression
+ * @param {import('../../types').Data} data
+ */
+export function useEvaluation(expression, data) {
+  const conditionChecker = useService('conditionChecker', false);
+
+  if (!conditionChecker) {
+    return null;
+  }
+
+  return conditionChecker.evaluate(expression, data);
+}

packages/form-js-viewer/src/render/hooks/useEvaluation.js

@@ -0,0 +1,28 @@
+import { isString } from 'min-dash';
+
+import useService from './useService';
+import { useEvaluation } from './useEvaluation';
+
+/**
+ *
+ * @param {string} value
+ */
+export function useExpressionValue(value) {
+  const formData = useService('form')._getState().data;
+
+  if (!isExpression(value)) {
+    return 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);
+}
+
+
+// helper ///////////////
+
+function isExpression(value) {
+  return isString(value) && value.startsWith('=');
+}

packages/form-js-viewer/src/render/hooks/useExpressionValue.js

@@ -95,7 +95,7 @@ describe('Form', function() {
     });
 
     // then
-    expect(form.get('formFieldRegistry').getAll()).to.have.length(14);
+    expect(form.get('formFieldRegistry').getAll()).to.have.length(15);
   });
 
 
@@ -174,7 +174,7 @@ describe('Form', function() {
       await form.importSchema(schemaNoIds, data);
 
       // then
-      expect(form.get('formFieldRegistry').getAll()).to.have.length(14);
+      expect(form.get('formFieldRegistry').getAll()).to.have.length(15);
 
       form.get('formFieldRegistry').forEach(field => {
         expect(field.id).to.exist;
@@ -212,7 +212,7 @@ describe('Form', function() {
       await form.importSchema(schema, data);
 
       // then
-      expect(form.get('formFieldRegistry').getAll()).to.have.length(14);
+      expect(form.get('formFieldRegistry').getAll()).to.have.length(15);
     });
 
 

packages/form-js-viewer/test/spec/Form.spec.js

@@ -121,6 +121,10 @@
         }
       ]
     },
+    {
+      "alt": "The bpmn.io logo",
+      "type": "image"
+    },
     {
       "key": "submit",
       "label": "Submit",