@sanity/document-internationalization 2.0.0-studio-v3-plugin-v2.7 → 2.0.0-studio-v3-plugin-v2.8

package/lib/index.esm.js

@@ -1,63 +1,172 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { defineType, defineField, useClient, useEditState, definePlugin } from 'sanity';
+import { Card, Spinner, useToast, Stack, Text, Button, Tooltip, Box, Flex, Badge, useClickOutside, Popover } from '@sanity/ui';
+import { useEditState, useValidationStatus, useSchema, Preview, useClient, useWorkspace, TextWithTone, PatchEvent, unset, defineType, defineField, definePlugin, isSanityDocument } from 'sanity';
 import { internationalizedArray } from 'sanity-plugin-internationalized-array';
-import { useToast, Button, Flex, Spinner, Text, Box, Badge, useClickOutside, Card, Stack, Popover } from '@sanity/ui';
-import { TranslateIcon, SplitVerticalIcon, CheckmarkIcon, AddIcon, CogIcon, ChevronRightIcon } from '@sanity/icons';
 import React, { useCallback, useState } from 'react';
-import { uuid } from '@sanity/uuid';
-import { usePaneRouter } from 'sanity/desk';
-import { RouterContext } from 'sanity/router';
+import { CogIcon, SplitVerticalIcon, CheckmarkIcon, AddIcon, EditIcon, TranslateIcon } from '@sanity/icons';
 import { useListeningQuery } from 'sanity-plugin-utils';
+import { usePaneRouter, useDocumentPane } from 'sanity/desk';
+import { RouterContext } from 'sanity/router';
+import { uuid } from '@sanity/uuid';
+function LanguageBadge(props, supportedLanguages, languageField) {
+  var _a, _b;
+  const source = (props == null ? void 0 : props.draft) || (props == null ? void 0 : props.published);
+  const languageId = source == null ? void 0 : source[languageField];
+  if (!languageId) {
+    return null;
+  }
+  const language = Array.isArray(supportedLanguages) ? supportedLanguages.find(l => l.id === languageId) : null;
+  return {
+    label: (_a = language == null ? void 0 : language.id) != null ? _a : String(languageId),
+    title: (_b = language == null ? void 0 : language.title) != null ? _b : void 0,
+    color: "primary"
+  };
+}
 const METADATA_SCHEMA_NAME = "translation.metadata";
 const API_VERSION = "2022-11-27";
