sanity-plugin-internationalized-array 1.6.2 → 1.8.0

package/src/fieldActions/index.ts

@@ -0,0 +1,132 @@
+import {AddIcon, TranslateIcon} from '@sanity/icons'
+import {useCallback} from 'react'
+import {
+  defineDocumentFieldAction,
+  DocumentFieldActionItem,
+  DocumentFieldActionProps,
+  PatchEvent,
+  setIfMissing,
+  useFormValue,
+} from 'sanity'
+import {useDocumentPane} from 'sanity/desk'
+
+import {useInternationalizedArrayContext} from '../components/InternationalizedArrayContext'
+import {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))
+        : true
+    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.id.toLocaleUpperCase(),
+      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.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/plugin.tsx

@@ -1,47 +1,82 @@
-import {definePlugin} from 'sanity'
+import {definePlugin, isObjectInputProps} from 'sanity'
 
+import {InternationalizedArrayProvider} from './components/InternationalizedArrayContext'
 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'
 
-const CONFIG_DEFAULT: PluginConfig = {
-  languages: [],
-  fieldTypes: [],
-}
-
-export const internationalizedArray = definePlugin<PluginConfig>(
-  (config = CONFIG_DEFAULT) => {
-    const {
-      apiVersion = '2022-11-27',
-      select,
-      languages,
-      fieldTypes,
-    } = {...CONFIG_DEFAULT, ...config}
-
-    return {
-      name: 'sanity-plugin-internationalized-array',
-      // If `languages` is a callback then let's preload it
-      studio: Array.isArray(languages)
-        ? undefined
-        : {
-            components: {
-              layout: (props) => (
-                <>
-                  <Preload apiVersion={apiVersion} languages={languages} />
-                  {props.renderDefault(props)}
-                </>
-              ),
-            },
+export const internationalizedArray = definePlugin<PluginConfig>((config) => {
+  const pluginConfig = {...CONFIG_DEFAULT, ...config}
+  const {
+    apiVersion = '2022-11-27',
+    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)}
+              </>
+            ),
           },
-      schema: {
-        types: [
-          ...fieldTypes.map((type) =>
-            array({type, apiVersion, select, languages})
-          ),
-          ...fieldTypes.map((type) => object({type})),
-        ],
+        },
+    // 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: {
+        input: (props) => {
+          const isRootInput = props.id === 'root' && isObjectInputProps(props)
+
+          if (!isRootInput) {
+            return props.renderDefault(props)
+          }
+
+          const rootFieldTypeNames = props.schemaType.fields.map(
+            (field) => field.type.name
+          )
+
+          const hasInternationalizedArray = rootFieldTypeNames.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})),
+      ],
+    },
   }
-)
+})

package/src/schema/array.ts

@@ -11,6 +11,7 @@ type ArrayFactoryConfig = {
   apiVersion: string
   select?: Record<string, string>
   languages: Language[] | LanguageCallback
+  defaultLanguages?: string[]
   type: string | FieldDefinition
 }
 
