sanity-plugin-internationalized-array 3.2.2 → 4.0.0

package/src/components/InternationalizedInput.tsx

@@ -1,257 +0,0 @@
-import {RemoveCircleIcon} from '@sanity/icons'
-import {
-  Button,
-  Card,
-  Flex,
-  Label,
-  Menu,
-  MenuButton,
-  MenuItem,
-  Spinner,
-  Stack,
-  Text,
-  Tooltip,
-} from '@sanity/ui'
-import type React from 'react'
-import {ReactNode, useCallback, useMemo} from 'react'
-import {type ObjectItemProps, useFormValue} from 'sanity'
-import {set, unset} from 'sanity'
-
-import {getLanguageDisplay} from '../utils/getLanguageDisplay'
-import {getToneFromValidation} from './getToneFromValidation'
-import {useInternationalizedArrayContext} from './InternationalizedArrayContext'
-
-export type InternationalizedValue = {
-  _type: string
-  _key: string
-  value: string
-}
-
-export default function InternationalizedInput(
-  props: ObjectItemProps<InternationalizedValue>
-): ReactNode {
-  const parentValue = useFormValue(
-    props.path.slice(0, -1)
-  ) as InternationalizedValue[]
-
-  // Extract the original onChange to avoid dependency issues
-  const originalOnChange = props.inputProps.onChange
-
-  // Create a wrapped onChange handler to intercept patches for paste operations
-  const wrappedOnChange = useCallback(
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (patches: any) => {
-      // Ensure patches is an array before proceeding with paste logic
-      // For single patch operations (like unset), pass through directly
-      if (!Array.isArray(patches)) {
-        return originalOnChange(patches)
-      }
-
-      // Check if this is a paste operation into an empty or uninitialized Portable Text field
-      const valueField = props.value?.value
-      const isEmptyOrUndefined =
-        valueField === undefined ||
-        valueField === null ||
-        (Array.isArray(valueField) && valueField.length === 0)
-
-      if (isEmptyOrUndefined) {
-        // Check for insert patches that are trying to operate on a non-existent structure
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const hasProblematicInsert = patches.some((patch: any) => {
-          // Ensure patch exists and has required properties
-          if (!patch || typeof patch !== 'object') {
-            return false
-          }
-
-          // Look for insert patches targeting the value field or direct array index
-          if (
-            patch.type === 'insert' &&
-            patch.path &&
-            Array.isArray(patch.path) &&
-            patch.path.length > 0
-          ) {
-            // The path might be ['value', index] or just [index] depending on context
-            const isTargetingValue =
-              patch.path[0] === 'value' || typeof patch.path[0] === 'number'
-            return isTargetingValue
-          }
-          return false
-        })
-
-        if (hasProblematicInsert) {
-          // First, ensure the value field exists as an empty array if it doesn't
-          const initPatch =
-            valueField === undefined
-              ? {type: 'setIfMissing', path: ['value'], value: []}
-              : null
-
-          // Transform the patches to ensure they work with the nested structure
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          const fixedPatches = patches.map((patch: any) => {
-            // Ensure patch exists and has required properties
-            if (!patch || typeof patch !== 'object') {
-              return patch
-            }
-
-            if (
-              patch.type === 'insert' &&
-              patch.path &&
-              Array.isArray(patch.path)
-            ) {
-              // Ensure the path is correct for the nested structure
-              const fixedPath =
-                patch.path[0] === 'value'
-                  ? patch.path
-                  : ['value', ...patch.path]
-              const fixedPatch = {...patch, path: fixedPath}
-              return fixedPatch
-            }
-            return patch
-          })
-
-          // If we need to initialize the field, include that patch first
-          const allPatches = initPatch
-            ? [initPatch, ...fixedPatches]
-            : fixedPatches
-
-          return originalOnChange(allPatches)
-        }
-      }
-
-      // For all other cases, pass through unchanged
-      return originalOnChange(patches)
-    },
-    [props.value, originalOnChange]
-  )
-
-  const inlineProps = {
-    ...props.inputProps,
-    // This is the magic that makes inline editing work?
-    members: props.inputProps.members.filter(
-      (m) => m.kind === 'field' && m.name === 'value'
-    ),
-    // This just overrides the type
-    // Remove this as it shouldn't be necessary?
-    value: props.value as InternationalizedValue,
-    // Use our wrapped onChange handler
-    onChange: wrappedOnChange,
-  }
-
-  const {validation, value, onChange, readOnly} = inlineProps
-
-  // The parent array contains the languages from the plugin config
-  const {languages, languageDisplay, defaultLanguages} =
-    useInternationalizedArrayContext()
-
-  const languageKeysInUse = useMemo(
-    () => parentValue?.map((v) => v._key) ?? [],
-    [parentValue]
-  )
-  const keyIsValid = languages?.length
-    ? languages.find((l) => l.id === value._key)
-    : false
-
-  // Changes the key of this item, ideally to a valid language
-  const handleKeyChange = useCallback(
-    (event: React.MouseEvent<HTMLButtonElement, MouseEvent>): void => {
-      const languageId = event?.currentTarget?.value
-
-      if (
-        !value ||
-        !languages?.length ||
-        !languages.find((l) => l.id === languageId)
-      ) {
-        return
-      }
-
-      onChange([set(languageId, ['_key'])])
-    },
-    [onChange, value, languages]
-  )
-
-  // Removes this item from the array
-  const handleUnset = useCallback((): void => {
-    onChange(unset())
-  }, [onChange])
-
-  if (!languages) {
-    return <Spinner />
-  }
-
-  const language = languages.find((l) => l.id === value._key)
-  const languageTitle: string =
-    keyIsValid && language
-      ? getLanguageDisplay(languageDisplay, language.title, language.id)
-      : ''
-
-  const isDefault = defaultLanguages.includes(value._key)
-
-  const removeButton = (
-    <Button
-      mode="bleed"
-      icon={RemoveCircleIcon}
-      tone="critical"
-      disabled={readOnly || isDefault}
-      onClick={handleUnset}
-    />
-  )
-
-  return (
-    <Card paddingTop={2} tone={getToneFromValidation(validation)}>
-      <Stack space={2}>
-        <Card tone="inherit">
-          {keyIsValid ? (
-            <Label muted size={1}>
-              {languageTitle}
-            </Label>
-          ) : (
-            <MenuButton
-              button={<Button fontSize={1} text={`Change "${value._key}"`} />}
-              id={`${value._key}-change-key`}
-              menu={
-                <Menu>
-                  {languages.map((lang) => (
-                    <MenuItem
-                      disabled={languageKeysInUse.includes(lang.id)}
-                      fontSize={1}
-                      key={lang.id}
-                      text={lang.id.toLocaleUpperCase()}
-                      value={lang.id}
-                      // @ts-expect-error - fix typings
-                      onClick={handleKeyChange}
-                    />
-                  ))}
-                </Menu>
-              }
-              popover={{portal: true}}
-            />
-          )}
-        </Card>
-        <Flex align="center" gap={2}>
-          <Card flex={1} tone="inherit">
-            {props.inputProps.renderInput(inlineProps)}
-          </Card>
-
-          <Card tone="inherit">
-            {isDefault ? (
-              <Tooltip
-                content={
-                  <Text muted size={1}>
-                    Can&apos;t remove default language
-                  </Text>
-                }
-                fallbackPlacements={['right', 'left']}
-                placement="top"
-                portal
-              >
-                <span>{removeButton}</span>
-              </Tooltip>
-            ) : (
-              removeButton
-            )}
-          </Card>
-        </Flex>
-      </Stack>
-    </Card>
-  )
-}

