From 572ccff33bdd2a9e86fd4b4f477fefb506598b5e Mon Sep 17 00:00:00 2001
From: Peter Mathis <peter.mathis@kombinat.at>
Date: Fri, 27 Sep 2024 09:00:37 +0200
Subject: [PATCH 1/7] feat(pat contentbrowser): Register components with
 "@plone/registry"

---
 src/pat/contentbrowser/contentbrowser.js      | 23 +++++++
 .../contentbrowser/src/SelectedItem.svelte    | 59 +++++++++++++++++
 .../contentbrowser/src/SelectedItems.svelte   | 63 ++++---------------
 3 files changed, 93 insertions(+), 52 deletions(-)
 create mode 100644 src/pat/contentbrowser/src/SelectedItem.svelte

diff --git a/src/pat/contentbrowser/contentbrowser.js b/src/pat/contentbrowser/contentbrowser.js
index 71cdad1c4..8f8f6e756 100644
--- a/src/pat/contentbrowser/contentbrowser.js
+++ b/src/pat/contentbrowser/contentbrowser.js
@@ -2,6 +2,29 @@ import { BasePattern } from "@patternslib/patternslib/src/core/basepattern";
 import Parser from "@patternslib/patternslib/src/core/parser";
 import registry from "@patternslib/patternslib/src/core/registry";
 import utils from "../../core/utils";
+import plone_registry from "@plone/registry";
+
+async function init_component_registry() {
+    // bug? set the component registry as empty dict the first time
+    // otherwise you get the error: "this._data.components is undefined"
+    if (plone_registry["components"] === undefined) {
+        // see @plone/registry
+        plone_registry["components"] = {};
+    }
+
+    if (plone_registry.getComponent("SelectedItem").component === undefined) {
+        const SelectedItem = (await import("./src/SelectedItem.svelte")).default;
+        plone_registry.registerComponent({
+            name: "SelectedItem",
+            component: SelectedItem,
+        });
+    }
+}
+
+// register default components in @plone/registry
+// here outside the pattern init() so that addons can override this
+// when their bundle depends on the "plone" bundle
+init_component_registry()
 
 // Contentbrowser pattern
 
diff --git a/src/pat/contentbrowser/src/SelectedItem.svelte b/src/pat/contentbrowser/src/SelectedItem.svelte
new file mode 100644
index 000000000..1018db267
--- /dev/null
+++ b/src/pat/contentbrowser/src/SelectedItem.svelte
@@ -0,0 +1,59 @@
+<script>
+    import { getContext } from "svelte";
+    import { resolveIcon } from "./utils";
+
+    // current item index of parent iteration
+    export let idx;
+    // item data
+    export let item;
+
+    // parent method to remove selected item from list
+    const unselectItem = getContext("unselectItem");
+
+</script>
+
+<div class="selected-item border border-secondary-subtle rounded p-2 mb-1 bg-body-tertiary" data-uuid={item.UID}>
+    <div class="item-info">
+        <!-- svelte-ignore a11y-missing-attribute -->
+        <button
+            class="btn btn-link btn-sm link-secondary"
+            on:click={() => unselectItem(idx)}
+            ><svg use:resolveIcon={{ iconName: "x-circle" }} /></button
+        >
+        <div>
+            <span class="item-title">{item.Title}</span><br />
+            <span class="small">{item.path}</span>
+        </div>
+    </div>
+    {#if item.getURL && (item.getIcon || item.portal_type === "Image")}<img
+            src="{item.getURL}/@@images/image/mini"
+            alt={item.Title}
+        />{/if}
+</div>
+
+<style>
+    .selected-item {
+        display: flex;
+        flex-wrap: nowrap;
+        align-items: start;
+        justify-content: space-between;
+        cursor: move;
+    }
+    .selected-item > * {
+        margin-right: 0.5rem;
+        display: block;
+    }
+    .selected-item button {
+        cursor: pointer;
+        padding: 0 0.375rem 0.374rem 0;
+    }
+    .selected-item .item-info {
+        display: flex;
+        align-items: start;
+    }
+    .selected-item > img {
+        object-fit: cover;
+        width: 95px;
+        height: 95px;
+    }
+</style>
diff --git a/src/pat/contentbrowser/src/SelectedItems.svelte b/src/pat/contentbrowser/src/SelectedItems.svelte
index f5a1fb4a4..84c8546a1 100644
--- a/src/pat/contentbrowser/src/SelectedItems.svelte
+++ b/src/pat/contentbrowser/src/SelectedItems.svelte
@@ -1,14 +1,18 @@
 <script>
-    import { getContext, onMount } from "svelte";
-    import { flip } from "svelte/animate";
+    import { getContext, onMount, setContext } from "svelte";
     import { get_items_from_uids, resolveIcon } from "./utils.js";
     import Sortable from "sortablejs";
     import _t from "../../../core/i18n-wrapper";
     import events from "@patternslib/patternslib/src/core/events";
+    import plone_registry from "@plone/registry";
 
     let ref;
     let initializing = true;
 
+    // get registered SelectedItem component
+    const SelectedItemComponent = plone_registry.getComponent("SelectedItem");
+    console.log(SelectedItemComponent);
+
     // get reactive context config
     const config = getContext("config");
     const fieldId = $config.fieldId;
@@ -35,6 +39,10 @@
         selectedUids.update(() => $selectedItems.map((x) => x.UID));
     }
 
