From 301fc736879a4af312cd30cc2fab4ab8851a41f8 Mon Sep 17 00:00:00 2001
From: Sli <antoine@bartuccio.fr>
Date: Sun, 20 Oct 2024 18:13:48 +0200
Subject: [PATCH] Fix markdown input initial value and crash when alpine is not
 loaded

---
 .../webpack/core/components/easymde-index.ts  | 28 +++++++++++++------
 .../core/widgets/markdown_textarea.jinja      |  4 ++-
 2 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/core/static/webpack/core/components/easymde-index.ts b/core/static/webpack/core/components/easymde-index.ts
index 734aa9ec..eba719d9 100644
--- a/core/static/webpack/core/components/easymde-index.ts
+++ b/core/static/webpack/core/components/easymde-index.ts
@@ -13,16 +13,22 @@ const loadEasyMde = (textarea: HTMLTextAreaElement) => {
     element: textarea,
     spellChecker: false,
     autoDownloadFontAwesome: false,
-    previewRender: Alpine.debounce((plainText: string, preview: MarkdownInput) => {
-      const func = async (plainText: string, preview: MarkdownInput): Promise<null> => {
-        preview.innerHTML = (
-          await markdownRenderMarkdown({ body: { text: plainText } })
-        ).data as string;
+    previewRender: (plainText: string, preview: MarkdownInput) => {
+      /* This is wrapped this way to allow time for Alpine to be loaded on the page */
+      return Alpine.debounce((plainText: string, preview: MarkdownInput) => {
+        const func = async (
+          plainText: string,
+          preview: MarkdownInput,
+        ): Promise<null> => {
+          preview.innerHTML = (
+            await markdownRenderMarkdown({ body: { text: plainText } })
+          ).data as string;
+          return null;
+        };
+        func(plainText, preview);
         return null;
-      };
-      func(plainText, preview);
-      return null;
-    }, 300),
+      }, 300)(plainText, preview);
+    },
     forceSync: true, // Avoid validation error on generic create view
     toolbar: [
       {
@@ -187,6 +193,10 @@ 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/templates/core/widgets/markdown_textarea.jinja b/core/templates/core/widgets/markdown_textarea.jinja
index 1131d5bd..1531ed3f 100644
--- a/core/templates/core/widgets/markdown_textarea.jinja
+++ b/core/templates/core/widgets/markdown_textarea.jinja
@@ -2,6 +2,8 @@
   <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" %}>{% if widget.value %}{{ widget.value }}{% endif %}</markdown-input>
+    <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>
 
   </div>