@sanity/document-internationalization 2.0.0-studio-v3-plugin-v2.7 → 2.0.0-studio-v3-plugin-v2.8

package/src/plugin.tsx

@@ -1,14 +1,14 @@
-import React from 'react'
-import {definePlugin, defineField} from 'sanity'
-import {internationalizedArray} from 'sanity-plugin-internationalized-array'
 import {Stack} from '@sanity/ui'
+import {defineField, definePlugin, isSanityDocument} from 'sanity'
+import {internationalizedArray} from 'sanity-plugin-internationalized-array'
 
-import metadata from './schema/translation/metadata'
-import MenuButton from './components/MenuButton'
-import {PluginConfig} from './types'
 import {LanguageBadge} from './badges'
-import {METADATA_SCHEMA_NAME} from './constants'
 import BulkPublish from './components/BulkPublish'
+import MenuButton from './components/MenuButton'
+import OptimisticallyStrengthen from './components/OptimisticallyStrengthen'
+import {API_VERSION, METADATA_SCHEMA_NAME} from './constants'
+import metadata from './schema/translation/metadata'
+import {PluginConfig, TranslationReference} from './types'
 
 const DEFAULT_CONFIG = {
   supportedLanguages: [],
@@ -17,159 +17,207 @@ const DEFAULT_CONFIG = {
   bulkPublish: false,
 }
 
-export const documentInternationalization = definePlugin<PluginConfig>((config) => {
-  const {supportedLanguages, schemaTypes, languageField, bulkPublish} = {
-    ...DEFAULT_CONFIG,
-    ...config,
-  }
+export const documentInternationalization = definePlugin<PluginConfig>(
+  (config) => {
+    const {supportedLanguages, schemaTypes, languageField, bulkPublish} = {
+      ...DEFAULT_CONFIG,
+      ...config,
+    }
+
+    const renderLanguageFilter = (schemaType: string, documentId?: string) => {
+      return (
+        <MenuButton
+          supportedLanguages={supportedLanguages}
+          schemaType={schemaType}
+          documentId={documentId ?? ``}
+          languageField={languageField}
+        />
+      )
+    }
+
+    return {
+      name: '@sanity/document-internationalization',
+
+      // Adds:
+      // - A bulk-publishing UI component to the form
+      // - Will only work for projects on a compatible plan
+      form: {
+        components: {
+          input: (props) => {
+            if (
+              props.id === 'root' &&
+              props.schemaType.name === METADATA_SCHEMA_NAME &&
+              isSanityDocument(props?.value)
+            ) {
+              const metadataId = props?.value?._id
+              const translations =
+                (props?.value?.translations as TranslationReference[]) ?? []
+              const weakAndTypedTranslations = translations.filter(
+                (t) => t?.value?._weak && t.value?._strengthenOnPublish
+              )
+
+              return (
+                <Stack space={5}>
+                  {bulkPublish ? (
+                    <BulkPublish translations={translations} />
+                  ) : null}
+                  {weakAndTypedTranslations.length > 0 ? (
+                    <OptimisticallyStrengthen
+                      metadataId={metadataId}
+                      translations={weakAndTypedTranslations}
+                    />
+                  ) : null}
+                  {props.renderDefault(props)}
+                </Stack>
+              )
+            }
+
+            return props.renderDefault(props)
+          },
+        },
+      },
 
-  const renderLanguageFilter = (schemaType: string, documentId?: string) => {
-    return (
-      <MenuButton
-        supportedLanguages={supportedLanguages}
-        schemaType={schemaType}
-        documentId={documentId ?? ``}
-        languageField={languageField}
-      />
-    )
-  }
+      // Adds:
+      // - The `Translations` dropdown to the editing form
+      // - `Badges` to documents with a language value
+      document: {
+        unstable_languageFilter: (prev, ctx) => {
+          const {schemaType, documentId} = ctx
 
-  return {
-    name: '@sanity/document-internationalization',
-
-    // Adds:
-    // - A bulk-publishing UI component to the form
-    // - Will only work for projects on a compatible plan
-    form: {
-      components: {
-        input: (props) => {
-          if (
-            bulkPublish &&
-            props.id === 'root' &&
-            props.schemaType.name === METADATA_SCHEMA_NAME
-          ) {
-            return (
-              <Stack space={5}>
-                {/* <BulkPublish {...props} /> */}
-                {props.renderDefault(props)}
-              </Stack>
-            )
+          return schemaTypes.includes(schemaType)
+            ? [...prev, () => renderLanguageFilter(schemaType, documentId)]
+            : prev
+        },
+        badges: (prev, {schemaType}) => {
+          if (!schemaTypes.includes(schemaType)) {
+            return prev
           }
 
-          return props.renderDefault(props)
+          return [
+            (props) => LanguageBadge(props, supportedLanguages, languageField),
+            ...prev,
+          ]
         },
       },
-    },
-
-    // Adds:
-    // - The `Translations` dropdown to the editing form
-    // - `Badges` to documents with a language value
-    document: {
-      unstable_languageFilter: (prev, ctx) => {
-        const {schemaType, documentId} = ctx
-
-        return schemaTypes.includes(schemaType)
-          ? [...prev, () => renderLanguageFilter(schemaType, documentId)]
-          : prev
-      },
-      badges: (prev, {schemaType}) => {
-        if (!schemaTypes.includes(schemaType)) {
-          return prev
-        }
 
-        return [(props) => LanguageBadge(props, supportedLanguages, languageField), ...prev]
-      },
-    },
-
-    // Adds:
-    // - The `Translations metadata` document type to the schema
-    schema: {
-      // Create the metadata document type
-      types: [metadata(schemaTypes)],
-
-      // For every schema type this plugin is enabled on
-      // Create an initial value template to set the language
-      templates: (prev, {schema}) => {
-        // Templates are not setup for async languages
-        if (!Array.isArray(supportedLanguages)) {
-          return prev
-        }
-
-        const parameterizedTemplates = schemaTypes.map((schemaType) => ({
-          id: `${schemaType}-parameterized`,
-          title: `${schema?.get(schemaType)?.title ?? schemaType}: with Language`,
-          schemaType,
-          parameters: [{name: `languageId`, title: `Language ID`, type: `string`}],
-          value: ({languageId}: {languageId: string}) => ({
-            [languageField]: languageId,
-          }),
-        }))
-
-        const staticTemplates = schemaTypes.flatMap((schemaType) => {
-          return supportedLanguages.map((language) => ({
-            id: `${schemaType}-${language.id}`,
-            title: `${language.title} ${schema?.get(schemaType)?.title ?? schemaType}`,
+      // Adds:
+      // - The `Translations metadata` document type to the schema
+      schema: {
+        // Create the metadata document type
+        types: [metadata(schemaTypes)],
+
+        // For every schema type this plugin is enabled on
+        // Create an initial value template to set the language
+        templates: (prev, {schema}) => {
+          // Templates are not setup for async languages
+          if (!Array.isArray(supportedLanguages)) {
+            return prev
+          }
+
+          const parameterizedTemplates = schemaTypes.map((schemaType) => ({
+            id: `${schemaType}-parameterized`,
+            title: `${
+              schema?.get(schemaType)?.title ?? schemaType
+            }: with Language`,
             schemaType,
-            value: {
-              [languageField]: language.id,
-            },
+            parameters: [
+              {name: `languageId`, title: `Language ID`, type: `string`},
+            ],
+            value: ({languageId}: {languageId: string}) => ({
+              [languageField]: languageId,
+            }),
           }))
-        })
 
-        return [...prev, ...parameterizedTemplates, ...staticTemplates]
+          const staticTemplates = schemaTypes.flatMap((schemaType) => {
+            return supportedLanguages.map((language) => ({
+              id: `${schemaType}-${language.id}`,
+              title: `${language.title} ${
+                schema?.get(schemaType)?.title ?? schemaType
+              }`,
+              schemaType,
+              value: {
+                [languageField]: language.id,
+              },
+            }))
+          })
+
+          return [...prev, ...parameterizedTemplates, ...staticTemplates]
+        },
       },
-    },
-
-    // Uses:
-    // - `sanity-plugin-internationalized-array` to maintain the translations array
-    plugins: [
-      // Translation metadata stores its references using this plugin
-      // It cuts down on attribute usage and gives UI conveniences to add new translations
-      internationalizedArray({
-        languages: supportedLanguages,
-        fieldTypes: [
-          // TODO: The plugin should allow this kind of input
-          // @ts-ignore
-          defineField(
-            {
-              name: 'reference',
-              type: 'reference',
-              to: schemaTypes.map((type) => ({type: type})),
-              // TODO: Add a validation rule to *ensure* the document's language matches the array key
-              // Reference filters don't actually enforce validation!
-              // validation: (Rule) => Rule.custom(),
-              options: {
-                collapsed: false,
-                // TODO: Update type once it knows the values of this filter
-                // @ts-ignore
-                filter: ({parent, document}) => {
-                  if (!parent) return null
-
-                  // I'm not sure in what instance there's an array of parents
-                  // But the Type suggests it's possible
-                  const parentArray = Array.isArray(parent) ? parent : [parent]
-                  const language = parentArray.find((p) => p._key)
-
-                  if (!language?._key) return null
-
-                  if (document.schemaTypes) {
-                    return {
-                      filter: `_type in $schemaTypes && ${languageField} == $language`,
-                      params: {schemaTypes: document.schemaTypes, language: language._key},
+
+      // Uses:
+      // - `sanity-plugin-internationalized-array` to maintain the translations array
+      plugins: [
+        // Translation metadata stores its references using this plugin
+        // It cuts down on attribute usage and gives UI conveniences to add new translations
+        internationalizedArray({
+          languages: supportedLanguages,
+          fieldTypes: [
+            defineField(
+              {
+                name: 'reference',
+                type: 'reference',
+                to: schemaTypes.map((type) => ({type})),
+                // Reference filters don't actually enforce validation!
+                validation: (Rule) =>
+                  Rule.custom(async (item: TranslationReference, context) => {
+                    if (!item?.value?._ref || !item?._key) {
+                      return true
                     }
-                  }
 
-                  return {
-                    filter: `${languageField} == $language`,
-                    params: {language: language._key},
-                  }
+                    const client = context.getClient({apiVersion: API_VERSION})
+                    const valueLanguage = await client.fetch(
+                      `*[_id in [$ref, $draftRef]][0].${languageField}`,
+                      {
+                        ref: item.value._ref,
+                        draftRef: `drafts.${item.value._ref}`,
+                      }
+                    )
+
+                    if (valueLanguage && valueLanguage === item._key) {
+                      return true
+                    }
+
+                    return `Referenced document does not have the correct language value`
+                  }),
+                options: {
+                  collapsed: false,
+                  // TODO: Update type once it knows the values of this filter
+                  // @ts-expect-error
+                  filter: ({parent, document}) => {
+                    if (!parent) return null
+
+                    // I'm not sure in what instance there's an array of parents
+                    // But the Type suggests it's possible
+                    const parentArray = Array.isArray(parent)
+                      ? parent
+                      : [parent]
+                    const language = parentArray.find((p) => p._key)
+
+                    if (!language?._key) return null
+
+                    if (document.schemaTypes) {
+                      return {
+                        filter: `_type in $schemaTypes && ${languageField} == $language`,
+                        params: {
+                          schemaTypes: document.schemaTypes,
+                          language: language._key,
+                        },
+                      }
+                    }
+
+                    return {
+                      filter: `${languageField} == $language`,
+                      params: {language: language._key},
+                    }
+                  },
                 },
               },
-            },
-            {strict: false}
-          ),
-        ],
-      }),
-    ],
+              {strict: false}
+            ),
+          ],
+        }),
+      ],
+    }
   }
-})
+)

package/src/schema/translation/metadata.ts

@@ -18,7 +18,7 @@ export default (schemaTypes: string[]): DocumentDefinition =>
       defineField({
         name: 'schemaTypes',
         description:
-          'Used to filter the reference fields above so all translations share the same types.',
+          'Optional: Used to filter the reference fields above so all translations share the same types.',
         type: 'array',
         // For some reason TS dislikes this line because of the DocumentDefinition return type
         // @ts-expect-error

package/src/types.ts

@@ -1,4 +1,9 @@
-import type {SanityClient, SanityDocumentLike} from 'sanity'
+import type {
+  KeyedObject,
+  Reference,
+  SanityClient,
+  SanityDocumentLike,
+} from 'sanity'
 
 export type Language = {
   id: Intl.UnicodeBCP47LocaleIdentifier
@@ -16,12 +21,9 @@ export type PluginConfig = {
   bulkPublish?: boolean
 }
 
-export type TranslationReference = {
-  _key: string
-  value?: {
-    _ref: string
-    _type: 'reference'
-  }
+export type TranslationReference = KeyedObject & {
+  _type: 'internationalizedArrayReferenceValue'
+  value: Reference
 }
 
 export type Metadata = SanityDocumentLike & {