@elementor/wp-media 0.3.0 → 0.4.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Change Log
 
+## 0.4.1
+
+### Patch Changes
+
+- Updated dependencies [9ca4eab]
+  - @elementor/utils@0.3.1
+
+## 0.4.0
+
+### Minor Changes
+
+- af5fa42: Separate `getMediaAttachment` from react hook.
+
+### Patch Changes
+
+- a2f5096: support restricting uploaded image type
+
 ## 0.3.0
 
 ### Minor Changes

package/dist/index.d.mts

@@ -25,6 +25,8 @@ type Attachment = {
     }>;
 };
 
+type ImageExtension = 'avif' | 'bmp' | 'gif' | 'ico' | 'jpe' | 'jpeg' | 'jpg' | 'png' | 'svg' | 'webp';
+
 declare function useWpMediaAttachment(id: number | null): _tanstack_react_query.UseQueryResult<Attachment | null, Error>;
 
 type OpenOptions = {
@@ -32,6 +34,7 @@ type OpenOptions = {
 };
 type Options = {
     types: Array<'image' | 'image/svg+xml'>;
+    allowedExtensions?: ImageExtension[];
     title?: string;
 } & ({
     multiple: true;
@@ -46,4 +49,8 @@ declare function useWpMediaFrame(options: Options): {
     open: (openOptions?: OpenOptions) => void;
 };
 
-export { type Attachment, useWpMediaAttachment, useWpMediaFrame };
+declare function getMediaAttachment({ id }: {
+    id: number | null;
+}): Promise<Attachment | null>;
+
+export { type Attachment, type ImageExtension, getMediaAttachment, useWpMediaAttachment, useWpMediaFrame };

package/dist/index.d.ts

@@ -25,6 +25,8 @@ type Attachment = {
     }>;
 };
 
+type ImageExtension = 'avif' | 'bmp' | 'gif' | 'ico' | 'jpe' | 'jpeg' | 'jpg' | 'png' | 'svg' | 'webp';
+
 declare function useWpMediaAttachment(id: number | null): _tanstack_react_query.UseQueryResult<Attachment | null, Error>;
 
 type OpenOptions = {
@@ -32,6 +34,7 @@ type OpenOptions = {
 };
 type Options = {
     types: Array<'image' | 'image/svg+xml'>;
+    allowedExtensions?: ImageExtension[];
     title?: string;
 } & ({
     multiple: true;
@@ -46,4 +49,8 @@ declare function useWpMediaFrame(options: Options): {
     open: (openOptions?: OpenOptions) => void;
 };
 
-export { type Attachment, useWpMediaAttachment, useWpMediaFrame };
+declare function getMediaAttachment({ id }: {
+    id: number | null;
+}): Promise<Attachment | null>;
+
+export { type Attachment, type ImageExtension, getMediaAttachment, useWpMediaAttachment, useWpMediaFrame };

package/dist/index.js

@@ -20,6 +20,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  getMediaAttachment: () => getMediaAttachment,
   useWpMediaAttachment: () => useWpMediaAttachment,
   useWpMediaFrame: () => useWpMediaFrame
 });
@@ -64,15 +65,8 @@ function normalize(attachment) {
   };
 }
 
-// src/hooks/use-wp-media-attachment.ts
-function useWpMediaAttachment(id) {
-  return (0, import_query.useQuery)({
-    queryKey: ["wp-attachment", id],
-    queryFn: getAttachment,
-    enabled: !!id
-  });
-}
-async function getAttachment({ queryKey: [, id] }) {
+// src/get-media-attachment.ts
+async function getMediaAttachment({ id }) {
   if (!id) {
     return null;
   }
@@ -89,6 +83,15 @@ async function getAttachment({ queryKey: [, id] }) {
   }
 }
 
+// src/hooks/use-wp-media-attachment.ts
+function useWpMediaAttachment(id) {
+  return (0, import_query.useQuery)({
+    queryKey: ["wp-attachment", id],
+    queryFn: () => getMediaAttachment({ id }),
+    enabled: !!id
+  });
+}
+
 // src/hooks/use-wp-media-frame.ts
 var import_react = require("react");
 
@@ -102,6 +105,7 @@ var wp_plupload_settings_default = () => {
 };
 
 // src/hooks/use-wp-media-frame.ts
+var defaultImageExtensions = ["avif", "bmp", "gif", "ico", "jpe", "jpeg", "jpg", "png", "webp"];
 function useWpMediaFrame(options) {
   const frame = (0, import_react.useRef)();
   const open = (openOptions = {}) => {
@@ -118,7 +122,15 @@ function useWpMediaFrame(options) {
     open
   };
 }
-function createFrame({ onSelect, multiple, types, selected, title, mode = "browse" }) {
+function createFrame({
+  onSelect,
+  multiple,
+  types,
+  selected,
+  title,
+  mode = "browse",
+  allowedExtensions
+}) {
   const frame = media_default()({
     title,
     multiple,
@@ -130,7 +142,7 @@ function createFrame({ onSelect, multiple, types, selected, title, mode = "brows
     applyMode(frame, mode);
     applySelection(frame, selected);
   }).on("close", () => cleanupFrame(frame)).on("insert select", () => select(frame, multiple, onSelect));
-  handleSvgUpload(frame);
+  handleAllowedExtensions(frame, allowedExtensions);
   return frame;
 }
 function cleanupFrame(frame) {
@@ -152,30 +164,33 @@ function select(frame, multiple, onSelect) {
 function setTypeCaller(frame) {
   frame.uploader.uploader.param("uploadTypeCaller", "elementor-wp-media-upload");
 }
-function handleSvgUpload(frame) {
-  if (isSvgUploadEnabled()) {
-    enableSvgUpload(frame);
-  }
-}
-function isSvgUploadEnabled() {
-  const extendedWindow = window;
-  return Boolean(extendedWindow.elementorCommon.config.filesUpload.unfilteredFiles);
-}
-function enableSvgUpload(frame) {
-  const allowedMimeTypes = wp_plupload_settings_default().defaults.filters.mime_types?.[0];
-  if (!allowedMimeTypes) {
-    return;
-  }
-  const allowedExtensions = allowedMimeTypes.extensions;
+function handleAllowedExtensions(frame, allowedExtensions) {
+  const defaultExtensions = wp_plupload_settings_default().defaults.filters.mime_types?.[0]?.extensions;
   frame.on("ready", () => {
-    allowedMimeTypes.extensions = allowedExtensions + ",svg";
+    wp_plupload_settings_default().defaults.filters.mime_types = [
+      { extensions: getAllowedExtensions(allowedExtensions) }
+    ];
   });
   frame.on("close", () => {
-    wp_plupload_settings_default().defaults.filters.mime_types = [{ extensions: allowedExtensions }];
+    wp_plupload_settings_default().defaults.filters.mime_types = defaultExtensions ? [{ extensions: defaultExtensions }] : [];
   });
 }
+function getAllowedExtensions(allowedExtensions) {
+  let extensions = [...defaultImageExtensions];
+  if (allowedExtensions) {
+    extensions = allowedExtensions;
+  } else if (isUnfilteredFilesUploadEnabled()) {
+    extensions.push("svg");
+  }
+  return extensions.join(",");
+}
+function isUnfilteredFilesUploadEnabled() {
+  const extendedWindow = window;
+  return Boolean(extendedWindow.elementorCommon.config.filesUpload.unfilteredFiles);
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  getMediaAttachment,
   useWpMediaAttachment,
   useWpMediaFrame
 });

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/hooks/use-wp-media-attachment.ts","../src/errors.ts","../src/media.ts","../src/normalize.ts","../src/hooks/use-wp-media-frame.ts","../src/wp-plupload-settings.ts"],"sourcesContent":["export type { Attachment } from './types/attachment';\n\nexport { default as useWpMediaAttachment } from './hooks/use-wp-media-attachment';\nexport { default as useWpMediaFrame } from './hooks/use-wp-media-frame';\n","import { useQuery } from '@elementor/query';\n\nimport media from '../media';\nimport normalize from '../normalize';\n\nexport default function useWpMediaAttachment( id: number | null ) {\n\treturn useQuery( {\n\t\tqueryKey: [ 'wp-attachment', id ],\n\t\tqueryFn: getAttachment,\n\t\tenabled: !! id,\n\t} );\n}\n\nasync function getAttachment( { queryKey: [ , id ] }: { queryKey: [ string, number | null ] } ) {\n\tif ( ! id ) {\n\t\treturn null;\n\t}\n\n\tconst model = media().attachment( id );\n\tconst wpAttachment = model.toJSON();\n\n\tconst isFetched = 'url' in wpAttachment;\n\n\tif ( isFetched ) {\n\t\treturn normalize( wpAttachment );\n\t}\n\n\ttry {\n\t\treturn normalize( await model.fetch() );\n\t} catch {\n\t\treturn null;\n\t}\n}\n","import { createError } from '@elementor/utils';\n\nexport const WpMediaNotAvailableError = createError( {\n\tcode: 'wp_media_not_available',\n\tmessage: '`wp.media` is not available, make sure the `media-models` handle is set in the dependencies array',\n} );\n\nexport const WpPluploadSettingsNotAvailableError = createError( {\n\tcode: 'wp_plupload_settings_not_available',\n\tmessage: '`_wpPluploadSettings` is not available, make sure a wp media uploader is open',\n} );\n","import { WpMediaNotAvailableError } from './errors';\nimport { type WpMediaWindow } from './types/wp-media';\n\nconst wpMediaWindow = window as unknown as WpMediaWindow;\n\nexport default () => {\n\tif ( ! wpMediaWindow.wp?.media ) {\n\t\tthrow new WpMediaNotAvailableError();\n\t}\n\n\treturn wpMediaWindow.wp.media;\n};\n","import { type Attachment } from './types/attachment';\nimport { type WpAttachmentJSON } from './types/wp-media';\n\nexport default function normalize( attachment: WpAttachmentJSON ): Attachment {\n\tconst { filesizeInBytes, filesizeHumanReadable, author, authorName, ...rest } = attachment;\n\n\treturn {\n\t\t...rest,\n\t\tfilesize: {\n\t\t\tinBytes: filesizeInBytes,\n\t\t\thumanReadable: filesizeHumanReadable,\n\t\t},\n\t\tauthor: {\n\t\t\tid: parseInt( author ),\n\t\t\tname: authorName,\n\t\t},\n\t};\n}\n","import { useEffect, useRef } from 'react';\n\nimport media from '../media';\nimport normalize from '../normalize';\nimport { type Attachment } from '../types/attachment';\nimport { type ElementorCommonWindow } from '../types/elementor-common';\nimport { type MediaFrame } from '../types/wp-media';\nimport wpPluploadSettings from '../wp-plupload-settings';\n\ntype OpenOptions = {\n\tmode?: 'upload' | 'browse';\n};\n\ntype Options = {\n\ttypes: Array< 'image' | 'image/svg+xml' >;\n\ttitle?: string;\n} & (\n\t| {\n\t\t\tmultiple: true;\n\t\t\tselected: Array< number | null >;\n\t\t\tonSelect: ( val: Attachment[] ) => void;\n\t  }\n\t| {\n\t\t\tmultiple: false;\n\t\t\tselected: number | null;\n\t\t\tonSelect: ( val: Attachment ) => void;\n\t  }\n);\n\nexport default function useWpMediaFrame( options: Options ) {\n\tconst frame = useRef< MediaFrame >();\n\n\tconst open = ( openOptions: OpenOptions = {} ) => {\n\t\tcleanupFrame( frame.current );\n\n\t\tframe.current = createFrame( { ...options, ...openOptions } );\n\n\t\tframe.current?.open();\n\t};\n\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\tcleanupFrame( frame.current );\n\t\t};\n\t}, [] );\n\n\treturn {\n\t\topen,\n\t};\n}\n\nfunction createFrame( { onSelect, multiple, types, selected, title, mode = 'browse' }: Options & OpenOptions ) {\n\tconst frame: MediaFrame = media()( {\n\t\ttitle,\n\t\tmultiple,\n\t\tlibrary: {\n\t\t\ttype: types,\n\t\t},\n\t} )\n\t\t.on( 'open', () => {\n\t\t\tsetTypeCaller( frame );\n\t\t\tapplyMode( frame, mode );\n\t\t\tapplySelection( frame, selected );\n\t\t} )\n\t\t.on( 'close', () => cleanupFrame( frame ) )\n\t\t.on( 'insert select', () => select( frame, multiple, onSelect ) );\n\n\thandleSvgUpload( frame );\n\n\treturn frame;\n}\n\nfunction cleanupFrame( frame?: MediaFrame ) {\n\tframe?.detach();\n\tframe?.remove();\n}\n\nfunction applyMode( frame: MediaFrame, mode: OpenOptions[ 'mode' ] = 'browse' ) {\n\tframe.content.mode( mode );\n}\n\nfunction applySelection( frame: MediaFrame, selected: number | null | Array< number | null > ) {\n\tconst selectedAttachments = ( typeof selected === 'number' ? [ selected ] : selected )\n\t\t?.filter( ( id ) => !! id )\n\t\t.map( ( id ) => media().attachment( id as number ) );\n\n\tframe\n\t\t.state()\n\t\t.get( 'selection' )\n\t\t.set( selectedAttachments || [] );\n}\n\nfunction select( frame: MediaFrame, multiple: boolean, onSelect: Options[ 'onSelect' ] ) {\n\tconst attachments = frame.state().get( 'selection' ).toJSON().map( normalize );\n\n\tconst onSelectFn = onSelect as ( val: Attachment | Attachment[] ) => void;\n\n\tonSelectFn( multiple ? attachments : attachments[ 0 ] );\n}\n\nfunction setTypeCaller( frame: MediaFrame ) {\n\tframe.uploader.uploader.param( 'uploadTypeCaller', 'elementor-wp-media-upload' );\n}\n\nfunction handleSvgUpload( frame: MediaFrame ) {\n\tif ( isSvgUploadEnabled() ) {\n\t\tenableSvgUpload( frame );\n\t}\n}\n\nfunction isSvgUploadEnabled(): boolean {\n\tconst extendedWindow = window as unknown as ElementorCommonWindow;\n\n\treturn Boolean( extendedWindow.elementorCommon.config.filesUpload.unfilteredFiles );\n}\n\nfunction enableSvgUpload( frame: MediaFrame ) {\n\tconst allowedMimeTypes = wpPluploadSettings().defaults.filters.mime_types?.[ 0 ];\n\tif ( ! allowedMimeTypes ) {\n\t\treturn;\n\t}\n\n\tconst allowedExtensions = allowedMimeTypes.extensions;\n\t// Add svg to the allowed extensions\n\tframe.on( 'ready', () => {\n\t\tallowedMimeTypes.extensions = allowedExtensions + ',svg';\n\t} );\n\n\t// Restore allowed upload extensions\n\tframe.on( 'close', () => {\n\t\twpPluploadSettings().defaults.filters.mime_types = [ { extensions: allowedExtensions } ];\n\t} );\n}\n","import { WpPluploadSettingsNotAvailableError } from './errors';\nimport { type WpPluploadSettingsWindow } from './types/plupload';\n\nconst wpPluploadSettingsWindow = window as unknown as WpPluploadSettingsWindow;\n\nexport default () => {\n\tif ( ! wpPluploadSettingsWindow._wpPluploadSettings ) {\n\t\tthrow new WpPluploadSettingsNotAvailableError();\n\t}\n\n\treturn wpPluploadSettingsWindow._wpPluploadSettings;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAyB;;;ACAzB,mBAA4B;AAErB,IAAM,+BAA2B,0BAAa;AAAA,EACpD,MAAM;AAAA,EACN,SAAS;AACV,CAAE;AAEK,IAAM,0CAAsC,0BAAa;AAAA,EAC/D,MAAM;AAAA,EACN,SAAS;AACV,CAAE;;;ACPF,IAAM,gBAAgB;AAEtB,IAAO,gBAAQ,MAAM;AACpB,MAAK,CAAE,cAAc,IAAI,OAAQ;AAChC,UAAM,IAAI,yBAAyB;AAAA,EACpC;AAEA,SAAO,cAAc,GAAG;AACzB;;;ACRe,SAAR,UAA4B,YAA2C;AAC7E,QAAM,EAAE,iBAAiB,uBAAuB,QAAQ,YAAY,GAAG,KAAK,IAAI;AAEhF,SAAO;AAAA,IACN,GAAG;AAAA,IACH,UAAU;AAAA,MACT,SAAS;AAAA,MACT,eAAe;AAAA,IAChB;AAAA,IACA,QAAQ;AAAA,MACP,IAAI,SAAU,MAAO;AAAA,MACrB,MAAM;AAAA,IACP;AAAA,EACD;AACD;;;AHZe,SAAR,qBAAuC,IAAoB;AACjE,aAAO,uBAAU;AAAA,IAChB,UAAU,CAAE,iBAAiB,EAAG;AAAA,IAChC,SAAS;AAAA,IACT,SAAS,CAAC,CAAE;AAAA,EACb,CAAE;AACH;AAEA,eAAe,cAAe,EAAE,UAAU,CAAE,EAAE,EAAG,EAAE,GAA6C;AAC/F,MAAK,CAAE,IAAK;AACX,WAAO;AAAA,EACR;AAEA,QAAM,QAAQ,cAAM,EAAE,WAAY,EAAG;AACrC,QAAM,eAAe,MAAM,OAAO;AAElC,QAAM,YAAY,SAAS;AAE3B,MAAK,WAAY;AAChB,WAAO,UAAW,YAAa;AAAA,EAChC;AAEA,MAAI;AACH,WAAO,UAAW,MAAM,MAAM,MAAM,CAAE;AAAA,EACvC,QAAQ;AACP,WAAO;AAAA,EACR;AACD;;;AIhCA,mBAAkC;;;ACGlC,IAAM,2BAA2B;AAEjC,IAAO,+BAAQ,MAAM;AACpB,MAAK,CAAE,yBAAyB,qBAAsB;AACrD,UAAM,IAAI,oCAAoC;AAAA,EAC/C;AAEA,SAAO,yBAAyB;AACjC;;;ADkBe,SAAR,gBAAkC,SAAmB;AAC3D,QAAM,YAAQ,qBAAqB;AAEnC,QAAM,OAAO,CAAE,cAA2B,CAAC,MAAO;AACjD,iBAAc,MAAM,OAAQ;AAE5B,UAAM,UAAU,YAAa,EAAE,GAAG,SAAS,GAAG,YAAY,CAAE;AAE5D,UAAM,SAAS,KAAK;AAAA,EACrB;AAEA,8BAAW,MAAM;AAChB,WAAO,MAAM;AACZ,mBAAc,MAAM,OAAQ;AAAA,IAC7B;AAAA,EACD,GAAG,CAAC,CAAE;AAEN,SAAO;AAAA,IACN;AAAA,EACD;AACD;AAEA,SAAS,YAAa,EAAE,UAAU,UAAU,OAAO,UAAU,OAAO,OAAO,SAAS,GAA2B;AAC9G,QAAM,QAAoB,cAAM,EAAG;AAAA,IAClC;AAAA,IACA;AAAA,IACA,SAAS;AAAA,MACR,MAAM;AAAA,IACP;AAAA,EACD,CAAE,EACA,GAAI,QAAQ,MAAM;AAClB,kBAAe,KAAM;AACrB,cAAW,OAAO,IAAK;AACvB,mBAAgB,OAAO,QAAS;AAAA,EACjC,CAAE,EACD,GAAI,SAAS,MAAM,aAAc,KAAM,CAAE,EACzC,GAAI,iBAAiB,MAAM,OAAQ,OAAO,UAAU,QAAS,CAAE;AAEjE,kBAAiB,KAAM;AAEvB,SAAO;AACR;AAEA,SAAS,aAAc,OAAqB;AAC3C,SAAO,OAAO;AACd,SAAO,OAAO;AACf;AAEA,SAAS,UAAW,OAAmB,OAA8B,UAAW;AAC/E,QAAM,QAAQ,KAAM,IAAK;AAC1B;AAEA,SAAS,eAAgB,OAAmB,UAAmD;AAC9F,QAAM,uBAAwB,OAAO,aAAa,WAAW,CAAE,QAAS,IAAI,WACzE,OAAQ,CAAE,OAAQ,CAAC,CAAE,EAAG,EACzB,IAAK,CAAE,OAAQ,cAAM,EAAE,WAAY,EAAa,CAAE;AAEpD,QACE,MAAM,EACN,IAAK,WAAY,EACjB,IAAK,uBAAuB,CAAC,CAAE;AAClC;AAEA,SAAS,OAAQ,OAAmB,UAAmB,UAAkC;AACxF,QAAM,cAAc,MAAM,MAAM,EAAE,IAAK,WAAY,EAAE,OAAO,EAAE,IAAK,SAAU;AAE7E,QAAM,aAAa;AAEnB,aAAY,WAAW,cAAc,YAAa,CAAE,CAAE;AACvD;AAEA,SAAS,cAAe,OAAoB;AAC3C,QAAM,SAAS,SAAS,MAAO,oBAAoB,2BAA4B;AAChF;AAEA,SAAS,gBAAiB,OAAoB;AAC7C,MAAK,mBAAmB,GAAI;AAC3B,oBAAiB,KAAM;AAAA,EACxB;AACD;AAEA,SAAS,qBAA8B;AACtC,QAAM,iBAAiB;AAEvB,SAAO,QAAS,eAAe,gBAAgB,OAAO,YAAY,eAAgB;AACnF;AAEA,SAAS,gBAAiB,OAAoB;AAC7C,QAAM,mBAAmB,6BAAmB,EAAE,SAAS,QAAQ,aAAc,CAAE;AAC/E,MAAK,CAAE,kBAAmB;AACzB;AAAA,EACD;AAEA,QAAM,oBAAoB,iBAAiB;AAE3C,QAAM,GAAI,SAAS,MAAM;AACxB,qBAAiB,aAAa,oBAAoB;AAAA,EACnD,CAAE;AAGF,QAAM,GAAI,SAAS,MAAM;AACxB,iCAAmB,EAAE,SAAS,QAAQ,aAAa,CAAE,EAAE,YAAY,kBAAkB,CAAE;AAAA,EACxF,CAAE;AACH;","names":[]}
+{"version":3,"sources":["../src/index.ts","../src/hooks/use-wp-media-attachment.ts","../src/errors.ts","../src/media.ts","../src/normalize.ts","../src/get-media-attachment.ts","../src/hooks/use-wp-media-frame.ts","../src/wp-plupload-settings.ts"],"sourcesContent":["export type { Attachment } from './types/attachment';\nexport type { ImageExtension } from './types/image';\n\nexport { default as useWpMediaAttachment } from './hooks/use-wp-media-attachment';\nexport { default as useWpMediaFrame } from './hooks/use-wp-media-frame';\n\nexport { getMediaAttachment } from './get-media-attachment';\n","import { useQuery } from '@elementor/query';\n\nimport { getMediaAttachment } from '../get-media-attachment';\n\nexport default function useWpMediaAttachment( id: number | null ) {\n\treturn useQuery( {\n\t\tqueryKey: [ 'wp-attachment', id ],\n\t\tqueryFn: () => getMediaAttachment( { id } ),\n\t\tenabled: !! id,\n\t} );\n}\n","import { createError } from '@elementor/utils';\n\nexport const WpMediaNotAvailableError = createError( {\n\tcode: 'wp_media_not_available',\n\tmessage: '`wp.media` is not available, make sure the `media-models` handle is set in the dependencies array',\n} );\n\nexport const WpPluploadSettingsNotAvailableError = createError( {\n\tcode: 'wp_plupload_settings_not_available',\n\tmessage: '`_wpPluploadSettings` is not available, make sure a wp media uploader is open',\n} );\n","import { WpMediaNotAvailableError } from './errors';\nimport { type WpMediaWindow } from './types/wp-media';\n\nconst wpMediaWindow = window as unknown as WpMediaWindow;\n\nexport default () => {\n\tif ( ! wpMediaWindow.wp?.media ) {\n\t\tthrow new WpMediaNotAvailableError();\n\t}\n\n\treturn wpMediaWindow.wp.media;\n};\n","import { type Attachment } from './types/attachment';\nimport { type WpAttachmentJSON } from './types/wp-media';\n\nexport default function normalize( attachment: WpAttachmentJSON ): Attachment {\n\tconst { filesizeInBytes, filesizeHumanReadable, author, authorName, ...rest } = attachment;\n\n\treturn {\n\t\t...rest,\n\t\tfilesize: {\n\t\t\tinBytes: filesizeInBytes,\n\t\t\thumanReadable: filesizeHumanReadable,\n\t\t},\n\t\tauthor: {\n\t\t\tid: parseInt( author ),\n\t\t\tname: authorName,\n\t\t},\n\t};\n}\n","import media from './media';\nimport normalize from './normalize';\n\nexport async function getMediaAttachment( { id }: { id: number | null } ) {\n\tif ( ! id ) {\n\t\treturn null;\n\t}\n\n\tconst model = media().attachment( id );\n\tconst wpAttachment = model.toJSON();\n\n\tconst isFetched = 'url' in wpAttachment;\n\n\tif ( isFetched ) {\n\t\treturn normalize( wpAttachment );\n\t}\n\n\ttry {\n\t\treturn normalize( await model.fetch() );\n\t} catch {\n\t\treturn null;\n\t}\n}\n","import { useEffect, useRef } from 'react';\n\nimport media from '../media';\nimport normalize from '../normalize';\nimport { type Attachment } from '../types/attachment';\nimport { type ElementorCommonWindow } from '../types/elementor-common';\nimport { type ImageExtension } from '../types/image';\nimport { type MediaFrame } from '../types/wp-media';\nimport wpPluploadSettings from '../wp-plupload-settings';\n\ntype OpenOptions = {\n\tmode?: 'upload' | 'browse';\n};\n\ntype Options = {\n\ttypes: Array< 'image' | 'image/svg+xml' >;\n\tallowedExtensions?: ImageExtension[];\n\ttitle?: string;\n} & (\n\t| {\n\t\t\tmultiple: true;\n\t\t\tselected: Array< number | null >;\n\t\t\tonSelect: ( val: Attachment[] ) => void;\n\t  }\n\t| {\n\t\t\tmultiple: false;\n\t\t\tselected: number | null;\n\t\t\tonSelect: ( val: Attachment ) => void;\n\t  }\n);\n\nconst defaultImageExtensions: ImageExtension[] = [ 'avif', 'bmp', 'gif', 'ico', 'jpe', 'jpeg', 'jpg', 'png', 'webp' ];\n\nexport default function useWpMediaFrame( options: Options ) {\n\tconst frame = useRef< MediaFrame >();\n\n\tconst open = ( openOptions: OpenOptions = {} ) => {\n\t\tcleanupFrame( frame.current );\n\n\t\tframe.current = createFrame( { ...options, ...openOptions } );\n\n\t\tframe.current?.open();\n\t};\n\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\tcleanupFrame( frame.current );\n\t\t};\n\t}, [] );\n\n\treturn {\n\t\topen,\n\t};\n}\n\nfunction createFrame( {\n\tonSelect,\n\tmultiple,\n\ttypes,\n\tselected,\n\ttitle,\n\tmode = 'browse',\n\tallowedExtensions,\n}: Options & OpenOptions ) {\n\tconst frame: MediaFrame = media()( {\n\t\ttitle,\n\t\tmultiple,\n\t\tlibrary: {\n\t\t\ttype: types,\n\t\t},\n\t} )\n\t\t.on( 'open', () => {\n\t\t\tsetTypeCaller( frame );\n\t\t\tapplyMode( frame, mode );\n\t\t\tapplySelection( frame, selected );\n\t\t} )\n\t\t.on( 'close', () => cleanupFrame( frame ) )\n\t\t.on( 'insert select', () => select( frame, multiple, onSelect ) );\n\n\thandleAllowedExtensions( frame, allowedExtensions );\n\n\treturn frame;\n}\n\nfunction cleanupFrame( frame?: MediaFrame ) {\n\tframe?.detach();\n\tframe?.remove();\n}\n\nfunction applyMode( frame: MediaFrame, mode: OpenOptions[ 'mode' ] = 'browse' ) {\n\tframe.content.mode( mode );\n}\n\nfunction applySelection( frame: MediaFrame, selected: number | null | Array< number | null > ) {\n\tconst selectedAttachments = ( typeof selected === 'number' ? [ selected ] : selected )\n\t\t?.filter( ( id ) => !! id )\n\t\t.map( ( id ) => media().attachment( id as number ) );\n\n\tframe\n\t\t.state()\n\t\t.get( 'selection' )\n\t\t.set( selectedAttachments || [] );\n}\n\nfunction select( frame: MediaFrame, multiple: boolean, onSelect: Options[ 'onSelect' ] ) {\n\tconst attachments = frame.state().get( 'selection' ).toJSON().map( normalize );\n\n\tconst onSelectFn = onSelect as ( val: Attachment | Attachment[] ) => void;\n\n\tonSelectFn( multiple ? attachments : attachments[ 0 ] );\n}\n\nfunction setTypeCaller( frame: MediaFrame ) {\n\tframe.uploader.uploader.param( 'uploadTypeCaller', 'elementor-wp-media-upload' );\n}\n\nfunction handleAllowedExtensions( frame: MediaFrame, allowedExtensions?: ImageExtension[] ) {\n\tconst defaultExtensions = wpPluploadSettings().defaults.filters.mime_types?.[ 0 ]?.extensions;\n\n\t// Set the allowed extensions\n\tframe.on( 'ready', () => {\n\t\twpPluploadSettings().defaults.filters.mime_types = [\n\t\t\t{ extensions: getAllowedExtensions( allowedExtensions ) },\n\t\t];\n\t} );\n\n\t// Restore default upload extensions\n\tframe.on( 'close', () => {\n\t\twpPluploadSettings().defaults.filters.mime_types = defaultExtensions\n\t\t\t? [ { extensions: defaultExtensions } ]\n\t\t\t: [];\n\t} );\n}\n\nfunction getAllowedExtensions( allowedExtensions?: ImageExtension[] ) {\n\tlet extensions: ImageExtension[] = [ ...defaultImageExtensions ];\n\n\tif ( allowedExtensions ) {\n\t\textensions = allowedExtensions;\n\t} else if ( isUnfilteredFilesUploadEnabled() ) {\n\t\textensions.push( 'svg' );\n\t}\n\n\treturn extensions.join( ',' );\n}\n\nfunction isUnfilteredFilesUploadEnabled(): boolean {\n\tconst extendedWindow = window as unknown as ElementorCommonWindow;\n\n\treturn Boolean( extendedWindow.elementorCommon.config.filesUpload.unfilteredFiles );\n}\n","import { WpPluploadSettingsNotAvailableError } from './errors';\nimport { type WpPluploadSettingsWindow } from './types/plupload';\n\nconst wpPluploadSettingsWindow = window as unknown as WpPluploadSettingsWindow;\n\nexport default () => {\n\tif ( ! wpPluploadSettingsWindow._wpPluploadSettings ) {\n\t\tthrow new WpPluploadSettingsNotAvailableError();\n\t}\n\n\treturn wpPluploadSettingsWindow._wpPluploadSettings;\n};\n"],"mappings":"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","names":[]}

package/dist/index.mjs

@@ -37,15 +37,8 @@ function normalize(attachment) {
   };
 }
 
-// src/hooks/use-wp-media-attachment.ts
-function useWpMediaAttachment(id) {
-  return useQuery({
-    queryKey: ["wp-attachment", id],
-    queryFn: getAttachment,
-    enabled: !!id
-  });
-}
-async function getAttachment({ queryKey: [, id] }) {
+// src/get-media-attachment.ts
+async function getMediaAttachment({ id }) {
   if (!id) {
     return null;
   }
@@ -62,6 +55,15 @@ async function getAttachment({ queryKey: [, id] }) {
   }
 }
 
+// src/hooks/use-wp-media-attachment.ts
+function useWpMediaAttachment(id) {
+  return useQuery({
+    queryKey: ["wp-attachment", id],
+    queryFn: () => getMediaAttachment({ id }),
+    enabled: !!id
+  });
+}
+
 // src/hooks/use-wp-media-frame.ts
 import { useEffect, useRef } from "react";
 
@@ -75,6 +77,7 @@ var wp_plupload_settings_default = () => {
 };
 
 // src/hooks/use-wp-media-frame.ts
+var defaultImageExtensions = ["avif", "bmp", "gif", "ico", "jpe", "jpeg", "jpg", "png", "webp"];
 function useWpMediaFrame(options) {
   const frame = useRef();
   const open = (openOptions = {}) => {
@@ -91,7 +94,15 @@ function useWpMediaFrame(options) {
     open
   };
 }
-function createFrame({ onSelect, multiple, types, selected, title, mode = "browse" }) {
+function createFrame({
+  onSelect,
+  multiple,
+  types,
+  selected,
+  title,
+  mode = "browse",
+  allowedExtensions
+}) {
   const frame = media_default()({
     title,
     multiple,
@@ -103,7 +114,7 @@ function createFrame({ onSelect, multiple, types, selected, title, mode = "brows
     applyMode(frame, mode);
     applySelection(frame, selected);
   }).on("close", () => cleanupFrame(frame)).on("insert select", () => select(frame, multiple, onSelect));
-  handleSvgUpload(frame);
+  handleAllowedExtensions(frame, allowedExtensions);
   return frame;
 }
 function cleanupFrame(frame) {
@@ -125,29 +136,32 @@ function select(frame, multiple, onSelect) {
 function setTypeCaller(frame) {
   frame.uploader.uploader.param("uploadTypeCaller", "elementor-wp-media-upload");
 }
-function handleSvgUpload(frame) {
-  if (isSvgUploadEnabled()) {
-    enableSvgUpload(frame);
-  }
-}
-function isSvgUploadEnabled() {
-  const extendedWindow = window;
-  return Boolean(extendedWindow.elementorCommon.config.filesUpload.unfilteredFiles);
-}
-function enableSvgUpload(frame) {
-  const allowedMimeTypes = wp_plupload_settings_default().defaults.filters.mime_types?.[0];
-  if (!allowedMimeTypes) {
-    return;
-  }
-  const allowedExtensions = allowedMimeTypes.extensions;
+function handleAllowedExtensions(frame, allowedExtensions) {
+  const defaultExtensions = wp_plupload_settings_default().defaults.filters.mime_types?.[0]?.extensions;
   frame.on("ready", () => {
-    allowedMimeTypes.extensions = allowedExtensions + ",svg";
+    wp_plupload_settings_default().defaults.filters.mime_types = [
+      { extensions: getAllowedExtensions(allowedExtensions) }
+    ];
   });
   frame.on("close", () => {
-    wp_plupload_settings_default().defaults.filters.mime_types = [{ extensions: allowedExtensions }];
+    wp_plupload_settings_default().defaults.filters.mime_types = defaultExtensions ? [{ extensions: defaultExtensions }] : [];
   });
 }
+function getAllowedExtensions(allowedExtensions) {
+  let extensions = [...defaultImageExtensions];
+  if (allowedExtensions) {
+    extensions = allowedExtensions;
+  } else if (isUnfilteredFilesUploadEnabled()) {
+    extensions.push("svg");
+  }
+  return extensions.join(",");
+}
+function isUnfilteredFilesUploadEnabled() {
+  const extendedWindow = window;
+  return Boolean(extendedWindow.elementorCommon.config.filesUpload.unfilteredFiles);
+}
 export {
+  getMediaAttachment,
   useWpMediaAttachment,
   useWpMediaFrame
 };

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/use-wp-media-attachment.ts","../src/errors.ts","../src/media.ts","../src/normalize.ts","../src/hooks/use-wp-media-frame.ts","../src/wp-plupload-settings.ts"],"sourcesContent":["import { useQuery } from '@elementor/query';\n\nimport media from '../media';\nimport normalize from '../normalize';\n\nexport default function useWpMediaAttachment( id: number | null ) {\n\treturn useQuery( {\n\t\tqueryKey: [ 'wp-attachment', id ],\n\t\tqueryFn: getAttachment,\n\t\tenabled: !! id,\n\t} );\n}\n\nasync function getAttachment( { queryKey: [ , id ] }: { queryKey: [ string, number | null ] } ) {\n\tif ( ! id ) {\n\t\treturn null;\n\t}\n\n\tconst model = media().attachment( id );\n\tconst wpAttachment = model.toJSON();\n\n\tconst isFetched = 'url' in wpAttachment;\n\n\tif ( isFetched ) {\n\t\treturn normalize( wpAttachment );\n\t}\n\n\ttry {\n\t\treturn normalize( await model.fetch() );\n\t} catch {\n\t\treturn null;\n\t}\n}\n","import { createError } from '@elementor/utils';\n\nexport const WpMediaNotAvailableError = createError( {\n\tcode: 'wp_media_not_available',\n\tmessage: '`wp.media` is not available, make sure the `media-models` handle is set in the dependencies array',\n} );\n\nexport const WpPluploadSettingsNotAvailableError = createError( {\n\tcode: 'wp_plupload_settings_not_available',\n\tmessage: '`_wpPluploadSettings` is not available, make sure a wp media uploader is open',\n} );\n","import { WpMediaNotAvailableError } from './errors';\nimport { type WpMediaWindow } from './types/wp-media';\n\nconst wpMediaWindow = window as unknown as WpMediaWindow;\n\nexport default () => {\n\tif ( ! wpMediaWindow.wp?.media ) {\n\t\tthrow new WpMediaNotAvailableError();\n\t}\n\n\treturn wpMediaWindow.wp.media;\n};\n","import { type Attachment } from './types/attachment';\nimport { type WpAttachmentJSON } from './types/wp-media';\n\nexport default function normalize( attachment: WpAttachmentJSON ): Attachment {\n\tconst { filesizeInBytes, filesizeHumanReadable, author, authorName, ...rest } = attachment;\n\n\treturn {\n\t\t...rest,\n\t\tfilesize: {\n\t\t\tinBytes: filesizeInBytes,\n\t\t\thumanReadable: filesizeHumanReadable,\n\t\t},\n\t\tauthor: {\n\t\t\tid: parseInt( author ),\n\t\t\tname: authorName,\n\t\t},\n\t};\n}\n","import { useEffect, useRef } from 'react';\n\nimport media from '../media';\nimport normalize from '../normalize';\nimport { type Attachment } from '../types/attachment';\nimport { type ElementorCommonWindow } from '../types/elementor-common';\nimport { type MediaFrame } from '../types/wp-media';\nimport wpPluploadSettings from '../wp-plupload-settings';\n\ntype OpenOptions = {\n\tmode?: 'upload' | 'browse';\n};\n\ntype Options = {\n\ttypes: Array< 'image' | 'image/svg+xml' >;\n\ttitle?: string;\n} & (\n\t| {\n\t\t\tmultiple: true;\n\t\t\tselected: Array< number | null >;\n\t\t\tonSelect: ( val: Attachment[] ) => void;\n\t  }\n\t| {\n\t\t\tmultiple: false;\n\t\t\tselected: number | null;\n\t\t\tonSelect: ( val: Attachment ) => void;\n\t  }\n);\n\nexport default function useWpMediaFrame( options: Options ) {\n\tconst frame = useRef< MediaFrame >();\n\n\tconst open = ( openOptions: OpenOptions = {} ) => {\n\t\tcleanupFrame( frame.current );\n\n\t\tframe.current = createFrame( { ...options, ...openOptions } );\n\n\t\tframe.current?.open();\n\t};\n\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\tcleanupFrame( frame.current );\n\t\t};\n\t}, [] );\n\n\treturn {\n\t\topen,\n\t};\n}\n\nfunction createFrame( { onSelect, multiple, types, selected, title, mode = 'browse' }: Options & OpenOptions ) {\n\tconst frame: MediaFrame = media()( {\n\t\ttitle,\n\t\tmultiple,\n\t\tlibrary: {\n\t\t\ttype: types,\n\t\t},\n\t} )\n\t\t.on( 'open', () => {\n\t\t\tsetTypeCaller( frame );\n\t\t\tapplyMode( frame, mode );\n\t\t\tapplySelection( frame, selected );\n\t\t} )\n\t\t.on( 'close', () => cleanupFrame( frame ) )\n\t\t.on( 'insert select', () => select( frame, multiple, onSelect ) );\n\n\thandleSvgUpload( frame );\n\n\treturn frame;\n}\n\nfunction cleanupFrame( frame?: MediaFrame ) {\n\tframe?.detach();\n\tframe?.remove();\n}\n\nfunction applyMode( frame: MediaFrame, mode: OpenOptions[ 'mode' ] = 'browse' ) {\n\tframe.content.mode( mode );\n}\n\nfunction applySelection( frame: MediaFrame, selected: number | null | Array< number | null > ) {\n\tconst selectedAttachments = ( typeof selected === 'number' ? [ selected ] : selected )\n\t\t?.filter( ( id ) => !! id )\n\t\t.map( ( id ) => media().attachment( id as number ) );\n\n\tframe\n\t\t.state()\n\t\t.get( 'selection' )\n\t\t.set( selectedAttachments || [] );\n}\n\nfunction select( frame: MediaFrame, multiple: boolean, onSelect: Options[ 'onSelect' ] ) {\n\tconst attachments = frame.state().get( 'selection' ).toJSON().map( normalize );\n\n\tconst onSelectFn = onSelect as ( val: Attachment | Attachment[] ) => void;\n\n\tonSelectFn( multiple ? attachments : attachments[ 0 ] );\n}\n\nfunction setTypeCaller( frame: MediaFrame ) {\n\tframe.uploader.uploader.param( 'uploadTypeCaller', 'elementor-wp-media-upload' );\n}\n\nfunction handleSvgUpload( frame: MediaFrame ) {\n\tif ( isSvgUploadEnabled() ) {\n\t\tenableSvgUpload( frame );\n\t}\n}\n\nfunction isSvgUploadEnabled(): boolean {\n\tconst extendedWindow = window as unknown as ElementorCommonWindow;\n\n\treturn Boolean( extendedWindow.elementorCommon.config.filesUpload.unfilteredFiles );\n}\n\nfunction enableSvgUpload( frame: MediaFrame ) {\n\tconst allowedMimeTypes = wpPluploadSettings().defaults.filters.mime_types?.[ 0 ];\n\tif ( ! allowedMimeTypes ) {\n\t\treturn;\n\t}\n\n\tconst allowedExtensions = allowedMimeTypes.extensions;\n\t// Add svg to the allowed extensions\n\tframe.on( 'ready', () => {\n\t\tallowedMimeTypes.extensions = allowedExtensions + ',svg';\n\t} );\n\n\t// Restore allowed upload extensions\n\tframe.on( 'close', () => {\n\t\twpPluploadSettings().defaults.filters.mime_types = [ { extensions: allowedExtensions } ];\n\t} );\n}\n","import { WpPluploadSettingsNotAvailableError } from './errors';\nimport { type WpPluploadSettingsWindow } from './types/plupload';\n\nconst wpPluploadSettingsWindow = window as unknown as WpPluploadSettingsWindow;\n\nexport default () => {\n\tif ( ! wpPluploadSettingsWindow._wpPluploadSettings ) {\n\t\tthrow new WpPluploadSettingsNotAvailableError();\n\t}\n\n\treturn wpPluploadSettingsWindow._wpPluploadSettings;\n};\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/hooks/use-wp-media-attachment.ts","../src/errors.ts","../src/media.ts","../src/normalize.ts","../src/get-media-attachment.ts","../src/hooks/use-wp-media-frame.ts","../src/wp-plupload-settings.ts"],"sourcesContent":["import { useQuery } from '@elementor/query';\n\nimport { getMediaAttachment } from '../get-media-attachment';\n\nexport default function useWpMediaAttachment( id: number | null ) {\n\treturn useQuery( {\n\t\tqueryKey: [ 'wp-attachment', id ],\n\t\tqueryFn: () => getMediaAttachment( { id } ),\n\t\tenabled: !! id,\n\t} );\n}\n","import { createError } from '@elementor/utils';\n\nexport const WpMediaNotAvailableError = createError( {\n\tcode: 'wp_media_not_available',\n\tmessage: '`wp.media` is not available, make sure the `media-models` handle is set in the dependencies array',\n} );\n\nexport const WpPluploadSettingsNotAvailableError = createError( {\n\tcode: 'wp_plupload_settings_not_available',\n\tmessage: '`_wpPluploadSettings` is not available, make sure a wp media uploader is open',\n} );\n","import { WpMediaNotAvailableError } from './errors';\nimport { type WpMediaWindow } from './types/wp-media';\n\nconst wpMediaWindow = window as unknown as WpMediaWindow;\n\nexport default () => {\n\tif ( ! wpMediaWindow.wp?.media ) {\n\t\tthrow new WpMediaNotAvailableError();\n\t}\n\n\treturn wpMediaWindow.wp.media;\n};\n","import { type Attachment } from './types/attachment';\nimport { type WpAttachmentJSON } from './types/wp-media';\n\nexport default function normalize( attachment: WpAttachmentJSON ): Attachment {\n\tconst { filesizeInBytes, filesizeHumanReadable, author, authorName, ...rest } = attachment;\n\n\treturn {\n\t\t...rest,\n\t\tfilesize: {\n\t\t\tinBytes: filesizeInBytes,\n\t\t\thumanReadable: filesizeHumanReadable,\n\t\t},\n\t\tauthor: {\n\t\t\tid: parseInt( author ),\n\t\t\tname: authorName,\n\t\t},\n\t};\n}\n","import media from './media';\nimport normalize from './normalize';\n\nexport async function getMediaAttachment( { id }: { id: number | null } ) {\n\tif ( ! id ) {\n\t\treturn null;\n\t}\n\n\tconst model = media().attachment( id );\n\tconst wpAttachment = model.toJSON();\n\n\tconst isFetched = 'url' in wpAttachment;\n\n\tif ( isFetched ) {\n\t\treturn normalize( wpAttachment );\n\t}\n\n\ttry {\n\t\treturn normalize( await model.fetch() );\n\t} catch {\n\t\treturn null;\n\t}\n}\n","import { useEffect, useRef } from 'react';\n\nimport media from '../media';\nimport normalize from '../normalize';\nimport { type Attachment } from '../types/attachment';\nimport { type ElementorCommonWindow } from '../types/elementor-common';\nimport { type ImageExtension } from '../types/image';\nimport { type MediaFrame } from '../types/wp-media';\nimport wpPluploadSettings from '../wp-plupload-settings';\n\ntype OpenOptions = {\n\tmode?: 'upload' | 'browse';\n};\n\ntype Options = {\n\ttypes: Array< 'image' | 'image/svg+xml' >;\n\tallowedExtensions?: ImageExtension[];\n\ttitle?: string;\n} & (\n\t| {\n\t\t\tmultiple: true;\n\t\t\tselected: Array< number | null >;\n\t\t\tonSelect: ( val: Attachment[] ) => void;\n\t  }\n\t| {\n\t\t\tmultiple: false;\n\t\t\tselected: number | null;\n\t\t\tonSelect: ( val: Attachment ) => void;\n\t  }\n);\n\nconst defaultImageExtensions: ImageExtension[] = [ 'avif', 'bmp', 'gif', 'ico', 'jpe', 'jpeg', 'jpg', 'png', 'webp' ];\n\nexport default function useWpMediaFrame( options: Options ) {\n\tconst frame = useRef< MediaFrame >();\n\n\tconst open = ( openOptions: OpenOptions = {} ) => {\n\t\tcleanupFrame( frame.current );\n\n\t\tframe.current = createFrame( { ...options, ...openOptions } );\n\n\t\tframe.current?.open();\n\t};\n\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\tcleanupFrame( frame.current );\n\t\t};\n\t}, [] );\n\n\treturn {\n\t\topen,\n\t};\n}\n\nfunction createFrame( {\n\tonSelect,\n\tmultiple,\n\ttypes,\n\tselected,\n\ttitle,\n\tmode = 'browse',\n\tallowedExtensions,\n}: Options & OpenOptions ) {\n\tconst frame: MediaFrame = media()( {\n\t\ttitle,\n\t\tmultiple,\n\t\tlibrary: {\n\t\t\ttype: types,\n\t\t},\n\t} )\n\t\t.on( 'open', () => {\n\t\t\tsetTypeCaller( frame );\n\t\t\tapplyMode( frame, mode );\n\t\t\tapplySelection( frame, selected );\n\t\t} )\n\t\t.on( 'close', () => cleanupFrame( frame ) )\n\t\t.on( 'insert select', () => select( frame, multiple, onSelect ) );\n\n\thandleAllowedExtensions( frame, allowedExtensions );\n\n\treturn frame;\n}\n\nfunction cleanupFrame( frame?: MediaFrame ) {\n\tframe?.detach();\n\tframe?.remove();\n}\n\nfunction applyMode( frame: MediaFrame, mode: OpenOptions[ 'mode' ] = 'browse' ) {\n\tframe.content.mode( mode );\n}\n\nfunction applySelection( frame: MediaFrame, selected: number | null | Array< number | null > ) {\n\tconst selectedAttachments = ( typeof selected === 'number' ? [ selected ] : selected )\n\t\t?.filter( ( id ) => !! id )\n\t\t.map( ( id ) => media().attachment( id as number ) );\n\n\tframe\n\t\t.state()\n\t\t.get( 'selection' )\n\t\t.set( selectedAttachments || [] );\n}\n\nfunction select( frame: MediaFrame, multiple: boolean, onSelect: Options[ 'onSelect' ] ) {\n\tconst attachments = frame.state().get( 'selection' ).toJSON().map( normalize );\n\n\tconst onSelectFn = onSelect as ( val: Attachment | Attachment[] ) => void;\n\n\tonSelectFn( multiple ? attachments : attachments[ 0 ] );\n}\n\nfunction setTypeCaller( frame: MediaFrame ) {\n\tframe.uploader.uploader.param( 'uploadTypeCaller', 'elementor-wp-media-upload' );\n}\n\nfunction handleAllowedExtensions( frame: MediaFrame, allowedExtensions?: ImageExtension[] ) {\n\tconst defaultExtensions = wpPluploadSettings().defaults.filters.mime_types?.[ 0 ]?.extensions;\n\n\t// Set the allowed extensions\n\tframe.on( 'ready', () => {\n\t\twpPluploadSettings().defaults.filters.mime_types = [\n\t\t\t{ extensions: getAllowedExtensions( allowedExtensions ) },\n\t\t];\n\t} );\n\n\t// Restore default upload extensions\n\tframe.on( 'close', () => {\n\t\twpPluploadSettings().defaults.filters.mime_types = defaultExtensions\n\t\t\t? [ { extensions: defaultExtensions } ]\n\t\t\t: [];\n\t} );\n}\n\nfunction getAllowedExtensions( allowedExtensions?: ImageExtension[] ) {\n\tlet extensions: ImageExtension[] = [ ...defaultImageExtensions ];\n\n\tif ( allowedExtensions ) {\n\t\textensions = allowedExtensions;\n\t} else if ( isUnfilteredFilesUploadEnabled() ) {\n\t\textensions.push( 'svg' );\n\t}\n\n\treturn extensions.join( ',' );\n}\n\nfunction isUnfilteredFilesUploadEnabled(): boolean {\n\tconst extendedWindow = window as unknown as ElementorCommonWindow;\n\n\treturn Boolean( extendedWindow.elementorCommon.config.filesUpload.unfilteredFiles );\n}\n","import { WpPluploadSettingsNotAvailableError } from './errors';\nimport { type WpPluploadSettingsWindow } from './types/plupload';\n\nconst wpPluploadSettingsWindow = window as unknown as WpPluploadSettingsWindow;\n\nexport default () => {\n\tif ( ! wpPluploadSettingsWindow._wpPluploadSettings ) {\n\t\tthrow new WpPluploadSettingsNotAvailableError();\n\t}\n\n\treturn wpPluploadSettingsWindow._wpPluploadSettings;\n};\n"],"mappings":"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","names":[]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/wp-media",
   "description": "An adapter for WordPress' media utils",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -41,9 +41,12 @@
   },
   "dependencies": {
     "@elementor/query": "0.2.4",
-    "@elementor/utils": "0.3.0"
+    "@elementor/utils": "0.3.1"
   },
   "peerDependencies": {
     "react": "^18.3.1"
+  },
+  "devDependencies": {
+    "tsup": "^8.3.5"
   }
 }

package/src/get-media-attachment.ts

@@ -0,0 +1,23 @@
+import media from './media';
+import normalize from './normalize';
+
+export async function getMediaAttachment( { id }: { id: number | null } ) {
+	if ( ! id ) {
+		return null;
+	}
+
+	const model = media().attachment( id );
+	const wpAttachment = model.toJSON();
+
+	const isFetched = 'url' in wpAttachment;
+
+	if ( isFetched ) {
+		return normalize( wpAttachment );
+	}
+
+	try {
+		return normalize( await model.fetch() );
+	} catch {
+		return null;
+	}
+}

package/src/hooks/use-wp-media-attachment.ts

@@ -1,33 +1,11 @@
 import { useQuery } from '@elementor/query';
 
-import media from '../media';
-import normalize from '../normalize';
+import { getMediaAttachment } from '../get-media-attachment';
 
 export default function useWpMediaAttachment( id: number | null ) {
 	return useQuery( {
 		queryKey: [ 'wp-attachment', id ],
-		queryFn: getAttachment,
+		queryFn: () => getMediaAttachment( { id } ),
 		enabled: !! id,
 	} );
 }
-
-async function getAttachment( { queryKey: [ , id ] }: { queryKey: [ string, number | null ] } ) {
-	if ( ! id ) {
-		return null;
-	}
-
-	const model = media().attachment( id );
-	const wpAttachment = model.toJSON();
-
-	const isFetched = 'url' in wpAttachment;
-
-	if ( isFetched ) {
-		return normalize( wpAttachment );
-	}
-
-	try {
-		return normalize( await model.fetch() );
-	} catch {
-		return null;
-	}
-}

package/src/hooks/use-wp-media-frame.ts

@@ -4,6 +4,7 @@ import media from '../media';
 import normalize from '../normalize';
 import { type Attachment } from '../types/attachment';
 import { type ElementorCommonWindow } from '../types/elementor-common';
+import { type ImageExtension } from '../types/image';
 import { type MediaFrame } from '../types/wp-media';
 import wpPluploadSettings from '../wp-plupload-settings';
 
@@ -13,6 +14,7 @@ type OpenOptions = {
 
 type Options = {
 	types: Array< 'image' | 'image/svg+xml' >;
+	allowedExtensions?: ImageExtension[];
 	title?: string;
 } & (
 	| {
@@ -27,6 +29,8 @@ type Options = {
 	  }
 );
 
+const defaultImageExtensions: ImageExtension[] = [ 'avif', 'bmp', 'gif', 'ico', 'jpe', 'jpeg', 'jpg', 'png', 'webp' ];
+
 export default function useWpMediaFrame( options: Options ) {
 	const frame = useRef< MediaFrame >();
 
@@ -49,7 +53,15 @@ export default function useWpMediaFrame( options: Options ) {
 	};
 }
 
-function createFrame( { onSelect, multiple, types, selected, title, mode = 'browse' }: Options & OpenOptions ) {
+function createFrame( {
+	onSelect,
+	multiple,
+	types,
+	selected,
+	title,
+	mode = 'browse',
+	allowedExtensions,
+}: Options & OpenOptions ) {
 	const frame: MediaFrame = media()( {
 		title,
 		multiple,
@@ -65,7 +77,7 @@ function createFrame( { onSelect, multiple, types, selected, title, mode = 'brow
 		.on( 'close', () => cleanupFrame( frame ) )
 		.on( 'insert select', () => select( frame, multiple, onSelect ) );
 
-	handleSvgUpload( frame );
+	handleAllowedExtensions( frame, allowedExtensions );
 
 	return frame;
 }
@@ -102,32 +114,38 @@ function setTypeCaller( frame: MediaFrame ) {
 	frame.uploader.uploader.param( 'uploadTypeCaller', 'elementor-wp-media-upload' );
 }
 
-function handleSvgUpload( frame: MediaFrame ) {
-	if ( isSvgUploadEnabled() ) {
-		enableSvgUpload( frame );
-	}
-}
+function handleAllowedExtensions( frame: MediaFrame, allowedExtensions?: ImageExtension[] ) {
+	const defaultExtensions = wpPluploadSettings().defaults.filters.mime_types?.[ 0 ]?.extensions;
 
-function isSvgUploadEnabled(): boolean {
-	const extendedWindow = window as unknown as ElementorCommonWindow;
+	// Set the allowed extensions
+	frame.on( 'ready', () => {
+		wpPluploadSettings().defaults.filters.mime_types = [
+			{ extensions: getAllowedExtensions( allowedExtensions ) },
+		];
+	} );
 
-	return Boolean( extendedWindow.elementorCommon.config.filesUpload.unfilteredFiles );
+	// Restore default upload extensions
+	frame.on( 'close', () => {
+		wpPluploadSettings().defaults.filters.mime_types = defaultExtensions
+			? [ { extensions: defaultExtensions } ]
+			: [];
+	} );
 }
 
-function enableSvgUpload( frame: MediaFrame ) {
-	const allowedMimeTypes = wpPluploadSettings().defaults.filters.mime_types?.[ 0 ];
-	if ( ! allowedMimeTypes ) {
-		return;
+function getAllowedExtensions( allowedExtensions?: ImageExtension[] ) {
+	let extensions: ImageExtension[] = [ ...defaultImageExtensions ];
+
+	if ( allowedExtensions ) {
+		extensions = allowedExtensions;
+	} else if ( isUnfilteredFilesUploadEnabled() ) {
+		extensions.push( 'svg' );
 	}
 
-	const allowedExtensions = allowedMimeTypes.extensions;
-	// Add svg to the allowed extensions
-	frame.on( 'ready', () => {
-		allowedMimeTypes.extensions = allowedExtensions + ',svg';
-	} );
+	return extensions.join( ',' );
+}
 
-	// Restore allowed upload extensions
-	frame.on( 'close', () => {
-		wpPluploadSettings().defaults.filters.mime_types = [ { extensions: allowedExtensions } ];
-	} );
+function isUnfilteredFilesUploadEnabled(): boolean {
+	const extendedWindow = window as unknown as ElementorCommonWindow;
+
+	return Boolean( extendedWindow.elementorCommon.config.filesUpload.unfilteredFiles );
 }

package/src/index.ts

@@ -1,4 +1,7 @@
 export type { Attachment } from './types/attachment';
+export type { ImageExtension } from './types/image';
 
 export { default as useWpMediaAttachment } from './hooks/use-wp-media-attachment';
 export { default as useWpMediaFrame } from './hooks/use-wp-media-frame';
+
+export { getMediaAttachment } from './get-media-attachment';

package/src/types/image.ts

@@ -0,0 +1 @@
+export type ImageExtension = 'avif' | 'bmp' | 'gif' | 'ico' | 'jpe' | 'jpeg' | 'jpg' | 'png' | 'svg' | 'webp';