mirror of
https://github.com/ae-utbm/sith.git
synced 2024-11-15 02:33:22 +00:00
Fix markdown input initial value and crash when alpine is not loaded
This commit is contained in:
parent
45441c351d
commit
301fc73687
@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user