klmp200/Sith
1
0
Fork 0
mirror of https://github.com/ae-utbm/sith.git synced 2024-12-22 15:51:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

Make easymde compatible with safari

Browse Source
This commit is contained in:
Antoine Bartuccio 2024-10-16 12:54:08 +02:00
parent 74a506c48b
commit 645b8a543e
2 changed files with 24 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
core/static/webpack/easymde-index.ts
View File

@ -8,7 +8,7 @@ import EasyMDE from "easymde";
import { markdownRenderMarkdown } from "#openapi";
const loadEasyMde = (textarea: HTMLTextAreaElement) => {
new EasyMDE({
const easyMde = new EasyMDE({
element: textarea,
spellChecker: false,
autoDownloadFontAwesome: false,
@ -158,26 +158,22 @@ const loadEasyMde = (textarea: HTMLTextAreaElement) => {
const submits: HTMLInputElement[] = Array.from(
textarea.closest("form").querySelectorAll('input[type="submit"]'),
);
const parentDiv = textarea.parentElement;
let submitPressed = false;
const parentDiv = textarea.parentElement.parentElement;
function checkMarkdownInput(_event: Event) {
function checkMarkdownInput(event: Event) {
// an attribute is null if it does not exist, else a string
const required = this.getAttribute("required") != null;
const length = this.value.trim().length;
const required = textarea.getAttribute("required") != null;
const length = textarea.value.trim().length;
if (required && length === 0) {
parentDiv.style.boxShadow = "red 0px 0px 1.5px 1px";
event.preventDefault();
} else {
parentDiv.style.boxShadow = "";
}
}
function onSubmitClick(e: Event) {
if (!submitPressed) {
this.codemirror.on("change", checkMarkdownInput);
}
submitPressed = true;
checkMarkdownInput(e);
}
@ -186,11 +182,25 @@ const loadEasyMde = (textarea: HTMLTextAreaElement) => {
}
};
class MarkdownInput extends HTMLTextAreaElement {
class MarkdownInput extends HTMLElement {
widget: HTMLTextAreaElement;
constructor() {
super();
window.addEventListener("DOMContentLoaded", () => loadEasyMde(this));
this.widget = document.createElement("textarea");
const attributes: Attr[] = []; // We need to make a copy to delete while iterating
for (const attr of this.attributes) {
attributes.push(attr);
}
for (const attr of attributes) {
this.removeAttributeNode(attr);
this.widget.setAttributeNode(attr);
}
this.appendChild(this.widget);
window.addEventListener("DOMContentLoaded", () => loadEasyMde(this.widget));
}
}
window.customElements.define("markdown-input", MarkdownInput, { extends: "textarea" });
window.customElements.define("markdown-input", MarkdownInput);

2
core/templates/core/widgets/markdown_textarea.jinja
View File

@ -1,5 +1,5 @@
<div>
<textarea is="markdown-input" name="{{ widget.name }}"{% include "django/forms/widgets/attrs.html" %}>{% if widget.value %}{{ widget.value }}{% endif %}</textarea>
<markdown-input name="{{ widget.name }}"{% include "django/forms/widgets/attrs.html" %}>{% if widget.value %}{{ widget.value }}{% endif %}</markdown-input>
{# The easymde script can be included twice, it's safe in the code #}
<script src="{{ statics.js }}" defer> </script>