sanity-plugin-internationalized-array/lib/index.mjs.map

Store localized fields in an array to save on attributes

{"version":3,"file":"index.mjs","sources":["../src/cache.ts","../src/constants.ts","../src/utils/getDocumentsToTranslate.ts","../src/utils/getLanguageDisplay.ts","../src/components/AddButtons.tsx","../src/components/DocumentAddButtons.tsx","../src/components/getSelectedValue.ts","../src/components/InternationalizedArrayContext.tsx","../src/components/InternationalizedField.tsx","../src/components/Preload.tsx","../src/utils/checkAllLanguagesArePresent.ts","../src/utils/createAddAllTitle.ts","../src/utils/createValueSchemaTypeName.ts","../src/utils/createAddLanguagePatches.ts","../src/fieldActions/index.ts","../src/components/createFieldName.ts","../src/components/Feedback.tsx","../src/components/InternationalizedArray.tsx","../src/utils/getLanguagesFieldOption.ts","../src/schema/array.ts","../src/components/getToneFromValidation.ts","../src/components/InternationalizedInput.tsx","../src/schema/object.ts","../src/utils/flattenSchemaType.ts","../src/plugin.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\n\nimport * as suspend from 'suspend-react'\n\nimport type {Language, LanguageCallback} from './types'\n\nexport const namespace = 'sanity-plugin-internationalized-array'\n\nexport const version = 'v1'\n\n// Simple in-memory cache for validation functions that run outside React context\nconst validationCache = new Map<string, Language[]>()\n\n// Cache for function references to enable sharing between same functions\nconst functionCache = new Map<string, Language[]>()\n\n// Cache for function keys to avoid recalculating them\nconst functionKeyCache = new WeakMap<LanguageCallback, string>()\n\n// https://github.com/pmndrs/suspend-react#preloading\nexport const preload = (fn: () => Promise<Language[]>) =>\n  suspend.preload(() => fn(), [version, namespace])\n\n// Enhanced preload function that can use custom cache keys\nexport const preloadWithKey = (\n  fn: () => Promise<Language[]>,\n  key: (string | number)[]\n) => suspend.preload(() => fn(), key)\n\n// https://github.com/pmndrs/suspend-react#cache-busting\nexport const clear = () => suspend.clear([version, namespace])\n\n// https://github.com/pmndrs/suspend-react#peeking-into-entries-outside-of-suspense\nexport const peek = (selectedValue: Record<string, unknown>) =>\n  suspend.peek([version, namespace, selectedValue]) as Language[] | undefined\n\n// Helper function to create a stable cache key that matches the component's key structure\nexport const createCacheKey = (\n  selectedValue: Record<string, unknown>,\n  workspaceId?: string\n) => {\n  const selectedValueHash = JSON.stringify(selectedValue)\n  return workspaceId\n    ? [version, namespace, selectedValueHash, workspaceId]\n    : [version, namespace, selectedValueHash]\n}\n\n// Enhanced peek function that can work with workspace context\nexport const peekWithWorkspace = (\n  selectedValue: Record<string, unknown>,\n  workspaceId?: string\n) =>\n  suspend.peek(createCacheKey(selectedValue, workspaceId)) as\n    | Language[]\n    | undefined\n\n// Generate a unique key for a function reference (cached for performance)\nexport const getFunctionKey = (fn: LanguageCallback): string => {\n  // Check if we already have a cached key for this function\n  const cachedKey = functionKeyCache.get(fn)\n  if (cachedKey) {\n    return cachedKey\n  }\n\n  // Create a hash for functions (only when needed)\n  const fnStr = fn.toString()\n  let hash = 0\n  // Only hash the first 100 characters for performance\n  const maxLength = Math.min(fnStr.length, 100)\n  for (let i = 0; i < maxLength; i++) {\n    const char = fnStr.charCodeAt(i)\n    // eslint-disable-next-line no-bitwise\n    hash = (hash << 5) - hash + char\n    // eslint-disable-next-line no-bitwise\n    hash &= hash // Convert to 32-bit integer\n  }\n  const key = `anonymous_${Math.abs(hash)}`\n  functionKeyCache.set(fn, key)\n  return key\n}\n\n// Create a cache key that includes function identity\nexport const createFunctionCacheKey = (\n  fn: LanguageCallback,\n  selectedValue: Record<string, unknown>,\n  workspaceId?: string\n): string => {\n  const functionKey = getFunctionKey(fn)\n  const selectedValueHash = JSON.stringify(selectedValue)\n  return workspaceId\n    ? `${functionKey}:${selectedValueHash}:${workspaceId}`\n    : `${functionKey}:${selectedValueHash}`\n}\n\n// Cache for validation functions with function awareness\nexport const getValidationCache = (key: string): Language[] | undefined => {\n  return validationCache.get(key)\n}\n\nexport const setValidationCache = (\n  key: string,\n  languages: Language[]\n): void => {\n  validationCache.set(key, languages)\n}\n\nexport const clearValidationCache = (): void => {\n  validationCache.clear()\n}\n\n// Function-aware cache operations\nexport const getFunctionCache = (\n  fn: LanguageCallback,\n  selectedValue: Record<string, unknown>,\n  workspaceId?: string\n): Language[] | undefined => {\n  const key = createFunctionCacheKey(fn, selectedValue, workspaceId)\n  return functionCache.get(key)\n}\n\nexport const setFunctionCache = (\n  fn: LanguageCallback,\n  selectedValue: Record<string, unknown>,\n  languages: Language[],\n  workspaceId?: string\n): void => {\n  const key = createFunctionCacheKey(fn, selectedValue, workspaceId)\n  functionCache.set(key, languages)\n}\n\nexport const clearFunctionCache = (): void => {\n  functionCache.clear()\n}\n\n// Clear function key cache as well\nexport const clearAllCaches = (): void => {\n  functionCache.clear()\n  // Note: WeakMap doesn't have a clear method, but it will be garbage collected\n  // when the function references are no longer held\n}\n\n// Check if two functions are the same reference\nexport const isSameFunction = (\n  fn1: LanguageCallback,\n  fn2: LanguageCallback\n): boolean => {\n  return fn1 === fn2 || getFunctionKey(fn1) === getFunctionKey(fn2)\n}\n","import {PluginConfig} from './types'\n\nexport const MAX_COLUMNS = {\n  codeOnly: 5,\n  titleOnly: 4,\n  titleAndCode: 3,\n}\n\nexport const CONFIG_DEFAULT: Required<PluginConfig> = {\n  languages: [],\n  select: {},\n  defaultLanguages: [],\n  fieldTypes: [],\n  apiVersion: '2022-11-27',\n  buttonLocations: ['field'],\n  buttonAddAll: true,\n  languageDisplay: 'codeOnly',\n}\n","import {SanityDocument} from 'sanity'\n\nexport interface DocumentsToTranslate {\n  path: (string | number)[]\n  pathString: string\n  _key: string\n  _type: string\n  [key: string]: unknown\n}\n\nexport const getDocumentsToTranslate = (\n  value: SanityDocument | unknown,\n  rootPath: (string | number)[] = []\n): DocumentsToTranslate[] => {\n  if (Array.isArray(value)) {\n    const arrayRootPath = [...rootPath]\n\n    // if item contains internationalized return array\n    const internationalizedValues = value.filter((item) => {\n      if (Array.isArray(item)) return false\n\n      if (typeof item === 'object') {\n        const type = item?._type as string | undefined\n        return (\n          type?.startsWith('internationalizedArray') && type?.endsWith('Value')\n        )\n      }\n      return false\n    })\n\n    if (internationalizedValues.length > 0) {\n      return internationalizedValues.map((internationalizedValue) => {\n        return {\n          ...internationalizedValue,\n          path: arrayRootPath,\n          pathString: arrayRootPath.join('.'),\n        }\n      })\n    }\n\n    if (value.length > 0) {\n      return value\n        .map((item, index) =>\n          getDocumentsToTranslate(item, [...arrayRootPath, index])\n        )\n        .flat()\n    }\n\n    return []\n  }\n  if (typeof value === 'object' && value) {\n    const startsWithUnderscoreRegex = /^_/\n    const itemKeys = Object.keys(value).filter(\n      (key) => !key.match(startsWithUnderscoreRegex)\n    ) as (keyof typeof value)[]\n\n    return itemKeys\n      .map((item) => {\n        const selectedValue = value[item] as unknown\n        const path = [...rootPath, item]\n        return getDocumentsToTranslate(selectedValue, path)\n      })\n      .flat()\n  }\n  return []\n}\n","import {LanguageDisplay} from '../types'\n\nexport function getLanguageDisplay(\n  languageDisplay: LanguageDisplay,\n  title: string,\n  code: string\n): string {\n  if (languageDisplay === 'codeOnly') return code.toUpperCase()\n  if (languageDisplay === 'titleOnly') return title\n  if (languageDisplay === 'titleAndCode')\n    return `${title} (${code.toUpperCase()})`\n  return title\n}\n","import {AddIcon} from '@sanity/icons'\nimport {Button, Grid} from '@sanity/ui'\nimport type React from 'react'\nimport {memo} from 'react'\n\nimport {MAX_COLUMNS} from '../constants'\nimport type {Language, Value} from '../types'\nimport {getLanguageDisplay} from '../utils/getLanguageDisplay'\nimport {useInternationalizedArrayContext} from './InternationalizedArrayContext'\n\ntype AddButtonsProps = {\n  languages: Language[]\n  readOnly: boolean\n  value: Value[] | undefined\n  onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void\n}\n\nfunction AddButtons(props: AddButtonsProps) {\n  const {languages, readOnly, value, onClick} = props\n  const {languageDisplay} = useInternationalizedArrayContext()\n\n  return languages.length > 0 ? (\n    <Grid\n      columns={Math.min(languages.length, MAX_COLUMNS[languageDisplay])}\n      gap={2}\n    >\n      {languages.map((language) => {\n        const languageTitle: string = getLanguageDisplay(\n          languageDisplay,\n          language.title,\n          language.id\n        )\n        return (\n          <Button\n            key={language.id}\n            tone=\"primary\"\n            mode=\"ghost\"\n            fontSize={1}\n            disabled={\n              readOnly ||\n              Boolean(value?.find((item) => item._key === language.id))\n            }\n            text={languageTitle}\n            // Only show plus icon if there's one row or less AND only showing codes\n            icon={\n              languages.length > MAX_COLUMNS[languageDisplay] &&\n              languageDisplay === 'codeOnly'\n                ? undefined\n                : AddIcon\n            }\n            value={language.id}\n            onClick={onClick}\n          />\n        )\n      })}\n    </Grid>\n  ) : null\n}\n\nexport default memo(AddButtons)\n","import {Box, Stack, Text, useToast} from '@sanity/ui'\nimport React, {useCallback} from 'react'\nimport {\n  FormInsertPatch,\n  FormSetIfMissingPatch,\n  insert,\n  isSanityDocument,\n  PatchEvent,\n  setIfMissing,\n} from 'sanity'\nimport {useDocumentPane} from 'sanity/structure'\n\nimport {\n  DocumentsToTranslate,\n  getDocumentsToTranslate,\n} from '../utils/getDocumentsToTranslate'\nimport AddButtons from './AddButtons'\nimport {useInternationalizedArrayContext} from './InternationalizedArrayContext'\n\ntype DocumentAddButtonsProps = {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  value: Record<string, any> | undefined\n}\nexport default function DocumentAddButtons(props: DocumentAddButtonsProps) {\n  const {filteredLanguages} = useInternationalizedArrayContext()\n  const value = isSanityDocument(props.value) ? props.value : undefined\n\n  const toast = useToast()\n  const {onChange} = useDocumentPane()\n\n  const documentsToTranslation = getDocumentsToTranslate(value, [])\n\n  const handleDocumentButtonClick = useCallback(\n    async (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n      const languageId = event.currentTarget.value\n      if (!languageId) {\n        toast.push({\n          status: 'error',\n          title: 'No language selected',\n        })\n        return\n      }\n      const alreadyTranslated = documentsToTranslation.filter(\n        (translation) => translation?._key === languageId\n      )\n      const removeDuplicates = documentsToTranslation.reduce<\n        DocumentsToTranslate[]\n      >((filteredTranslations, translation) => {\n        if (\n          alreadyTranslated.filter(\n            (alreadyTranslation) =>\n              alreadyTranslation.pathString === translation.pathString\n          ).length > 0\n        ) {\n          return filteredTranslations\n        }\n        const translationAlreadyExists = filteredTranslations.filter(\n          (filteredTranslation) => filteredTranslation.path === translation.path\n        )\n\n        if (translationAlreadyExists.length > 0) {\n          return filteredTranslations\n        }\n        return [...filteredTranslations, translation]\n      }, [])\n      if (removeDuplicates.length === 0) {\n        toast.push({\n          status: 'error',\n          title: 'No internationalizedArray fields found in document root',\n        })\n        return\n      }\n\n      // Write a new patch for each empty field\n      const patches: (FormSetIfMissingPatch | FormInsertPatch)[] = []\n\n      for (const toTranslate of removeDuplicates) {\n        const path = toTranslate.path\n\n        const ifMissing = setIfMissing([], path)\n        const insertValue = insert(\n          [\n            {\n              _key: languageId,\n              _type: toTranslate._type,\n              value: undefined,\n            },\n          ],\n          'after',\n          [...path, -1]\n        )\n        patches.push(ifMissing)\n        patches.push(insertValue)\n      }\n\n      onChange(PatchEvent.from(patches.flat()))\n    },\n    [documentsToTranslation, onChange, toast]\n  )\n  return (\n    <Stack space={3}>\n      <Box>\n        <Text size={1} weight=\"semibold\">\n          Add translation to internationalized fields\n        </Text>\n      </Box>\n      <AddButtons\n        languages={filteredLanguages}\n        readOnly={false}\n        value={undefined}\n        onClick={handleDocumentButtonClick}\n      />\n    </Stack>\n  )\n}\n","import {get} from 'lodash'\n\nexport const getSelectedValue = (\n  select: Record<string, string> | undefined,\n  document:\n    | {\n        [x: string]: unknown\n      }\n    | undefined\n): Record<string, unknown> => {\n  if (!select || !document) {\n    return {}\n  }\n\n  const selection: Record<string, string> = select || {}\n  const selectedValue: Record<string, unknown> = {}\n  for (const [key, path] of Object.entries(selection)) {\n    let value = get(document, path)\n    if (Array.isArray(value)) {\n      // If there are references in the array, ensure they have `_ref` set, otherwise they are considered empty and can safely be ignored\n      value = value.filter((item) =>\n        typeof item === 'object'\n          ? item?._type === 'reference' && '_ref' in item\n          : true\n      )\n    }\n    selectedValue[key] = value\n  }\n\n  return selectedValue\n}\n","import {useLanguageFilterStudioContext} from '@sanity/language-filter'\nimport {Stack} from '@sanity/ui'\nimport equal from 'fast-deep-equal'\nimport {createContext, useContext, useDeferredValue, useMemo} from 'react'\nimport {type ObjectInputProps, useClient, useWorkspace} from 'sanity'\nimport {useDocumentPane} from 'sanity/structure'\nimport {suspend} from 'suspend-react'\n\nimport {createCacheKey, setFunctionCache} from '../cache'\nimport {CONFIG_DEFAULT} from '../constants'\nimport type {Language, PluginConfig} from '../types'\nimport DocumentAddButtons from './DocumentAddButtons'\nimport {getSelectedValue} from './getSelectedValue'\n\n// This provider makes the plugin config available to all components in the document form\n// But with languages resolved and filtered languages updated base on @sanity/language-filter\n\ntype InternationalizedArrayContextProps = Required<PluginConfig> & {\n  languages: Language[]\n  filteredLanguages: Language[]\n}\n\nexport const InternationalizedArrayContext =\n  createContext<InternationalizedArrayContextProps>({\n    ...CONFIG_DEFAULT,\n    languages: [],\n    filteredLanguages: [],\n  })\n\nexport function useInternationalizedArrayContext() {\n  return useContext(InternationalizedArrayContext)\n}\n\ntype InternationalizedArrayProviderProps = ObjectInputProps & {\n  internationalizedArray: Required<PluginConfig>\n}\n\nexport function InternationalizedArrayProvider(\n  props: InternationalizedArrayProviderProps\n) {\n  const {internationalizedArray} = props\n\n  const client = useClient({apiVersion: internationalizedArray.apiVersion})\n  const workspace = useWorkspace()\n  const {formState} = useDocumentPane()\n  const deferredDocument = useDeferredValue(formState?.value)\n  const selectedValue = useMemo(\n    () => getSelectedValue(internationalizedArray.select, deferredDocument),\n    [internationalizedArray.select, deferredDocument]\n  )\n\n  // Use a stable workspace identifier to prevent unnecessary re-renders\n  const workspaceId = useMemo(() => {\n    // Use workspace name if available, otherwise create a stable hash\n    if (workspace?.name) {\n      return workspace.name\n    }\n    // Create a stable hash from workspace properties that matter for caching\n    const workspaceKey = {\n      name: workspace?.name,\n      title: workspace?.title,\n      // Add other stable properties as needed\n    }\n    return JSON.stringify(workspaceKey)\n  }, [workspace])\n\n  // Memoize the cache key to prevent expensive JSON.stringify calls\n  const cacheKey = useMemo(\n    () => createCacheKey(selectedValue, workspaceId),\n    [selectedValue, workspaceId]\n  )\n\n  // Fetch or return languages\n  const languages = Array.isArray(internationalizedArray.languages)\n    ? internationalizedArray.languages\n    : suspend(\n        // eslint-disable-next-line require-await\n        async () => {\n          if (typeof internationalizedArray.languages === 'function') {\n            const result = await internationalizedArray.languages(\n              client,\n              selectedValue\n            )\n            // Populate function cache for use outside React context\n            setFunctionCache(\n              internationalizedArray.languages,\n              selectedValue,\n              result,\n              workspaceId\n            )\n            return result\n          }\n          return internationalizedArray.languages\n        },\n        cacheKey,\n        {equal}\n      )\n\n  // Filter out some languages if language filter is enabled\n  const {selectedLanguageIds, options: languageFilterOptions} =\n    useLanguageFilterStudioContext()\n\n  const filteredLanguages = useMemo(() => {\n    const documentType = deferredDocument ? deferredDocument._type : undefined\n    const languageFilterEnabled =\n      typeof documentType === 'string' &&\n      languageFilterOptions.documentTypes.includes(documentType)\n\n    return languageFilterEnabled\n      ? languages.filter((language) =>\n          selectedLanguageIds.includes(language.id)\n        )\n      : languages\n  }, [deferredDocument, languageFilterOptions, languages, selectedLanguageIds])\n\n  const showDocumentButtons =\n    internationalizedArray.buttonLocations.includes('document')\n  const context = useMemo(\n    () => ({...internationalizedArray, languages, filteredLanguages}),\n    [filteredLanguages, internationalizedArray, languages]\n  )\n\n  return (\n    <InternationalizedArrayContext.Provider value={context}>\n      {showDocumentButtons ? (\n        <Stack space={5}>\n          <DocumentAddButtons value={props.value} />\n          {props.renderDefault(props)}\n        </Stack>\n      ) : (\n        props.renderDefault(props)\n      )}\n    </InternationalizedArrayContext.Provider>\n  )\n}\n","import type {ReactNode} from 'react'\nimport {useMemo} from 'react'\nimport {type FieldProps} from 'sanity'\n\nimport {useInternationalizedArrayContext} from './InternationalizedArrayContext'\n\nexport default function InternationalizedField(props: FieldProps): ReactNode {\n  const {languages} = useInternationalizedArrayContext()\n\n  // hide titles for 'value' fields within valid language entries\n  const customProps = useMemo(() => {\n    const pathSegment = props.path.slice(0, -1)[1]\n    const languageId =\n      typeof pathSegment === 'object' && '_key' in pathSegment\n        ? pathSegment._key\n        : undefined\n    const hasValidLanguageId = languageId\n      ? languages.some((l) => l.id === languageId)\n      : false\n    const shouldHideTitle =\n      props.title?.toLowerCase() === 'value' && hasValidLanguageId\n\n    return {\n      ...props,\n      title: shouldHideTitle ? '' : props.title,\n    }\n  }, [props, languages])\n\n  if (!customProps.schemaType.name.startsWith('internationalizedArray')) {\n    return customProps.renderDefault(customProps)\n  }\n\n  // Show reference field selector if there's a value\n  if (customProps.schemaType.name === 'reference' && customProps.value) {\n    return customProps.renderDefault({\n      ...customProps,\n      title: '',\n      level: 0, // Reset the level to avoid nested styling\n    })\n  }\n\n  // For basic field types, we can use children to keep the simple input\n  if (\n    customProps.schemaType.name === 'string' ||\n    customProps.schemaType.name === 'number' ||\n    customProps.schemaType.name === 'text'\n  ) {\n    return customProps.children\n  }\n\n  // For complex fields (like markdown), we need to use renderDefault\n  // to get all the field's functionality\n  return customProps.renderDefault({\n    ...customProps,\n    level: 0, // Reset the level to avoid nested styling\n  })\n}\n","import {memo} from 'react'\nimport {useClient} from 'sanity'\n\nimport {createCacheKey, peek, preloadWithKey, setFunctionCache} from '../cache'\nimport type {PluginConfig} from '../types'\n\nexport default memo(function Preload(\n  props: Required<Pick<PluginConfig, 'apiVersion' | 'languages'>>\n) {\n  const client = useClient({apiVersion: props.apiVersion})\n\n  // Use the same cache key structure as the main component\n  // This should match the main component when selectedValue is empty\n  const cacheKey = createCacheKey({})\n\n  if (!Array.isArray(peek({}))) {\n    // eslint-disable-next-line require-await\n    preloadWithKey(async () => {\n      if (Array.isArray(props.languages)) {\n        return props.languages\n      }\n      const result = await props.languages(client, {})\n      // Populate function cache for sharing with other components\n      // Use the same key structure as the main component\n      setFunctionCache(props.languages, {}, result)\n      return result\n    }, cacheKey)\n  }\n\n  return null\n})\n","import {Language, Value} from '../types'\n\nexport function checkAllLanguagesArePresent(\n  languages: Language[],\n  value: Value[] | undefined\n): boolean {\n  const filteredLanguageIds = languages.map((l) => l.id)\n  const languagesInUseIds = value ? value.map((v) => v._key) : []\n\n  return (\n    languagesInUseIds.length === filteredLanguageIds.length &&\n    languagesInUseIds.every((l) => filteredLanguageIds.includes(l))\n  )\n}\n","import {Language, Value} from '../types'\n\nexport function createAddAllTitle(\n  value: Value[] | undefined,\n  languages: Language[]\n): string {\n  if (value?.length) {\n    return `Add missing ${\n      languages.length - value.length === 1 ? `language` : `languages`\n    }`\n  }\n\n  return languages.length === 1\n    ? `Add ${languages[0].title} Field`\n    : `Add all languages`\n}\n","import {SchemaType} from 'sanity'\n\nexport function createValueSchemaTypeName(schemaType: SchemaType): string {\n  return `${schemaType.name}Value`\n}\n","import {FormInsertPatch, insert, Path, SchemaType} from 'sanity'\n\nimport {Language, Value} from '../types'\nimport {createValueSchemaTypeName} from './createValueSchemaTypeName'\n\ntype AddConfig = {\n  // New keys to add to the field\n  addLanguageKeys: string[]\n  // Schema of the current field\n  schemaType: SchemaType\n  // All languages registered in the plugin\n  languages: Language[]\n  // Languages that are currently visible\n  filteredLanguages: Language[]\n  // Current value of the internationalizedArray field\n  value?: Value[]\n  // Path to this item\n  path?: Path\n}\n\nexport function createAddLanguagePatches(config: AddConfig): FormInsertPatch[] {\n  const {\n    addLanguageKeys,\n    schemaType,\n    languages,\n    filteredLanguages,\n    value,\n    path = [],\n  } = config\n\n  const itemBase = {_type: createValueSchemaTypeName(schemaType)}\n\n  // Create new items\n  const getNewItems = () => {\n    if (Array.isArray(addLanguageKeys) && addLanguageKeys.length > 0) {\n      return addLanguageKeys.map((id) => ({\n        ...itemBase,\n        _key: id,\n      }))\n    }\n\n    return filteredLanguages\n      .filter((language) =>\n        value?.length ? !value.find((v) => v._key === language.id) : true\n      )\n      .map((language) => ({\n        ...itemBase,\n        _key: language.id,\n      }))\n  }\n  const newItems = getNewItems()\n\n  // Insert new items in the correct order\n  const languagesInUse = value?.length ? value.map((v) => v) : []\n\n  const insertions = newItems.map((item) => {\n    // What's the original index of this language?\n    const languageIndex = languages.findIndex((l) => item._key === l.id)\n\n    // What languages are there beyond that index?\n    const remainingLanguages = languages.slice(languageIndex + 1)\n\n    // So what is the index in the current value array of the next language in the language array?\n    const nextLanguageIndex = languagesInUse.findIndex((l) =>\n      // eslint-disable-next-line max-nested-callbacks\n      remainingLanguages.find((r) => r.id === l._key)\n    )\n\n    // Keep local state up to date incase multiple insertions are being made\n    if (nextLanguageIndex < 0) {\n      languagesInUse.push(item)\n    } else {\n      languagesInUse.splice(nextLanguageIndex, 0, item)\n    }\n\n    return nextLanguageIndex < 0\n      ? // No next language (-1), add to end of array\n        insert([item], 'after', [...path, nextLanguageIndex])\n      : // Next language found, insert before that\n        insert([item], 'before', [...path, nextLanguageIndex])\n  })\n\n  return insertions\n}\n","import {AddIcon, TranslateIcon} from '@sanity/icons'\nimport {useCallback} from 'react'\nimport {\n  defineDocumentFieldAction,\n  type DocumentFieldActionItem,\n  type DocumentFieldActionProps,\n  PatchEvent,\n  setIfMissing,\n  useFormValue,\n} from 'sanity'\nimport {useDocumentPane} from 'sanity/structure'\n\nimport {useInternationalizedArrayContext} from '../components/InternationalizedArrayContext'\nimport type {Language, Value} from '../types'\nimport {checkAllLanguagesArePresent} from '../utils/checkAllLanguagesArePresent'\nimport {createAddAllTitle} from '../utils/createAddAllTitle'\nimport {createAddLanguagePatches} from '../utils/createAddLanguagePatches'\n\nconst createTranslateFieldActions: (\n  fieldActionProps: DocumentFieldActionProps,\n  context: {\n    languages: Language[]\n    filteredLanguages: Language[]\n  }\n) => DocumentFieldActionItem[] = (\n  fieldActionProps,\n  {languages, filteredLanguages}\n) =>\n  languages.map((language) => {\n    const value = useFormValue(fieldActionProps.path) as Value[]\n    const disabled =\n      value && Array.isArray(value)\n        ? Boolean(value?.find((item) => item._key === language.id))\n        : false\n    const hidden = !filteredLanguages.some((f) => f.id === language.id)\n\n    const {onChange} = useDocumentPane()\n\n    const onAction = useCallback(() => {\n      const {schemaType, path} = fieldActionProps\n\n      const addLanguageKeys = [language.id]\n      const patches = createAddLanguagePatches({\n        addLanguageKeys,\n        schemaType,\n        languages,\n        filteredLanguages,\n        value,\n        path,\n      })\n\n      onChange(PatchEvent.from([setIfMissing([], path), ...patches]))\n    }, [language.id, value, onChange])\n\n    return {\n      type: 'action',\n      icon: AddIcon,\n      onAction,\n      title: language.title,\n      hidden,\n      disabled,\n    }\n  })\n\nconst AddMissingTranslationsFieldAction: (\n  fieldActionProps: DocumentFieldActionProps,\n  context: {\n    languages: Language[]\n    filteredLanguages: Language[]\n  }\n) => DocumentFieldActionItem = (\n  fieldActionProps,\n  {languages, filteredLanguages}\n) => {\n  const value = useFormValue(fieldActionProps.path) as Value[]\n  const disabled = value && value.length === filteredLanguages.length\n  const hidden = checkAllLanguagesArePresent(filteredLanguages, value)\n\n  const {onChange} = useDocumentPane()\n\n  const onAction = useCallback(() => {\n    const {schemaType, path} = fieldActionProps\n\n    const addLanguageKeys: string[] = []\n    const patches = createAddLanguagePatches({\n      addLanguageKeys,\n      schemaType,\n      languages,\n      filteredLanguages,\n      value,\n      path,\n    })\n\n    onChange(PatchEvent.from([setIfMissing([], path), ...patches]))\n  }, [fieldActionProps, filteredLanguages, languages, onChange, value])\n\n  return {\n    type: 'action',\n    icon: AddIcon,\n    onAction,\n    title: createAddAllTitle(value, filteredLanguages),\n    disabled,\n    hidden,\n  }\n}\n\nexport const internationalizedArrayFieldAction = defineDocumentFieldAction({\n  name: 'internationalizedArray',\n  useAction(fieldActionProps) {\n    const isInternationalizedArrayField =\n      fieldActionProps?.schemaType?.type?.name.startsWith(\n        'internationalizedArray'\n      )\n    const {languages, filteredLanguages} = useInternationalizedArrayContext()\n\n    const translateFieldActions = createTranslateFieldActions(\n      fieldActionProps,\n      {languages, filteredLanguages}\n    )\n\n    return {\n      type: 'group',\n      icon: TranslateIcon,\n      title: 'Add Translation',\n      renderAsButton: true,\n      children: isInternationalizedArrayField\n        ? [\n            ...translateFieldActions,\n            AddMissingTranslationsFieldAction(fieldActionProps, {\n              languages,\n              filteredLanguages,\n            }),\n          ]\n        : [],\n      hidden: !isInternationalizedArrayField,\n    }\n  },\n})\n","export function camelCase(string: string): string {\n  return string.replace(/-([a-z])/g, (g) => g[1].toUpperCase())\n}\n\nexport function titleCase(string: string): string {\n  return string\n    .split(` `)\n    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))\n    .join(` `)\n}\n\nexport function pascalCase(string: string): string {\n  return titleCase(camelCase(string))\n}\n\nexport function createFieldName(name: string, addValue = false): string {\n  return addValue\n    ? [`internationalizedArray`, pascalCase(name), `Value`].join(``)\n    : [`internationalizedArray`, pascalCase(name)].join(``)\n}\n","import {Card, Code, Stack, Text} from '@sanity/ui'\n\nconst schemaExample = {\n  languages: [\n    {id: 'en', title: 'English'},\n    {id: 'no', title: 'Norsk'},\n  ],\n}\n\nexport default function Feedback() {\n  return (\n    <Card tone=\"caution\" border radius={2} padding={3}>\n      <Stack space={4}>\n        <Text>\n          An array of language objects must be passed into the{' '}\n          <code>internationalizedArray</code> helper function, each with an{' '}\n          <code>id</code> and <code>title</code> field. Example:\n        </Text>\n        <Card padding={2} border radius={2}>\n          <Code size={1} language=\"javascript\">\n            {JSON.stringify(schemaExample, null, 2)}\n          </Code>\n        </Card>\n      </Stack>\n    </Card>\n  )\n}\n","import {AddIcon} from '@sanity/icons'\nimport {useLanguageFilterStudioContext} from '@sanity/language-filter'\nimport {Button, Card, Stack, Text, useToast} from '@sanity/ui'\nimport type React from 'react'\nimport {useCallback, useEffect, useMemo} from 'react'\nimport {\n  type ArrayOfObjectsInputProps,\n  ArrayOfObjectsItem,\n  type ArraySchemaType,\n  MemberItemError,\n  set,\n  setIfMissing,\n  useFormValue,\n} from 'sanity'\nimport {useDocumentPane} from 'sanity/structure'\n\nimport type {Value} from '../types'\nimport {checkAllLanguagesArePresent} from '../utils/checkAllLanguagesArePresent'\nimport {createAddAllTitle} from '../utils/createAddAllTitle'\nimport {createAddLanguagePatches} from '../utils/createAddLanguagePatches'\nimport AddButtons from './AddButtons'\nimport Feedback from './Feedback'\nimport {useInternationalizedArrayContext} from './InternationalizedArrayContext'\n\nexport type InternationalizedArrayProps = ArrayOfObjectsInputProps<\n  Value,\n  ArraySchemaType\n>\n\nexport default function InternationalizedArray(\n  props: InternationalizedArrayProps\n) {\n  const {members, value, schemaType, onChange} = props\n\n  const readOnly =\n    typeof schemaType.readOnly === 'boolean' ? schemaType.readOnly : false\n  const toast = useToast()\n\n  const {\n    languages,\n    filteredLanguages,\n    defaultLanguages,\n    buttonAddAll,\n    buttonLocations,\n  } = useInternationalizedArrayContext()\n\n  // Support updating the UI if languageFilter is installed\n  const {selectedLanguageIds, options: languageFilterOptions} =\n    useLanguageFilterStudioContext()\n  const documentType = useFormValue(['_type'])\n  const languageFilterEnabled =\n    typeof documentType === 'string' &&\n    languageFilterOptions.documentTypes.includes(documentType)\n\n  const filteredMembers = useMemo(\n    () =>\n      languageFilterEnabled\n        ? members.filter((member) => {\n            // This member is the outer object created by the plugin\n            // Satisfy TS\n            if (member.kind !== 'item') {\n              return false\n            }\n\n            // This is the inner \"value\" field member created by this plugin\n            const valueMember = member.item.members[0]\n\n            // Satisfy TS\n            if (valueMember.kind !== 'field') {\n              return false\n            }\n\n            return languageFilterOptions.filterField(\n              member.item.schemaType,\n              valueMember,\n              selectedLanguageIds\n            )\n          })\n        : members,\n    [languageFilterEnabled, members, languageFilterOptions, selectedLanguageIds]\n  )\n\n  const handleAddLanguage = useCallback(\n    async (\n      param?: React.MouseEvent<HTMLButtonElement, MouseEvent> | string[]\n    ) => {\n      if (!filteredLanguages?.length) {\n        return\n      }\n\n      const addLanguageKeys: string[] = Array.isArray(param)\n        ? param\n        : ([param?.currentTarget?.value].filter(Boolean) as string[])\n\n      const patches = createAddLanguagePatches({\n        addLanguageKeys,\n        schemaType,\n        languages,\n        filteredLanguages,\n        value,\n      })\n\n      onChange([setIfMissing([]), ...patches])\n    },\n    [filteredLanguages, languages, onChange, schemaType, value]\n  )\n\n  const {isDeleting} = useDocumentPane()\n\n  const addedLanguages = members.map(({key}) => key)\n  const hasAddedDefaultLanguages = defaultLanguages\n    .filter((language) => languages.find((l) => l.id === language))\n    .every((language) => addedLanguages.includes(language))\n\n  useEffect(() => {\n    if (!isDeleting && !hasAddedDefaultLanguages) {\n      const languagesToAdd = defaultLanguages\n        .filter((language) => !addedLanguages.includes(language))\n        .filter((language) => languages.find((l) => l.id === language))\n      // Account for strict mode by scheduling the update\n      const timeout = setTimeout(() => handleAddLanguage(languagesToAdd))\n      return () => clearTimeout(timeout)\n    }\n    return undefined\n  }, [\n    isDeleting,\n    hasAddedDefaultLanguages,\n    handleAddLanguage,\n    defaultLanguages,\n    addedLanguages,\n    languages,\n  ])\n\n  // TODO: This is reordering and re-setting the whole array, it could be surgical\n  const handleRestoreOrder = useCallback(() => {\n    if (!value?.length || !languages?.length) {\n      return\n    }\n\n    // Create a new value array in the correct order\n    // This would also strip out values that don't have a language as the key\n    const updatedValue = value\n      .reduce((acc, v) => {\n        const newIndex = languages.findIndex((l) => l.id === v?._key)\n\n        if (newIndex > -1) {\n          acc[newIndex] = v\n        }\n\n        return acc\n      }, [] as Value[])\n      .filter(Boolean)\n\n    if (value?.length !== updatedValue.length) {\n      toast.push({\n        title: 'There was an error reordering languages',\n        status: 'warning',\n      })\n    }\n\n    onChange(set(updatedValue))\n  }, [toast, languages, onChange, value])\n\n  const allKeysAreLanguages = useMemo(() => {\n    if (!value?.length || !languages?.length) {\n      return true\n    }\n\n    return value?.every((v) => languages.find((l) => l?.id === v?._key))\n  }, [value, languages])\n\n  // Check languages are in the correct order\n  const languagesInUse = useMemo(\n    () =>\n      languages && languages.length > 1\n        ? languages.filter((l) => value?.find((v) => v._key === l.id))\n        : [],\n    [languages, value]\n  )\n\n  const languagesOutOfOrder = useMemo(() => {\n    if (!value?.length || !languagesInUse.length) {\n      return []\n    }\n\n    return value\n      .map((v, vIndex) =>\n        vIndex === languagesInUse.findIndex((l) => l.id === v._key) ? null : v\n      )\n      .filter(Boolean)\n  }, [value, languagesInUse])\n\n  const languagesAreValid = useMemo(\n    () =>\n      !languages?.length ||\n      (languages?.length && languages.every((item) => item.id && item.title)),\n    [languages]\n  )\n\n  // Automatically restore order of fields\n  useEffect(() => {\n    if (languagesOutOfOrder.length > 0 && allKeysAreLanguages) {\n      handleRestoreOrder()\n    }\n  }, [languagesOutOfOrder, allKeysAreLanguages, handleRestoreOrder])\n\n  // compare value keys with possible languages\n  const allLanguagesArePresent = useMemo(\n    () => checkAllLanguagesArePresent(filteredLanguages, value),\n    [filteredLanguages, value]\n  )\n\n  if (!languagesAreValid) {\n    return <Feedback />\n  }\n\n  const addButtonsAreVisible =\n    // Plugin was configured to display buttons here (default!)\n    buttonLocations.includes('field') &&\n    // There's at least one language visible\n    filteredLanguages?.length > 0 &&\n    // Not every language has a value yet\n    !allLanguagesArePresent\n  const fieldHasMembers = members?.length > 0\n\n  return (\n    <Stack space={2}>\n      {fieldHasMembers ? (\n        <>\n          {filteredMembers.map((member) => {\n            if (member.kind === 'item') {\n              return (\n                <ArrayOfObjectsItem\n                  {...props}\n                  key={member.key}\n                  member={member}\n                />\n              )\n            }\n\n            return <MemberItemError key={member.key} member={member} />\n          })}\n        </>\n      ) : null}\n\n      {/* Give some feedback in the UI so the field doesn't look \"missing\" */}\n      {!addButtonsAreVisible && !fieldHasMembers ? (\n        <Card border tone=\"transparent\" padding={3} radius={2}>\n          <Text size={1}>\n            This internationalized field currently has no translations.\n          </Text>\n        </Card>\n      ) : null}\n\n      {addButtonsAreVisible ? (\n        <Stack space={2}>\n          <AddButtons\n            languages={filteredLanguages}\n            value={value}\n            readOnly={readOnly}\n            onClick={handleAddLanguage}\n          />\n          {buttonAddAll ? (\n            <Button\n              tone=\"primary\"\n              mode=\"ghost\"\n              disabled={readOnly || allLanguagesArePresent}\n              icon={AddIcon}\n              text={createAddAllTitle(value, filteredLanguages)}\n              onClick={handleAddLanguage}\n            />\n          ) : null}\n        </Stack>\n      ) : null}\n    </Stack>\n  )\n}\n","import {SchemaType} from 'sanity'\n\nimport {ArrayFieldOptions} from '../schema/array'\n\nexport function getLanguagesFieldOption(\n  schemaType: SchemaType | undefined\n): ArrayFieldOptions['languages'] | undefined {\n  if (!schemaType) {\n    return undefined\n  }\n  const languagesOption = (schemaType.options as ArrayFieldOptions)?.languages\n  if (languagesOption) {\n    return languagesOption\n  }\n  return getLanguagesFieldOption(schemaType.type)\n}\n","/* eslint-disable no-nested-ternary */\nimport {defineField, type FieldDefinition, type Rule} from 'sanity'\n\nimport {getFunctionCache, peek, setFunctionCache} from '../cache'\nimport {createFieldName} from '../components/createFieldName'\nimport {getSelectedValue} from '../components/getSelectedValue'\nimport InternationalizedArray from '../components/InternationalizedArray'\nimport type {Language, LanguageCallback, Value} from '../types'\nimport {getLanguagesFieldOption} from '../utils/getLanguagesFieldOption'\n\ntype ArrayFactoryConfig = {\n  apiVersion: string\n  select?: Record<string, string>\n  languages: Language[] | LanguageCallback\n  defaultLanguages?: string[]\n  type: string | FieldDefinition\n}\n\nexport type ArrayFieldOptions = Pick<\n  ArrayFactoryConfig,\n  'apiVersion' | 'select' | 'languages'\n>\n\nexport default (config: ArrayFactoryConfig): FieldDefinition<'array'> => {\n  const {apiVersion, select, languages, type} = config\n  const typeName = typeof type === `string` ? type : type.name\n  const arrayName = createFieldName(typeName)\n  const objectName = createFieldName(typeName, true)\n\n  return defineField({\n    name: arrayName,\n    title: 'Internationalized array',\n    type: 'array',\n    components: {\n      input: InternationalizedArray,\n    },\n    options: {\n      // @ts-expect-error - these options are required for validation rules – not the custom input component\n      apiVersion,\n      select,\n      languages,\n    },\n    of: [\n      defineField({\n        ...(typeof type === 'string' ? {} : type),\n        name: objectName,\n        type: objectName,\n      }),\n    ],\n    // @ts-expect-error - fix typings\n    validation: (rule: Rule) =>\n      rule.custom<Value[]>(async (value, context) => {\n        if (!value || value.length === 0) {\n          return true\n        }\n\n        // Early return for simple cases to avoid expensive operations\n        if (value.length === 1 && !value[0]?._key) {\n          return true\n        }\n\n        const selectedValue = getSelectedValue(select, context.document)\n        const client = context.getClient({apiVersion})\n\n        let contextLanguages: Language[] = []\n        const languagesFieldOption = getLanguagesFieldOption(context?.type)\n\n        if (Array.isArray(languagesFieldOption)) {\n          contextLanguages = languagesFieldOption\n        } else if (Array.isArray(peek(selectedValue))) {\n          contextLanguages = peek(selectedValue) || []\n        } else if (typeof languagesFieldOption === 'function') {\n          // Try to get from function cache first (if it's the same function as the component)\n          const cachedLanguages = getFunctionCache(\n            languagesFieldOption,\n            selectedValue\n          )\n\n          if (Array.isArray(cachedLanguages)) {\n            contextLanguages = cachedLanguages\n          } else {\n            // Try suspend cache as fallback\n            const suspendCachedLanguages = peek(selectedValue)\n            if (Array.isArray(suspendCachedLanguages)) {\n              contextLanguages = suspendCachedLanguages\n            } else {\n              // Only make the async call if we don't have cached data\n              contextLanguages = await languagesFieldOption(\n                client,\n                selectedValue\n              )\n              // Cache the result for future validation calls\n              setFunctionCache(\n                languagesFieldOption,\n                selectedValue,\n                contextLanguages\n              )\n            }\n          }\n        }\n\n        if (value && value.length > contextLanguages.length) {\n          return `Cannot be more than ${\n            contextLanguages.length === 1\n              ? `1 item`\n              : `${contextLanguages.length} items`\n          }`\n        }\n\n        // Create a Set for faster language ID lookups\n        const languageIds = new Set(contextLanguages.map((lang) => lang.id))\n\n        // Check for invalid language keys\n        const nonLanguageKeys = value.filter(\n          (item) => item?._key && !languageIds.has(item._key)\n        )\n        if (nonLanguageKeys.length) {\n          return {\n            message: `Array item keys must be valid languages registered to the field type`,\n            paths: nonLanguageKeys.map((item) => [{_key: item._key}]),\n          }\n        }\n\n        // Check for duplicate language keys (more efficient)\n        const seenKeys = new Set<string>()\n        const duplicateValues: Value[] = []\n\n        for (const item of value) {\n          if (item?._key) {\n            if (seenKeys.has(item._key)) {\n              duplicateValues.push(item)\n            } else {\n              seenKeys.add(item._key)\n            }\n          }\n        }\n\n        if (duplicateValues.length) {\n          return {\n            message: 'There can only be one field per language',\n            paths: duplicateValues.map((item) => [{_key: item._key}]),\n          }\n        }\n\n        return true\n      }),\n  })\n}\n","import type {CardTone} from '@sanity/ui'\nimport type {FormNodeValidation} from 'sanity'\n\nexport function getToneFromValidation(\n  validations: FormNodeValidation[]\n): CardTone | undefined {\n  if (!validations?.length) {\n    return undefined\n  }\n\n  const validationLevels = validations.map((v) => v.level)\n\n  if (validationLevels.includes('error')) {\n    return `critical`\n  } else if (validationLevels.includes('warning')) {\n    return `caution`\n  }\n\n  return undefined\n}\n","import {RemoveCircleIcon} from '@sanity/icons'\nimport {\n  Button,\n  Card,\n  Flex,\n  Label,\n  Menu,\n  MenuButton,\n  MenuItem,\n  Spinner,\n  Stack,\n  Text,\n  Tooltip,\n} from '@sanity/ui'\nimport type React from 'react'\nimport {ReactNode, useCallback, useMemo} from 'react'\nimport {type ObjectItemProps, useFormValue} from 'sanity'\nimport {set, unset} from 'sanity'\n\nimport {getLanguageDisplay} from '../utils/getLanguageDisplay'\nimport {getToneFromValidation} from './getToneFromValidation'\nimport {useInternationalizedArrayContext} from './InternationalizedArrayContext'\n\nexport type InternationalizedValue = {\n  _type: string\n  _key: string\n  value: string\n}\n\nexport default function InternationalizedInput(\n  props: ObjectItemProps<InternationalizedValue>\n): ReactNode {\n  const parentValue = useFormValue(\n    props.path.slice(0, -1)\n  ) as InternationalizedValue[]\n\n  const inlineProps = {\n    ...props.inputProps,\n    // This is the magic that makes inline editing work?\n    members: props.inputProps.members.filter(\n      (m) => m.kind === 'field' && m.name === 'value'\n    ),\n    // This just overrides the type\n    // Remove this as it shouldn't be necessary?\n    value: props.value as InternationalizedValue,\n  }\n\n  const {validation, value, onChange, readOnly} = inlineProps\n\n  // The parent array contains the languages from the plugin config\n  const {languages, languageDisplay, defaultLanguages} =\n    useInternationalizedArrayContext()\n\n  const languageKeysInUse = useMemo(\n    () => parentValue?.map((v) => v._key) ?? [],\n    [parentValue]\n  )\n  const keyIsValid = languages?.length\n    ? languages.find((l) => l.id === value._key)\n    : false\n\n  // Changes the key of this item, ideally to a valid language\n  const handleKeyChange = useCallback(\n    (event: React.MouseEvent<HTMLButtonElement, MouseEvent>): void => {\n      const languageId = event?.currentTarget?.value\n\n      if (\n        !value ||\n        !languages?.length ||\n        !languages.find((l) => l.id === languageId)\n      ) {\n        return\n      }\n\n      onChange([set(languageId, ['_key'])])\n    },\n    [onChange, value, languages]\n  )\n\n  // Removes this item from the array\n  const handleUnset = useCallback((): void => {\n    onChange(unset())\n  }, [onChange])\n\n  if (!languages) {\n    return <Spinner />\n  }\n\n  const language = languages.find((l) => l.id === value._key)\n  const languageTitle: string =\n    keyIsValid && language\n      ? getLanguageDisplay(languageDisplay, language.title, language.id)\n      : ''\n\n  const isDefault = defaultLanguages.includes(value._key)\n\n  const removeButton = (\n    <Button\n      mode=\"bleed\"\n      icon={RemoveCircleIcon}\n      tone=\"critical\"\n      disabled={readOnly || isDefault}\n      onClick={handleUnset}\n    />\n  )\n\n  return (\n    <Card paddingTop={2} tone={getToneFromValidation(validation)}>\n      <Stack space={2}>\n        <Card tone=\"inherit\">\n          {keyIsValid ? (\n            <Label muted size={1}>\n              {languageTitle}\n            </Label>\n          ) : (\n            <MenuButton\n              button={<Button fontSize={1} text={`Change \"${value._key}\"`} />}\n              id={`${value._key}-change-key`}\n              menu={\n                <Menu>\n                  {languages.map((lang) => (\n                    <MenuItem\n                      disabled={languageKeysInUse.includes(lang.id)}\n                      fontSize={1}\n                      key={lang.id}\n                      text={lang.id.toLocaleUpperCase()}\n                      value={lang.id}\n                      // @ts-expect-error - fix typings\n                      onClick={handleKeyChange}\n                    />\n                  ))}\n                </Menu>\n              }\n              popover={{portal: true}}\n            />\n          )}\n        </Card>\n        <Flex align=\"center\" gap={2}>\n          <Card flex={1} tone=\"inherit\">\n            {props.inputProps.renderInput(props.inputProps)}\n          </Card>\n\n          <Card tone=\"inherit\">\n            {i