Replace EasyMDE with Toast UI Editor

web/templates/editor.html

@@ -26,7 +26,7 @@
 
     <div class="flex flex-col gap-1">
         <h3>Artikel</h3>
-        <textarea id="easyMDE">{{.Content}}</textarea>
+        <div id="editor"></div>
         <input id="article-content" name="article-content" type="hidden" value="{{.Content}}" />
     </div>
 
@@ -88,34 +88,37 @@
 </form>
 
 <script>
-    var easyMDE = new EasyMDE({
-        element: document.getElementById('easyMDE'),
-        hideIcons: ['image'],
-        imageTexts: {sbInit: ''},
-        showIcons: ["code", "table", "upload-image"],
-        uploadImage: true,
+    var editor = new toastui.Editor({
+        el: document.querySelector('#editor'),
+        height: '500px',
+        hooks: {
+            addImageBlobHook: (blob, callback) => {
+                const formData = new FormData();
+                formData.append('article-image', blob);
 
-        imageUploadFunction: function (file, onSuccess, onError) {
-            var formData = new FormData();
-            formData.append('article-image', file);
-
-            fetch('/article/upload-image', {
-                method: 'POST',
-                body: formData
-            })
-                .then(response => response.json())
-                .then(data => {
-                    onSuccess(data);
+                fetch('/article/upload-image', {
+                    method: 'POST',
+                    body: formData
                 })
-                .catch(error => {
-                    htmx.trigger(htmx.find('#notification'), 'htmx:responseError', {xhr: {responseText: error.message}});
-                    onError(error);
-                });
+                    .then(response => response.json())
+                    .then(data => {
+                        callback(data, 'Alternativtext');
+                    })
+                    .catch(error => {
+                        htmx.trigger(htmx.find('#notification'), 'htmx:responseError', {xhr: {responseText: error.message}});
+                        console.error('Upload fehlgeschlagen:', error);
+                    });
+            }
         },
+        initialEditType: 'wysiwyg',
+        initialValue: '{{.Content}}',
+        language: 'de',
+        theme: localStorage.theme,
+        usageStatistics: 'false'
     });
 
-    easyMDE.codemirror.on("change", () => {
-        document.getElementById('article-content').value = easyMDE.value();
+    editor.on('change', () => {
+        document.getElementById('article-content').value = editor.getMarkdown();
     });
 </script>
 {{end}}