Fix markdown input initial value and crash when alpine is not loaded

This commit is contained in:
Antoine Bartuccio 2024-10-20 18:13:48 +02:00
parent 45441c351d
commit 301fc73687
2 changed files with 22 additions and 10 deletions

View File

@ -13,8 +13,13 @@ 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> => {
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;
@ -22,7 +27,8 @@ const loadEasyMde = (textarea: HTMLTextAreaElement) => {
};
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);
}
}

View File

@ -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>