sanity-plugin-media 4.2.0 → 4.3.0

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"), ui = require("@sanity/ui"), react = require("react"), groq = require("groq"), reactRedux = require("react-redux"), toolkit = require("@reduxjs/toolkit"), nanoid = require("nanoid"), reduxObservable = require("redux-observable"), rxjs = require("rxjs"), operators$1 = require("rxjs/operators"), 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"), zod = require("@hookform/resolvers/zod"), reactHookForm = require("react-hook-form"), 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");
+var jsxRuntime = require("react/jsx-runtime"), sanity = require("sanity"), icons = require("@sanity/icons"), ui = require("@sanity/ui"), react = require("react"), styledComponents = require("styled-components"), reactRedux = require("react-redux"), toolkit = require("@reduxjs/toolkit"), pluralize = require("pluralize"), reduxObservable = require("redux-observable"), rxjs = require("rxjs"), operators$1 = require("rxjs/operators"), groq = require("groq"), nanoid = require("nanoid"), uuid = require("@sanity/uuid"), reactNprogress = require("@tanem/react-nprogress"), color = require("@sanity/color"), Select = require("react-select"), reactVirtuoso = require("react-virtuoso"), zod = require("@hookform/resolvers/zod"), reactHookForm = require("react-hook-form"), 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), filesize__default = /* @__PURE__ */ _interopDefaultCompat(filesize), copy__default = /* @__PURE__ */ _interopDefaultCompat(copy), CreatableSelect__default = /* @__PURE__ */ _interopDefaultCompat(CreatableSelect);
+var pluralize__default = /* @__PURE__ */ _interopDefaultCompat(pluralize), groq__default = /* @__PURE__ */ _interopDefaultCompat(groq), 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;
 }
