payload-intl 1.2.2 → 1.2.3

package/dist/components/MessageFormField.d.ts

@@ -0,0 +1,15 @@
+import type { Locale, TemplateVariable } from '../types';
+import type { MessageValidator } from '../utils/validate';
+interface MessageFormFieldProps {
+    label?: string;
+    locale: Locale;
+    name: string;
+    className?: string;
+    variables: TemplateVariable[];
+    validate: MessageValidator;
+    multiline?: boolean;
+    reference?: string;
+}
+export declare function MessageFormField({ name, variables, label, locale, validate, className, multiline, reference, }: MessageFormFieldProps): React.ReactNode;
+export {};
+//# sourceMappingURL=MessageFormField.d.ts.map

package/dist/components/MessageFormField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageFormField.d.ts","sourceRoot":"","sources":["../../src/components/MessageFormField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AACxD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAIzD,UAAU,qBAAqB;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,gBAAgB,EAAE,CAAC;IAC9B,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,SAAS,EACT,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,SAAS,EACT,SAAS,GACV,EAAE,qBAAqB,GAAG,KAAK,CAAC,SAAS,CA2BzC"}

package/dist/components/{MessageController.js → MessageFormField.js}

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Controller } from 'react-hook-form';
-import { useMessagesForm } from '../components/MessageFormContext';
+import { useMessagesForm } from '../components/MessagesFormProvider';
 import { MessageInput } from './inputs/MessageInput';
