@electrolux-oss/sanity-plugin-media 1.0.3 → 3.0.0

package/README.md

@@ -1,11 +1,17 @@
-# Sanity Media Plugin - Electrolux Version (for Sanity Studio v3)
+# Sanity Media Plugin - Electrolux Version (for Sanity Studio v4)
 
-> This plugin is for **Sanity Studio v3**.  
+> This plugin is for **Sanity Studio v4**.  
 > This is a forked version of Sanitys own [Media Plugin (v4.0.0)](https://github.com/sanity-io/sanity-plugin-media)
 
+## :warning: Breaking changes - (v2.0.0 → v3.0.0)
+### **v2 → v3**
+
+This release upgrades the plugin’s peer dependency from **React 18** to **React 19**.  
+Projects using this plugin must update to React 19 before upgrading to v3.
+
 ## What is it?
 
-A Sanity Studio v3 plugin that extends media handling capabilities with custom enhancements, based on a fork of an original plugin by Sanity.io.
+A Sanity Studio v4 plugin that extends media handling capabilities with custom enhancements, based on a fork of an original plugin by Sanity.io.
 
 A convenient way to browse, manage and refine your [Sanity](https://www.sanity.io/) assets.
 
@@ -52,7 +58,7 @@ _Asset details tab_          |  _Asset alt texts tab_
 - Define a list of available languages to enable multi-language alt texts for assets.
 - See example of how to enable this feature [here](###plugin-config).
 
-## Install (Sanity Studio v3)
+## Install (Sanity Studio v4)
 
 In your Sanity project folder:
 
@@ -146,27 +152,39 @@ export default defineConfig({
 
 ### Test your plugin locally
 
-In the plugin directory run this command:
+**Step 1: Set up the plugin for local development**
+
+In the plugin directory, run:
 ```zsh
 npm run link-watch
 ```
 
-This will set up your plugin to build whenever the code changes, and publish the package to a local yalc repository.
+This will:
+- Build your plugin automatically whenever code changes
+- Publish the package to a local yalc repository
 
-Run the command in the studio project directory:
+**Step 2: Link the plugin to your studio**
 
+In your studio project directory, run:
 ```zsh
-npx yalc add @electrolux-oss/sanity-plugin-media && npx yalc link @electrolux-oss/sanity-plugin-media && npm install
+npx yalc add @electrolux-oss/sanity-plugin-media && npm install
 ```
 
-You should see something like this in the `package.json` file:
+**Step 3: Verify the setup**
 
+Check your studio's `package.json` - you should see:
+```json
+"@electrolux-oss/sanity-plugin-media": "file:.yalc/@electrolux-oss/sanity-plugin-media"
 ```
-"@electrolux-oss/sanity-plugin-media": "file:.yalc/@electrolux-oss/sanity-plugin-media",
+
+Now you can use the local version of the plugin:
+```typescript
+import { workflow } from '@electrolux-oss/sanity-plugin-media'
 ```
 
-Which means you can safely use the local version of the plugin with this import:
+### Making changes
 
-```
-import { media } from '@electrolux-oss/sanity-plugin-media'
-```
+When you modify the plugin code:
+1. The `link-watch` command will automatically rebuild
+2. In your studio, run `npx yalc update` to pull the latest changes
+3. Restart your dev server: `npm run dev`

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import { AssetSourceComponentProps } from 'sanity'
 import { ForwardRefExoticComponent } from 'react'
-import { JSX as JSX_2 } from 'react'
+import { JSX } from 'react'
 import { Plugin as Plugin_2 } from 'sanity'
 import { RefAttributes } from 'react'
 import { SVGProps } from 'react'
@@ -8,7 +8,7 @@ import { SVGProps } from 'react'
 export declare const media: Plugin_2<void | MediaToolOptions>
 
 export declare const mediaAssetSource: {
-  component: (props: AssetSourceComponentProps) => JSX_2.Element
+  component: (props: AssetSourceComponentProps) => JSX.Element
   icon: ForwardRefExoticComponent<
     Omit<SVGProps<SVGSVGElement>, 'ref'> & RefAttributes<SVGSVGElement>
   >

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import { AssetSourceComponentProps } from 'sanity'
 import { ForwardRefExoticComponent } from 'react'
-import { JSX as JSX_2 } from 'react'
+import { JSX } from 'react'
 import { Plugin as Plugin_2 } from 'sanity'
 import { RefAttributes } from 'react'
 import { SVGProps } from 'react'
@@ -8,7 +8,7 @@ import { SVGProps } from 'react'
 export declare const media: Plugin_2<void | MediaToolOptions>
 
 export declare const mediaAssetSource: {
-  component: (props: AssetSourceComponentProps) => JSX_2.Element
+  component: (props: AssetSourceComponentProps) => JSX.Element
   icon: ForwardRefExoticComponent<
     Omit<SVGProps<SVGSVGElement>, 'ref'> & RefAttributes<SVGSVGElement>
   >

package/dist/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: !0 });
-var jsxRuntime = require("react/jsx-runtime"), sanity = require("sanity"), icons = require("@sanity/icons"), react = require("react"), ui = require("@sanity/ui"), groq = require("groq"), reactRedux = require("react-redux"), nanoid = require("nanoid"), reduxObservable = require("redux-observable"), rxjs = require("rxjs"), operators$1 = require("rxjs/operators"), toolkit = require("@reduxjs/toolkit"), uuid = require("@sanity/uuid"), styledComponents = require("styled-components"), pluralize = require("pluralize"), reactNprogress = require("@tanem/react-nprogress"), color = require("@sanity/color"), Select = require("react-select"), reactVirtuoso = require("react-virtuoso"), reactHookForm = require("react-hook-form"), zod = require("@hookform/resolvers/zod"), z = require("zod"), format = require("date-fns/format"), filesize = require("filesize"), copy = require("copy-to-clipboard"), router = require("sanity/router"), reactFileIcon = require("react-file-icon"), CreatableSelect = require("react-select/creatable"), formatRelative = require("date-fns/formatRelative"), reactDropzone = require("react-dropzone");
+var jsxRuntime = require("react/jsx-runtime"), sanity = require("sanity"), icons = require("@sanity/icons"), react = require("react"), ui = require("@sanity/ui"), groq = require("groq"), reactRedux = require("react-redux"), nanoid = require("nanoid"), reduxObservable = require("redux-observable"), rxjs = require("rxjs"), operators$1 = require("rxjs/operators"), toolkit = require("@reduxjs/toolkit"), uuid = require("@sanity/uuid"), styledComponents = require("styled-components"), pluralize = require("pluralize"), reactNprogress = require("@tanem/react-nprogress"), color = require("@sanity/color"), Select = require("react-select"), reactVirtuoso = require("react-virtuoso"), reactHookForm = require("react-hook-form"), zod = require("@hookform/resolvers/zod"), z = require("zod"), dateFns = require("date-fns"), filesize = require("filesize"), copy = require("copy-to-clipboard"), router = require("sanity/router"), reactFileIcon = require("react-file-icon"), CreatableSelect = require("react-select/creatable"), reactDropzone = require("react-dropzone");
 function _interopDefaultCompat(e) {
   return e && typeof e == "object" && "default" in e ? e : { default: e };
 }
@@ -19,7 +19,7 @@ function _interopNamespaceCompat(e) {
     }
   }), n.default = e, Object.freeze(n);
 }
-var groq__default = /* @__PURE__ */ _interopDefaultCompat(groq), pluralize__default = /* @__PURE__ */ _interopDefaultCompat(pluralize), Select__default = /* @__PURE__ */ _interopDefaultCompat(Select), z__namespace = /* @__PURE__ */ _interopNamespaceCompat(z), format__default = /* @__PURE__ */ _interopDefaultCompat(format), filesize__default = /* @__PURE__ */ _interopDefaultCompat(filesize), copy__default = /* @__PURE__ */ _interopDefaultCompat(copy), CreatableSelect__default = /* @__PURE__ */ _interopDefaultCompat(CreatableSelect), formatRelative__default = /* @__PURE__ */ _interopDefaultCompat(formatRelative);
+var groq__default = /* @__PURE__ */ _interopDefaultCompat(groq), pluralize__default = /* @__PURE__ */ _interopDefaultCompat(pluralize), Select__default = /* @__PURE__ */ _interopDefaultCompat(Select), z__namespace = /* @__PURE__ */ _interopNamespaceCompat(z), filesize__default = /* @__PURE__ */ _interopDefaultCompat(filesize), copy__default = /* @__PURE__ */ _interopDefaultCompat(copy), CreatableSelect__default = /* @__PURE__ */ _interopDefaultCompat(CreatableSelect);
 function getDefaultExportFromCjs(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x.default : x;
 }
@@ -2788,7 +2788,7 @@ const imageDprUrl = (asset, options) => {
           Row,
           {
             label: "Original date",
-            value: format__default.default(new Date(exif.DateTimeOriginal), "PPp")
+            value: dateFns.format(new Date(exif.DateTimeOriginal), "PPp")
           }
         )
       ] }) })