@@ -169,7 +169,71 @@ const useKeyPress = (hotkey, onPress) => {
   return react.useEffect(() => (window.addEventListener("keydown", downHandler), window.addEventListener("keyup", upHandler), () => {
     window.removeEventListener("keydown", downHandler), window.removeEventListener("keyup", upHandler);
   }), [downHandler, upHandler]), keyPressed;
-}, divider = { type: "divider" }, inputs = {
+}, AssetSourceDispatchContext = react.createContext(void 0), AssetBrowserDispatchProvider = (props) => {
+  const { children, onSelect } = props, contextValue = {
+    onSelect
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(AssetSourceDispatchContext.Provider, { value: contextValue, children });
+}, useAssetSourceActions = () => {
+  const context = react.useContext(AssetSourceDispatchContext);
+  if (context === void 0)
+    throw new Error("useAssetSourceActions must be used within an AssetSourceDispatchProvider");
+  return context;
+}, useVersionedClient = () => sanity.useClient({ apiVersion: "2025-10-02" }), customScrollbar = styledComponents.css`
+  ::-webkit-scrollbar {
+    width: 14px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    border: 4px solid rgba(0, 0, 0, 0);
+    background: var(--card-border-color);
+    background-clip: padding-box;
+
+    &:hover {
+      background: var(--card-muted-fg-color);
+      background-clip: padding-box;
+    }
+  }
+`, GlobalStyle = styledComponents.createGlobalStyle`
+  .media__custom-scrollbar {
+    ${customScrollbar}
+  }
+
+  // @sanity/ui overrides
+
+  // Custom scrollbar on Box (used in Dialogs)
+  div[data-ui="Box"] {
+    ${customScrollbar}
+  }
+
+  // Dialog background color
+  div[data-ui="Dialog"] {
+    background-color: rgba(15, 17, 18, 0.9);
+  }
+
+`, useTypedSelector = reactRedux.useSelector, ORDER_DICTIONARY = {
+  _createdAt: {
+    asc: "Last created: Oldest first",
+    desc: "Last created: Newest first"
+  },
+  _updatedAt: {
+    asc: "Last updated: Oldest first",
+    desc: "Last updated: Newest first"
+  },
+  mimeType: {
+    asc: "MIME type: A to Z",
+    desc: "MIME type: Z to A"
+  },
+  originalFilename: {
+    asc: "File name: A to Z",
+    desc: "File name: Z to A"
+  },
+  size: {
+    asc: "File size: Smallest first",
+    desc: "File size: Largest first"
+  }
+}, getOrderTitle = (field, direction) => ORDER_DICTIONARY[field][direction], divider = { type: "divider" }, inputs = {
   altText: {
     assetTypes: ["file", "image"],
     field: "altText",
@@ -532,38 +596,7 @@ const useKeyPress = (hotkey, onPress) => {
 ], GRID_TEMPLATE_COLUMNS = {
   SMALL: "3rem 100px auto 1.5rem",
   LARGE: "3rem 100px auto 5.5rem 5.5rem 3.5rem 8.5rem 4.75rem 2rem"
-}, PANEL_HEIGHT = 32, TAG_DOCUMENT_NAME = "media.tag", TAGS_PANEL_WIDTH = 250, AssetSourceDispatchContext = react.createContext(void 0), AssetBrowserDispatchProvider = (props) => {
-  const { children, onSelect } = props, contextValue = {
-    onSelect
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(AssetSourceDispatchContext.Provider, { value: contextValue, children });
-}, useAssetSourceActions = () => {
-  const context = react.useContext(AssetSourceDispatchContext);
-  if (context === void 0)
-    throw new Error("useAssetSourceActions must be used within an AssetSourceDispatchProvider");
-  return context;
-}, useVersionedClient = () => sanity.useClient({ apiVersion: "2025-10-02" }), ORDER_DICTIONARY = {
-  _createdAt: {
-    asc: "Last created: Oldest first",
-    desc: "Last created: Newest first"
-  },
-  _updatedAt: {
-    asc: "Last updated: Oldest first",
-    desc: "Last updated: Newest first"
-  },
-  mimeType: {
-    asc: "MIME type: A to Z",
-    desc: "MIME type: Z to A"
-  },
-  originalFilename: {
-    asc: "File name: A to Z",
-    desc: "File name: Z to A"
-  },
-  size: {
-    asc: "File size: Smallest first",
-    desc: "File size: Largest first"
-  }
-}, getOrderTitle = (field, direction) => ORDER_DICTIONARY[field][direction], debugThrottle = (throttled) => function(source) {
+}, PANEL_HEIGHT = 32, TAG_DOCUMENT_NAME = "media.tag", TAGS_PANEL_WIDTH = 250, debugThrottle = (throttled) => function(source) {
   return rxjs.iif(
     () => !!throttled,
     source.pipe(
@@ -1607,40 +1640,7 @@ const UPLOADS_ACTIONS = {
   (assetsPicked) => assetsPicked.length
 ), assetsActions = { ...assetsSlice.actions };
 var assetsReducer = assetsSlice.reducer;
-const customScrollbar = styledComponents.css`
-  ::-webkit-scrollbar {
-    width: 14px;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    border-radius: 10px;
-    border: 4px solid rgba(0, 0, 0, 0);
-    background: var(--card-border-color);
-    background-clip: padding-box;
-
-    &:hover {
-      background: var(--card-muted-fg-color);
-      background-clip: padding-box;
-    }
-  }
-`, GlobalStyle = styledComponents.createGlobalStyle`
-  .media__custom-scrollbar {
-    ${customScrollbar}
-  }
-
-  // @sanity/ui overrides
-
-  // Custom scrollbar on Box (used in Dialogs)
-  div[data-ui="Box"] {
-    ${customScrollbar}
-  }
-
-  // Dialog background color
-  div[data-ui="Dialog"] {
-    background-color: rgba(15, 17, 18, 0.9);
-  }
-
-`, useTypedSelector = reactRedux.useSelector, initialState$4 = {
+const initialState$4 = {
   items: []
 }, dialogSlice = toolkit.createSlice({
   name: "dialog",
@@ -2361,6 +2361,7 @@ const Container$1 = styledComponents.styled(ui.Box)(({ $scheme, theme }) => styl
       components: {
         details: options?.components?.details
       },
+      createTagsOnUpload: options?.createTagsOnUpload ?? !0,
       creditLine: {
         enabled: options?.creditLine?.enabled || !1,
         excludeSources: creditLineExcludeSources
@@ -2371,6 +2372,7 @@ const Container$1 = styledComponents.styled(ui.Box)(({ $scheme, theme }) => styl
   }, [
     options?.creditLine?.enabled,
     options?.components,
+    options?.createTagsOnUpload,
     options?.creditLine?.excludeSources,
     options?.maximumUploadSize,
     options?.directUploads,
@@ -5603,24 +5605,81 @@ const UploadDropzone = (props) => {
     isDragActive && /* @__PURE__ */ jsxRuntime.jsx(DragActiveContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { direction: "column", justify: "center", style: { color: color.white.hex }, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 3, style: { color: "inherit" }, children: "Drop files to upload" }) }) }),
     children
   ] }) });
-}, BrowserContent = ({ onClose }) => {
-  const client = useVersionedClient(), [portalElement, setPortalElement] = react.useState(null), dispatch = reactRedux.useDispatch();
-  return react.useEffect(() => {
-    const handleAssetUpdate = (update) => {
-      const { documentId, result, transition } = update;
-      transition === "appear" && dispatch(assetsActions.listenerCreateQueue({ asset: result })), transition === "disappear" && dispatch(assetsActions.listenerDeleteQueue({ assetId: documentId })), transition === "update" && dispatch(assetsActions.listenerUpdateQueue({ asset: result }));
-    }, handleTagUpdate = (update) => {
-      const { documentId, result, transition } = update;
-      transition === "appear" && dispatch(tagsActions.listenerCreateQueue({ tag: result })), transition === "disappear" && dispatch(tagsActions.listenerDeleteQueue({ tagId: documentId })), transition === "update" && dispatch(tagsActions.listenerUpdateQueue({ tag: result }));
-    };
-    dispatch(assetsActions.loadPageIndex({ pageIndex: 0 })), dispatch(tagsActions.fetchRequest());
-    const subscriptionAsset = client.listen(
+};
+function getMediaTagNames(schemaType) {
+  const mediaTags = schemaType?.options?.mediaTags;
+  if (!mediaTags?.length) return [];
+  const unique = new Set(
+    mediaTags.map((t) => t?.trim()).filter((t) => !!t?.length)
+  );
+  return Array.from(unique);
+}
+function createAssetHandler(dispatch) {
+  return (update) => {
+    const { documentId, result, transition } = update;
+    switch (transition) {
+      case "appear":
+        dispatch(assetsActions.listenerCreateQueue({ asset: result }));
+        break;
+      case "disappear":
+        dispatch(assetsActions.listenerDeleteQueue({ assetId: documentId }));
+        break;
+      case "update":
+        dispatch(assetsActions.listenerUpdateQueue({ asset: result }));
+        break;
+    }
+  };
+}
+function createTagHandler(dispatch) {
+  return (update) => {
+    const { documentId, result, transition } = update;
+    switch (transition) {
+      case "appear":
+        dispatch(tagsActions.listenerCreateQueue({ tag: result }));
+        break;
+      case "disappear":
+        dispatch(tagsActions.listenerDeleteQueue({ tagId: documentId }));
+        break;
+      case "update":
+        dispatch(tagsActions.listenerUpdateQueue({ tag: result }));
+        break;
+    }
+  };
+}
+function useBrowserInit(client, schemaType) {
+  const dispatch = reactRedux.useDispatch(), tagsByIds = reactRedux.useSelector((state) => state.tags.byIds), tagsFetchCount = reactRedux.useSelector((state) => state.tags.fetchCount), tagNames = getMediaTagNames(schemaType), hasMediaTags = tagNames.length > 0;
+  react.useEffect(() => {
+    hasMediaTags || dispatch(searchActions.facetsClear()), dispatch(tagsActions.fetchRequest());
+    const assetSubscription = client.listen(
       groq__default.default`*[_type in ["sanity.fileAsset", "sanity.imageAsset"] && !(_id in path("drafts.**"))]`
-    ).subscribe(handleAssetUpdate), subscriptionTag = client.listen(groq__default.default`*[_type == "${TAG_DOCUMENT_NAME}" && !(_id in path("drafts.**"))]`).subscribe(handleTagUpdate);
+    ).subscribe(createAssetHandler(dispatch)), tagSubscription = client.listen(groq__default.default`*[_type == "${TAG_DOCUMENT_NAME}" && !(_id in path("drafts.**"))]`).subscribe(createTagHandler(dispatch));
     return () => {
-      subscriptionAsset?.unsubscribe(), subscriptionTag?.unsubscribe();
+      assetSubscription.unsubscribe(), tagSubscription.unsubscribe();
     };
-  }, [client, dispatch]), /* @__PURE__ */ jsxRuntime.jsx(ui.PortalProvider, { element: portalElement, children: /* @__PURE__ */ jsxRuntime.jsxs(UploadDropzone, { children: [
+  }, [client, dispatch, hasMediaTags]), react.useEffect(() => {
+    if (!hasMediaTags || tagsFetchCount < 0) return;
+    const tagFacetInput = inputs.tag;
+    if (tagFacetInput.type !== "searchable") return;
+    const resolvedTags = tagNames.map((name) => Object.values(tagsByIds).find((item) => item.tag.name.current === name)).filter((item) => !!item);
+    dispatch(searchActions.facetsClear());
+    for (const tagItem of resolvedTags)
+      dispatch(
+        searchActions.facetsAdd({
+          facet: {
+            ...tagFacetInput,
+            operatorType: "references",
+            value: { label: tagItem.tag.name.current, value: tagItem.tag._id }
+          }
+        })
+      );
+  }, [tagsFetchCount, hasMediaTags]);
+}
+const BrowserContent = ({
+  onClose,
+  schemaType
+}) => {
+  const client = useVersionedClient(), [portalElement, setPortalElement] = react.useState(null);
+  return useBrowserInit(client, schemaType), /* @__PURE__ */ jsxRuntime.jsx(ui.PortalProvider, { element: portalElement, children: /* @__PURE__ */ jsxRuntime.jsxs(UploadDropzone, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(Dialogs, {}),
     /* @__PURE__ */ jsxRuntime.jsx(Notifications, {}),
     /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { display: "flex", height: "fill", ref: setPortalElement, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", flex: 1, children: [
@@ -5647,7 +5706,7 @@ const UploadDropzone = (props) => {
       selectedAssets: props?.selectedAssets,
       children: /* @__PURE__ */ jsxRuntime.jsxs(AssetBrowserDispatchProvider, { onSelect: props?.onSelect, children: [
         /* @__PURE__ */ jsxRuntime.jsx(GlobalStyle, {}),
-        /* @__PURE__ */ jsxRuntime.jsx(BrowserContent, { onClose: props?.onClose })
+        /* @__PURE__ */ jsxRuntime.jsx(BrowserContent, { onClose: props?.onClose, schemaType: props?.schemaType })
       ] })
     }
   );
@@ -5674,7 +5733,7 @@ const UploadDropzone = (props) => {
         width: "100%",
         zIndex
       },
-      children: /* @__PURE__ */ jsxRuntime.jsx(Browser, { document: currentDocument, ...props })
+      children: /* @__PURE__ */ jsxRuntime.jsx(Browser, { document: currentDocument, schemaType: props.schemaType, ...props })
     }
   ) }) });
 }, useRootPortalElement = () => {
@@ -5739,7 +5798,76 @@ const plugin = {
     types: [mediaTag]
   },
   tools: (prev) => [...prev, tool]
-}));
+})), pendingByAsset = /* @__PURE__ */ new Map();
+function applyMediaTags(options) {
+  const { assetId } = options, chain = (pendingByAsset.get(assetId) ?? Promise.resolve()).then(
+    () => doApplyMediaTags(options)
+  ), cleanup = chain.catch(() => {
+  }).finally(() => {
+    pendingByAsset.get(assetId) === cleanup && pendingByAsset.delete(assetId);
+  });
+  return pendingByAsset.set(assetId, cleanup), chain;
+}
+async function doApplyMediaTags({
+  client,
+  assetId,
+  mediaTags,
+  createTagsOnUpload = !0
+}) {
+  if (!mediaTags || mediaTags.length === 0) return;
+  const validTags = (await Promise.all(
+    mediaTags.map(async (tagName) => await client.fetch(
+      groq__default.default`*[_type == "${TAG_DOCUMENT_NAME}" && name.current == $tagName][0]`,
+      { tagName }
+    ) || (createTagsOnUpload ? await client.create({
+      _type: TAG_DOCUMENT_NAME,
+      name: { _type: "slug", current: tagName }
+    }) : null))
+  )).filter((tag) => tag !== null);
+  if (validTags.length === 0) return;
+  const existing = await client.fetch(
+    groq__default.default`*[_id == $assetId][0]{'tagIds': opt.media.tags[]._ref}`,
+    { assetId },
+    { useCdn: !1 }
+    // bypass CDN cache so we see the latest committed tag refs
+  ), existingIds = new Set(existing?.tagIds ?? []), tagReferences = validTags.filter((tag) => !existingIds.has(tag._id)).map((tag) => ({
+    _key: nanoid.nanoid(),
+    _ref: tag._id,
+    _type: "reference",
+    _weak: !0
+  }));
+  tagReferences.length !== 0 && await client.patch(assetId).setIfMissing({ opt: {} }).setIfMissing({ "opt.media": {} }).setIfMissing({ "opt.media.tags": [] }).append("opt.media.tags", tagReferences).commit();
+}
+function AutoTagInput(props) {
+  const { renderDefault, schemaType, value, mediaTags: mediaTagsProp } = props, toast = ui.useToast(), mediaTags = mediaTagsProp ?? schemaType?.options?.mediaTags, client = useVersionedClient(), { createTagsOnUpload } = useToolOptions(), prevAssetRef = react.useRef(void 0), isInitialMount = react.useRef(!0), currentAssetRef = value?.asset?._ref;
+  return react.useEffect(() => {
+    if (isInitialMount.current) {
+      isInitialMount.current = !1, prevAssetRef.current = currentAssetRef;
+      return;
+    }
+    const previousRef = prevAssetRef.current;
+    prevAssetRef.current = currentAssetRef, !(!mediaTags?.length || !currentAssetRef || currentAssetRef === previousRef) && applyMediaTags({
+      client,
+      assetId: currentAssetRef,
+      mediaTags,
+      createTagsOnUpload
+    }).catch((err) => {
+      console.error("[sanity-plugin-media] Failed to apply auto-tags:", err);
+      const label = mediaTags.length === 1 ? "tag" : "tags";
+      toast.push({ closable: !0, status: "error", title: `Failed to apply the media ${label} ${mediaTags.join(", ")}` });
+    });
+  }, [currentAssetRef, mediaTags, client, createTagsOnUpload]), renderDefault(props);
+}
+function mediaField(config) {
+  const { mediaTags, options, components, ...rest } = config;
+  return {
+    ...rest,
+    options: { ...options, mediaTags },
+    components: { ...components, input: AutoTagInput }
+  };
+}
+exports.AutoTagInput = AutoTagInput;
 exports.media = media;
 exports.mediaAssetSource = mediaAssetSource;
+exports.mediaField = mediaField;
 //# sourceMappingURL=index.js.map