sanity-plugin-internationalized-array 3.0.3 → 3.1.1

package/src/components/InternationalizedArray.tsx

@@ -108,19 +108,24 @@ export default function InternationalizedArray(
   const {isDeleting} = useDocumentPane()
 
   const addedLanguages = members.map(({key}) => key)
-  const hasAddedDefaultLanguages = defaultLanguages.every((language) =>
-    addedLanguages.includes(language)
-  )
+  const hasAddedDefaultLanguages = defaultLanguages
+    .filter((language) => languages.find((l) => l.id === language))
+    .every((language) => addedLanguages.includes(language))
 
   useEffect(() => {
     if (!isDeleting && !hasAddedDefaultLanguages) {
-      handleAddLanguage(defaultLanguages)
+      const languagesToAdd = defaultLanguages
+        .filter((language) => !addedLanguages.includes(language))
+        .filter((language) => languages.find((l) => l.id === language))
+      handleAddLanguage(languagesToAdd)
     }
   }, [
     isDeleting,
     hasAddedDefaultLanguages,
     handleAddLanguage,
     defaultLanguages,
+    addedLanguages,
+    languages,
   ])
 
   // TODO: This is reordering and re-setting the whole array, it could be surgical

package/src/components/InternationalizedInput.tsx

@@ -9,12 +9,15 @@ import {
   MenuItem,
   Spinner,
   Stack,
+  Text,
+  Tooltip,
 } from '@sanity/ui'
 import type React from 'react'
 import {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'
 
@@ -45,7 +48,8 @@ export default function InternationalizedInput(
   const {validation, value, onChange, readOnly} = inlineProps
 
   // The parent array contains the languages from the plugin config
-  const {languages} = useInternationalizedArrayContext()
+  const {languages, languageDisplay, defaultLanguages} =
+    useInternationalizedArrayContext()
 
   const languageKeysInUse = useMemo(
     () => parentValue?.map((v) => v._key) ?? [],
@@ -82,13 +86,31 @@ export default function InternationalizedInput(
     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}>
-              {value._key}
+              {languageTitle}
             </Label>
           ) : (
             <MenuButton
@@ -96,13 +118,13 @@ export default function InternationalizedInput(
               id={`${value._key}-change-key`}
               menu={
                 <Menu>
-                  {languages.map((language) => (
+                  {languages.map((lang) => (
                     <MenuItem
-                      disabled={languageKeysInUse.includes(language.id)}
+                      disabled={languageKeysInUse.includes(lang.id)}
                       fontSize={1}
-                      key={language.id}
-                      text={language.id.toLocaleUpperCase()}
-                      value={language.id}
+                      key={lang.id}
+                      text={lang.id.toLocaleUpperCase()}
+                      value={lang.id}
                       // @ts-expect-error - fix typings
                       onClick={handleKeyChange}
                     />
@@ -119,13 +141,22 @@ export default function InternationalizedInput(
           </Card>
 
           <Card tone="inherit">
-            <Button
-              mode="bleed"
-              icon={RemoveCircleIcon}
-              tone="critical"
-              disabled={readOnly}
-              onClick={handleUnset}
-            />
+            {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>

package/src/constants.ts

@@ -1,6 +1,10 @@
 import {PluginConfig} from './types'
 
-export const MAX_COLUMNS = 7
+export const MAX_COLUMNS = {
+  codeOnly: 5,
+  titleOnly: 4,
+  titleAndCode: 3,
+}
 
 export const CONFIG_DEFAULT: Required<PluginConfig> = {
   languages: [],
@@ -10,4 +14,5 @@ export const CONFIG_DEFAULT: Required<PluginConfig> = {
   apiVersion: '2022-11-27',
   buttonLocations: ['field'],
   buttonAddAll: true,
+  languageDisplay: 'codeOnly',
 }

package/src/types.ts

@@ -35,6 +35,8 @@ export type LanguageCallback = (
   selectedValue: Record<string, unknown>
 ) => Promise<Language[]>
 
+export type LanguageDisplay = 'titleOnly' | 'codeOnly' | 'titleAndCode'
+
 export type PluginConfig = {
   /**
    * https://www.sanity.io/docs/api-versioning
@@ -125,4 +127,9 @@ export type PluginConfig = {
    * @defaultValue true
    * */
   buttonAddAll?: boolean
+  /**
+   * How to display the languages on buttons and fields
+   * @defaultValue 'code'
+   * */
+  languageDisplay?: LanguageDisplay
 }

package/src/utils/getLanguageDisplay.ts

@@ -0,0 +1,13 @@
+import {LanguageDisplay} from '../types'
+
+export function getLanguageDisplay(
+  languageDisplay: LanguageDisplay,
+  title: string,
+  code: string
+): string {
+  if (languageDisplay === 'codeOnly') return code.toUpperCase()
+  if (languageDisplay === 'titleOnly') return title
+  if (languageDisplay === 'titleAndCode')
+    return `${title} (${code.toUpperCase()})`
+  return title
+}