package/src/components/Preload.tsx

@@ -1,31 +0,0 @@
-import {memo} from 'react'
-import {useClient} from 'sanity'
-
-import {createCacheKey, peek, preloadWithKey, setFunctionCache} from '../cache'
-import type {PluginConfig} from '../types'
-
-export default memo(function Preload(
-  props: Required<Pick<PluginConfig, 'apiVersion' | 'languages'>>
-) {
-  const client = useClient({apiVersion: props.apiVersion})
-
-  // Use the same cache key structure as the main component
-  // This should match the main component when selectedValue is empty
-  const cacheKey = createCacheKey({})
-
-  if (!Array.isArray(peek({}))) {
-    // eslint-disable-next-line require-await
-    preloadWithKey(async () => {
-      if (Array.isArray(props.languages)) {
-        return props.languages
-      }
-      const result = await props.languages(client, {})
-      // Populate function cache for sharing with other components
-      // Use the same key structure as the main component
-      setFunctionCache(props.languages, {}, result)
-      return result
-    }, cacheKey)
-  }
-
-  return null
-})

package/src/components/createFieldName.ts

@@ -1,20 +0,0 @@
-export function camelCase(string: string): string {
-  return string.replace(/-([a-z])/g, (g) => g[1].toUpperCase())
-}
-
-export function titleCase(string: string): string {
-  return string
-    .split(` `)
-    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-    .join(` `)
-}
-
-export function pascalCase(string: string): string {
-  return titleCase(camelCase(string))
-}
-
-export function createFieldName(name: string, addValue = false): string {
-  return addValue
-    ? [`internationalizedArray`, pascalCase(name), `Value`].join(``)
-    : [`internationalizedArray`, pascalCase(name)].join(``)
-}

