@bpmn-io/form-js-viewer 1.14.0 → 1.15.0

package/dist/index.es.js

@@ -907,7 +907,6 @@ function useDeepCompareMemoize(value) {
  * @enum { String }
  */
 const LOAD_STATES = {
-  LOADING: 'loading',
   LOADED: 'loaded',
   ERROR: 'error'
 };
@@ -1118,6 +1117,9 @@ function _isElementScrollable(el) {
   return (overflowY === 'auto' || overflowY === 'scroll') && el.scrollHeight > el.clientHeight;
 }
 
+const EMPTY_OBJECT = {};
+const EMPTY_ARRAY$2 = [];
+
 /**
  * Custom hook to scroll an element within a scrollable container.
  *
@@ -1131,8 +1133,8 @@ function _isElementScrollable(el) {
  * @param {Array} [flagRefs] - An array of refs that are used as flags to control when to scroll.
  */
 function useScrollIntoView(scrolledElementRef, deps, scrollOptions, flagRefs) {
-  const _scrollOptions = scrollOptions;
-  const _flagRefs = flagRefs;
+  const _scrollOptions = scrollOptions || EMPTY_OBJECT;
+  const _flagRefs = flagRefs || EMPTY_ARRAY$2;
   useEffect(() => {
     // return early if flags are not raised, or component is not mounted
     if (some(_flagRefs, ref => !ref.current) || !scrolledElementRef.current) {
@@ -5901,10 +5903,15 @@ var SvgDownload = function SvgDownload(props) {
 
 const type = 'documentPreview';
 
+/**
+ * @typedef DocumentEndpointBuilder
+ * @property {(document: DocumentMetadata) => string} buildUrl
+ */
+
 /**
  * @typedef DocumentMetadata
  * @property {string} documentId
- * @property {string} contentHash
+ * @property {string} endpoint
  * @property {Object} metadata
  * @property {string|undefined} [metadata.contentType]
  * @property {string} metadata.fileName
@@ -5913,7 +5920,6 @@ const type = 'documentPreview';
  * @property {string} id
  * @property {string} [title]
  * @property {string} [dataSource]
- * @property {string} [endpointKey]
  * @property {number} [maxHeight]
  * @property {string} [label]
  *
@@ -5925,18 +5931,18 @@ const type = 'documentPreview';
  * @returns {import("preact").JSX.Element}
  */
 function DocumentPreview(props) {
+  /** @type {DocumentEndpointBuilder | null} */
+  const documentEndpointBuilder = useService('documentEndpointBuilder', false);
   const {
     field,
     domId
   } = props;
   const {
     dataSource,
-    endpointKey,
     maxHeight,
     label
   } = field;
   const errorMessageId = `${domId}-error-message`;
-  const endpoint = useExpressionEvaluation(endpointKey || '');
   const data = useValidDocumentData(dataSource || '');
   const evaluatedLabel = useSingleLineTemplateEvaluation(label, {
     debug: true
@@ -5949,18 +5955,19 @@ function DocumentPreview(props) {
     }), jsx("div", {
       class: `fjs-${type}-document-container`,
       id: domId,
-      children: isValidDocumentEndpoint(endpoint) ? data.map((document, index) => jsx(DocumentRenderer, {
-        documentMetadata: document,
-        endpoint: endpoint,
-        maxHeight: maxHeight,
-        domId: `${domId}-${index}`
-      }, document.documentId)) : null
+      children: data.map((document, index) => {
+        const finalEndpoint = tryCatch(() => documentEndpointBuilder?.buildUrl(document)) ?? document.endpoint;
+        return isValidDocumentEndpoint(finalEndpoint) ? jsx(DocumentRenderer, {
+          documentMetadata: document,
+          endpoint: finalEndpoint,
+          maxHeight: maxHeight,
+          domId: `${domId}-${index}`
+        }, document.documentId) : null;
+      })
     }), jsx(Errors, {
       id: errorMessageId,
       errors: getErrors({
-        dataSource,
-        endpoint,
-        endpointKey
+        dataSource
       })
     })]
   });
@@ -5972,43 +5979,27 @@ DocumentPreview.config = {
   name: 'Document preview',
   create: (options = {}) => ({
     label: 'Document preview',
-    endpointKey: DEFAULT_ENDPOINT_KEY,
     ...options
   })
 };
 
 // helpers /////////////////////////////
 
-const DOCUMENT_ID_PLACEHOLDER = '{documentId}';
-const DEFAULT_ENDPOINT_KEY = '=defaultDocumentsEndpointKey';
-
 /**
  * @typedef GetErrorOptions
  * @property {string|undefined} dataSource
- * @property {string|undefined} endpointKey
- * @property {string|null} endpoint
  *
  * @param {GetErrorOptions} options
  * @returns {string[]}
  */
 function getErrors(options) {
   const {
-    dataSource,
-    endpointKey,
-    endpoint
+    dataSource
   } = options;
   let errors = [];
   if (!isString(dataSource) || dataSource.length < 1) {
     errors.push('Document reference is not defined.');
   }
-  if (!isString(endpointKey) || endpointKey.length < 1) {
-    errors.push('Endpoint key is not defined.');
-  }
-  if (endpointKey !== DEFAULT_ENDPOINT_KEY && !URL.canParse(endpoint)) {
-    errors.push(`If you change the endpoint key from "${DEFAULT_ENDPOINT_KEY}", the document preview won't work with Camunda Tasklist and you must provide a valid URL.`);
-  } else if (endpointKey !== DEFAULT_ENDPOINT_KEY && !isValidDocumentEndpoint(endpoint)) {
-    errors.push('Endpoint must contain "{documentId}".');
-  }
   return errors;
 }
 
@@ -6018,7 +6009,7 @@ function getErrors(options) {
  * @returns boolean
  */
 function isValidDocumentEndpoint(endpoint) {
-  return typeof endpoint === 'string' && URL.canParse(endpoint) && endpoint.includes(DOCUMENT_ID_PLACEHOLDER);
+  return typeof endpoint === 'string' && URL.canParse(endpoint);
 }
 
 /**
@@ -6041,6 +6032,61 @@ function useValidDocumentData(dataSource) {
   return data.filter(isValidDocument);
 }
 
+/**
+ * @param {Object} props
+ * @param {string} props.url
+ * @param {string} props.fileName
+ * @param {Function} props.onError
+ * @param {string} props.errorMessageId
+ * @returns {import("preact").JSX.Element}
+ */
+function PdfRenderer(props) {
+  const {
+    url,
+    onError,
+    errorMessageId
+  } = props;
+  /** @type {ReturnType<typeof import("preact/hooks").useState<null | string>>} */
+  const [pdfObjectUrl, setPdfObjectUrl] = useState(null);
+  const [hasError, setHasError] = useState(false);
+  useEffect(() => {
+    /** @type {null | string} */
+    let objectUrl = null;
+    const fetchPdf = async () => {
+      try {
+        const response = await fetch(url);
+        if (!response.ok) {
+          setHasError(true);
+          onError();
+          return;
+        }
+        const blob = await response.blob();
+        objectUrl = URL.createObjectURL(blob);
+        setPdfObjectUrl(objectUrl);
+      } catch {
+        setHasError(true);
+        onError();
+      }
+    };
+    fetchPdf();
+    return () => {
+      if (objectUrl) {
+        URL.revokeObjectURL(objectUrl);
+      }
+    };
+  }, [url, onError]);
+  return jsxs(Fragment, {
+    children: [pdfObjectUrl !== null ? jsx("embed", {
+      src: pdfObjectUrl,
+      type: "application/pdf",
+      class: `fjs-${type}-pdf-viewer`
+    }) : null, hasError ? jsx(Errors, {
+      id: errorMessageId,
+      errors: ['Unable to download document']
+    }) : null]
+  });
+}
+
 /**
  *
  * @param {Object} props
@@ -6064,11 +6110,6 @@ function DocumentRenderer(props) {
   const [hasError, setHasError] = useState(false);
   const ref = useRef(null);
   const isInViewport = useInViewport(ref);
-  const fullUrl = buildUrl({
-    baseUrl: endpoint,
-    documentId: documentMetadata.documentId,
-    contentHash: documentMetadata.contentHash
-  });
   const singleDocumentContainerClassName = `fjs-${type}-single-document-container`;
   const errorMessageId = `${domId}-error-message`;
   const errorMessage = 'Unable to download document';
@@ -6081,11 +6122,11 @@ function DocumentRenderer(props) {
       },
       "aria-describedby": hasError ? errorMessageId : undefined,
       children: [jsx("img", {
-        src: fullUrl,
+        src: endpoint,
         alt: metadata.fileName,
         class: `fjs-${type}-image`
       }), jsx(DownloadButton, {
-        endpoint: fullUrl,
+        endpoint: endpoint,
         fileName: metadata.fileName,
         onDownloadError: () => {
           setHasError(true);
@@ -6097,20 +6138,18 @@ function DocumentRenderer(props) {
     });
   }
   if (isContentTypePresent && metadata.contentType.toLowerCase() === 'application/pdf' && isInViewport) {
-    return jsxs("div", {
+    return jsx("div", {
       class: singleDocumentContainerClassName,
       style: {
         maxHeight
       },
       "aria-describedby": hasError ? errorMessageId : undefined,
-      children: [jsx("embed", {
-        src: fullUrl,
-        type: "application/pdf",
-        class: `fjs-${type}-pdf-viewer`
-      }), hasError ? jsx(Errors, {
-        id: errorMessageId,
-        errors: [errorMessage]
-      }) : null]
+      children: jsx(PdfRenderer, {
+        url: endpoint,
+        fileName: metadata.fileName,
+        onError: () => setHasError(true),
+        errorMessageId: errorMessageId
+      })
     });
   }
   return jsxs("div", {
@@ -6126,7 +6165,7 @@ function DocumentRenderer(props) {
         errors: [errorMessage]
       }) : null]
     }), jsx(DownloadButton, {
-      endpoint: fullUrl,
+      endpoint: endpoint,
       fileName: metadata.fileName,
       onDownloadError: () => {
         setHasError(true);
@@ -6206,27 +6245,18 @@ function useInViewport(ref) {
 }
 
 /**
- * This solution should be a temporary fix, we should try to remove it via: https://github.com/bpmn-io/form-js/issues/1341
- *
- * @param {Object} options
- * @param {string} options.baseUrl
- * @param {string} options.documentId
- * @param {string} [options.contentHash]
- *
- * @returns {string}
+ * @template T
+ * @param {() => T} fn - Function to execute
+ * @returns {T | null}
  */
-function buildUrl(options) {
-  const {
-    baseUrl,
-    documentId,
-    contentHash
-  } = options;
-  const finalUrl = new URL(baseUrl.replace(DOCUMENT_ID_PLACEHOLDER, documentId));
-  if (contentHash !== undefined) {
-    finalUrl.searchParams.set('contentHash', contentHash);
+const tryCatch = fn => {
+  try {
+    return fn();
+  } catch (error) {
+    console.error(error);
+    return null;
   }
-  return decodeURI(finalUrl.toString());
-}
+};
 
 /**
  * This file must not be changed or exchanged.
@@ -6385,7 +6415,7 @@ class FormFields {
   }
 }
 
-const EXPRESSION_PROPERTIES = ['alt', 'appearance.prefixAdorner', 'appearance.suffixAdorner', 'conditional.hide', 'description', 'label', 'source', 'readonly', 'text', 'validate.min', 'validate.max', 'validate.minLength', 'validate.maxLength', 'valuesExpression', 'url', 'dataSource', 'columnsExpression', 'expression', 'multiple', 'accept', 'endpointKey', 'title'];
+const EXPRESSION_PROPERTIES = ['alt', 'appearance.prefixAdorner', 'appearance.suffixAdorner', 'conditional.hide', 'description', 'label', 'source', 'readonly', 'text', 'validate.min', 'validate.max', 'validate.minLength', 'validate.maxLength', 'valuesExpression', 'url', 'dataSource', 'columnsExpression', 'expression', 'multiple', 'accept', 'title'];
 const TEMPLATE_PROPERTIES = ['alt', 'appearance.prefixAdorner', 'appearance.suffixAdorner', 'description', 'label', 'source', 'text', 'content', 'url', 'title'];
 
 /**