Support tokens in description field

README.md

@@ -127,11 +127,21 @@ const webformToolkit = new WebformToolkit(container, settings, callback);
 | min         | Input number min ([number](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number), [quantity](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/quantity)) | false |
 | step        | Input number step ([range](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range)) | false |
 | filter      | Validate form input using REGEX                         | false    |
-| description | Custom field description.                               | false    |
+| description | Custom field description ([Supported text tokens](#supported-text-tokens)). | false |
 | placeholder | Input field type placeholder text.                      | false    |
 | error       | Custom error message (Required, if `filter` is defined) | false    |
 | required    | Required field.                                         | false    |
 
+## Supported text tokens
+
+The following Markdown elements are supported in the `description` attribute:
+
+| Token Type   | Example                  |
+|--------------|--------------------------|
+| Bold         | **bold** |
+| Italic       | *italic*         |
+| Link         | [alt text](https://www.example.com) |
+
 ## Callback processing
 
 When a callback function is defined a form object is returned. This allows you to define a custom AJAX handler based on the requirements of your application. The following function corresponds to the [example](#usage) provided above.

demo/index.html

@@ -54,7 +54,7 @@
                   type: 'file',
                   name: 'upload',
                   maxlength: 18,
-                  description: 'You can upload a JPG, GIF or PNG (File size < 2 MB)',
+                  description: 'You can upload a [JPEG](https://en.wikipedia.org/wiki/JPEG), [GIF](https://en.wikipedia.org/wiki/GIF) or [PNG](https://en.wikipedia.org/wiki/PNG) *(2 MB max)*',
                   error: 'The upload failed due to unknown error',
                   required: false
                 }

src/webform-toolkit.js

@@ -244,7 +244,7 @@ function WebformToolkit(container, settings, callback) {
       const block = document.createElement('p');
       block.classList.add('description');
       block.setAttribute('role', 'info');
-      block.textContent = config.description;
+      block.innerHTML = parseTokens(stripMarkup(config.description));
 
       div.appendChild(block);
     }
@@ -600,6 +600,40 @@ function WebformToolkit(container, settings, callback) {
     }
   }
 
+  /**
+   * Parse Markdown tokens, return HTML equivalent.
+   *
+   * @param {String} text
+   *   Text value.
+   *
+   * @return {String}
+   */
+  function parseTokens(text = '') {
+    return text
+
+    // Bold
+    .replace(/\*\*(.*)\*\*/g, '<strong>$1</strong>')
+
+    // Italic
+    .replace(/\*(.*)\*/g, '<em>$1</em>')
+
+    // Link
+    .replace(/\[([^()]+)\]\(([^()]+)\)/g, '<a href="$2">$1</a>')
+  }
+
+  /**
+   * Remove HTML markup from a string.
+   *
+   * @param {String} text
+   *   Text value.
+   *
+   * @return {String}
+   */
+  function stripMarkup(text) {
+    return (new DOMParser().parseFromString(text, 'text/html'))
+      .body.textContent || '';
+  }
+
   /**
    * Protected members.
    */

test/e2e/input-file.js

@@ -52,4 +52,12 @@ describe('Input file element', function() {
       });
     });
   });
+
+  describe('Description', function() {
+    it('should contain text', async function() {
+      const text = await fieldset.$('.description');
+
+      await expect(text).toHaveHTML('You can upload a <a href="https://en.wikipedia.org/wiki/JPEG">JPEG</a>, <a href="https://en.wikipedia.org/wiki/GIF">GIF</a> or <a href="https://en.wikipedia.org/wiki/PNG">PNG</a> <em>(2 MB max)</em>', {includeSelectorTag: false});
+    });
+  });
 });