forked from zicloud/bigscreen_admin
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
69 lines
2.2 KiB
JavaScript
69 lines
2.2 KiB
JavaScript
import Delta from 'quill-delta';
|
|
import Emitter from '../core/emitter.js';
|
|
import Module from '../core/module.js';
|
|
class Uploader extends Module {
|
|
constructor(quill, options) {
|
|
super(quill, options);
|
|
quill.root.addEventListener('drop', e => {
|
|
e.preventDefault();
|
|
let native = null;
|
|
if (document.caretRangeFromPoint) {
|
|
native = document.caretRangeFromPoint(e.clientX, e.clientY);
|
|
// @ts-expect-error
|
|
} else if (document.caretPositionFromPoint) {
|
|
// @ts-expect-error
|
|
const position = document.caretPositionFromPoint(e.clientX, e.clientY);
|
|
native = document.createRange();
|
|
native.setStart(position.offsetNode, position.offset);
|
|
native.setEnd(position.offsetNode, position.offset);
|
|
}
|
|
const normalized = native && quill.selection.normalizeNative(native);
|
|
if (normalized) {
|
|
const range = quill.selection.normalizedToRange(normalized);
|
|
if (e.dataTransfer?.files) {
|
|
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) {
|
|
// @ts-expect-error Fix me later
|
|
this.options.handler.call(this, range, uploads);
|
|
}
|
|
}
|
|
}
|
|
Uploader.DEFAULTS = {
|
|
mimetypes: ['image/png', 'image/jpeg'],
|
|
handler(range, files) {
|
|
if (!this.quill.scroll.query('image')) {
|
|
return;
|
|
}
|
|
const promises = files.map(file => {
|
|
return new Promise(resolve => {
|
|
const reader = new FileReader();
|
|
reader.onload = () => {
|
|
resolve(reader.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;
|
|
//# sourceMappingURL=uploader.js.map
|