feature/add_markdown_to_forms (#809)

add description_md to the form component

---------

Co-authored-by: Theo Cochereau <[email protected]>
Co-authored-by: Théo Cochereau <[email protected]>

Author: 3 people

examples/official-site/sqlpage/migrations/01_documentation.sql

@@ -293,6 +293,7 @@ INSERT INTO parameter(component, name, description, type, top_level, optional) S
     ('create_new', 'In a multiselect with a dropdown, this option allows the user to enter new values, that are not in the list of options.', 'BOOLEAN', FALSE, TRUE),
     ('step', 'The increment of values in an input of type number. Set to 1 to allow only integers.', 'REAL', FALSE, TRUE),
     ('description', 'A helper text to display near the input field.', 'TEXT', FALSE, TRUE),
+    ('description_md', 'A helper text to display near the input field - formatted using markdown.', 'TEXT', FALSE, TRUE),
     ('pattern', 'A regular expression that the value must match. For instance, [0-9]{3} will only accept 3 digits.', 'TEXT', FALSE, TRUE),
     ('autofocus', 'Automatically focus the field when the page is loaded', 'BOOLEAN', FALSE, TRUE),
     ('width', 'Width of the form field, between 1 and 12.', 'INTEGER', FALSE, TRUE),
@@ -339,7 +340,7 @@ When loading the page, the value for `:username` will be `NULL` if no value has
     '{"name": "Last name", "required": true, "description": "We need your last name for legal purposes."},'||
     '{"name": "Resume", "type": "textarea"},'||
     '{"name": "Birth date", "type": "date", "max": "2010-01-01", "value": "1994-04-16"},'||
-    '{"name": "Password", "type": "password", "pattern": "^(?=.*[A-Za-z])(?=.*\\d)[A-Za-z\\d]{8,}$", "required": true, "description": "Minimum eight characters, at least one letter and one number."},'||
+    '{"name": "Password", "type": "password", "pattern": "^(?=.*[A-Za-z])(?=.*\\d)[A-Za-z\\d]{8,}$", "required": true, "description_md": "**Password Requirements:** Minimum **8 characters**, at least **one letter** & **one number**. *Tip:* Use a passphrase for better security!"},'||
     '{"label": "I accept the terms and conditions", "name": "terms", "type": "checkbox", "required": true}'||
     ']')),
     ('form','Create prepended and appended inputs to make your forms easier to use.',

sqlpage/templates/form.handlebars

@@ -31,6 +31,9 @@
                                 {{#if description}}
                                     <small class="form-hint mt-0">{{description}}</small>
                                 {{/if}}
+                                {{#if description_md}}
+                                    <small class="form-hint mt-0">{{markdown description_md}}</small>
+                                {{/if}}
                             </div>
                         </div>
                     </label>
@@ -123,6 +126,9 @@
                     {{#if description}}
                         <small class="form-hint mt-0">{{description}}</small>
                     {{/if}}
+                    {{#if description_md}}
+                        <small class="form-hint mt-0">{{markdown description_md}}</small>
+                    {{/if}}
                 </label>
             {{/if}}
             {{/if}}