tiny-markdown-editor
tiny-markdown-editor copied to clipboard
Handle `drop` event
Hey @jefago 👋
Thanks a ton for Tiny MDE, I love it and currently migrating SQL Habit to Tiny MDE for forum questions, forum replies (https://www.sqlhabit.com/forum/questions/how-to-calculate-button-ctr) and CMS.
The migration from Simple MDE is smooth, except for one thing – I've added image drop support to the editor, it's super handy to add markdown images by dropping them (like in Github issues):
https://github.com/user-attachments/assets/4a54adbc-6d18-474f-8040-6221c495e50c
It's already working with Tiny MDE, but I had to rely on an undocumented feature to handle the drop event:
let editor = new Editor({
textarea: $textArea,
});
editor.e.addEventListener("drop", function(event) {
event.preventDefault();
// Code that submits image from event.dataTransfer
const pos = editor.getSelection()
editor.paste(`\n\n`, pos);
});
I was able to find the editor.e
property to capture the native drop event, but it's not documented anywhere and feels hacky.
Wdyt if I add proper support for the drop
event + documentation on how to insert images, so everyone can just do editor.addEventListener("drop", ...
?