From fcfdb8481a14f4add1b4de120c9feb1b1400e6df Mon Sep 17 00:00:00 2001
From: Johannes Raggam <thetetet@gmail.com>
Date: Tue, 4 Oct 2022 17:20:40 +0200
Subject: [PATCH 01/25] maint(pat-toggle): Add alias attribute for attr to
 toggle an attribute.

---
 src/pat/toggle/documentation.md | 22 +++++++++++++++++++++-
 src/pat/toggle/toggle.js        |  2 ++
 src/pat/toggle/toggle.test.js   | 22 ++++++++++++++++++++++
 3 files changed, 45 insertions(+), 1 deletion(-)

diff --git a/src/pat/toggle/documentation.md b/src/pat/toggle/documentation.md
index 4cf6246e4..8dc32dff7 100644
--- a/src/pat/toggle/documentation.md
+++ b/src/pat/toggle/documentation.md
@@ -8,7 +8,12 @@ For instance to show or hide a sidebar with a CSS class on the body tag.
 The _toggle_ pattern can be used to toggle attribute values for objects.
 It is most commonly used to toggle a CSS class.
 
-    <a href="#" class="pat-toggle" data-pat-toggle="selector: #work; attr: class; value: active">Start working</a>
+    <a href="#"
+        class="pat-toggle"
+        data-pat-toggle="
+            selector: #work;
+            attribute: class;
+            value: active">Start working</a>
     <div id="work">
       Working…
     </div>
@@ -67,3 +72,18 @@ The possible values for the `store` parameter are:
 -   `none`: do not remember the toggle state (default).
 -   `local`: remember the state as part of the local storage.
 -   `session`: remember the status as part of the session storage.
+
+
+### Options reference
+
+You can customise the behaviour of a switches through options in the
+`data-pat-toggle` attribute.
+
+| Property   | Default value | Values                   | Description                                                                                                                                                                                          | Type               |
+| ---------- | ------------- | ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
+| `selector` |               |                          | CSS selector matching elements where a class or an attribute should be toggled.                                                                                                                      | String             |
+| `value`    |               |                          | One or more space seperated CSS class names to toggle on the element. Can only be used with `attr` set to class, which is the default.                                                               | String             |
+| `event`    | `click`       |                          | A JavaScript event which triggers the toggler. The default is to listen to `click` events.                                                                                                           | String             |
+| `attr`     | `class`       |                          | The attribute which should be toggled. In case of the default `class`, class names are added or removed. In case of any other attribute the attribute as added or removed.                           | String             |
+| `store`    | `none`        | `none` `session` `local` | How to store the state of a toggle. `none` does not remember the toggle state, `local` stores the state as part of the local storage and `session` stores the status as part of the session storage. | Mutually exclusive |
+
diff --git a/src/pat/toggle/toggle.js b/src/pat/toggle/toggle.js
index 38ccc0b87..735d4638a 100644
--- a/src/pat/toggle/toggle.js
+++ b/src/pat/toggle/toggle.js
@@ -19,6 +19,8 @@ parser.addArgument("attr", "class");
 parser.addArgument("value");
 parser.addArgument("store", "none", ["none", "session", "local"]);
 
+parser.addAlias("attribute", "attr");
+
 export function ClassToggler(values) {
     this.values = values.slice(0);
     if (this.values.length > 1) this.values.push(values[0]);
diff --git a/src/pat/toggle/toggle.test.js b/src/pat/toggle/toggle.test.js
index b0c36ef84..d7b408f70 100644
--- a/src/pat/toggle/toggle.test.js
+++ b/src/pat/toggle/toggle.test.js
@@ -175,6 +175,16 @@ describe("Pattern implementation", function () {
                 store: "none",
             });
         });
