@smartcat/sanity-plugin 1.3.0 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smartcat/sanity-plugin",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"

package/src/tool/AddItemsSearch.tsx

@@ -0,0 +1,462 @@
+import {Fragment, useCallback, useEffect, useState, type MouseEvent} from 'react'
+import {useClient, useSchema} from 'sanity'
+import {useRouter} from 'sanity/router'
+import {Badge, Box, Button, Card, Checkbox, Flex, Menu, MenuButton, MenuItem, Spinner, Stack, Text, TextInput, useToast} from '@sanity/ui'
+import {AddIcon, CheckmarkIcon, ChevronDownIcon, SearchIcon} from '@sanity/icons'
+import {uuid} from '@sanity/uuid'
+import {API_VERSION, TRANSLATION_PROJECT_TYPE} from '../lib/constants'
+import {ITEM_ID} from '../lib/projectItems'
+import {DocTitle} from './DocTitle'
+import {OpenInStudioButton, ViewLocjsonButton} from './itemActions'
+import type {SmartcatLanguage} from '../types'
+
+/** A raw matched row — a draft or published document variant. */
+interface SearchRow {
+  _id: string
+  _type: string
+  /** True when this row is a draft, or a published doc that has a draft. */
+  hasDraft: boolean
+}
+
+/** A deduped search hit — one logical document, addable to the project. */
+interface SearchHit {
+  /** Published (bare) id, the value stored as an item's `docId`. */
+  docId: string
+  _type: string
+  /** Whether a draft exists — drives the source badge and the added item's `sourceIsPublished`. */
+  hasDraft: boolean
+}
+
+/**
+ * Documents fetched per search before de-duplication. Higher than what we show,
+ * since a document can appear twice (draft + published). Inlined into the query
+ * (GROQ slices must be constant).
+ */
+const QUERY_LIMIT = 50
+
+/** Distinct documents shown after de-duplication. */
+const DISPLAY_LIMIT = 25
+
+/** Max query tokens honored, to keep the generated query bounded. */
+const MAX_TOKENS = 6
+
+/** Don't search until the box has some substance, or single letters flood results. */
+const MIN_QUERY_LENGTH = 2
+
+/**
+ * Fields a term matches against in the default ("title") mode, plus `_type`/`_id`
+ * so a term can match the schema type name or id. Kept in one place: this is the
+ * curated notion of "a document's title" across arbitrary schema types.
+ */
+const TITLE_FIELDS = '[title, name, heading, label, question, slug.current, _type, _id]'
+
+/** Title-ish fields used for scoring, so title matches rank above `_type`/content hits. */
+const SCORE_FIELDS = '[title, name, heading, label, question, slug.current]'
+
+/** Types the plugin never treats as translatable, excluded when no allowlist is configured. */
+const EXCLUDED_TYPES = ['smartcat.translationProject', 'smartcat.settings', 'translation.metadata']
+
+/**
+ * Turn the raw search box text into a GROQ query + params, or `null` when there's
+ * nothing worth searching for yet.
+ *
+ * Each whitespace-separated term must match (AND across terms); within a term the
+ * match spans the title fields plus `_type`/`_id`. So `"faq cancel"` finds an FAQ
+ * titled "Can I cancel my subscription" (`faq`→`_type`, `cancel`→title) but not a
+ * `page` whose body mentions "cancel" — unless "Also search in content" is on,
+ * which widens each term to the whole document (`@`).
+ */
+function buildSearch(
+  rawQuery: string,
+  searchContent: boolean,
+  translatableTypes: string[] | undefined,
+): {query: string; params: Record<string, unknown>} | null {
+  if (rawQuery.trim().length < MIN_QUERY_LENGTH) return null
+  const tokens = rawQuery
+    .trim()
+    .split(/\s+/)
+    // Neutralize text::query operators so plain text can't be read as phrase
+    // quoting (`"`), exclusion (leading `-`), or an explicit wildcard (`*`).
+    .map((t) => t.replace(/["*]/g, '').replace(/^-+/, '').trim())
+    .filter(Boolean)
+    .slice(0, MAX_TOKENS)
+  if (tokens.length === 0) return null
+
+  // Whole-document search when the editor opts in; otherwise the curated fields.
+  const target = searchContent ? '@' : TITLE_FIELDS
+  const params: Record<string, unknown> = {}
+  const tokenClauses: string[] = []
+  const scoreClauses: string[] = []
+  tokens.forEach((tok, i) => {
+    // Trailing wildcard → prefix matching, so results narrow as the editor types.
+    params[`t${i}`] = `${tok}*`
+    tokenClauses.push(`${target} match text::query($t${i})`)
+    scoreClauses.push(`boost(${SCORE_FIELDS} match text::query($t${i}), 2)`)
+  })
+
+  // Mirror resolveConfig: an explicit allowlist is a positive filter; otherwise
+  // exclude the plugin's own + document-i18n metadata + system types — never
+  // enumerating "all types", which could be thousands.
+  let typeFilter: string
+  if (translatableTypes) {
+    params.types = translatableTypes
+    typeFilter = '_type in $types'
+  } else {
+    params.excluded = EXCLUDED_TYPES
+    typeFilter = '!(_type in $excluded) && !(_type match "sanity.*")'
+  }
+
+  // Drafts are included (the plugin can translate the draft version). Both a
+  // draft and its published counterpart may match; de-duplication happens after
+  // the fetch. `hasDraft` lets a published-only match still detect its draft, so
+  // a document whose draft didn't match the term is still flagged correctly.
+  const filter = [typeFilter, ...tokenClauses].join(' && ')
+  const projection = '{_id, _type, "hasDraft": _id in path("drafts.**") || count(*[_id == "drafts." + ^._id]) > 0}'
+  const query = `*[${filter}] | score(${scoreClauses.join(', ')}) | order(_score desc)[0...${QUERY_LIMIT}]${projection}`
+  return {query, params}
+}
+
+/**
+ * Collapse draft/published variants into one hit per logical document, keyed by
+ * the bare (published) id. Input is ordered by relevance; the Map preserves that
+ * order (first occurrence wins the position), and `hasDraft` is OR-ed across
+ * variants so a draft is detected whichever variant matched.
+ */
+function dedupeHits(rows: SearchRow[]): SearchHit[] {
+  const byDoc = new Map<string, SearchHit>()
+  for (const row of rows) {
+    const docId = row._id.replace(/^drafts\./, '')
+    const existing = byDoc.get(docId)
+    if (existing) existing.hasDraft = existing.hasDraft || row.hasDraft
+    else byDoc.set(docId, {docId, _type: row._type, hasDraft: row.hasDraft})
+  }
+  return [...byDoc.values()].slice(0, DISPLAY_LIMIT)
+}
+
+/** A translation project a searched document is an item of. */
+interface ProjectRef {
+  _id: string
+  name?: string
+}
+
+/**
+ * For the given document ids, the projects that include each as a (source) item.
+ * One batched query builds a `docId → projects` map; `references()`/sibling
+ * membership is deliberately out of scope — what matters here is whether adding
+ * the document to a project would be redundant.
+ */
+const MEMBERSHIP_QUERY = `*[_type == "${TRANSLATION_PROJECT_TYPE}" && count(items[${ITEM_ID} in $ids]) > 0] | order(name asc){
+  _id,
+  name,
+  "docIds": items[${ITEM_ID} in $ids]{"id": ${ITEM_ID}}
+}`
+
+/** Shape of one row from {@link MEMBERSHIP_QUERY}. */
+interface MembershipRow {
+  _id: string
+  name?: string
+  docIds: {id: string}[]
+}
+
+/** A project name that navigates to its page in the Translations tool (SPA nav). */
+function ProjectChip({project, current}: {project: ProjectRef; current: boolean}) {
+  const router = useRouter()
+  const onClick = useCallback(
+    (e: MouseEvent) => {
+      e.preventDefault()
+      router.navigate({projectId: project._id})
+    },
+    [router, project._id],
+  )
+  return (
+    <a href="#" onClick={onClick}>
+      {project.name || 'Untitled project'}
+      {current ? ' (this project)' : ''}
+    </a>
+  )
+}
+
+interface AddItemsSearchProps {
+  projectId: string
+  /** Configured translatable types (undefined = every non-plugin type). */
+  translatableTypes?: string[]
+  /** Published ids already in the project, so their results show as added, not addable. */
+  existingDocIds: Set<string>
+  /** Source language (Sanity locale id) — for the LocJSON preview. */
+  sourceLanguage: string
+  /** Configured languages (titles + Smartcat codes) — for the LocJSON preview. */
+  languages: SmartcatLanguage[]
+  /** Project target languages — the per-language bilingual LocJSON variants to offer. */
+  targetLanguages: string[]
+  /** document-internationalization locale field name. */
+  documentI18nLanguageField: string
+  /** internationalized-array locale key. */
+  fieldI18nLanguageField: string
+}
+
+/**
+ * Search box + results, shown under a project's item list, for finding documents
+ * anywhere in the dataset and adding them to the project without opening each one.
+ * Searches drafts and published documents; a document with a draft is added
+ * draft-as-source (the plugin translates the draft), matching a fresh "Add to
+ * translation project", with existing-translations upload left off. Linked-content
+ * gathering is not applied here — each result adds just that one document.
+ */
+export function AddItemsSearch({
+  projectId,
+  translatableTypes,
+  existingDocIds,
+  sourceLanguage,
+  languages,
+  targetLanguages,
+  documentI18nLanguageField,
+  fieldI18nLanguageField,
+}: AddItemsSearchProps) {
+  const client = useClient({apiVersion: API_VERSION})
+  const schema = useSchema()
+  const toast = useToast()
+  const [query, setQuery] = useState('')
+  const [searchContent, setSearchContent] = useState(false)
+  const [results, setResults] = useState<SearchHit[] | null>(null)
+  const [loading, setLoading] = useState(false)
+  const [addingId, setAddingId] = useState<string | null>(null)
+  // Optimistic: added rows show as "Added" immediately, before the project's
+  // live subscription refreshes `existingDocIds`.
+  const [addedIds, setAddedIds] = useState<Set<string>>(new Set())
+  // docId → the projects that already include it (live), so each result lists
+  // its memberships the way the document editor's status banner does.
+  const [projectsByDoc, setProjectsByDoc] = useState<Map<string, ProjectRef[]>>(new Map())
+
+  useEffect(() => {
+    const built = buildSearch(query, searchContent, translatableTypes)
+    if (!built) {
+      setResults(null)
+      setLoading(false)
+      return undefined
+    }
+    setLoading(true)
+    let cancelled = false
+    const handle = setTimeout(() => {
+      client
+        .fetch<SearchRow[]>(built.query, built.params)
+        .then((res) => {
+          if (!cancelled) setResults(dedupeHits(res))
+        })
+        .catch((err) => {
+          if (cancelled) return
+          setResults([])
+          toast.push({status: 'error', title: 'Search failed', description: String(err)})
+        })
+        .finally(() => {
+          if (!cancelled) setLoading(false)
+        })
+    }, 250)
+    return () => {
+      cancelled = true
+      clearTimeout(handle)
+    }
+  }, [query, searchContent, translatableTypes, client, toast])
+
+  // Resolve (and keep live) the projects each visible result belongs to. Keyed
+  // on the result ids so it re-runs when the result set changes; the listener
+  // then reflects adds/removes anywhere without a manual refetch.
+  const docIdsKey = (results ?? []).map((r) => r.docId).join(',')
+  useEffect(() => {
+    const ids = docIdsKey ? docIdsKey.split(',') : []
+    if (ids.length === 0) {
+      setProjectsByDoc(new Map())
+      return undefined
+    }
+    let cancelled = false
+    const load = () =>
+      client
+        .fetch<MembershipRow[]>(MEMBERSHIP_QUERY, {ids})
+        .then((rows) => {
+          if (cancelled) return
+          const map = new Map<string, ProjectRef[]>()
+          for (const row of rows) {
+            for (const {id} of row.docIds ?? []) {
+              const list = map.get(id) ?? []
+              list.push({_id: row._id, name: row.name})
+              map.set(id, list)
+            }
+          }
+          setProjectsByDoc(map)
+        })
+        .catch(() => !cancelled && setProjectsByDoc(new Map()))
+    load()
+    const sub = client.listen(MEMBERSHIP_QUERY, {ids}, {visibility: 'query'}).subscribe({next: load, error: () => {}})
+    return () => {
+      cancelled = true
+      sub.unsubscribe()
+    }
+  }, [docIdsKey, client])
+
+  // Once the project's live items reflect an optimistic add, drop it from the
+  // local set. Otherwise `addedIds` (which only ever grows) would keep a row
+  // marked "Added" even after it's removed from the project — `existingDocIds`
+  // then becomes the single source of truth, so removal flips it back to addable.
+  const existingKey = [...existingDocIds].sort().join(',')
+  useEffect(() => {
+    setAddedIds((prev) => {
+      if (prev.size === 0) return prev
+      const next = new Set([...prev].filter((id) => !existingDocIds.has(id)))
+      return next.size === prev.size ? prev : next
+    })
+    // existingDocIds is a fresh Set each render; `existingKey` tracks its contents.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [existingKey])
+
+  const addItem = async (hit: SearchHit, sendExistingTranslations: boolean) => {
+    setAddingId(hit.docId)
+    try {
+      const item = {
+        _type: 'smartcat.projectItem',
+        _key: uuid(),
+        docId: hit.docId,
+        docType: hit._type,
+        // Prefer the draft as source when one exists (the plugin translates the
+        // draft version); the caller chose whether to also upload existing
+        // translations — matching a fresh "Add to translation project".
+        sourceIsPublished: !hit.hasDraft,
+        sendExistingTranslations,
+      }
+      await client.patch(projectId).setIfMissing({items: []}).insert('after', 'items[-1]', [item]).commit()
+      setAddedIds((prev) => new Set(prev).add(hit.docId))
+      toast.push({status: 'success', title: 'Added to project'})
+    } catch (err) {
+      toast.push({status: 'error', title: 'Failed to add item', description: String(err)})
+    } finally {
+      setAddingId(null)
+    }
+  }
+
+  return (
+    <Stack space={3}>
+      <Card padding={4} radius={2} border>
+        <Stack space={4}>
+          <Stack space={3}>
+            <TextInput
+              icon={SearchIcon}
+              placeholder="Search documents to add — by title, or schema type…"
+              value={query}
+              onChange={(e) => setQuery(e.currentTarget.value)}
+              clearButton={query.length > 0}
+              onClear={() => setQuery('')}
+            />
+            <Flex as="label" align="center" gap={2} style={{cursor: 'pointer'}}>
+              <Checkbox checked={searchContent} onChange={(e) => setSearchContent(e.currentTarget.checked)} />
+              <Text size={1} muted>
+                Also search in content (slower; matches body text, not just titles)
+              </Text>
+            </Flex>
+          </Stack>
+
+          {loading ? (
+            <Flex align="center" justify="center" padding={4}>
+              <Spinner muted />
+            </Flex>
+          ) : results === null ? null : results.length === 0 ? (
+            <Text muted align="center" size={1}>
+              No documents match “{query.trim()}”.
+            </Text>
+          ) : (
+            <Stack space={2}>
+              {results.map((hit) => {
+                // "Added" means added to *this* project — the only case where
+                // adding again is redundant. Membership in other projects is fine
+                // and just listed below.
+                const inThisProject = addedIds.has(hit.docId) || existingDocIds.has(hit.docId)
+                const memberships = projectsByDoc.get(hit.docId) ?? []
+                // Preview (and translate) the draft when there is one; else the published doc.
+                const previewId = hit.hasDraft ? `drafts.${hit.docId}` : hit.docId
+                return (
+                  <Card key={hit.docId} padding={2} radius={2} shadow={1}>
+                    <Flex align="center" gap={3}>
+                      <Box flex={1}>
+                        <Stack space={2}>
+                          <Flex align="center" gap={2}>
+                            <Badge
+                              tone={hit.hasDraft ? 'caution' : 'positive'}
+                              paddingX={2}
+                              title={
+                                hit.hasDraft
+                                  ? 'The draft version will be the translation source'
+                                  : 'The published version will be the translation source'
+                              }
+                            >
+                              {hit.hasDraft ? 'Draft' : 'Published'}
+                            </Badge>
+                            <Text weight="medium" textOverflow="ellipsis">
+                              <DocTitle doc={{_id: previewId, _type: hit._type}} />
+                            </Text>
+                            <Badge tone="primary" paddingX={2}>
+                              {hit._type}
+                            </Badge>
+                          </Flex>
+                          {memberships.length > 0 && (
+                            <Text size={0} muted>
+                              In:{' '}
+                              {memberships.map((p, i) => (
+                                <Fragment key={p._id}>
+                                  {i > 0 && ', '}
+                                  <ProjectChip project={p} current={p._id === projectId} />
+                                </Fragment>
+                              ))}
+                            </Text>
+                          )}
+                        </Stack>
+                      </Box>
+                      <OpenInStudioButton id={hit.docId} type={hit._type} />
+                      <ViewLocjsonButton
+                        docId={hit.docId}
+                        type={hit._type}
+                        sourceIsPublished={!hit.hasDraft}
+                        client={client}
+                        schema={schema}
+                        sourceLanguage={sourceLanguage}
+                        documentI18nLanguageField={documentI18nLanguageField}
+                        fieldI18nLanguageField={fieldI18nLanguageField}
+                        targetLanguages={targetLanguages}
+                        languages={languages}
+                      />
+                      {inThisProject ? (
+                        <Button mode="bleed" icon={CheckmarkIcon} text="Added" fontSize={1} padding={2} disabled />
+                      ) : (
+                        <MenuButton
+                          id={`add-${hit.docId}`}
+                          button={
+                            <Button
+                              mode="ghost"
+                              icon={AddIcon}
+                              iconRight={ChevronDownIcon}
+                              text="Add"
+                              fontSize={1}
+                              padding={2}
+                              loading={addingId === hit.docId}
+                              disabled={addingId !== null}
+                            />
+                          }
+                          menu={
+                            <Menu>
+                              <MenuItem text="Add source" onClick={() => addItem(hit, false)} />
+                              <MenuItem text="Add source + translations" onClick={() => addItem(hit, true)} />
+                            </Menu>
+                          }
+                          popover={{portal: true}}
+                        />
+                      )}
+                    </Flex>
+                  </Card>
+                )
+              })}
+            </Stack>
+          )}
+        </Stack>
+      </Card>
+      <Text size={1} muted>
+        You can also add content from a document’s “⋯ → Add to translation project” menu.
+      </Text>
+    </Stack>
+  )
+}

package/src/tool/DocTitle.tsx

@@ -0,0 +1,23 @@
+import {useSchema, useValuePreview} from 'sanity'
+import {UNTITLED} from '../lib/documentTitle'
+
+/**
+ * Resolve a document'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'.
+ */
+export function DocTitle({doc}: {doc: {_id: string; _type: string} | null}) {
+  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)}</>
+}