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, element: textarea,
spellChecker: false, spellChecker: false,
autoDownloadFontAwesome: false, autoDownloadFontAwesome: false,
previewRender: Alpine.debounce((plainText: string, preview: MarkdownInput) => { previewRender: (plainText: string, preview: MarkdownInput) => {
const func = async (plainText: string, preview: MarkdownInput): Promise<null> => { /* 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 = ( preview.innerHTML = (
await markdownRenderMarkdown({ body: { text: plainText } }) await markdownRenderMarkdown({ body: { text: plainText } })
).data as string; ).data as string;
@ -22,7 +27,8 @@ const loadEasyMde = (textarea: HTMLTextAreaElement) => {
}; };
func(plainText, preview); func(plainText, preview);
return null; return null;
}, 300), }, 300)(plainText, preview);
},
forceSync: true, // Avoid validation error on generic create view forceSync: true, // Avoid validation error on generic create view
toolbar: [ toolbar: [
{ {
@ -187,6 +193,10 @@ const loadEasyMde = (textarea: HTMLTextAreaElement) => {
class MarkdownInput extends inheritHtmlElement("textarea") { class MarkdownInput extends inheritHtmlElement("textarea") {
connectedCallback() { connectedCallback() {
super.connectedCallback(); super.connectedCallback();
const initialValue = this.querySelector("slot[name='initial']");
if (initialValue as HTMLSlotElement) {
this.node.textContent = initialValue.textContent;
}
loadEasyMde(this.node); loadEasyMde(this.node);
} }
} }

View File

@ -2,6 +2,8 @@
<script-once src="{{ statics.js }}" defer></script-once> <script-once src="{{ statics.js }}" defer></script-once>
<link-once rel="stylesheet" type="text/css" href="{{ statics.css }}" defer></link-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> </div>