package/src/components/getSelectedValue.ts

@@ -1,31 +0,0 @@
-import {get} from 'lodash'
-
-export const getSelectedValue = (
-  select: Record<string, string> | undefined,
-  document:
-    | {
-        [x: string]: unknown
-      }
-    | undefined
-): Record<string, unknown> => {
-  if (!select || !document) {
-    return {}
-  }
-
-  const selection: Record<string, string> = select || {}
-  const selectedValue: Record<string, unknown> = {}
-  for (const [key, path] of Object.entries(selection)) {
-    let value = get(document, path)
-    if (Array.isArray(value)) {
-      // If there are references in the array, ensure they have `_ref` set, otherwise they are considered empty and can safely be ignored
-      value = value.filter((item) =>
-        typeof item === 'object'
-          ? item?._type === 'reference' && '_ref' in item
-          : true
-      )
-    }
-    selectedValue[key] = value
-  }
-
-  return selectedValue
-}

package/src/components/getToneFromValidation.ts

@@ -1,20 +0,0 @@
-import type {CardTone} from '@sanity/ui'
-import type {FormNodeValidation} from 'sanity'
-
-export function getToneFromValidation(
-  validations: FormNodeValidation[]
-): CardTone | undefined {
-  if (!validations?.length) {
-    return undefined
-  }
-
-  const validationLevels = validations.map((v) => v.level)
-
-  if (validationLevels.includes('error')) {
-    return `critical`
-  } else if (validationLevels.includes('warning')) {
-    return `caution`
-  }
-
-  return undefined
-}

package/src/constants.ts

@@ -1,18 +0,0 @@
-import {PluginConfig} from './types'
-
-export const MAX_COLUMNS = {
-  codeOnly: 5,
-  titleOnly: 4,
-  titleAndCode: 3,
-}
-
-export const CONFIG_DEFAULT: Required<PluginConfig> = {
-  languages: [],
-  select: {},
-  defaultLanguages: [],
-  fieldTypes: [],
-  apiVersion: '2025-10-15',
-  buttonLocations: ['field'],
-  buttonAddAll: true,
-  languageDisplay: 'codeOnly',
-}

package/src/fieldActions/index.ts

@@ -1,138 +0,0 @@
-import {AddIcon, TranslateIcon} from '@sanity/icons'
-import {useCallback} from 'react'
-import {
-  defineDocumentFieldAction,
-  type DocumentFieldActionItem,
-  type DocumentFieldActionProps,
-  PatchEvent,
-  setIfMissing,
-  useFormValue,
-} from 'sanity'
-import {useDocumentPane} from 'sanity/structure'
-
-import {useInternationalizedArrayContext} from '../components/InternationalizedArrayContext'
-import type {Language, Value} from '../types'
-import {checkAllLanguagesArePresent} from '../utils/checkAllLanguagesArePresent'
-import {createAddAllTitle} from '../utils/createAddAllTitle'
-import {createAddLanguagePatches} from '../utils/createAddLanguagePatches'
-
-const createTranslateFieldActions: (
-  fieldActionProps: DocumentFieldActionProps,
-  context: {
-    languages: Language[]
-    filteredLanguages: Language[]
-  }
-) => DocumentFieldActionItem[] = (
-  fieldActionProps,
-  {languages, filteredLanguages}
-) =>
-  languages.map((language) => {
-    const value = useFormValue(fieldActionProps.path) as Value[]
-    const disabled =
-      value && Array.isArray(value)
-        ? Boolean(value?.find((item) => item._key === language.id))
-        : false
-    const hidden = !filteredLanguages.some((f) => f.id === language.id)
-
-    const {onChange} = useDocumentPane()
-
-    const onAction = useCallback(() => {
-      const {schemaType, path} = fieldActionProps
-
-      const addLanguageKeys = [language.id]
-      const patches = createAddLanguagePatches({
-        addLanguageKeys,
-        schemaType,
-        languages,
-        filteredLanguages,
-        value,
-        path,
-      })
-
-      onChange(PatchEvent.from([setIfMissing([], path), ...patches]))
-    }, [language.id, value, onChange])
-
-    return {
-      type: 'action',
-      icon: AddIcon,
-      onAction,
-      title: language.title,
-      hidden,
-      disabled,
-    }
-  })
-
-const AddMissingTranslationsFieldAction: (
-  fieldActionProps: DocumentFieldActionProps,
-  context: {
-    languages: Language[]
-    filteredLanguages: Language[]
-  }
-) => DocumentFieldActionItem = (
-  fieldActionProps,
-  {languages, filteredLanguages}
-) => {
-  const value = useFormValue(fieldActionProps.path) as Value[]
-  const disabled = value && value.length === filteredLanguages.length
-  const hidden = checkAllLanguagesArePresent(filteredLanguages, value)
-
-  const {onChange} = useDocumentPane()
-
-  const onAction = useCallback(() => {
-    const {schemaType, path} = fieldActionProps
-
-    const addLanguageKeys: string[] = []
-    const patches = createAddLanguagePatches({
-      addLanguageKeys,
-      schemaType,
-      languages,
-      filteredLanguages,
-      value,
-      path,
-    })
-
-    onChange(PatchEvent.from([setIfMissing([], path), ...patches]))
-  }, [fieldActionProps, filteredLanguages, languages, onChange, value])
-
-  return {
-    type: 'action',
-    icon: AddIcon,
-    onAction,
-    title: createAddAllTitle(value, filteredLanguages),
-    disabled,
-    hidden,
-  }
-}
-
-export const internationalizedArrayFieldAction = defineDocumentFieldAction({
-  name: 'internationalizedArray',
-  useAction(fieldActionProps) {
-    const isInternationalizedArrayField =
-      fieldActionProps?.schemaType?.type?.name.startsWith(
-        'internationalizedArray'
-      )
-    const {languages, filteredLanguages} = useInternationalizedArrayContext()
-
-    const translateFieldActions = createTranslateFieldActions(
-      fieldActionProps,
-      {languages, filteredLanguages}
-    )
-
-    return {
-      type: 'group',
-      icon: TranslateIcon,
-      title: 'Add Translation',
-      renderAsButton: true,
-      children: isInternationalizedArrayField
-        ? [
-            ...translateFieldActions,
-            AddMissingTranslationsFieldAction(fieldActionProps, {
-              languages,
-              filteredLanguages,
-            }),
-          ]
-        : [],
-      hidden: !isInternationalizedArrayField,
-    }
-  },
-})

