@hannal/editorjs-imagebox-plugin/dist/imagebox.esm.js

Imagebox for Editor.js

var e={128:e=>{e.exports=function(e,t){if(t.styleSheet)t.styleSheet.cssText=e;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(e))}}},156:e=>{e.exports=function(e){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var t=e.insertStyleElement(e);return{update:function(n){!function(e,t,n){var a="";n.supports&&(a+="@supports (".concat(n.supports,") {")),n.media&&(a+="@media ".concat(n.media," {"));var i=void 0!==n.layer;i&&(a+="@layer".concat(n.layer.length>0?" ".concat(n.layer):""," {")),a+=n.css,i&&(a+="}"),n.media&&(a+="}"),n.supports&&(a+="}");var r=n.sourceMap;r&&"undefined"!=typeof btoa&&(a+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(r))))," */")),t.styleTagTransform(a,e,t.options)}(t,e,n)},remove:function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(t)}}}},283:e=>{e.exports=function(e){var t=document.createElement("style");return e.setAttributes(t,e.attributes),e.insert(t,e.options),t}},305:e=>{e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var n="",a=void 0!==t[5];return t[4]&&(n+="@supports (".concat(t[4],") {")),t[2]&&(n+="@media ".concat(t[2]," {")),a&&(n+="@layer".concat(t[5].length>0?" ".concat(t[5]):""," {")),n+=e(t),a&&(n+="}"),t[2]&&(n+="}"),t[4]&&(n+="}"),n})).join("")},t.i=function(e,n,a,i,r){"string"==typeof e&&(e=[[null,e,void 0]]);var o={};if(a)for(var s=0;s<this.length;s++){var d=this[s][0];null!=d&&(o[d]=!0)}for(var l=0;l<e.length;l++){var c=[].concat(e[l]);a&&o[c[0]]||(void 0!==r&&(void 0===c[5]||(c[1]="@layer".concat(c[5].length>0?" ".concat(c[5]):""," {").concat(c[1],"}")),c[5]=r),n&&(c[2]?(c[1]="@media ".concat(c[2]," {").concat(c[1],"}"),c[2]=n):c[2]=n),i&&(c[4]?(c[1]="@supports (".concat(c[4],") {").concat(c[1],"}"),c[4]=i):c[4]="".concat(i)),t.push(c))}},t}},608:e=>{e.exports=function(e){return e[1]}},727:e=>{var t=[];function n(e){for(var n=-1,a=0;a<t.length;a++)if(t[a].identifier===e){n=a;break}return n}function a(e,a){for(var r={},o=[],s=0;s<e.length;s++){var d=e[s],l=a.base?d[0]+a.base:d[0],c=r[l]||0,p="".concat(l," ").concat(c);r[l]=c+1;var h=n(p),u={css:d[1],media:d[2],sourceMap:d[3],supports:d[4],layer:d[5]};if(-1!==h)t[h].references++,t[h].updater(u);else{var g=i(u,a);a.byIndex=s,t.splice(s,0,{identifier:p,updater:g,references:1})}o.push(p)}return o}function i(e,t){var n=t.domAPI(t);return n.update(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap&&t.supports===e.supports&&t.layer===e.layer)return;n.update(e=t)}else n.remove()}}e.exports=function(e,i){var r=a(e=e||[],i=i||{});return function(e){e=e||[];for(var o=0;o<r.length;o++){var s=n(r[o]);t[s].references--}for(var d=a(e,i),l=0;l<r.length;l++){var c=n(r[l]);0===t[c].references&&(t[c].updater(),t.splice(c,1))}r=d}}},735:(e,t,n)=>{e.exports=function(e){var t=n.nc;t&&e.setAttribute("nonce",t)}},792:e=>{var t={};e.exports=function(e,n){var a=function(e){if(void 0===t[e]){var n=document.querySelector(e);if(window.HTMLIFrameElement&&n instanceof window.HTMLIFrameElement)try{n=n.contentDocument.head}catch(e){n=null}t[e]=n}return t[e]}(e);if(!a)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");a.appendChild(n)}},836:(e,t,n)=>{n.d(t,{A:()=>s});var a=n(608),i=n.n(a),r=n(305),o=n.n(r)()(i());o.push([e.id,'.image-tool {\n  margin: 1em 0;\n}\n\n.image-tool__image {\n  position: relative;\n  margin-bottom: 10px;\n}\n\n.image-tool__image img {\n  max-width: 100%;\n  vertical-align: bottom;\n}\n\n.image-tool__image--bordered img {\n  border: 1px solid #e8e8eb;\n}\n\n.image-tool__image--width-80 {\n  width: 80%;\n  margin-left: auto;\n  margin-right: auto;\n}\n\n.image-tool__caption {\n  padding: 8px 0;\n  border: 1px solid transparent;\n}\n\n.image-tool__caption[contenteditable="true"]:empty:before {\n  content: "Caption";\n  color: #707684;\n}\n\n.image-tool__caption[contenteditable="true"]:focus {\n  border-color: #e8e8eb;\n  outline: none;\n}\n\n.image-tool__url-container {\n  padding: 20px;\n  border: 1px dashed #e8e8eb;\n  text-align: center;\n  display: flex;\n  gap: 10px;\n}\n\n.image-tool__url-input {\n  flex: 1;\n  padding: 8px;\n  border: 1px solid #e8e8eb;\n  border-radius: 3px;\n}\n\n.image-tool__settings {\n  margin: 10px 0;\n  padding: 10px;\n  background: #f8f9fa;\n  border-radius: 3px;\n  display: flex;\n  gap: 10px;\n  flex-wrap: wrap;\n}\n\n.image-tool__settings input {\n  padding: 8px;\n  border: 1px solid #e8e8eb;\n  border-radius: 3px;\n  flex: 1;\n  min-width: 200px;\n}\n\n.image-tool__button {\n  padding: 8px 15px;\n  background: #34c38f;\n  color: #fff;\n  border: none;\n  border-radius: 3px;\n  cursor: pointer;\n  transition: background 0.2s ease;\n  white-space: nowrap;\n}\n\n.image-tool__button:hover {\n  background: #2ca97f;\n}\n\n.image-tool__inputs {\n  margin: 10px 0;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.image-tool__inputs input {\n  width: 100%;\n  padding: 8px;\n  border: 1px solid #e8e8eb;\n  border-radius: 3px;\n} ',""]);const s=o}},t={};function n(a){var i=t[a];if(void 0!==i)return i.exports;var r=t[a]={id:a,exports:{}};return e[a](r,r.exports,n),r.exports}n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var a in t)n.o(t,a)&&!n.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,get:t[a]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.nc=void 0;var a={};n.d(a,{R$:()=>w,Ay:()=>b,q8:()=>x});var i=n(727),r=n.n(i),o=n(156),s=n.n(o),d=n(792),l=n.n(d),c=n(735),p=n.n(c),h=n(283),u=n.n(h),g=n(128),m=n.n(g),v=n(836),f={};f.styleTagTransform=m(),f.setAttributes=p(),f.insert=l().bind(null,"head"),f.domAPI=s(),f.insertStyleElement=u(),r()(v.A,f),v.A&&v.A.locals&&v.A.locals;class w{static get toolbox(){return{title:"ImageBox",icon:'<svg width="17" height="15" viewBox="0 0 336 276" xmlns="http://www.w3.org/2000/svg"><path d="M291 150V79c0-19-15-34-34-34H79c-19 0-34 15-34 34v42l67-44 81 72 56-29 42 30zm0 52l-42-30-56 29-81-67-66 39v23c0 19 15 34 34 34h178c17 0 31-13 34-29zM79 0h178c44 0 79 35 79 79v118c0 44-35 79-79 79H79c-44 0-79-35-79-79V79C0 35 35 0 79 0z"/></svg>'}}constructor(e){let{data:t,api:n,readOnly:a}=e;this.api=n,this.readOnly=a,this.data={url:t.url||"",caption:t.caption||"",alt:t.alt||"",withBorder:void 0!==t.withBorder&&t.withBorder,withLink:t.withLink||"",stretched:void 0!==t.stretched&&t.stretched},this.nodes={wrapper:null,imageContainer:null,imageEl:null,caption:null},this.tunes=[{name:"withBorder",icon:'<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M15.8 10.592v2.043h2.35v2.138H15.8v2.232h-2.25v-2.232h-2.4v-2.138h2.4v-2.28h2.25v.237h1.15-1.15zM1.9 8.455v-3.42c0-1.154.985-2.09 2.2-2.09h4.2v2.137H4.1v3.373H1.9zm0 2.137h2.2v3.374h8.4v2.138H4.1c-1.215 0-2.2-.936-2.2-2.09v-3.422zm15.9-2.137H15.6V5.082h-4.2V2.945h4.2c1.215 0 2.2.936 2.2 2.09v3.42z"/></svg>',label:"Add border",toggle:!0,isActive:this.data.withBorder,onClick:()=>this._toggleBorder()},{name:"stretched",icon:'<svg width="17" height="10" viewBox="0 0 17 10" xmlns="http://www.w3.org/2000/svg"><path d="M13.568 5.925H4.056l1.703 1.703a1.125 1.125 0 0 1-1.59 1.591L.962 6.014A1.069 1.069 0 0 1 .588 4.26L4.38.469a1.069 1.069 0 0 1 1.512 1.511L4.084 3.787h9.606l-1.85-1.85a1.069 1.069 0 1 1 1.512-1.51l3.792 3.791a1.069 1.069 0 0 1-.475 1.788L13.514 9.16a1.125 1.125 0 0 1-1.59-1.591l1.644-1.644z"/></svg>',label:"Stretch image",toggle:!0,isActive:this.data.stretched,onClick:()=>this._toggleStretched()}]}render(){return this.nodes.wrapper=document.createElement("div"),this.nodes.wrapper.classList.add("image-tool"),this.data.url?this._createImage(this.data.url):this._showUrlInput(),this.nodes.wrapper}_createImage(e){const t=document.createElement("div");t.classList.add("image-tool__image");const n=document.createElement("img");if(n.src=e,n.alt=this.data.alt,this.data.withBorder&&t.classList.add("image-tool__image--bordered"),this.data.stretched||t.classList.add("image-tool__image--width-80"),this.data.withLink){const e=document.createElement("a");e.href=this.data.withLink,e.target="_blank",e.appendChild(n),t.appendChild(e)}else t.appendChild(n);const a=document.createElement("div");a.classList.add("image-tool__inputs");const i=document.createElement("input");i.type="text",i.placeholder="Alt text",i.value=this.data.alt,i.addEventListener("change",(e=>{this.data.alt=e.target.value,n.alt=e.target.value})),a.appendChild(i);const r=document.createElement("input");r.type="text",r.placeholder="Link URL",r.value=this.data.withLink,r.addEventListener("change",(e=>{this.data.withLink=e.target.value,this._updateLink(e.target.value)})),a.appendChild(r);const o=document.createElement("div");o.classList.add("image-tool__caption"),o.contentEditable=!this.readOnly,o.innerHTML=this.data.caption||"",this.nodes.imageContainer=t,this.nodes.imageEl=n,this.nodes.caption=o,this.nodes.wrapper.innerHTML="",this.nodes.wrapper.appendChild(t),this.nodes.wrapper.appendChild(a),this.nodes.wrapper.appendChild(o)}_showUrlInput(){const e=document.createElement("div");e.classList.add("image-tool__url-container");const t=document.createElement("input");t.type="text",t.placeholder="Paste image URL",t.classList.add("image-tool__url-input");const n=document.createElement("button");n.type="button",n.textContent="Add Image",n.classList.add("image-tool__button"),e.appendChild(t),e.appendChild(n),this.nodes.wrapper.appendChild(e),n.addEventListener("click",(()=>{const e=t.value.trim();e&&(this.data.url=e,this._createImage(e))})),t.addEventListener("keydown",(e=>{if("Enter"===e.key){const e=t.value.trim();e&&(this.data.url=e,this._createImage(e))}}))}save(){return{url:this.data.url,caption:this.nodes.caption?this.nodes.caption.innerHTML:"",alt:this.data.alt,withBorder:this.data.withBorder,withLink:this.data.withLink,stretched:this.data.stretched}}validate(e){return""!==e.url.trim()}_toggleBorder(){const{imageContainer:e}=this.nodes;this.data.withBorder=!this.data.withBorder,e.classList.toggle("image-tool__image--bordered")}_toggleStretched(){const{imageContainer:e}=this.nodes;this.data.stretched=!this.data.stretched,e.classList.toggle("image-tool__image--width-80")}_updateLink(e){const{imageContainer:t,imageEl:n}=this.nodes;if(e){const a=document.createElement("a");a.href=e,a.target="_blank",a.appendChild(n.cloneNode(!0)),t.innerHTML="",t.appendChild(a)}else t.innerHTML="",t.appendChild(n)}renderSettings(){return this.tunes.map((e=>({icon:e.icon,label:e.label,isActive:e.isActive,closeOnActivate:!1,onActivate:()=>(e.onClick(),e.isActive=!e.isActive,!1)})))}}const x={imageBox:e=>{const t=e.data;let n=["imagebox"];t.withBorder&&n.push("imagebox--with-border"),t.stretched||n.push("imagebox--width-80");let a=`<img src="${t.url}" alt="${t.alt||""}" class="${n.join(" ")}" />`;return t.withLink&&(a=`<a href="${t.withLink}" target="_blank" rel="noopener">${a}</a>`),`<figure class="imagebox-wrapper">${a}${t.caption?`<figcaption>${t.caption}</figcaption>`:""}</figure>`}},b=w;var _=a.R$,y=a.Ay,L=a.q8;export{_ as ImageBox,y as default,L as imageBoxParser};