@yoopta/image 6.0.0-beta.4 → 6.0.0-beta.5

package/dist/hooks/use-upload.d.ts

@@ -1,6 +1,6 @@
 import type { ImageDeleteOptions, ImageUploadOptions, ImageUploadPreview, UseImageDeleteReturn, UseImageUploadReturn } from '../types';
-export declare const useImageDelete: (options: ImageDeleteOptions) => UseImageDeleteReturn;
-export declare const useImageUpload: (options: ImageUploadOptions) => UseImageUploadReturn;
+export declare const useImageDelete: (options: ImageDeleteOptions | undefined) => UseImageDeleteReturn;
+export declare const useImageUpload: (options: ImageUploadOptions | undefined) => UseImageUploadReturn;
 export declare const useImageDimensions: () => {
     getDimensions: (file: File) => Promise<{
         width: number;

package/dist/hooks/use-upload.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-upload.d.ts","sourceRoot":"","sources":["../../src/hooks/use-upload.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAEV,kBAAkB,EAKlB,kBAAkB,EAClB,kBAAkB,EAKlB,oBAAoB,EACpB,oBAAoB,EACrB,MAAM,UAAU,CAAC;AAalB,eAAO,MAAM,cAAc,YAAa,kBAAkB,KAAG,oBA6F5D,CAAC;AAEF,eAAO,MAAM,cAAc,YAAa,kBAAkB,KAAG,oBA6G5D,CAAC;AAEF,eAAO,MAAM,kBAAkB;0BACA,IAAI,KAAG,QAAQ;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;CAsB/E,CAAC;AAEF,eAAO,MAAM,eAAe;;4BAGK,IAAI;;;;CAuBpC,CAAC"}
+{"version":3,"file":"use-upload.d.ts","sourceRoot":"","sources":["../../src/hooks/use-upload.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAEV,kBAAkB,EAKlB,kBAAkB,EAClB,kBAAkB,EAKlB,oBAAoB,EACpB,oBAAoB,EACrB,MAAM,UAAU,CAAC;AAmGlB,eAAO,MAAM,cAAc,YAAa,kBAAkB,GAAG,SAAS,KAAG,oBAkGxE,CAAC;AAEF,eAAO,MAAM,cAAc,YAAa,kBAAkB,GAAG,SAAS,KAAG,oBAkHxE,CAAC;AAEF,eAAO,MAAM,kBAAkB;0BACA,IAAI,KAAG,QAAQ;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;CAsB/E,CAAC;AAEF,eAAO,MAAM,eAAe;;4BAGK,IAAI;;;;CAuBpC,CAAC"}

package/dist/index.js

@@ -1 +1 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{generateId as r,Blocks as s,Elements as n,YooptaPlugin as i}from"@yoopta/editor";import{useState as o,useRef as l,useCallback as a}from"react";const d={buildImageElements:(e,t={})=>{const s=Object.assign(Object.assign({},t.props),{nodeType:"void"});return{id:r(),type:"image",children:[{text:""}],props:s}},insertImage:(e,t={})=>{const{at:r,focus:n,props:i}=t,o=d.buildImageElements(e,{props:i}),l=s.buildBlockData({value:[o],type:"Image",meta:{align:"center",depth:0}});s.insertBlock(e,l.type,{focus:n,at:r,blockData:l})},deleteImage:(e,t)=>{s.deleteBlock(e,{blockId:t})},updateImage:(e,t,r)=>{n.updateElement(e,{blockId:t,type:"image",props:r})}},c=e=>"number"==typeof e?e:parseInt(e.replace(/[^\d]/g,""),10),u={left:"flex-start",center:"center",right:"flex-end"},g=new i({type:"Image",elements:e("image",{render:r=>{var s,n;return t("div",Object.assign({},r.attributes,{contentEditable:!1},{children:[e("img",{src:r.element.props.src,alt:r.element.props.alt,width:null===(s=r.element.props.sizes)||void 0===s?void 0:s.width,height:null===(n=r.element.props.sizes)||void 0===n?void 0:n.height,style:{objectFit:r.element.props.fit}}),r.children]}))},props:{id:null,src:null,alt:null,srcSet:null,bgColor:null,fit:null,sizes:{width:0,height:0}},nodeType:"void"}),commands:d,options:{display:{title:"Image",description:"Upload from device or insert with link"},maxSizes:{maxWidth:650,maxHeight:550}},parsers:{html:{deserialize:{nodeNames:["IMG"],parse:(e,t)=>{var s;if("IMG"===e.nodeName){const n={width:e.getAttribute("width")?parseInt(e.getAttribute("width")||"650",10):650,height:e.getAttribute("height")?parseInt(e.getAttribute("height")||"500",10):500},i=null===(s=t.plugins.Image.options)||void 0===s?void 0:s.maxSizes,o=((e,t)=>{const r=c(e.width),s=c(e.height),n=c(t.width),i=c(t.height);if(r<=n&&s<=i)return{width:r,height:s};const o=r/n,l=s/i,a=Math.max(o,l),d=Math.round(r/a),u=Math.round(s/a);return{width:Math.min(d,n),height:Math.min(u,i)}})(n,{width:i.maxWidth,height:i.maxHeight}),l={id:r(),nodeType:"void",src:e.getAttribute("src")||"",alt:e.getAttribute("alt")||"",srcSet:e.getAttribute("srcset")||"",fit:e.getAttribute("objectFit")||"contain",sizes:o};return{id:r(),type:"image",children:[{text:""}],props:l}}}},serialize:(e,t,r)=>{const{align:s="center",depth:n=0}=r||{};return`<div style="margin-left: ${20*n}px; display: flex; width: 100%; justify-content: ${u[s]||"center"};">\n        <img data-meta-align="${s}" data-meta-depth="${n}" src="${e.props.src}" alt="${e.props.alt}" width="${e.props.sizes.width}" height="${e.props.sizes.height}" objectFit="${e.props.fit}"/>\n        </div>`}},markdown:{serialize:e=>`![${e.props.alt||e.id}](${e.props.src})\n`},email:{serialize:(e,t,r)=>{const{align:s="center",depth:n=0}=r||{};return`\n          <table style="width:100%;">\n            <tbody style="width:100%;">\n              <tr>\n                <td style="margin-left: ${20*n}px; display: flex; width: 100%; justify-content: ${u[s]||"center"}; margin-top: 1rem;">\n                    <img data-meta-align="${s}" style="margin: 0 auto; object-fit:${e.props.fit||"contain"};" data-meta-depth="${n}" src="${e.props.src}" alt="${e.props.alt}" width="${e.props.sizes.width}" height="${e.props.sizes.height}" />\n                </td>\n              </tr>\n            </tbody>\n          </table>\n        `}}}});function p(e,t,r,s){return new(r||(r=Promise))(function(n,i){function o(e){try{a(s.next(e))}catch(e){i(e)}}function l(e){try{a(s.throw(e))}catch(e){i(e)}}function a(e){var t;e.done?n(e.value):(t=e.value,t instanceof r?t:new r(function(e){e(t)})).then(o,l)}a((s=s.apply(e,t||[])).next())})}"function"==typeof SuppressedError&&SuppressedError;const h=({onError:e,onSuccess:t,onProgress:r,accept:s,maxSize:n,method:i="POST",endpoint:d,headers:c})=>{const[u,g]=o({loading:!1,progress:null,error:null,result:null}),p=l(null),h=a(()=>{p.current&&(p.current.abort(),p.current=null)},[]),m=a(()=>{g({loading:!1,progress:null,error:null,result:null})},[]);return Object.assign(Object.assign({},u),{xhrFetch:o=>new Promise((l,a)=>{if(o instanceof File){const t=((e,t,r)=>{if(t&&!t.includes(e.type))return{message:`Invalid file type. Allowed types: ${t}`,code:"INVALID_TYPE"};if(r&&e.size>r)return{message:`File size exceeds ${(r/1024/1024).toFixed(2)}MB`,code:"FILE_TOO_LARGE"};return null})(o,s,n);if(t)return g(e=>Object.assign(Object.assign({},e),{error:t})),null==e||e(t),void a(t)}g({loading:!0,progress:{loaded:0,total:o instanceof File?o.size:0,percentage:0},error:null,result:null});const u=new XMLHttpRequest;p.current=u,u.upload.addEventListener("progress",e=>{if(e.lengthComputable){const t={loaded:e.loaded,total:e.total,percentage:Math.round(e.loaded/e.total*100)};g(e=>Object.assign(Object.assign({},e),{progress:t})),null==r||r(t)}}),u.addEventListener("load",()=>{if(u.status>=200&&u.status<300)try{const e=JSON.parse(u.responseText);g(t=>Object.assign(Object.assign({},t),{loading:!1,result:e})),null==t||t(e),l(e)}catch(t){const r={message:"Failed to parse server response",code:"PARSE_ERROR",status:u.status};g(e=>Object.assign(Object.assign({},e),{loading:!1,error:r})),null==e||e(r),a(r)}else{const t={message:`Upload failed with status ${u.status}`,code:"HTTP_ERROR",status:u.status};g(e=>Object.assign(Object.assign({},e),{loading:!1,error:t})),null==e||e(t),a(t)}}),u.addEventListener("error",()=>{const t={message:"Network error occurred",code:"NETWORK_ERROR"};g(e=>Object.assign(Object.assign({},e),{loading:!1,error:t})),null==e||e(t),a(t)}),u.addEventListener("abort",()=>{const e={message:"Upload cancelled",code:"ABORT"};g(t=>Object.assign(Object.assign({},t),{loading:!1,error:e})),a(e)}),u.addEventListener("timeout",()=>{const t={message:"Upload timeout",code:"TIMEOUT"};g(e=>Object.assign(Object.assign({},e),{loading:!1,error:t})),null==e||e(t),a(t)}),u.open(i,d),c&&Object.entries(c).forEach(([e,t])=>{u.setRequestHeader(e,t)}),u.timeout=3e4,u.send(o)}),cancel:h,reset:m})},m=e=>{var t,r,s;const n=(e=>"function"==typeof e)(e),[i,l]=o({loading:!1,progress:null,error:null,result:null}),d=n?{endpoint:""}:e,c=h({endpoint:d.endpoint,method:null!==(t=d.method)&&void 0!==t?t:"DELETE",headers:null!==(r=d.headers)&&void 0!==r?r:{},fieldName:null!==(s=d.fieldName)&&void 0!==s?s:"file",onSuccess:d.onSuccess,onError:d.onError,onProgress:d.onProgress}),u=a(t=>p(void 0,void 0,void 0,function*(){var r,s,i;if(!n)throw new Error("Custom delete called but options is not a function");const o=null===(r=t.props)||void 0===r?void 0:r.src;if(!o)throw new Error("Image src is required");l(e=>Object.assign(Object.assign({},e),{loading:!0,error:null}));try{yield e(o);const r={id:null!==(i=null===(s=t.props)||void 0===s?void 0:s.id)&&void 0!==i?i:"",url:o};return l(e=>Object.assign(Object.assign({},e),{loading:!1,result:r})),r}catch(e){const t={message:e instanceof Error?e.message:"Delete failed",code:"CUSTOM_DELETE_ERROR"};throw l(e=>Object.assign(Object.assign({},e),{loading:!1,error:t})),t}}),[e,n]),g=a(()=>{l({loading:!1,progress:null,error:null,result:null})},[]),m=a(e=>{var t;const r=null===(t=e.props)||void 0===t?void 0:t.id;if(!r)throw new Error("FileId is required");return c.xhrFetch(JSON.stringify({fileId:r}))},[c]);return n?Object.assign(Object.assign({},i),{deleteImage:u,cancel:()=>{},reset:g}):{loading:c.loading,progress:c.progress,error:c.error,result:c.result,deleteImage:m,cancel:c.cancel,reset:c.reset}},b=e=>{var t,r,s,n;const i=(e=>"function"==typeof e)(e),[l,d]=o({loading:!1,progress:null,error:null,result:null}),c=i?{endpoint:""}:e,u=h({endpoint:c.endpoint,method:null!==(t=c.method)&&void 0!==t?t:"POST",headers:null!==(r=c.headers)&&void 0!==r?r:{},fieldName:null!==(s=c.fieldName)&&void 0!==s?s:"file",maxSize:c.maxSize,accept:null!==(n=c.accept)&&void 0!==n?n:"image/jpeg, image/jpg, image/png, image/gif, image/webp",onSuccess:c.onSuccess,onError:c.onError,onProgress:c.onProgress}),g=a(t=>p(void 0,void 0,void 0,function*(){var r,s,n,o;if(!i)throw new Error("Custom upload called but options is not a function");d(e=>Object.assign(Object.assign({},e),{loading:!0,progress:{loaded:0,total:t.size,percentage:0},error:null}));try{const i=e=>{d(t=>Object.assign(Object.assign({},t),{progress:e}))},l=yield e(t,i),a={id:null!==(r=l.id)&&void 0!==r?r:"",url:null!==(s=l.src)&&void 0!==s?s:"",width:"number"==typeof(null===(n=l.sizes)||void 0===n?void 0:n.width)?l.sizes.width:void 0,height:"number"==typeof(null===(o=l.sizes)||void 0===o?void 0:o.height)?l.sizes.height:void 0};return d(e=>Object.assign(Object.assign({},e),{loading:!1,progress:{loaded:t.size,total:t.size,percentage:100},result:a})),a}catch(e){const t={message:e instanceof Error?e.message:"Upload failed",code:"CUSTOM_UPLOAD_ERROR"};throw d(e=>Object.assign(Object.assign({},e),{loading:!1,error:t})),t}}),[e,i]),m=a(()=>{d({loading:!1,progress:null,error:null,result:null})},[]),b=a(e=>{var t;const r=new FormData;return r.append(null!==(t=c.fieldName)&&void 0!==t?t:"yoopta-image-file",e),u.xhrFetch(r)},[c.fieldName,u]);return i?Object.assign(Object.assign({},l),{upload:g,cancel:()=>{},reset:m}):{loading:u.loading,progress:u.progress,error:u.error,result:u.result,upload:b,cancel:u.cancel,reset:u.reset}},f=()=>({getDimensions:e=>new Promise((t,r)=>{const s=new Image,n=URL.createObjectURL(e);s.onload=()=>{URL.revokeObjectURL(n),t({width:s.naturalWidth,height:s.naturalHeight})},s.onerror=()=>{URL.revokeObjectURL(n),r(new Error("Failed to load image"))},s.src=n})}),v=()=>{const[e,t]=o(null);return{preview:e,generatePreview:r=>{e&&URL.revokeObjectURL(e.url);const s=URL.createObjectURL(r);return t({url:s}),{url:s}},clearPreview:()=>{e&&(URL.revokeObjectURL(e.url),t(null))}}};export{d as ImageCommands,g as default,m as useImageDelete,f as useImageDimensions,v as useImagePreview,b as useImageUpload};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{generateId as n,Blocks as o,Elements as r,YooptaPlugin as i}from"@yoopta/editor";import{useState as s,useRef as a,useCallback as l}from"react";const d={buildImageElements:(e,t={})=>{const o=Object.assign(Object.assign({},t.props),{nodeType:"void"});return{id:n(),type:"image",children:[{text:""}],props:o}},insertImage:(e,t={})=>{const{at:n,focus:r,props:i}=t,s=d.buildImageElements(e,{props:i}),a=o.buildBlockData({value:[s],type:"Image",meta:{align:"center",depth:0}});o.insertBlock(e,a.type,{focus:r,at:n,blockData:a})},deleteImage:(e,t)=>{o.deleteBlock(e,{blockId:t})},updateImage:(e,t,n)=>{r.updateElement(e,{blockId:t,type:"image",props:n})}},c=e=>"number"==typeof e?e:parseInt(e.replace(/[^\d]/g,""),10),p={left:"flex-start",center:"center",right:"flex-end"},u=new i({type:"Image",elements:e("image",{render:n=>{var o,r;return t("div",Object.assign({},n.attributes,{contentEditable:!1},{children:[e("img",{src:n.element.props.src,alt:n.element.props.alt,width:null===(o=n.element.props.sizes)||void 0===o?void 0:o.width,height:null===(r=n.element.props.sizes)||void 0===r?void 0:r.height,style:{objectFit:n.element.props.fit}}),n.children]}))},props:{id:null,src:null,alt:null,srcSet:null,bgColor:null,fit:null,sizes:{width:0,height:0}},nodeType:"void"}),commands:d,options:{display:{title:"Image",description:"Upload from device or insert with link"},maxSizes:{maxWidth:650,maxHeight:550}},parsers:{html:{deserialize:{nodeNames:["IMG"],parse:(e,t)=>{var o;if("IMG"===e.nodeName){const r={width:e.getAttribute("width")?parseInt(e.getAttribute("width")||"650",10):650,height:e.getAttribute("height")?parseInt(e.getAttribute("height")||"500",10):500},i=null===(o=t.plugins.Image.options)||void 0===o?void 0:o.maxSizes,s=((e,t)=>{const n=c(e.width),o=c(e.height),r=c(t.width),i=c(t.height);if(n<=r&&o<=i)return{width:n,height:o};const s=n/r,a=o/i,l=Math.max(s,a),d=Math.round(n/l),p=Math.round(o/l);return{width:Math.min(d,r),height:Math.min(p,i)}})(r,{width:i.maxWidth,height:i.maxHeight}),a={id:n(),nodeType:"void",src:e.getAttribute("src")||"",alt:e.getAttribute("alt")||"",srcSet:e.getAttribute("srcset")||"",fit:e.getAttribute("objectFit")||"contain",sizes:s};return{id:n(),type:"image",children:[{text:""}],props:a}}}},serialize:(e,t,n)=>{const{align:o="center",depth:r=0}=n||{};return`<div style="margin-left: ${20*r}px; display: flex; width: 100%; justify-content: ${p[o]||"center"};">\n        <img data-meta-align="${o}" data-meta-depth="${r}" src="${e.props.src}" alt="${e.props.alt}" width="${e.props.sizes.width}" height="${e.props.sizes.height}" objectFit="${e.props.fit}"/>\n        </div>`}},markdown:{serialize:e=>`![${e.props.alt||e.id}](${e.props.src})\n`},email:{serialize:(e,t,n)=>{const{align:o="center",depth:r=0}=n||{};return`\n          <table style="width:100%;">\n            <tbody style="width:100%;">\n              <tr>\n                <td style="margin-left: ${20*r}px; display: flex; width: 100%; justify-content: ${p[o]||"center"}; margin-top: 1rem;">\n                    <img data-meta-align="${o}" style="margin: 0 auto; object-fit:${e.props.fit||"contain"};" data-meta-depth="${r}" src="${e.props.src}" alt="${e.props.alt}" width="${e.props.sizes.width}" height="${e.props.sizes.height}" />\n                </td>\n              </tr>\n            </tbody>\n          </table>\n        `}}}});function g(e,t,n,o){return new(n||(n=Promise))(function(r,i){function s(e){try{l(o.next(e))}catch(e){i(e)}}function a(e){try{l(o.throw(e))}catch(e){i(e)}}function l(e){var t;e.done?r(e.value):(t=e.value,t instanceof n?t:new n(function(e){e(t)})).then(s,a)}l((o=o.apply(e,t||[])).next())})}"function"==typeof SuppressedError&&SuppressedError;const m=({onError:e,onSuccess:t,onProgress:n,accept:o,maxSize:r,method:i="POST",endpoint:d,headers:c})=>{const[p,u]=s({loading:!1,progress:null,error:null,result:null}),g=a(null),m=l(()=>{g.current&&(g.current.abort(),g.current=null)},[]),h=l(()=>{u({loading:!1,progress:null,error:null,result:null})},[]);return Object.assign(Object.assign({},p),{xhrFetch:s=>new Promise((a,l)=>{if(s instanceof File){const t=((e,t,n)=>{if(t&&!t.includes(e.type))return{message:`Invalid file type. Allowed types: ${t}`,code:"INVALID_TYPE"};if(n&&e.size>n)return{message:`File size exceeds ${(n/1024/1024).toFixed(2)}MB`,code:"FILE_TOO_LARGE"};return null})(s,o,r);if(t)return u(e=>Object.assign(Object.assign({},e),{error:t})),null==e||e(t),void l(t)}u({loading:!0,progress:{loaded:0,total:s instanceof File?s.size:0,percentage:0},error:null,result:null});const p=new XMLHttpRequest;g.current=p,p.upload.addEventListener("progress",e=>{if(e.lengthComputable){const t={loaded:e.loaded,total:e.total,percentage:Math.round(e.loaded/e.total*100)};u(e=>Object.assign(Object.assign({},e),{progress:t})),null==n||n(t)}}),p.addEventListener("load",()=>{if(p.status>=200&&p.status<300)try{const e=JSON.parse(p.responseText);u(t=>Object.assign(Object.assign({},t),{loading:!1,result:e})),null==t||t(e),a(e)}catch(t){const n={message:"Failed to parse server response",code:"PARSE_ERROR",status:p.status};u(e=>Object.assign(Object.assign({},e),{loading:!1,error:n})),null==e||e(n),l(n)}else{const t={message:`Upload failed with status ${p.status}`,code:"HTTP_ERROR",status:p.status};u(e=>Object.assign(Object.assign({},e),{loading:!1,error:t})),null==e||e(t),l(t)}}),p.addEventListener("error",()=>{const t={message:"Network error occurred",code:"NETWORK_ERROR"};u(e=>Object.assign(Object.assign({},e),{loading:!1,error:t})),null==e||e(t),l(t)}),p.addEventListener("abort",()=>{const e={message:"Upload cancelled",code:"ABORT"};u(t=>Object.assign(Object.assign({},t),{loading:!1,error:e})),l(e)}),p.addEventListener("timeout",()=>{const t={message:"Upload timeout",code:"TIMEOUT"};u(e=>Object.assign(Object.assign({},e),{loading:!1,error:t})),null==e||e(t),l(t)}),p.open(i,d),c&&Object.entries(c).forEach(([e,t])=>{p.setRequestHeader(e,t)}),p.timeout=3e4,p.send(s)}),cancel:m,reset:h})},h="https://yoopta.dev/docs/plugins/image",f=e=>{var t,n,o;(e=>{if(null==e)throw new Error(`[Yoopta Image] Delete options are not configured. Please provide 'delete' option when extending the Image plugin.\n\nExample:\nImage.extend({\n  options: {\n    delete: async (src) => {\n      // Delete file from your storage\n    },\n  },\n})\n\nSee documentation: ${h}`);if("function"!=typeof e&&"object"!=typeof e)throw new Error(`[Yoopta Image] Invalid delete options. Expected a function or endpoint configuration object.\n\nSee documentation: ${h}`);if("object"==typeof e&&!e.endpoint)throw new Error(`[Yoopta Image] Missing 'endpoint' in delete options. When using endpoint-based delete, you must provide an 'endpoint' URL.\n\nExample:\nImage.extend({\n  options: {\n    delete: {\n      endpoint: '/api/delete-image',\n    },\n  },\n})\n\nSee documentation: ${h}`)})(e);const r=e,i=(e=>"function"==typeof e)(r),[a,d]=s({loading:!1,progress:null,error:null,result:null}),c=i?{endpoint:""}:r,p=m({endpoint:c.endpoint,method:null!==(t=c.method)&&void 0!==t?t:"DELETE",headers:null!==(n=c.headers)&&void 0!==n?n:{},fieldName:null!==(o=c.fieldName)&&void 0!==o?o:"file",onSuccess:c.onSuccess,onError:c.onError,onProgress:c.onProgress}),u=l(e=>g(void 0,void 0,void 0,function*(){var t,n,o;if(!i)throw new Error("Custom delete called but options is not a function");const s=null===(t=e.props)||void 0===t?void 0:t.src;if(!s)throw new Error("Image src is required");d(e=>Object.assign(Object.assign({},e),{loading:!0,error:null}));try{yield r(s);const t={id:null!==(o=null===(n=e.props)||void 0===n?void 0:n.id)&&void 0!==o?o:"",url:s};return d(e=>Object.assign(Object.assign({},e),{loading:!1,result:t})),t}catch(e){const t={message:e instanceof Error?e.message:"Delete failed",code:"CUSTOM_DELETE_ERROR"};throw d(e=>Object.assign(Object.assign({},e),{loading:!1,error:t})),t}}),[r,i]),f=l(()=>{d({loading:!1,progress:null,error:null,result:null})},[]),b=l(e=>{var t;const n=null===(t=e.props)||void 0===t?void 0:t.id;if(!n)throw new Error("FileId is required");return p.xhrFetch(JSON.stringify({fileId:n}))},[p]);return i?Object.assign(Object.assign({},a),{deleteImage:u,cancel:()=>{},reset:f}):{loading:p.loading,progress:p.progress,error:p.error,result:p.result,deleteImage:b,cancel:p.cancel,reset:p.reset}},b=e=>{var t,n,o,r;(e=>{if(null==e)throw new Error(`[Yoopta Image] Upload options are not configured. Please provide 'upload' option when extending the Image plugin.\n\nExample:\nImage.extend({\n  options: {\n    upload: async (file) => {\n      // Upload file to your storage and return image props\n      return { id: '...', src: '...' };\n    },\n  },\n})\n\nSee documentation: ${h}`);if("function"!=typeof e&&"object"!=typeof e)throw new Error(`[Yoopta Image] Invalid upload options. Expected a function or endpoint configuration object.\n\nSee documentation: ${h}`);if("object"==typeof e&&!e.endpoint)throw new Error(`[Yoopta Image] Missing 'endpoint' in upload options. When using endpoint-based upload, you must provide an 'endpoint' URL.\n\nExample:\nImage.extend({\n  options: {\n    upload: {\n      endpoint: '/api/upload-image',\n    },\n  },\n})\n\nSee documentation: ${h}`)})(e);const i=e,a=(e=>"function"==typeof e)(i),[d,c]=s({loading:!1,progress:null,error:null,result:null}),p=a?{endpoint:""}:i,u=m({endpoint:p.endpoint,method:null!==(t=p.method)&&void 0!==t?t:"POST",headers:null!==(n=p.headers)&&void 0!==n?n:{},fieldName:null!==(o=p.fieldName)&&void 0!==o?o:"file",maxSize:p.maxSize,accept:null!==(r=p.accept)&&void 0!==r?r:"image/jpeg, image/jpg, image/png, image/gif, image/webp",onSuccess:p.onSuccess,onError:p.onError,onProgress:p.onProgress}),f=l(e=>g(void 0,void 0,void 0,function*(){var t,n,o,r;if(!a)throw new Error("Custom upload called but options is not a function");c(t=>Object.assign(Object.assign({},t),{loading:!0,progress:{loaded:0,total:e.size,percentage:0},error:null}));try{const s=e=>{c(t=>Object.assign(Object.assign({},t),{progress:e}))},a=yield i(e,s),l={id:null!==(t=a.id)&&void 0!==t?t:"",url:null!==(n=a.src)&&void 0!==n?n:"",width:"number"==typeof(null===(o=a.sizes)||void 0===o?void 0:o.width)?a.sizes.width:void 0,height:"number"==typeof(null===(r=a.sizes)||void 0===r?void 0:r.height)?a.sizes.height:void 0};return c(t=>Object.assign(Object.assign({},t),{loading:!1,progress:{loaded:e.size,total:e.size,percentage:100},result:l})),l}catch(e){const t={message:e instanceof Error?e.message:"Upload failed",code:"CUSTOM_UPLOAD_ERROR"};throw c(e=>Object.assign(Object.assign({},e),{loading:!1,error:t})),t}}),[i,a]),b=l(()=>{c({loading:!1,progress:null,error:null,result:null})},[]),v=l(e=>{var t;const n=new FormData;return n.append(null!==(t=p.fieldName)&&void 0!==t?t:"yoopta-image-file",e),u.xhrFetch(n)},[p.fieldName,u]);return a?Object.assign(Object.assign({},d),{upload:f,cancel:()=>{},reset:b}):{loading:u.loading,progress:u.progress,error:u.error,result:u.result,upload:v,cancel:u.cancel,reset:u.reset}},v=()=>({getDimensions:e=>new Promise((t,n)=>{const o=new Image,r=URL.createObjectURL(e);o.onload=()=>{URL.revokeObjectURL(r),t({width:o.naturalWidth,height:o.naturalHeight})},o.onerror=()=>{URL.revokeObjectURL(r),n(new Error("Failed to load image"))},o.src=r})}),w=()=>{const[e,t]=s(null);return{preview:e,generatePreview:n=>{e&&URL.revokeObjectURL(e.url);const o=URL.createObjectURL(n);return t({url:o}),{url:o}},clearPreview:()=>{e&&(URL.revokeObjectURL(e.url),t(null))}}};export{d as ImageCommands,u as default,f as useImageDelete,v as useImageDimensions,w as useImagePreview,b as useImageUpload};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yoopta/image",
-  "version": "6.0.0-beta.4",
+  "version": "6.0.0-beta.5",
   "description": "Image plugin for Yoopta Editor",
   "author": "Darginec05 <devopsbanda@gmail.com>",
   "homepage": "https://github.com/Darginec05/Yoopta-Editor#readme",
@@ -14,7 +14,7 @@
     "dist/"
   ],
   "peerDependencies": {
-    "@yoopta/editor": ">=4.9.9",
+    "@yoopta/editor": "6.0.0-beta.4",
     "react": ">=18.2.0",
     "react-dom": ">=18.2.0"
   },
@@ -35,5 +35,5 @@
   "bugs": {
     "url": "https://github.com/Darginec05/Yoopta-Editor/issues"
   },
-  "gitHead": "7259edee990882228148adcca6a6adafa1aa8b03"
+  "gitHead": "057e2317fa9f18704c8343af6b021c9355de4056"
 }