+
+        it("1.6 - Accept attribute as an alias to attr.", function () {
+            const instance = new Pattern(document.createElement("div"));
+            const validated = instance._validateOptions([
+                { attribute: "disabled", selector: "input" },
+            ]);
+            expect(validated.length).toEqual(1);
+            expect(validated[0].attribute).toEqual("disabled");
+            expect(validated[0].selector).toEqual("input");
+        });
     });
 
     describe("2 - When clicking on a toggle", function () {
@@ -226,6 +236,18 @@ describe("Pattern implementation", function () {
             await utils.timeout(1);
             expect(victims[0].disabled).toBe(false);
         });
+
+        it("2.3 - attributes are updated - use the alias", async function () {
+            var $trigger = $(trigger);
+            trigger.dataset.patToggle = ".victim; attribute: disabled";
+            new Pattern($trigger);
+            $trigger.click();
+            await utils.timeout(1);
+            expect(victims[0].disabled).toBe(true);
+            $trigger.click();
+            await utils.timeout(1);
+            expect(victims[0].disabled).toBe(false);
+        });
     });
 
     describe("3 - Toggle event triggers", function () {

From 752036f9848172a2b74f6070c5be71e12a0ca046 Mon Sep 17 00:00:00 2001
From: Johannes Raggam <thetetet@gmail.com>
Date: Wed, 5 Oct 2022 14:17:27 +0200
Subject: [PATCH 02/25] feat(pat-date-picker): Add placeholder support for
 styled behavior.

/cc @cornae
This fixes the following two issues:

Fixes: https://github.com/Patternslib/Patterns/issues/837
Fixes: https://github.com/quaive/ploneintranet.prototype/issues/1289
---
 src/pat/date-picker/date-picker.js      | 34 +++++++---
 src/pat/date-picker/date-picker.test.js | 82 +++++++++++++++++++------
 src/pat/date-picker/index.html          |  8 +++
 3 files changed, 96 insertions(+), 28 deletions(-)

diff --git a/src/pat/date-picker/date-picker.js b/src/pat/date-picker/date-picker.js
index 184c98144..69574c84c 100644
--- a/src/pat/date-picker/date-picker.js
+++ b/src/pat/date-picker/date-picker.js
@@ -95,7 +95,7 @@ export default Base.extend({
                 );
             }
 
-            let display_el_pat;
+            let pat_display_time;
             if (this.options.outputFormat) {
                 const PatDisplayTime = (await import("../display-time/display-time")).default; // prettier-ignore
                 const display_time_config = { format: this.format };
@@ -105,23 +105,39 @@ export default Base.extend({
                 if (this.options.locale) {
                     display_time_config.locale = this.options.locale;
                 }
-                display_el_pat = new PatDisplayTime(display_el, display_time_config);
-            } else {
+                pat_display_time = new PatDisplayTime(display_el, display_time_config);
+            } else if (this.el.value) {
                 display_el.textContent = el.value;
             }
 
-            $(display_el).on("init.display-time.patterns", () =>
-                this.add_clear_button(display_el)
-            );
+            // Add the additional elements "clear button" and placeholder to
+            // the `<time>` element.
+            const _add_additional = () => {
+                this.add_clear_button(display_el);
+                if (!this.el.value && this.el.placeholder) {
+                    display_el.innerHTML = `<span class="placeholder">${this.el.placeholder}</span>`;
+                }
+            };
+            if (pat_display_time) {
+                // Add the additional elements after display time has
+                // eventually cleared the contents or done any other changes.
+                $(display_el).on("init.display-time.patterns", () => {
+                    _add_additional();
+                });
+            } else {
+                // If no `pat-display-time` was used, add immediately.
+                _add_additional();
+            }
 
             this.el.addEventListener("change", () => {
                 display_el.setAttribute("datetime", this.el.value);
-                if (display_el_pat) {
-                    display_el_pat.format();
+                if (pat_display_time && this.el.value) {
+                    pat_display_time.format();
                 } else {
+                    //} else if (this.el.value) {
                     display_el.textContent = this.el.value;
                 }
-                this.add_clear_button(display_el);
+                _add_additional();
             });
 
             if (disabled) {
diff --git a/src/pat/date-picker/date-picker.test.js b/src/pat/date-picker/date-picker.test.js
index af9b02a92..3803d5695 100644
--- a/src/pat/date-picker/date-picker.test.js
+++ b/src/pat/date-picker/date-picker.test.js
@@ -37,6 +37,31 @@ const mock_fetch_i18n = () =>
             }),
     });
 
+const select_date = (el, date) => {
+    // Attention! Just select today.
+    // Scrolling calendar pages forward and backwards is not supported yet.
+    el.click();
+
+    const day = date.getDate().toString();
+    const month = date.getMonth().toString(); // remember, month-count starts from 0
+    const year = date.getFullYear().toString();
+
+    const cur_year = document.querySelector('.pika-lendar .pika-select-year option[selected="selected"]'); // prettier-ignore
+    expect(cur_year.textContent).toBe(year);
+
+    const cur_month = document.querySelector('.pika-lendar .pika-select-month option[selected="selected"]'); // prettier-ignore
+    expect(cur_month.value).toBe(month);
+
+    const cur_day = document.querySelector(".pika-lendar td.is-today button"); // prettier-ignore
+    expect(cur_day.getAttribute("data-pika-day")).toBe(day);
+
+    const cur_wkday = document.querySelector(".pika-lendar th:first-child abbr"); // prettier-ignore
+    expect(cur_wkday.textContent).toBe("Sun");
+
+    // select current day.
+    cur_day.dispatchEvent(new Event("mousedown"));
+};
+
 describe("pat-date-picker", function () {
     afterEach(function () {
         document.body.innerHTML = "";
@@ -57,28 +82,10 @@ describe("pat-date-picker", function () {
         expect(el.getAttribute("type")).toBe("date");
         expect(el.style.display).toBe("none");
 
-        display_el.click();
-
         const date = new Date();
-        const day = date.getDate().toString();
-        const month = date.getMonth().toString(); // remember, month-count starts from 0
-        const year = date.getFullYear().toString();
         const isodate = utils.localized_isodate(date);
+        select_date(display_el, date);
 
-        const cur_year = document.querySelector('.pika-lendar .pika-select-year option[selected="selected"]'); // prettier-ignore
-        expect(cur_year.textContent).toBe(year);
-
-        const cur_month = document.querySelector('.pika-lendar .pika-select-month option[selected="selected"]'); // prettier-ignore
-        expect(cur_month.value).toBe(month);
-
-        const cur_day = document.querySelector(".pika-lendar td.is-today button"); // prettier-ignore
-        expect(cur_day.getAttribute("data-pika-day")).toBe(day);
-
-        const cur_wkday = document.querySelector(".pika-lendar th:first-child abbr"); // prettier-ignore
-        expect(cur_wkday.textContent).toBe("Sun");
-
-        // select current day.
-        cur_day.dispatchEvent(new Event("mousedown"));
         // <time> element should contains the current date in iso format
         expect(display_el.textContent).toBe(isodate);
         // input element contains iso date
@@ -618,4 +625,41 @@ describe("pat-date-picker", function () {
         // There should be a error message from pat-validation.
         expect(form.querySelectorAll("em.warning").length).toBe(1);
     });
+
+    it("15 - Placeholder support.", async () => {
+        document.body.innerHTML = `
+            <input
+                type="date"
+                class="pat-date-picker"
+                placeholder="Select a date"
+                />`;
+        const el = document.querySelector("input[type=date]");
+        new pattern(el);
+        await utils.timeout(1); // wait a tick for async to settle.
+
+        const display_el = document.querySelector("time");
+        expect(display_el).toBeTruthy();
+        expect(display_el.textContent).toBe("Select a date");
+        expect(el.value).toBe("");
+
+        const date = new Date();
+        const isodate = utils.localized_isodate(date);
+        select_date(display_el, date);
+
+        // <time> element should contains the current date in iso format
+        expect(display_el.textContent).toBe(isodate);
+        // input element contains iso date
+        expect(el.value).toBe(isodate);
+
+        // Clear button is availale
+        let clear_button = display_el.querySelector(".cancel-button");
+        expect(clear_button).toBeTruthy();
+
+        clear_button.click();
+
+        // <time> element should contain the placeholder again
+        expect(display_el.textContent).toBe("Select a date");
+        // input element should be empty
+        expect(el.value).toBe("");
+    });
 });
diff --git a/src/pat/date-picker/index.html b/src/pat/date-picker/index.html
index 19dd3ff51..cbe0d809a 100644
--- a/src/pat/date-picker/index.html
+++ b/src/pat/date-picker/index.html
@@ -75,6 +75,14 @@
                 </label>
                 <br />
 
+                <label>Placeholder support.
+                    <input
+                        class="pat-date-picker"
+                        type="date"
+                        placeholder="YYYY-MM-DD"
+                    />
+                </label>
+                <br />
 
                 <label
                     >Show the week number.

From fe90c731093f4b84baef2e7359cb0829a9377bd3 Mon Sep 17 00:00:00 2001
From: Johannes Raggam <thetetet@gmail.com>
Date: Wed, 5 Oct 2022 14:18:19 +0200
Subject: [PATCH 03/25] feat(pat-sortable): Optionally import the sortable
 styles.

Import the sortable styles when the global variable
`__patternslib_import_styles` is set to `true` (the default is `false`).
This allows to show the sortable marker without having to separately
load all the styles.
---
 src/pat/sortable/sortable.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/pat/sortable/sortable.js b/src/pat/sortable/sortable.js
index 6347854e3..a5b31b151 100644
--- a/src/pat/sortable/sortable.js
+++ b/src/pat/sortable/sortable.js
@@ -15,6 +15,9 @@ export default Base.extend({
     trigger: ".pat-sortable",
 
     init: function () {
+        if (window.__patternslib_import_styles) {
+            import("./_sortable.scss");
+        }
         this.$form = this.$el.closest("form");
         this.options = parser.parse(this.$el, false);
         this.recordPositions().addHandles().initScrolling();

From 051310242928b7bc283827f49816178a3e0f3531 Mon Sep 17 00:00:00 2001
From: Johannes Raggam <thetetet@gmail.com>
Date: Wed, 5 Oct 2022 14:20:22 +0200
Subject: [PATCH 04/25] feat(pat-sortable): Add the sortable-item class to each
 sortable element.

The current situation requires the integrator to add the `sortable-item` class
on all sortables manually. If that is not done there can be styling problems
like a missing insert marker which makes it hard to use the pattern. As the
pattern already defines what should be a sortable it we also let the pattern
assign the class "sortable-item".
---
 src/pat/sortable/sortable.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/pat/sortable/sortable.js b/src/pat/sortable/sortable.js
index a5b31b151..9399b2cb8 100644
--- a/src/pat/sortable/sortable.js
+++ b/src/pat/sortable/sortable.js
@@ -41,6 +41,8 @@ export default Base.extend({
         this.$sortables = this.$el.children().filter(this.options.selector);
         this.$sortables.each(function (idx) {
             $(this).data("patterns.sortable", { position: idx });
+            // Add `.sortable-item` class to each sortable.
+            this.classList.add("sortable-item");
         });
         return this;
     },

From 5f3076c99e00e3012380c2eb927e616f22c27427 Mon Sep 17 00:00:00 2001
From: Johannes Raggam <thetetet@gmail.com>
Date: Wed, 5 Oct 2022 14:21:27 +0200
Subject: [PATCH 05/25] feat(pat-sortable): Support dynamic sortable lists.

When new items were added to a sortable list e.g. via pat-clone or
pat-inject, those items could not be sorted. We are now re-initializing
the sortable pattern after a `pat-update` event and make new elements
sortable.
---
 src/pat/sortable/sortable.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/pat/sortable/sortable.js b/src/pat/sortable/sortable.js
index 9399b2cb8..8d6a9ea7a 100644
--- a/src/pat/sortable/sortable.js
+++ b/src/pat/sortable/sortable.js
@@ -20,7 +20,7 @@ export default Base.extend({
         }
         this.$form = this.$el.closest("form");
         this.options = parser.parse(this.$el, false);
-        this.recordPositions().addHandles().initScrolling();
+        this.recordPositions().initScrolling();
         this.$el.on("pat-update", this.onPatternUpdate.bind(this));
     },
 
@@ -44,6 +44,7 @@ export default Base.extend({
             // Add `.sortable-item` class to each sortable.
             this.classList.add("sortable-item");
         });
+        this.addHandles();
         return this;
     },
 

From 9ed77c8b074b126cf32a4bca248273002426c426 Mon Sep 17 00:00:00 2001
From: Johannes Raggam <thetetet@gmail.com>
Date: Wed, 5 Oct 2022 18:27:43 +0200
Subject: [PATCH 06/25] maint(pat-validation): Rename log to logger for better
 naming.

---
 src/pat/validation/validation.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pat/validation/validation.js b/src/pat/validation/validation.js
index 4ee831c26..a91177255 100644
--- a/src/pat/validation/validation.js
+++ b/src/pat/validation/validation.js
@@ -7,8 +7,8 @@ import events from "../../core/events";
 import logging from "../../core/logging";
 import utils from "../../core/utils";
 
-const log = logging.getLogger("pat-validation");
-//log.setLevel(logging.Level.DEBUG);
+const logger = logging.getLogger("pat-validation");
+//logger.setLevel(logging.Level.DEBUG);
 
 export const parser = new Parser("validation");
 parser.addArgument("disable-selector", "[type=submit], button:not([type=button])"); // Elements which must be disabled if there are errors
@@ -121,7 +121,7 @@ export default Base.extend({
             return;
         }
 
-        log.debug(`
+        logger.debug(`
             validity_state.badInput ${validity_state.badInput}
             validity_state.customError ${validity_state.customError}
             validity_state.patternMismatch ${validity_state.patternMismatch}

From c8c656a1d50a5388f81739b8888b604b9b4d26ca Mon Sep 17 00:00:00 2001
From: Johannes Raggam <thetetet@gmail.com>
Date: Wed, 5 Oct 2022 18:34:34 +0200
Subject: [PATCH 07/25] maint(pat-validation): Use more debug messages.

---
 src/pat/validation/validation.js | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/pat/validation/validation.js b/src/pat/validation/validation.js
index a91177255..b9c8a4423 100644
--- a/src/pat/validation/validation.js
+++ b/src/pat/validation/validation.js
@@ -58,6 +58,7 @@ export default Base.extend({
         for (const [cnt, input] of this.inputs.entries()) {
             // Cancelable debouncer.
             const debouncer = utils.debounce((e) => {
+                logger.debug("Checking input for event", input, e);
                 this.check_input({ input: input, event: e });
                 if (this.disabled_elements.some((it) => it.disabled)) {
                     // If there are already any disabled elements, do a check
@@ -100,6 +101,7 @@ export default Base.extend({
                 // Immediate, non-debounced check with submit. Otherwise submit
                 // is not cancelable.
                 for (const input of this.inputs) {
+                    logger.debug("Checking input for submit", input, e);
                     this.check_input({ input: input, event: e });
                 }
             }
@@ -206,12 +208,15 @@ export default Base.extend({
                 }
 
                 // always check the other input to clear/set errors
-                !stop && // do not re-check when stop is set to avoid infinite loops
-                    not_after_el &&
+                // do not re-check when stop is set to avoid infinite loops
+                if (!stop && not_after_el) {
+                    logger.debug("Check `not-after` input.", not_after_el);
                     this.check_input({ input: not_after_el, stop: true });
-                !stop &&
-                    not_before_el &&
+                }
+                if (!stop && not_before_el) {
+                    logger.debug("Check `no-before` input.", not_after_el);
                     this.check_input({ input: not_before_el, stop: true });
+                }
             }
 
             if (!validity_state.customError) {
@@ -362,6 +367,7 @@ export default Base.extend({
             if (!it.disabled) {
                 it.setAttribute("disabled", "disabled");
                 it.classList.add("disabled");
+                logger.debug("Disable element", it);
             }
         }
     },

From 831ee60c5741c0b4dba6c3c2d7ba5beda1c71bf1 Mon Sep 17 00:00:00 2001
From: Johannes Raggam <thetetet@gmail.com>
Date: Wed, 5 Oct 2022 15:58:19 +0200
Subject: [PATCH 08/25] fix(pat-validation): Fallback error messages for
 not-before and not-after.

If no error messages were provided for the not-before and not-after
constraints on date fields no error messages were shown even when those inputs
had form validation errors.
Now we are always providing a fallback error message based on the label
or input name.
---
 src/pat/validation/validation.js      |  44 +++++++-
 src/pat/validation/validation.test.js | 138 +++++++++++++++++++++++++-
 2 files changed, 179 insertions(+), 3 deletions(-)

diff --git a/src/pat/validation/validation.js b/src/pat/validation/validation.js
index b9c8a4423..6f77de2d6 100644
--- a/src/pat/validation/validation.js
+++ b/src/pat/validation/validation.js
@@ -157,6 +157,8 @@ export default Base.extend({
                 });
             } else if (input_options.not.after || input_options.not.before) {
                 const msg = input_options.message.date || input_options.message.datetime;
+                const msg_default_not_before = "The date must be after %{attribute}";
+                const msg_default_not_after = "The date must be before %{attribute}";
 
                 let not_after;
                 let not_after_el;
@@ -201,9 +203,47 @@ export default Base.extend({
                     const date = new Date(input.value);
 
                     if (not_after && date > not_after) {
-                        this.set_validity({ input: input, msg: msg });
+                        let msg_attr;
+                        // Try to construct a meaningfull error message
+                        if (!not_after_el && input_options.not.after) {
+                            // fixed date case
+                            msg_attr = input_options.not.after;
+                        } else {
+                            // Get the label + other text content within the
+                            // label and replace all whitespace and newlines
+                            // with a single space.
+                            msg_attr = not_after_el?.labels?.[0]?.textContent.replace(
+                                /\s\s+/g, // replace all whitespace
+                                " " // with a single space
+                            );
+                            msg_attr = msg_attr || not_after_el.name;
+                        }
+                        this.set_validity({
+                            input: input,
+                            msg: msg || msg_default_not_after,
+                            attribute: msg_attr.trim(),
+                        });
                     } else if (not_before && date < not_before) {
-                        this.set_validity({ input: input, msg: msg });
+                        let msg_attr;
+                        // Try to construct a meaningfull error message
+                        if (!not_before_el && input_options.not.before) {
+                            // fixed date case
+                            msg_attr = input_options.not.before;
+                        } else {
+                            // Get the label + other text content within the
+                            // label and replace all whitespace and newlines
+                            // with a single space.
+                            msg_attr = not_before_el?.labels?.[0]?.textContent.replace(
+                                /\s\s+/g, // replace all whitespace
+                                " " // with a single space
+                            );
+                            msg_attr = msg_attr || not_before_el.name;
+                        }
+                        this.set_validity({
+                            input: input,
+                            msg: msg || msg_default_not_before,
+                            attribute: msg_attr.trim(),
+                        });
                     }
                 }
 
diff --git a/src/pat/validation/validation.test.js b/src/pat/validation/validation.test.js
index 07c260e72..8d283e298 100644
--- a/src/pat/validation/validation.test.js
+++ b/src/pat/validation/validation.test.js
@@ -945,7 +945,7 @@ describe("pat-validation", function () {
         expect(el.querySelectorAll("em.warning").length).toBe(0);
     });
 
-    it("5.4 - validates dates with before/after as pattern config attributes with custom error message.", async function () {
+    it("5.4.1 - validates dates with before/after as pattern config attributes with custom error message.", async function () {
         document.body.innerHTML = `
           <form class="pat-validation">
             <input
@@ -987,6 +987,142 @@ describe("pat-validation", function () {
         expect(el.querySelectorAll("em.warning").length).toBe(0);
     });
 
+    it("5.4.2 - validates dates with before/after as pattern config attributes with NO custom error message, using fixed dates.", async function () {
+        document.body.innerHTML = `
+          <form class="pat-validation">
+            <input
+                type="date"
+                name="date"
+                data-pat-validation="
+                    not-before: 2011-11-11;
+                    not-after: 2022-02-22;
+                " />
+          </form>
+        `;
+
+        const el = document.querySelector(".pat-validation");
+        const inp = el.querySelector("[name=date]");
+
+        new Pattern(el);
+        await utils.timeout(1); // wait a tick for async to settle.
+
+        // No error when left empty and not required.
+        inp.value = "";
+        inp.dispatchEvent(events.change_event());
+        await utils.timeout(1); // wait a tick for async to settle.
+        expect(el.querySelectorAll("em.warning").length).toBe(0);
+
+        inp.value = "2010-10-10";
+        inp.dispatchEvent(events.change_event());
+        await utils.timeout(1); // wait a tick for async to settle.
+        expect(el.querySelectorAll("em.warning").length).toBe(1);
+        expect(el.querySelectorAll("em.warning")[0].textContent).toBe(
+            "The date must be after 2011-11-11"
+        );
+
+        inp.value = "2023-02-23";
+        inp.dispatchEvent(events.change_event());
+        await utils.timeout(1); // wait a tick for async to settle.
+        expect(el.querySelectorAll("em.warning").length).toBe(1);
+        expect(el.querySelectorAll("em.warning")[0].textContent).toBe(
+            "The date must be before 2022-02-22"
+        );
+
+        inp.value = "2022-01-01";
+        inp.dispatchEvent(events.change_event());
+        await utils.timeout(1); // wait a tick for async to settle.
+
+        expect(el.querySelectorAll("em.warning").length).toBe(0);
+    });
+
+    it("5.4.3 - validates dates with before/after as pattern config attributes with NO custom error message, using labels.", async function () {
+        document.body.innerHTML = `
+          <form class="pat-validation">
+            <label>ye date
+                <input
+                    type="date"
+                    name="date1"
+                    data-pat-validation="
+                        not-after: [name=date2];
+                    " />
+            </label>
+            <label>woo date
+                <input
+                    type="date"
+                    name="date2"
+                    data-pat-validation="
+                        not-before: [name=date1];
+                    " />
+            </label>
+          </form>
+        `;
+
+        const el = document.querySelector(".pat-validation");
+        const inp1 = el.querySelector("[name=date1]");
+        const inp2 = el.querySelector("[name=date2]");
+
+        new Pattern(el);
+        await utils.timeout(1); // wait a tick for async to settle.
+
+        inp1.value = "2010-10-10";
+        inp2.value = "2001-01-01";
+
+        inp1.dispatchEvent(events.change_event());
+        await utils.timeout(1); // wait a tick for async to settle.
+        expect(el.querySelectorAll("em.warning").length).toBe(2);
+
+        console.log(document.body.innerHTML);
+        expect(el.querySelectorAll("em.warning")[0].textContent).toBe(
+            "The date must be before woo date"
+        );
+
+        expect(el.querySelectorAll("em.warning")[1].textContent).toBe(
+            "The date must be after ye date"
+        );
+    });
+
+    it("5.4.4 - validates dates with before/after as pattern config attributes with NO custom error message, using input names.", async function () {
+        document.body.innerHTML = `
+          <form class="pat-validation">
+            <input
+                type="date"
+                name="date1"
+                data-pat-validation="
+                    not-after: [name=date2];
+                " />
+            <input
+                type="date"
+                name="date2"
+                data-pat-validation="
+                    not-before: [name=date1];
+                " />
+          </form>
+        `;
+
+        const el = document.querySelector(".pat-validation");
+        const inp1 = el.querySelector("[name=date1]");
+        const inp2 = el.querySelector("[name=date2]");
+
+        new Pattern(el);
+        await utils.timeout(1); // wait a tick for async to settle.
+
+        inp1.value = "2010-10-10";
+        inp2.value = "2001-01-01";
+
+        inp1.dispatchEvent(events.change_event());
+        await utils.timeout(1); // wait a tick for async to settle.
+        expect(el.querySelectorAll("em.warning").length).toBe(2);
+
+        console.log(document.body.innerHTML);
+        expect(el.querySelectorAll("em.warning")[0].textContent).toBe(
+            "The date must be before date2"
+        );
+
+        expect(el.querySelectorAll("em.warning")[1].textContent).toBe(
+            "The date must be after date1"
+        );
+    });
+
     it("5.5 - validates dates with before/after constraints", async function () {
         document.body.innerHTML = `
             <form class="pat-validation">

From a8b7981de8138b7fe5ce5d7ca3c81517381afc89 Mon Sep 17 00:00:00 2001
From: Johannes Raggam <thetetet@gmail.com>
Date: Wed, 5 Oct 2022 18:47:54 +0200
Subject: [PATCH 09/25] fix(pat-validation): Fix problem with multiple form
 validation runs.

Due to some event listers calling each other multiple times, the form
was validated up to 5 times in one validation run. This commit fixes
multiple validation runs when a form element was disabled, e.g. when the
submit button was disabled after validation errors.
---
 src/pat/validation/validation.js | 24 ++++++++++++++----------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/pat/validation/validation.js b/src/pat/validation/validation.js
index 6f77de2d6..9420e857f 100644
--- a/src/pat/validation/validation.js
+++ b/src/pat/validation/validation.js
@@ -60,16 +60,6 @@ export default Base.extend({
             const debouncer = utils.debounce((e) => {
                 logger.debug("Checking input for event", input, e);
                 this.check_input({ input: input, event: e });
-                if (this.disabled_elements.some((it) => it.disabled)) {
-                    // If there are already any disabled elements, do a check
-                    // for the whole form.
-                    // This is necessary otherwise the submit button is already
-                    // disabled and no other errors would be shown.
-                    // This is debounced, so it should not disturb too much while typing.
-                    for (const _input of this.inputs.filter((it) => it !== input)) {
-                        this.check_input({ input: _input });
-                    }
-                }
             }, this.options.delay);
 
             events.add_event_listener(
@@ -403,12 +393,26 @@ export default Base.extend({
         }
         input[KEY_ERROR_EL] = error_node;
 
+        let did_disable = false;
         for (const it of this.disabled_elements) {
             if (!it.disabled) {
+                did_disable = true;
                 it.setAttribute("disabled", "disabled");
                 it.classList.add("disabled");
                 logger.debug("Disable element", it);
             }
         }
+
+        // Do an initial check of the whole form when a form element (e.g. the
+        // submit button) was disabled. We want to show the user all possible
+        // errors at once and after the submit button is disabled there is no
+        // way to check the whole form at once. ... well we also do not want to
+        // check the whole form when one input was changed....
+        if (did_disable) {
+            logger.debug("Checking whole form after element was disabled.");
+            for (const _input of this.inputs.filter((it) => it !== input)) {
+                this.check_input({ input: _input, stop: true });
+            }
+        }
     },
 });

From 8838da03a6ac9784a71d16358fc674265e9dd6ae Mon Sep 17 00:00:00 2001
From: Johannes Raggam <thetetet@gmail.com>
Date: Wed, 5 Oct 2022 19:04:39 +0200
Subject: [PATCH 10/25] feat(pat-validation): Validate also newly added form
 elements.

When form elements were added via user interaction - e.g. by using
pat-clone or pat-inject - those elements were not validated. Now the
form validation is re-initialized after a `pat-update` event and this
problem is fixed.
---
 src/pat/validation/validation.js | 46 +++++++++++++++++++-------------
 1 file changed, 27 insertions(+), 19 deletions(-)

diff --git a/src/pat/validation/validation.js b/src/pat/validation/validation.js
index 9420e857f..d5383a929 100644
--- a/src/pat/validation/validation.js
+++ b/src/pat/validation/validation.js
@@ -1,5 +1,6 @@
 // Patterns validate - Form vlidation
 import "../../core/polyfills"; // SubmitEvent.submitter for Safari < 15.4 and jsDOM
+import $ from "jquery";
 import Base from "../../core/base";
 import Parser from "../../core/parser";
 import dom from "../../core/dom";
@@ -44,6 +45,32 @@ export default Base.extend({
 
     init() {
         this.options = parser.parse(this.el, this.options);
+        events.add_event_listener(
+            this.el,
+            "submit",
+            `pat-validation--submit--validator`,
+            (e) => {
+                // On submit, check all.
+                // Immediate, non-debounced check with submit. Otherwise submit
+                // is not cancelable.
+                for (const input of this.inputs) {
+                    logger.debug("Checking input for submit", input, e);
+                    this.check_input({ input: input, event: e });
+                }
+            }
+        );
+
+        this.initialize_inputs();
+        $(this.el).on("pat-update", () => {
+            this.initialize_inputs();
+        });
+
+        // Set ``novalidate`` attribute to disable the browser's validation
+        // bubbles but not disable the validation API.
+        this.el.setAttribute("novalidate", "");
+    },
+
+    initialize_inputs() {
         this.inputs = [
             ...this.el.querySelectorAll("input[name], select[name], textarea[name]"),
         ];
@@ -51,10 +78,6 @@ export default Base.extend({
             ...this.el.querySelectorAll(this.options.disableSelector),
         ];
 
-        // Set ``novalidate`` attribute to disable the browser's validation
-        // bubbles but not disable the validation API.
-        this.el.setAttribute("novalidate", "");
-
         for (const [cnt, input] of this.inputs.entries()) {
             // Cancelable debouncer.
             const debouncer = utils.debounce((e) => {
@@ -81,21 +104,6 @@ export default Base.extend({
                 (e) => debouncer(e)
             );
         }
-
-        events.add_event_listener(
-            this.el,
-            "submit",
-            `pat-validation--submit--validator`,
-            (e) => {
-                // On submit, check all.
-                // Immediate, non-debounced check with submit. Otherwise submit
-                // is not cancelable.
-                for (const input of this.inputs) {
-                    logger.debug("Checking input for submit", input, e);
-                    this.check_input({ input: input, event: e });
-                }
-            }
-        );
     },
 
     check_input({ input, event, stop = false }) {

From a20a883434c6010babd702f86df07ff5f53d7445 Mon Sep 17 00:00:00 2001
From: Johannes Raggam <thetetet@gmail.com>
Date: Wed, 5 Oct 2022 18:11:22 +0200
Subject: [PATCH 11/25] fix(pat-date-picker): Do not throw a blur event after
 selecting a date.

When a date was selected with the date picker a `blur` and `changed`
event was thrown. Now we only throw a `changed` event if da date was
selected. If no date was selected we throw a `blur` event allow
pat-validation do validate required date input fields when no value was
given.
---
 src/pat/date-picker/date-picker.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pat/date-picker/date-picker.js b/src/pat/date-picker/date-picker.js
index 69574c84c..98abaa4e7 100644
--- a/src/pat/date-picker/date-picker.js
+++ b/src/pat/date-picker/date-picker.js
@@ -168,7 +168,7 @@ export default Base.extend({
             showWeekNumber: this.options.weekNumbers === "show",
             onSelect: () => this.dispatch_change_event(),
             onClose: () => {
-                if (this.options.behavior === "styled") {
+                if (this.options.behavior === "styled" && !this.el.value) {
                     // blur the input field so that pat-validate can kick in when
                     // nothing was selected.
                     el.dispatchEvent(events.blur_event());

From 4ae9b79a1ccfa5074989e8928bed65fc379ec1e6 Mon Sep 17 00:00:00 2001
From: Johannes Raggam <thetetet@gmail.com>
Date: Mon, 10 Oct 2022 17:52:52 +0200
Subject: [PATCH 12/25] Remove date-picker-bak.js file which is unused.

---
 src/pat/date-picker/date-picker-bak.js | 213 -------------------------
 1 file changed, 213 deletions(-)
 delete mode 100644 src/pat/date-picker/date-picker-bak.js

diff --git a/src/pat/date-picker/date-picker-bak.js b/src/pat/date-picker/date-picker-bak.js
deleted file mode 100644
index 6748a3965..000000000
--- a/src/pat/date-picker/date-picker-bak.js
+++ /dev/null
@@ -1,213 +0,0 @@
-/* pat-date-picker  - Polyfill for input type=date */
-import $ from "jquery";
-import Base from "../../core/base";
-import Parser from "../../core/parser";
-import dom from "../../core/dom";
-import events from "../../core/events";
-import utils from "../../core/utils";
-
-export const parser = new Parser("date-picker");
-parser.addArgument("behavior", "styled", ["native", "styled"]);
-parser.addArgument("week-numbers", [], ["show", "hide"]);
-parser.addArgument("i18n"); // URL pointing to JSON resource with i18n values
-parser.addArgument("first-day", 0);
-parser.addArgument("after");
-parser.addArgument("offset-days", 0);
-
-parser.add_argument("output-format", null);
-parser.add_argument("locale", null);
-
-parser.addAlias("behaviour", "behavior");
-
-/* JSON format for i18n
- * { "previousMonth": "Previous Month",
- *   "nextMonth"    : "Next Month",
- *   "months"       : ["January","February","March","April","May","June","July","August","September","October","November","December"],
- *   "weekdays"     : ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],
- *   "weekdaysShort": ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"]
- * } */
-
-export default Base.extend({
-    name: "date-picker",
-    trigger: ".pat-date-picker",
-    parser: parser,
-    format: "YYYY-MM-DD",
-
-    async init() {
-        const el = this.el;
-        const disabled = this.el.disabled;
-
-        //TODO: make parser with options extend missing options.
-        //this.options = parser.parse(el, opts);
-        this.options = $.extend(parser.parse(el), this.options);
-
-        if (!disabled && this.options.after) {
-            // Set the date depending on another date which must be ``offset-days``
-            // BEFORE this date. Only set it, if the other date is AFTER this
-            // date.
-            const befores = document.querySelectorAll(this.options.after);
-            for (const b_el of befores) {
-                b_el.addEventListener("change", (e) => {
-                    let b_date = e.target.value; // the "before-date"
-                    b_date = b_date ? new Date(b_date) : null;
-                    if (!b_date) {
-                        return;
-                    }
-                    let a_date = this.el.value; // the "after-date"
-                    a_date = a_date ? new Date(a_date) : null;
-                    if (!a_date || a_date < b_date) {
-                        const offset = this.options.offsetDays || 0;
-                        b_date.setDate(b_date.getDate() + offset);
-                        this.el.value = b_date.toISOString().substring(0, 10);
-                        this.dispatch_change_event();
-                    }
-                });
-            }
-        }
-
-        let display_el;
-        if (this.options.behavior === "styled") {
-            dom.hide(el); // hide input, but keep active (e.g. for validation)
-
-            display_el = document.createElement("time");
-            display_el.setAttribute("class", "output-field");
-            display_el.setAttribute("datetime", el.value);
-            if (disabled) {
-                display_el.classList.add("disabled");
-            }
-            el.insertAdjacentElement("beforebegin", display_el);
-
-            // Disable click on label, as this invokes a click on the invisible
-            // input field which opens the calendar in Firefox and masks a
-            // click on display_el on Chrome.
-            const label = display_el.closest("label");
-            if (label) {
-                events.add_event_listener(
-                    label,
-                    "click",
-                    "pat-date-picker--label",
-                    (e) => {
-                        e.preventDefault();
-                    }
-                );
-            }
-
-            let display_el_pat;
-            if (this.options.outputFormat) {
-                const PatDisplayTime = (await import("../display-time/display-time")).default; // prettier-ignore
-                const display_time_config = { format: this.format };
-                if (this.options.outputFormat) {
-                    display_time_config["output-format"] = this.options.outputFormat;
-                }
-                if (this.options.locale) {
-                    display_time_config.locale = this.options.locale;
-                }
-                display_el_pat = new PatDisplayTime(display_el, display_time_config);
-            } else {
-                display_el.textContent = el.value;
-            }
-
-            $(display_el).on("init.display-time.patterns", () =>
-                this.add_clear_button(display_el)
-            );
-
-            this.el.addEventListener("change", () => {
-                display_el.setAttribute("datetime", this.el.value);
-                if (display_el_pat) {
-                    display_el_pat.format();
-                } else {
-                    display_el.textContent = this.el.value;
-                }
-                this.add_clear_button(display_el);
-            });
-
-            if (disabled) {
-                // nothing else to do here...
-                return;
-            }
-        } else if (disabled) {
-            return;
-        } else if (utils.checkInputSupport("date", "invalid date")) {
-            // behavior native with native support.
-            return;
-        } else if (el.getAttribute("type") === "date") {
-            // behavior native but no native support.
-            // Fallback JS date picker with a text input field.
-            el.setAttribute("type", "text");
-        }
-
-        if (window.__patternslib_import_styles) {
-            import("./_date-picker.scss");
-        }
-        const Pikaday = (await import("pikaday")).default;
-
-        // Set the default date to the elements value or today.
-        let default_date = new Date(this.el.value);
-        default_date = isNaN(default_date) ? new Date() : default_date;
-
-        const config = {
-            field: el,
-            trigger: display_el || el,
-            format: this.format,
-            firstDay: this.options.firstDay,
-            defaultDate: default_date,
-            setDefaultDate: false, // do not initially set the input's date.
-            showWeekNumber: this.options.weekNumbers === "show",
-            onOpen: () => {
-                // Set the default date to the elements value or today.
-                let date = new Date(this.el.value);
-                date = isNaN(date) ? new Date() : date;
-                this.pikaday.setDate(date);
-            },
-            onSelect: () => this.dispatch_change_event(),
-        };
-
-        if (el.getAttribute("min")) {
-            config.minDate = new Date(el.getAttribute("min"));
-        }
-        if (el.getAttribute("max")) {
-            config.maxDate = new Date(el.getAttribute("max"));
-        }
-
-        if (this.options.i18n) {
-            try {
-                const response = await fetch(this.options.i18n);
-                config.i18n = await response.json();
-            } catch {
-                console.error(
-                    `date-picker could not load i18n for ${this.options.i18n}`
-                );
-            }
-        }
-        this.pikaday = new Pikaday(config);
-    },
-
-    add_clear_button(el_append_to) {
-        if (!this.el.disabled && !this.el.required && this.el.value) {
-            // Add clear button
-            const clear_button = document.createElement("span");
-            clear_button.setAttribute("class", "cancel-button");
-            clear_button.addEventListener("click", (e) => {
-                e.stopPropagation();
-                this.el.value = null;
-                this.dispatch_change_event();
-            });
-            el_append_to.appendChild(clear_button);
-        }
-    },
-
-    dispatch_change_event() {
-        const event = new Event("change", {
-            bubbles: true,
-            cancelable: true,
-        });
-        // Set ``firedBy` to prevent pikaday to call it's own handler and land
-        // in an infinite loop.
-        event.firedBy = this.pikaday;
-        this.el.dispatchEvent(event);
-
-        // Also trigger input-change
-        $(this.el).trigger("input-change");
-        $(this.el.form).trigger("input-change");
-    },
-});

From 5546b7a8c3e452a553fe22af21e6a0bbdc2ff649 Mon Sep 17 00:00:00 2001
From: Johannes Raggam <thetetet@gmail.com>
Date: Tue, 4 Oct 2022 19:55:07 +0200
Subject: [PATCH 13/25] todo note - non-reachable code part. e.tagName is
 always undefined, it needs to be a.target.tagName.

---
 src/pat/switch/switch.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pat/switch/switch.js b/src/pat/switch/switch.js
index 4688522b6..8dcdc9403 100644
--- a/src/pat/switch/switch.js
+++ b/src/pat/switch/switch.js
@@ -23,6 +23,7 @@ export default Base.extend({
         this.options = this._validateOptions(parser.parse(this.el, this.options, true));
 
         events.add_event_listener(this.el, "click", "pat-switch--on-click", (e) => {
+            // TODO: e.target.tagName
             if (e.tagName === "A") {
                 e.preventDefault();
             }

From 81c4e14c035164007592523647a58807d8b2a899 Mon Sep 17 00:00:00 2001
From: Johannes Raggam <thetetet@gmail.com>
Date: Fri, 30 Sep 2022 01:16:42 +0200
Subject: [PATCH 14/25] maint(pat-markdown): Modernize code.

---
 src/pat/markdown/content/content    | 10 ++--
 src/pat/markdown/content/content.md | 18 ++++++
 src/pat/markdown/documentation.md   |  2 +-
 src/pat/markdown/index.html         | 93 ++++++++++++++---------------
 src/pat/markdown/injected-page.html | 18 ------
 src/pat/markdown/markdown.js        | 45 +++++++-------
 6 files changed, 93 insertions(+), 93 deletions(-)
 delete mode 100644 src/pat/markdown/injected-page.html

diff --git a/src/pat/markdown/content/content b/src/pat/markdown/content/content
index 41321d18f..bb514be8c 100644
--- a/src/pat/markdown/content/content
+++ b/src/pat/markdown/content/content
@@ -2,12 +2,12 @@
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ultrices purus vitae erat convallis iaculis.
 
-- Praesent vulputate blandit 
+- Praesent vulputate blandit
 - Quam non sagittis
-- Nulla feugiat 
+- Nulla feugiat
 
-**Faucibus convallis** 
+**Faucibus convallis**
 
-> Vivamus rutrum volutpat sagittis. Etiam eu lorem justo. Vestibulum sit amet placerat est. Nunc iaculis neque ac dui tempus vel vulputate quam laoreet. 
+> Vivamus rutrum volutpat sagittis. Etiam eu lorem justo. Vestibulum sit amet placerat est. Nunc iaculis neque ac dui tempus vel vulputate quam laoreet.
 
-Felis dui porttitor eros, ac imperdiet magna orci quis quam. Morbi dapibus lacinia nisl, ac dictum dolor faucibus ac.
\ No newline at end of file
+Felis dui porttitor eros, ac imperdiet magna orci quis quam. Morbi dapibus lacinia nisl, ac dictum dolor faucibus ac.
diff --git a/src/pat/markdown/content/content.md b/src/pat/markdown/content/content.md
index 45c0ca127..4ea5b4d7b 100644
--- a/src/pat/markdown/content/content.md
+++ b/src/pat/markdown/content/content.md
@@ -15,3 +15,21 @@ Felis dui porttitor eros, ac imperdiet magna orci quis quam. Morbi dapibus lacin
 | Felis | dui       | porttitor |
 | ----- | --------- | --------- |
 | dui   | porttitor | eros      |
+
+
+Some code:
+
+```javascript
+const pattern = registry.patterns[name];
+if (pattern.transform) {
+    try {
+        pattern.transform($content);
+    } catch (e) {
+        if (dont_catch) {
+          throw(e);
+        }
+        log.error("Transform error for pattern" + name, e);
+    }
+}
+```
+
diff --git a/src/pat/markdown/documentation.md b/src/pat/markdown/documentation.md
index 3847a7bc7..9e5a0a392 100644
--- a/src/pat/markdown/documentation.md
+++ b/src/pat/markdown/documentation.md
@@ -11,7 +11,7 @@ The markdown pattern can render [Markdown](http://en.wikipedia.org/wiki/Markdown
 
        1. Number one.
        2. Number two.
-    </div>
+    </pre>
 
 The text inside the element will be rendered using the
 [PageDown](http://code.google.com/p/pagedown/) renderer. The original
diff --git a/src/pat/markdown/index.html b/src/pat/markdown/index.html
index 4fc5cfbcb..a0a7f1348 100644
--- a/src/pat/markdown/index.html
+++ b/src/pat/markdown/index.html
@@ -1,23 +1,18 @@
 <!DOCTYPE html>
 <html>
-    <head>
-        <title>Demo page</title>
-        <meta charset="utf-8">
-        <link rel="stylesheet" href="/style/common.css" />
-        <script src="/bundle.min.js"></script>
-    </head>
-    <body>
-        <h3>The content below is rendered from Markdown</h3>
-        <hr />
-        <article class="pat-rich">
-            <!--
-		<h3>Autoloading content from a separate Markdown file</h3>
-		<a href="content/content.md" class="pat-inject" data-pat-inject="target: self::element; trigger: autoload">
-            This content will be replaced by the source content of the link, rendered as HTML.
-        </a>
-		<hr/>
-        -->
-            <pre class="pat-markdown">
+  <head>
+    <title>Demo page</title>
+    <meta charset="utf-8" />
+    <link href="/style/common.css"
+          rel="stylesheet"
+    />
+    <script src="/bundle.min.js"></script>
+  </head>
+  <body>
+    <h3>The content below is rendered from Markdown</h3>
+    <hr />
+    <article class="pat-rich">
+      <div class="pat-markdown">
 # Header 1
 ## Header 2
 
@@ -33,34 +28,38 @@ <h3>Autoloading content from a separate Markdown file</h3>
 | Felis | dui       | porttitor |
 |-------|-----------|-----------|
 | dui   | porttitor | eros      |
-				</pre
-            >
-            <hr />
 
-            <!--
-	        <h2>Inject a page that has a self injecting link for Markdown content in it.</h2>
-	        <a href="injected-page.html" class="pat-inject" data-pat-inject="target: self::element; trigger: autoload">
-	            This content will be replaced by the source content of the link that is in the HTML this link links to, rendered as HTML.
-	        </a>
-            <hr />
-            -->
-            <h3>
-                <a
-                    href="content/content.md"
-                    class="pat-inject"
-                    data-pat-inject="target: #target"
-                    >Click here to inject more markdown content</a
-                >
-            </h3>
-            <!--
-            <ol>
-                <li><a href="content/content" class="pat-inject" data-pat-inject="target: #target; data-type: markdown">Inject markdown content with data-type declaration.</a></li>
-                <li><a href="content/content.md" class="pat-inject" data-pat-inject="target: #target">Inject markdown content, automatically detected as markdown based on the file name extension.</a></li>
-            </ol>
-            -->
-            <div id="target">
-                The content rendered from markdown will appear here.
-            </div>
-        </article>
-    </body>
+Some code:
+
+```javascript
+const pattern = registry.patterns[name];
+if (pattern.transform) {
+    try {
+        pattern.transform($content);
+    } catch (e) {
+        if (dont_catch) {
+          throw(e);
+        }
+        log.error("Transform error for pattern" + name, e);
+    }
+}
+```
+      </div>
+      <hr />
+
+      <ol>
+        <li><a class="pat-inject"
+             href="content/content"
+             data-pat-inject="target: #target; data-type: markdown"
+          >Inject markdown content with data-type declaration.</a></li>
+        <li><a class="pat-inject"
+             href="content/content.md"
+             data-pat-inject="target: #target"
+          >Inject markdown content, automatically detected as markdown based on the file name extension.</a></li>
+      </ol>
+      <div id="target">
+          The content rendered from markdown will appear here.
+      </div>
+    </article>
+  </body>
 </html>
diff --git a/src/pat/markdown/injected-page.html b/src/pat/markdown/injected-page.html
deleted file mode 100644
index c743f20c6..000000000
--- a/src/pat/markdown/injected-page.html
+++ /dev/null
@@ -1,18 +0,0 @@
-<!DOCTYPE html>
-<html>
-    <head>
-        <title>Demo page</title>
-        <meta charset="utf-8">
-        <link rel="stylesheet" href="/style/common.css" />
-        <script src="/bundle.min.js"></script>
-    </head>
-    <body>
-        <a
-            href="content/content.md"
-            class="pat-inject"
-            data-pat-inject="source: ::element; target: self::element; trigger: autoload"
-            >This content will be replaced by the source content of the link,
-            rendered as HTML.</a
-        >
-    </body>
-</html>
diff --git a/src/pat/markdown/markdown.js b/src/pat/markdown/markdown.js
index ba0b21aaf..75ca03647 100644
--- a/src/pat/markdown/markdown.js
+++ b/src/pat/markdown/markdown.js
@@ -4,10 +4,10 @@ import utils from "../../core/utils";
 import Base from "../../core/base";
 import inject from "../inject/inject";
 
-var log = logging.getLogger("pat.markdown");
-var is_markdown_resource = /\.md$/;
+const log = logging.getLogger("pat.markdown");
+const is_markdown_resource = /\.md$/;
 
-var Markdown = Base.extend({
+const Markdown = Base.extend({
     name: "markdown",
     trigger: ".pat-markdown",
 
@@ -17,9 +17,12 @@ var Markdown = Base.extend({
              * to pat-inject. The following only applies to standalone, when
              * $el is explicitly configured with the pat-markdown trigger.
              */
-            var source = this.$el.is(":input") ? this.$el.val() : this.$el.text();
+            const source = this.$el.is(":input")
+                ? this.$el.val()
+                : this.$el[0].innerHTML;
             let rendered = await this.render(source);
-            rendered.replaceAll(this.$el);
+            this.el.innerHTML = "";
+            this.el.append(...rendered[0].childNodes);
         }
     },
 
@@ -44,18 +47,19 @@ var Markdown = Base.extend({
             ];
         };
 
-        const $rendering = $("<div/>");
+        const wrapper = document.createElement("div");
         const converter = new Showdown.Converter({
             tables: true,
             extensions: ["prettify"],
         });
-        $rendering.html(converter.makeHtml(text));
-        return $rendering;
+        const html = converter.makeHtml(text);
+        wrapper.innerHTML = html;
+        return $(wrapper);
     },
 
     async renderForInjection(cfg, data) {
-        var header,
-            source = data;
+        let header;
+        let source = data;
         if (cfg.source && (header = /^#+\s*(.*)/.exec(cfg.source)) !== null) {
             source = this.extractSection(source, header[1]);
             if (source === null) {
@@ -69,21 +73,18 @@ var Markdown = Base.extend({
     },
 
     extractSection(text, header) {
-        var pattern, level;
+        let pattern;
         header = utils.escapeRegExp(header);
-        var matcher = new RegExp(
-                "^((#+)\\s*@TEXT@\\s*|@TEXT@\\s*\\n([=-])+\\s*)$".replace(
-                    /@TEXT@/g,
-                    header
-                ),
-                "m"
-            ),
-            match = matcher.exec(text);
+        let matcher = new RegExp(
+            "^((#+)\\s*@TEXT@\\s*|@TEXT@\\s*\\n([=-])+\\s*)$".replace(/@TEXT@/g, header),
+            "m"
+        );
+        let match = matcher.exec(text);
         if (match === null) {
             return null;
         } else if (match[2]) {
             // We have a ##-style header.
-            level = match[2].length;
+            const level = match[2].length;
             pattern =
                 "^#{@LEVEL@}\\s*@TEXT@\\s*$\\n+((?:.|\\n)*?(?=^#{1,@LEVEL@}\\s)|.*(?:.|\\n)*)";
             pattern = pattern.replace(/@LEVEL@/g, level);
@@ -117,7 +118,7 @@ $(document).ready(function () {
             /* Identify injected URLs which point to markdown files and set their
              * datatype so that we can register a type handler for them.
              */
-            var cfgs = $(this).data("pat-inject");
+            const cfgs = $(this).data("pat-inject");
             cfgs.forEach(function (cfg) {
                 if (is_markdown_resource.test(cfg.url)) {
                     cfg.dataType = "markdown";
@@ -131,7 +132,7 @@ inject.registerTypeHandler("markdown", {
     async sources(cfgs, data) {
         return await Promise.all(
             cfgs.map(async function (cfg) {
-                var pat = Markdown.init(cfg.$target);
+                const pat = new Markdown(cfg.$target[0]);
                 const rendered = await pat.renderForInjection(cfg, data);
                 return rendered;
             })

From 3739935a53315f0a1f0ad63b1626df4c5bcea62c Mon Sep 17 00:00:00 2001
From: Johannes Raggam <thetetet@gmail.com>
Date: Mon, 3 Oct 2022 23:59:18 +0200
Subject: [PATCH 15/25] feat(pat-markdown): Switch to marked as markdown
 library to support better syntax highlight libraries.

---
 package.json                      |  2 ++
 src/pat/markdown/markdown.js      | 30 +++++-------------------------
 src/pat/markdown/markdown.test.js |  8 ++++----
 3 files changed, 11 insertions(+), 29 deletions(-)

diff --git a/package.json b/package.json
index c750667a4..9a40585ab 100644
--- a/package.json
+++ b/package.json
@@ -14,12 +14,14 @@
         "@fullcalendar/timegrid": "^5.11.3",
         "@juggle/resize-observer": "^3.4.0",
         "@stomp/stompjs": "^6.1.2",
+        "dompurify": "^2.4.0",
         "google-code-prettify": "^1.0.5",
         "imagesloaded": "^4.1.4",
         "intersection-observer": "^0.12.2",
         "jquery": "^3.6.1",
         "jquery-jcrop": "^0.9.13",
         "luxon": "2.4.0",
+        "marked": "^4.1.0",
         "masonry-layout": "^4.2.2",
         "moment": "^2.29.4",
         "moment-timezone": "^0.5.37",
diff --git a/src/pat/markdown/markdown.js b/src/pat/markdown/markdown.js
index 75ca03647..03064af6b 100644
--- a/src/pat/markdown/markdown.js
+++ b/src/pat/markdown/markdown.js
@@ -27,33 +27,13 @@ const Markdown = Base.extend({
     },
 
     async render(text) {
-        const Showdown = (await import("showdown")).default;
-
-        // Add support for syntax highlighting via pat-syntax-highlight
-        Showdown.extensions.prettify = function () {
-            return [
-                {
-                    type: "output",
-                    filter: function (source) {
-                        return source.replace(/(<pre>)?<code>/gi, function (match, pre) {
-                            if (pre) {
-                                return '<pre class="pat-syntax-highlight" tabIndex="0"><code data-inner="1">';
-                            } else {
-                                return '<code class="pat-syntax-highlight">';
-                            }
-                        });
-                    },
-                },
-            ];
-        };
+        const marked = (await import("marked")).marked;
+        const DOMPurify = (await import("dompurify")).default;
+        await import("../syntax-highlight/syntax-highlight").default;
 
         const wrapper = document.createElement("div");
-        const converter = new Showdown.Converter({
-            tables: true,
-            extensions: ["prettify"],
-        });
-        const html = converter.makeHtml(text);
-        wrapper.innerHTML = html;
+        const parsed = DOMPurify.sanitize(marked.parse(text));
+        wrapper.innerHTML = parsed;
         return $(wrapper);
     },
 
diff --git a/src/pat/markdown/markdown.test.js b/src/pat/markdown/markdown.test.js
index 29a940d3c..40a7c45dc 100644
--- a/src/pat/markdown/markdown.test.js
+++ b/src/pat/markdown/markdown.test.js
@@ -16,7 +16,7 @@ describe("pat-markdown", function () {
         afterEach(() => {
             jest.restoreAllMocks();
         });
-        it("replaces the DOM element with the rendered Markdown content.", async function () {
+        it("It renders content for elements with the pattern trigger.", async function () {
             var $el = $('<p class="pat-markdown"></p>');
             $el.appendTo("#lab");
             jest.spyOn(pattern.prototype, "render").mockImplementation(() => {
@@ -24,10 +24,10 @@ describe("pat-markdown", function () {
             });
             pattern.init($el);
             await utils.timeout(1); // wait a tick for async to settle.
-            expect($("#lab").html()).toBe("<p>Rendering</p>");
+            expect($("#lab").html()).toBe('<p class="pat-markdown">Rendering</p>');
         });
 
-        it("does not replace the DOM element if it doesn't have the pattern trigger", function () {
+        it("It does not render when the DOM element doesn't have the pattern trigger", function () {
             var $el = $("<p></p>");
             $el.appendTo("#lab");
             jest.spyOn(pattern.prototype, "render").mockImplementation(() => {
@@ -70,7 +70,7 @@ describe("pat-markdown", function () {
 
         it("converts markdown into HTML", async function () {
             const $rendering = await pattern.prototype.render("*This is markdown*");
-            expect($rendering.html()).toBe("<p><em>This is markdown</em></p>");
+            expect($rendering.html()).toBe(`<p><em>This is markdown</em></p>\n`);
         });
     });
 

From 8fd88c01dfb21ab970d0e8679988ec805cba147c Mon Sep 17 00:00:00 2001
From: Johannes Raggam <thetetet@gmail.com>
Date: Mon, 3 Oct 2022 23:59:54 +0200
Subject: [PATCH 16/25] feat(pat-markdown): Initialize syntax highlight when
 parsing markup.

---
 src/pat/markdown/markdown.js      | 12 +++++++++++-
 src/pat/markdown/markdown.test.js | 24 ++++++++++++++++++++++++
 2 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/src/pat/markdown/markdown.js b/src/pat/markdown/markdown.js
index 03064af6b..e8127df73 100644
--- a/src/pat/markdown/markdown.js
+++ b/src/pat/markdown/markdown.js
@@ -2,6 +2,7 @@ import $ from "jquery";
 import logging from "../../core/logging";
 import utils from "../../core/utils";
 import Base from "../../core/base";
+import events from "../../core/events";
 import inject from "../inject/inject";
 
 const log = logging.getLogger("pat.markdown");
@@ -29,11 +30,20 @@ const Markdown = Base.extend({
     async render(text) {
         const marked = (await import("marked")).marked;
         const DOMPurify = (await import("dompurify")).default;
-        await import("../syntax-highlight/syntax-highlight").default;
+        const SyntaxHighlight = (await import("../syntax-highlight/syntax-highlight")).default; // prettier-ignore
 
         const wrapper = document.createElement("div");
         const parsed = DOMPurify.sanitize(marked.parse(text));
         wrapper.innerHTML = parsed;
+        for (const item of wrapper.querySelectorAll("pre > code")) {
+            const pre = item.parentElement;
+            pre.classList.add("pat-syntax-highlight");
+            // If the code block language was set in a fenced code block,
+            // marked has already set the language as a class on the code tag.
+            // pat-syntax-highlight will understand this.
+            new SyntaxHighlight(pre);
+            await events.await_event(pre, "init.syntax-highlight.patterns");
+        }
         return $(wrapper);
     },
 
diff --git a/src/pat/markdown/markdown.test.js b/src/pat/markdown/markdown.test.js
index 40a7c45dc..cbb56f58e 100644
--- a/src/pat/markdown/markdown.test.js
+++ b/src/pat/markdown/markdown.test.js
@@ -159,4 +159,28 @@ describe("pat-markdown", function () {
             ).toBe("My title\n-------\nContent\n\n");
         });
     });
+
+    describe("Code blocks", function () {
+        it("It correctly renders code blocks", async function () {
+            document.body.innerHTML = `<div class="pat-markdown">
+# Title
+
+some content
+
+\`\`\`javascript
+    const foo = "bar";
+\`\`\`
+</div>
+`;
+
+            new pattern(document.querySelector(".pat-markdown"));
+            await utils.timeout(1); // wait a tick for async to settle.
+            await utils.timeout(1); // wait a tick for async to settle.
+            expect(document.body.querySelector(".pat-markdown > h1").textContent).toBe("Title"); // prettier-ignore
+            expect(document.body.querySelector(".pat-markdown > p").textContent).toBe("some content"); // prettier-ignore
+            expect(document.body.querySelector(".pat-markdown > pre code")).toBeTruthy(); // prettier-ignore
+            expect(document.body.querySelector(".pat-markdown > pre.language-javascript code.language-javascript")).toBeTruthy(); // prettier-ignore
+            expect(document.body.querySelector(".pat-markdown > pre code .token").textContent).toBeTruthy(); // prettier-ignore
+        });
+    });
 });

From b8ecca487c6c4cb4a9e4fcdfc1e89cc2c99cefd5 Mon Sep 17 00:00:00 2001
From: Johannes Raggam <thetetet@gmail.com>
Date: Tue, 4 Oct 2022 00:14:02 +0200
Subject: [PATCH 17/25] pat-syntax-highlight: Switch to Prism syntax
 highlighting.

---
 package.json                                 |  1 +
 src/pat/syntax-highlight/index.html          | 61 +++++++++++++++-----
 src/pat/syntax-highlight/syntax-highlight.js | 57 ++++++++++++++++--
 3 files changed, 101 insertions(+), 18 deletions(-)

diff --git a/package.json b/package.json
index 9a40585ab..556797b1e 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
         "moment-timezone": "^0.5.37",
         "photoswipe": "^4.1.3",
         "pikaday": "^1.8.0",
+        "prismjs": "^1.29.0",
         "promise-polyfill": "^8.2.3",
         "screenfull": "^6.0.2",
         "select2": "^3.5.1",
diff --git a/src/pat/syntax-highlight/index.html b/src/pat/syntax-highlight/index.html
index 4a3edbc6b..ffbce29cc 100644
--- a/src/pat/syntax-highlight/index.html
+++ b/src/pat/syntax-highlight/index.html
@@ -1,23 +1,56 @@
 <!DOCTYPE html>
 <html>
-    <head>
-        <title>pat-syntax-highlight demo page</title>
-        <meta charset="utf-8">
-        <link rel="stylesheet" href="/style/common.css" />
-        <script src="/bundle.min.js"></script>
-    </head>
-    <body>
-        <h2>Sample output:</h2>
-        <pre class="pat-syntax-highlight light-bg">
-var pattern = registry.patterns[name];
+  <head>
+    <title>pat-syntax-highlight demo page</title>
+    <meta charset="utf-8" />
+    <link href="/style/common.css"
+          rel="stylesheet"
+    />
+    <script src="/bundle.min.js"></script>
+  </head>
+  <body>
+    <h2>Syntax highlight for JavaScript</h2>
+    <pre class="pat-syntax-highlight">
+      <code class="language-javascript">
+const pattern = registry.patterns[name];
 if (pattern.transform) {
     try {
         pattern.transform($content);
     } catch (e) {
-        if (dont_catch) { throw(e); }
+        if (dont_catch) {
+          throw(e);
+        }
         log.error("Transform error for pattern" + name, e);
     }
-    </pre
-        >
-    </body>
+}
+      </code>
+    </pre>
+
+    <h2>Syntax highlight for HTML</h2>
+    <pre class="pat-syntax-highlight">
+      <code class="language-html">
+&lt;h1&gt;hello&lt;/h1&gt;
+      </code>
+    </pre>
+
+    <h2>Syntax highlight for JavaScript with line-numbers</h2>
+    <pre class="pat-syntax-highlight"
+         data-pat-syntax-highlight="features: line-numbers, line-highlight"
+         data-line="1-2, 4"
+    >
+      <code class="language-javascript">
+const pattern = registry.patterns[name];
+if (pattern.transform) {
+    try {
+        pattern.transform($content);
+    } catch (e) {
+        if (dont_catch) {
+          throw(e);
+        }
+        log.error("Transform error for pattern" + name, e);
+    }
+}
+      </code>
+    </pre>
+  </body>
 </html>
diff --git a/src/pat/syntax-highlight/syntax-highlight.js b/src/pat/syntax-highlight/syntax-highlight.js
index 75c7dd94f..588cb8b27 100644
--- a/src/pat/syntax-highlight/syntax-highlight.js
+++ b/src/pat/syntax-highlight/syntax-highlight.js
@@ -1,13 +1,62 @@
 import Base from "../../core/base";
-import utils from "../../core/utils";
+import Parser from "../../core/parser";
+
+export const parser = new Parser("syntax-highlight");
+parser.addArgument("language", "html");
+parser.addArgument("theme", "dark", ["dark", "light"]);
+parser.addArgument("features", null, ["line-highlight", "line-numbers"], true);
 
 export default Base.extend({
     name: "syntax-highlight",
     trigger: ".pat-syntax-highlight",
 
     async init() {
-        const Prettify = (await import("google-code-prettify/src/prettify")).default; // prettier-ignore
-        this.$el.addClass("prettyprint");
-        utils.debounce(Prettify.prettyPrint, 50)();
+        this.options = parser.parse(this.el, this.options);
+
+        let theme;
+        if (this.options.theme === "light") {
+            theme = "";
+        } else if (this.options.theme === "dark") {
+            theme = "okaidia";
+        } else {
+            theme = this.options.theme;
+        }
+
+        import(`prismjs/themes/prism${theme ? "-" + theme : ""}.css`);
+        const Prism = (await import("prismjs")).default;
+
+        if (this.options.features.includes("line-highlight")) {
+            import("prismjs/plugins/line-highlight/prism-line-highlight.css");
+            await import("prismjs/plugins/line-highlight/prism-line-highlight.js");
+        }
+
+        if (this.options.features.includes("line-numbers")) {
+            import("prismjs/plugins/line-numbers/prism-line-numbers.css");
+            await import("prismjs/plugins/line-numbers/prism-line-numbers.js");
+            this.el.classList.add("line-numbers");
+        }
+
+        Prism.manual = true;
+
+        let _el = this.el;
+        const code_el = [...this.el.children].filter((it) => it.tagName === "CODE")?.[0];
+        if (code_el) {
+            _el = code_el;
+        }
+
+        // Get the language
+        let language = [..._el.classList, ...this.el.classList]
+            .filter((it) => {
+                return it.startsWith("language-") || it.startsWith("lang-");
+            })?.[0]
+            ?.replace("language-", "")
+            ?.replace("lang-", "");
+        // CSS class language always win.
+        language = language || this.options.language || "html";
+        // Set the language on the code element (ignored if already set)
+        this.el.classList.add(`language-${language}`);
+        _el.classList.add(`language-${language}`);
+
+        Prism.highlightElement(_el);
     },
 });

From 8fb23e1f339de8260a3ad221af0302d149064b27 Mon Sep 17 00:00:00 2001
From: Johannes Raggam <thetetet@gmail.com>
Date: Mon, 3 Oct 2022 12:35:13 +0200
Subject: [PATCH 18/25] maint(pat-syntax-highlight): Switch to class based
 pattern.

---
 src/pat/syntax-highlight/syntax-highlight.js | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/pat/syntax-highlight/syntax-highlight.js b/src/pat/syntax-highlight/syntax-highlight.js
index 588cb8b27..793a6fdda 100644
--- a/src/pat/syntax-highlight/syntax-highlight.js
+++ b/src/pat/syntax-highlight/syntax-highlight.js
@@ -1,18 +1,18 @@
-import Base from "../../core/base";
+import { BasePattern } from "../../core/basepattern";
 import Parser from "../../core/parser";
+import registry from "../../core/registry";
 
 export const parser = new Parser("syntax-highlight");
 parser.addArgument("language", "html");
 parser.addArgument("theme", "dark", ["dark", "light"]);
 parser.addArgument("features", null, ["line-highlight", "line-numbers"], true);
 
-export default Base.extend({
-    name: "syntax-highlight",
-    trigger: ".pat-syntax-highlight",
+class Pattern extends BasePattern {
+    static name = "syntax-highlight";
+    static trigger = ".pat-syntax-highlight";
+    parser = parser;
 
     async init() {
-        this.options = parser.parse(this.el, this.options);
-
         let theme;
         if (this.options.theme === "light") {
             theme = "";
@@ -58,5 +58,9 @@ export default Base.extend({
         _el.classList.add(`language-${language}`);
 
         Prism.highlightElement(_el);
-    },
-});
+    }
+}
+
+registry.register(Pattern);
+export default Pattern;
+export { Pattern };

From 85212ba338ce488f737185553fdd3cd6444ac035 Mon Sep 17 00:00:00 2001
From: Johannes Raggam <thetetet@gmail.com>
Date: Mon, 3 Oct 2022 16:28:29 +0200
Subject: [PATCH 19/25] feat(pat-syntax-highlight): Switch to highlight.js.

highlight.js allows to dyamically load languages in a webpack
environment (almost, see next commit). Prism.js is mainly a Node.js
library and currently not suited to load languages dynamically.
---
 package.json                                  |  1 +
 src/pat/markdown/markdown.test.js             |  3 +-
 src/pat/syntax-highlight/index.html           | 24 ++-----
 src/pat/syntax-highlight/syntax-highlight.js  | 72 ++++++++++++-------
 .../syntax-highlight/syntax-highlight.test.js | 56 +++++++++++++++
 webpack/webpack.config.js                     |  6 +-
 6 files changed, 118 insertions(+), 44 deletions(-)
 create mode 100644 src/pat/syntax-highlight/syntax-highlight.test.js

diff --git a/package.json b/package.json
index 556797b1e..2cf063ee1 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
         "@stomp/stompjs": "^6.1.2",
         "dompurify": "^2.4.0",
         "google-code-prettify": "^1.0.5",
+        "highlight.js": "^11.6.0",
         "imagesloaded": "^4.1.4",
         "intersection-observer": "^0.12.2",
         "jquery": "^3.6.1",
diff --git a/src/pat/markdown/markdown.test.js b/src/pat/markdown/markdown.test.js
index cbb56f58e..06bc938c5 100644
--- a/src/pat/markdown/markdown.test.js
+++ b/src/pat/markdown/markdown.test.js
@@ -176,11 +176,12 @@ some content
             new pattern(document.querySelector(".pat-markdown"));
             await utils.timeout(1); // wait a tick for async to settle.
             await utils.timeout(1); // wait a tick for async to settle.
+
             expect(document.body.querySelector(".pat-markdown > h1").textContent).toBe("Title"); // prettier-ignore
             expect(document.body.querySelector(".pat-markdown > p").textContent).toBe("some content"); // prettier-ignore
             expect(document.body.querySelector(".pat-markdown > pre code")).toBeTruthy(); // prettier-ignore
             expect(document.body.querySelector(".pat-markdown > pre.language-javascript code.language-javascript")).toBeTruthy(); // prettier-ignore
-            expect(document.body.querySelector(".pat-markdown > pre code .token").textContent).toBeTruthy(); // prettier-ignore
+            expect(document.body.querySelector(".pat-markdown > pre code .hljs-keyword")).toBeTruthy(); // prettier-ignore
         });
     });
 });
diff --git a/src/pat/syntax-highlight/index.html b/src/pat/syntax-highlight/index.html
index ffbce29cc..8dbc0401a 100644
--- a/src/pat/syntax-highlight/index.html
+++ b/src/pat/syntax-highlight/index.html
@@ -33,24 +33,14 @@ <h2>Syntax highlight for HTML</h2>
       </code>
     </pre>
 
-    <h2>Syntax highlight for JavaScript with line-numbers</h2>
-    <pre class="pat-syntax-highlight"
-         data-pat-syntax-highlight="features: line-numbers, line-highlight"
-         data-line="1-2, 4"
-    >
-      <code class="language-javascript">
-const pattern = registry.patterns[name];
-if (pattern.transform) {
-    try {
-        pattern.transform($content);
-    } catch (e) {
-        if (dont_catch) {
-          throw(e);
-        }
-        log.error("Transform error for pattern" + name, e);
-    }
-}
+    <h2>Syntax highlight for Python</h2>
+    <pre class="pat-syntax-highlight">
+      <code class="language-python">
+def foo():
+    if not bar:
+          return True
       </code>
     </pre>
+
   </body>
 </html>
diff --git a/src/pat/syntax-highlight/syntax-highlight.js b/src/pat/syntax-highlight/syntax-highlight.js
index 793a6fdda..2cdf3dd09 100644
--- a/src/pat/syntax-highlight/syntax-highlight.js
+++ b/src/pat/syntax-highlight/syntax-highlight.js
@@ -1,6 +1,7 @@
 import { BasePattern } from "../../core/basepattern";
 import Parser from "../../core/parser";
 import registry from "../../core/registry";
+import utils from "../../core/utils";
 
 export const parser = new Parser("syntax-highlight");
 parser.addArgument("language", "html");
@@ -13,36 +14,27 @@ class Pattern extends BasePattern {
     parser = parser;
 
     async init() {
+        let _el = this.el;
+        const code_el = [...this.el.children].filter((it) => it.tagName === "CODE")?.[0];
+        if (code_el) {
+            _el = code_el;
+        }
+
         let theme;
-        if (this.options.theme === "light") {
-            theme = "";
+        if (
+            this.options.theme === "light" ||
+            _el.classList.contains("light-bg") ||
+            this.el.classList.contains("light-bg")
+        ) {
+            theme = "stackoverflow-light";
         } else if (this.options.theme === "dark") {
-            theme = "okaidia";
+            theme = "stackoverflow-dark";
         } else {
             theme = this.options.theme;
         }
 
-        import(`prismjs/themes/prism${theme ? "-" + theme : ""}.css`);
-        const Prism = (await import("prismjs")).default;
-
-        if (this.options.features.includes("line-highlight")) {
-            import("prismjs/plugins/line-highlight/prism-line-highlight.css");
-            await import("prismjs/plugins/line-highlight/prism-line-highlight.js");
-        }
-
-        if (this.options.features.includes("line-numbers")) {
-            import("prismjs/plugins/line-numbers/prism-line-numbers.css");
-            await import("prismjs/plugins/line-numbers/prism-line-numbers.js");
-            this.el.classList.add("line-numbers");
-        }
-
-        Prism.manual = true;
-
-        let _el = this.el;
-        const code_el = [...this.el.children].filter((it) => it.tagName === "CODE")?.[0];
-        if (code_el) {
-            _el = code_el;
-        }
+        import(`highlight.js/styles/${theme}.css`);
+        const hljs = (await import("highlight.js")).default;
 
         // Get the language
         let language = [..._el.classList, ...this.el.classList]
@@ -56,8 +48,38 @@ class Pattern extends BasePattern {
         // Set the language on the code element (ignored if already set)
         this.el.classList.add(`language-${language}`);
         _el.classList.add(`language-${language}`);
+        _el.classList.add("hljs");
 
-        Prism.highlightElement(_el);
+        let high;
+        const value = utils.unescape_html(_el.innerHTML).trim();
+        if (language) {
+            try {
+                // language to import path mapping
+                const import_path_mapping = {
+                    atom: "xml",
+                    html: "xml",
+                    plist: "xml",
+                    rss: "xml",
+                    svg: "xml",
+                    wsf: "xml",
+                    xhtml: "xml",
+                    xjb: "xml",
+                    xsd: "xml",
+                    xsl: "xml",
+                };
+                const lang_file = import_path_mapping[language] || language;
+                const hljs_language = (
+                    await import(`highlight.js/lib/languages/${lang_file}`)
+                ).default;
+                hljs.registerLanguage("javascript", hljs_language);
+                high = hljs.highlight(value, { language: language }).value;
+            } catch {
+                high = hljs.highlightAuto(value).value;
+            }
+        } else {
+            high = hljs.highlightAuto(value).value;
+        }
+        _el.innerHTML = high;
     }
 }
 
diff --git a/src/pat/syntax-highlight/syntax-highlight.test.js b/src/pat/syntax-highlight/syntax-highlight.test.js
new file mode 100644
index 000000000..22cd45fef
--- /dev/null
+++ b/src/pat/syntax-highlight/syntax-highlight.test.js
@@ -0,0 +1,56 @@
+import pattern from "./syntax-highlight";
+import utils from "../../core/utils";
+
+describe("pat-markdown", function () {
+    beforeEach(function () {
+        document.body.innerHTML = "";
+    });
+
+    afterEach(function () {
+        document.body.innerHTML = "";
+    });
+
+    describe("when initialized", function () {
+        it("it does syntax highlighting.", async function () {
+            document.body.innerHTML = `<pre class="pat-syntax-highlight"><code class="language-python">def foo():\n    pass</code></pre>`;
+            new pattern(document.querySelector(".pat-syntax-highlight"));
+            await utils.timeout(1);
+            expect(
+                document.querySelector(".pat-syntax-highlight code .hljs-keyword")
+            ).toBeTruthy();
+            // Also adds the .hljs class to the wrapper
+            expect(
+                document.querySelector(".pat-syntax-highlight code.hljs")
+            ).toBeTruthy();
+        });
+
+        it("it does syntax highlighting on any element.", async function () {
+            document.body.innerHTML = `<div class="pat-syntax-highlight language-python">def foo():\n    pass</pre>`;
+            new pattern(document.querySelector(".pat-syntax-highlight"));
+            await utils.timeout(1);
+            expect(
+                document.querySelector(".pat-syntax-highlight .hljs-keyword")
+            ).toBeTruthy();
+            // Also adds the .hljs class to the wrapper
+            expect(document.querySelector(".pat-syntax-highlight.hljs")).toBeTruthy();
+        });
+
+        it("it does syntax highlighting for html.", async function () {
+            // html code should be escaped for `<`,`>` and `&`.
+            document.body.innerHTML = `<pre class="pat-syntax-highlight">
+                <code class="language-html">
+                    &lt;h1&gt;foo&lt;/h1&gt;
+                </code>
+            </pre>`;
+            new pattern(document.querySelector(".pat-syntax-highlight"));
+            await utils.timeout(1);
+            expect(
+                document.querySelector(".pat-syntax-highlight code .hljs-tag")
+            ).toBeTruthy();
+            // Also adds the .hljs class to the wrapper
+            expect(
+                document.querySelector(".pat-syntax-highlight code.hljs")
+            ).toBeTruthy();
+        });
+    });
+});
diff --git a/webpack/webpack.config.js b/webpack/webpack.config.js
index 3479035ac..55a516bd9 100644
--- a/webpack/webpack.config.js
+++ b/webpack/webpack.config.js
@@ -36,11 +36,15 @@ module.exports = () => {
             remote_entry: config.entry["bundle.min"],
             dependencies: package_json.dependencies,
             shared: {
-                jquery: {
+                "jquery": {
                     singleton: true,
                     requiredVersion: package_json.dependencies["jquery"],
                     eager: true,
                 },
+                "highlight.js": {
+                    singleton: true,
+                    version: package_json.dependencies["highlight.js"],
+                },
             },
         })
     );

From 0f00d8c58d0b9f349e7214c7132bde87a449f010 Mon Sep 17 00:00:00 2001
From: Johannes Raggam <thetetet@gmail.com>
Date: Mon, 10 Oct 2022 10:28:45 +0200
Subject: [PATCH 20/25] fix(pat-syntax-highlight): Depend on highlight.js <11.

highlight.js version 11 does not allow dynamic imports of languages and
styles with webpack due to an exports field in package.json.

See: https://github.com/highlightjs/highlight.js/issues/3634
---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 2cf063ee1..8f6bc8afe 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
         "@stomp/stompjs": "^6.1.2",
         "dompurify": "^2.4.0",
         "google-code-prettify": "^1.0.5",
-        "highlight.js": "^11.6.0",
+        "highlight.js": "<11",
         "imagesloaded": "^4.1.4",
         "intersection-observer": "^0.12.2",
         "jquery": "^3.6.1",

From 5c08b35921969564cbc80ed8cc97abab082ce3ac Mon Sep 17 00:00:00 2001
From: Johannes Raggam <thetetet@gmail.com>
Date: Wed, 5 Oct 2022 01:26:35 +0200
Subject: [PATCH 21/25] pat-clone-code: Add new pattern to clone code into a
 code tag for automating code examples from working pattern demos.

---
 src/pat/clone-code/clone-code.js              |  70 +++++++++++
 src/pat/clone-code/clone-code.test.js         |  76 ++++++++++++
 src/pat/clone-code/documentation.md           | 112 ++++++++++++++++++
 src/pat/clone-code/index.html                 |  24 ++++
 .../clone-code/templates/code-wrapper.html    |   5 +
 src/patterns.js                               |   1 +
 6 files changed, 288 insertions(+)
 create mode 100644 src/pat/clone-code/clone-code.js
 create mode 100644 src/pat/clone-code/clone-code.test.js
 create mode 100644 src/pat/clone-code/documentation.md
 create mode 100644 src/pat/clone-code/index.html
 create mode 100644 src/pat/clone-code/templates/code-wrapper.html

diff --git a/src/pat/clone-code/clone-code.js b/src/pat/clone-code/clone-code.js
new file mode 100644
index 000000000..2c39b075d
--- /dev/null
+++ b/src/pat/clone-code/clone-code.js
@@ -0,0 +1,70 @@
+import { BasePattern } from "../../core/basepattern";
+import code_wrapper_template from "./templates/code-wrapper.html";
+import dom from "../../core/dom";
+import Parser from "../../core/parser";
+import registry from "../../core/registry";
+import utils from "../../core/utils";
+
+export const parser = new Parser("clone-code");
+parser.addArgument("source", ":first-child");
+
+class Pattern extends BasePattern {
+    static name = "clone-code";
+    static trigger = ".pat-clone-code";
+    parser = parser;
+
+    init() {
+        // Source
+        if (this.options.source.lastIndexOf(":", 0) === 0) {
+            this.source = this.el.querySelector(this.options.source);
+        } else {
+            this.source = document.querySelector(this.options.source);
+        }
+        this.clone();
+    }
+
+    clone() {
+        // Clone the template.
+        let markup =
+            this.source.nodeName === "TEMPLATE"
+                ? this.source.innerHTML
+                : this.source.outerHTML;
+
+        // Create temporary wrapper.
+        let tmp_wrapper;
+        if (this.source.nodeName === "HTML") {
+            // We have a full HTML document which we cannot wrap into a div.
+            tmp_wrapper = new DOMParser().parseFromString(markup, "text/html");
+        } else {
+            tmp_wrapper = document.createElement("div");
+            tmp_wrapper.innerHTML = markup;
+        }
+
+        // Remove elements with the class ``clone-ignore``.
+        const ignore = tmp_wrapper.querySelectorAll(".clone-ignore");
+        for (const _el of ignore) {
+            _el.remove();
+        }
+
+        // Get back the clone string depending of what the wrapper is.
+        markup =
+            tmp_wrapper instanceof HTMLDocument
+                ? tmp_wrapper.documentElement.outerHTML
+                : tmp_wrapper.innerHTML;
+
+        markup = utils.escape_html(markup);
+        const pre_code_markup = dom.template(code_wrapper_template, { markup: markup });
+
+        // Now we need to wrap the contents in any case in a div.
+        tmp_wrapper = document.createElement("div");
+        tmp_wrapper.innerHTML = pre_code_markup;
+        const pre_code_el = tmp_wrapper.children[0];
+
+        this.el.appendChild(pre_code_el);
+        registry.scan(pre_code_el);
+    }
+}
+
+registry.register(Pattern);
+export default Pattern;
+export { Pattern };
diff --git a/src/pat/clone-code/clone-code.test.js b/src/pat/clone-code/clone-code.test.js
new file mode 100644
index 000000000..097033a0e
--- /dev/null
+++ b/src/pat/clone-code/clone-code.test.js
@@ -0,0 +1,76 @@
+import Pattern from "./clone-code";
+import utils from "@patternslib/patternslib/src/core/utils";
+
+describe("pat-clone-code", () => {
+    afterEach(() => {
+        document.body.innerHTML = "";
+    });
+
+    it("is initialized correctly", async () => {
+        document.body.innerHTML = `
+            <div class="pat-clone-code">
+                <p>hello world</p>
+            </div>
+        `;
+        const el = document.querySelector(".pat-clone-code");
+
+        new Pattern(el);
+        await utils.timeout(1); // wait a tick for async to settle.
+
+        const _el = document.body.querySelector(
+            ".pat-clone-code pre code.language-html"
+        );
+        expect(_el).toBeTruthy();
+        expect(_el.innerHTML.trim()).toBe("&lt;p&gt;hello world&lt;/p&gt;");
+        expect(_el.textContent.trim()).toBe("<p>hello world</p>");
+    });
+
+    it("clones another source", async () => {
+        document.body.innerHTML = `
+            <div class="pat-clone-code"
+                data-pat-clone-code="source: html">
+                <p>hello world</p>
+            </div>
+        `;
+        const el = document.querySelector(".pat-clone-code");
+
+        new Pattern(el);
+        await utils.timeout(1); // wait a tick for async to settle.
+
+        console.log(document.body.innerHTML);
+        const _el = document.body.querySelector(
+            ".pat-clone-code pre code.language-html"
+        );
+        expect(_el).toBeTruthy();
+
+        expect(_el.innerHTML.trim().indexOf("&lt;html&gt;")).toBe(0);
+        expect(_el.innerHTML.trim().indexOf("&lt;body") > 0).toBe(true);
+    });
+
+    it("ignores .clone-ignore", async () => {
+        document.body.innerHTML = `
+<div class="pat-clone-code">
+<div>
+<div>1</div>
+<div class="clone-ignore">2</div>
+<div>3</div>
+</div>
+</div>
+        `;
+        const el = document.querySelector(".pat-clone-code");
+
+        new Pattern(el);
+        await utils.timeout(1); // wait a tick for async to settle.
+
+        const _el = document.body.querySelector(
+            ".pat-clone-code pre code.language-html"
+        );
+        expect(_el).toBeTruthy();
+        console.log(document.body.innerHTML);
+        expect(_el.textContent.trim()).toBe(`<div>
+<div>1</div>
+
+<div>3</div>
+</div>`);
+    });
+});
diff --git a/src/pat/clone-code/documentation.md b/src/pat/clone-code/documentation.md
new file mode 100644
index 000000000..c31f2a74e
--- /dev/null
+++ b/src/pat/clone-code/documentation.md
@@ -0,0 +1,112 @@
+## Description
+
+The clone pattern lets the website user clone elements in the page.
+
+## Documentation
+
+The clone pattern is typically used in case you want to create a form on which it is unknown how many instances the user will need of a certain field or group of fields.
+For instance if you want to ask the user to fill out the name and birthdate of each family member.
+
+### Usage
+
+This pattern is enabled by adding the `pat-clone` class on a container element which contains the original element and any clones of it that may have beeen added.
+The first element inside the .pat-clone container is by default assumed to be the original element may be cloned by the user.
+
+Consider the following markup:
+
+    <h3>List of family members</h3>
+
+    <div class="pat-clone">
+      <!-- The first element inside the .pat-clone container is by default
+           assumed to be the original element which will be cloned.
+        -->
+      <fieldset class="clone"> <!-- By default, pat-clone will consider elements with the "clone" class to be clones. -->
+        <legend>Family member 1</legend>
+        <input name="name-1" type="text" placeholder="Name" />
+        <input name="date-1" type="date" placeholder="birthdate" /><br/>
+        <button type="button" class="remove-clone">Remove</button>
+      </fieldset>
+      <!-- Now comes the clone trigger, a button which when clicked will cause
+           a new clone of the above fieldset to be created.
+        -->
+      <button type="button" class="add-clone">Add an extra family member</button>
+    </div>
+
+Each time the user clicks on the button saying 'Add an extra family member', the
+pattern will make a copy of the first element inside the
+`.pat-clone` element, unless the `template` property is used to configure a
+different clone template. The `template` property takes a CSS selector as
+value.
+
+Typically when using a template element, such an element would be hidden from view.
+
+The new clone is always appended at the end, inside the `.pat-clone` element.
+
+When creating a `.pat-clone` element containing existing clones, it's
+important that each existing clone either gets the `clone` CSS class or that you
+pass in a unique CSS selector for each clone via the `clone-element`
+property. This allows the pattern to properly determine how many existing
+clones there are to start with.
+
+#### Incrementation of values in clones
+
+The pat-clone pattern will automatically add up any number in the values of name and value attributes.
+For instance, if you have `name="item-1"` in your markup, then the first clone will be
+`name="item-2"` and the one after that `name="item-3"` etc.. If you want to print a number
+— for instance in a header of each clone — then you can use the syntax: `#{1}`. This string
+will be replaced by an number that's also increased by 1 for each clone.
+
+### Example with a hidden template
+
+The markup below would have exactly the same effect as the first example, but using a hidden template. This might come in handy when the first instance shown should either contain different information, or if it will have pre-filled values by the server.
+
+    <h3>List of family members</h3>
+
+    <div class="pat-clone" data-pat-clone="template: #my-template">
+      <!-- First visible instance and also template -->
+      <fieldset class="clone">
+        <legend>Family member 1</legend>
+        <input name="Mary Johnson" type="text" placeholder="Name" />
+        <input name="1977-04-16" type="date" placeholder="birthdate" /><br/>
+        <button type="button" class="remove-clone">Remove</button>
+      </fieldset>
+
+      <!-- Template markup -->
+      <fieldset id="my-template" hidden>
+        <legend>Family member #{1}</legend>
+        <input name="name-1" type="text" placeholder="Name" />
+        <input name="date-1" type="date" placeholder="birthdate" /><br/>
+        <button type="button" class="remove-clone">Remove</button>
+      </fieldset>
+
+      <!-- Clone trigger -->
+      <button type="button" class="add-clone">Add an extra family member</button>
+    </div>
+
+### Example with a hidden template which includes a pattern
+
+Patterns in templates are initialized after cloning.
+However, the patterns in the template itself are not initialized if the template has the attribute ``hidden`` or the class ``disable-patterns``.
+This is to prevent double-initialization within the template and after being cloned.
+
+    <div id="template" class="disable-patterns" hidden>
+      <input name="date-1" type="date" class="pat-date-picker" />
+    </fieldset>
+
+    <div class="pat-clone" data-pat-clone="template: #template">
+      <button type="button" class="add-clone">Add a date</button>
+    </div>
+
+
+
+
+### Option reference
+
+| Property                            | Description                                                                                                                                                                | Default       | Allowed Values    | Type                              |
+| ----------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | ----------------- | --------------------------------- |
+| template                            | Selects the element that will be cloned each time. You might often want to refer to a piece of template markup for this that is hidden with though the CSS.                | :first        |                   | CSS Selector                      |
+| max                                 | Maximum number of clones that is allowed                                                                                                                                   |               |                   | Integer                           |
+| trigger-element                     | Selector of the element that will add the clone when clicked upon.                                                                                                         | .add-clone    |                   | CSS Selector                      |
+| remove-element                      | Selector of the element that will remove the clone when clicked upon.                                                                                                      | .remove-clone |                   | CSS Selector                      |
+| remove-behaviour or remove-behavior | What should happen when the user clicks on the element to remove a clone? Two choices exist currently. Show a confirmation dialog, or simply remove the clone immediately. | "confirm"     | "confirm", "none" | One of the allowed string values. |
+| clone-element                       | Selector of the individual clone element(s).                                                                                                                               | .clone        |                   | CSS Selector                      |
diff --git a/src/pat/clone-code/index.html b/src/pat/clone-code/index.html
new file mode 100644
index 000000000..93ec1fb6a
--- /dev/null
+++ b/src/pat/clone-code/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>pat-clone demo page</title>
+        <meta charset="utf-8">
+        <link rel="stylesheet" href="/style/common.css" />
+        <script>
+          window.__patternslib_disable_modernizr = true;
+        </script>
+        <script src="/bundle.min.js"></script>
+    </head>
+    <body>
+
+        <h1>Example - clone-code</h1>
+
+        <p class="clone-ignore">Demo on how to use pat-clone together with pat-syntax-highlight to show the source of any html snippet</p>
+
+        <div class="pat-clone-code"
+            data-pat-clone-code="source: html">
+          <p>Test paragraph</p>
+        </div>
+
+    </body>
+</html>
diff --git a/src/pat/clone-code/templates/code-wrapper.html b/src/pat/clone-code/templates/code-wrapper.html
new file mode 100644
index 000000000..1578a6133
--- /dev/null
+++ b/src/pat/clone-code/templates/code-wrapper.html
@@ -0,0 +1,5 @@
+<pre class="pat-syntax-highlight">
+  <code class="language-html">
+${this.markup}
+  </code>
+</pre>
diff --git a/src/patterns.js b/src/patterns.js
index 382d91ef6..32261af9a 100644
--- a/src/patterns.js
+++ b/src/patterns.js
@@ -19,6 +19,7 @@ import "./pat/calendar/calendar";
 import "./pat/carousel/carousel";
 import "./pat/checklist/checklist";
 import "./pat/clone/clone";
+import "./pat/clone-code/clone-code";
 import "./pat/collapsible/collapsible";
 import "./pat/colour-picker/colour-picker";
 import "./pat/date-picker/date-picker";

From e1a044d9b9bb4d35346435c498c25d4996367536 Mon Sep 17 00:00:00 2001
From: Johannes Raggam <thetetet@gmail.com>
Date: Thu, 6 Oct 2022 01:50:04 +0200
Subject: [PATCH 22/25] pat-clone-code: Add optional feature to format html
 output with prettier.

---
 package.json                          |  1 +
 src/pat/clone-code/clone-code.js      | 17 ++++++++++++---
 src/pat/clone-code/clone-code.test.js | 31 +++++++++++++++++++++++++++
 3 files changed, 46 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 8f6bc8afe..6dddd5647 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
         "moment-timezone": "^0.5.37",
         "photoswipe": "^4.1.3",
         "pikaday": "^1.8.0",
+        "prettier": "^2.7.1",
         "prismjs": "^1.29.0",
         "promise-polyfill": "^8.2.3",
         "screenfull": "^6.0.2",
diff --git a/src/pat/clone-code/clone-code.js b/src/pat/clone-code/clone-code.js
index 2c39b075d..f760147b9 100644
--- a/src/pat/clone-code/clone-code.js
+++ b/src/pat/clone-code/clone-code.js
@@ -7,23 +7,24 @@ import utils from "../../core/utils";
 
 export const parser = new Parser("clone-code");
 parser.addArgument("source", ":first-child");
+parser.addArgument("features", null, ["format"]);
 
 class Pattern extends BasePattern {
     static name = "clone-code";
     static trigger = ".pat-clone-code";
     parser = parser;
 
-    init() {
+    async init() {
         // Source
         if (this.options.source.lastIndexOf(":", 0) === 0) {
             this.source = this.el.querySelector(this.options.source);
         } else {
             this.source = document.querySelector(this.options.source);
         }
-        this.clone();
+        await this.clone();
     }
 
-    clone() {
+    async clone() {
         // Clone the template.
         let markup =
             this.source.nodeName === "TEMPLATE"
@@ -52,6 +53,16 @@ class Pattern extends BasePattern {
                 ? tmp_wrapper.documentElement.outerHTML
                 : tmp_wrapper.innerHTML;
 
+        if (this.options.features?.includes("format")) {
+            // Format the markup.
+            const prettier = (await import("prettier/standalone")).default;
+            const parser_html = (await import("prettier/parser-html")).default;
+            markup = prettier.format(markup, {
+                parser: "html",
+                plugins: [parser_html],
+            });
+        }
+
         markup = utils.escape_html(markup);
         const pre_code_markup = dom.template(code_wrapper_template, { markup: markup });
 
diff --git a/src/pat/clone-code/clone-code.test.js b/src/pat/clone-code/clone-code.test.js
index 097033a0e..60ce3187a 100644
--- a/src/pat/clone-code/clone-code.test.js
+++ b/src/pat/clone-code/clone-code.test.js
@@ -71,6 +71,37 @@ describe("pat-clone-code", () => {
 <div>1</div>
 
 <div>3</div>
+</div>`);
+    });
+
+    it("pretty prints output", async () => {
+        document.body.innerHTML = `
+<div class="pat-clone-code" data-pat-clone-code="features: format">
+                                        <div>
+        <div>1</div>
+<div
+
+
+>2</div>
+
+<div>3</div>
+ </div>
+</div>
+        `;
+        const el = document.querySelector(".pat-clone-code");
+
+        new Pattern(el);
+        await utils.timeout(1); // wait a tick for async to settle.
+
+        const _el = document.body.querySelector(
+            ".pat-clone-code pre code.language-html"
+        );
+        expect(_el).toBeTruthy();
+        expect(_el.textContent.trim()).toBe(`<div>
+  <div>1</div>
+  <div>2</div>
+
+  <div>3</div>
 </div>`);
     });
 });

From 76a83c53c70643a77be2af045c1060823c0a4701 Mon Sep 17 00:00:00 2001
From: Johannes Raggam <thetetet@gmail.com>
Date: Tue, 4 Oct 2022 17:21:23 +0200
Subject: [PATCH 23/25] fix(core registry): Do not scan TextNode content for
 patterns.

TextNode cannot hold markup, so there is also no needto scan those
elements for patterns.
---
 src/core/registry.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/core/registry.js b/src/core/registry.js
index 1f13c3b29..815294af3 100644
--- a/src/core/registry.js
+++ b/src/core/registry.js
@@ -150,6 +150,9 @@ const registry = {
 
         if (typeof content === "string") {
             content = document.querySelector(content);
+        } else if (content instanceof Text) {
+            // No need to scan a TextNode.
+            return;
         } else if (content.jquery) {
             content = content[0];
         }

From 9f7f5efeedec1cb79d7a1e69a1c01ebd927ce6ef Mon Sep 17 00:00:00 2001
From: Johannes Raggam <thetetet@gmail.com>
Date: Thu, 6 Oct 2022 23:27:32 +0200
Subject: [PATCH 24/25] feat(core registry): Move clone-code Pattern to the
 beginning.

We want clone-code to clone the markup before any other patterns are
modifying it.
---
 src/core/registry.js | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/core/registry.js b/src/core/registry.js
index 815294af3..03fd0430c 100644
--- a/src/core/registry.js
+++ b/src/core/registry.js
@@ -140,6 +140,13 @@ const registry = {
             patterns.splice(patterns.indexOf("validation"), 1);
             patterns.unshift("validation");
         }
+        // Add clone-code to the very beginning - we want to copy the markup
+        // before any other patterns changed the markup.
+        if (patterns.includes("clone-code")) {
+            patterns.splice(patterns.indexOf("clone-code"), 1);
+            patterns.unshift("clone-code");
+        }
+
         return patterns;
     },
 

From 7fcfdc43fbd21ee6fc70d60c2944bbbf3e216afd Mon Sep 17 00:00:00 2001
From: Johannes Raggam <thetetet@gmail.com>
Date: Mon, 3 Oct 2022 16:28:40 +0200
Subject: [PATCH 25/25] yarn install.

---
 yarn.lock | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/yarn.lock b/yarn.lock
index cb70c4f2f..f8bbcc92e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4291,6 +4291,11 @@ domexception@^4.0.0:
   dependencies:
     webidl-conversions "^7.0.0"
 
+dompurify@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-2.4.0.tgz#c9c88390f024c2823332615c9e20a453cf3825dd"
+  integrity sha512-Be9tbQMZds4a3C6xTmz68NlMfeONA//4dOavl/1rNw50E+/QO0KVpbcU0PcaW0nsQxurXls9ZocqFxk8R2mWEA==
+
 dot-prop@^5.1.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-5.3.0.tgz#90ccce708cd9cd82cc4dc8c3ddd9abdd55b20e88"
@@ -5388,6 +5393,11 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
+highlight.js@<11:
+  version "10.7.3"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.7.3.tgz#697272e3991356e40c3cac566a74eef681756531"
+  integrity sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==
+
 hosted-git-info@^2.1.4:
   version "2.8.9"
   resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz#dffc0bf9a21c02209090f2aa69429e1414daf3f9"
@@ -6895,6 +6905,11 @@ markdown-it@^12.3.2:
     mdurl "^1.0.1"
     uc.micro "^1.0.5"
 
+marked@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/marked/-/marked-4.1.0.tgz#3fc6e7485f21c1ca5d6ec4a39de820e146954796"
+  integrity sha512-+Z6KDjSPa6/723PQYyc1axYZpYYpDnECDaU6hkaf5gqBieBkMKYReL5hteF2QizhlMbgbo8umXl/clZ67+GlsA==
+
 masonry-layout@^4.2.2:
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/masonry-layout/-/masonry-layout-4.2.2.tgz#d57b44af13e601bfcdc423f1dd8348b5524de348"
@@ -7731,6 +7746,11 @@ pretty-format@^29.1.0:
     ansi-styles "^5.0.0"
     react-is "^18.0.0"
 
+prismjs@^1.29.0:
+  version "1.29.0"
+  resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.29.0.tgz#f113555a8fa9b57c35e637bba27509dcf802dd12"
+  integrity sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==
+
 process-nextick-args@~2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"