fix: default languages

src/components/InternationalizedArray.tsx

@@ -27,7 +27,7 @@
   ArraySchemaType
 >
 
 export default function InternationalizedArray(
   props: InternationalizedArrayProps
 ) {
   const {members, value, schemaType, onChange} = props
@@ -108,22 +108,27 @@
   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
   const handleRestoreOrder = useCallback(() => {
     if (!value?.length || !languages?.length) {
       return

src/components/InternationalizedInput.tsx

@@ -9,6 +9,8 @@
   MenuItem,
   Spinner,
   Stack,
+  Text,
+  Tooltip,
 } from '@sanity/ui'
 import type React from 'react'
 import {useCallback, useMemo} from 'react'
@@ -25,7 +27,7 @@
   value: string
 }
 
 export default function InternationalizedInput(
   props: ObjectItemProps<InternationalizedValue>
 ) {
   const parentValue = useFormValue(
@@ -39,14 +41,15 @@
       (m) => m.kind === 'field' && m.name === 'value'
     ),
     // This just overrides the type
     // TODO: Remove this as it shouldn't be necessary?
     value: props.value as InternationalizedValue,
   }
 
   const {validation, value, onChange, readOnly} = inlineProps
 
   // The parent array contains the languages from the plugin config
-  const {languages, languageDisplay} = useInternationalizedArrayContext()
+  const {languages, languageDisplay, defaultLanguages} =
+    useInternationalizedArrayContext()
 
   const languageKeysInUse = useMemo(
     () => parentValue?.map((v) => v._key) ?? [],
@@ -89,6 +92,18 @@
       ? 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}>
@@ -126,13 +141,22 @@
           </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>