-var metadata = schemaTypes => defineType({
-  type: "document",
-  name: METADATA_SCHEMA_NAME,
-  title: "Translation metadata",
-  icon: TranslateIcon,
-  liveEdit: true,
-  fields: [defineField({
-    name: "translations",
-    type: "internationalizedArrayReference"
-  }), defineField({
-    name: "schemaTypes",
-    description: "Used to filter the reference fields above so all translations share the same types.",
-    type: "array",
-    // For some reason TS dislikes this line because of the DocumentDefinition return type
-    // @ts-expect-error
-    of: [{
-      type: "string"
-    }],
-    options: {
-      list: schemaTypes
-    },
-    readOnly: _ref => {
-      let {
-        value
-      } = _ref;
-      return Boolean(value);
+function DocumentCheck(props) {
+  const {
+    id,
+    addInvalidId,
+    removeInvalidId,
+    addDraftId,
+    removeDraftId
+  } = props;
+  const editState = useEditState(id, "");
+  const {
+    isValidating,
+    validation
+  } = useValidationStatus(id, "");
+  const schema = useSchema();
+  const validationHasErrors = React.useMemo(() => {
+    return !isValidating && validation.length > 0 && validation.some(item => item.level === "error");
+  }, [isValidating, validation]);
+  React.useEffect(() => {
+    if (validationHasErrors) {
+      addInvalidId(id);
+    } else {
+      removeInvalidId(id);
     }
-  })],
-  preview: {
-    select: {
-      translations: "translations",
-      documentSchemaTypes: "schemaTypes"
-    },
-    prepare(selection) {
-      const {
-        translations,
-        documentSchemaTypes
-      } = selection;
-      const title = translations.length === 1 ? "1 Translation" : "".concat(translations.length, " Translations");
-      const languageKeys = translations.length ? translations.map(t => t._key.toUpperCase()).join(", ") : "";
-      const subtitle = [languageKeys ? "(".concat(languageKeys, ")") : null, (documentSchemaTypes == null ? void 0 : documentSchemaTypes.length) ? documentSchemaTypes.map(s => s.toUpperCase()).join(", ") : "No Schemas Defined"].filter(Boolean).join(" ");
-      return {
-        title,
-        subtitle
-      };
+    if (editState.draft) {
+      addDraftId(id);
+    } else {
+      removeDraftId(id);
     }
+  }, [addDraftId, addInvalidId, editState.draft, id, removeDraftId, removeInvalidId, validationHasErrors]);
+  if (!editState.draft) {
+    return null;
   }
-});
+  const schemaType = schema.get(editState.draft._type);
+  return /* @__PURE__ */jsx(Card, {
+    border: true,
+    padding: 2,
+    tone: validationHasErrors ? "critical" : "positive",
+    children: editState.draft && schemaType ? /* @__PURE__ */jsx(Preview, {
+      layout: "default",
+      value: editState.draft,
+      schemaType
+    }) : /* @__PURE__ */jsx(Spinner, {})
+  });
+}
+function BulkPublish(props) {
+  const {
+    translations
+  } = props;
+  const client = useClient({
+    apiVersion: API_VERSION
+  });
+  const {
+    projectId,
+    dataset
+  } = useWorkspace();
+  const toast = useToast();
+  const [invalidIds, setInvalidIds] = React.useState(null);
+  const addInvalidId = useCallback(id => {
+    setInvalidIds(ids => ids ? Array.from( /* @__PURE__ */new Set([...ids, id])) : [id]);
+  }, []);
+  const removeInvalidId = useCallback(id => {
+    setInvalidIds(ids => ids ? ids.filter(i => i !== id) : []);
+  }, []);
+  const [draftIds, setDraftIds] = React.useState([]);
+  const addDraftId = useCallback(id => {
+    setDraftIds(ids => Array.from( /* @__PURE__ */new Set([...ids, id])));
+  }, []);
+  const removeDraftId = useCallback(id => {
+    setDraftIds(ids => ids.filter(i => i !== id));
+  }, []);
+  const handleBulkPublish = useCallback(() => {
+    const body = translations.map(translation => ({
+      documentId: translation.value._ref
+    }));
+    client.request({
+      uri: "/publish/".concat(projectId, "/").concat(dataset),
+      method: "POST",
+      body
+    }).then(res => {
+      toast.push({
+        status: "success",
+        title: "Success",
+        description: "Bulk publish complete"
+      });
+    }).catch(err => {
+      console.error(err);
+      toast.push({
+        status: "error",
+        title: "Error",
+        description: "Bulk publish failed"
+      });
+    });
+  }, [translations, client, projectId, dataset, toast]);
+  return (translations == null ? void 0 : translations.length) > 0 ? /* @__PURE__ */jsx(Card, {
+    padding: 4,
+    border: true,
+    radius: 2,
+    children: /* @__PURE__ */jsxs(Stack, {
+      space: 3,
+      children: [/* @__PURE__ */jsx(Text, {
+        weight: "bold",
+        size: 1,
+        children: "Bulk publishing"
+      }), draftIds.length > 0 ? /* @__PURE__ */jsxs(Stack, {
+        space: 2,
+        children: [/* @__PURE__ */jsxs(Text, {
+          size: 1,
+          children: ["There", " ", draftIds.length === 1 ? "is 1 draft document" : "are ".concat(draftIds.length, " draft documents"), "."]
+        }), invalidIds && invalidIds.length > 0 ? /* @__PURE__ */jsxs(TextWithTone, {
+          tone: "caution",
+          size: 1,
+          children: [invalidIds && invalidIds.length === 1 ? "1 draft document has" : "".concat(invalidIds && invalidIds.length, " draft documents have"), " ", "validation issues that must addressed first"]
+        }) : /* @__PURE__ */jsx(TextWithTone, {
+          tone: "positive",
+          size: 1,
+          children: "All drafts are valid and can be bulk published"
+        })]
+      }) : null, /* @__PURE__ */jsx(Stack, {
+        space: 1,
+        children: translations.filter(translation => {
+          var _a;
+          return (_a = translation == null ? void 0 : translation.value) == null ? void 0 : _a._ref;
+        }).map(translation => /* @__PURE__ */jsx(DocumentCheck, {
+          id: translation.value._ref,
+          addInvalidId,
+          removeInvalidId,
+          addDraftId,
+          removeDraftId
+        }, translation._key))
+      }), draftIds.length > 0 ? /* @__PURE__ */jsx(Button, {
+        mode: "ghost",
+        tone: invalidIds && (invalidIds == null ? void 0 : invalidIds.length) > 0 ? "caution" : "positive",
+        text: draftIds.length === 1 ? "Publish draft document" : "Bulk publish ".concat(draftIds.length, " draft documents"),
+        onClick: handleBulkPublish,
+        disabled: Boolean(invalidIds && (invalidIds == null ? void 0 : invalidIds.length) > 0) || !draftIds.length
+      }) : /* @__PURE__ */jsx(Text, {
+        muted: true,
+        size: 1,
+        children: "No draft documents to publish"
+      })]
+    })
+  }) : null;
+}
 function shallowEqualArrays(arrA, arrB) {
   let equal = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : (a, b) => a === b;
   if (arrA === arrB) return true;
@@ -109,6 +218,24 @@ function query(fn, keys) {
   return undefined;
 }
 const suspend = (fn, keys, config) => query(fn, keys, false, config);
+function useTranslationMetadata(id, schemaType) {
+  const query = "*[_type == $translationSchema && $id in translations[].value._ref][0]";
+  const {
+    data,
+    loading,
+    error
+  } = useListeningQuery(query, {
+    params: {
+      id,
+      translationSchema: METADATA_SCHEMA_NAME
+    }
+  });
+  return {
+    data,
+    loading,
+    error
+  };
+}
 function useOpenInNewPane(id, type) {
   const routerContext = React.useContext(RouterContext);
   const {
@@ -135,9 +262,23 @@ function useOpenInNewPane(id, type) {
   }, [id, type, routerContext, routerPanesState, groupIndex]);
   return openInNewPane;
 }
+function LanguageManage(props) {
+  const {
+    id
+  } = props;
+  const open = useOpenInNewPane(id, METADATA_SCHEMA_NAME);
+  return /* @__PURE__ */jsx(Button, {
+    disabled: !id,
+    mode: "ghost",
+    text: "Manage Translations",
+    icon: CogIcon,
+    onClick: () => open()
+  });
+}
 function createReference(key, ref, type) {
   return {
     _key: key,
+    _type: "internationalizedArrayReferenceValue",
     value: {
       _type: "reference",
       _ref: ref,
@@ -216,59 +357,49 @@ function LanguageOption(props) {
       });
     });
   }, [client, documentId, index, language, languageField, metadata == null ? void 0 : metadata._id, schemaType, sourceId, sourceLanguageId, toast]);
-  return /* @__PURE__ */jsx(Button, {
-    onClick: translation ? handleOpen : handleCreate,
-    mode: current ? "default" : "bleed",
-    disabled: disabled || current,
-    children: /* @__PURE__ */jsxs(Flex, {
-      gap: 3,
-      align: "center",
-      children: [disabled ? /* @__PURE__ */jsx(Spinner, {}) : /* @__PURE__ */jsx(Text, {
-        size: 2,
-        children: translation ? /* @__PURE__ */jsx(SplitVerticalIcon, {}) : current ? /* @__PURE__ */jsx(CheckmarkIcon, {}) : /* @__PURE__ */jsx(AddIcon, {})
-      }), /* @__PURE__ */jsx(Box, {
-        flex: 1,
-        children: /* @__PURE__ */jsx(Text, {
-          children: language.title
-        })
-      }), /* @__PURE__ */jsx(Badge, {
-        tone: disabled || current ? "default" : "primary",
-        children: language.id
-      })]
+  let message;
+  if (current) {
+    message = "Current document";
+  } else if (translation) {
+    message = "Open ".concat(language.title, " translation");
+  } else if (!translation) {
+    message = "Create new ".concat(language.title, " translation");
+  }
+  return /* @__PURE__ */jsx(Tooltip, {
+    content: /* @__PURE__ */jsx(Box, {
+      padding: 2,
+      children: /* @__PURE__ */jsx(Text, {
+        muted: true,
+        size: 1,
+        children: message
+      })
+    }),
+    fallbackPlacements: ["right", "left"],
+    placement: "top",
+    portal: true,
+    children: /* @__PURE__ */jsx(Button, {
+      onClick: translation ? handleOpen : handleCreate,
+      mode: current && disabled ? "default" : "bleed",
+      disabled: disabled || current,
+      children: /* @__PURE__ */jsxs(Flex, {
+        gap: 3,
+        align: "center",
+        children: [disabled ? /* @__PURE__ */jsx(Spinner, {}) : /* @__PURE__ */jsx(Text, {
+          size: 2,
+          children: translation ? /* @__PURE__ */jsx(SplitVerticalIcon, {}) : current ? /* @__PURE__ */jsx(CheckmarkIcon, {}) : /* @__PURE__ */jsx(AddIcon, {})
+        }), /* @__PURE__ */jsx(Box, {
+          flex: 1,
+          children: /* @__PURE__ */jsx(Text, {
+            children: language.title
+          })
+        }), /* @__PURE__ */jsx(Badge, {
+          tone: disabled || current ? "default" : "primary",
+          children: language.id
+        })]
+      })
     })
   });
 }
-function useTranslationMetadata(id, schemaType) {
-  const query = "*[_type == $translationSchema && $id in translations[].value._ref][0]";
-  const {
-    data,
-    loading,
-    error
-  } = useListeningQuery(query, {
-    params: {
-      id,
-      translationSchema: METADATA_SCHEMA_NAME
-    }
-  });
-  return {
-    data,
-    loading,
-    error
-  };
-}
-function LanguageManage(props) {
-  const {
-    id
-  } = props;
-  const open = useOpenInNewPane(id, METADATA_SCHEMA_NAME);
-  return /* @__PURE__ */jsx(Button, {
-    disabled: !id,
-    mode: "ghost",
-    text: "Manage Translations",
-    icon: CogIcon,
-    onClick: () => open()
-  });
-}
 function LanguagePatch(props) {
   const {
     apiVersion = API_VERSION,
@@ -310,12 +441,25 @@ function LanguagePatch(props) {
     });
   }, [source, documentId, client, languageField, language, schemaType, toast]);
   return /* @__PURE__ */jsx(Button, {
-    mode: "ghost",
-    text: language.title,
-    icon: ChevronRightIcon,
-    onClick: () => handleClick(),
+    mode: "bleed",
+    onClick: handleClick,
     disabled,
-    justify: "flex-start"
+    justify: "flex-start",
+    children: /* @__PURE__ */jsxs(Flex, {
+      gap: 3,
+      align: "center",
+      children: [/* @__PURE__ */jsx(Text, {
+        size: 2,
+        children: /* @__PURE__ */jsx(EditIcon, {})
+      }), /* @__PURE__ */jsx(Box, {
+        flex: 1,
+        children: /* @__PURE__ */jsx(Text, {
+          children: language.title
+        })
+      }), /* @__PURE__ */jsx(Badge, {
+        children: language.id
+      })]
+    })
   });
 }
 function MenuButton(props) {
@@ -372,7 +516,34 @@ function MenuButton(props) {
       padding: 1,
       space: 1,
       children: [supportedLanguages.length > 0 ? /* @__PURE__ */jsxs(Fragment, {
-        children: [supportedLanguages.map((language, langIndex) => {
+        children: [loading ? null : /* @__PURE__ */jsxs(Fragment, {
+          children: [allLanguagesAreValid ? null : /* @__PURE__ */jsx(Card, {
+            tone: "caution",
+            padding: 3,
+            children: /* @__PURE__ */jsx(Text, {
+              size: 1,
+              children: "Not all language objects are valid. See the console."
+            })
+          }), sourceLanguageId ? null : /* @__PURE__ */jsx(Card, {
+            tone: "caution",
+            padding: 3,
+            children: /* @__PURE__ */jsxs(Text, {
+              size: 1,
+              children: ["Choose a language to ", /* @__PURE__ */jsx("br", {}), "apply to ", /* @__PURE__ */jsx("strong", {
+                children: "this Document"
+              })]
+            })
+          }), sourceLanguageId && !sourceLanguageIsValid ? /* @__PURE__ */jsx(Card, {
+            tone: "caution",
+            padding: 3,
+            children: /* @__PURE__ */jsxs(Text, {
+              size: 1,
+              children: ["Select a supported language.", /* @__PURE__ */jsx("br", {}), "Current language value: ", /* @__PURE__ */jsx("code", {
+                children: sourceLanguageId
+              })]
+            })
+          }) : null]
+        }), supportedLanguages.map((language, langIndex) => {
           var _a;
           return !loading && sourceLanguageId && sourceLanguageIsValid ?
           // Button to duplicate this document to a new translation
@@ -404,39 +575,13 @@ function MenuButton(props) {
               return ((_a2 = t == null ? void 0 : t.value) == null ? void 0 : _a2._ref) !== documentId;
             }).some(t => t._key === language.id))) != null ? _a : false
           }, language.id || language.title || "lang-".concat(langIndex));
-        }), loading ? null : /* @__PURE__ */jsxs(Fragment, {
-          children: [allLanguagesAreValid ? null : /* @__PURE__ */jsx(Card, {
-            tone: "caution",
-            padding: 3,
-            children: /* @__PURE__ */jsx(Text, {
-              size: 1,
-              children: "Not all language objects are valid. See the console."
-            })
-          }), sourceLanguageId ? null : /* @__PURE__ */jsx(Card, {
-            tone: "caution",
-            padding: 3,
-            children: /* @__PURE__ */jsxs(Text, {
-              size: 1,
-              children: ["Choose a language to ", /* @__PURE__ */jsx("br", {}), "apply to ", /* @__PURE__ */jsx("strong", {
-                children: "this Document"
-              })]
-            })
-          }), sourceLanguageId && !sourceLanguageIsValid ? /* @__PURE__ */jsx(Card, {
-            tone: "caution",
-            padding: 3,
-            children: /* @__PURE__ */jsxs(Text, {
-              size: 1,
-              children: ["Change the current language value ", /* @__PURE__ */jsx("code", {
-                children: sourceLanguageId
-              }), /* @__PURE__ */jsx("br", {}), "to one of the supported languages"]
-            })
-          }) : null]
         })]
       }) : null, /* @__PURE__ */jsx(LanguageManage, {
         id: metadata == null ? void 0 : metadata._id
       })]
     })
   });
