From d65cabe4f359d092676df7ccf1f049d776cde7b0 Mon Sep 17 00:00:00 2001 From: Sli Date: Thu, 27 Feb 2025 00:33:37 +0100 Subject: [PATCH] Add image upload to easymde widget --- core/api.py | 8 ++-- .../bundled/core/components/easymde-index.ts | 48 ++++++++++++++++++- locale/fr/LC_MESSAGES/djangojs.po | 35 +++++++++++++- package-lock.json | 12 ++--- package.json | 2 +- 5 files changed, 91 insertions(+), 14 deletions(-) diff --git a/core/api.py b/core/api.py index 47601a05..e8f89479 100644 --- a/core/api.py +++ b/core/api.py @@ -42,11 +42,11 @@ class MarkdownController(ControllerBase): @api_controller("/upload") class UploadController(ControllerBase): - @route.post("/images", response=UploadedFileSchema, permissions=[IsOldSubscriber]) - def upload_assets(self, file: UploadedFile): + @route.post("/image", response=UploadedFileSchema, permissions=[IsOldSubscriber]) + def upload_image(self, file: UploadedFile): if file.content_type.split("/")[0] != "image": return self.create_response( - message=f"{file.name} isn't a file image", status_code=400 + message=f"{file.name} isn't a file image", status_code=415 ) def convert_image(file: UploadedFile) -> ContentFile: @@ -60,7 +60,7 @@ class UploadController(ControllerBase): converted = convert_image(file) except UnidentifiedImageError: return self.create_response( - message=f"{file.name} can't be processed", status_code=400 + message=f"{file.name} can't be processed", status_code=415 ) with transaction.atomic(): diff --git a/core/static/bundled/core/components/easymde-index.ts b/core/static/bundled/core/components/easymde-index.ts index d99799a0..8c337fb6 100644 --- a/core/static/bundled/core/components/easymde-index.ts +++ b/core/static/bundled/core/components/easymde-index.ts @@ -6,13 +6,43 @@ import { inheritHtmlElement, registerComponent } from "#core:utils/web-component import type CodeMirror from "codemirror"; // biome-ignore lint/style/useNamingConvention: This is how they called their namespace import EasyMDE from "easymde"; -import { markdownRenderMarkdown } from "#openapi"; +import { markdownRenderMarkdown, uploadUploadImage } from "#openapi"; const loadEasyMde = (textarea: HTMLTextAreaElement) => { - new EasyMDE({ + const easymde = new EasyMDE({ element: textarea, spellChecker: false, autoDownloadFontAwesome: false, + uploadImage: true, + imagePathAbsolute: false, + imageUploadFunction: async (file, onSuccess, onError) => { + const response = await uploadUploadImage({ + body: { + file: file, + }, + }); + if (response.response.status !== 200) { + onError(gettext("Invalid file")); + return; + } + onSuccess(response.data.href); + // Workaround function to add ! and image name to uploaded image + // Without this, you get [](url) instead of ![name](url) + let cursor = easymde.codemirror.getCursor(); + easymde.codemirror.setSelection({ line: cursor.line, ch: cursor.ch - 1 }); + easymde.codemirror.replaceSelection("!"); + + easymde.codemirror.setSelection({ line: cursor.line, ch: cursor.ch + 1 }); + easymde.codemirror.replaceSelection(file.name.split(".").slice(0, -1).join(".")); + + // Move cursor at the end of the url and add a new line + cursor = easymde.codemirror.getCursor(); + easymde.codemirror.setSelection({ + line: cursor.line, + ch: cursor.ch + response.data.href.length + 3, + }); + easymde.codemirror.replaceSelection("\n"); + }, previewRender: (plainText: string, preview: MarkdownInput) => { /* This is wrapped this way to allow time for Alpine to be loaded on the page */ return Alpine.debounce((plainText: string, preview: MarkdownInput) => { @@ -30,6 +60,14 @@ const loadEasyMde = (textarea: HTMLTextAreaElement) => { }, 300)(plainText, preview); }, forceSync: true, // Avoid validation error on generic create view + imageTexts: { + sbInit: gettext("Attach files by drag and dropping or pasting from clipboard."), + sbOnDragEnter: gettext("Drop image to upload it."), + sbOnDrop: gettext("Uploading image #images_names# …"), + sbProgress: gettext("Uploading #file_name#: #progress#%"), + sbOnUploaded: gettext("Uploaded #image_name#"), + sizeUnits: gettext(" B, KB, MB"), + }, toolbar: [ { name: "heading-smaller", @@ -120,6 +158,12 @@ const loadEasyMde = (textarea: HTMLTextAreaElement) => { className: "fa-regular fa-image", title: gettext("Insert image"), }, + { + name: "upload-image", + action: EasyMDE.drawUploadedImage, + className: "fa-solid fa-file-arrow-up", + title: gettext("Upload image"), + }, { name: "table", action: EasyMDE.drawTable, diff --git a/locale/fr/LC_MESSAGES/djangojs.po b/locale/fr/LC_MESSAGES/djangojs.po index c222636a..ec7ebca1 100644 --- a/locale/fr/LC_MESSAGES/djangojs.po +++ b/locale/fr/LC_MESSAGES/djangojs.po @@ -7,7 +7,7 @@ msgid "" msgstr "" "Report-Msgid-Bugs-To: \n" -"POT-Creation-Date: 2025-02-25 16:10+0100\n" +"POT-Creation-Date: 2025-02-27 00:27+0100\n" "PO-Revision-Date: 2024-09-17 11:54+0200\n" "Last-Translator: Sli \n" "Language-Team: AE info \n" @@ -34,6 +34,7 @@ msgid "Delete" msgstr "Supprimer" #: com/static/bundled/com/components/moderation-alert-index.ts +#, javascript-format msgid "" "This event will take place every week for %s weeks. If you publish or delete " "this event, it will also be published (or deleted) for the following weeks." @@ -54,6 +55,34 @@ msgstr "Vous devez taper %(number)s caractères de plus" msgid "No results found" msgstr "Aucun résultat trouvé" +#: core/static/bundled/core/components/easymde-index.ts +msgid "Invalid file" +msgstr "Fichier invalide" + +#: core/static/bundled/core/components/easymde-index.ts +msgid "Attach files by drag and dropping or pasting from clipboard." +msgstr "Ajoutez des fichiez en glissant déposant ou collant depuis votre presse papier." + +#: core/static/bundled/core/components/easymde-index.ts +msgid "Drop image to upload it." +msgstr "Glissez une image pour la téléverser." + +#: core/static/bundled/core/components/easymde-index.ts +msgid "Uploading image #images_names# …" +msgstr "Téléversement de l'image #images_names# …" + +#: core/static/bundled/core/components/easymde-index.ts +msgid "Uploading #file_name#: #progress#%" +msgstr "Téléversement de #file_name#: #progress#%" + +#: core/static/bundled/core/components/easymde-index.ts +msgid "Uploaded #image_name#" +msgstr "#image_name# téléversé" + +#: core/static/bundled/core/components/easymde-index.ts +msgid " B, KB, MB" +msgstr " B, KB, MB" + #: core/static/bundled/core/components/easymde-index.ts msgid "Heading" msgstr "Titre" @@ -106,6 +135,10 @@ msgstr "Insérer lien" msgid "Insert image" msgstr "Insérer image" +#: core/static/bundled/core/components/easymde-index.ts +msgid "Upload image" +msgstr "Téléverser une image" + #: core/static/bundled/core/components/easymde-index.ts msgid "Insert table" msgstr "Insérer tableau" diff --git a/package-lock.json b/package-lock.json index 012e48e7..e8b6658d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -26,7 +26,7 @@ "cytoscape-cxtmenu": "^3.5.0", "cytoscape-klay": "^3.1.4", "d3-force-3d": "^3.0.5", - "easymde": "^2.18.0", + "easymde": "^2.19.0", "glob": "^11.0.0", "htmx.org": "^2.0.3", "jquery": "^3.7.1", @@ -3655,14 +3655,14 @@ "license": "MIT" }, "node_modules/easymde": { - "version": "2.18.0", - "resolved": "https://registry.npmjs.org/easymde/-/easymde-2.18.0.tgz", - "integrity": "sha512-IxVVUxNWIoXLeqtBU4BLc+eS/ScYhT1Dcb6yF5Wchoj1iXAV+TIIDWx+NCaZhY7RcSHqDPKllbYq7nwGKILnoA==", + "version": "2.19.0", + "resolved": "https://registry.npmjs.org/easymde/-/easymde-2.19.0.tgz", + "integrity": "sha512-4F1aNImqse+9xIjLh9ttfpOVenecjFPxUmKbl1tGp72Z+OyIqLZPE/SgNyy88c/xU0mOy0WC3+tfbZDQ5PDWhg==", "license": "MIT", "dependencies": { - "@types/codemirror": "^5.60.4", + "@types/codemirror": "^5.60.10", "@types/marked": "^4.0.7", - "codemirror": "^5.63.1", + "codemirror": "^5.65.15", "codemirror-spell-checker": "1.1.2", "marked": "^4.1.0" } diff --git a/package.json b/package.json index 93494819..12741f7f 100644 --- a/package.json +++ b/package.json @@ -52,7 +52,7 @@ "cytoscape-cxtmenu": "^3.5.0", "cytoscape-klay": "^3.1.4", "d3-force-3d": "^3.0.5", - "easymde": "^2.18.0", + "easymde": "^2.19.0", "glob": "^11.0.0", "htmx.org": "^2.0.3", "jquery": "^3.7.1",