Make sure Alpine is always loaded when using markdown-input component

This commit is contained in:
Antoine Bartuccio 2024-10-14 19:24:13 +02:00 committed by Bartuccio Antoine
parent dee54c3b41
commit d114b01bcc

View File

@ -7,18 +7,13 @@ import type CodeMirror from "codemirror";
import EasyMDE from "easymde"; import EasyMDE from "easymde";
import { markdownRenderMarkdown } from "#openapi"; import { markdownRenderMarkdown } from "#openapi";
class MarkdownInput extends HTMLTextAreaElement { const loadEasyMde = (textarea: HTMLTextAreaElement) => {
constructor() {
super();
new EasyMDE({ new EasyMDE({
element: this, element: textarea,
spellChecker: false, spellChecker: false,
autoDownloadFontAwesome: false, autoDownloadFontAwesome: false,
previewRender: Alpine.debounce((plainText: string, preview: MarkdownInput) => { previewRender: Alpine.debounce((plainText: string, preview: MarkdownInput) => {
const func = async ( const func = async (plainText: string, preview: MarkdownInput): Promise<null> => {
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;
@ -161,9 +156,9 @@ class MarkdownInput extends HTMLTextAreaElement {
}); });
const submits: HTMLInputElement[] = Array.from( const submits: HTMLInputElement[] = Array.from(
this.closest("form").querySelectorAll('input[type="submit"]'), textarea.closest("form").querySelectorAll('input[type="submit"]'),
); );
const parentDiv = this.parentElement; const parentDiv = textarea.parentElement;
let submitPressed = false; let submitPressed = false;
function checkMarkdownInput(_event: Event) { function checkMarkdownInput(_event: Event) {
@ -189,6 +184,12 @@ class MarkdownInput extends HTMLTextAreaElement {
for (const submit of submits) { for (const submit of submits) {
submit.addEventListener("click", onSubmitClick); submit.addEventListener("click", onSubmitClick);
} }
};
class MarkdownInput extends HTMLTextAreaElement {
constructor() {
super();
window.addEventListener("DOMContentLoaded", () => loadEasyMde(this));
} }
} }