sanity-plugin-internationalized-array 1.7.0 → 1.8.0

package/src/plugin.tsx

@@ -1,49 +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: [],
-  defaultLanguages: [],
-  fieldTypes: [],
-}
-
-export const internationalizedArray = definePlugin<PluginConfig>(
-  (config = CONFIG_DEFAULT) => {
-    const {
-      apiVersion = '2022-11-27',
-      select,
-      languages,
-      fieldTypes,
-      defaultLanguages,
-    } = {...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, defaultLanguages})
-          ),
-          ...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

@@ -16,7 +16,7 @@ type ArrayFactoryConfig = {
 }
 
 export default (config: ArrayFactoryConfig): FieldDefinition<'array'> => {
-  const {apiVersion, select, languages, defaultLanguages, type} = config
+  const {apiVersion, select, languages, type} = config
   const typeName = typeof type === `string` ? type : type.name
   const arrayName = createFieldName(typeName)
   const objectName = createFieldName(typeName, true)
@@ -28,7 +28,8 @@ export default (config: ArrayFactoryConfig): FieldDefinition<'array'> => {
     components: {
       input: InternationalizedArray,
     },
-    options: {apiVersion, select, languages, defaultLanguages},
+    // 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
     of: [

package/src/types.ts

@@ -1,5 +1,4 @@
 import type {
-  ArraySchemaType,
   FieldDefinition,
   Rule,
   RuleTypeConstraint,
@@ -115,13 +114,14 @@ export type PluginConfig = {
    * ```
    */
   fieldTypes: (string | RuleTypeConstraint | FieldDefinition)[]
-}
-
-export type ArraySchemaWithLanguageOptions = ArraySchemaType & {
-  options: {
-    select?: Record<string, string>
-    languages: Language[] | LanguageCallback
-    apiVersion: string
-    defaultLanguages?: 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