sanity-plugin-media 4.2.0 → 4.3.0

package/dist/index.mjs

@@ -3,16 +3,16 @@ import { useClient, useColorSchemeValue, useSchema, Preview, useDocumentStore, W
 import { ThLargeIcon, ThListIcon, SortIcon, CloseIcon, SelectIcon, AddIcon, SearchIcon, PlugIcon, ClipboardIcon, DownloadIcon, ChevronDownIcon, ErrorOutlineIcon, WarningOutlineIcon, EditIcon, ArrowUpIcon, ArrowDownIcon, TrashIcon, ComposeIcon, Icon, UploadIcon, WarningFilledIcon, CheckmarkCircleIcon, ChevronUpIcon, ImageIcon } from "@sanity/icons";
 import { Inline, Button, usePortal, MenuButton, Menu as Menu$2, MenuItem, MenuDivider, Box, studioTheme, rem, Flex, Label, Text, TextInput, Card, MenuGroup, useMediaIndex, Tooltip, Switch, Popover, Stack, Dialog as Dialog$1, TextArea, TabList, Tab, TabPanel, Container as Container$2, Spinner, Checkbox, Grid, useToast, PortalProvider, useLayer, Portal } from "@sanity/ui";
 import { useRef, useCallback, useEffect, createContext, useContext, useMemo, useState, forwardRef, memo, Component } from "react";
-import groq from "groq";
+import { css, createGlobalStyle, styled } from "styled-components";
 import { useSelector, useDispatch, Provider } from "react-redux";
 import { createAction, createSlice, isAnyOf, createSelector, combineReducers, configureStore } from "@reduxjs/toolkit";
-import { nanoid } from "nanoid";
+import pluralize from "pluralize";
 import { ofType, combineEpics, createEpicMiddleware } from "redux-observable";
 import { iif, throwError, of, from, EMPTY, Subject, Observable, merge, empty } from "rxjs";
 import { delay, mergeMap, filter, withLatestFrom, catchError, switchMap, bufferTime, debounceTime, first, map, takeUntil } from "rxjs/operators";
+import groq from "groq";
+import { nanoid } from "nanoid";
 import { uuid } from "@sanity/uuid";
-import { css, createGlobalStyle, styled } from "styled-components";
-import pluralize from "pluralize";
 import { useNProgress } from "@tanem/react-nprogress";
 import { hues, white } from "@sanity/color";
 import Select, { components } from "react-select";
@@ -176,7 +176,71 @@ const useKeyPress = (hotkey, onPress) => {
   return 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 = createContext(void 0), AssetBrowserDispatchProvider = (props) => {
+  const { children, onSelect } = props, contextValue = {
+    onSelect
+  };
+  return /* @__PURE__ */ jsx(AssetSourceDispatchContext.Provider, { value: contextValue, children });
+}, useAssetSourceActions = () => {
+  const context = useContext(AssetSourceDispatchContext);
+  if (context === void 0)
+    throw new Error("useAssetSourceActions must be used within an AssetSourceDispatchProvider");
+  return context;
+}, useVersionedClient = () => useClient({ apiVersion: "2025-10-02" }), customScrollbar = 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 = 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 = 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",
@@ -539,38 +603,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 = createContext(void 0), AssetBrowserDispatchProvider = (props) => {
-  const { children, onSelect } = props, contextValue = {
-    onSelect
-  };
-  return /* @__PURE__ */ jsx(AssetSourceDispatchContext.Provider, { value: contextValue, children });
-}, useAssetSourceActions = () => {
-  const context = useContext(AssetSourceDispatchContext);
-  if (context === void 0)
-    throw new Error("useAssetSourceActions must be used within an AssetSourceDispatchProvider");
-  return context;
-}, useVersionedClient = () => 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 iif(
     () => !!throttled,
     source.pipe(
@@ -1614,40 +1647,7 @@ const UPLOADS_ACTIONS = {
   (assetsPicked) => assetsPicked.length
 ), assetsActions = { ...assetsSlice.actions };
 var assetsReducer = assetsSlice.reducer;
-const customScrollbar = 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 = 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 = useSelector, initialState$4 = {
+const initialState$4 = {
   items: []
 }, dialogSlice = createSlice({
   name: "dialog",
@@ -2368,6 +2368,7 @@ const Container$1 = styled(Box)(({ $scheme, theme }) => css`
       components: {
         details: options?.components?.details
       },
+      createTagsOnUpload: options?.createTagsOnUpload ?? !0,
       creditLine: {
         enabled: options?.creditLine?.enabled || !1,
         excludeSources: creditLineExcludeSources
@@ -2378,6 +2379,7 @@ const Container$1 = styled(Box)(({ $scheme, theme }) => css`
   }, [
     options?.creditLine?.enabled,
     options?.components,
+    options?.createTagsOnUpload,
     options?.creditLine?.excludeSources,
     options?.maximumUploadSize,
     options?.directUploads,
@@ -5608,24 +5610,81 @@ const UploadDropzone = (props) => {
     isDragActive && /* @__PURE__ */ jsx(DragActiveContainer, { children: /* @__PURE__ */ jsx(Flex, { direction: "column", justify: "center", style: { color: white.hex }, children: /* @__PURE__ */ jsx(Text, { size: 3, style: { color: "inherit" }, children: "Drop files to upload" }) }) }),
     children
   ] }) });
-}, BrowserContent = ({ onClose }) => {
-  const client = useVersionedClient(), [portalElement, setPortalElement] = useState(null), dispatch = useDispatch();
-  return 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 = useDispatch(), tagsByIds = useSelector((state) => state.tags.byIds), tagsFetchCount = useSelector((state) => state.tags.fetchCount), tagNames = getMediaTagNames(schemaType), hasMediaTags = tagNames.length > 0;
+  useEffect(() => {
+    hasMediaTags || dispatch(searchActions.facetsClear()), dispatch(tagsActions.fetchRequest());
+    const assetSubscription = client.listen(
       groq`*[_type in ["sanity.fileAsset", "sanity.imageAsset"] && !(_id in path("drafts.**"))]`
-    ).subscribe(handleAssetUpdate), subscriptionTag = client.listen(groq`*[_type == "${TAG_DOCUMENT_NAME}" && !(_id in path("drafts.**"))]`).subscribe(handleTagUpdate);
+    ).subscribe(createAssetHandler(dispatch)), tagSubscription = client.listen(groq`*[_type == "${TAG_DOCUMENT_NAME}" && !(_id in path("drafts.**"))]`).subscribe(createTagHandler(dispatch));
     return () => {
-      subscriptionAsset?.unsubscribe(), subscriptionTag?.unsubscribe();
+      assetSubscription.unsubscribe(), tagSubscription.unsubscribe();
     };
-  }, [client, dispatch]), /* @__PURE__ */ jsx(PortalProvider, { element: portalElement, children: /* @__PURE__ */ jsxs(UploadDropzone, { children: [
+  }, [client, dispatch, hasMediaTags]), 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] = useState(null);
+  return useBrowserInit(client, schemaType), /* @__PURE__ */ jsx(PortalProvider, { element: portalElement, children: /* @__PURE__ */ jsxs(UploadDropzone, { children: [
     /* @__PURE__ */ jsx(Dialogs, {}),
     /* @__PURE__ */ jsx(Notifications, {}),
     /* @__PURE__ */ jsx(Card, { display: "flex", height: "fill", ref: setPortalElement, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", flex: 1, children: [
@@ -5652,7 +5711,7 @@ const UploadDropzone = (props) => {
       selectedAssets: props?.selectedAssets,
       children: /* @__PURE__ */ jsxs(AssetBrowserDispatchProvider, { onSelect: props?.onSelect, children: [
         /* @__PURE__ */ jsx(GlobalStyle, {}),
-        /* @__PURE__ */ jsx(BrowserContent, { onClose: props?.onClose })
+        /* @__PURE__ */ jsx(BrowserContent, { onClose: props?.onClose, schemaType: props?.schemaType })
       ] })
     }
   );
@@ -5679,7 +5738,7 @@ const UploadDropzone = (props) => {
         width: "100%",
         zIndex
       },
-      children: /* @__PURE__ */ jsx(Browser, { document: currentDocument, ...props })
+      children: /* @__PURE__ */ jsx(Browser, { document: currentDocument, schemaType: props.schemaType, ...props })
     }
   ) }) });
 }, useRootPortalElement = () => {
@@ -5744,9 +5803,78 @@ 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`*[_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`*[_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(),
+    _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 = useToast(), mediaTags = mediaTagsProp ?? schemaType?.options?.mediaTags, client = useVersionedClient(), { createTagsOnUpload } = useToolOptions(), prevAssetRef = useRef(void 0), isInitialMount = useRef(!0), currentAssetRef = value?.asset?._ref;
+  return 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: components2, ...rest } = config;
+  return {
+    ...rest,
+    options: { ...options, mediaTags },
+    components: { ...components2, input: AutoTagInput }
+  };
+}
 export {
+  AutoTagInput,
   media,
-  mediaAssetSource
+  mediaAssetSource,
+  mediaField
 };
 //# sourceMappingURL=index.mjs.map