1import ImageGalleryModal from"../../ImageGalleryModal.js";export default class XutimImageTool{static get toolbox(){return{title:"Image",icon:'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><rect width="14" height="14" x="5" y="5" stroke="currentColor" stroke-width="2" rx="4"></rect><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.13968 15.32L8.69058 11.5661C9.02934 11.2036 9.48873 11 9.96774 11C10.4467 11 10.9061 11.2036 11.2449 11.5661L15.3871 16M13.5806 14.0664L15.0132 12.533C15.3519 12.1705 15.8113 11.9668 16.2903 11.9668C16.7693 11.9668 17.2287 12.1705 17.5675 12.533L18.841 13.9634"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.7778 9.33331H13.7867"></path></svg>'}}static get isReadOnlySupported(){return!0}constructor({data:e,config:t,api:n,block:s,readOnly:o}){this.data=e||{},this.config=t||{},this.api=n,this.block=s,this.wrapper=null,this.modal=null,this.galleryUrl=this.config.galleryUrl||"",this.readOnly=!!o}render(){this.wrapper=document.createElement("div"),this.wrapper.className="border rounded p-3 my-4";const n=document.createElement("div");n.style.cursor=this.readOnly?"default":"pointer";const s=document.createElement("span");s.textContent="+ Add Image",s.style.color="#aaa",n.appendChild(s);const e=document.createElement("img");if(e.className="rounded",e.style.maxWidth="100%",e.style.height="auto",e.style.display="block",this.data.file&&this.data.file.url){const t=this.data.file.url;this.wrapper.classList.remove("border","p-3"),e.src=this.data.file.thumbnailUrl||t,e.onerror=()=>{e.onerror=null,e.src=t},e.dataset.id=this.data.file.id,e.dataset.url=this.data.file.url,e.dataset.thumbnailUrl=this.data.file.thumbnailUrl||t,s.style.display="none"}n.appendChild(e),this.readOnly||n.addEventListener("click",()=>{this.openImageEditor()}),this.wrapper.appendChild(n);const t=document.createElement("div");return t.classList.add(this.api.styles.input),t.contentEditable=(!this.readOnly).toString(),t.dataset.placeholder=this.api.i18n.t("Enter a caption"),t.style.marginTop="7px",t.style.textAlign="center",t.innerHTML=this.data.caption||"",this.captionElement=t,this.wrapper.appendChild(t),this.wrapper}openImageEditor(){if(this.readOnly)return;this.modal||(this.modal=new ImageGalleryModal({galleryUrl:this.galleryUrl,onSelect:e=>{this.#e(e.fullSourceUrl,e.filteredUrl,e.id)}})),this.modal.show()}#e(e,t,n){this.data.file={url:e,id:n,thumbnailUrl:t};const s=this.wrapper.querySelector("img"),o=this.wrapper.querySelector("span");this.wrapper.classList.remove("border","p-3"),s.src=t||e,s.dataset.url=e,s.dataset.thumbnailUrl=t,s.dataset.id=n,s.style.maxWidth="100%",s.style.height="auto",s.style.display="block",o.style.display="none",this.api.blocks.update(this.block.id,this.data),this.closeModal()}closeModal(){this.modal&&this.modal.close()}validate(e){return Object.keys(e.file).length!==0||e.file.constructor!==Object}save(){const t=this.captionElement?this.captionElement.innerHTML:this.data.caption||"";if(this.readOnly)return{file:this.data&&this.data.file?this.data.file:{},caption:t};const e=this.wrapper.querySelector("img");let n={};return e.dataset.url&&e.style.display==="block"&&(n={url:e.dataset.url,id:e.dataset.id,thumbnailUrl:e.dataset.thumbnailUrl||e.dataset.url}),{file:n,caption:t}}}
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.