@justanarthur/payload-plugin-translator 3.0.3 → 3.1.0

package/README.md

@@ -79,6 +79,8 @@ export const myResolver: TranslateResolver = {
 | `globals`     | `GlobalSlug[]`        | yes      | Globals to auto-translate.                                             |
 | `resolvers`   | `TranslateResolver[]` | yes      | Tried in order; first to succeed wins per chunk.                       |
 | `autoTranslate` | `boolean`           | no       | Default `true`. Set `false` to opt out of the auto-translate afterChange hook — useful when you drive translation manually via the `translateOperation` export. |
+| `autoTranslateMode` | `'missing' \| 'all'` | no | Default `'missing'`: a publish in the default locale fills empty fields in other locales and keeps existing translations and slugs. `'all'` re-translates everything. |
+| `review`      | `boolean`             | no       | Default `true`. Adds the `/admin/translations` review view, its endpoints and the hidden `translation-status` collection (needs a migration on postgres). |
 | `disabled`    | `boolean`             | no       | Skip the plugin entirely (no overrides, no jobs). Useful in tests.    |
 | `_options.additionalTraverseRichText` | function | no | Hook to extend rich-text traversal — see below.             |
 
@@ -100,8 +102,8 @@ translator({
 })
 ```
 
-The hook receives `onText` which mutates the data tree, plus the root node. It's called for every
-richText field before translation begins.
+The hook receives `onText` which mutates the data tree, plus the current node as `siblingData`.
+It is called for every node without a `text` property, including `block` and `inlineBlock` nodes.
 
 ## How it works under the hood
 
@@ -113,6 +115,22 @@ richText field before translation begins.
 - The plugin de-duplicates via `AUTO_TRANSLATE_MARKER` — re-running it on an already-attached hook
   is a no-op, so it's safe to wrap multiple plugins around the same collection.
 
+## Reviewing translations
+
+With `review` on, **Translations** appears in the admin nav (`/admin/translations`):
+
+- **Overview**: one row per document (paged, newest first) or global, one column per target locale.
+  Each cell shows the share of translatable fields that have a translation. `404` means the locale
+  has no slug, `↻` means the source changed since the last translation, `✓` means someone reviewed
+  that locale against the current source.
+- **Detail** (click a cell): every translatable field with the source and target text side by side,
+  marked `missing`, `same as source` (likely never translated) or `placeholders differ`, plus the
+  last auto-translate job and its error. Actions: *Translate missing fields*, *Re-translate all*,
+  *Mark reviewed*.
+
+The view only lists collections and globals the signed-in user can read, and the endpoints behind
+the actions require a user.
+
 ## Manual translation
 
 Two escape hatches when you don't want the auto-hook:

package/dist/client.css

@@ -39,3 +39,187 @@
   flex-wrap: wrap;
   gap: .5rem;
 }
+
+/* src/client/components/Review/styles.css */
+.translator-review {
+  padding-bottom: calc(var(--base) * 3);
+}
+
+.translator-review__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: var(--base);
+  margin: calc(var(--base) * 1.5) 0;
+  flex-wrap: wrap;
+}
+
+.translator-review__header h1 {
+  margin: 0;
+}
+
+.translator-review__tabs {
+  display: flex;
+  gap: calc(var(--base) / 2);
+  margin-bottom: var(--base);
+  flex-wrap: wrap;
+}
+
+.translator-review__tab {
+  border: 1px solid var(--theme-elevation-150);
+  color: var(--theme-elevation-800);
+  text-decoration: none;
+  border-radius: 999px;
+  padding: 4px 12px;
+  font-size: 13px;
+}
+
+.translator-review__tab[aria-current="true"] {
+  background: var(--theme-elevation-900);
+  border-color: var(--theme-elevation-900);
+  color: var(--theme-elevation-0);
+}
+
+.translator-review__scroll {
+  overflow-x: auto;
+  border: 1px solid var(--theme-elevation-100);
+  border-radius: var(--style-radius-m);
+}
+
+.translator-review table {
+  border-collapse: collapse;
+  width: 100%;
+  font-size: 13px;
+}
+
+.translator-review th, .translator-review td {
+  border-bottom: 1px solid var(--theme-elevation-100);
+  text-align: left;
+  vertical-align: top;
+  padding: 8px 10px;
+}
+
+.translator-review th {
+  background: var(--theme-elevation-50);
+  white-space: nowrap;
+  font-weight: 600;
+}
+
+.translator-review tr:last-child td {
+  border-bottom: 0;
+}
+
+.translator-review__doc {
+  min-width: 220px;
+}
+
+.translator-review__doc small {
+  display: block;
+  color: var(--theme-elevation-500);
+}
+
+.translator-review__cell {
+  display: inline-flex;
+  font-variant-numeric: tabular-nums;
+  text-decoration: none;
+  color: var(--theme-elevation-1000);
+  border: 1px solid #0000;
+  border-radius: 999px;
+  align-items:  center;
+  gap: 4px;
+  min-width: 64px;
+  padding: 2px 8px;
+}
+
+.translator-review__cell--ok {
+  background: var(--theme-success-100);
+}
+
+.translator-review__cell--partial {
+  background: var(--theme-warning-100);
+}
+
+.translator-review__cell--missing {
+  background: var(--theme-error-100);
+}
+
+.translator-review__cell--stale {
+  border-color: var(--theme-warning-500);
+}
+
+.translator-review__legend {
+  display: flex;
+  gap: var(--base);
+  color: var(--theme-elevation-600);
+  margin-top: calc(var(--base) / 2);
+  flex-wrap: wrap;
+  font-size: 12px;
+}
+
+.translator-review__pager {
+  display: flex;
+  gap: var(--base);
+  margin-top: var(--base);
+  align-items:  center;
+}
+
+.translator-review__state {
+  white-space: nowrap;
+  border-radius: 999px;
+  padding: 1px 8px;
+  font-size: 12px;
+}
+
+.translator-review__state--ok {
+  background: var(--theme-success-100);
+}
+
+.translator-review__state--missing {
+  background: var(--theme-error-100);
+}
+
+.translator-review__state--identical, .translator-review__state--placeholders {
+  background: var(--theme-warning-100);
+}
+
+.translator-review__text {
+  white-space: pre-wrap;
+  word-break: break-word;
+  max-width: 420px;
+}
+
+.translator-review__text--empty {
+  color: var(--theme-elevation-400);
+  font-style: italic;
+}
+
+.translator-review__path {
+  font-family: var(--font-mono, monospace);
+  color: var(--theme-elevation-600);
+  word-break: break-all;
+  max-width: 240px;
+  font-size: 12px;
+}
+
+.translator-review__meta {
+  display: flex;
+  gap: calc(var(--base) * 1.5);
+  color: var(--theme-elevation-600);
+  margin-bottom: var(--base);
+  flex-wrap: wrap;
+  font-size: 13px;
+}
+
+.translator-review__actions {
+  display: flex;
+  gap: calc(var(--base) / 2);
+  flex-wrap: wrap;
+}
+
+.translator-review__actions .btn {
+  margin: 0;
+}
+
+.translator-review__error {
+  color: var(--theme-error-500);
+}

package/dist/client.d.ts

@@ -1,6 +1,18 @@
-import { JSX as JSX_1kxb } from "react/jsx-runtime";
+import { JSX as JSX_1kxb } from "react";
 type Element_12xgc = JSX_1kxb["Element"];
 declare const CustomButtonWithTranslator: ({ type }: {
 	type: "publish" | "save";
 }) => Element_12xgc;
-export { CustomButtonWithTranslator as default, CustomButtonWithTranslator };
+import { JSX as JSX_1kxb2 } from "react";
+type Element_12xgc2 = JSX_1kxb2["Element"];
+declare const ReviewActions: ({ entity, locale, reviewed }: {
+	entity: string;
+	locale: string;
+	reviewed: boolean;
+}) => Element_12xgc2;
+/** loads the review view styles; the view itself is a server component */
+declare const ReviewStyles: () => null;
+import { JSX as JSX_1kxb3 } from "react";
+type Element_12xgc3 = JSX_1kxb3["Element"];
+declare const TranslationsNavLink: () => Element_12xgc3;
+export { CustomButtonWithTranslator, ReviewActions, ReviewStyles, TranslationsNavLink, CustomButtonWithTranslator as default };

package/dist/client.js

@@ -1,4 +1,8 @@
 "use client";
+import {
+  REVIEW_VIEW_PATH
+} from "./shared/chunk-31qgv1zk.js";
+
 // src/client/components/CustomButton/CustomButtonWithTranslator.tsx
 import { PublishButton, SaveButton, useConfig as useConfig2, useDocumentInfo as useDocumentInfo2 } from "@payloadcms/ui";
 
@@ -85,19 +89,18 @@ var TranslatorProvider = ({ children }) => {
     const resolvers = custom?.translator?.resolvers || undefined;
     if (!resolvers)
       return null;
-    const resolverConfig2 = resolvers.find((each) => each.key === resolver);
-    return resolverConfig2 ?? null;
+    const resolverConfig = resolvers.find((each) => each.key === resolver);
+    return resolverConfig ?? null;
   }, [custom, resolver]);
   if (!localization)
     throw new Error("Localization config is not provided and PluginTranslator is used");
   const localesOptions = localization.locales.filter((each) => each.code !== locale.code);
   const [localeToTranslateFrom, setLocaleToTranslateFrom] = useState("");
   useEffect(() => {
-    const defaultFromOptions = localesOptions.find((each) => localization.defaultLocale === each.code);
-    if (defaultFromOptions)
-      setLocaleToTranslateFrom(defaultFromOptions.code);
-    setLocaleToTranslateFrom(localesOptions[0].code);
-  }, [locale, localesOptions, localization.defaultLocale]);
+    const options = localization.locales.filter((each) => each.code !== locale.code);
+    const defaultFromOptions = options.find((each) => localization.defaultLocale === each.code);
+    setLocaleToTranslateFrom((defaultFromOptions ?? options[0])?.code ?? "");
+  }, [locale.code, localization.defaultLocale, localization.locales]);
   const closeTranslator = () => modal.closeModal(modalSlug);
   const submit = async ({ emptyOnly }) => {
     if (!resolver)
@@ -269,12 +272,12 @@ var Content = () => {
 // src/client/components/TranslatorModal/TranslatorModal.tsx
 import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var TranslatorModal = () => {
-  const { closeTranslator, modalSlug: modalSlug2, resolver } = useTranslator();
+  const { closeTranslator, modalSlug, resolver } = useTranslator();
   if (!resolver)
     return;
   return /* @__PURE__ */ jsx5(Modal, {
     className: "translator__modal",
-    slug: modalSlug2,
+    slug: modalSlug,
     children: /* @__PURE__ */ jsxs3("div", {
       className: "translator__wrapper",
       children: [
@@ -312,9 +315,92 @@ var CustomButtonWithTranslator = ({ type }) => {
   });
 };
 
+// src/client/components/Review/ReviewActions.tsx
+import { Button as Button3, toast as toast2, useConfig as useConfig3 } from "@payloadcms/ui";
+import { useState as useState2 } from "react";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+
+var ReviewActions = ({ entity, locale, reviewed }) => {
+  const { config: { routes: { api }, serverURL } } = useConfig3();
+  const [pending, setPending] = useState2(null);
+  const run = async (action) => {
+    if (action === "translate-all" && !window.confirm(`Re-translate every field in ${locale}? Existing ${locale} copy is replaced.`))
+      return;
+    setPending(action);
+    try {
+      const path = action === "mark-reviewed" ? "mark-reviewed" : "translate";
+      const res = await fetch(`${serverURL ?? ""}${api}/translator/review/${path}`, {
+        method: "POST",
+        credentials: "include",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ entity, locale, mode: action === "translate-all" ? "all" : "missing" })
+      });
+      const result = await res.json().catch(() => ({}));
+      if (!res.ok || !result.success)
+        throw new Error(result?.errors?.[0]?.message ?? "request failed");
+      toast2.success(action === "mark-reviewed" ? `${locale} marked as reviewed` : `${locale} translated`);
+      window.location.reload();
+    } catch (error) {
+      toast2.error(`Could not ${action.replace("-", " ")}: ${error instanceof Error ? error.message : String(error)}`);
+    } finally {
+      setPending(null);
+    }
+  };
+  return /* @__PURE__ */ jsxs5("div", {
+    className: "translator-review__actions",
+    children: [
+      /* @__PURE__ */ jsx7(Button3, {
+        buttonStyle: "primary",
+        disabled: Boolean(pending),
+        onClick: () => run("translate-missing"),
+        size: "small",
+        children: pending === "translate-missing" ? "Translating…" : "Translate missing fields"
+      }),
+      /* @__PURE__ */ jsx7(Button3, {
+        buttonStyle: "secondary",
+        disabled: Boolean(pending),
+        onClick: () => run("translate-all"),
+        size: "small",
+        children: pending === "translate-all" ? "Translating…" : "Re-translate all"
+      }),
+      /* @__PURE__ */ jsx7(Button3, {
+        buttonStyle: "secondary",
+        disabled: Boolean(pending) || reviewed,
+        onClick: () => run("mark-reviewed"),
+        size: "small",
+        children: reviewed ? "Reviewed" : "Mark reviewed"
+      })
+    ]
+  });
+};
+// src/client/components/Review/ReviewStyles.tsx
+
+var ReviewStyles = () => null;
+// src/client/components/Review/TranslationsNavLink.tsx
+import { useConfig as useConfig4 } from "@payloadcms/ui";
+import { formatAdminURL } from "payload/shared";
+import { jsx as jsx8 } from "react/jsx-runtime";
+
+var TranslationsNavLink = () => {
+  const { config: { routes: { admin } } } = useConfig4();
+  const href = formatAdminURL({ adminRoute: admin, path: REVIEW_VIEW_PATH });
+  return /* @__PURE__ */ jsx8("a", {
+    className: "nav__link",
+    href,
+    id: "nav-translations",
+    children: /* @__PURE__ */ jsx8("span", {
+      className: "nav__link-label",
+      children: "Translations"
+    })
+  });
+};
+
 // src/exports/client.ts
 var client_default = CustomButtonWithTranslator;
 export {
-  client_default as default,
-  CustomButtonWithTranslator
+  CustomButtonWithTranslator,
+  ReviewActions,
+  ReviewStyles,
+  TranslationsNavLink,
+  client_default as default
 };

package/dist/index.d.ts

@@ -51,6 +51,14 @@ type TranslatorConfig = {
 	globals: GlobalSlug[];
 	resolvers: TranslateResolver[];
 	autoTranslate?: boolean;
+	/**
+	* what a publish in the default locale does to the other locales.
+	* `missing` (default) fills empty fields and keeps existing translations and slugs;
+	* `all` re-translates every field.
+	*/
+	autoTranslateMode?: "all" | "missing";
+	/** adds the /admin/translations review view, its endpoints and the status collection (default true) */
+	review?: boolean;
 	_options?: {
 		additionalTraverseRichText?: (args: {
 			onText: (siblingData: Record<string, unknown>, attribute?: string) => void;
@@ -60,4 +68,8 @@ type TranslatorConfig = {
 	};
 };
 declare const translator: (pluginConfig: TranslatorConfig) => Plugin;
-export { translator, translateOperation, translator as default, TranslateResolverResponse, TranslateResolverArgs, TranslateResolver };
+import { CollectionConfig } from "payload";
+/** one row per entity and target locale: what source it was translated from, and who reviewed it */
+declare const createTranslationStatusCollection: () => CollectionConfig;
+declare const TRANSLATION_STATUS_SLUG = "translation-status";
+export { TRANSLATION_STATUS_SLUG, TranslateResolver, TranslateResolverArgs, TranslateResolverResponse, createTranslationStatusCollection, translator as default, translateOperation, translator };