Addon: insert-file with support for drag-drop, paste

[nokola]

Just moving the discussion here from the closed PR.

I make a simple working insert-file.ts addon, as we discussed above. Here it is: https://gist.github.com/nokola/f11f91b15ee4acdd17588334e1b57f78

I won't have time to extend it yet, because I have to work on other parts of my project (the actual file upload...)

I think it's best that it's part of HyperMD, but I wanted the addon today to continue with my project, so I made this quick/simple one.

I'm not sure the best way to interact with CodeMirror, perhaps you have a better idea. Please feel free to use as you wish/copy/etc. or just use the .js output!

[laobubu]

Currently I'm trying refactoring the project with TypeScript and rollup.js. Much harder than I thought.

I've also written one insert-file but not tested due to the unfinished building script. Will check yours later.

[nokola]

Yes, lots of work indeed, for me too when I was trying it out. The insert-file.ts I made is very lightweight - it just does the insert file functionality and leaves the rest to the developer using it. I like that it doesn't even have sample code because no extra code just for sample purposes. But it may be good to have a sample inside so the code works out-of-the box.

I added extra sample code to https://gist.github.com/nokola/f11f91b15ee4acdd17588334e1b57f78 for firebase upload with thumbnails, zip files.

[laobubu]

Looks good! Thanks

[laobubu]

v0.3.6

Both hmdInsertFile and hmdInsertFile.fileHandler now accept a FileHandler function.

File Handler is called when user is trying to insert file(s)

returns true if files are accepted and uploading, and HyperMD will put a placeholder there. Then FileHandler may use action object to change the placeholder and finish uploading.

It's recommended to add "hmd-file-uploading" class to the placeholders of uploading items, and "hmd-file-uploaded" to uploaded ones.

Here is an example:

PowerPack insert-file-with-smms provides SmMsFileHandler, which accepts image files only, and uploads them to sm.ms the free image hosting service.

https://github.com/laobubu/HyperMD/blob/master/src/powerpack/insert-file-with-smms.ts

[nokola]

Will check it out in the next few weeks, thanks! (currently working on another part of my project and need to spend some time to integrate the new typescript HyperMD first)