From 645b8a543e4c1b602bb3e0494c0ae85492dd7b3c Mon Sep 17 00:00:00 2001
From: Sli <antoine@bartuccio.fr>
Date: Wed, 16 Oct 2024 12:54:08 +0200
Subject: [PATCH] Make easymde compatible with safari

---
 core/static/webpack/easymde-index.ts          | 36 ++++++++++++-------
 .../core/widgets/markdown_textarea.jinja      |  2 +-
 2 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/core/static/webpack/easymde-index.ts b/core/static/webpack/easymde-index.ts
index 3e64f5fa..81bdf71d 100644
--- a/core/static/webpack/easymde-index.ts
+++ b/core/static/webpack/easymde-index.ts
@@ -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);
diff --git a/core/templates/core/widgets/markdown_textarea.jinja b/core/templates/core/widgets/markdown_textarea.jinja
index f7cae8c4..287e4521 100644
--- a/core/templates/core/widgets/markdown_textarea.jinja
+++ b/core/templates/core/widgets/markdown_textarea.jinja
@@ -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>