@projectcaluma/ember-form 14.8.0 → 14.8.2

package/addon/components/cf-field/info.hbs

@@ -16,7 +16,11 @@
     as |modal|
   >
     <modal.body>
-      <MarkdownToHtml @markdown={{@text}} @openLinksInNewWindow={{true}} />
+      <MarkdownToHtml
+        @markdown={{@text}}
+        @openLinksInNewWindow={{true}}
+        @extensions="DOMPurify"
+      />
     </modal.body>
   </UkModal>
 </div>

package/addon/components/cf-field/input/static.hbs

@@ -1,4 +1,5 @@
 <MarkdownToHtml
   @markdown={{@field.question.raw.staticContent}}
   @openLinksInNewWindow={{true}}
+  @extensions="DOMPurify"
 />

package/addon/components/document-validity.js

@@ -1,8 +1,12 @@
 import { action } from "@ember/object";
+import { service } from "@ember/service";
 import Component from "@glimmer/component";
+import { queryManager } from "ember-apollo-client";
 import { task } from "ember-concurrency";
 import { cached } from "tracked-toolbox";
 
+import documentValidityQuery from "@projectcaluma/ember-form/gql/queries/document-validity.graphql";
+
 /**
  * Component to check the validity of a document
  *
@@ -20,6 +24,10 @@ import { cached } from "tracked-toolbox";
  * @yield {Function} validate
  */
 export default class DocumentValidity extends Component {
+  @queryManager apollo;
+
+  @service calumaStore;
+
   /**
    * The document to be validated
    *
@@ -43,39 +51,64 @@ export default class DocumentValidity extends Component {
     return this._validate.isRunning;
   }
 
-  _validateField = task(async (field) => {
-    await field.validate.linked().perform();
+  _validate = task({ restartable: true }, async () => {
+    try {
+      const saveTasks = this.args.document.fields
+        .flatMap((field) => [
+          ...[...(field._components ?? [])].map((c) => c.save.last),
+          field.save?.last,
+        ])
+        .filter(Boolean);
 
-    if (field.question.hasFormatValidators) {
-      await field.save.linked().perform();
-    }
-  });
+      // Wait until all currently running save tasks in the UI and in the field
+      // itself are finished
+      await Promise.all(saveTasks);
 
-  _validate = task({ restartable: true }, async () => {
-    const saveTasks = this.args.document.fields
-      .flatMap((field) => [
-        ...[...(field._components ?? [])].map((c) => c.save.last),
-        field.save?.last,
-      ])
-      .filter(Boolean);
-
-    // Wait until all currently running save tasks in the UI and in the field
-    // itself are finished
-    await Promise.all(saveTasks);
-
-    await Promise.all(
-      this.args.document.fields.map((field) =>
-        this._validateField.perform(field),
-      ),
-    );
-
-    if (this.isValid) {
-      this.args.onValid?.();
-    } else {
-      this.args.onInvalid?.();
-    }
+      await Promise.all(
+        this.args.document.fields.map((field) =>
+          field.validate.linked().perform(),
+        ),
+      );
+
+      const { isValid, errors } = await this.apollo.query(
+        {
+          query: documentValidityQuery,
+          fetchPolicy: "network-only",
+          variables: { id: this.args.document.uuid },
+        },
+        "documentValidity.edges.0.node",
+      );
+
+      if (!isValid) {
+        errors
+          .filter(({ errorCode }) => errorCode === "format_validation_failed")
+          .forEach(({ slug, errorMsg, documentId }) => {
+            const pk = `Document:${documentId}:Question:${slug}`;
+            const field = this.calumaStore.findByPk(pk);
+            const parentField = field.document.parentField;
+
+            // Add the error manually as the frontend does not validate format
+            // validators - only the backend.
+            field.addManualError("format", { errorMsg }, field.value);
 
-    return this.isValid;
+            if (parentField) {
+              // If the affected field is in a table row, we need to mark the
+              // table answer as invalid as well.
+              parentField.addManualError("table", {}, null);
+            }
+          });
+      }
+
+      if (this.isValid) {
+        this.args.onValid?.();
+      } else {
+        this.args.onInvalid?.();
+      }
+
+      return this.isValid;
+    } catch {
+      return false;
+    }
   });
 
   @action

package/addon/gql/queries/document-validity.graphql

@@ -0,0 +1,16 @@
+query DocumentValidity($id: ID!, $dataSourceContext: JSONString) {
+  documentValidity(id: $id, dataSourceContext: $dataSourceContext) {
+    edges {
+      node {
+        id
+        isValid
+        errors {
+          slug
+          errorMsg
+          errorCode
+          documentId
+        }
+      }
+    }
+  }
+}

package/addon/initializers/register-showdown-extensions.js

@@ -0,0 +1,20 @@
+import DOMPurify from "dompurify";
+import showdown from "showdown";
+
+export function initialize() {
+  showdown.extension("DOMPurify", function () {
+    return [
+      {
+        type: "output",
+        filter(dirty) {
+          return DOMPurify.sanitize(dirty, { USE_PROFILES: { html: true } });
+        },
+      },
+    ];
+  });
+}
+
+export default {
+  name: "register-showdown-extensions",
+  initialize,
+};

package/addon/lib/answer.js

@@ -136,6 +136,7 @@ export default class Answer extends Base {
           new Document({
             raw: parseDocument(document),
             parentDocument: this.field.document,
+            parentField: this.field,
             owner,
           })
         );

package/addon/lib/document.js

@@ -22,7 +22,13 @@ const sum = (nums) => nums.reduce((num, base) => base + num, 0);
  * @class Document
  */
 export default class Document extends Base {
-  constructor({ raw, parentDocument, dataSourceContext, ...args }) {
+  constructor({
+    raw,
+    parentDocument,
+    parentField,
+    dataSourceContext,
+    ...args
+  }) {
     assert(
       "A graphql document `raw` must be passed",
       raw?.__typename === "Document",
@@ -31,6 +37,7 @@ export default class Document extends Base {
     super({ raw, ...args });
 
     this.parentDocument = parentDocument;
+    this.parentField = parentField;
     this.dataSourceContext =
       dataSourceContext ?? parentDocument?.dataSourceContext;
 
@@ -75,6 +82,14 @@ export default class Document extends Base {
    */
   parentDocument = null;
 
+  /**
+   * The parent field of this document. If this is set, the document is most
+   * likely a table row.
+   *
+   * @property {Field} parentField
+   */
+  parentField = null;
+
   /**
    * The root form of this document
    *

package/addon/lib/field.js

@@ -665,14 +665,11 @@ export default class Field extends Base {
       await this.onSaveError(e);
 
       if (validationError) {
-        this._errors = [
-          ...this._errors,
-          {
-            type: "format",
-            context: { errorMsg: validationError.message },
-            value,
-          },
-        ];
+        this.addManualError(
+          "format",
+          { errorMsg: validationError.message },
+          value,
+        );
       } else {
         throw e;
       }
@@ -704,6 +701,18 @@ export default class Field extends Base {
   // eslint-disable-next-line no-unused-vars
   async onSaveError(error) {}
 
+  /**
+   * Add manual validation error message
+   *
+   * @method addManualError
+   * @param {String} type The error type (e.g. "table" or "format")
+   * @param {Object} context The error context object - mostly consists of `errorMsg`
+   * @param {*} value The invalid value
+   */
+  addManualError(type, context = null, value = null) {
+    this._errors = [...this._errors, { type, context, value }];
+  }
+
   /**
    * The translated error messages
    *

package/addon/services/caluma-store.js

@@ -37,6 +37,10 @@ export default class CalumaStoreService extends Service {
     return this._store.get(storeKey) || null;
   }
 
+  findByPk(pk) {
+    return this._store.values().find((item) => item.pk === pk);
+  }
+
   delete(storeKey) {
     this._store.delete(storeKey);
   }

package/app/initializers/register-showdown-extensions.js

@@ -0,0 +1,4 @@
+export {
+  default,
+  initialize,
+} from "@projectcaluma/ember-form/initializers/register-showdown-extensions";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@projectcaluma/ember-form",
-  "version": "14.8.0",
+  "version": "14.8.2",
   "description": "Ember addon for rendering Caluma forms.",
   "keywords": [
     "ember-addon"
@@ -14,6 +14,7 @@
     "@ember/test-waiters": "^4.1.1",
     "@embroider/macros": "^1.16.10",
     "@embroider/util": "^1.13.2",
+    "dompurify": "^3.3.1",
     "ember-apollo-client": "^5.0.0",
     "ember-auto-import": "^2.10.0",
     "ember-autoresize-modifier": "^0.7.0 || ^0.8.0",
@@ -39,7 +40,7 @@
     "luxon": "^3.5.0",
     "reactiveweb": "^1.3.0",
     "tracked-toolbox": "^2.0.0",
-    "@projectcaluma/ember-core": "^14.8.0"
+    "@projectcaluma/ember-core": "^14.8.2"
   },
   "devDependencies": {
     "@ember/optional-features": "2.3.0",
@@ -74,12 +75,12 @@
     "uikit": "3.25.6",
     "uuid": "13.0.0",
     "webpack": "5.104.1",
-    "@projectcaluma/ember-workflow": "14.8.0",
-    "@projectcaluma/ember-testing": "14.8.0"
+    "@projectcaluma/ember-testing": "14.8.2",
+    "@projectcaluma/ember-workflow": "14.8.2"
   },
   "peerDependencies": {
     "ember-source": ">= 4.0.0",
-    "@projectcaluma/ember-workflow": "^14.8.0"
+    "@projectcaluma/ember-workflow": "^14.8.2"
   },
   "dependenciesMeta": {
     "@projectcaluma/ember-core": {