klmp200/Sith
1
0
Fork 0
mirror of https://github.com/ae-utbm/sith.git synced 2024-11-01 11:58:04 +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"; import { markdownRenderMarkdown } from "#openapi";
const loadEasyMde = (textarea: HTMLTextAreaElement) => { const loadEasyMde = (textarea: HTMLTextAreaElement) => {
new EasyMDE({ const easyMde = new EasyMDE({
element: textarea, element: textarea,
spellChecker: false, spellChecker: false,
autoDownloadFontAwesome: false, autoDownloadFontAwesome: false,
@ -158,26 +158,22 @@ const loadEasyMde = (textarea: HTMLTextAreaElement) => {
const submits: HTMLInputElement[] = Array.from( const submits: HTMLInputElement[] = Array.from(
textarea.closest("form").querySelectorAll('input[type="submit"]'), textarea.closest("form").querySelectorAll('input[type="submit"]'),
); );
const parentDiv = textarea.parentElement; const parentDiv = textarea.parentElement.parentElement;
let submitPressed = false;
function checkMarkdownInput(_event: Event) { function checkMarkdownInput(event: Event) {
// an attribute is null if it does not exist, else a string // an attribute is null if it does not exist, else a string
const required = this.getAttribute("required") != null; const required = textarea.getAttribute("required") != null;
const length = this.value.trim().length; const length = textarea.value.trim().length;
if (required && length === 0) { if (required && length === 0) {
parentDiv.style.boxShadow = "red 0px 0px 1.5px 1px"; parentDiv.style.boxShadow = "red 0px 0px 1.5px 1px";
event.preventDefault();
} else { } else {
parentDiv.style.boxShadow = ""; parentDiv.style.boxShadow = "";
} }
} }
function onSubmitClick(e: Event) { function onSubmitClick(e: Event) {
if (!submitPressed) {
this.codemirror.on("change", checkMarkdownInput);
}
submitPressed = true;
checkMarkdownInput(e); checkMarkdownInput(e);
} }
@ -186,11 +182,25 @@ const loadEasyMde = (textarea: HTMLTextAreaElement) => {
} }
}; };
class MarkdownInput extends HTMLTextAreaElement { class MarkdownInput extends HTMLElement {
widget: HTMLTextAreaElement;
constructor() { constructor() {
super(); 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> <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 #} {# The easymde script can be included twice, it's safe in the code #}
<script src="{{ statics.js }}" defer> </script> <script src="{{ statics.js }}" defer> </script>