Use auto generated api for markdown input

This commit is contained in:
Antoine Bartuccio 2024-10-09 16:56:53 +02:00
parent a71ca60270
commit a98c924b24
3 changed files with 6 additions and 14 deletions

View File

@ -2,25 +2,21 @@
import "codemirror/lib/codemirror.css"; import "codemirror/lib/codemirror.css";
import "easymde/src/css/easymde.css"; import "easymde/src/css/easymde.css";
import easyMde from "easymde"; import easyMde from "easymde";
import { markdownRenderMarkdown } from "#openapi";
// This scripts dependens on Alpine but it should be loaded on every page
/** /**
* Create a new easymde based textarea * Create a new easymde based textarea
* @param {HTMLTextAreaElement} textarea to use * @param {HTMLTextAreaElement} textarea to use
* @param {string} link to the markdown api
**/ **/
window.easymdeFactory = (textarea, markdownApiUrl) => { window.easymdeFactory = (textarea) => {
const easymde = new easyMde({ const easymde = new easyMde({
element: textarea, element: textarea,
spellChecker: false, spellChecker: false,
autoDownloadFontAwesome: false, autoDownloadFontAwesome: false,
previewRender: Alpine.debounce(async (plainText, preview) => { previewRender: Alpine.debounce(async (plainText, preview) => {
const res = await fetch(markdownApiUrl, { preview.innerHTML = (
method: "POST", await markdownRenderMarkdown({ body: { text: plainText } })
body: JSON.stringify({ text: plainText }), ).data;
});
preview.innerHTML = await res.text();
return null; return null;
}, 300), }, 300),
forceSync: true, // Avoid validation error on generic create view forceSync: true, // Avoid validation error on generic create view

View File

@ -7,9 +7,7 @@
<script type="text/javascript"> <script type="text/javascript">
addEventListener("DOMContentLoaded", (event) => { addEventListener("DOMContentLoaded", (event) => {
easymdeFactory( easymdeFactory(
document.getElementById("{{ widget.attrs.id }}"), document.getElementById("{{ widget.attrs.id }}"));
"{{ markdown_api_url }}",
);
}) })
</script> </script>
</div> </div>

View File

@ -39,7 +39,6 @@ from django.forms import (
TextInput, TextInput,
) )
from django.templatetags.static import static from django.templatetags.static import static
from django.urls import reverse
from django.utils.translation import gettext from django.utils.translation import gettext
from django.utils.translation import gettext_lazy as _ from django.utils.translation import gettext_lazy as _
from phonenumber_field.widgets import RegionalPhoneNumberWidget from phonenumber_field.widgets import RegionalPhoneNumberWidget
@ -76,7 +75,6 @@ class MarkdownInput(Textarea):
"js": static("webpack/easymde-index.js"), "js": static("webpack/easymde-index.js"),
"css": static("webpack/easymde-index.css"), "css": static("webpack/easymde-index.css"),
} }
context["markdown_api_url"] = reverse("api:markdown")
return context return context