From 517263dd581acf02f81f1ae78ad8d998e139ddc6 Mon Sep 17 00:00:00 2001
From: Sli <antoine@bartuccio.fr>
Date: Sun, 20 Oct 2024 18:29:48 +0200
Subject: [PATCH] Automatically move inner html in created node when inheriting
 from HTMLElement

---
 .../core/components/ajax-select-index.ts      | 20 ++++++++++---------
 .../webpack/core/components/easymde-index.ts  |  4 ----
 core/static/webpack/utils/web-components.ts   |  6 +++++-
 .../core/widgets/markdown_textarea.jinja      |  4 +---
 4 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/core/static/webpack/core/components/ajax-select-index.ts b/core/static/webpack/core/components/ajax-select-index.ts
index 3dedce14..4ba1e091 100644
--- a/core/static/webpack/core/components/ajax-select-index.ts
+++ b/core/static/webpack/core/components/ajax-select-index.ts
@@ -60,12 +60,6 @@ class AutocompleteSelect extends inheritHtmlElement("select") {
 
   connectedCallback() {
     super.connectedCallback();
-    for (const option of Array.from(this.children).filter(
-      (child) => child.tagName.toLowerCase() === "option",
-    )) {
-      this.removeChild(option);
-      this.node.appendChild(option);
-    }
     this.widget = new TomSelect(this.node, this.tomSelectSettings());
     this.attachBehaviors();
   }
@@ -129,6 +123,7 @@ abstract class AjaxSelect extends AutocompleteSelect {
   protected abstract renderItem(item: TomOption, sanitize: typeof escape_html): string;
   protected abstract search(query: string): Promise<TomOption[]>;
 
+  private initialValues: TomOption[] = [];
   public setFilter(filter?: (items: TomOption[]) => TomOption[]) {
     this.filter = filter;
   }
@@ -176,13 +171,20 @@ abstract class AjaxSelect extends AutocompleteSelect {
     };
   }
 
+  connectedCallback() {
+    /* Capture initial values before they get moved to the inner node and overridden by tom-select */
+    this.initialValues = Array.from(this.children)
+      .filter((child) => child.tagName.toLowerCase() === "slot")
+      .map((slot) => JSON.parse(slot.innerHTML));
+
+    super.connectedCallback();
+  }
+
   protected attachBehaviors() {
     super.attachBehaviors();
 
     // Gather selected options, they must be added with slots like `<slot>json</slot>`
-    for (const value of Array.from(this.children)
-      .filter((child) => child.tagName.toLowerCase() === "slot")
-      .map((slot) => JSON.parse(slot.innerHTML))) {
+    for (const value of this.initialValues) {
       this.widget.addOption(value, false);
       this.widget.addItem(value[this.valueField]);
     }
diff --git a/core/static/webpack/core/components/easymde-index.ts b/core/static/webpack/core/components/easymde-index.ts
index eba719d9..d99799a0 100644
--- a/core/static/webpack/core/components/easymde-index.ts
+++ b/core/static/webpack/core/components/easymde-index.ts
@@ -193,10 +193,6 @@ const loadEasyMde = (textarea: HTMLTextAreaElement) => {
 class MarkdownInput extends inheritHtmlElement("textarea") {
   connectedCallback() {
     super.connectedCallback();
-    const initialValue = this.querySelector("slot[name='initial']");
-    if (initialValue as HTMLSlotElement) {
-      this.node.textContent = initialValue.textContent;
-    }
     loadEasyMde(this.node);
   }
 }
diff --git a/core/static/webpack/utils/web-components.ts b/core/static/webpack/utils/web-components.ts
index f6949731..8bec98f9 100644
--- a/core/static/webpack/utils/web-components.ts
+++ b/core/static/webpack/utils/web-components.ts
@@ -43,7 +43,11 @@ export function inheritHtmlElement<K extends keyof HTMLElementTagNameMap>(tagNam
         this.removeAttributeNode(attr);
         this.node.setAttributeNode(attr);
       }
-      // Atuomatically add node to DOM if autoAddNode is true or unspecified
+
+      this.node.innerHTML = this.innerHTML;
+      this.innerHTML = "";
+
+      // Automatically add node to DOM if autoAddNode is true or unspecified
       if (autoAddNode === undefined || autoAddNode) {
         this.appendChild(this.node);
       }
diff --git a/core/templates/core/widgets/markdown_textarea.jinja b/core/templates/core/widgets/markdown_textarea.jinja
index 1531ed3f..1131d5bd 100644
--- a/core/templates/core/widgets/markdown_textarea.jinja
+++ b/core/templates/core/widgets/markdown_textarea.jinja
@@ -2,8 +2,6 @@
   <script-once src="{{ statics.js }}" defer></script-once>
   <link-once rel="stylesheet" type="text/css" href="{{ statics.css }}" defer></link-once>
 
-    <markdown-input name="{{ widget.name }}"{% include "django/forms/widgets/attrs.html" %}>
-      <slot name="initial" style="display: none">{% if widget.value %}{{ widget.value }}{% endif %}</slot>
-    </markdown-input>
+    <markdown-input name="{{ widget.name }}"{% include "django/forms/widgets/attrs.html" %}>{% if widget.value %}{{ widget.value }}{% endif %}</markdown-input>
 
   </div>