diff --git a/frappe/public/js/frappe/form/controls/markdown_editor.js b/frappe/public/js/frappe/form/controls/markdown_editor.js
index 5acf4bd467..0f723d626f 100644
--- a/frappe/public/js/frappe/form/controls/markdown_editor.js
+++ b/frappe/public/js/frappe/form/controls/markdown_editor.js
@@ -29,6 +29,8 @@ frappe.ui.form.ControlMarkdownEditor = class ControlMarkdownEditor extends frapp
this.markdown_preview = $(`
`).hide();
this.markdown_container.append(this.markdown_preview);
+
+ this.setup_image_drop();
}
set_language() {
@@ -53,4 +55,45 @@ frappe.ui.form.ControlMarkdownEditor = class ControlMarkdownEditor extends frapp
set_disp_area(value) {
this.disp_area && $(this.disp_area).text(value);
}
+
+ setup_image_drop() {
+ this.ace_editor_target.on('drop', e => {
+ e.stopPropagation();
+ e.preventDefault();
+ let { dataTransfer } = e.originalEvent;
+ if (!dataTransfer?.files?.length) {
+ return;
+ }
+ let files = dataTransfer.files;
+ if (!files[0].type.includes('image')) {
+ frappe.show_alert({
+ message: __('You can only insert images in Markdown fields', [files[0].name]),
+ indicator: 'orange'
+ });
+ return;
+ }
+
+ new frappe.ui.FileUploader({
+ dialog_title: __('Insert Image in Markdown'),
+ doctype: this.doctype,
+ docname: this.docname,
+ frm: this.frm,
+ files,
+ folder: 'Home/Attachments',
+ allow_multiple: false,
+ restrictions: {
+ allowed_file_types: ['image/*']
+ },
+ on_success: (file_doc) => {
+ if (this.frm) {
+ this.frm.attachments.attachment_uploaded(file_doc);
+ }
+ this.editor.session.insert(
+ this.editor.getCursorPosition(),
+ `})`
+ );
+ }
+ });
+ });
+ }
};