@@ -3079,7 +3079,7 @@ const imageDprUrl = (asset, options) => {
     "Last updated",
     /* @__PURE__ */ jsxRuntime.jsx("br", {}),
     " ",
-    format__default.default(new Date(lastUpdated), "PPp")
+    dateFns.format(new Date(lastUpdated), "PPp")
   ] }) : content = "No unpublished changes" : content = "There are validation errors that need to be fixed before this document can be published", /* @__PURE__ */ jsxRuntime.jsx(
     ui.Tooltip,
     {
@@ -4045,7 +4045,7 @@ const imageDprUrl = (asset, options) => {
     `
 ), StyledWarningOutlineIcon = styledComponents.styled(icons.WarningFilledIcon)(({ theme }) => ({
   color: theme.sanity.color.spot.red
-})), CardAsset = (props) => {
+})), CardAsset$1 = (props) => {
   const { id, selected } = props, scheme = sanity.useColorSchemeValue(), shiftPressed = useKeyPress("shift"), dispatch = reactRedux.useDispatch(), lastPicked = useTypedSelector((state) => state.assets.lastPicked), item = useTypedSelector((state) => selectAssetById(state, id)), asset = item?.asset, error = item?.error, isOpaque = item?.asset?.metadata?.isOpaque, picked = item?.picked, updating = item?.updating, { onSelect } = useAssetSourceActions();
   if (!asset)
     return null;
@@ -4175,7 +4175,7 @@ const imageDprUrl = (asset, options) => {
     )
   ] }) });
 };
-var CardAsset$1 = react.memo(CardAsset);
+var CardAsset = react.memo(CardAsset$1);
 const PREVIEW_WIDTH = 180, createBlob = (img) => new Promise((resolve) => {
   const imageAspect = img.width / img.height, canvas = document.createElement("canvas");
   canvas.width = PREVIEW_WIDTH, canvas.height = Math.max(PREVIEW_WIDTH / imageAspect, 1);
@@ -4532,7 +4532,7 @@ const CardWrapper = styledComponents.styled(ui.Flex)`
     }
   ) });
 }, CARD_HEIGHT = 220, CARD_WIDTH = 240, VirtualCell = react.memo(
-  ({ item, selected }) => item?.type === "asset" ? /* @__PURE__ */ jsxRuntime.jsx(CardAsset$1, { id: item.id, selected }) : item?.type === "upload" ? /* @__PURE__ */ jsxRuntime.jsx(CardUpload, { id: item.id }) : null
+  ({ item, selected }) => item?.type === "asset" ? /* @__PURE__ */ jsxRuntime.jsx(CardAsset, { id: item.id, selected }) : item?.type === "upload" ? /* @__PURE__ */ jsxRuntime.jsx(CardUpload, { id: item.id }) : null
 ), StyledItemContainer = styledComponents.styled.div`
   height: ${CARD_HEIGHT}px;
   width: ${CARD_WIDTH}px;
@@ -4697,7 +4697,7 @@ const CardWrapper = styledComponents.styled(ui.Flex)`
     `
 ), StyledWarningIcon = styledComponents.styled(icons.WarningFilledIcon)(({ theme }) => ({
   color: theme.sanity.color.spot.red
-})), TableRowAsset = (props) => {
+})), TableRowAsset$1 = (props) => {
   const { id, selected } = props, scheme = sanity.useColorSchemeValue(), shiftPressed = useKeyPress("shift"), [referenceCountVisible, setReferenceCountVisible] = react.useState(!1), refCountVisibleTimeout = react.useRef(null), dispatch = reactRedux.useDispatch(), lastPicked = useTypedSelector((state) => state.assets.lastPicked), item = useTypedSelector((state) => selectAssetById(state, id)), mediaIndex = ui.useMediaIndex(), asset = item?.asset, error = item?.error, isOpaque = item?.asset?.metadata?.isOpaque, picked = item?.picked, updating = item?.updating, { onSelect } = useAssetSourceActions(), handleContextActionClick = react.useCallback(
     (e) => {
       e.stopPropagation(), asset && (onSelect ? dispatch(dialogActions.showAssetEdit({ assetId: asset._id })) : shiftPressed.current && !picked ? dispatch(assetsActions.pickRange({ startId: lastPicked || asset._id, endId: asset._id })) : dispatch(assetsActions.pick({ assetId: asset._id, picked: !picked })));
@@ -4878,7 +4878,7 @@ const CardWrapper = styledComponents.styled(ui.Flex)`
               gridRow: mediaIndex < 3 ? 4 : "auto",
               opacity: opacityCell
             },
