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 => { - 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 => { + 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 @@ - {% if widget.value %}{{ widget.value }}{% endif %} + + {% if widget.value %}{{ widget.value }}{% endif %} +