ll-package
Version:
2 lines (1 loc) • 3.22 kB
JavaScript
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("./blots/image.js");class a{constructor(e,t){this.quill=e,this.options=t,this.range=null,this.placeholderDelta=null,typeof this.options.upload!="function"&&console.warn("[Missing config] upload function that returns a promise is required");var i=this.quill.getModule("toolbar");i&&i.addHandler("image",this.selectLocalImage.bind(this)),this.handleDrop=this.handleDrop.bind(this),this.handlePaste=this.handlePaste.bind(this),this.quill.root.addEventListener("drop",this.handleDrop,!1),this.quill.root.addEventListener("paste",this.handlePaste,!1)}selectLocalImage(){this.quill.focus(),this.range=this.quill.getSelection(),this.fileHolder=document.createElement("input"),this.fileHolder.setAttribute("type","file"),this.fileHolder.setAttribute("accept","image/*"),this.fileHolder.setAttribute("style","visibility:hidden"),this.fileHolder.onchange=this.fileChanged.bind(this),document.body.appendChild(this.fileHolder),this.fileHolder.click(),window.requestAnimationFrame(()=>{document.body.removeChild(this.fileHolder)})}handleDrop(e){if(e.dataTransfer&&e.dataTransfer.files&&e.dataTransfer.files.length){if(e.stopPropagation(),e.preventDefault(),document.caretRangeFromPoint){const i=document.getSelection(),l=document.caretRangeFromPoint(e.clientX,e.clientY);i&&l&&i.setBaseAndExtent(l.startContainer,l.startOffset,l.startContainer,l.startOffset)}else{const i=document.getSelection(),l=document.caretPositionFromPoint(e.clientX,e.clientY);i&&l&&i.setBaseAndExtent(l.offsetNode,l.offset,l.offsetNode,l.offset)}this.quill.focus(),this.range=this.quill.getSelection();let t=e.dataTransfer.files[0];setTimeout(()=>{this.quill.focus(),this.range=this.quill.getSelection(),this.readAndUploadFile(t)},0)}}handlePaste(e){let t=e.clipboardData||window.clipboardData;if(t&&(t.items||t.files)){let i=t.items||t.files;const l=/^image\/(jpe?g|gif|png|svg|webp)$/i;for(let s=0;s<i.length;s++)if(l.test(i[s].type)){let n=i[s].getAsFile?i[s].getAsFile():i[s];n&&(this.quill.focus(),this.range=this.quill.getSelection(),e.preventDefault(),setTimeout(()=>{this.quill.focus(),this.range=this.quill.getSelection(),this.readAndUploadFile(n)},0))}}}readAndUploadFile(e){let t=!1;const i=new FileReader;i.addEventListener("load",()=>{if(!t){let l=i.result;this.insertBase64Image(l)}},!1),e&&i.readAsDataURL(e),this.options.upload(e).then(l=>{this.insertToEditor(l)},l=>{t=!0,this.removeBase64Image(),console.warn(l)})}fileChanged(){const e=this.fileHolder.files[0];this.readAndUploadFile(e)}insertBase64Image(e){const t=this.range;this.placeholderDelta=this.quill.insertEmbed(t.index,o.default.blotName,`${e}`,"user")}insertToEditor(e){const t=this.range,i=this.calculatePlaceholderInsertLength();this.quill.deleteText(t.index,i,"user"),this.quill.insertEmbed(t.index,"image",`${e}`,"user"),t.index++,this.quill.setSelection(t,"user")}calculatePlaceholderInsertLength(){return this.placeholderDelta.ops.reduce((e,t)=>(t.hasOwnProperty("insert")&&e++,e),0)}removeBase64Image(){const e=this.range,t=this.calculatePlaceholderInsertLength();this.quill.deleteText(e.index,t,"user")}}window.ImageUploader=a;exports.default=a;