Merge pull request #9 from practical-computer/thomas/pract-140-add-optional-html_content-property-to-error-mapping

Add optional `html_content` property to error mapping

Author: tcannonfodder

README.md

@@ -261,7 +261,8 @@ When returning error mappings, they need to have the following format:
   {
     "container_id": "dom-id-without-#", // the ID of the error container you want to append this error message to
     "element_to_invalidate_id": "dom-id-without-#", // the ID of the input that should be marked as invalid
-    "message": "The error message to render",
+    "message": "The error message to render", // The plaintext message used for the error
+    "html_content": "<strong>Rich</strong> Markup", // an OPTIONAL HTML string that will be parsed using `DOMParser` and used as the message. If present, `message` is ignored
     "type": "error-type-key", //The identifier for what type of error this is
   },
   // ...

demo/index.html

@@ -54,6 +54,13 @@
         message: "General errors from the server-side",
         type: "general"
       },
+      {
+        container_id: "test-form-error-container",
+        element_to_invalidate_id: "test-form",
+        message: "This message content will be ignored",
+        html_content: `<strong>Richly <a href="https://example.com">rendered</a> errors!</strong>`,
+        type: "rich_error"
+      },
       {
         container_id: "random-missing-field-errors",
         element_to_invalidate_id: "random-missing-field",

src/error-mapping.js

@@ -13,6 +13,7 @@ import {
 import {
   clearErrorListsInForm,
   errorMessageListItem,
+  errorMessageListItemWithHTML,
   markErrorTypeAsVisible
 } from './rendering.js'
 
@@ -30,6 +31,7 @@ import {
  * @param {string} errors[].container_id - The ID of the container this error message should be rendered in
  * @param {string} errors[].element_id - The ID of the element to call {@link setValidityStateAttributes} with `false` for
  * @param {string} errors[].message - the error message
+ * @param {string} errors[].html_content - An optional HTML string that can be used to render rich markup in an error message. If present, `message` is ignored
  * @param {string} errors[].type - the value for `data-pf-error-type` that represents the type of error this is
  *
  * @example
@@ -74,7 +76,13 @@ export function applyErrorMappingToForm(form, errors) {
     const preservedError = getPreservedErrorForType(errorList, error.type)
     preservedError?.remove()
 
-    let listItem = errorMessageListItem(error.message, error.type)
+    let listItem
+
+    if(error.html_content){
+      listItem = errorMessageListItemWithHTML(error.html_content, error.type)
+    } else {
+      listItem = errorMessageListItem(error.message, error.type)
+    }
 
     if(shouldBePreserved) {
       markAsPreservedError(listItem)

src/rendering.js

@@ -70,6 +70,24 @@ export function errorMessageListItem(message, type) {
   return clone
 }
 
+/**
+ * Clones the {@link errorListItemTemplate}, parsing the given HTML string and inserting it into the element with `[data-pf-error-message]` to the message,
+ * and setting the `data-pf-error-type` to the given type.
+ *
+ * @params {string} htmlString the HTML content to render in the string
+ * @params {string} type the value that will be used for `data-pf-error-type``
+ * @returns {Element} the cloned element
+ */
+export function errorMessageListItemWithHTML(htmlString, type) {
+  const clone = errorListItemTemplate().content.cloneNode(true).querySelector(`*:first-child`)
+
+  const parsedDocument = new DOMParser().parseFromString(htmlString, "text/html")
+
+  clone.setAttribute(`data-pf-error-type`, type)
+  clone.querySelector(`[data-pf-error-message]`).replaceChildren(parsedDocument.body.firstChild)
+  return clone
+}
+
 /**
  * Clears the error messages from the list, while keeping preserved errors.
  * Removes the `data-pf-error-visible` attribute from any preserved attributes

test/error-mapping.test.js

@@ -106,6 +106,13 @@ suite('Error Mapping', async () => {
         type: `unconfirmed_error`,
         message: "Please confirm"
       },
+      {
+        container_id: `confirm-email-field-errors`,
+        element_to_invalidate_id: `confirm-email-field`,
+        type: `custom_error_with_html_content`,
+        message: "This message body should be ignored",
+        html_content: `<strong>Richly <a href="https://example.com">rendered</a> errors!</strong>`
+      }
     ]
 
     const form = container.querySelector(`form`)
@@ -145,7 +152,7 @@ suite('Error Mapping', async () => {
       document.getElementById(`email-field-errors`).querySelector(`[data-pf-error-visible][data-pf-error-type="ad_hoc_server_error_5"]`).textContent
     )
 
-    assert.equal(2, document.getElementById(`confirm-email-field-errors`).querySelectorAll(`[data-pf-error-type][data-pf-error-visible]`).length)
+    assert.equal(3, document.getElementById(`confirm-email-field-errors`).querySelectorAll(`[data-pf-error-type][data-pf-error-visible]`).length)
     assert.equal(
       "‼️ Ad-hoc server error 6",
       document.getElementById(`confirm-email-field-errors`).querySelector(`[data-pf-error-visible][data-pf-error-type="ad_hoc_server_error_6"]`).textContent
@@ -155,5 +162,12 @@ suite('Error Mapping', async () => {
       "‼️ Please confirm",
       document.getElementById(`confirm-email-field-errors`).querySelector(`[data-pf-error-visible][data-pf-error-type="unconfirmed_error"]`).textContent
     )
+
+    const richError = document.getElementById(`confirm-email-field-errors`).querySelector(`[data-pf-error-visible][data-pf-error-type="custom_error_with_html_content"]`)
+
+    assert.equal(
+      `<span>‼️</span> <span data-pf-error-message=""><strong>Richly <a href="https://example.com">rendered</a> errors!</strong></span>`,
+      richError.innerHTML
+    )
   })
 })

test/rendering.test.js

@@ -87,6 +87,30 @@ suite('Rendering', async () => {
     assert.equal(true, itemElement.hasAttribute(`data-pf-error-preserve`))
   })
 
+  test(`errorMessageListItemWithHTML`, async() => {
+    const container = await fixture(html`
+      <div>
+        <p>Some content</p>
+
+        <template id="pf-error-list-item-template">
+          <li><span>‼️</span> <span data-pf-error-message></span></li>
+        </template>
+      </div>
+    `)
+
+    const htmlString = `<strong>Richly <a href="https://example.com">rendered</a> errors!</strong>`
+
+    const itemElement = Rendering.errorMessageListItemWithHTML(htmlString, "a-custom-type")
+
+    assert.equal("a-custom-type", itemElement.getAttribute(`data-pf-error-type`))
+    assert.equal(htmlString, itemElement.querySelector(`[data-pf-error-message]`).innerHTML)
+    assert.equal("‼️ Richly rendered errors!", itemElement.textContent)
+    assert.equal(false, itemElement.hasAttribute(`data-pf-error-preserve`))
+
+    itemElement.setAttribute(`data-pf-error-preserve`, true)
+    assert.equal(true, itemElement.hasAttribute(`data-pf-error-preserve`))
+  })
+
   test(`renderConstraintValidationMessageForElement: the input is valid`, async () => {
     const container = await fixture(html`
       <div>