@@ -27,6 +28,7 @@ export default (config: ArrayFactoryConfig): FieldDefinition<'array'> => {
     components: {
       input: InternationalizedArray,
     },
+    // These options are required for validation rules – not the custom input component
     options: {apiVersion, select, languages},
     // TODO: Resolve this typing issue with the inner object
     // @ts-expect-error

package/src/types.ts

@@ -1,5 +1,4 @@
 import type {
-  ArraySchemaType,
   FieldDefinition,
   Rule,
   RuleTypeConstraint,
@@ -82,6 +81,15 @@ export type PluginConfig = {
    * ```
    */
   languages: Language[] | LanguageCallback
+  /**
+   * You can specify a list of language IDs that should be pre-filled when creating a new document
+   * ```tsx
+   * {
+   *  defaultLanguages: ['en']
+   * }
+   * ```
+   */
+  defaultLanguages?: string[]
   /**
    * Can be a string matching core field types, as well as custom ones:
    * ```tsx
@@ -106,12 +114,14 @@ export type PluginConfig = {
    * ```
    */
   fieldTypes: (string | RuleTypeConstraint | FieldDefinition)[]
-}
-
-export type ArraySchemaWithLanguageOptions = ArraySchemaType & {
-  options: {
-    select?: Record<string, string>
-    languages: Language[] | LanguageCallback
-    apiVersion: string
-  }
+  /**
+   * Locations where the "+ EN" add language buttons are visible
+   * @defaultValue ['field']
+   * */
+  buttonLocations: ('field' | 'unstable__fieldAction')[]
+  /**
+   * Show or hide the "Add missing languages" button
+   * @defaultValue true
+   * */
+  buttonAddAll: boolean
 }

package/src/utils/checkAllLanguagesArePresent.ts

@@ -0,0 +1,14 @@
+import {Language, Value} from '../types'
+
+export function checkAllLanguagesArePresent(
+  languages: Language[],
+  value: Value[] | undefined
+): boolean {
+  const filteredLanguageIds = languages.map((l) => l.id)
+  const languagesInUseIds = value ? value.map((v) => v._key) : []
+
+  return (
+    languagesInUseIds.length === filteredLanguageIds.length &&
+    languagesInUseIds.every((l) => filteredLanguageIds.includes(l))
+  )
+}

package/src/utils/createAddAllTitle.ts

@@ -0,0 +1,16 @@
+import {Language, Value} from '../types'
+
+export function createAddAllTitle(
+  value: Value[] | undefined,
+  languages: Language[]
+): string {
+  if (value?.length) {
+    return `Add missing ${
+      languages.length - value.length === 1 ? `language` : `languages`
+    }`
+  }
+
+  return languages.length === 1
+    ? `Add ${languages[0].title} Field`
+    : `Add all languages`
+}

package/src/utils/createAddLanguagePatches.ts

@@ -0,0 +1,75 @@
+import {FormInsertPatch, insert, Path, SchemaType} from 'sanity'
+
+import {Language, Value} from '../types'
+
+type AddConfig = {
+  // New keys to add to the field
+  addLanguageKeys: string[]
+  // Schema of the current field
+  schemaType: SchemaType
+  // All languages registered in the plugin
+  languages: Language[]
+  // Languages that are currently visible
+  filteredLanguages: Language[]
+  // Current value of the internationalizedArray field
+  value?: Value[]
+  // Path to this item
+  path?: Path
+}
+
+export function createAddLanguagePatches(config: AddConfig): FormInsertPatch[] {
+  const {
+    addLanguageKeys,
+    schemaType,
+    languages,
+    filteredLanguages,
+    value,
+    path = [],
+  } = config
+
+  const itemBase = {_type: `${schemaType.name}Value`}
+
+  // Create new items
+  const 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?.length ? !value.find((v) => v._key === language.id) : true
+          )
+          .map((language) => ({...itemBase, _key: language.id}))
+
+  // Insert new items in the correct order
+  const languagesInUse = value?.length ? value.map((v) => v) : []
+
+  const insertions = newItems.map((item) => {
+    // What's the original index of this language?
+    const languageIndex = languages.findIndex((l) => item._key === l.id)
+
+    // What languages are there beyond that index?
+    const remainingLanguages = languages.slice(languageIndex + 1)
+
+    // So what is the index in the current value array of the next language in the language array?
+    const nextLanguageIndex = languagesInUse.findIndex((l) =>
+      // eslint-disable-next-line max-nested-callbacks
+      remainingLanguages.find((r) => r.id === l._key)
+    )
+
+    // Keep local state up to date incase multiple insertions are being made
+    if (nextLanguageIndex < 0) {
+      languagesInUse.push(item)
+    } else {
+      languagesInUse.splice(nextLanguageIndex, 0, item)
+    }
+
+    return nextLanguageIndex < 0
+      ? // No next language (-1), add to end of array
+        insert([item], 'after', [...path, nextLanguageIndex])
+      : // Next language found, insert before that
+        insert([item], 'before', [...path, nextLanguageIndex])
+  })
+
+  return insertions
+}

package/src/components/languageContext.tsx

@@ -1,9 +0,0 @@
-import React from 'react'
-
-import {Language} from '../types'
-
-export const LanguageContext = React.createContext<{languages: Language[]}>({
-  languages: [],
-})
-
-export const LanguageProvider = LanguageContext.Provider