import Delta from 'quill-delta';
|
|
import Emitter from '../core/emitter';
|
|
import Module from '../core/module';
|
|
|
|
class Uploader extends Module {
|
|
constructor(quill, options) {
|
|
super(quill, options);
|
|
quill.root.addEventListener('drop', e => {
|
|
e.preventDefault();
|
|
let native;
|
|
if (document.caretRangeFromPoint) {
|
|
native = document.caretRangeFromPoint(e.clientX, e.clientY);
|
|
} else if (document.caretPositionFromPoint) {
|
|
const position = document.caretPositionFromPoint(e.clientX, e.clientY);
|
|
native = document.createRange();
|
|
native.setStart(position.offsetNode, position.offset);
|
|
native.setEnd(position.offsetNode, position.offset);
|
|
} else {
|
|
return;
|
|
}
|
|
const normalized = quill.selection.normalizeNative(native);
|
|
const range = quill.selection.normalizedToRange(normalized);
|
|
this.upload(range, e.dataTransfer.files);
|
|
});
|
|
}
|
|
|
|
upload(range, files) {
|
|
const uploads = [];
|
|
Array.from(files).forEach(file => {
|
|
if (file && this.options.mimetypes.includes(file.type)) {
|
|
uploads.push(file);
|
|
}
|
|
});
|
|
if (uploads.length > 0) {
|
|
this.options.handler.call(this, range, uploads);
|
|
}
|
|
}
|
|
}
|
|
|
|
Uploader.DEFAULTS = {
|
|
mimetypes: ['image/png', 'image/jpeg'],
|
|
handler(range, files) {
|
|
const promises = files.map(file => {
|
|
return new Promise(resolve => {
|
|
const reader = new FileReader();
|
|
reader.onload = e => {
|
|
resolve(e.target.result);
|
|
};
|
|
reader.readAsDataURL(file);
|
|
});
|
|
});
|
|
Promise.all(promises).then(images => {
|
|
const update = images.reduce((delta, image) => {
|
|
return delta.insert({ image });
|
|
}, new Delta().retain(range.index).delete(range.length));
|
|
this.quill.updateContents(update, Emitter.sources.USER);
|
|
this.quill.setSelection(
|
|
range.index + images.length,
|
|
Emitter.sources.SILENT,
|
|
);
|
|
});
|
|
},
|
|
};
|
|
|
|
export default Uploader;
|