+  const issueWithTranslations = !loading && sourceLanguageId && !sourceLanguageIsValid;
   return /* @__PURE__ */jsx(Popover, {
     constrainSize: true,
     content,
@@ -448,7 +593,7 @@ function MenuButton(props) {
       text: "Translations",
       mode: "bleed",
       disabled: !source,
-      tone: !source || !loading && sourceLanguageId && sourceLanguageIsValid ? void 0 : "caution",
+      tone: !source || loading || !issueWithTranslations ? void 0 : "caution",
       icon: TranslateIcon,
       onClick: handleClick,
       ref: setButton,
@@ -456,20 +601,102 @@ function MenuButton(props) {
     })
   });
 }
-function LanguageBadge(props, supportedLanguages, languageField) {
-  var _a, _b;
-  const source = (props == null ? void 0 : props.draft) || (props == null ? void 0 : props.published);
-  const languageId = source == null ? void 0 : source[languageField];
-  if (!languageId) {
+function ReferencePatcher(props) {
+  const {
+    translation,
+    documentType,
+    metadataId
+  } = props;
+  const editState = useEditState(translation.value._ref, documentType);
+  const client = useClient({
+    apiVersion: API_VERSION
+  });
+  const {
+    onChange
+  } = useDocumentPane();
+  React.useEffect(() => {
+    if (
+    // We have a reference
+    translation.value._ref &&
+    // It's still weak and not-yet-strengthened
+    translation.value._weak && translation.value._strengthenOnPublish &&
+    // The referenced document has just been published
+    !editState.draft && editState.published && editState.ready) {
+      const referencePathBase = ["translations", {
+        _key: translation._key
+      }, "value"];
+      onChange(new PatchEvent([unset([...referencePathBase, "_weak"]), unset([...referencePathBase, "_strengthenOnPublish"])]));
+    }
+  }, [translation, editState, metadataId, client, onChange]);
+  return null;
+}
+function OptimisticallyStrengthen(props) {
+  const {
+    translations = [],
+    metadataId
+  } = props;
+  if (!translations.length) {
     return null;
   }
-  const language = Array.isArray(supportedLanguages) ? supportedLanguages.find(l => l.id === languageId) : null;
-  return {
-    label: (_a = language == null ? void 0 : language.id) != null ? _a : String(languageId),
-    title: (_b = language == null ? void 0 : language.title) != null ? _b : void 0,
-    color: "primary"
-  };
+  return /* @__PURE__ */jsx(Fragment, {
+    children: translations.map(translation => {
+      var _a;
+      return ((_a = translation.value._strengthenOnPublish) == null ? void 0 : _a.type) ? /* @__PURE__ */jsx(ReferencePatcher, {
+        translation,
+        documentType: translation.value._strengthenOnPublish.type,
+        metadataId
+      }, translation._key) : null;
+    })
+  });
 }
+var metadata = schemaTypes => defineType({
+  type: "document",
+  name: METADATA_SCHEMA_NAME,
+  title: "Translation metadata",
+  icon: TranslateIcon,
+  liveEdit: true,
+  fields: [defineField({
+    name: "translations",
+    type: "internationalizedArrayReference"
+  }), defineField({
+    name: "schemaTypes",
+    description: "Optional: Used to filter the reference fields above so all translations share the same types.",
+    type: "array",
+    // For some reason TS dislikes this line because of the DocumentDefinition return type
+    // @ts-expect-error
+    of: [{
+      type: "string"
+    }],
+    options: {
+      list: schemaTypes
+    },
+    readOnly: _ref => {
+      let {
+        value
+      } = _ref;
+      return Boolean(value);
+    }
+  })],
+  preview: {
+    select: {
+      translations: "translations",
+      documentSchemaTypes: "schemaTypes"
+    },
+    prepare(selection) {
+      const {
+        translations,
+        documentSchemaTypes
+      } = selection;
+      const title = translations.length === 1 ? "1 Translation" : "".concat(translations.length, " Translations");
+      const languageKeys = translations.length ? translations.map(t => t._key.toUpperCase()).join(", ") : "";
+      const subtitle = [languageKeys ? "(".concat(languageKeys, ")") : null, (documentSchemaTypes == null ? void 0 : documentSchemaTypes.length) ? documentSchemaTypes.map(s => s.toUpperCase()).join(", ") : "No Schemas Defined"].filter(Boolean).join(" ");
+      return {
+        title,
+        subtitle
+      };
+    }
+  }
+});
 const DEFAULT_CONFIG = {
   supportedLanguages: [],
   schemaTypes: [],
@@ -502,10 +729,22 @@ const documentInternationalization = definePlugin(config => {
     form: {
       components: {
         input: props => {
-          if (bulkPublish && props.id === "root" && props.schemaType.name === METADATA_SCHEMA_NAME) {
-            return /* @__PURE__ */jsx(Stack, {
+          var _a, _b, _c;
+          if (props.id === "root" && props.schemaType.name === METADATA_SCHEMA_NAME && isSanityDocument(props == null ? void 0 : props.value)) {
+            const metadataId = (_a = props == null ? void 0 : props.value) == null ? void 0 : _a._id;
+            const translations = (_c = (_b = props == null ? void 0 : props.value) == null ? void 0 : _b.translations) != null ? _c : [];
+            const weakAndTypedTranslations = translations.filter(t => {
+              var _a2, _b2;
+              return ((_a2 = t == null ? void 0 : t.value) == null ? void 0 : _a2._weak) && ((_b2 = t.value) == null ? void 0 : _b2._strengthenOnPublish);
+            });
+            return /* @__PURE__ */jsxs(Stack, {
               space: 5,
-              children: props.renderDefault(props)
+              children: [bulkPublish ? /* @__PURE__ */jsx(BulkPublish, {
+                translations
+              }) : null, weakAndTypedTranslations.length > 0 ? /* @__PURE__ */jsx(OptimisticallyStrengthen, {
+                metadataId,
+                translations: weakAndTypedTranslations
+              }) : null, props.renderDefault(props)]
             });
           }
           return props.renderDefault(props);
@@ -591,22 +830,34 @@ const documentInternationalization = definePlugin(config => {
     // It cuts down on attribute usage and gives UI conveniences to add new translations
     internationalizedArray({
       languages: supportedLanguages,
-      fieldTypes: [
-      // TODO: The plugin should allow this kind of input
-      // @ts-ignore
-      defineField({
+      fieldTypes: [defineField({
         name: "reference",
         type: "reference",
         to: schemaTypes.map(type => ({
           type
         })),
-        // TODO: Add a validation rule to *ensure* the document's language matches the array key
         // Reference filters don't actually enforce validation!
-        // validation: (Rule) => Rule.custom(),
+        validation: Rule => Rule.custom(async (item, context) => {
+          var _a;
+          if (!((_a = item == null ? void 0 : item.value) == null ? void 0 : _a._ref) || !(item == null ? void 0 : item._key)) {
+            return true;
+          }
+          const client = context.getClient({
+            apiVersion: API_VERSION
+          });
+          const valueLanguage = await client.fetch("*[_id in [$ref, $draftRef]][0].".concat(languageField), {
+            ref: item.value._ref,
+            draftRef: "drafts.".concat(item.value._ref)
+          });
+          if (valueLanguage && valueLanguage === item._key) {
+            return true;
+          }
+          return "Referenced document does not have the correct language value";
+        }),
         options: {
           collapsed: false,
           // TODO: Update type once it knows the values of this filter
-          // @ts-ignore
+          // @ts-expect-error
           filter: _ref5 => {
             let {
               parent,