@justanarthur/payload-plugin-translator 1.3.20 → 1.3.21

package/dist/client.d.ts

@@ -0,0 +1,6 @@
+import { JSX as JSX_1kxb } from "react/jsx-runtime";
+type Element_12xgc = JSX_1kxb["Element"];
+declare const CustomButtonWithTranslator: ({ type }: {
+	type: "publish" | "save";
+}) => Element_12xgc;
+export { CustomButtonWithTranslator as default, CustomButtonWithTranslator };

package/dist/client.js

@@ -0,0 +1,320 @@
+"use client";
+// src/client/components/CustomButton/CustomButtonWithTranslator.tsx
+import { PublishButton, SaveButton, useConfig as useConfig2, useDocumentInfo as useDocumentInfo2 } from "@payloadcms/ui";
+
+// src/client/providers/Translator/TranslatorProvider.tsx
+import {
+  toast,
+  useAllFormFields,
+  useConfig,
+  useDocumentInfo,
+  useForm,
+  useLocale,
+  useModal,
+  useServerFunctions,
+  useTranslation
+} from "@payloadcms/ui";
+import { reduceFieldsToValues } from "payload/shared";
+import { useEffect, useMemo, useState } from "react";
+
+// src/client/api/index.ts
+var createClient = ({ api, serverURL }) => {
+  const translate = async (args) => {
+    try {
+      const response = await fetch(`${serverURL}${api}/translator/translate`, {
+        body: JSON.stringify(args),
+        credentials: "include",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        method: "POST"
+      });
+      if (!response.ok)
+        return { success: false };
+      return response.json();
+    } catch (e) {
+      if (e instanceof Error)
+        console.error(e.message);
+      return { success: false };
+    }
+  };
+  return {
+    translate
+  };
+};
+
+// src/client/providers/Translator/context.ts
+import { createContext, useContext } from "react";
+var TranslatorContext = createContext(null);
+var useTranslator = () => {
+  const context = useContext(TranslatorContext);
+  if (context === null)
+    throw new Error("useTranslator must be used within TranslatorProvider");
+  return context;
+};
+
+// src/client/providers/Translator/TranslatorProvider.tsx
+import { jsxDEV } from "react/jsx-dev-runtime";
+var modalSlug = "translator-modal";
+var TranslatorProvider = ({ children }) => {
+  const [resolver, setResolver] = useState(null);
+  const [data, dispatch] = useAllFormFields();
+  const { getFormState } = useServerFunctions();
+  const { collectionSlug, getDocPreferences, globalSlug, id } = useDocumentInfo();
+  const { setModified } = useForm();
+  const modal = useModal();
+  const { t } = useTranslation();
+  const resolverT = (key) => {
+    if (!resolver)
+      return "";
+    return t(`plugin-translator:resolver_${resolver}_${key}`);
+  };
+  const locale = useLocale();
+  const {
+    config: {
+      admin: { custom },
+      localization,
+      routes: { api },
+      serverURL
+    }
+  } = useConfig();
+  const apiClient = createClient({ api, serverURL });
+  const resolverConfig = useMemo(() => {
+    if (!resolver)
+      return null;
+    const resolvers = custom?.translator?.resolvers || undefined;
+    if (!resolvers)
+      return null;
+    const resolverConfig2 = resolvers.find((each) => each.key === resolver);
+    return resolverConfig2 ?? 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 closeTranslator = () => modal.closeModal(modalSlug);
+  const submit = async ({ emptyOnly }) => {
+    if (!resolver)
+      return;
+    const args = {
+      collectionSlug,
+      data: reduceFieldsToValues(data, true),
+      emptyOnly,
+      globalSlug,
+      id: id === null ? undefined : id,
+      locale: locale.code,
+      localeFrom: localeToTranslateFrom,
+      resolver
+    };
+    const result = await apiClient.translate(args);
+    if (!result.success) {
+      toast.error(resolverT("errorMessage"));
+      return;
+    }
+    const { state } = await getFormState({
+      collectionSlug,
+      data: result.translatedData,
+      docPermissions: {
+        fields: true,
+        update: true
+      },
+      docPreferences: await getDocPreferences(),
+      globalSlug,
+      locale: locale.code,
+      operation: "update",
+      renderAllFields: true,
+      schemaPath: collectionSlug || globalSlug || ""
+    });
+    if (state) {
+      dispatch({
+        state,
+        type: "REPLACE_STATE"
+      });
+      setModified(true);
+      toast.success(resolverT("successMessage"));
+    }
+    closeTranslator();
+  };
+  return /* @__PURE__ */ jsxDEV(TranslatorContext.Provider, {
+    value: {
+      closeTranslator,
+      localeToTranslateFrom,
+      localesOptions,
+      modalSlug,
+      openTranslator: ({ resolverKey }) => {
+        setResolver(resolverKey);
+        modal.openModal(modalSlug);
+      },
+      resolver: resolverConfig,
+      resolverT,
+      setLocaleToTranslateFrom,
+      submit
+    },
+    children
+  }, undefined, false, undefined, this);
+};
+
+// src/client/components/ResolverButton/ResolverButton.tsx
+import { Button, useTranslation as useTranslation2 } from "@payloadcms/ui";
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+var ResolverButton = ({
+  resolver: { key: resolverKey }
+}) => {
+  const { openTranslator } = useTranslator();
+  const { t } = useTranslation2();
+  const handleClick = () => openTranslator({ resolverKey });
+  return /* @__PURE__ */ jsxDEV2(Button, {
+    onClick: handleClick,
+    children: t(`plugin-translator:resolver_${resolverKey}_buttonLabel`)
+  }, undefined, false, undefined, this);
+};
+// src/client/components/TranslatorModal/TranslatorModal.tsx
+import { Modal } from "@payloadcms/ui";
+
+// src/client/components/TranslatorModal/Content.tsx
+import { getTranslation as getTranslation2 } from "@payloadcms/translations";
+import { Button as Button2, Popup, PopupList, useTranslation as useTranslation4 } from "@payloadcms/ui";
+
+// src/client/components/LocaleLabel/LocaleLabel.tsx
+import { getTranslation } from "@payloadcms/translations";
+import { ChevronIcon, useTranslation as useTranslation3 } from "@payloadcms/ui";
+import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
+var baseClass = "localizer-button";
+var LocaleLabel = ({ locale }) => {
+  const { i18n, t } = useTranslation3();
+  return /* @__PURE__ */ jsxDEV3("div", {
+    "aria-label": t("general:locale"),
+    className: baseClass,
+    children: [
+      /* @__PURE__ */ jsxDEV3("div", {
+        className: `${baseClass}__label`,
+        children: `${t("general:locale")}:`
+      }, undefined, false, undefined, this),
+      "  ",
+      /* @__PURE__ */ jsxDEV3("span", {
+        className: `${baseClass}__current-label`,
+        children: `${getTranslation(locale.label, i18n)}`
+      }, undefined, false, undefined, this),
+      " ",
+      /* @__PURE__ */ jsxDEV3(ChevronIcon, {
+        className: `${baseClass}__chevron`
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+};
+// src/client/components/TranslatorModal/Content.tsx
+import { jsxDEV as jsxDEV4 } from "react/jsx-dev-runtime";
+var Content = () => {
+  const {
+    localeToTranslateFrom: localeCodeToTranslateFrom,
+    localesOptions,
+    resolverT,
+    setLocaleToTranslateFrom,
+    submit
+  } = useTranslator();
+  const { i18n } = useTranslation4();
+  const localeToTranslateFrom = localesOptions.find((each) => each.code === localeCodeToTranslateFrom);
+  return /* @__PURE__ */ jsxDEV4("div", {
+    className: "translator__content",
+    children: [
+      /* @__PURE__ */ jsxDEV4("h2", {
+        children: resolverT("modalTitle")
+      }, undefined, false, undefined, this),
+      localeToTranslateFrom && /* @__PURE__ */ jsxDEV4(Popup, {
+        button: /* @__PURE__ */ jsxDEV4(LocaleLabel, {
+          locale: localeToTranslateFrom
+        }, undefined, false, undefined, this),
+        horizontalAlign: "center",
+        render: ({ close }) => /* @__PURE__ */ jsxDEV4(PopupList.ButtonGroup, {
+          children: localesOptions.map((option) => {
+            const label = getTranslation2(option.label, i18n);
+            return /* @__PURE__ */ jsxDEV4(PopupList.Button, {
+              active: option.code === localeCodeToTranslateFrom,
+              onClick: () => {
+                setLocaleToTranslateFrom(option.code);
+                close();
+              },
+              children: [
+                label,
+                label !== option.code && ` (${option.code})`
+              ]
+            }, option.code, true, undefined, this);
+          })
+        }, undefined, false, undefined, this),
+        verticalAlign: "bottom"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV4("div", {
+        className: "translator__buttons",
+        children: [
+          /* @__PURE__ */ jsxDEV4(Button2, {
+            onClick: () => submit({ emptyOnly: false }),
+            children: resolverT("submitButtonLabelFull")
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV4(Button2, {
+            onClick: () => submit({ emptyOnly: true }),
+            children: resolverT("submitButtonLabelEmpty")
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+};
+
+// src/client/components/TranslatorModal/TranslatorModal.tsx
+import { jsxDEV as jsxDEV5 } from "react/jsx-dev-runtime";
+var TranslatorModal = () => {
+  const { closeTranslator, modalSlug: modalSlug2, resolver } = useTranslator();
+  if (!resolver)
+    return;
+  return /* @__PURE__ */ jsxDEV5(Modal, {
+    className: "translator__modal",
+    slug: modalSlug2,
+    children: /* @__PURE__ */ jsxDEV5("div", {
+      className: "translator__wrapper",
+      children: [
+        /* @__PURE__ */ jsxDEV5("button", {
+          "aria-label": "Close",
+          className: "translator__close",
+          onClick: closeTranslator
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV5(Content, {}, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this)
+  }, undefined, false, undefined, this);
+};
+// src/client/components/CustomButton/CustomButtonWithTranslator.tsx
+import { jsxDEV as jsxDEV6 } from "react/jsx-dev-runtime";
+
+var CustomButtonWithTranslator = ({ type }) => {
+  const { config } = useConfig2();
+  const DefaultButton = type === "publish" ? PublishButton : SaveButton;
+  const { globalSlug, id } = useDocumentInfo2();
+  const resolvers = config.admin?.custom?.translator?.resolvers ?? [];
+  if (!id && !globalSlug)
+    return /* @__PURE__ */ jsxDEV6(DefaultButton, {}, undefined, false, undefined, this);
+  return /* @__PURE__ */ jsxDEV6(TranslatorProvider, {
+    children: /* @__PURE__ */ jsxDEV6("div", {
+      className: "translator__custom-save-button",
+      children: [
+        /* @__PURE__ */ jsxDEV6(TranslatorModal, {}, undefined, false, undefined, this),
+        resolvers.map((resolver) => /* @__PURE__ */ jsxDEV6(ResolverButton, {
+          resolver
+        }, resolver.key, false, undefined, this)),
+        /* @__PURE__ */ jsxDEV6(DefaultButton, {}, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this)
+  }, undefined, false, undefined, this);
+};
+
+// src/exports/client.ts
+var client_default = CustomButtonWithTranslator;
+export {
+  client_default as default,
+  CustomButtonWithTranslator
+};

package/dist/index.d.ts

@@ -1,11 +1,102 @@
-import type { Plugin } from 'payload';
-import { translateOperation } from './translate/operation';
-import type { TranslatorConfig } from './types';
-export { copyResolver } from './resolvers/copy';
-export { googleResolver } from './resolvers/google';
-export { libreResolver } from './resolvers/libreTranslate';
-export { openAIResolver } from './resolvers/openAI';
-export * from './resolvers/types';
-export { translateOperation };
-export declare const translator: (pluginConfig: TranslatorConfig) => Plugin;
-//# sourceMappingURL=index.d.ts.map
+import { Payload, PayloadRequest as PayloadRequest2 } from "payload";
+import { TypeWithID } from "payload";
+type Doc = Record<string, unknown> & TypeWithID;
+type TranslateArgs = {
+	collectionSlug?: string;
+	data?: Record<string, any>;
+	emptyOnly?: boolean;
+	globalSlug?: string;
+	id?: number | string;
+	/** active locale */
+	locale: string;
+	localeFrom: string;
+	overrideAccess?: boolean;
+	resolver: string;
+	update?: boolean;
+};
+type TranslateResult = {
+	success: false;
+} | {
+	success: true;
+	translatedData: Record<string, any>;
+	dataFrom: Doc;
+};
+type TranslateOperationArgs = ({
+	payload: Payload;
+} | {
+	req: PayloadRequest2;
+}) & TranslateArgs;
+declare const translateOperation: (args: TranslateOperationArgs) => Promise<TranslateResult>;
+import { Plugin } from "payload";
+import { CollectionSlug, GlobalSlug } from "payload";
+import { PayloadRequest as PayloadRequest3 } from "payload";
+type TranslateResolverArgs = {
+	/** Locale to translate from */
+	localeFrom: string;
+	/** Locale to translate to */
+	localeTo: string;
+	req: PayloadRequest3;
+	texts: string[];
+};
+type TranslateResolverResponse = {
+	success: false;
+} | {
+	success: true;
+	translatedTexts: string[];
+};
+type TranslateResolver = {
+	key: string;
+	resolve: (args: TranslateResolverArgs) => Promise<TranslateResolverResponse> | TranslateResolverResponse;
+};
+type TranslatorConfig = {
+	/**
+	* Collections with the enabled translator in the admin UI
+	*/
+	collections: CollectionSlug[];
+	/**
+	* Disable the plugin
+	*/
+	disabled?: boolean;
+	/**
+	* Globals with the enabled translator in the admin UI
+	*/
+	globals: GlobalSlug[];
+	/**
+	* Add resolvers that you want to include, examples on how to write your own in ./plugin/src/resolvers
+	*/
+	resolvers: TranslateResolver[];
+	/**
+	* Auto-translate every save in the default locale to the other
+	* configured locales via Payload's job queue.
+	*
+	* When `true`, the plugin:
+	* - registers `createTranslateTask()` and `createTranslateWorkflow()`
+	*   in `config.jobs` (idempotent — skips if a task/workflow with
+	*   the same slug is already registered, so host-customized
+	*   factories survive),
+	* - prepends `createAutoTranslateCollectionHook` /
+	*   `createAutoTranslateGlobalHook` to each collection/global
+	*   listed in `collections` / `globals`.
+	*
+	* Default: `false`. Public factories stay exported for hosts that
+	* need per-entity control.
+	*/
+	autoTranslate?: boolean;
+	/**
+	* Advanced traversal options. Mirrors the options accepted by the
+	* internal field walker — keep in sync if you need the latest shape.
+	*/
+	_options?: {
+		/**
+		* Hook invoked while walking each rich-text node. Lets you append
+		* extra text segments to be translated (e.g. custom lexical nodes).
+		*/
+		additionalTraverseRichText?: (args: {
+			onText: (siblingData: Record<string, unknown>, attribute?: string) => void;
+			root: Record<string, unknown>;
+			siblingData?: Record<string, unknown>;
+		}) => void;
+	};
+};
+declare const translator: (pluginConfig: TranslatorConfig) => Plugin;
+export { translator, translateOperation, translator as default, TranslateResolverResponse, TranslateResolverArgs, TranslateResolver };