-            children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { muted: !0, size: 1, style: { lineHeight: "2em" }, textOverflow: "ellipsis", children: formatRelative__default.default(new Date(asset._updatedAt), /* @__PURE__ */ new Date()) })
+            children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { muted: !0, size: 1, style: { lineHeight: "2em" }, textOverflow: "ellipsis", children: dateFns.formatRelative(new Date(asset._updatedAt), /* @__PURE__ */ new Date()) })
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -4923,7 +4923,7 @@ const CardWrapper = styledComponents.styled(ui.Flex)`
     }
   ) : null;
 };
-var TableRowAsset$1 = react.memo(TableRowAsset);
+var TableRowAsset = react.memo(TableRowAsset$1);
 const TableRowUpload = (props) => {
   const { id } = props, scheme = sanity.useColorSchemeValue(), dispatch = reactRedux.useDispatch(), item = useTypedSelector((state) => selectUploadById(state, id)), mediaIndex = ui.useMediaIndex();
   if (!item)
@@ -5037,7 +5037,7 @@ const TableRowUpload = (props) => {
     }
   );
 }, VirtualRow = react.memo(
-  ({ item, selected }) => item?.type === "asset" ? /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { style: { height: "100px" }, children: /* @__PURE__ */ jsxRuntime.jsx(TableRowAsset$1, { id: item.id, selected }) }) : item?.type === "upload" ? /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { style: { height: "100px" }, children: /* @__PURE__ */ jsxRuntime.jsx(TableRowUpload, { id: item.id }) }) : null
+  ({ item, selected }) => item?.type === "asset" ? /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { style: { height: "100px" }, children: /* @__PURE__ */ jsxRuntime.jsx(TableRowAsset, { id: item.id, selected }) }) : item?.type === "upload" ? /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { style: { height: "100px" }, children: /* @__PURE__ */ jsxRuntime.jsx(TableRowUpload, { id: item.id }) }) : null
 ), AssetTableVirtualized = (props) => {
   const { items, onLoadMore } = props, selectedAssets = useTypedSelector((state) => state.selected.assets), selectedIds = selectedAssets && selectedAssets.map((asset) => asset._id) || [], totalCount = items?.length;
   return totalCount === 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(