-export function MessageController({ name, variables, label, locale, validate, className }) {
+export function MessageFormField({ name, variables, label, locale, validate, className, multiline, reference }) {
     const { control } = useMessagesForm();
     return /*#__PURE__*/ _jsx(Controller, {
         control: control,
@@ -12,8 +12,10 @@ export function MessageController({ name, variables, label, locale, validate, cl
                 error: fieldState.error,
                 label: label,
                 lang: locale,
+                multiline: multiline,
                 onBlur: field.onBlur,
                 onChange: field.onChange,
+                reference: reference,
                 value: field.value || '',
                 variables: variables
             }),
@@ -24,4 +26,4 @@ export function MessageController({ name, variables, label, locale, validate, cl
     });
 }
 
-//# sourceMappingURL=MessageController.js.map
+//# sourceMappingURL=MessageFormField.js.map

package/dist/components/MessageFormField.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/MessageFormField.tsx"],"sourcesContent":["import { Controller } from 'react-hook-form';\nimport { useMessagesForm } from '@/components/MessagesFormProvider';\nimport type { Locale, TemplateVariable } from '@/types';\nimport type { MessageValidator } from '@/utils/validate';\n\nimport { MessageInput } from './inputs/MessageInput';\n\ninterface MessageFormFieldProps {\n  label?: string;\n  locale: Locale;\n  name: string;\n  className?: string;\n  variables: TemplateVariable[];\n  validate: MessageValidator;\n  multiline?: boolean;\n  reference?: string;\n}\n\nexport function MessageFormField({\n  name,\n  variables,\n  label,\n  locale,\n  validate,\n  className,\n  multiline,\n  reference,\n}: MessageFormFieldProps): React.ReactNode {\n  const { control } = useMessagesForm();\n\n  return (\n    <Controller\n      control={control}\n      name={name}\n      render={({ field, fieldState }) => (\n        <MessageInput\n          className={className}\n          error={fieldState.error}\n          label={label}\n          lang={locale}\n          multiline={multiline}\n          onBlur={field.onBlur}\n          onChange={field.onChange}\n          reference={reference}\n          value={(field.value as unknown as string) || ''}\n          variables={variables}\n        />\n      )}\n      rules={{\n        required: true,\n        validate,\n      }}\n    />\n  );\n}\n"],"names":["Controller","useMessagesForm","MessageInput","MessageFormField","name","variables","label","locale","validate","className","multiline","reference","control","render","field","fieldState","error","lang","onBlur","onChange","value","rules","required"],"mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,eAAe,QAAQ,oCAAoC;AAIpE,SAASC,YAAY,QAAQ,wBAAwB;AAarD,OAAO,SAASC,iBAAiB,EAC/BC,IAAI,EACJC,SAAS,EACTC,KAAK,EACLC,MAAM,EACNC,QAAQ,EACRC,SAAS,EACTC,SAAS,EACTC,SAAS,EACa;IACtB,MAAM,EAAEC,OAAO,EAAE,GAAGX;IAEpB,qBACE,KAACD;QACCY,SAASA;QACTR,MAAMA;QACNS,QAAQ,CAAC,EAAEC,KAAK,EAAEC,UAAU,EAAE,iBAC5B,KAACb;gBACCO,WAAWA;gBACXO,OAAOD,WAAWC,KAAK;gBACvBV,OAAOA;gBACPW,MAAMV;gBACNG,WAAWA;gBACXQ,QAAQJ,MAAMI,MAAM;gBACpBC,UAAUL,MAAMK,QAAQ;gBACxBR,WAAWA;gBACXS,OAAO,AAACN,MAAMM,KAAK,IAA0B;gBAC7Cf,WAAWA;;QAGfgB,OAAO;YACLC,UAAU;YACVd;QACF;;AAGN"}

package/dist/components/MessagesForm.d.ts

@@ -1,11 +1,13 @@
 import type { DeepPartial, Locale, Messages, MessagesSchema, Translations } from '../types';
 interface MessagesFormProps {
     locales: Locale[];
+    defaultLocale: Locale;
+    activeLocale: Locale;
     schema: MessagesSchema;
     tabs?: boolean;
     values: Translations<DeepPartial<Messages>>;
     endpointUrl: string;
 }
-export declare function MessagesForm({ locales, schema, tabs, values, endpointUrl, }: MessagesFormProps): React.ReactNode;
+export declare function MessagesForm({ locales, defaultLocale, activeLocale, schema, tabs, values, endpointUrl, }: MessagesFormProps): React.ReactNode;
 export {};
 //# sourceMappingURL=MessagesForm.d.ts.map

package/dist/components/MessagesForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessagesForm.d.ts","sourceRoot":"","sources":["../../src/components/MessagesForm.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EACV,WAAW,EACX,MAAM,EACN,QAAQ,EACR,cAAc,EACd,YAAY,EACb,MAAM,SAAS,CAAC;AAQjB,UAAU,iBAAiB;IACzB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,MAAM,EAAE,cAAc,CAAC;IACvB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,EAAE,YAAY,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC5C,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,MAAM,EACN,IAAY,EACZ,MAAM,EACN,WAAW,GACZ,EAAE,iBAAiB,GAAG,KAAK,CAAC,SAAS,CAuGrC"}
+{"version":3,"file":"MessagesForm.d.ts","sourceRoot":"","sources":["../../src/components/MessagesForm.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EACV,WAAW,EACX,MAAM,EACN,QAAQ,EACR,cAAc,EACd,YAAY,EACb,MAAM,SAAS,CAAC;AAQjB,UAAU,iBAAiB;IACzB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,cAAc,CAAC;IACvB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,EAAE,YAAY,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC5C,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,aAAa,EACb,YAAY,EACZ,MAAM,EACN,IAAY,EACZ,MAAM,EACN,WAAW,GACZ,EAAE,iBAAiB,GAAG,KAAK,CAAC,SAAS,CAyFrC"}

package/dist/components/MessagesForm.js

@@ -1,17 +1,16 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, toast, useStepNav } from '@payloadcms/ui';
-import { isEqual } from 'lodash-es';
+import { Button, useStepNav } from '@payloadcms/ui';
 import { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
-import { MessagesFormProvider } from '../components/MessageFormContext';
-import { getErrorMessage } from '../utils/error-handling';
+import { MessagesFormProvider } from '../components/MessagesFormProvider';
 import { JsonImport } from './actions/JsonImport';
+import { useMessagesFormSubmit } from './hooks/useMessagesFormSubmit';
 import { MessageField } from './layout/MessageField';
 import { MessagesTabs } from './layout/MessagesTabs';
 import { MessagesTree } from './layout/MessagesTree';
 import styles from './MessagesForm.module.css';
-export function MessagesForm({ locales, schema, tabs = false, values, endpointUrl }) {
+export function MessagesForm({ locales, defaultLocale, activeLocale, schema, tabs = false, values, endpointUrl }) {
     const { setStepNav } = useStepNav();
     useEffect(()=>{
         setStepNav([
@@ -25,40 +24,28 @@ export function MessagesForm({ locales, schema, tabs = false, values, endpointUr
     ]);
     const form = useForm({
         defaultValues: values,
-        reValidateMode: 'onChange'
+        reValidateMode: 'onBlur'
     });
     const [activeTab, setActiveTab] = useState(Object.keys(schema)[0]);
-    const handleSubmit = async (currentValues)=>{
-        const toastId = toast.loading('Saving...');
-        const changes = Object.entries(currentValues).reduce((acc, [locale, value])=>{
-            const hasChanged = !isEqual(value, values[locale]);
-            if (!hasChanged) return acc;
-            acc[locale] = value;
-            return acc;
-        }, {});
-        try {
-            const response = await fetch(endpointUrl, {
-                method: 'PUT',
-                headers: {
-                    'Content-Type': 'application/json'
-                },
-                body: JSON.stringify(changes)
-            });
-            if (!response.ok) {
-                const error = await getErrorMessage(response);
-                throw new Error(error);
+    useEffect(()=>{
+        const handler = (e)=>{
+            if (form.formState.isDirty) {
+                e.preventDefault();
             }
-            form.reset(currentValues);
-            toast.success('Saved', {
-                id: toastId
-            });
-        } catch (error) {
-            toast.error(`Failed to save: ${error instanceof Error ? error.message : 'Unknown error'}`, {
-                id: toastId
-            });
-        }
-    };
+        };
+        window.addEventListener('beforeunload', handler);
+        return ()=>window.removeEventListener('beforeunload', handler);
+    }, [
+        form
+    ]);
+    const handleSubmit = useMessagesFormSubmit({
+        endpointUrl,
+        defaultValues: values,
+        form
+    });
     return /*#__PURE__*/ _jsx(MessagesFormProvider, {
+        activeLocale: activeLocale,
+        defaultLocale: defaultLocale,
         form: form,
         locales: locales,
         children: /*#__PURE__*/ _jsxs("form", {
@@ -78,7 +65,9 @@ export function MessagesForm({ locales, schema, tabs = false, values, endpointUr
                                 /*#__PURE__*/ _jsxs("div", {
                                     className: styles.actions,
                                     children: [
-                                        /*#__PURE__*/ _jsx(JsonImport, {}),
+                                        /*#__PURE__*/ _jsx(JsonImport, {
+                                            activeLocale: activeLocale
+                                        }),
                                         /*#__PURE__*/ _jsx(Button, {
                                             className: styles.saveButton,
                                             disabled: !form.formState.isDirty,

package/dist/components/MessagesForm.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/MessagesForm.tsx"],"sourcesContent":["'use client';\n\nimport { Button, toast, useStepNav } from '@payloadcms/ui';\nimport { isEqual } from 'lodash-es';\nimport { useEffect, useState } from 'react';\nimport { useForm } from 'react-hook-form';\nimport type { FormValues } from '@/components/MessageFormContext';\nimport { MessagesFormProvider } from '@/components/MessageFormContext';\nimport type {\n  DeepPartial,\n  Locale,\n  Messages,\n  MessagesSchema,\n  Translations,\n} from '@/types';\nimport { getErrorMessage } from '@/utils/error-handling';\nimport { JsonImport } from './actions/JsonImport';\nimport { MessageField } from './layout/MessageField';\nimport { MessagesTabs } from './layout/MessagesTabs';\nimport { MessagesTree } from './layout/MessagesTree';\nimport styles from './MessagesForm.module.css';\n\ninterface MessagesFormProps {\n  locales: Locale[];\n  schema: MessagesSchema;\n  tabs?: boolean;\n  values: Translations<DeepPartial<Messages>>;\n  endpointUrl: string;\n}\n\nexport function MessagesForm({\n  locales,\n  schema,\n  tabs = false,\n  values,\n  endpointUrl,\n}: MessagesFormProps): React.ReactNode {\n  const { setStepNav } = useStepNav();\n  useEffect(() => {\n    setStepNav([{ label: 'Intl Messages', url: '/intl' }]);\n  }, [setStepNav]);\n\n  const form = useForm<FormValues>({\n    defaultValues: values,\n    reValidateMode: 'onChange',\n  });\n  const [activeTab, setActiveTab] = useState(Object.keys(schema)[0]);\n\n  const handleSubmit = async (currentValues: FormValues) => {\n    const toastId = toast.loading('Saving...');\n    const changes = Object.entries(currentValues).reduce<\n      Translations<Messages>\n    >((acc, [locale, value]) => {\n      const hasChanged = !isEqual(value, values[locale]);\n      if (!hasChanged) return acc;\n      acc[locale] = value;\n      return acc;\n    }, {});\n\n    try {\n      const response = await fetch(endpointUrl, {\n        method: 'PUT',\n        headers: {\n          'Content-Type': 'application/json',\n        },\n        body: JSON.stringify(changes),\n      });\n\n      if (!response.ok) {\n        const error = await getErrorMessage(response);\n        throw new Error(error);\n      }\n\n      form.reset(currentValues);\n      toast.success('Saved', { id: toastId });\n    } catch (error) {\n      toast.error(\n        `Failed to save: ${error instanceof Error ? error.message : 'Unknown error'}`,\n        { id: toastId },\n      );\n    }\n  };\n\n  return (\n    <MessagesFormProvider form={form} locales={locales}>\n      <form className={styles.form} onSubmit={form.handleSubmit(handleSubmit)}>\n        <div className={styles.stickyHeader}>\n          <header className={styles.header}>\n            <h1 className={styles.title}>Messages</h1>\n            <div className={styles.actions}>\n              <JsonImport />\n              <Button\n                className={styles.saveButton}\n                disabled={!form.formState.isDirty}\n                type=\"submit\"\n              >\n                Save\n              </Button>\n            </div>\n          </header>\n\n          {tabs && (\n            <MessagesTabs\n              activeTab={activeTab}\n              schema={schema}\n              setActiveTab={setActiveTab}\n            />\n          )}\n        </div>\n\n        <div className={styles.content} id=\"messages-form-content\">\n          {!tabs && <MessagesTree nestingLevel={0} path=\"\" schema={schema} />}\n          {tabs &&\n            Object.entries(schema).map(([key, value]) => {\n              if (typeof value === 'string') {\n                return (\n                  <MessageField\n                    hidden={activeTab !== key}\n                    key={key}\n                    messageKey={key}\n                    path={key}\n                    schema={value}\n                  />\n                );\n              }\n              return (\n                <MessagesTree\n                  hidden={activeTab !== key}\n                  key={key}\n                  nestingLevel={0}\n                  path={key}\n                  schema={value}\n                />\n              );\n            })}\n        </div>\n      </form>\n    </MessagesFormProvider>\n  );\n}\n"],"names":["Button","toast","useStepNav","isEqual","useEffect","useState","useForm","MessagesFormProvider","getErrorMessage","JsonImport","MessageField","MessagesTabs","MessagesTree","styles","MessagesForm","locales","schema","tabs","values","endpointUrl","setStepNav","label","url","form","defaultValues","reValidateMode","activeTab","setActiveTab","Object","keys","handleSubmit","currentValues","toastId","loading","changes","entries","reduce","acc","locale","value","hasChanged","response","fetch","method","headers","body","JSON","stringify","ok","error","Error","reset","success","id","message","className","onSubmit","div","stickyHeader","header","h1","title","actions","saveButton","disabled","formState","isDirty","type","content","nestingLevel","path","map","key","hidden","messageKey"],"mappings":"AAAA;;AAEA,SAASA,MAAM,EAAEC,KAAK,EAAEC,UAAU,QAAQ,iBAAiB;AAC3D,SAASC,OAAO,QAAQ,YAAY;AACpC,SAASC,SAAS,EAAEC,QAAQ,QAAQ,QAAQ;AAC5C,SAASC,OAAO,QAAQ,kBAAkB;AAE1C,SAASC,oBAAoB,QAAQ,kCAAkC;AAQvE,SAASC,eAAe,QAAQ,yBAAyB;AACzD,SAASC,UAAU,QAAQ,uBAAuB;AAClD,SAASC,YAAY,QAAQ,wBAAwB;AACrD,SAASC,YAAY,QAAQ,wBAAwB;AACrD,SAASC,YAAY,QAAQ,wBAAwB;AACrD,OAAOC,YAAY,4BAA4B;AAU/C,OAAO,SAASC,aAAa,EAC3BC,OAAO,EACPC,MAAM,EACNC,OAAO,KAAK,EACZC,MAAM,EACNC,WAAW,EACO;IAClB,MAAM,EAAEC,UAAU,EAAE,GAAGlB;IACvBE,UAAU;QACRgB,WAAW;YAAC;gBAAEC,OAAO;gBAAiBC,KAAK;YAAQ;SAAE;IACvD,GAAG;QAACF;KAAW;IAEf,MAAMG,OAAOjB,QAAoB;QAC/BkB,eAAeN;QACfO,gBAAgB;IAClB;IACA,MAAM,CAACC,WAAWC,aAAa,GAAGtB,SAASuB,OAAOC,IAAI,CAACb,OAAO,CAAC,EAAE;IAEjE,MAAMc,eAAe,OAAOC;QAC1B,MAAMC,UAAU/B,MAAMgC,OAAO,CAAC;QAC9B,MAAMC,UAAUN,OAAOO,OAAO,CAACJ,eAAeK,MAAM,CAElD,CAACC,KAAK,CAACC,QAAQC,MAAM;YACrB,MAAMC,aAAa,CAACrC,QAAQoC,OAAOrB,MAAM,CAACoB,OAAO;YACjD,IAAI,CAACE,YAAY,OAAOH;YACxBA,GAAG,CAACC,OAAO,GAAGC;YACd,OAAOF;QACT,GAAG,CAAC;QAEJ,IAAI;YACF,MAAMI,WAAW,MAAMC,MAAMvB,aAAa;gBACxCwB,QAAQ;gBACRC,SAAS;oBACP,gBAAgB;gBAClB;gBACAC,MAAMC,KAAKC,SAAS,CAACb;YACvB;YAEA,IAAI,CAACO,SAASO,EAAE,EAAE;gBAChB,MAAMC,QAAQ,MAAMzC,gBAAgBiC;gBACpC,MAAM,IAAIS,MAAMD;YAClB;YAEA1B,KAAK4B,KAAK,CAACpB;YACX9B,MAAMmD,OAAO,CAAC,SAAS;gBAAEC,IAAIrB;YAAQ;QACvC,EAAE,OAAOiB,OAAO;YACdhD,MAAMgD,KAAK,CACT,CAAC,gBAAgB,EAAEA,iBAAiBC,QAAQD,MAAMK,OAAO,GAAG,iBAAiB,EAC7E;gBAAED,IAAIrB;YAAQ;QAElB;IACF;IAEA,qBACE,KAACzB;QAAqBgB,MAAMA;QAAMR,SAASA;kBACzC,cAAA,MAACQ;YAAKgC,WAAW1C,OAAOU,IAAI;YAAEiC,UAAUjC,KAAKO,YAAY,CAACA;;8BACxD,MAAC2B;oBAAIF,WAAW1C,OAAO6C,YAAY;;sCACjC,MAACC;4BAAOJ,WAAW1C,OAAO8C,MAAM;;8CAC9B,KAACC;oCAAGL,WAAW1C,OAAOgD,KAAK;8CAAE;;8CAC7B,MAACJ;oCAAIF,WAAW1C,OAAOiD,OAAO;;sDAC5B,KAACrD;sDACD,KAACT;4CACCuD,WAAW1C,OAAOkD,UAAU;4CAC5BC,UAAU,CAACzC,KAAK0C,SAAS,CAACC,OAAO;4CACjCC,MAAK;sDACN;;;;;;wBAMJlD,sBACC,KAACN;4BACCe,WAAWA;4BACXV,QAAQA;4BACRW,cAAcA;;;;8BAKpB,MAAC8B;oBAAIF,WAAW1C,OAAOuD,OAAO;oBAAEf,IAAG;;wBAChC,CAACpC,sBAAQ,KAACL;4BAAayD,cAAc;4BAAGC,MAAK;4BAAGtD,QAAQA;;wBACxDC,QACCW,OAAOO,OAAO,CAACnB,QAAQuD,GAAG,CAAC,CAAC,CAACC,KAAKjC,MAAM;4BACtC,IAAI,OAAOA,UAAU,UAAU;gCAC7B,qBACE,KAAC7B;oCACC+D,QAAQ/C,cAAc8C;oCAEtBE,YAAYF;oCACZF,MAAME;oCACNxD,QAAQuB;mCAHHiC;4BAMX;4BACA,qBACE,KAAC5D;gCACC6D,QAAQ/C,cAAc8C;gCAEtBH,cAAc;gCACdC,MAAME;gCACNxD,QAAQuB;+BAHHiC;wBAMX;;;;;;AAKZ"}
+{"version":3,"sources":["../../src/components/MessagesForm.tsx"],"sourcesContent":["'use client';\n\nimport { Button, useStepNav } from '@payloadcms/ui';\nimport { useEffect, useState } from 'react';\nimport { useForm } from 'react-hook-form';\nimport type { FormValues } from '@/components/MessagesFormProvider';\nimport { MessagesFormProvider } from '@/components/MessagesFormProvider';\nimport type {\n  DeepPartial,\n  Locale,\n  Messages,\n  MessagesSchema,\n  Translations,\n} from '@/types';\nimport { JsonImport } from './actions/JsonImport';\nimport { useMessagesFormSubmit } from './hooks/useMessagesFormSubmit';\nimport { MessageField } from './layout/MessageField';\nimport { MessagesTabs } from './layout/MessagesTabs';\nimport { MessagesTree } from './layout/MessagesTree';\nimport styles from './MessagesForm.module.css';\n\ninterface MessagesFormProps {\n  locales: Locale[];\n  defaultLocale: Locale;\n  activeLocale: Locale;\n  schema: MessagesSchema;\n  tabs?: boolean;\n  values: Translations<DeepPartial<Messages>>;\n  endpointUrl: string;\n}\n\nexport function MessagesForm({\n  locales,\n  defaultLocale,\n  activeLocale,\n  schema,\n  tabs = false,\n  values,\n  endpointUrl,\n}: MessagesFormProps): React.ReactNode {\n  const { setStepNav } = useStepNav();\n  useEffect(() => {\n    setStepNav([{ label: 'Intl Messages', url: '/intl' }]);\n  }, [setStepNav]);\n\n  const form = useForm<FormValues>({\n    defaultValues: values,\n    reValidateMode: 'onBlur',\n  });\n  const [activeTab, setActiveTab] = useState(Object.keys(schema)[0]);\n\n  useEffect(() => {\n    const handler = (e: BeforeUnloadEvent) => {\n      if (form.formState.isDirty) {\n        e.preventDefault();\n      }\n    };\n    window.addEventListener('beforeunload', handler);\n    return () => window.removeEventListener('beforeunload', handler);\n  }, [form]);\n\n  const handleSubmit = useMessagesFormSubmit({\n    endpointUrl,\n    defaultValues: values,\n    form,\n  });\n\n  return (\n    <MessagesFormProvider\n      activeLocale={activeLocale}\n      defaultLocale={defaultLocale}\n      form={form}\n      locales={locales}\n    >\n      <form className={styles.form} onSubmit={form.handleSubmit(handleSubmit)}>\n        <div className={styles.stickyHeader}>\n          <header className={styles.header}>\n            <h1 className={styles.title}>Messages</h1>\n            <div className={styles.actions}>\n              <JsonImport activeLocale={activeLocale} />\n              <Button\n                className={styles.saveButton}\n                disabled={!form.formState.isDirty}\n                type=\"submit\"\n              >\n                Save\n              </Button>\n            </div>\n          </header>\n\n          {tabs && (\n            <MessagesTabs\n              activeTab={activeTab}\n              schema={schema}\n              setActiveTab={setActiveTab}\n            />\n          )}\n        </div>\n\n        <div className={styles.content} id=\"messages-form-content\">\n          {!tabs && <MessagesTree nestingLevel={0} path=\"\" schema={schema} />}\n          {tabs &&\n            Object.entries(schema).map(([key, value]) => {\n              if (typeof value === 'string') {\n                return (\n                  <MessageField\n                    hidden={activeTab !== key}\n                    key={key}\n                    messageKey={key}\n                    path={key}\n                    schema={value}\n                  />\n                );\n              }\n              return (\n                <MessagesTree\n                  hidden={activeTab !== key}\n                  key={key}\n                  nestingLevel={0}\n                  path={key}\n                  schema={value}\n                />\n              );\n            })}\n        </div>\n      </form>\n    </MessagesFormProvider>\n  );\n}\n"],"names":["Button","useStepNav","useEffect","useState","useForm","MessagesFormProvider","JsonImport","useMessagesFormSubmit","MessageField","MessagesTabs","MessagesTree","styles","MessagesForm","locales","defaultLocale","activeLocale","schema","tabs","values","endpointUrl","setStepNav","label","url","form","defaultValues","reValidateMode","activeTab","setActiveTab","Object","keys","handler","e","formState","isDirty","preventDefault","window","addEventListener","removeEventListener","handleSubmit","className","onSubmit","div","stickyHeader","header","h1","title","actions","saveButton","disabled","type","content","id","nestingLevel","path","entries","map","key","value","hidden","messageKey"],"mappings":"AAAA;;AAEA,SAASA,MAAM,EAAEC,UAAU,QAAQ,iBAAiB;AACpD,SAASC,SAAS,EAAEC,QAAQ,QAAQ,QAAQ;AAC5C,SAASC,OAAO,QAAQ,kBAAkB;AAE1C,SAASC,oBAAoB,QAAQ,oCAAoC;AAQzE,SAASC,UAAU,QAAQ,uBAAuB;AAClD,SAASC,qBAAqB,QAAQ,gCAAgC;AACtE,SAASC,YAAY,QAAQ,wBAAwB;AACrD,SAASC,YAAY,QAAQ,wBAAwB;AACrD,SAASC,YAAY,QAAQ,wBAAwB;AACrD,OAAOC,YAAY,4BAA4B;AAY/C,OAAO,SAASC,aAAa,EAC3BC,OAAO,EACPC,aAAa,EACbC,YAAY,EACZC,MAAM,EACNC,OAAO,KAAK,EACZC,MAAM,EACNC,WAAW,EACO;IAClB,MAAM,EAAEC,UAAU,EAAE,GAAGnB;IACvBC,UAAU;QACRkB,WAAW;YAAC;gBAAEC,OAAO;gBAAiBC,KAAK;YAAQ;SAAE;IACvD,GAAG;QAACF;KAAW;IAEf,MAAMG,OAAOnB,QAAoB;QAC/BoB,eAAeN;QACfO,gBAAgB;IAClB;IACA,MAAM,CAACC,WAAWC,aAAa,GAAGxB,SAASyB,OAAOC,IAAI,CAACb,OAAO,CAAC,EAAE;IAEjEd,UAAU;QACR,MAAM4B,UAAU,CAACC;YACf,IAAIR,KAAKS,SAAS,CAACC,OAAO,EAAE;gBAC1BF,EAAEG,cAAc;YAClB;QACF;QACAC,OAAOC,gBAAgB,CAAC,gBAAgBN;QACxC,OAAO,IAAMK,OAAOE,mBAAmB,CAAC,gBAAgBP;IAC1D,GAAG;QAACP;KAAK;IAET,MAAMe,eAAe/B,sBAAsB;QACzCY;QACAK,eAAeN;QACfK;IACF;IAEA,qBACE,KAAClB;QACCU,cAAcA;QACdD,eAAeA;QACfS,MAAMA;QACNV,SAASA;kBAET,cAAA,MAACU;YAAKgB,WAAW5B,OAAOY,IAAI;YAAEiB,UAAUjB,KAAKe,YAAY,CAACA;;8BACxD,MAACG;oBAAIF,WAAW5B,OAAO+B,YAAY;;sCACjC,MAACC;4BAAOJ,WAAW5B,OAAOgC,MAAM;;8CAC9B,KAACC;oCAAGL,WAAW5B,OAAOkC,KAAK;8CAAE;;8CAC7B,MAACJ;oCAAIF,WAAW5B,OAAOmC,OAAO;;sDAC5B,KAACxC;4CAAWS,cAAcA;;sDAC1B,KAACf;4CACCuC,WAAW5B,OAAOoC,UAAU;4CAC5BC,UAAU,CAACzB,KAAKS,SAAS,CAACC,OAAO;4CACjCgB,MAAK;sDACN;;;;;;wBAMJhC,sBACC,KAACR;4BACCiB,WAAWA;4BACXV,QAAQA;4BACRW,cAAcA;;;;8BAKpB,MAACc;oBAAIF,WAAW5B,OAAOuC,OAAO;oBAAEC,IAAG;;wBAChC,CAAClC,sBAAQ,KAACP;4BAAa0C,cAAc;4BAAGC,MAAK;4BAAGrC,QAAQA;;wBACxDC,QACCW,OAAO0B,OAAO,CAACtC,QAAQuC,GAAG,CAAC,CAAC,CAACC,KAAKC,MAAM;4BACtC,IAAI,OAAOA,UAAU,UAAU;gCAC7B,qBACE,KAACjD;oCACCkD,QAAQhC,cAAc8B;oCAEtBG,YAAYH;oCACZH,MAAMG;oCACNxC,QAAQyC;mCAHHD;4BAMX;4BACA,qBACE,KAAC9C;gCACCgD,QAAQhC,cAAc8B;gCAEtBJ,cAAc;gCACdC,MAAMG;gCACNxC,QAAQyC;+BAHHD;wBAMX;;;;;;AAKZ"}

package/dist/components/{MessageFormContext.d.ts → MessagesFormProvider.d.ts}

@@ -3,9 +3,11 @@ import type { Locale, Messages, Translations } from '../types';
 export type FormValues = Translations<Messages>;
 interface MessagesFormProviderProps {
     locales: Locale[];
+    defaultLocale: Locale;
+    activeLocale: Locale;
     form: UseFormReturn<FormValues>;
 }
-export declare function MessagesFormProvider({ locales, form, children, }: React.PropsWithChildren<MessagesFormProviderProps>): import("react/jsx-runtime").JSX.Element;
+export declare function MessagesFormProvider({ locales, defaultLocale, activeLocale, form, children, }: React.PropsWithChildren<MessagesFormProviderProps>): import("react/jsx-runtime").JSX.Element;
 export declare const useMessagesForm: () => {
     watch: import("react-hook-form").UseFormWatch<FormValues>;
     getValues: import("react-hook-form").UseFormGetValues<FormValues>;
@@ -24,6 +26,8 @@ export declare const useMessagesForm: () => {
     setFocus: import("react-hook-form").UseFormSetFocus<FormValues>;
     subscribe: import("react-hook-form").UseFormSubscribe<FormValues>;
     locales: Locale[];
+    defaultLocale: Locale;
+    activeLocale: Locale;
 };
 export {};
-//# sourceMappingURL=MessageFormContext.d.ts.map
+//# sourceMappingURL=MessagesFormProvider.d.ts.map

package/dist/components/MessagesFormProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessagesFormProvider.d.ts","sourceRoot":"","sources":["../../src/components/MessagesFormProvider.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErD,OAAO,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE9D,MAAM,MAAM,UAAU,GAAG,YAAY,CAAC,QAAQ,CAAC,CAAC;AAYhD,UAAU,yBAAyB;IACjC,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;CACjC;AAED,wBAAgB,oBAAoB,CAAC,EACnC,OAAO,EACP,aAAa,EACb,YAAY,EACZ,IAAI,EACJ,QAAQ,GACT,EAAE,KAAK,CAAC,iBAAiB,CAAC,yBAAyB,CAAC,2CAMpD;AAED,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;aA9BjB,MAAM,EAAE;mBACF,MAAM;kBACP,MAAM;CAmCrB,CAAC"}

package/dist/components/{MessageFormContext.js → MessagesFormProvider.js}

@@ -5,12 +5,16 @@ import { FormProvider, useFormContext } from 'react-hook-form';
 const MessagesFormContext = /*#__PURE__*/ createContext({
     locales: [
         'en'
-    ]
+    ],
+    defaultLocale: 'en',
+    activeLocale: 'en'
 });
-export function MessagesFormProvider({ locales, form, children }) {
+export function MessagesFormProvider({ locales, defaultLocale, activeLocale, form, children }) {
     return /*#__PURE__*/ _jsx(MessagesFormContext, {
         value: {
-            locales
+            locales,
+            defaultLocale,
+            activeLocale
         },
         children: /*#__PURE__*/ _jsx(FormProvider, {
             ...form,
@@ -27,4 +31,4 @@ export const useMessagesForm = ()=>{
     };
 };
 
-//# sourceMappingURL=MessageFormContext.js.map
+//# sourceMappingURL=MessagesFormProvider.js.map

package/dist/components/MessagesFormProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/MessagesFormProvider.tsx"],"sourcesContent":["'use client';\n\nimport { createContext, use } from 'react';\nimport type { UseFormReturn } from 'react-hook-form';\nimport { FormProvider, useFormContext } from 'react-hook-form';\nimport type { Locale, Messages, Translations } from '@/types';\n\nexport type FormValues = Translations<Messages>;\n\nconst MessagesFormContext = createContext<{\n  locales: Locale[];\n  defaultLocale: Locale;\n  activeLocale: Locale;\n}>({\n  locales: ['en'],\n  defaultLocale: 'en',\n  activeLocale: 'en',\n});\n\ninterface MessagesFormProviderProps {\n  locales: Locale[];\n  defaultLocale: Locale;\n  activeLocale: Locale;\n  form: UseFormReturn<FormValues>;\n}\n\nexport function MessagesFormProvider({\n  locales,\n  defaultLocale,\n  activeLocale,\n  form,\n  children,\n}: React.PropsWithChildren<MessagesFormProviderProps>) {\n  return (\n    <MessagesFormContext value={{ locales, defaultLocale, activeLocale }}>\n      <FormProvider {...form}>{children}</FormProvider>\n    </MessagesFormContext>\n  );\n}\n\nexport const useMessagesForm = () => {\n  const context = use(MessagesFormContext);\n  const form = useFormContext<FormValues>();\n  return {\n    ...context,\n    ...form,\n  };\n};\n"],"names":["createContext","use","FormProvider","useFormContext","MessagesFormContext","locales","defaultLocale","activeLocale","MessagesFormProvider","form","children","value","useMessagesForm","context"],"mappings":"AAAA;;AAEA,SAASA,aAAa,EAAEC,GAAG,QAAQ,QAAQ;AAE3C,SAASC,YAAY,EAAEC,cAAc,QAAQ,kBAAkB;AAK/D,MAAMC,oCAAsBJ,cAIzB;IACDK,SAAS;QAAC;KAAK;IACfC,eAAe;IACfC,cAAc;AAChB;AASA,OAAO,SAASC,qBAAqB,EACnCH,OAAO,EACPC,aAAa,EACbC,YAAY,EACZE,IAAI,EACJC,QAAQ,EAC2C;IACnD,qBACE,KAACN;QAAoBO,OAAO;YAAEN;YAASC;YAAeC;QAAa;kBACjE,cAAA,KAACL;YAAc,GAAGO,IAAI;sBAAGC;;;AAG/B;AAEA,OAAO,MAAME,kBAAkB;IAC7B,MAAMC,UAAUZ,IAAIG;IACpB,MAAMK,OAAON;IACb,OAAO;QACL,GAAGU,OAAO;QACV,GAAGJ,IAAI;IACT;AACF,EAAE"}

package/dist/components/MessagesLink.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Button } from '@payloadcms/ui';
-import { getAdminURL } from '../_common/index.js';
+import { getAdminURL } from '../internals/index.js';
 import { IconWorld } from '@tabler/icons-react';
 export async function MessagesLink({ access = ()=>true, req }) {
     const hasAccess = await access(req);
@@ -12,7 +12,10 @@ export async function MessagesLink({ access = ()=>true, req }) {
             req,
             path: '/intl'
         }),
-        children: /*#__PURE__*/ _jsx(IconWorld, {})
+        children: /*#__PURE__*/ _jsx(IconWorld, {
+            size: 20,
+            strokeWidth: 1.5
+        })
     });
 }
 

package/dist/components/MessagesLink.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/MessagesLink.tsx"],"sourcesContent":["import { Button } from '@payloadcms/ui';\nimport { getAdminURL } from '@repo/common';\nimport { IconWorld } from '@tabler/icons-react';\nimport type { PayloadRequest } from 'payload';\nimport type { MessagesGuard } from '@/types';\n\nexport interface MessagesLinkProps {\n  access?: MessagesGuard;\n  req: PayloadRequest;\n}\n\nexport async function MessagesLink({\n  access = () => true,\n  req,\n}: MessagesLinkProps) {\n  const hasAccess = await access(req);\n  if (!hasAccess) return null;\n\n  return (\n    <Button\n      buttonStyle=\"tab\"\n      el=\"link\"\n      to={getAdminURL({ req, path: '/intl' })}\n    >\n      <IconWorld />\n    </Button>\n  );\n}\n"],"names":["Button","getAdminURL","IconWorld","MessagesLink","access","req","hasAccess","buttonStyle","el","to","path"],"mappings":";AAAA,SAASA,MAAM,QAAQ,iBAAiB;AACxC,SAASC,WAAW,QAAQ,eAAe;AAC3C,SAASC,SAAS,QAAQ,sBAAsB;AAShD,OAAO,eAAeC,aAAa,EACjCC,SAAS,IAAM,IAAI,EACnBC,GAAG,EACe;IAClB,MAAMC,YAAY,MAAMF,OAAOC;IAC/B,IAAI,CAACC,WAAW,OAAO;IAEvB,qBACE,KAACN;QACCO,aAAY;QACZC,IAAG;QACHC,IAAIR,YAAY;YAAEI;YAAKK,MAAM;QAAQ;kBAErC,cAAA,KAACR;;AAGP"}
+{"version":3,"sources":["../../src/components/MessagesLink.tsx"],"sourcesContent":["import { Button } from '@payloadcms/ui';\nimport { getAdminURL } from '@repo/common';\nimport { IconWorld } from '@tabler/icons-react';\nimport type { PayloadRequest } from 'payload';\nimport type { MessagesGuard } from '@/types';\n\nexport interface MessagesLinkProps {\n  access?: MessagesGuard;\n  req: PayloadRequest;\n}\n\nexport async function MessagesLink({\n  access = () => true,\n  req,\n}: MessagesLinkProps) {\n  const hasAccess = await access(req);\n  if (!hasAccess) return null;\n\n  return (\n    <Button\n      buttonStyle=\"tab\"\n      el=\"link\"\n      to={getAdminURL({ req, path: '/intl' })}\n    >\n      <IconWorld size={20} strokeWidth={1.5} />\n    </Button>\n  );\n}\n"],"names":["Button","getAdminURL","IconWorld","MessagesLink","access","req","hasAccess","buttonStyle","el","to","path","size","strokeWidth"],"mappings":";AAAA,SAASA,MAAM,QAAQ,iBAAiB;AACxC,SAASC,WAAW,QAAQ,eAAe;AAC3C,SAASC,SAAS,QAAQ,sBAAsB;AAShD,OAAO,eAAeC,aAAa,EACjCC,SAAS,IAAM,IAAI,EACnBC,GAAG,EACe;IAClB,MAAMC,YAAY,MAAMF,OAAOC;IAC/B,IAAI,CAACC,WAAW,OAAO;IAEvB,qBACE,KAACN;QACCO,aAAY;QACZC,IAAG;QACHC,IAAIR,YAAY;YAAEI;YAAKK,MAAM;QAAQ;kBAErC,cAAA,KAACR;YAAUS,MAAM;YAAIC,aAAa;;;AAGxC"}

package/dist/components/MessagesView.d.ts

@@ -6,5 +6,5 @@ export interface MessagesViewProps {
     tabs: boolean | undefined;
     access: MessagesGuard;
 }
-export declare function MessagesView({ access, initPageResult: { req, locale, permissions, visibleEntities }, locales, params, payload, schema, searchParams, tabs, }: AdminViewServerProps & MessagesViewProps): Promise<import("react/jsx-runtime").JSX.Element>;
+export declare function MessagesView({ access, initPageResult: { req, locale, permissions, visibleEntities }, locales, params, payload, schema, searchParams, tabs, }: AdminViewServerProps & MessagesViewProps): Promise<import("react/jsx-runtime").JSX.Element | null>;
 //# sourceMappingURL=MessagesView.d.ts.map

package/dist/components/MessagesView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessagesView.d.ts","sourceRoot":"","sources":["../../src/components/MessagesView.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AACpD,OAAO,KAAK,EAEV,MAAM,EACN,QAAQ,EACR,aAAa,EAEd,MAAM,SAAS,CAAC;AAKjB,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,MAAM,EAAE,QAAQ,CAAC;IACjB,IAAI,EAAE,OAAO,GAAG,SAAS,CAAC;IAC1B,MAAM,EAAE,aAAa,CAAC;CACvB;AAED,wBAAsB,YAAY,CAAC,EACjC,MAAM,EACN,cAAc,EAAE,EAAE,GAAG,EAAE,MAAM,EAAE,WAAW,EAAE,eAAe,EAAE,EAC7D,OAAO,EACP,MAAM,EACN,OAAO,EACP,MAAM,EACN,YAAY,EACZ,IAAY,GACb,EAAE,oBAAoB,GAAG,iBAAiB,oDA6C1C"}
+{"version":3,"file":"MessagesView.d.ts","sourceRoot":"","sources":["../../src/components/MessagesView.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AACpD,OAAO,KAAK,EAEV,MAAM,EACN,QAAQ,EACR,aAAa,EAEd,MAAM,SAAS,CAAC;AAKjB,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,MAAM,EAAE,QAAQ,CAAC;IACjB,IAAI,EAAE,OAAO,GAAG,SAAS,CAAC;IAC1B,MAAM,EAAE,aAAa,CAAC;CACvB;AAED,wBAAsB,YAAY,CAAC,EACjC,MAAM,EACN,cAAc,EAAE,EAAE,GAAG,EAAE,MAAM,EAAE,WAAW,EAAE,eAAe,EAAE,EAC7D,OAAO,EACP,MAAM,EACN,OAAO,EACP,MAAM,EACN,YAAY,EACZ,IAAY,GACb,EAAE,oBAAoB,GAAG,iBAAiB,2DAwD1C"}

package/dist/components/MessagesView.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { DefaultTemplate } from '@payloadcms/next/templates';
 import { Gutter } from '@payloadcms/ui';
-import { getAdminURL } from '../_common/index.js';
+import { getAdminURL } from '../internals/index.js';
 import { RedirectType, redirect } from 'next/navigation';
 import { sanitizeMessages } from '../utils/sanitize';
 import { fetchMessages } from '../requests/fetchMessages';
@@ -13,10 +13,17 @@ export async function MessagesView({ access, initPageResult: { req, locale, perm
     if (!hasAccess) redirect(getAdminURL({
         req
     }), RedirectType.replace);
+    if (!payload.config.localization) {
+        return null;
+    }
+    const defaultLocale = payload.config.localization.defaultLocale;
+    const activeLocale = typeof locale === 'string' ? locale : locale?.code ?? defaultLocale;
     const translations = {};
-    for (const locale of locales){
-        const messages = await fetchMessages(payload, locale);
-        translations[locale] = sanitizeMessages(schema, messages);
+    for (const loc of locales){
+        const messages = await fetchMessages(payload, loc);
+        translations[loc] = sanitizeMessages(schema, messages, {
+            useSchemaDefaults: loc === defaultLocale
+        });
     }
     return /*#__PURE__*/ _jsx(DefaultTemplate, {
         i18n: req.i18n,
@@ -35,6 +42,8 @@ export async function MessagesView({ access, initPageResult: { req, locale, perm
         visibleEntities: visibleEntities,
         children: /*#__PURE__*/ _jsx(Gutter, {
             children: /*#__PURE__*/ _jsx(MessagesForm, {
+                activeLocale: activeLocale,
+                defaultLocale: defaultLocale,
                 endpointUrl: endpointUrl,
                 locales: locales,
                 schema: schema,

package/dist/components/MessagesView.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/MessagesView.tsx"],"sourcesContent":["import { DefaultTemplate } from '@payloadcms/next/templates';\nimport { Gutter } from '@payloadcms/ui';\nimport { getAdminURL } from '@repo/common';\nimport { RedirectType, redirect } from 'next/navigation';\nimport type { AdminViewServerProps } from 'payload';\nimport type {\n  DeepPartial,\n  Locale,\n  Messages,\n  MessagesGuard,\n  Translations,\n} from '@/types';\nimport { sanitizeMessages } from '@/utils/sanitize';\nimport { fetchMessages } from '../requests/fetchMessages';\nimport { MessagesForm } from './MessagesForm';\n\nexport interface MessagesViewProps {\n  locales: Locale[];\n  schema: Messages;\n  tabs: boolean | undefined;\n  access: MessagesGuard;\n}\n\nexport async function MessagesView({\n  access,\n  initPageResult: { req, locale, permissions, visibleEntities },\n  locales,\n  params,\n  payload,\n  schema,\n  searchParams,\n  tabs = false,\n}: AdminViewServerProps & MessagesViewProps) {\n  const apiUrl = payload.getAPIURL();\n  const endpointUrl = apiUrl.endsWith('/')\n    ? `${apiUrl}intl-plugin`\n    : `${apiUrl}/intl-plugin`;\n\n  const hasAccess = await access(req);\n  if (!hasAccess) redirect(getAdminURL({ req }), RedirectType.replace);\n\n  const translations: Translations<DeepPartial<Messages>> = {};\n\n  for (const locale of locales) {\n    const messages = await fetchMessages(payload, locale);\n\n    translations[locale] = sanitizeMessages(schema, messages);\n  }\n\n  return (\n    <DefaultTemplate\n      i18n={req.i18n}\n      locale={locale}\n      params={params}\n      payload={req.payload}\n      permissions={permissions}\n      searchParams={searchParams}\n      user={req.user || undefined}\n      viewActions={payload.config.admin.components.actions.filter((action) => {\n        if (typeof action !== 'object') {\n          return true;\n        }\n        return action.exportName !== 'MessagesLink';\n      })}\n      visibleEntities={visibleEntities}\n    >\n      <Gutter>\n        <MessagesForm\n          endpointUrl={endpointUrl}\n          locales={locales}\n          schema={schema}\n          tabs={tabs}\n          values={translations}\n        />\n      </Gutter>\n    </DefaultTemplate>\n  );\n}\n"],"names":["DefaultTemplate","Gutter","getAdminURL","RedirectType","redirect","sanitizeMessages","fetchMessages","MessagesForm","MessagesView","access","initPageResult","req","locale","permissions","visibleEntities","locales","params","payload","schema","searchParams","tabs","apiUrl","getAPIURL","endpointUrl","endsWith","hasAccess","replace","translations","messages","i18n","user","undefined","viewActions","config","admin","components","actions","filter","action","exportName","values"],"mappings":";AAAA,SAASA,eAAe,QAAQ,6BAA6B;AAC7D,SAASC,MAAM,QAAQ,iBAAiB;AACxC,SAASC,WAAW,QAAQ,eAAe;AAC3C,SAASC,YAAY,EAAEC,QAAQ,QAAQ,kBAAkB;AASzD,SAASC,gBAAgB,QAAQ,mBAAmB;AACpD,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,YAAY,QAAQ,iBAAiB;AAS9C,OAAO,eAAeC,aAAa,EACjCC,MAAM,EACNC,gBAAgB,EAAEC,GAAG,EAAEC,MAAM,EAAEC,WAAW,EAAEC,eAAe,EAAE,EAC7DC,OAAO,EACPC,MAAM,EACNC,OAAO,EACPC,MAAM,EACNC,YAAY,EACZC,OAAO,KAAK,EAC6B;IACzC,MAAMC,SAASJ,QAAQK,SAAS;IAChC,MAAMC,cAAcF,OAAOG,QAAQ,CAAC,OAChC,GAAGH,OAAO,WAAW,CAAC,GACtB,GAAGA,OAAO,YAAY,CAAC;IAE3B,MAAMI,YAAY,MAAMhB,OAAOE;IAC/B,IAAI,CAACc,WAAWrB,SAASF,YAAY;QAAES;IAAI,IAAIR,aAAauB,OAAO;IAEnE,MAAMC,eAAoD,CAAC;IAE3D,KAAK,MAAMf,UAAUG,QAAS;QAC5B,MAAMa,WAAW,MAAMtB,cAAcW,SAASL;QAE9Ce,YAAY,CAACf,OAAO,GAAGP,iBAAiBa,QAAQU;IAClD;IAEA,qBACE,KAAC5B;QACC6B,MAAMlB,IAAIkB,IAAI;QACdjB,QAAQA;QACRI,QAAQA;QACRC,SAASN,IAAIM,OAAO;QACpBJ,aAAaA;QACbM,cAAcA;QACdW,MAAMnB,IAAImB,IAAI,IAAIC;QAClBC,aAAaf,QAAQgB,MAAM,CAACC,KAAK,CAACC,UAAU,CAACC,OAAO,CAACC,MAAM,CAAC,CAACC;YAC3D,IAAI,OAAOA,WAAW,UAAU;gBAC9B,OAAO;YACT;YACA,OAAOA,OAAOC,UAAU,KAAK;QAC/B;QACAzB,iBAAiBA;kBAEjB,cAAA,KAACb;sBACC,cAAA,KAACM;gBACCgB,aAAaA;gBACbR,SAASA;gBACTG,QAAQA;gBACRE,MAAMA;gBACNoB,QAAQb;;;;AAKlB"}
+{"version":3,"sources":["../../src/components/MessagesView.tsx"],"sourcesContent":["import { DefaultTemplate } from '@payloadcms/next/templates';\nimport { Gutter } from '@payloadcms/ui';\nimport { getAdminURL } from '@repo/common';\nimport { RedirectType, redirect } from 'next/navigation';\nimport type { AdminViewServerProps } from 'payload';\nimport type {\n  DeepPartial,\n  Locale,\n  Messages,\n  MessagesGuard,\n  Translations,\n} from '@/types';\nimport { sanitizeMessages } from '@/utils/sanitize';\nimport { fetchMessages } from '../requests/fetchMessages';\nimport { MessagesForm } from './MessagesForm';\n\nexport interface MessagesViewProps {\n  locales: Locale[];\n  schema: Messages;\n  tabs: boolean | undefined;\n  access: MessagesGuard;\n}\n\nexport async function MessagesView({\n  access,\n  initPageResult: { req, locale, permissions, visibleEntities },\n  locales,\n  params,\n  payload,\n  schema,\n  searchParams,\n  tabs = false,\n}: AdminViewServerProps & MessagesViewProps) {\n  const apiUrl = payload.getAPIURL();\n  const endpointUrl = apiUrl.endsWith('/')\n    ? `${apiUrl}intl-plugin`\n    : `${apiUrl}/intl-plugin`;\n\n  const hasAccess = await access(req);\n  if (!hasAccess) redirect(getAdminURL({ req }), RedirectType.replace);\n\n  if (!payload.config.localization) {\n    return null;\n  }\n  const defaultLocale = payload.config.localization.defaultLocale;\n  const activeLocale =\n    typeof locale === 'string' ? locale : (locale?.code ?? defaultLocale);\n\n  const translations: Translations<DeepPartial<Messages>> = {};\n\n  for (const loc of locales) {\n    const messages = await fetchMessages(payload, loc);\n\n    translations[loc] = sanitizeMessages(schema, messages, {\n      useSchemaDefaults: loc === defaultLocale,\n    });\n  }\n\n  return (\n    <DefaultTemplate\n      i18n={req.i18n}\n      locale={locale}\n      params={params}\n      payload={req.payload}\n      permissions={permissions}\n      searchParams={searchParams}\n      user={req.user || undefined}\n      viewActions={payload.config.admin.components.actions.filter((action) => {\n        if (typeof action !== 'object') {\n          return true;\n        }\n        return action.exportName !== 'MessagesLink';\n      })}\n      visibleEntities={visibleEntities}\n    >\n      <Gutter>\n        <MessagesForm\n          activeLocale={activeLocale}\n          defaultLocale={defaultLocale}\n          endpointUrl={endpointUrl}\n          locales={locales}\n          schema={schema}\n          tabs={tabs}\n          values={translations}\n        />\n      </Gutter>\n    </DefaultTemplate>\n  );\n}\n"],"names":["DefaultTemplate","Gutter","getAdminURL","RedirectType","redirect","sanitizeMessages","fetchMessages","MessagesForm","MessagesView","access","initPageResult","req","locale","permissions","visibleEntities","locales","params","payload","schema","searchParams","tabs","apiUrl","getAPIURL","endpointUrl","endsWith","hasAccess","replace","config","localization","defaultLocale","activeLocale","code","translations","loc","messages","useSchemaDefaults","i18n","user","undefined","viewActions","admin","components","actions","filter","action","exportName","values"],"mappings":";AAAA,SAASA,eAAe,QAAQ,6BAA6B;AAC7D,SAASC,MAAM,QAAQ,iBAAiB;AACxC,SAASC,WAAW,QAAQ,eAAe;AAC3C,SAASC,YAAY,EAAEC,QAAQ,QAAQ,kBAAkB;AASzD,SAASC,gBAAgB,QAAQ,mBAAmB;AACpD,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,YAAY,QAAQ,iBAAiB;AAS9C,OAAO,eAAeC,aAAa,EACjCC,MAAM,EACNC,gBAAgB,EAAEC,GAAG,EAAEC,MAAM,EAAEC,WAAW,EAAEC,eAAe,EAAE,EAC7DC,OAAO,EACPC,MAAM,EACNC,OAAO,EACPC,MAAM,EACNC,YAAY,EACZC,OAAO,KAAK,EAC6B;IACzC,MAAMC,SAASJ,QAAQK,SAAS;IAChC,MAAMC,cAAcF,OAAOG,QAAQ,CAAC,OAChC,GAAGH,OAAO,WAAW,CAAC,GACtB,GAAGA,OAAO,YAAY,CAAC;IAE3B,MAAMI,YAAY,MAAMhB,OAAOE;IAC/B,IAAI,CAACc,WAAWrB,SAASF,YAAY;QAAES;IAAI,IAAIR,aAAauB,OAAO;IAEnE,IAAI,CAACT,QAAQU,MAAM,CAACC,YAAY,EAAE;QAChC,OAAO;IACT;IACA,MAAMC,gBAAgBZ,QAAQU,MAAM,CAACC,YAAY,CAACC,aAAa;IAC/D,MAAMC,eACJ,OAAOlB,WAAW,WAAWA,SAAUA,QAAQmB,QAAQF;IAEzD,MAAMG,eAAoD,CAAC;IAE3D,KAAK,MAAMC,OAAOlB,QAAS;QACzB,MAAMmB,WAAW,MAAM5B,cAAcW,SAASgB;QAE9CD,YAAY,CAACC,IAAI,GAAG5B,iBAAiBa,QAAQgB,UAAU;YACrDC,mBAAmBF,QAAQJ;QAC7B;IACF;IAEA,qBACE,KAAC7B;QACCoC,MAAMzB,IAAIyB,IAAI;QACdxB,QAAQA;QACRI,QAAQA;QACRC,SAASN,IAAIM,OAAO;QACpBJ,aAAaA;QACbM,cAAcA;QACdkB,MAAM1B,IAAI0B,IAAI,IAAIC;QAClBC,aAAatB,QAAQU,MAAM,CAACa,KAAK,CAACC,UAAU,CAACC,OAAO,CAACC,MAAM,CAAC,CAACC;YAC3D,IAAI,OAAOA,WAAW,UAAU;gBAC9B,OAAO;YACT;YACA,OAAOA,OAAOC,UAAU,KAAK;QAC/B;QACA/B,iBAAiBA;kBAEjB,cAAA,KAACb;sBACC,cAAA,KAACM;gBACCuB,cAAcA;gBACdD,eAAeA;gBACfN,aAAaA;gBACbR,SAASA;gBACTG,QAAQA;gBACRE,MAAMA;gBACN0B,QAAQd;;;;AAKlB"}

package/dist/components/actions/CopyMessages.d.ts

@@ -0,0 +1,2 @@
+export declare function CopyMessages(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CopyMessages.d.ts.map

package/dist/components/actions/CopyMessages.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyMessages.d.ts","sourceRoot":"","sources":["../../../src/components/actions/CopyMessages.tsx"],"names":[],"mappings":"AAQA,wBAAgB,YAAY,4CA4B3B"}

package/dist/components/actions/{Move.js → CopyMessages.js}

@@ -2,11 +2,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Button } from '@payloadcms/ui';
 import { IconBraces } from '@tabler/icons-react';
 import { get } from 'lodash-es';
-import { useMessagesForm } from '../../components/MessageFormContext';
-import styles from './Move.module.css';
-export function Move() {
+import { useMessagesForm } from '../../components/MessagesFormProvider';
+import styles from './CopyMessages.module.css';
+export function CopyMessages() {
     const { getValues, setValue, locales } = useMessagesForm();
-    const handleMove = ()=>{
+    const handleCopy = ()=>{
         const sourcePath = prompt('Source path');
         if (!sourcePath) {
             return;
@@ -33,9 +33,9 @@ export function Move() {
             className: styles.icon
         }),
         iconPosition: "left",
-        onClick: handleMove,
+        onClick: handleCopy,
         children: "Copy"
     });
 }
 
-//# sourceMappingURL=Move.js.map
+//# sourceMappingURL=CopyMessages.js.map

package/dist/components/actions/CopyMessages.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/actions/CopyMessages.tsx"],"sourcesContent":["import { Button } from '@payloadcms/ui';\nimport { IconBraces } from '@tabler/icons-react';\nimport { get } from 'lodash-es';\n\nimport { useMessagesForm } from '@/components/MessagesFormProvider';\n\nimport styles from './CopyMessages.module.css';\n\nexport function CopyMessages() {\n  const { getValues, setValue, locales } = useMessagesForm();\n  const handleCopy = () => {\n    const sourcePath = prompt('Source path');\n    if (!sourcePath) {\n      return;\n    }\n    const targetPath = prompt('Target path');\n    if (!targetPath) {\n      return;\n    }\n\n    locales.forEach((locale) => {\n      const sourceValue = get(getValues(), [locale, sourcePath].join('.'));\n      setValue([locale, targetPath].join('.'), sourceValue);\n    });\n  };\n  return (\n    <Button\n      buttonStyle=\"subtle\"\n      className={styles.button}\n      icon={<IconBraces className={styles.icon} />}\n      iconPosition=\"left\"\n      onClick={handleCopy}\n    >\n      Copy\n    </Button>\n  );\n}\n"],"names":["Button","IconBraces","get","useMessagesForm","styles","CopyMessages","getValues","setValue","locales","handleCopy","sourcePath","prompt","targetPath","forEach","locale","sourceValue","join","buttonStyle","className","button","icon","iconPosition","onClick"],"mappings":";AAAA,SAASA,MAAM,QAAQ,iBAAiB;AACxC,SAASC,UAAU,QAAQ,sBAAsB;AACjD,SAASC,GAAG,QAAQ,YAAY;AAEhC,SAASC,eAAe,QAAQ,oCAAoC;AAEpE,OAAOC,YAAY,4BAA4B;AAE/C,OAAO,SAASC;IACd,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,OAAO,EAAE,GAAGL;IACzC,MAAMM,aAAa;QACjB,MAAMC,aAAaC,OAAO;QAC1B,IAAI,CAACD,YAAY;YACf;QACF;QACA,MAAME,aAAaD,OAAO;QAC1B,IAAI,CAACC,YAAY;YACf;QACF;QAEAJ,QAAQK,OAAO,CAAC,CAACC;YACf,MAAMC,cAAcb,IAAII,aAAa;gBAACQ;gBAAQJ;aAAW,CAACM,IAAI,CAAC;YAC/DT,SAAS;gBAACO;gBAAQF;aAAW,CAACI,IAAI,CAAC,MAAMD;QAC3C;IACF;IACA,qBACE,KAACf;QACCiB,aAAY;QACZC,WAAWd,OAAOe,MAAM;QACxBC,oBAAM,KAACnB;YAAWiB,WAAWd,OAAOgB,IAAI;;QACxCC,cAAa;QACbC,SAASb;kBACV;;AAIL"}

package/dist/components/actions/JsonImport.d.ts

@@ -1,2 +1,5 @@
-export declare function JsonImport(): import("react/jsx-runtime").JSX.Element;
+export interface JsonImportProps {
+    activeLocale: string;
+}
+export declare function JsonImport({ activeLocale }: JsonImportProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=JsonImport.d.ts.map

package/dist/components/actions/JsonImport.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"JsonImport.d.ts","sourceRoot":"","sources":["../../../src/components/actions/JsonImport.tsx"],"names":[],"mappings":"AAQA,wBAAgB,UAAU,4CAiEzB"}
+{"version":3,"file":"JsonImport.d.ts","sourceRoot":"","sources":["../../../src/components/actions/JsonImport.tsx"],"names":[],"mappings":"AAQA,MAAM,WAAW,eAAe;IAC9B,YAAY,EAAE,MAAM,CAAC;CACtB;AACD,wBAAgB,UAAU,CAAC,EAAE,YAAY,EAAE,EAAE,eAAe,2CA6C3D"}

package/dist/components/actions/JsonImport.js

@@ -1,16 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Button } from '@payloadcms/ui';
 import { IconBraces } from '@tabler/icons-react';
-import { useRef, useState } from 'react';
-import { useMessagesForm } from '../../components/MessageFormContext';
+import { useRef } from 'react';
+import { useMessagesForm } from '../../components/MessagesFormProvider';
 import styles from './JsonImport.module.css';
-export function JsonImport() {
-    const { locales, setValue } = useMessagesForm();
+export function JsonImport({ activeLocale }) {
+    const { setValue } = useMessagesForm();
     const inputRef = useRef(null);
-    const [selectedLocale, setSelectedLocale] = useState();
     const handleImportJSON = (event)=>{
         const file = event.target.files?.[0];
-        if (!selectedLocale || !file) {
+        if (!file) {
             event.target.value = '';
             return;
         }
@@ -18,12 +17,10 @@ export function JsonImport() {
         reader.onload = (readerEvent)=>{
             const text = readerEvent.target?.result;
             const data = JSON.parse(text);
-            // FIMXE this does not cause the form to re-render
-            setValue(selectedLocale, data, {
+            setValue(activeLocale, data, {
                 shouldDirty: true,
                 shouldValidate: true
             });
-            setSelectedLocale(undefined);
             // Clear the input value to allow re-selection of the same or different file
             event.target.value = '';
         };
@@ -45,22 +42,7 @@ export function JsonImport() {
                     className: styles.icon
                 }),
                 iconPosition: "left",
-                SubMenuPopupContent: ({ close })=>/*#__PURE__*/ _jsx("div", {
-                        className: styles.submenu,
-                        children: locales.map((locale)=>/*#__PURE__*/ _jsxs(Button, {
-                                buttonStyle: "subtle",
-                                onClick: ()=>{
-                                    setSelectedLocale(locale);
-                                    inputRef.current?.click();
-                                    close();
-                                },
-                                size: "small",
-                                children: [
-                                    locale,
-                                    ".json"
-                                ]
-                            }, locale))
-                    }),
+                onClick: ()=>inputRef.current?.click(),
                 children: "Import"
             })
         ]

package/dist/components/actions/JsonImport.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/actions/JsonImport.tsx"],"sourcesContent":["import { Button } from '@payloadcms/ui';\nimport { IconBraces } from '@tabler/icons-react';\nimport { useRef, useState } from 'react';\n\nimport { useMessagesForm } from '@/components/MessageFormContext';\n\nimport styles from './JsonImport.module.css';\n\nexport function JsonImport() {\n  const { locales, setValue } = useMessagesForm();\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [selectedLocale, setSelectedLocale] = useState<string>();\n\n  const handleImportJSON = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const file = event.target.files?.[0];\n    if (!selectedLocale || !file) {\n      event.target.value = '';\n      return;\n    }\n\n    const reader = new FileReader();\n    reader.onload = (readerEvent) => {\n      const text = readerEvent.target?.result as string;\n      const data = JSON.parse(text);\n      // FIMXE this does not cause the form to re-render\n      setValue(selectedLocale, data, {\n        shouldDirty: true,\n        shouldValidate: true,\n      });\n      setSelectedLocale(undefined);\n      // Clear the input value to allow re-selection of the same or different file\n      event.target.value = '';\n    };\n    reader.readAsText(file);\n  };\n\n  return (\n    <>\n      <input\n        accept=\".json\"\n        hidden\n        onChange={handleImportJSON}\n        ref={inputRef}\n        type=\"file\"\n      />\n      <Button\n        buttonStyle=\"subtle\"\n        className={styles.button}\n        icon={<IconBraces className={styles.icon} />}\n        iconPosition=\"left\"\n        SubMenuPopupContent={({ close }) => (\n          <div className={styles.submenu}>\n            {locales.map((locale) => (\n              <Button\n                buttonStyle=\"subtle\"\n                key={locale}\n                onClick={() => {\n                  setSelectedLocale(locale);\n                  inputRef.current?.click();\n                  close();\n                }}\n                size=\"small\"\n              >\n                {locale}.json\n              </Button>\n            ))}\n          </div>\n        )}\n      >\n        Import\n      </Button>\n    </>\n  );\n}\n"],"names":["Button","IconBraces","useRef","useState","useMessagesForm","styles","JsonImport","locales","setValue","inputRef","selectedLocale","setSelectedLocale","handleImportJSON","event","file","target","files","value","reader","FileReader","onload","readerEvent","text","result","data","JSON","parse","shouldDirty","shouldValidate","undefined","readAsText","input","accept","hidden","onChange","ref","type","buttonStyle","className","button","icon","iconPosition","SubMenuPopupContent","close","div","submenu","map","locale","onClick","current","click","size"],"mappings":";AAAA,SAASA,MAAM,QAAQ,iBAAiB;AACxC,SAASC,UAAU,QAAQ,sBAAsB;AACjD,SAASC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAEzC,SAASC,eAAe,QAAQ,kCAAkC;AAElE,OAAOC,YAAY,0BAA0B;AAE7C,OAAO,SAASC;IACd,MAAM,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GAAGJ;IAC9B,MAAMK,WAAWP,OAAyB;IAC1C,MAAM,CAACQ,gBAAgBC,kBAAkB,GAAGR;IAE5C,MAAMS,mBAAmB,CAACC;QACxB,MAAMC,OAAOD,MAAME,MAAM,CAACC,KAAK,EAAE,CAAC,EAAE;QACpC,IAAI,CAACN,kBAAkB,CAACI,MAAM;YAC5BD,MAAME,MAAM,CAACE,KAAK,GAAG;YACrB;QACF;QAEA,MAAMC,SAAS,IAAIC;QACnBD,OAAOE,MAAM,GAAG,CAACC;YACf,MAAMC,OAAOD,YAAYN,MAAM,EAAEQ;YACjC,MAAMC,OAAOC,KAAKC,KAAK,CAACJ;YACxB,kDAAkD;YAClDd,SAASE,gBAAgBc,MAAM;gBAC7BG,aAAa;gBACbC,gBAAgB;YAClB;YACAjB,kBAAkBkB;YAClB,4EAA4E;YAC5EhB,MAAME,MAAM,CAACE,KAAK,GAAG;QACvB;QACAC,OAAOY,UAAU,CAAChB;IACpB;IAEA,qBACE;;0BACE,KAACiB;gBACCC,QAAO;gBACPC,MAAM;gBACNC,UAAUtB;gBACVuB,KAAK1B;gBACL2B,MAAK;;0BAEP,KAACpC;gBACCqC,aAAY;gBACZC,WAAWjC,OAAOkC,MAAM;gBACxBC,oBAAM,KAACvC;oBAAWqC,WAAWjC,OAAOmC,IAAI;;gBACxCC,cAAa;gBACbC,qBAAqB,CAAC,EAAEC,KAAK,EAAE,iBAC7B,KAACC;wBAAIN,WAAWjC,OAAOwC,OAAO;kCAC3BtC,QAAQuC,GAAG,CAAC,CAACC,uBACZ,MAAC/C;gCACCqC,aAAY;gCAEZW,SAAS;oCACPrC,kBAAkBoC;oCAClBtC,SAASwC,OAAO,EAAEC;oCAClBP;gCACF;gCACAQ,MAAK;;oCAEJJ;oCAAO;;+BARHA;;0BAad;;;;AAKP"}
+{"version":3,"sources":["../../../src/components/actions/JsonImport.tsx"],"sourcesContent":["import { Button } from '@payloadcms/ui';\nimport { IconBraces } from '@tabler/icons-react';\nimport { useRef } from 'react';\n\nimport { useMessagesForm } from '@/components/MessagesFormProvider';\n\nimport styles from './JsonImport.module.css';\n\nexport interface JsonImportProps {\n  activeLocale: string;\n}\nexport function JsonImport({ activeLocale }: JsonImportProps) {\n  const { setValue } = useMessagesForm();\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const handleImportJSON = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const file = event.target.files?.[0];\n    if (!file) {\n      event.target.value = '';\n      return;\n    }\n\n    const reader = new FileReader();\n    reader.onload = (readerEvent) => {\n      const text = readerEvent.target?.result as string;\n      const data = JSON.parse(text);\n      setValue(activeLocale, data, {\n        shouldDirty: true,\n        shouldValidate: true,\n      });\n      // Clear the input value to allow re-selection of the same or different file\n      event.target.value = '';\n    };\n    reader.readAsText(file);\n  };\n\n  return (\n    <>\n      <input\n        accept=\".json\"\n        hidden\n        onChange={handleImportJSON}\n        ref={inputRef}\n        type=\"file\"\n      />\n      <Button\n        buttonStyle=\"subtle\"\n        className={styles.button}\n        icon={<IconBraces className={styles.icon} />}\n        iconPosition=\"left\"\n        onClick={() => inputRef.current?.click()}\n      >\n        Import\n      </Button>\n    </>\n  );\n}\n"],"names":["Button","IconBraces","useRef","useMessagesForm","styles","JsonImport","activeLocale","setValue","inputRef","handleImportJSON","event","file","target","files","value","reader","FileReader","onload","readerEvent","text","result","data","JSON","parse","shouldDirty","shouldValidate","readAsText","input","accept","hidden","onChange","ref","type","buttonStyle","className","button","icon","iconPosition","onClick","current","click"],"mappings":";AAAA,SAASA,MAAM,QAAQ,iBAAiB;AACxC,SAASC,UAAU,QAAQ,sBAAsB;AACjD,SAASC,MAAM,QAAQ,QAAQ;AAE/B,SAASC,eAAe,QAAQ,oCAAoC;AAEpE,OAAOC,YAAY,0BAA0B;AAK7C,OAAO,SAASC,WAAW,EAAEC,YAAY,EAAmB;IAC1D,MAAM,EAAEC,QAAQ,EAAE,GAAGJ;IACrB,MAAMK,WAAWN,OAAyB;IAE1C,MAAMO,mBAAmB,CAACC;QACxB,MAAMC,OAAOD,MAAME,MAAM,CAACC,KAAK,EAAE,CAAC,EAAE;QACpC,IAAI,CAACF,MAAM;YACTD,MAAME,MAAM,CAACE,KAAK,GAAG;YACrB;QACF;QAEA,MAAMC,SAAS,IAAIC;QACnBD,OAAOE,MAAM,GAAG,CAACC;YACf,MAAMC,OAAOD,YAAYN,MAAM,EAAEQ;YACjC,MAAMC,OAAOC,KAAKC,KAAK,CAACJ;YACxBZ,SAASD,cAAce,MAAM;gBAC3BG,aAAa;gBACbC,gBAAgB;YAClB;YACA,4EAA4E;YAC5Ef,MAAME,MAAM,CAACE,KAAK,GAAG;QACvB;QACAC,OAAOW,UAAU,CAACf;IACpB;IAEA,qBACE;;0BACE,KAACgB;gBACCC,QAAO;gBACPC,MAAM;gBACNC,UAAUrB;gBACVsB,KAAKvB;gBACLwB,MAAK;;0BAEP,KAAChC;gBACCiC,aAAY;gBACZC,WAAW9B,OAAO+B,MAAM;gBACxBC,oBAAM,KAACnC;oBAAWiC,WAAW9B,OAAOgC,IAAI;;gBACxCC,cAAa;gBACbC,SAAS,IAAM9B,SAAS+B,OAAO,EAAEC;0BAClC;;;;AAKP"}

package/dist/components/hooks/useHtmlLexicalAdapter.d.ts

@@ -0,0 +1,12 @@
+import type { DefaultNodeTypes, TypedEditorState } from '@payloadcms/richtext-lexical';
+import type { SerializedEditorState } from '@payloadcms/richtext-lexical/lexical';
+interface UseHtmlLexicalAdapterProps {
+    html: string;
+    onChange: (html: string) => void;
+}
+export declare function useHtmlLexicalAdapter({ html, onChange, }: UseHtmlLexicalAdapterProps): {
+    value: TypedEditorState<DefaultNodeTypes>;
+    setValue: (serializedState: SerializedEditorState) => void;
+};
+export {};
+//# sourceMappingURL=useHtmlLexicalAdapter.d.ts.map

package/dist/components/hooks/useHtmlLexicalAdapter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHtmlLexicalAdapter.d.ts","sourceRoot":"","sources":["../../../src/components/hooks/useHtmlLexicalAdapter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,gBAAgB,EAChB,gBAAgB,EACjB,MAAM,8BAA8B,CAAC;AAUtC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAWlF,UAAU,0BAA0B;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC;AAED,wBAAgB,qBAAqB,CAAC,EACpC,IAAI,EACJ,QAAQ,GACT,EAAE,0BAA0B;WAiEF,gBAAgB,CAAC,gBAAgB,CAAC;gCAjBvC,qBAAqB;EAkB1C"}

package/dist/components/hooks/useHtmlLexicalAdapter.js

@@ -0,0 +1,63 @@
+import { defaultEditorConfig, defaultEditorFeatures } from '@payloadcms/richtext-lexical';
+import { buildDefaultEditorState, getEnabledNodes, sanitizeClientEditorConfig } from '@payloadcms/richtext-lexical/client';
+import { $getRoot } from '@payloadcms/richtext-lexical/lexical';
+import { createHeadlessEditor } from '@payloadcms/richtext-lexical/lexical/headless';
+import { $generateHtmlFromNodes, $generateNodesFromDOM } from '@payloadcms/richtext-lexical/lexical/html';
+import { useCallback, useMemo, useRef } from 'react';
+const EMPTY_STATE = buildDefaultEditorState({});
+export function useHtmlLexicalAdapter({ html, onChange }) {
+    // 1. Maintain a persistent headless editor for conversion
+    const headlessEditor = useRef(createHeadlessEditor({
+        nodes: getEnabledNodes({
+            editorConfig: sanitizeClientEditorConfig(// @ts-expect-error - FIXME
+            defaultEditorFeatures, defaultEditorConfig)
+        })
+    }));
+    // 2. HTML -> SerializedState
+    const getSerializedState = useCallback((htmlString)=>{
+        const editor = headlessEditor.current;
+        editor.update(()=>{
+            const parser = new DOMParser();
+            const dom = parser.parseFromString(htmlString, 'text/html');
+            const nodes = $generateNodesFromDOM(editor, dom);
+            const root = $getRoot();
+            root.clear().append(...nodes);
+        }, {
+            discrete: true
+        });
+        return editor.getEditorState().toJSON();
+    }, []);
+    // 3. Memoize the initial value to prevent unnecessary re-renders
+    const value = useMemo(()=>{
+        const serializedState = getSerializedState(html);
+        if (serializedState.root.children.length === 0) {
+            return EMPTY_STATE;
+        }
+        return serializedState;
+    }, [
+        html,
+        getSerializedState
+    ]);
+    // 4. SerializedState -> HTML
+    const setValue = useCallback((serializedState)=>{
+        const editor = headlessEditor.current;
+        // Update headless editor to match the incoming state
+        editor.setEditorState(editor.parseEditorState(serializedState));
+        // Generate HTML and broadcast if it has changed
+        editor.read(()=>{
+            const newHtml = $generateHtmlFromNodes(editor);
+            if (newHtml !== html) {
+                onChange(newHtml);
+            }
+        });
+    }, [
+        html,
+        onChange
+    ]);
+    return {
+        value: value,
+        setValue
+    };
+}
+
+//# sourceMappingURL=useHtmlLexicalAdapter.js.map