sanity-plugin-internationalized-array 2.0.0 → 2.0.1-canary.0

package/lib/index.mjs

@@ -5,7 +5,7 @@ import { isSanityDocument, setIfMissing, insert, PatchEvent, useClient, useWorks
 import { useLanguageFilterStudioContext } from "@sanity/language-filter";
 import { Grid, Button, useToast, Stack, Box, Text, Card, Code, Label, MenuButton, Menu, MenuItem, Flex, Spinner } from "@sanity/ui";
 import equal from "fast-deep-equal";
-import { useMemo, useCallback, createContext, useContext, useDeferredValue, memo, useRef, useEffect, createElement } from "react";
+import { useCallback, createContext, useContext, useDeferredValue, useMemo, memo, useRef, useEffect, createElement } from "react";
 import { useDocumentPane } from "sanity/structure";
 import { AddIcon, TranslateIcon, RemoveCircleIcon } from "@sanity/icons";
 import get from "lodash/get.js";
@@ -17,10 +17,35 @@ const namespace = "sanity-plugin-internationalized-array", version = "v0", prelo
   apiVersion: "2022-11-27",
   buttonLocations: ["field"],
   buttonAddAll: !0
+}, getDocumentsToTranslate = (value, rootPath = []) => {
+  if (Array.isArray(value)) {
+    const arrayRootPath = [...rootPath], internationalizedValues = value.filter((item) => {
+      if (Array.isArray(item)) return !1;
+      if (typeof item == "object") {
+        const type = item?._type;
+        return type?.startsWith("internationalizedArray") && type?.endsWith("Value");
+      }
+      return !1;
+    });
+    return internationalizedValues.length > 0 ? internationalizedValues.map((internationalizedValue) => ({
+      ...internationalizedValue,
+      path: arrayRootPath,
+      pathString: arrayRootPath.join(".")
+    })) : value.length > 0 ? value.map(
+      (item, index) => getDocumentsToTranslate(item, [...arrayRootPath, index])
+    ).flat() : [];
+  }
+  if (typeof value == "object" && value) {
+    const startsWithUnderscoreRegex = /^_/;
+    return Object.keys(value).filter(
+      (key) => !key.match(startsWithUnderscoreRegex)
+    ).map((item) => {
+      const selectedValue = value[item], path = [...rootPath, item];
+      return getDocumentsToTranslate(selectedValue, path);
+    }).flat();
+  }
+  return [];
 };
