@smartcat/sanity-plugin 1.2.1 → 1.4.0

package/src/tool/ProjectView.tsx

@@ -1,12 +1,8 @@
 import {useCallback, useEffect, useRef, useState} from 'react'
-import {useClient, useRelativeTime, useSchema, useValuePreview} from 'sanity'
+import {useClient, useRelativeTime, useSchema} from 'sanity'
 import {applyImportedTranslations, prepareExport, type PendingDeletion} from './processing'
-import {getTranslatableFields, localizationMode} from '../lib/locjson/fields'
-import {serializeToLocjson} from '../lib/locjson/serialize'
-import {buildLocjsonFilename} from '../lib/locjson/filename'
-import {resolveDocumentTitle} from '../lib/documentTitle'
+import {localizationMode} from '../lib/locjson/fields'
 import type {LocalizationMode} from '../lib/locjson/types'
-import {useIntentLink} from 'sanity/router'
 import {
   Badge,
   Box,
@@ -25,18 +21,18 @@ import {
 } from '@sanity/ui'
 import {
   ArrowLeftIcon,
-  LaunchIcon,
   TrashIcon,
   PublishIcon,
   CloseIcon,
   DownloadIcon,
   SyncIcon,
   RemoveCircleIcon,
-  JsonIcon,
 } from '@sanity/icons'
 import styled, {css, keyframes} from 'styled-components'
 import {API_VERSION} from '../lib/constants'
-import {UNTITLED} from '../lib/documentTitle'
+import {DocTitle} from './DocTitle'
+import {AddItemsSearch} from './AddItemsSearch'
+import {OpenInStudioButton, ViewLocjsonButton} from './itemActions'
 import {PROJECT_DETAIL_QUERY, type ProjectDetail, type ProjectItemRef} from './data'
 import {StatusBadge, statusLabel} from './StatusBadge'
 import {ItemProgress, languageTitle} from './ItemProgress'
@@ -67,26 +63,6 @@ function languageMappingLabel(language: SmartcatLanguage): string {
   return code === language.id ? language.id : `${language.id} → ${code}`
 }
 
-/**
- * Resolve an item's title the way the Studio does — by running the schema type's
- * `preview.prepare` — so types without a literal `title` field (e.g. field-level
- * localized docs) show the same label as in the structure tree, not 'Untitled'.
- */
-function DocTitle({doc}: {doc: ProjectItemRef['doc']}) {
-  const schema = useSchema()
-  const schemaType = doc ? schema.get(doc._type) : undefined
-  const preview = useValuePreview({
-    enabled: Boolean(doc && schemaType),
-    schemaType,
-    value: doc ? {_id: doc._id, _type: doc._type} : undefined,
-  })
-  // String-only: never fall back to the raw projected value, which is an
-  // internationalized-array object for field-level i18n types (renders as React #31).
-  const title = typeof preview.value?.title === 'string' ? preview.value.title : undefined
-  // Placeholder while the async preview resolves, so a real title isn't briefly mislabeled.
-  return <>{title ?? (preview.isLoading ? '…' : UNTITLED)}</>
-}
-
 /**
  * Statuses during which a Function is actively running, so the project shouldn't
  * be re-sent until it settles. `translating`/`sent`/`completed` are resting
@@ -124,159 +100,6 @@ function LastUpdate({date}: {date: string}) {
   )
 }
 
-/** Opens the document in the Studio. */
-function OpenInStudioButton({id, type}: {id: string; type: string}) {
-  const {onClick, href} = useIntentLink({intent: 'edit', params: {id, type}})
-  return (
-    <Button
-      as="a"
-      href={href}
-      onClick={onClick}
-      mode="bleed"
-      icon={LaunchIcon}
-      text="Open in Studio"
-      fontSize={0}
-      padding={2}
-    />
-  )
-}
-
-/** Read-only, monospace, full-height code view for the LocJSON modal. */
-const CodeArea = styled.textarea`
-  width: 100%;
-  height: 70vh;
-  resize: none;
-  border: none;
-  outline: none;
-  padding: 0;
-  background: transparent;
-  color: inherit;
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-  font-size: 12px;
-  line-height: 1.5;
-  white-space: pre;
-  tab-size: 2;
-`
-
-/**
- * Builds the LocJSON the export would produce for an item — same field selection
- * and serialize options as {@link prepareExport} — and shows it (pretty-printed)
- * in a read-only modal, for inspecting exactly what gets sent to Smartcat.
- */
-function ViewLocjsonButton(props: {
-  docId: string
-  type: string
-  /** Whether the export will translate the published doc (else prefer the draft). */
-  sourceIsPublished: boolean | null
-  client: {fetch: (query: string, params?: Record<string, unknown>) => Promise<unknown>}
-  schema: {get: (typeName: string) => unknown}
-  sourceLanguage: string
-  documentI18nLanguageField: string
-  fieldI18nLanguageField: string
-}) {
-  const {docId, type, sourceIsPublished, client, schema, sourceLanguage, documentI18nLanguageField, fieldI18nLanguageField} = props
-  const [open, setOpen] = useState(false)
-  const [content, setContent] = useState<string | null>(null)
-  const [filename, setFilename] = useState<string | null>(null)
-  const [error, setError] = useState<string | null>(null)
-
-  const build = useCallback(async () => {
-    setOpen(true)
-    setContent(null)
-    setFilename(null)
-    setError(null)
-    try {
-      // Resolve the same version the export will send: the draft (fallback to
-      // published) unless the item was added from the published perspective.
-      const raw = (await client.fetch(
-        sourceIsPublished
-          ? '*[_id == $id][0]'
-          : 'coalesce(*[_id == "drafts." + $id][0], *[_id == $id][0])',
-        {id: docId},
-      )) as (Record<string, unknown> & {_id: string}) | null
-      if (!raw) throw new Error(`Document not found: ${docId}`)
-      const isDraft = typeof raw._id === 'string' && raw._id.startsWith('drafts.')
-      // Serialize under the canonical (bare) id, matching the export.
-      const doc = isDraft ? {...raw, _id: docId} : raw
-      const fields = getTranslatableFields(schema.get(type), {exclude: [documentI18nLanguageField]})
-      const locjson = serializeToLocjson(doc as never, fields, {
-        sourceLanguage,
-        fieldLanguageKey: fieldI18nLanguageField,
-      })
-      // Same name the export sends to Smartcat; the last path segment is the
-      // file's basename (the Smartcat "folder/" prefix can't be a local filename).
-      const smartcatName = buildLocjsonFilename(type, docId, resolveDocumentTitle(schema, doc as never), {draft: isDraft})
-      setFilename(smartcatName.split('/').pop() || smartcatName)
-      setContent(JSON.stringify(locjson, null, 2))
-    } catch (err) {
-      setError(err instanceof Error ? err.message : String(err))
-    }
-  }, [client, schema, docId, type, sourceIsPublished, sourceLanguage, documentI18nLanguageField, fieldI18nLanguageField])
-
-  const download = useCallback(() => {
-    if (content == null || !filename) return
-    const url = URL.createObjectURL(new Blob([content], {type: 'application/json'}))
-    const anchor = document.createElement('a')
-    anchor.href = url
-    anchor.download = filename
-    anchor.click()
-    URL.revokeObjectURL(url)
-  }, [content, filename])
-
-  return (
-    <>
-      <Button
-        mode="bleed"
-        icon={JsonIcon}
-        title="View LocJSON"
-        fontSize={0}
-        padding={2}
-        onClick={build}
-      />
-      {open && (
-        <Dialog
-          id={`locjson-${docId}`}
-          header={
-            <Flex align="center" gap={3}>
-              <Text weight="semibold">LocJSON · {type}</Text>
-              <Button
-                icon={DownloadIcon}
-                text="Download"
-                mode="ghost"
-                fontSize={1}
-                padding={2}
-                disabled={content == null}
-                onClick={download}
-              />
-            </Flex>
-          }
-          onClose={() => setOpen(false)}
-          width={3}
-        >
-          <Box padding={4}>
-            {error ? (
-              <Text size={1} muted>
-                {error}
-              </Text>
-            ) : content === null ? (
-              <Flex align="center" justify="center" padding={5}>
-                <Spinner muted />
-              </Flex>
-            ) : (
-              <CodeArea
-                readOnly
-                spellCheck={false}
-                value={content}
-                onFocus={(e) => e.currentTarget.select()}
-              />
-            )}
-          </Box>
-        </Dialog>
-      )}
-    </>
-  )
-}
-
 export function ProjectView({
   projectId,
   onBack,
@@ -912,6 +735,18 @@ export function ProjectView({
                             {modeByType.get(item.doc._type) === 'field' ? 'fields' : 'document'}
                           </Badge>
                         )}
+                        <Badge
+                          tone={item.sendExistingTranslations ? 'primary' : 'default'}
+                          fontSize={0}
+                          paddingX={2}
+                          title={
+                            item.sendExistingTranslations
+                              ? 'Existing translations are uploaded to Smartcat (one bilingual file per language) and marked confirmed'
+                              : 'Only source text is sent; Smartcat translates from scratch'
+                          }
+                        >
+                          {item.sendExistingTranslations ? 'source + translations' : 'source only'}
+                        </Badge>
                         {item.doc && <OpenInStudioButton id={item.doc._id} type={item.doc._type} />}
                         {item.doc && (
                           <ViewLocjsonButton
@@ -923,6 +758,8 @@ export function ProjectView({
                             sourceLanguage={sourceLanguage}
                             documentI18nLanguageField={documentI18nLanguageField}
                             fieldI18nLanguageField={fieldI18nLanguageField}
+                            targetLanguages={targets}
+                            languages={languages}
                           />
                         )}
                       </Flex>
@@ -970,11 +807,16 @@ export function ProjectView({
           </Stack>
         )}
 
-        <Card padding={4} radius={2} tone="transparent" border>
-          <Text muted align="center" size={1}>
-            Add content from a document’s “⋯ → Add to translation project” menu.
-          </Text>
-        </Card>
+        <AddItemsSearch
+          projectId={projectId}
+          translatableTypes={translatableTypes}
+          existingDocIds={new Set(items.map((i) => i.docId))}
+          sourceLanguage={sourceLanguage}
+          languages={languages}
+          targetLanguages={targets}
+          documentI18nLanguageField={documentI18nLanguageField}
+          fieldI18nLanguageField={fieldI18nLanguageField}
+        />
       </Stack>
 
       {confirmDelete && (

package/src/tool/data.ts

@@ -24,6 +24,12 @@ export interface ProjectItemRef {
    * and which version the export serializes. Null on legacy items (pre-flag).
    */
   sourceIsPublished: boolean | null
+  /**
+   * Whether the export sends this item's existing translations (one bilingual
+   * file per target language) or only its source text. Null/false on legacy
+   * items (pre-flag) ⇒ source-only, today's behaviour.
+   */
+  sendExistingTranslations: boolean | null
   doc: {_id: string; _type: string} | null
   /** Locale variants linked via translation.metadata: language -> variant doc id. */
   translations: {language: string; id: string}[] | null
@@ -73,6 +79,7 @@ export const PROJECT_DETAIL_QUERY = `*[_id == $id][0]{
     _key,
     "docId": ${ITEM_ID},
     sourceIsPublished,
+    sendExistingTranslations,
     "doc": ${itemDocDeref('{_id, _type}')},
     "translations": *[_type == "translation.metadata" && references(${ITEM_ID_FROM_SUBQUERY})][0]
       .translations[]{language, "id": value._ref}

package/src/tool/itemActions.tsx

@@ -0,0 +1,216 @@
+import {useCallback, useState} from 'react'
+import {useIntentLink} from 'sanity/router'
+import {Box, Button, Dialog, Flex, Menu, MenuButton, MenuItem, Spinner, Text} from '@sanity/ui'
+import {LaunchIcon, JsonIcon, ChevronDownIcon, DownloadIcon} from '@sanity/icons'
+import styled from 'styled-components'
+import {getTranslatableFields, localizationMode} from '../lib/locjson/fields'
+import {serializeToLocjson} from '../lib/locjson/serialize'
+import {buildLocjsonFilename} from '../lib/locjson/filename'
+import {resolveDocumentTitle} from '../lib/documentTitle'
+import {languageTitle} from './ItemProgress'
+import type {SmartcatLanguage} from '../types'
+
+/** Opens the document in the Studio. */
+export function OpenInStudioButton({id, type}: {id: string; type: string}) {
+  const {onClick, href} = useIntentLink({intent: 'edit', params: {id, type}})
+  return (
+    <Button
+      as="a"
+      href={href}
+      onClick={onClick}
+      mode="bleed"
+      icon={LaunchIcon}
+      text="Open in Studio"
+      fontSize={0}
+      padding={2}
+    />
+  )
+}
+
+/** Read-only, monospace, full-height code view for the LocJSON modal. */
+const CodeArea = styled.textarea`
+  width: 100%;
+  height: 70vh;
+  resize: none;
+  border: none;
+  outline: none;
+  padding: 0;
+  background: transparent;
+  color: inherit;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 12px;
+  line-height: 1.5;
+  white-space: pre;
+  tab-size: 2;
+`
+
+/**
+ * Target-locale siblings of a document-level item, via translation.metadata. The
+ * member's locale lives in its language field (v5+, uuid `_key`) or in `_key`
+ * itself (v4.x) — `coalesce` reads whichever applies, per {@link fieldLanguageKey}.
+ */
+function siblingsQuery(fieldLanguageKey: string): string {
+  return `*[_type == "translation.metadata" && references($id)][0].translations[]{"language": coalesce(${fieldLanguageKey}, _key), "doc": value->}`
+}
+
+/**
+ * Dropdown that builds the LocJSON the export would produce for an item — same
+ * field selection and serialize options as {@link prepareExport} — and shows it
+ * (pretty-printed) in a read-only modal. Offers "Source only" (what a plain
+ * export sends) plus "Source + <language>" for each target language: the
+ * bilingual file the send-existing flow would upload for that language, so you
+ * can inspect exactly what goes to Smartcat per language.
+ */
+export function ViewLocjsonButton(props: {
+  docId: string
+  type: string
+  /** Whether the export will translate the published doc (else prefer the draft). */
+  sourceIsPublished: boolean | null
+  client: {fetch: (query: string, params?: Record<string, unknown>) => Promise<unknown>}
+  schema: {get: (typeName: string) => unknown}
+  sourceLanguage: string
+  documentI18nLanguageField: string
+  fieldI18nLanguageField: string
+  /** Project target languages (Sanity locale ids). */
+  targetLanguages: string[]
+  /** Configured languages (for titles + Smartcat codes). */
+  languages: SmartcatLanguage[]
+}) {
+  const {docId, type, sourceIsPublished, client, schema, sourceLanguage, documentI18nLanguageField, fieldI18nLanguageField, targetLanguages, languages} = props
+  const [open, setOpen] = useState(false)
+  const [content, setContent] = useState<string | null>(null)
+  const [filename, setFilename] = useState<string | null>(null)
+  const [title, setTitle] = useState<string>('Source only')
+  const [error, setError] = useState<string | null>(null)
+
+  // Build the LocJSON for one variant: `targetLanguage` undefined ⇒ source-only
+  // (a plain export), otherwise the bilingual file for that Sanity locale.
+  const build = useCallback(
+    async (targetLanguage?: string) => {
+      setOpen(true)
+      setContent(null)
+      setFilename(null)
+      setError(null)
+      setTitle(targetLanguage ? `Source + ${languageTitle(languages, targetLanguage)}` : 'Source only')
+      try {
+        // Resolve the same version the export will send: the draft (fallback to
+        // published) unless the item was added from the published perspective.
+        const raw = (await client.fetch(
+          sourceIsPublished
+            ? '*[_id == $id][0]'
+            : 'coalesce(*[_id == "drafts." + $id][0], *[_id == $id][0])',
+          {id: docId},
+        )) as (Record<string, unknown> & {_id: string}) | null
+        if (!raw) throw new Error(`Document not found: ${docId}`)
+        const isDraft = typeof raw._id === 'string' && raw._id.startsWith('drafts.')
+        // Serialize under the canonical (bare) id, matching the export.
+        const doc = isDraft ? {...raw, _id: docId} : raw
+        const fields = getTranslatableFields(schema.get(type), {exclude: [documentI18nLanguageField]})
+
+        // For a bilingual variant, resolve the existing translation the same way
+        // the export does: field-level from the inline member, document-level from
+        // the target-locale sibling document.
+        let target: {language: string; doc?: Record<string, unknown> & {_id: string; _type: string}} | undefined
+        if (targetLanguage) {
+          if (localizationMode(schema.get(type)) === 'document') {
+            const variants = (await client.fetch(siblingsQuery(fieldI18nLanguageField), {id: docId})) as
+              | {language: string; doc: (Record<string, unknown> & {_id: string; _type: string}) | null}[]
+              | null
+            const sibling = (variants ?? []).find((v) => v.language === targetLanguage)?.doc ?? undefined
+            target = {language: targetLanguage, doc: sibling}
+          } else {
+            target = {language: targetLanguage}
+          }
+        }
+
+        const locjson = serializeToLocjson(doc as never, fields, {
+          sourceLanguage,
+          fieldLanguageKey: fieldI18nLanguageField,
+          target,
+        })
+        // Same name the export sends to Smartcat; the last path segment is the
+        // file's basename (the Smartcat "folder/" prefix can't be a local filename).
+        const smartcatCode = targetLanguage
+          ? languages.find((l) => l.id === targetLanguage)?.smartcatLanguage || targetLanguage
+          : undefined
+        const smartcatName = buildLocjsonFilename(type, docId, resolveDocumentTitle(schema, doc as never), {
+          draft: isDraft,
+          language: smartcatCode,
+        })
+        setFilename(smartcatName.split('/').pop() || smartcatName)
+        setContent(JSON.stringify(locjson, null, 2))
+      } catch (err) {
+        setError(err instanceof Error ? err.message : String(err))
+      }
+    },
+    [client, schema, docId, type, sourceIsPublished, sourceLanguage, documentI18nLanguageField, fieldI18nLanguageField, languages],
+  )
+
+  const download = useCallback(() => {
+    if (content == null || !filename) return
+    const url = URL.createObjectURL(new Blob([content], {type: 'application/json'}))
+    const anchor = document.createElement('a')
+    anchor.href = url
+    anchor.download = filename
+    anchor.click()
+    URL.revokeObjectURL(url)
+  }, [content, filename])
+
+  return (
+    <>
+      <MenuButton
+        id={`locjson-menu-${docId}`}
+        button={<Button mode="bleed" icon={JsonIcon} iconRight={ChevronDownIcon} title="View LocJSON" fontSize={0} padding={2} />}
+        menu={
+          <Menu>
+            <MenuItem text="Source only" onClick={() => build()} />
+            {targetLanguages.map((lang) => (
+              <MenuItem key={lang} text={`Source + ${languageTitle(languages, lang)}`} onClick={() => build(lang)} />
+            ))}
+          </Menu>
+        }
+        popover={{portal: true}}
+      />
+      {open && (
+        <Dialog
+          id={`locjson-${docId}`}
+          header={
+            <Flex align="center" gap={3}>
+              <Text weight="semibold">LocJSON · {type} · {title}</Text>
+              <Button
+                icon={DownloadIcon}
+                text="Download"
+                mode="ghost"
+                fontSize={1}
+                padding={2}
+                disabled={content == null}
+                onClick={download}
+              />
+            </Flex>
+          }
+          onClose={() => setOpen(false)}
+          width={3}
+        >
+          <Box padding={4}>
+            {error ? (
+              <Text size={1} muted>
+                {error}
+              </Text>
+            ) : content === null ? (
+              <Flex align="center" justify="center" padding={5}>
+                <Spinner muted />
+              </Flex>
+            ) : (
+              <CodeArea
+                readOnly
+                spellCheck={false}
+                value={content}
+                onFocus={(e) => e.currentTarget.select()}
+              />
+            )}
+          </Box>
+        </Dialog>
+      )}
+    </>
+  )
+}

package/src/tool/processing.test.ts

@@ -1,7 +1,7 @@
 import {beforeAll, describe, expect, it} from 'vitest'
 import {Schema} from '@sanity/schema'
 import {JSDOM} from 'jsdom'
-import {applyImportedTranslations, prepareExport, type ProcessingClient} from './processing'
+import {applyImportedTranslations, prepareExport, siblingsQuery, type ProcessingClient} from './processing'
 
 // processing.ts uses the browser's global DOMParser; provide one via jsdom.
 beforeAll(() => {
@@ -696,3 +696,13 @@ describe('nested + array-member field-level translation', () => {
     ])
   })
 })
+
+describe('siblingsQuery', () => {
+  // The v5+ translation.metadata member stores its locale in a language field
+  // with a uuid `_key`; reading only `_key` (the v4.x layout) missed every v5+
+  // sibling, so send-existing attached no target for document-level items.
+  it('reads the locale from the configured field, falling back to `_key` (v4.x)', () => {
+    expect(siblingsQuery('language')).toContain('"language": coalesce(language, _key)')
+    expect(siblingsQuery('_key')).toContain('"language": coalesce(_key, _key)')
+  })
+})