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 { markdownRenderMarkdown } from "#openapi";
class MarkdownInput extends HTMLTextAreaElement {
constructor() {
super();
const loadEasyMde = (textarea: HTMLTextAreaElement) => {
new EasyMDE({
element: this,
element: textarea,
spellChecker: false,
autoDownloadFontAwesome: false,
previewRender: Alpine.debounce((plainText: string, preview: MarkdownInput) => {
const func = async (
plainText: string,
preview: MarkdownInput,
): Promise<null> => {
const func = async (plainText: string, preview: MarkdownInput): Promise<null> => {
preview.innerHTML = (
await markdownRenderMarkdown({ body: { text: plainText } })
).data as string;
@ -161,9 +156,9 @@ class MarkdownInput extends HTMLTextAreaElement {
});
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;
function checkMarkdownInput(_event: Event) {
@ -189,6 +184,12 @@ class MarkdownInput extends HTMLTextAreaElement {
for (const submit of submits) {
submit.addEventListener("click", onSubmitClick);
}
};
class MarkdownInput extends HTMLTextAreaElement {
constructor() {
super();
window.addEventListener("DOMContentLoaded", () => loadEasyMde(this));
}
}