-function createValueSchemaTypeName(schemaType) {
-  return `${schemaType.name}Value`;
-}
 function AddButtons(props) {
   const { languages, readOnly, value, onClick } = props;
   return languages.length > 0 ? /* @__PURE__ */ jsx(Grid, { columns: Math.min(languages.length, MAX_COLUMNS), gap: 2, children: languages.map((language) => /* @__PURE__ */ jsx(
@@ -29,7 +54,7 @@ function AddButtons(props) {
       tone: "primary",
       mode: "ghost",
       fontSize: 1,
-      disabled: readOnly || !!(value != null && value.find((item) => item._key === language.id)),
+      disabled: readOnly || !!value?.find((item) => item._key === language.id),
       text: language.id.toUpperCase(),
       icon: languages.length > MAX_COLUMNS ? void 0 : AddIcon,
       value: language.id,
@@ -39,13 +64,8 @@ function AddButtons(props) {
   )) }) : null;
 }
 function DocumentAddButtons(props) {
-  const { filteredLanguages } = useInternationalizedArrayContext(), { fields } = props.schemaType, value = isSanityDocument(props.value) ? props.value : void 0, toast = useToast(), { onChange } = useDocumentPane(), internationalizedArrayFields = useMemo(
-    () => fields.filter(
-      (field) => field.type.name.startsWith("internationalizedArray")
-    ),
-    [fields]
-  ), handleDocumentButtonClick = useCallback(
-    (event) => {
+  const { filteredLanguages } = useInternationalizedArrayContext(), value = isSanityDocument(props.value) ? props.value : void 0, toast = useToast(), { onChange } = useDocumentPane(), documentsToTranslation = getDocumentsToTranslate(value, []), handleDocumentButtonClick = useCallback(
+    async (event) => {
       const languageId = event.currentTarget.value;
       if (!languageId) {
         toast.push({
@@ -54,37 +74,38 @@ function DocumentAddButtons(props) {
         });
         return;
       }
-      if (internationalizedArrayFields.length === 0) {
+      const alreadyTranslated = documentsToTranslation.filter(
+        (translation) => translation?._key === languageId
+      ), removeDuplicates = documentsToTranslation.reduce((filteredTranslations, translation) => alreadyTranslated.filter(
+        (alreadyTranslation) => alreadyTranslation.pathString === translation.pathString
+      ).length > 0 || filteredTranslations.filter(
+        (filteredTranslation) => filteredTranslation.path === translation.path
+      ).length > 0 ? filteredTranslations : [...filteredTranslations, translation], []);
+      if (removeDuplicates.length === 0) {
         toast.push({
           status: "error",
           title: "No internationalizedArray fields found in document root"
         });
         return;
       }
-      const patches = internationalizedArrayFields.filter(
-        (field) => {
-          const fieldValue = value == null ? void 0 : value[field.name];
-          return !(fieldValue && Array.isArray(fieldValue) && fieldValue.find((v) => v._key === languageId));
-        }
-      ).map((field) => {
-        const fieldKey = field.name;
-        return [
-          setIfMissing([], [fieldKey]),
-          insert(
-            [
-              {
-                _key: languageId,
-                _type: createValueSchemaTypeName(field.type)
-              }
-            ],
-            "after",
-            [fieldKey, -1]
-          )
-        ];
-      }).flat();
-      onChange(PatchEvent.from(patches));
+      const patches = [];
+      for (const toTranslate of removeDuplicates) {
+        const path = toTranslate.path, ifMissing = setIfMissing([], path), insertValue = insert(
+          [
+            {
+              _key: languageId,
+              _type: toTranslate._type,
+              value: void 0
+            }
+          ],
+          "after",
+          [...path, -1]
+        );
+        patches.push(ifMissing), patches.push(insertValue);
+      }
+      onChange(PatchEvent.from(patches.flat()));
     },
-    [internationalizedArrayFields, onChange, toast, value]
+    [documentsToTranslation, onChange, toast]
   );
   return /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
     /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text, { size: 1, weight: "semibold", children: "Add translation to internationalized fields" }) }),
@@ -106,7 +127,7 @@ const getSelectedValue = (select, document) => {
   for (const [key, path] of Object.entries(selection)) {
     let value = get(document, path);
     Array.isArray(value) && (value = value.filter(
-      (item) => typeof item == "object" ? (item == null ? void 0 : item._type) === "reference" && "_ref" in item : !0
+      (item) => typeof item == "object" ? item?._type === "reference" && "_ref" in item : !0
     )), selectedValue[key] = value;
   }
   return selectedValue;
@@ -119,7 +140,9 @@ function useInternationalizedArrayContext() {
   return useContext(InternationalizedArrayContext);
 }
 function InternationalizedArrayProvider(props) {
-  const { internationalizedArray: internationalizedArray2 } = props, client = useClient({ apiVersion: internationalizedArray2.apiVersion }), workspace = useWorkspace(), { value: document } = useFormBuilder(), deferredDocument = useDeferredValue(document), selectedValue = useMemo(
+  const { internationalizedArray: internationalizedArray2 } = props, client = useClient({ apiVersion: internationalizedArray2.apiVersion }), workspace = useWorkspace(), { value: document } = useFormBuilder();
+  console.log({ document }, useFormBuilder());
+  const deferredDocument = useDeferredValue(document), selectedValue = useMemo(
     () => getSelectedValue(internationalizedArray2.select, deferredDocument),
     [internationalizedArray2.select, deferredDocument]
   ), languages = Array.isArray(internationalizedArray2.languages) ? internationalizedArray2.languages : suspend$1(
@@ -133,7 +156,7 @@ function InternationalizedArrayProvider(props) {
       (language) => selectedLanguageIds.includes(language.id)
     ) : languages;
   }, [deferredDocument, languageFilterOptions, languages, selectedLanguageIds]), showDocumentButtons = internationalizedArray2.buttonLocations.includes("document");
-  return /* @__PURE__ */ jsx(
+  return console.log({ showDocumentButtons }), /* @__PURE__ */ jsx(
     InternationalizedArrayContext.Provider,
     {
       value: {
@@ -142,13 +165,7 @@ function InternationalizedArrayProvider(props) {
         filteredLanguages
       },
       children: showDocumentButtons ? /* @__PURE__ */ jsxs(Stack, { space: 5, children: [
-        /* @__PURE__ */ jsx(
-          DocumentAddButtons,
-          {
-            schemaType: props.schemaType,
-            value: props.value
-          }
-        ),
+        /* @__PURE__ */ jsx(DocumentAddButtons, { value: props.value }),
         props.renderDefault(props)
       ] }) : props.renderDefault(props)
     }
@@ -165,7 +182,10 @@ function checkAllLanguagesArePresent(languages, value) {
   return languagesInUseIds.length === filteredLanguageIds.length && languagesInUseIds.every((l) => filteredLanguageIds.includes(l));
 }
 function createAddAllTitle(value, languages) {
-  return value != null && value.length ? `Add missing ${languages.length - value.length === 1 ? "language" : "languages"}` : languages.length === 1 ? `Add ${languages[0].title} Field` : "Add all languages";
+  return value?.length ? `Add missing ${languages.length - value.length === 1 ? "language" : "languages"}` : languages.length === 1 ? `Add ${languages[0].title} Field` : "Add all languages";
+}
+function createValueSchemaTypeName(schemaType) {
+  return `${schemaType.name}Value`;
 }
 function createAddLanguagePatches(config) {
   const {
@@ -175,15 +195,15 @@ function createAddLanguagePatches(config) {
     filteredLanguages,
     value,
     path = []
-  } = config, itemBase = { _type: createValueSchemaTypeName(schemaType) }, newItems = Array.isArray(addLanguageKeys) && addLanguageKeys.length > 0 ? (
-    // Just one for this language
-    addLanguageKeys.map((id) => ({ ...itemBase, _key: id }))
-  ) : (
-    // Or one for every missing language
-    filteredLanguages.filter(
-      (language) => value != null && value.length ? !value.find((v) => v._key === language.id) : !0
-    ).map((language) => ({ ...itemBase, _key: language.id }))
-  ), languagesInUse = value != null && value.length ? value.map((v) => v) : [];
+  } = config, itemBase = { _type: createValueSchemaTypeName(schemaType) }, newItems = Array.isArray(addLanguageKeys) && addLanguageKeys.length > 0 ? addLanguageKeys.map((id) => ({
+    ...itemBase,
+    _key: id
+  })) : filteredLanguages.filter(
+    (language) => value?.length ? !value.find((v) => v._key === language.id) : !0
+  ).map((language) => ({
+    ...itemBase,
+    _key: language.id
+  })), languagesInUse = value?.length ? value.map((v) => v) : [];
   return newItems.map((item) => {
     const languageIndex = languages.findIndex((l) => item._key === l.id), remainingLanguages = languages.slice(languageIndex + 1), nextLanguageIndex = languagesInUse.findIndex(
       (l) => (
@@ -201,7 +221,7 @@ function createAddLanguagePatches(config) {
   });
 }
 const createTranslateFieldActions = (fieldActionProps, { languages, filteredLanguages }) => languages.map((language) => {
-  const value = useFormValue(fieldActionProps.path), disabled = value && Array.isArray(value) ? !!(value != null && value.find((item) => item._key === language.id)) : !1, hidden = !filteredLanguages.some((f) => f.id === language.id), { onChange } = useDocumentPane(), onAction = useCallback(() => {
+  const value = useFormValue(fieldActionProps.path), disabled = value && Array.isArray(value) ? !!value?.find((item) => item._key === language.id) : !1, hidden = !filteredLanguages.some((f) => f.id === language.id), { onChange } = useDocumentPane(), onAction = useCallback(() => {
     const { schemaType, path } = fieldActionProps, addLanguageKeys = [language.id], patches = createAddLanguagePatches({
       addLanguageKeys,
       schemaType,
@@ -243,8 +263,7 @@ const createTranslateFieldActions = (fieldActionProps, { languages, filteredLang
 }, internationalizedArrayFieldAction = defineDocumentFieldAction({
   name: "internationalizedArray",
   useAction(fieldActionProps) {
-    var _a, _b;
-    const isInternationalizedArrayField = (_b = (_a = fieldActionProps == null ? void 0 : fieldActionProps.schemaType) == null ? void 0 : _a.type) == null ? void 0 : _b.name.startsWith(
+    const isInternationalizedArrayField = fieldActionProps?.schemaType?.type?.name.startsWith(
       "internationalizedArray"
     ), { languages, filteredLanguages } = useInternationalizedArrayContext(), translateFieldActions = createTranslateFieldActions(
       fieldActionProps,
@@ -320,11 +339,10 @@ function InternationalizedArray(props) {
     }) : members,
     [languageFilterEnabled, members, languageFilterOptions, selectedLanguageIds]
   ), handleAddLanguage = useCallback(
-    (param) => {
-      var _a;
-      if (!(filteredLanguages != null && filteredLanguages.length))
+    async (param) => {
+      if (!filteredLanguages?.length)
         return;
-      const addLanguageKeys = Array.isArray(param) ? param : [(_a = param == null ? void 0 : param.currentTarget) == null ? void 0 : _a.value].filter(Boolean), patches = createAddLanguagePatches({
+      const addLanguageKeys = Array.isArray(param) ? param : [param?.currentTarget?.value].filter(Boolean), patches = createAddLanguagePatches({
         addLanguageKeys,
         schemaType,
         languages,
@@ -342,23 +360,23 @@ function InternationalizedArray(props) {
     };
   }, [defaultLanguages, documentCreatedAt, handleAddLanguage, value]);
   const handleRestoreOrder = useCallback(() => {
-    if (!(value != null && value.length) || !(languages != null && languages.length))
+    if (!value?.length || !languages?.length)
       return;
     const updatedValue = value.reduce((acc, v) => {
-      const newIndex = languages.findIndex((l) => l.id === (v == null ? void 0 : v._key));
+      const newIndex = languages.findIndex((l) => l.id === v?._key);
       return newIndex > -1 && (acc[newIndex] = v), acc;
     }, []).filter(Boolean);
-    (value == null ? void 0 : value.length) !== updatedValue.length && toast.push({
+    value?.length !== updatedValue.length && toast.push({
       title: "There was an error reordering languages",
       status: "warning"
     }), onChange(set(updatedValue));
-  }, [toast, languages, onChange, value]), allKeysAreLanguages = useMemo(() => !(value != null && value.length) || !(languages != null && languages.length) ? !0 : value == null ? void 0 : value.every((v) => languages.find((l) => (l == null ? void 0 : l.id) === (v == null ? void 0 : v._key))), [value, languages]), languagesInUse = useMemo(
-    () => languages && languages.length > 1 ? languages.filter((l) => value == null ? void 0 : value.find((v) => v._key === l.id)) : [],
+  }, [toast, languages, onChange, value]), allKeysAreLanguages = useMemo(() => !value?.length || !languages?.length ? !0 : value?.every((v) => languages.find((l) => l?.id === v?._key)), [value, languages]), languagesInUse = useMemo(
+    () => languages && languages.length > 1 ? languages.filter((l) => value?.find((v) => v._key === l.id)) : [],
     [languages, value]
-  ), languagesOutOfOrder = useMemo(() => !(value != null && value.length) || !languagesInUse.length ? [] : value.map(
+  ), languagesOutOfOrder = useMemo(() => !value?.length || !languagesInUse.length ? [] : value.map(
     (v, vIndex) => vIndex === languagesInUse.findIndex((l) => l.id === v._key) ? null : v
   ).filter(Boolean), [value, languagesInUse]), languagesAreValid = useMemo(
-    () => !(languages != null && languages.length) || (languages == null ? void 0 : languages.length) && languages.every((item) => item.id && item.title),
+    () => !languages?.length || languages?.length && languages.every((item) => item.id && item.title),
     [languages]
   );
   useEffect(() => {
@@ -373,9 +391,9 @@ function InternationalizedArray(props) {
   const addButtonsAreVisible = (
     // Plugin was configured to display buttons here (default!)
     buttonLocations.includes("field") && // There's at least one language visible
-    (filteredLanguages == null ? void 0 : filteredLanguages.length) > 0 && // Not every language has a value yet
+    filteredLanguages?.length > 0 && // Not every language has a value yet
     !allLanguagesArePresent
-  ), fieldHasMembers = (members == null ? void 0 : members.length) > 0;
+  ), fieldHasMembers = members?.length > 0;
   return /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
     fieldHasMembers ? /* @__PURE__ */ jsx(Fragment, { children: filteredMembers.map((member) => member.kind === "item" ? /* @__PURE__ */ createElement(
       ArrayOfObjectsItem,
@@ -411,8 +429,7 @@ function InternationalizedArray(props) {
   ] });
 }
 function getLanguagesFieldOption(schemaType) {
-  var _a;
-  return schemaType ? ((_a = schemaType.options) == null ? void 0 : _a.languages) || getLanguagesFieldOption(schemaType.type) : void 0;
+  return schemaType ? schemaType.options?.languages || getLanguagesFieldOption(schemaType.type) : void 0;
 }
 var array = (config) => {
   const { apiVersion, select, languages, type } = config, typeName = typeof type == "string" ? type : type.name, arrayName = createFieldName(typeName), objectName = createFieldName(typeName, !0);
@@ -424,7 +441,12 @@ var array = (config) => {
       input: InternationalizedArray
     },
     // These options are required for validation rules – not the custom input component
-    options: { apiVersion, select, languages },
+    options: {
+      // @ts-expect-error - find out why it fails
+      apiVersion,
+      select,
+      languages
+    },
     of: [
       defineField({
         ...typeof type == "string" ? {} : type,
@@ -432,15 +454,16 @@ var array = (config) => {
         type: objectName
       })
     ],
+    // @ts-expect-error - find out why it fails
     validation: (rule) => rule.custom(async (value, context) => {
       if (!value)
         return !0;
       const selectedValue = getSelectedValue(select, context.document), client = context.getClient({ apiVersion });
       let contextLanguages = [];
-      const languagesFieldOption = getLanguagesFieldOption(context == null ? void 0 : context.type);
+      const languagesFieldOption = getLanguagesFieldOption(context?.type);
       if (Array.isArray(languagesFieldOption) ? contextLanguages = languagesFieldOption : Array.isArray(peek(selectedValue)) ? contextLanguages = peek(selectedValue) || [] : typeof languagesFieldOption == "function" && (contextLanguages = await languagesFieldOption(client, selectedValue)), value && value.length > contextLanguages.length)
         return `Cannot be more than ${contextLanguages.length === 1 ? "1 item" : `${contextLanguages.length} items`}`;
-      const nonLanguageKeys = value != null && value.length ? value.filter(
+      const nonLanguageKeys = value?.length ? value.filter(
         (item) => !contextLanguages.find((language) => item._key === language.id)
       ) : [];
       if (nonLanguageKeys.length)
@@ -448,10 +471,10 @@ var array = (config) => {
           message: "Array item keys must be valid languages registered to the field type",
           paths: nonLanguageKeys.map((item) => [{ _key: item._key }])
         };
-      const valuesByLanguage = value != null && value.length ? value.filter((item) => !!(item != null && item._key)).reduce((acc, cur) => acc[cur._key] ? { ...acc, [cur._key]: [...acc[cur._key], cur] } : {
+      const valuesByLanguage = value?.length ? value.filter((item) => !!item?._key).reduce((acc, cur) => acc[cur._key] ? { ...acc, [cur._key]: [...acc[cur._key], cur] } : {
         ...acc,
         [cur._key]: [cur]
-      }, {}) : {}, duplicateValues = Object.values(valuesByLanguage).filter((item) => (item == null ? void 0 : item.length) > 1).flat();
+      }, {}) : {}, duplicateValues = Object.values(valuesByLanguage).filter((item) => item?.length > 1).flat();
       return duplicateValues.length ? {
         message: "There can only be one field per language",
         paths: duplicateValues.map((item) => [{ _key: item._key }])
@@ -467,7 +490,7 @@ function InternationalizedField(props) {
   }) : props.children;
 }
 function getToneFromValidation(validations) {
-  if (!(validations != null && validations.length))
+  if (!validations?.length)
     return;
   const validationLevels = validations.map((v) => v.level);
   if (validationLevels.includes("error"))
@@ -488,16 +511,12 @@ function InternationalizedInput(props) {
     // TODO: Remove this as it shouldn't be necessary?
     value: props.value
   }, { validation, value, onChange, readOnly } = inlineProps, { languages } = useInternationalizedArrayContext(), languageKeysInUse = useMemo(
-    () => {
-      var _a;
-      return (_a = parentValue == null ? void 0 : parentValue.map((v) => v._key)) != null ? _a : [];
-    },
+    () => parentValue?.map((v) => v._key) ?? [],
     [parentValue]
-  ), keyIsValid = languages != null && languages.length ? languages.find((l) => l.id === value._key) : !1, handleKeyChange = useCallback(
+  ), keyIsValid = languages?.length ? languages.find((l) => l.id === value._key) : !1, handleKeyChange = useCallback(
     (event) => {
-      var _a;
-      const languageId = (_a = event == null ? void 0 : event.currentTarget) == null ? void 0 : _a.value;
-      !value || !(languages != null && languages.length) || !languages.find((l) => l.id === languageId) || onChange([set(languageId, ["_key"])]);
+      const languageId = event?.currentTarget?.value;
+      !value || !languages?.length || !languages.find((l) => l.id === languageId) || onChange([set(languageId, ["_key"])]);
     },
     [onChange, value, languages]
   ), handleUnset = useCallback(() => {
@@ -545,9 +564,9 @@ var object = (config) => {
     title: `Internationalized array ${type}`,
     type: "object",
     components: {
+      // @ts-expect-error - find out why it fails
       item: InternationalizedInput
     },
-    // @ts-expect-error - Address this typing issue with the inner object
     fields: [
       typeof type == "string" ? (
         // Define a simple field if all we have is the name as a string