package/src/index.ts

@@ -1,3 +0,0 @@
-export {clear} from './cache'
-export {internationalizedArray} from './plugin'
-export * from './types'

package/src/plugin.tsx

@@ -1,87 +0,0 @@
-import {definePlugin, isObjectInputProps} from 'sanity'
-
-import {InternationalizedArrayProvider} from './components/InternationalizedArrayContext'
-import InternationalizedField from './components/InternationalizedField'
-import Preload from './components/Preload'
-import {CONFIG_DEFAULT} from './constants'
-import {internationalizedArrayFieldAction} from './fieldActions'
-import array from './schema/array'
-import object from './schema/object'
-import {PluginConfig} from './types'
-import {flattenSchemaType} from './utils/flattenSchemaType'
-
-export const internationalizedArray = definePlugin<PluginConfig>((config) => {
-  const pluginConfig = {...CONFIG_DEFAULT, ...config}
-  const {
-    apiVersion = '2025-10-15',
-    select,
-    languages,
-    fieldTypes,
-    defaultLanguages,
-    buttonLocations,
-  } = pluginConfig
-
-  return {
-    name: 'sanity-plugin-internationalized-array',
-    // Preload languages for use throughout the Studio
-    studio: Array.isArray(languages)
-      ? undefined
-      : {
-          components: {
-            layout: (props) => (
-              <>
-                <Preload apiVersion={apiVersion} languages={languages} />
-                {props.renderDefault(props)}
-              </>
-            ),
-          },
-        },
-    // Optional: render "add language" buttons as field actions
-    document: {
-      unstable_fieldActions: buttonLocations.includes('unstable__fieldAction')
-        ? (prev) => [...prev, internationalizedArrayFieldAction]
-        : undefined,
-    },
-    // Wrap document editor with a language provider
-    form: {
-      components: {
-        field: (props) => <InternationalizedField {...props} />,
-
-        input: (props) => {
-          const isRootInput = props.id === 'root' && isObjectInputProps(props)
-
-          if (!isRootInput) {
-            return props.renderDefault(props)
-          }
-
-          const flatFieldTypeNames = flattenSchemaType(props.schemaType).map(
-            (field) => field.type.name
-          )
-          const hasInternationalizedArray = flatFieldTypeNames.some((name) =>
-            name.startsWith('internationalizedArray')
-          )
-
-          if (!hasInternationalizedArray) {
-            return props.renderDefault(props)
-          }
-
-          return (
-            <InternationalizedArrayProvider
-              {...props}
-              internationalizedArray={pluginConfig}
-            />
-          )
-        },
-      },
-    },
-    // Register custom schema types for the outer array and the inner object
-    schema: {
-      types: [
-        ...fieldTypes.map((type) =>
-          array({type, apiVersion, select, languages, defaultLanguages})
-        ),
-        ...fieldTypes.map((type) => object({type})),
-      ],
-    },
-  }
-})