+    // use this function in "SelectedItem" component with
+    // const unselectItem = getContext("unselectItem")
+    setContext("unselectItem", unselectItem);
+
     async function initializeSelectedItemsStore() {
         const initialValue = $config.selection.length
             ? $config.selection
@@ -105,27 +113,7 @@
          on:click={() => $showContentBrowser = $selectedItems.length ? false : true }>
         {#if $selectedItems}
             {#each $selectedItems as selItem, i (selItem.UID)}
-                <div
-                    class="selected-item"
-                    animate:flip={{ duration: 500 }}
-                    data-uuid={selItem.UID}
-                >
-                    <div class="item-info">
-                        <button
-                            class="btn btn-link btn-sm link-secondary"
-                            on:click|stopPropagation={() => unselectItem(i)}
-                            ><svg use:resolveIcon={{ iconName: "x-circle" }} /></button
-                        >
-                        <div>
-                            <span class="item-title">{selItem.Title}</span><br />
-                            <span class="small">{selItem.path}</span>
-                        </div>
-                    </div>
-                    {#if selItem.getURL && (selItem.getIcon || selItem.portal_type === "Image")}<img
-                            src="{selItem.getURL}/@@images/image/mini"
-                            alt={selItem.Title}
-                        />{/if}
-                </div>
+                <svelte:component this={SelectedItemComponent.component} idx={i} item={selItem} />
             {/each}
         {/if}
         {#if !$selectedItems}
@@ -155,33 +143,4 @@
         padding: 0.5rem 0.5rem 0 0.5rem;
         flex: 1 1 auto;
     }
-    .content-browser-selected-items .selected-item {
-        border-radius: var(--bs-border-radius);
-        background-color: var(--bs-tertiary-bg);
-        border: var(--bs-border-style) var(--bs-border-color) var(--bs-border-width);
-        padding: 0.5rem;
-        margin-bottom: 0.5rem;
-        display: flex;
-        flex-wrap: nowrap;
-        align-items: start;
-        justify-content: space-between;
-        cursor: move;
-    }
-    .content-browser-selected-items .selected-item > * {
-        margin-right: 0.5rem;
-        display: block;
-    }
-    .content-browser-selected-items .selected-item button {
-        cursor: pointer;
-        padding: 0 0.375rem 0.374rem 0;
-    }
-    .content-browser-selected-items .selected-item .item-info {
-        display: flex;
-        align-items: start;
-    }
-    .content-browser-selected-items .selected-item > img {
-        object-fit: cover;
-        width: 95px;
-        height: 95px;
-    }
 </style>

From 821402366e353a6299a9919b7ed03f5510187923 Mon Sep 17 00:00:00 2001
From: Peter Mathis <peter.mathis@kombinat.at>
Date: Fri, 27 Sep 2024 09:00:54 +0200
Subject: [PATCH 2/7] fix empty href

---
 src/pat/contentbrowser/src/RecentlyUsed.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pat/contentbrowser/src/RecentlyUsed.svelte b/src/pat/contentbrowser/src/RecentlyUsed.svelte
index 1663d69ad..38de37c24 100644
--- a/src/pat/contentbrowser/src/RecentlyUsed.svelte
+++ b/src/pat/contentbrowser/src/RecentlyUsed.svelte
@@ -30,7 +30,7 @@
             {#each items.reverse() as recentlyUsed}
                 <li>
                     <a
-                        href={recentlyUsed.getURL}
+                        href={recentlyUsed.getURL || "#"}
                         on:click|preventDefault={() => select(recentlyUsed)}
                         class="dropdown-item"
                     >

From b4ebd4c9d95af4c9617050b2fd8d80394f14aeb5 Mon Sep 17 00:00:00 2001
From: Peter Mathis <peter.mathis@kombinat.at>
Date: Sat, 30 Nov 2024 13:32:54 -0300
Subject: [PATCH 3/7] some updates to registered component

---
 package.json                                  |  5 +-
 src/pat/contentbrowser/contentbrowser.js      | 16 +--
 .../contentbrowser/src/SelectedItems.svelte   | 12 +--
 yarn.lock                                     | 97 ++++++++++++++-----
 4 files changed, 88 insertions(+), 42 deletions(-)

diff --git a/package.json b/package.json
index 05b67c96f..9cde9fea2 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
         "@11ty/eleventy-upgrade-help": "2",
         "@patternslib/pat-code-editor": "4.0.1",
         "@patternslib/patternslib": "9.9.16",
-        "@plone/registry": "^1.7.0",
+        "@plone/registry": "^2.1.0",
         "backbone": "1.4.1",
         "backbone.paginator": "2.0.8",
         "bootstrap": "5.3.3",
@@ -134,5 +134,6 @@
     ],
     "publishConfig": {
         "access": "public"
-    }
+    },
+    "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }
diff --git a/src/pat/contentbrowser/contentbrowser.js b/src/pat/contentbrowser/contentbrowser.js
index 8f8f6e756..8710989a3 100644
--- a/src/pat/contentbrowser/contentbrowser.js
+++ b/src/pat/contentbrowser/contentbrowser.js
@@ -4,27 +4,21 @@ import registry from "@patternslib/patternslib/src/core/registry";
 import utils from "../../core/utils";
 import plone_registry from "@plone/registry";
 
-async function init_component_registry() {
-    // bug? set the component registry as empty dict the first time
-    // otherwise you get the error: "this._data.components is undefined"
-    if (plone_registry["components"] === undefined) {
-        // see @plone/registry
-        plone_registry["components"] = {};
-    }
-
-    if (plone_registry.getComponent("SelectedItem").component === undefined) {
+async function setup_default_component_registry() {
+    if (plone_registry.getComponent("pat-contentbrowser.SelectedItem").component === undefined) {
         const SelectedItem = (await import("./src/SelectedItem.svelte")).default;
         plone_registry.registerComponent({
-            name: "SelectedItem",
+            name: "pat-contentbrowser.SelectedItem",
             component: SelectedItem,
         });
+        console.log("Loaded default 'SelectedItem' Component");
     }
 }
 
 // register default components in @plone/registry
 // here outside the pattern init() so that addons can override this
 // when their bundle depends on the "plone" bundle
-init_component_registry()
+setup_default_component_registry()
 
 // Contentbrowser pattern
 
diff --git a/src/pat/contentbrowser/src/SelectedItems.svelte b/src/pat/contentbrowser/src/SelectedItems.svelte
index 84c8546a1..d7071f564 100644
--- a/src/pat/contentbrowser/src/SelectedItems.svelte
+++ b/src/pat/contentbrowser/src/SelectedItems.svelte
@@ -1,6 +1,6 @@
 <script>
     import { getContext, onMount, setContext } from "svelte";
-    import { get_items_from_uids, resolveIcon } from "./utils.js";
+    import { get_items_from_uids } from "./utils.js";
     import Sortable from "sortablejs";
     import _t from "../../../core/i18n-wrapper";
     import events from "@patternslib/patternslib/src/core/events";
@@ -9,10 +9,6 @@
     let ref;
     let initializing = true;
 
-    // get registered SelectedItem component
-    const SelectedItemComponent = plone_registry.getComponent("SelectedItem");
-    console.log(SelectedItemComponent);
-
     // get reactive context config
     const config = getContext("config");
     const fieldId = $config.fieldId;
@@ -25,6 +21,10 @@
     // showContentBrowser reactive state
     const showContentBrowser = getContext("showContentBrowser");
 
+    // get selectedItem component from registry
+    const RegisteredSelectedItem = plone_registry.getComponent("pat-contentbrowser.SelectedItem");
+    console.log(RegisteredSelectedItem);
+
     onMount(async () => {
         await initializeSelectedItemsStore();
         initializeSorting();
@@ -113,7 +113,7 @@
          on:click={() => $showContentBrowser = $selectedItems.length ? false : true }>
         {#if $selectedItems}
             {#each $selectedItems as selItem, i (selItem.UID)}
-                <svelte:component this={SelectedItemComponent.component} idx={i} item={selItem} />
+                <svelte:component this={RegisteredSelectedItem.component} idx={i} item={selItem}  />
             {/each}
         {/if}
         {#if !$selectedItems}
diff --git a/yarn.lock b/yarn.lock
index cfdcfd13b..d8afd0c6a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1877,15 +1877,17 @@
   resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33"
   integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==
 
-"@plone/registry@^1.7.0":
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/@plone/registry/-/registry-1.8.0.tgz#076770a4af69503fd260f21c6e063f0f4ff939f9"
-  integrity sha512-xQH7vhnzQpxPxZLZtObpN/jv4JOIBhYEKsdWUCYmL1e8wlbxb+Xk2C6qNK9+i+kyjmLdAUzDH0v5Xl9Y7igxKw==
+"@plone/registry@^2.1.0":
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/@plone/registry/-/registry-2.1.2.tgz#b00821676c05279fdc54d90c01163eebe4ea6b17"
+  integrity sha512-axmsDNF+p5q2P/9j3v0is1P967MTSkAF2yl2gaYWbwnpPB8rfNVnTzw3HQa6o09qyt20wR8b4aUVlvlWXpi2Zw==
   dependencies:
+    auto-config-loader "^1.7.7"
     crypto-random-string "3.2.0"
     debug "4.3.2"
     dependency-graph "0.10.0"
-    glob "7.1.6"
+    glob "^10.4.5"
+    tmp "0.2.1"
 
 "@pnpm/config.env-replace@^1.1.0":
   version "1.1.0"
@@ -2606,6 +2608,11 @@ acorn@^8.0.4, acorn@^8.1.0, acorn@^8.10.0, acorn@^8.11.0, acorn@^8.7.1, acorn@^8
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.13.0.tgz#2a30d670818ad16ddd6a35d3842dacec9e5d7ca3"
   integrity sha512-8zSiw54Oxrdym50NlZ9sUusyO1Z1ZchgRLWRaK6c86XJFClyCgFKetdowBg5bKxyp/u+CDBJG4Mpp0m3HLZl9w==
 
+acorn@^8.5.0:
+  version "8.14.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.14.0.tgz#063e2c70cac5fb4f6467f0b11152e04c682795b0"
+  integrity sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==
+
 add-stream@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/add-stream/-/add-stream-1.0.0.tgz#6a7990437ca736d5e1288db92bd3266d5f5cb2aa"
@@ -2856,6 +2863,19 @@ atomically@^2.0.3:
     stubborn-fs "^1.2.5"
     when-exit "^2.1.1"
 
+auto-config-loader@^1.7.7:
+  version "1.7.8"
+  resolved "https://registry.yarnpkg.com/auto-config-loader/-/auto-config-loader-1.7.8.tgz#03607f41eb8a4731693289ebb7a3f245ea16557e"
+  integrity sha512-mK8yQmJJy369cz0x2LJwhKD72tkTObBwhgR+3U8Ts8+wCSspED3ydXlWpsv1ZQ9g2iq4b+7EWli+ap2nTeUQog==
+  dependencies:
+    ini "^5.0.0"
+    jiti "^1.18.2"
+    jsonc-eslint-parser "^2.3.0"
+    lodash.merge "^4.6.2"
+    sucrase "^3.32.0"
+    toml-eslint-parser "^0.10.0"
+    yaml-eslint-parser "^1.2.2"
+
 axobject-query@^4.0.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-4.1.0.tgz#28768c76d0e3cff21bc62a9e2d0b6ac30042a1ee"
@@ -4441,7 +4461,7 @@ eslint-visitor-keys@^2.1.0:
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz#f65328259305927392c938ed44eb0a5c9b2bd303"
   integrity sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==
 
-eslint-visitor-keys@^3.3.0, eslint-visitor-keys@^3.4.1, eslint-visitor-keys@^3.4.3:
+eslint-visitor-keys@^3.0.0, eslint-visitor-keys@^3.3.0, eslint-visitor-keys@^3.4.1, eslint-visitor-keys@^3.4.3:
   version "3.4.3"
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz#0cd72fe8550e3c2eae156a96a4dddcd1c8ac5800"
   integrity sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==
@@ -4490,7 +4510,7 @@ eslint@^8.57.0:
     strip-ansi "^6.0.1"
     text-table "^0.2.0"
 
-espree@^9.6.0, espree@^9.6.1:
+espree@^9.0.0, espree@^9.6.0, espree@^9.6.1:
   version "9.6.1"
   resolved "https://registry.yarnpkg.com/espree/-/espree-9.6.1.tgz#a2a17b8e434690a5432f2f8018ce71d331a48c6f"
   integrity sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==
@@ -5005,19 +5025,7 @@ glob-to-regexp@^0.4.1:
   resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz#c75297087c851b9a578bd217dd59a92f59fe546e"
   integrity sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==
 
-glob@7.1.6:
-  version "7.1.6"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
-  integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
-  dependencies:
-    fs.realpath "^1.0.0"
-    inflight "^1.0.4"
-    inherits "2"
-    minimatch "^3.0.4"
-    once "^1.3.0"
-    path-is-absolute "^1.0.0"
-
-glob@^10.3.10:
+glob@^10.3.10, glob@^10.4.5:
   version "10.4.5"
   resolved "https://registry.yarnpkg.com/glob/-/glob-10.4.5.tgz#f4d9f0b90ffdbab09c9d77f5f29b4262517b0956"
   integrity sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==
@@ -5474,6 +5482,11 @@ ini@^1.3.4, ini@~1.3.0:
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.8.tgz#a29da425b48806f34767a4efce397269af28432c"
   integrity sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==
 
+ini@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-5.0.0.tgz#a7a4615339843d9a8ccc2d85c9d81cf93ffbc638"
+  integrity sha512-+N0ngpO3e7cRUWOJAS7qw0IZIVc6XPrW4MlFBdD066F2L4k1L6ker3hLqSq7iXxU5tgS4WGkIUElWn5vogAEnw==
+
 inquirer@9.3.2:
   version "9.3.2"
   resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-9.3.2.tgz#9bc5ced19f572e848044baa05094a498f1e448c6"
@@ -6269,7 +6282,7 @@ jest@^29.7.0:
     import-local "^3.0.2"
     jest-cli "^29.7.0"
 
-jiti@^1.21.6:
+jiti@^1.18.2, jiti@^1.21.6:
   version "1.21.6"
   resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.21.6.tgz#6c7f7398dd4b3142767f9a168af2f317a428d268"
   integrity sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==
@@ -6430,6 +6443,16 @@ json5@^2.1.2, json5@^2.2.3:
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
   integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
 
+jsonc-eslint-parser@^2.3.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/jsonc-eslint-parser/-/jsonc-eslint-parser-2.4.0.tgz#74ded53f9d716e8d0671bd167bf5391f452d5461"
+  integrity sha512-WYDyuc/uFcGp6YtM2H0uKmUwieOuzeE/5YocFJLnLfclZ4inf3mRn8ZVy1s7Hxji7Jxm6Ss8gqpexD/GlKoGgg==
+  dependencies:
+    acorn "^8.5.0"
+    eslint-visitor-keys "^3.0.0"
+    espree "^9.0.0"
+    semver "^7.3.5"
+
 jsonfile@^6.0.1:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-6.1.0.tgz#bc55b2634793c679ec6403094eb13698a6ec0aae"
@@ -8272,7 +8295,7 @@ rimraf@^2.7.1:
   dependencies:
     glob "^7.1.3"
 
-rimraf@^3.0.2:
+rimraf@^3.0.0, rimraf@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
   integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
@@ -8948,7 +8971,7 @@ style-loader@^4.0.0:
   resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-4.0.0.tgz#0ea96e468f43c69600011e0589cb05c44f3b17a5"
   integrity sha512-1V4WqhhZZgjVAVJyt7TdDPZoPBPNHbekX4fWnCJL1yQukhCeZhJySUL+gL9y6sNdN95uEOS83Y55SqHcP7MzLA==
 
-sucrase@^3.20.0:
+sucrase@^3.20.0, sucrase@^3.32.0:
   version "3.35.0"
   resolved "https://registry.yarnpkg.com/sucrase/-/sucrase-3.35.0.tgz#57f17a3d7e19b36d8995f06679d121be914ae263"
   integrity sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==
@@ -9158,6 +9181,13 @@ tippy.js@^6.3.7:
   dependencies:
     "@popperjs/core" "^2.9.0"
 
+tmp@0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.2.1.tgz#8457fc3037dcf4719c251367a1af6500ee1ccf14"
+  integrity sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==
+  dependencies:
+    rimraf "^3.0.0"
+
 tmp@^0.0.33:
   version "0.0.33"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
@@ -9187,6 +9217,13 @@ token-stream@1.0.0:
   resolved "https://registry.yarnpkg.com/token-stream/-/token-stream-1.0.0.tgz#cc200eab2613f4166d27ff9afc7ca56d49df6eb4"
   integrity sha512-VSsyNPPW74RpHwR8Fc21uubwHY7wMDeJLys2IX5zJNih+OnAnaifKHo+1LHT7DAdloQ7apeaaWg8l7qnf/TnEg==
 
+toml-eslint-parser@^0.10.0:
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/toml-eslint-parser/-/toml-eslint-parser-0.10.0.tgz#52000b150a8b298feefeea701c29cca8b4730a38"
+  integrity sha512-khrZo4buq4qVmsGzS5yQjKe/WsFvV8fGfOjDQN0q4iy9FjRfPWRgTFrU8u1R2iu/SfWLhY9WnCi4Jhdrcbtg+g==
+  dependencies:
+    eslint-visitor-keys "^3.0.0"
+
 totalist@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/totalist/-/totalist-3.0.1.tgz#ba3a3d600c915b1a97872348f79c127475f6acf8"
@@ -9847,6 +9884,20 @@ yallist@^4.0.0:
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
   integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
 
+yaml-eslint-parser@^1.2.2:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/yaml-eslint-parser/-/yaml-eslint-parser-1.2.3.tgz#3a8ae839fc8df376ef8497add7f40942b493389c"
+  integrity sha512-4wZWvE398hCP7O8n3nXKu/vdq1HcH01ixYlCREaJL5NUMwQ0g3MaGFUBNSlmBtKmhbtVG/Cm6lyYmSVTEVil8A==
+  dependencies:
+    eslint-visitor-keys "^3.0.0"
+    lodash "^4.17.21"
+    yaml "^2.0.0"
+
+yaml@^2.0.0:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.6.1.tgz#42f2b1ba89203f374609572d5349fb8686500773"
+  integrity sha512-7r0XPzioN/Q9kXBro/XPnA6kznR73DHq+GXh5ON7ZozRO6aMjbmiBuKste2wslTFkC5d1dw0GooOCepZXJ2SAg==
+
 yargs-parser@21.1.1, yargs-parser@^21.1.1:
   version "21.1.1"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-21.1.1.tgz#9096bceebf990d21bb31fa9516e0ede294a77d35"

From 2b2945df65aae578430452b28dc7ead9aa42541a Mon Sep 17 00:00:00 2001
From: Peter Mathis <peter.mathis@kombinat.at>
Date: Sat, 30 Nov 2024 16:16:16 -0300
Subject: [PATCH 4/7] Fix loading external registered components using a
 wrapper function

---
 src/pat/contentbrowser/src/SelectedItems.svelte | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/pat/contentbrowser/src/SelectedItems.svelte b/src/pat/contentbrowser/src/SelectedItems.svelte
index d7071f564..ab2cdc1aa 100644
--- a/src/pat/contentbrowser/src/SelectedItems.svelte
+++ b/src/pat/contentbrowser/src/SelectedItems.svelte
@@ -23,7 +23,6 @@
 
     // get selectedItem component from registry
     const RegisteredSelectedItem = plone_registry.getComponent("pat-contentbrowser.SelectedItem");
-    console.log(RegisteredSelectedItem);
 
     onMount(async () => {
         await initializeSelectedItemsStore();
@@ -93,6 +92,10 @@
         selectedItemsNode.dispatchEvent(events.change_event());
     }
 
+    function LoadSelectedItemComponent(node, props) {
+        const component = new RegisteredSelectedItem.component({target: node, props: props});
+    }
+
     $: {
         $selectedItems;
         if ($selectedItems.length || !initializing) {
@@ -113,7 +116,7 @@
          on:click={() => $showContentBrowser = $selectedItems.length ? false : true }>
         {#if $selectedItems}
             {#each $selectedItems as selItem, i (selItem.UID)}
-                <svelte:component this={RegisteredSelectedItem.component} idx={i} item={selItem}  />
+                <div use:LoadSelectedItemComponent={{idx:i, item:selItem}} />
             {/each}
         {/if}
         {#if !$selectedItems}

From 6cf87d38807e26f96d39d5a29591a155eb62b26a Mon Sep 17 00:00:00 2001
From: Peter Mathis <peter.mathis@kombinat.at>
Date: Wed, 4 Dec 2024 12:09:35 +0100
Subject: [PATCH 5/7] implement  option to make components overridable with
 pattern_options

---
 src/pat/contentbrowser/src/App.svelte           | 2 ++
 src/pat/contentbrowser/src/SelectedItems.svelte | 8 ++++++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/pat/contentbrowser/src/App.svelte b/src/pat/contentbrowser/src/App.svelte
index c07492bc3..36d608240 100644
--- a/src/pat/contentbrowser/src/App.svelte
+++ b/src/pat/contentbrowser/src/App.svelte
@@ -34,6 +34,7 @@
     export let recentlyUsedKey;
     export let recentlyUsedMaxItems;
     export let bSize = 20;
+    export let componentRegistryKeys = {};
 
     const log = logger.getLogger("pat-contentbrowser");
 
@@ -83,6 +84,7 @@
         recentlyUsedKey: recentlyUsedKey,
         recentlyUsedMaxItems: recentlyUsedMaxItems,
         pageSize: bSize,
+        componentRegistryKeys: componentRegistryKeys,
     };
 
     log.debug(`Initialized App<${fieldId}> with config ${JSON.stringify($config)}`);
diff --git a/src/pat/contentbrowser/src/SelectedItems.svelte b/src/pat/contentbrowser/src/SelectedItems.svelte
index ab2cdc1aa..4b791deb0 100644
--- a/src/pat/contentbrowser/src/SelectedItems.svelte
+++ b/src/pat/contentbrowser/src/SelectedItems.svelte
@@ -21,8 +21,12 @@
     // showContentBrowser reactive state
     const showContentBrowser = getContext("showContentBrowser");
 
-    // get selectedItem component from registry
-    const RegisteredSelectedItem = plone_registry.getComponent("pat-contentbrowser.SelectedItem");
+    // get selectedItem component from registry.
+    // the registry key can be customized with pattern_options
+    // if an addon registers a custom component to a custom key
+    const RegisteredSelectedItem = plone_registry.getComponent(
+        $config.componentRegistryKeys?.selectedItem || "pat-contentbrowser.SelectedItem"
+    );
 
     onMount(async () => {
         await initializeSelectedItemsStore();

From 2a59d3b570b2d9620a52ce91a5dd9b2736e478a5 Mon Sep 17 00:00:00 2001
From: Peter Mathis <peter.mathis@kombinat.at>
Date: Wed, 4 Dec 2024 12:44:08 +0100
Subject: [PATCH 6/7] update README

---
 src/pat/contentbrowser/README.md | 42 ++++++++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)

diff --git a/src/pat/contentbrowser/README.md b/src/pat/contentbrowser/README.md
index 1aff8656e..727b27781 100644
--- a/src/pat/contentbrowser/README.md
+++ b/src/pat/contentbrowser/README.md
@@ -29,6 +29,7 @@ Show a widget to select items in an offcanvas miller-column browser.
 |       recentlyUsed         | boolean |                  false                  |                                                           Show the recently used items dropdown.                                                          |
 |      recentlyUsedKey       | integer |                                         |                     Storage key for saving the recently used items. This is generated with fieldname and username in the patternoptions.                  |
 |    recentlyUsedMaxItems    | integer |                    20                   |                                              Maximum items to keep in recently used list. 0: no restriction.                                              |
+|     customComponentKeys    |  dict   |                    {}                   |                                           Register custom components. Currently only "SelectedItem" implemented                                           |
 
 
 ## Default
@@ -81,3 +82,44 @@ Show a widget to select items in an offcanvas miller-column browser.
     data-pat-contentbrowser='{"selectableTypes": ["Image", "File"], "vocabularyUrl": "contentbrowser-test.json", "upload": true}'
 />
 ```
+
+## Register custom component
+
+Currently only for `SelectedItem` component available.
+
+```html
+<input
+    type="text"
+    class="pat-contentbrowser"
+    data-pat-contentbrowser='{
+        "customComponentKeys": {
+            "SelectedItem": "pat-contentbrowser.myfield.MySelectedItemComponent",
+        },
+    }'
+/>
+```
+
+Copy the existing component `src/SelectedItem.svelte` to your addon, customize it and register it in your JS bundle as follows:
+
+```javascript
+...
+import plone_registry from "@plone/registry";
+...
+
+async function register_selecteditem_component() {
+    // we register our component to a custom keyname,
+    // which later can be used for pattern_options
+    const SelectedImages = (await import("./MySelectedItemComponent.svelte")).default;
+    plone_registry.registerComponent({
+        name: "pat-contentbrowser.myfield.MySelectedItemComponent",
+        component: SelectedImages,
+    });
+}
+register_selecteditem_component();
+
+...
+
+```
+
+Note: this needs the `svelte-loader` plugin in your webpack.config.js ... see mockups webpack config for info.
+

From 7c6eca4370b46ff90385f31f76e4c5ed802d425d Mon Sep 17 00:00:00 2001
From: Peter Mathis <peter.mathis@kombinat.at>
Date: Tue, 17 Dec 2024 14:43:43 +0100
Subject: [PATCH 7/7] refactor registering default components

---
 src/pat/contentbrowser/contentbrowser.js | 24 ++++++++----------------
 1 file changed, 8 insertions(+), 16 deletions(-)

diff --git a/src/pat/contentbrowser/contentbrowser.js b/src/pat/contentbrowser/contentbrowser.js
index 8710989a3..db7ecf35f 100644
--- a/src/pat/contentbrowser/contentbrowser.js
+++ b/src/pat/contentbrowser/contentbrowser.js
@@ -4,22 +4,6 @@ import registry from "@patternslib/patternslib/src/core/registry";
 import utils from "../../core/utils";
 import plone_registry from "@plone/registry";
 
-async function setup_default_component_registry() {
-    if (plone_registry.getComponent("pat-contentbrowser.SelectedItem").component === undefined) {
-        const SelectedItem = (await import("./src/SelectedItem.svelte")).default;
-        plone_registry.registerComponent({
-            name: "pat-contentbrowser.SelectedItem",
-            component: SelectedItem,
-        });
-        console.log("Loaded default 'SelectedItem' Component");
-    }
-}
-
-// register default components in @plone/registry
-// here outside the pattern init() so that addons can override this
-// when their bundle depends on the "plone" bundle
-setup_default_component_registry()
-
 // Contentbrowser pattern
 
 export const parser = new Parser("contentbrowser");
@@ -65,6 +49,14 @@ class Pattern extends BasePattern {
     async init() {
         this.el.style.display = "none";
 
+        // register default components in @plone/registry
+        const SelectedItem = (await import("./src/SelectedItem.svelte")).default;
+
+        plone_registry.registerComponent({
+            name: "pat-contentbrowser.SelectedItem",
+            component: SelectedItem,
+        });
+
         // ensure an id on our element (TinyMCE doesn't have one)
         let nodeId = this.el.getAttribute("id");
         if (!nodeId) {