tiny-markdown-editor icon indicating copy to clipboard operation
tiny-markdown-editor copied to clipboard

Handle `drop` event

Open makaroni4 opened this issue 5 months ago • 0 comments

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![${response.data.image_name}](${response.data.image_url})\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", ...?

makaroni4 avatar Sep 01 '24 13:09 makaroni4