payload-intl 0.0.2 → 0.0.3

package/dist/components/MessagesForm.js

@@ -1,15 +1,16 @@
 "use client";
-import { useStepNav as N, Button as R } from "@payloadcms/ui";
+import { useStepNav as v, Button as N } from "@payloadcms/ui";
 import { isEqual as S } from "lodash-es";
 import { useEffect as M, useState as x } from "react";
 import { useForm as y } from "react-hook-form";
 import { toast as f } from "sonner";
 import { MessagesFormProvider as T } from "../context/messages-form.js";
 import { cn as d } from "../utils/cn.js";
-import { MessageField as j } from "./layout/MessageField.js";
-import { MessagesTabs as F } from "./layout/MessagesTabs.js";
+import { JsonImport as j } from "./actions/JsonImport.js";
+import { MessageField as F } from "./layout/MessageField.js";
+import { MessagesTabs as O } from "./layout/MessagesTabs.js";
 import { MessagesTree as p } from "./layout/MessagesTree.js";
-function J({
+function U({
   locales: g,
   schema: a,
   tabs: r = !1,
@@ -17,7 +18,7 @@ function J({
   endpointUrl: h,
   richTextEditorOptions: u
 }) {
-  const { setStepNav: n } = N();
+  const { setStepNav: n } = v();
   M(() => {
     n([{ label: "Intl Messages", url: "/intl" }]);
   }, [n]);
@@ -25,13 +26,13 @@ function J({
     defaultValues: c,
     reValidateMode: "onChange"
   }), [m, b] = x(Object.keys(a)[0]), E = async (e) => {
-    const t = f.loading("Saving..."), v = Object.entries(e).reduce((o, [i, l]) => S(l, c[i]) ? o : {
+    const t = f.loading("Saving..."), R = Object.entries(e).reduce((o, [i, l]) => S(l, c[i]) ? o : {
       ...o,
       [i]: l
     }, {});
     await fetch(h, {
       method: "PUT",
-      body: JSON.stringify(v)
+      body: JSON.stringify(R)
     }), s.reset(e), f.success("Saved", { id: t });
   };
   return /* @__PURE__ */ React.createElement(
@@ -47,8 +48,8 @@ function J({
         className: "flex h-[calc(100vh-var(--app-header-height))] flex-col",
         onSubmit: s.handleSubmit(E)
       },
-      /* @__PURE__ */ React.createElement("div", { className: "sticky top-0 z-10 bg-background" }, /* @__PURE__ */ React.createElement("header", { className: "mb-6 flex items-center justify-between gap-4" }, /* @__PURE__ */ React.createElement("h1", { className: "text-4xl" }, "Messages"), /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement(
-        R,
+      /* @__PURE__ */ React.createElement("div", { className: "sticky top-0 z-10 bg-background" }, /* @__PURE__ */ React.createElement("header", { className: "mb-6 flex items-center justify-between gap-4" }, /* @__PURE__ */ React.createElement("h1", { className: "text-4xl" }, "Messages"), /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement(j, null), /* @__PURE__ */ React.createElement(
+        N,
         {
           className: "my-0",
           type: "submit",
@@ -56,7 +57,7 @@ function J({
         },
         "Save"
       ))), r && /* @__PURE__ */ React.createElement(
-        F,
+        O,
         {
           schema: a,
           activeTab: m,
@@ -64,7 +65,7 @@ function J({
         }
       )),
       /* @__PURE__ */ React.createElement("div", { id: "messages-form-content", className: "overflow-y-auto pt-8 pb-16" }, !r && /* @__PURE__ */ React.createElement(p, { path: "", schema: a, nestingLevel: 0 }), r && Object.entries(a).map(([e, t]) => typeof t == "string" ? /* @__PURE__ */ React.createElement(
-        j,
+        F,
         {
           schema: t,
           key: e,
@@ -86,6 +87,6 @@ function J({
   );
 }
 export {
-  J as MessagesForm
+  U as MessagesForm
 };
 //# sourceMappingURL=MessagesForm.js.map

package/dist/components/MessagesForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"MessagesForm.js","sources":["../../src/components/MessagesForm.tsx"],"sourcesContent":["\"use client\";\n\nimport type { FormValues } from \"@/context/messages-form\";\nimport type {\n  DeepPartial,\n  Locales,\n  Messages,\n  MessagesSchema,\n  RichTextEditorOptions,\n  Translations,\n} from \"@/types\";\nimport { Button, useStepNav } from \"@payloadcms/ui\";\nimport { isEqual } from \"lodash-es\";\nimport { useEffect, useState } from \"react\";\nimport { useForm } from \"react-hook-form\";\nimport { toast } from \"sonner\";\n\nimport { MessagesFormProvider } from \"@/context/messages-form\";\nimport { cn } from \"@/utils/cn\";\n\nimport { MessageField } from \"./layout/MessageField\";\nimport { MessagesTabs } from \"./layout/MessagesTabs\";\nimport { MessagesTree } from \"./layout/MessagesTree\";\n\ninterface MessagesFormProps {\n  locales: Locales;\n  schema: MessagesSchema;\n  tabs?: boolean;\n  values: Translations<DeepPartial<Messages>>;\n  endpointUrl: string;\n  richTextEditorOptions?: RichTextEditorOptions;\n}\n\nexport function MessagesForm({\n  locales,\n  schema,\n  tabs = false,\n  values,\n  endpointUrl,\n  richTextEditorOptions,\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) {\n        return acc;\n      }\n      return {\n        ...acc,\n        [locale]: value,\n      };\n    }, {});\n\n    await fetch(endpointUrl, {\n      method: \"PUT\",\n      body: JSON.stringify(changes),\n    });\n\n    form.reset(currentValues);\n    toast.success(\"Saved\", { id: toastId });\n  };\n\n  return (\n    <MessagesFormProvider\n      form={form}\n      locales={locales}\n      richTextEditorOptions={richTextEditorOptions}\n    >\n      <form\n        className=\"flex h-[calc(100vh-var(--app-header-height))] flex-col\"\n        onSubmit={form.handleSubmit(handleSubmit)}\n      >\n        <div className=\"sticky top-0 z-10 bg-background\">\n          <header className=\"mb-6 flex items-center justify-between gap-4\">\n            <h1 className=\"text-4xl\">Messages</h1>\n            <div className=\"flex items-center gap-2\">\n              <Button\n                className=\"my-0\"\n                type=\"submit\"\n                disabled={!form.formState.isDirty}\n              >\n                Save\n              </Button>\n            </div>\n          </header>\n          {tabs && (\n            <MessagesTabs\n              schema={schema}\n              activeTab={activeTab}\n              setActiveTab={setActiveTab}\n            />\n          )}\n        </div>\n\n        <div id=\"messages-form-content\" className=\"overflow-y-auto pt-8 pb-16\">\n          {!tabs && <MessagesTree path=\"\" schema={schema} nestingLevel={0} />}\n          {tabs &&\n            Object.entries(schema).map(([key, value]) => {\n              if (typeof value === \"string\") {\n                return (\n                  <MessageField\n                    schema={value}\n                    key={key}\n                    className={cn({ hidden: activeTab !== key })}\n                    messageKey={key}\n                    path={key}\n                  />\n                );\n              }\n              return (\n                <MessagesTree\n                  className={cn({ hidden: activeTab !== key })}\n                  key={key}\n                  path={key}\n                  schema={value}\n                  nestingLevel={0}\n                />\n              );\n            })}\n        </div>\n      </form>\n    </MessagesFormProvider>\n  );\n}\n"],"names":["MessagesForm","locales","schema","tabs","values","endpointUrl","richTextEditorOptions","setStepNav","useStepNav","useEffect","form","useForm","activeTab","setActiveTab","useState","handleSubmit","currentValues","toastId","toast","changes","acc","locale","value","isEqual","MessagesFormProvider","Button","MessagesTabs","MessagesTree","key","MessageField","cn"],"mappings":";;;;;;;;;;;AAiCO,SAASA,EAAa;AAAA,EAC3B,SAAAC;AAAA,EACA,QAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,QAAAC;AAAA,EACA,aAAAC;AAAA,EACA,uBAAAC;AACF,GAAuC;AACrC,QAAM,EAAE,YAAAC,EAAA,IAAeC,EAAA;AACvB,EAAAC,EAAU,MAAM;AACd,IAAAF,EAAW,CAAC,EAAE,OAAO,iBAAiB,KAAK,QAAA,CAAS,CAAC;AAAA,EACvD,GAAG,CAACA,CAAU,CAAC;AAEf,QAAMG,IAAOC,EAAoB;AAAA,IAC/B,eAAeP;AAAA,IACf,gBAAgB;AAAA,EAAA,CACjB,GACK,CAACQ,GAAWC,CAAY,IAAIC,EAAS,OAAO,KAAKZ,CAAM,EAAE,CAAC,CAAC,GAE3Da,IAAe,OAAOC,MAA8B;AACxD,UAAMC,IAAUC,EAAM,QAAQ,WAAW,GACnCC,IAAU,OAAO,QAAQH,CAAa,EAAE,OAE5C,CAACI,GAAK,CAACC,GAAQC,CAAK,MACAC,EAAQD,GAAOlB,EAAOiB,CAAM,CAAC,IAExCD,IAEF;AAAA,MACL,GAAGA;AAAA,MACH,CAACC,CAAM,GAAGC;AAAA,IAAA,GAEX,CAAA,CAAE;AAEL,UAAM,MAAMjB,GAAa;AAAA,MACvB,QAAQ;AAAA,MACR,MAAM,KAAK,UAAUc,CAAO;AAAA,IAAA,CAC7B,GAEDT,EAAK,MAAMM,CAAa,GACxBE,EAAM,QAAQ,SAAS,EAAE,IAAID,GAAS;AAAA,EACxC;AAEA,SACE,sBAAA;AAAA,IAACO;AAAA,IAAA;AAAA,MACC,MAAAd;AAAA,MACA,SAAAT;AAAA,MACA,uBAAAK;AAAA,IAAA;AAAA,IAEA,sBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,UAAUI,EAAK,aAAaK,CAAY;AAAA,MAAA;AAAA,0CAEvC,OAAA,EAAI,WAAU,kCAAA,GACb,sBAAA,cAAC,YAAO,WAAU,+CAAA,GAChB,sBAAA,cAAC,MAAA,EAAG,WAAU,WAAA,GAAW,UAAQ,GACjC,sBAAA,cAAC,OAAA,EAAI,WAAU,0BAAA,GACb,sBAAA;AAAA,QAACU;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,MAAK;AAAA,UACL,UAAU,CAACf,EAAK,UAAU;AAAA,QAAA;AAAA,QAC3B;AAAA,MAAA,CAGH,CACF,GACCP,KACC,sBAAA;AAAA,QAACuB;AAAA,QAAA;AAAA,UACC,QAAAxB;AAAA,UACA,WAAAU;AAAA,UACA,cAAAC;AAAA,QAAA;AAAA,MAAA,CAGN;AAAA,MAEA,sBAAA,cAAC,OAAA,EAAI,IAAG,yBAAwB,WAAU,6BAAA,GACvC,CAACV,KAAQ,sBAAA,cAACwB,GAAA,EAAa,MAAK,IAAG,QAAAzB,GAAgB,cAAc,EAAA,CAAG,GAChEC,KACC,OAAO,QAAQD,CAAM,EAAE,IAAI,CAAC,CAAC0B,GAAKN,CAAK,MACjC,OAAOA,KAAU,WAEjB,sBAAA;AAAA,QAACO;AAAA,QAAA;AAAA,UACC,QAAQP;AAAA,UACR,KAAAM;AAAA,UACA,WAAWE,EAAG,EAAE,QAAQlB,MAAcgB,GAAK;AAAA,UAC3C,YAAYA;AAAA,UACZ,MAAMA;AAAA,QAAA;AAAA,MAAA,IAKV,sBAAA;AAAA,QAACD;AAAA,QAAA;AAAA,UACC,WAAWG,EAAG,EAAE,QAAQlB,MAAcgB,GAAK;AAAA,UAC3C,KAAAA;AAAA,UACA,MAAMA;AAAA,UACN,QAAQN;AAAA,UACR,cAAc;AAAA,QAAA;AAAA,MAAA,CAGnB,CACL;AAAA,IAAA;AAAA,EACF;AAGN;"}
+{"version":3,"file":"MessagesForm.js","sources":["../../src/components/MessagesForm.tsx"],"sourcesContent":["\"use client\";\n\nimport type { FormValues } from \"@/context/messages-form\";\nimport type {\n  DeepPartial,\n  Locales,\n  Messages,\n  MessagesSchema,\n  RichTextEditorOptions,\n  Translations,\n} from \"@/types\";\nimport { Button, useStepNav } from \"@payloadcms/ui\";\nimport { isEqual } from \"lodash-es\";\nimport { useEffect, useState } from \"react\";\nimport { useForm } from \"react-hook-form\";\nimport { toast } from \"sonner\";\n\nimport { MessagesFormProvider } from \"@/context/messages-form\";\nimport { cn } from \"@/utils/cn\";\n\nimport { JsonImport } from \"./actions/JsonImport\";\nimport { MessageField } from \"./layout/MessageField\";\nimport { MessagesTabs } from \"./layout/MessagesTabs\";\nimport { MessagesTree } from \"./layout/MessagesTree\";\n\ninterface MessagesFormProps {\n  locales: Locales;\n  schema: MessagesSchema;\n  tabs?: boolean;\n  values: Translations<DeepPartial<Messages>>;\n  endpointUrl: string;\n  richTextEditorOptions?: RichTextEditorOptions;\n}\n\nexport function MessagesForm({\n  locales,\n  schema,\n  tabs = false,\n  values,\n  endpointUrl,\n  richTextEditorOptions,\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) {\n        return acc;\n      }\n      return {\n        ...acc,\n        [locale]: value,\n      };\n    }, {});\n\n    await fetch(endpointUrl, {\n      method: \"PUT\",\n      body: JSON.stringify(changes),\n    });\n\n    form.reset(currentValues);\n    toast.success(\"Saved\", { id: toastId });\n  };\n\n  return (\n    <MessagesFormProvider\n      form={form}\n      locales={locales}\n      richTextEditorOptions={richTextEditorOptions}\n    >\n      <form\n        className=\"flex h-[calc(100vh-var(--app-header-height))] flex-col\"\n        onSubmit={form.handleSubmit(handleSubmit)}\n      >\n        <div className=\"sticky top-0 z-10 bg-background\">\n          <header className=\"mb-6 flex items-center justify-between gap-4\">\n            <h1 className=\"text-4xl\">Messages</h1>\n            <div className=\"flex items-center gap-2\">\n              <JsonImport />\n              <Button\n                className=\"my-0\"\n                type=\"submit\"\n                disabled={!form.formState.isDirty}\n              >\n                Save\n              </Button>\n            </div>\n          </header>\n          {tabs && (\n            <MessagesTabs\n              schema={schema}\n              activeTab={activeTab}\n              setActiveTab={setActiveTab}\n            />\n          )}\n        </div>\n\n        <div id=\"messages-form-content\" className=\"overflow-y-auto pt-8 pb-16\">\n          {!tabs && <MessagesTree path=\"\" schema={schema} nestingLevel={0} />}\n          {tabs &&\n            Object.entries(schema).map(([key, value]) => {\n              if (typeof value === \"string\") {\n                return (\n                  <MessageField\n                    schema={value}\n                    key={key}\n                    className={cn({ hidden: activeTab !== key })}\n                    messageKey={key}\n                    path={key}\n                  />\n                );\n              }\n              return (\n                <MessagesTree\n                  className={cn({ hidden: activeTab !== key })}\n                  key={key}\n                  path={key}\n                  schema={value}\n                  nestingLevel={0}\n                />\n              );\n            })}\n        </div>\n      </form>\n    </MessagesFormProvider>\n  );\n}\n"],"names":["MessagesForm","locales","schema","tabs","values","endpointUrl","richTextEditorOptions","setStepNav","useStepNav","useEffect","form","useForm","activeTab","setActiveTab","useState","handleSubmit","currentValues","toastId","toast","changes","acc","locale","value","isEqual","MessagesFormProvider","JsonImport","Button","MessagesTabs","MessagesTree","key","MessageField","cn"],"mappings":"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"}

package/dist/components/actions/JsonImport.js

@@ -0,0 +1,57 @@
+import { Button as l } from "@payloadcms/ui";
+import { IconBraces as d } from "@tabler/icons-react";
+import { useRef as f, useState as R } from "react";
+import { useMessagesForm as g } from "../../context/messages-form.js";
+function h() {
+  const { locales: s, setValue: c } = g(), a = f(null), [o, n] = R(), u = (t) => {
+    const e = t.target.files?.[0];
+    if (!o || !e) {
+      t.target.value = "";
+      return;
+    }
+    const r = new FileReader();
+    r.onload = (i) => {
+      const m = i.target?.result, p = JSON.parse(m);
+      c(o, p, {
+        shouldDirty: !0,
+        shouldValidate: !0
+      }), n(void 0), t.target.value = "";
+    }, r.readAsText(e);
+  };
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    "input",
+    {
+      ref: a,
+      accept: ".json",
+      hidden: !0,
+      onChange: u,
+      type: "file"
+    }
+  ), /* @__PURE__ */ React.createElement(
+    l,
+    {
+      className: "my-0",
+      buttonStyle: "subtle",
+      iconPosition: "left",
+      icon: /* @__PURE__ */ React.createElement(d, { className: "size-5" }),
+      SubMenuPopupContent: ({ close: t }) => /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-2" }, s.map((e) => /* @__PURE__ */ React.createElement(
+        l,
+        {
+          key: e,
+          buttonStyle: "subtle",
+          size: "small",
+          onClick: () => {
+            n(e), a.current?.click(), t();
+          }
+        },
+        e,
+        ".json"
+      )))
+    },
+    "Import"
+  ));
+}
+export {
+  h as JsonImport
+};
+//# sourceMappingURL=JsonImport.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"JsonImport.js","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 \"@/context/messages-form\";\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        ref={inputRef}\n        accept=\".json\"\n        hidden\n        onChange={handleImportJSON}\n        type=\"file\"\n      />\n      <Button\n        className=\"my-0\"\n        buttonStyle=\"subtle\"\n        iconPosition=\"left\"\n        icon={<IconBraces className=\"size-5\" />}\n        SubMenuPopupContent={({ close }) => (\n          <div className=\"flex flex-col gap-2\">\n            {locales.map((locale) => (\n              <Button\n                key={locale}\n                buttonStyle=\"subtle\"\n                size=\"small\"\n                onClick={() => {\n                  setSelectedLocale(locale);\n                  inputRef.current?.click();\n                  close();\n                }}\n              >\n                {locale}.json\n              </Button>\n            ))}\n          </div>\n        )}\n      >\n        Import\n      </Button>\n    </>\n  );\n}\n"],"names":["JsonImport","locales","setValue","useMessagesForm","inputRef","useRef","selectedLocale","setSelectedLocale","useState","handleImportJSON","event","file","reader","readerEvent","text","data","Button","IconBraces","close","locale"],"mappings":";;;;AAMO,SAASA,IAAa;AAC3B,QAAM,EAAE,SAAAC,GAAS,UAAAC,EAAA,IAAaC,EAAA,GACxBC,IAAWC,EAAyB,IAAI,GACxC,CAACC,GAAgBC,CAAiB,IAAIC,EAAA,GAEtCC,IAAmB,CAACC,MAA+C;AACvE,UAAMC,IAAOD,EAAM,OAAO,QAAQ,CAAC;AACnC,QAAI,CAACJ,KAAkB,CAACK,GAAM;AAC5B,MAAAD,EAAM,OAAO,QAAQ;AACrB;AAAA,IACF;AAEA,UAAME,IAAS,IAAI,WAAA;AACnB,IAAAA,EAAO,SAAS,CAACC,MAAgB;AAC/B,YAAMC,IAAOD,EAAY,QAAQ,QAC3BE,IAAO,KAAK,MAAMD,CAAI;AAE5B,MAAAZ,EAASI,GAAgBS,GAAM;AAAA,QAC7B,aAAa;AAAA,QACb,gBAAgB;AAAA,MAAA,CACjB,GACDR,EAAkB,MAAS,GAE3BG,EAAM,OAAO,QAAQ;AAAA,IACvB,GACAE,EAAO,WAAWD,CAAI;AAAA,EACxB;AAEA,SACE,sBAAA,cAAA,MAAA,UAAA,MACE,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAKP;AAAA,MACL,QAAO;AAAA,MACP,QAAM;AAAA,MACN,UAAUK;AAAA,MACV,MAAK;AAAA,IAAA;AAAA,EAAA,GAEP,sBAAA;AAAA,IAACO;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,aAAY;AAAA,MACZ,cAAa;AAAA,MACb,MAAM,sBAAA,cAACC,GAAA,EAAW,WAAU,UAAS;AAAA,MACrC,qBAAqB,CAAC,EAAE,OAAAC,EAAA,MACtB,sBAAA,cAAC,OAAA,EAAI,WAAU,sBAAA,GACZjB,EAAQ,IAAI,CAACkB,MACZ,sBAAA;AAAA,QAACH;AAAA,QAAA;AAAA,UACC,KAAKG;AAAA,UACL,aAAY;AAAA,UACZ,MAAK;AAAA,UACL,SAAS,MAAM;AACb,YAAAZ,EAAkBY,CAAM,GACxBf,EAAS,SAAS,MAAA,GAClBc,EAAA;AAAA,UACF;AAAA,QAAA;AAAA,QAECC;AAAA,QAAO;AAAA,MAAA,CAEX,CACH;AAAA,IAAA;AAAA,IAEH;AAAA,EAAA,CAGH;AAEJ;"}

package/dist/components/inputs/MessageInput.js

@@ -1,52 +1,37 @@
-import { useEditor as m, EditorContent as c } from "@tiptap/react";
-import d from "@tiptap/starter-kit";
-import { parseIcuToProseMirrorJSON as p } from "../../utils/icu-tranform.js";
-import { InputWrapper as u } from "./InputWrapper.js";
-import { VariableMention as b } from "./variables/extension.js";
-function h({
+import c from "@tiptap/extension-document";
+import f from "@tiptap/extension-paragraph";
+import d from "@tiptap/extension-text";
+import { useEditor as u, EditorContent as l } from "@tiptap/react";
+import { parseIcuToProseMirrorJSON as x } from "../../utils/icu-tranform.js";
+import { InputWrapper as E } from "./InputWrapper.js";
+import { VariableMention as g } from "./variables/extension.js";
+function b({
   label: e,
   value: t,
   lang: r,
   error: o,
-  variables: a,
-  onChange: i,
-  onBlur: l,
-  className: s
+  variables: i,
+  onChange: m,
+  onBlur: n,
+  className: a
 }) {
-  const n = m({
+  const p = u({
     immediatelyRender: !1,
-    content: p(t),
-    extensions: [
-      d.configure({
-        blockquote: !1,
-        bulletList: !1,
-        codeBlock: !1,
-        heading: !1,
-        horizontalRule: !1,
-        listItem: !1,
-        orderedList: !1,
-        bold: !1,
-        italic: !1,
-        link: !1,
-        underline: !1,
-        strike: !1,
-        code: !1
-      }),
-      b(a)
-    ],
-    onUpdate: ({ editor: f }) => i(f.getText())
+    content: x(t),
+    extensions: [c, f, d, g(i)],
+    onUpdate: ({ editor: s }) => m(s.getText())
   });
-  return /* @__PURE__ */ React.createElement(u, { label: e, error: o, className: s }, /* @__PURE__ */ React.createElement(
-    c,
+  return /* @__PURE__ */ React.createElement(E, { label: e, error: o, className: a }, /* @__PURE__ */ React.createElement(
+    l,
     {
       className: "tiptap-editor min-h-8",
-      editor: n,
+      editor: p,
       lang: r,
-      onBlur: l
+      onBlur: n
     }
   ));
 }
 export {
-  h as MessageInput
+  b as MessageInput
 };
 //# sourceMappingURL=MessageInput.js.map

package/dist/components/inputs/MessageInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"MessageInput.js","sources":["../../../src/components/inputs/MessageInput.tsx"],"sourcesContent":["import type { TemplateVariable } from \"@/types\";\nimport { EditorContent, useEditor } from \"@tiptap/react\";\nimport StarterKit from \"@tiptap/starter-kit\";\n\nimport { parseIcuToProseMirrorJSON } from \"@/utils/icu-tranform\";\n\nimport type { InputWrapperProps } from \"./InputWrapper\";\nimport { InputWrapper } from \"./InputWrapper\";\nimport { VariableMention } from \"./variables/extension\";\n\nexport interface MessageInputProps extends InputWrapperProps {\n  value: string;\n  lang: string;\n  variables: TemplateVariable[];\n  onChange: (value: string) => void;\n  onBlur: () => void;\n}\n\n// TODO add variable editor (style, options, etc)\n// TODO add tooltip to show all variables\n\nexport function MessageInput({\n  label,\n  value,\n  lang,\n  error,\n  variables,\n  onChange,\n  onBlur,\n  className,\n}: MessageInputProps) {\n  const editor = useEditor({\n    immediatelyRender: false,\n    content: parseIcuToProseMirrorJSON(value),\n    extensions: [\n      StarterKit.configure({\n        blockquote: false,\n        bulletList: false,\n        codeBlock: false,\n        heading: false,\n        horizontalRule: false,\n        listItem: false,\n        orderedList: false,\n        bold: false,\n        italic: false,\n        link: false,\n        underline: false,\n        strike: false,\n        code: false,\n      }),\n      VariableMention(variables),\n    ],\n    onUpdate: ({ editor }) => onChange(editor.getText()),\n  });\n\n  return (\n    <InputWrapper label={label} error={error} className={className}>\n      <EditorContent\n        className=\"tiptap-editor min-h-8\"\n        editor={editor}\n        lang={lang}\n        onBlur={onBlur}\n      />\n    </InputWrapper>\n  );\n}\n"],"names":["MessageInput","label","value","lang","error","variables","onChange","onBlur","className","editor","useEditor","parseIcuToProseMirrorJSON","StarterKit","VariableMention","InputWrapper","EditorContent"],"mappings":";;;;;AAqBO,SAASA,EAAa;AAAA,EAC3B,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AACF,GAAsB;AACpB,QAAMC,IAASC,EAAU;AAAA,IACvB,mBAAmB;AAAA,IACnB,SAASC,EAA0BT,CAAK;AAAA,IACxC,YAAY;AAAA,MACVU,EAAW,UAAU;AAAA,QACnB,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,WAAW;AAAA,QACX,SAAS;AAAA,QACT,gBAAgB;AAAA,QAChB,UAAU;AAAA,QACV,aAAa;AAAA,QACb,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,MAAM;AAAA,QACN,WAAW;AAAA,QACX,QAAQ;AAAA,QACR,MAAM;AAAA,MAAA,CACP;AAAA,MACDC,EAAgBR,CAAS;AAAA,IAAA;AAAA,IAE3B,UAAU,CAAC,EAAE,QAAAI,QAAaH,EAASG,EAAO,QAAA,CAAS;AAAA,EAAA,CACpD;AAED,SACE,sBAAA,cAACK,GAAA,EAAa,OAAAb,GAAc,OAAAG,GAAc,WAAAI,KACxC,sBAAA;AAAA,IAACO;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,QAAAN;AAAA,MACA,MAAAN;AAAA,MACA,QAAAI;AAAA,IAAA;AAAA,EAAA,CAEJ;AAEJ;"}
+{"version":3,"file":"MessageInput.js","sources":["../../../src/components/inputs/MessageInput.tsx"],"sourcesContent":["import type { TemplateVariable } from \"@/types\";\nimport Document from \"@tiptap/extension-document\";\nimport Paragraph from \"@tiptap/extension-paragraph\";\nimport Text from \"@tiptap/extension-text\";\nimport { EditorContent, useEditor } from \"@tiptap/react\";\n\nimport { parseIcuToProseMirrorJSON } from \"@/utils/icu-tranform\";\n\nimport type { InputWrapperProps } from \"./InputWrapper\";\nimport { InputWrapper } from \"./InputWrapper\";\nimport { VariableMention } from \"./variables/extension\";\n\nexport interface MessageInputProps extends InputWrapperProps {\n  value: string;\n  lang: string;\n  variables: TemplateVariable[];\n  onChange: (value: string) => void;\n  onBlur: () => void;\n}\n\n// TODO add variable editor (style, options, etc)\n// TODO add tooltip to show all variables\n\nexport function MessageInput({\n  label,\n  value,\n  lang,\n  error,\n  variables,\n  onChange,\n  onBlur,\n  className,\n}: MessageInputProps) {\n  const editor = useEditor({\n    immediatelyRender: false,\n    content: parseIcuToProseMirrorJSON(value),\n    extensions: [Document, Paragraph, Text, VariableMention(variables)],\n    onUpdate: ({ editor }) => onChange(editor.getText()),\n  });\n\n  return (\n    <InputWrapper label={label} error={error} className={className}>\n      <EditorContent\n        className=\"tiptap-editor min-h-8\"\n        editor={editor}\n        lang={lang}\n        onBlur={onBlur}\n      />\n    </InputWrapper>\n  );\n}\n"],"names":["MessageInput","label","value","lang","error","variables","onChange","onBlur","className","editor","useEditor","parseIcuToProseMirrorJSON","Document","Paragraph","Text","VariableMention","InputWrapper","EditorContent"],"mappings":";;;;;;;AAuBO,SAASA,EAAa;AAAA,EAC3B,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AACF,GAAsB;AACpB,QAAMC,IAASC,EAAU;AAAA,IACvB,mBAAmB;AAAA,IACnB,SAASC,EAA0BT,CAAK;AAAA,IACxC,YAAY,CAACU,GAAUC,GAAWC,GAAMC,EAAgBV,CAAS,CAAC;AAAA,IAClE,UAAU,CAAC,EAAE,QAAAI,QAAaH,EAASG,EAAO,QAAA,CAAS;AAAA,EAAA,CACpD;AAED,SACE,sBAAA,cAACO,GAAA,EAAa,OAAAf,GAAc,OAAAG,GAAc,WAAAI,KACxC,sBAAA;AAAA,IAACS;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,QAAAR;AAAA,MACA,MAAAN;AAAA,MACA,QAAAI;AAAA,IAAA;AAAA,EAAA,CAEJ;AAEJ;"}

package/dist/types.d.ts

@@ -3,9 +3,7 @@ import { HeadingOptions } from '@tiptap/extension-heading';
 import { CollectionConfig, PayloadRequest } from 'payload';
 import { DeepPartial } from 'react-hook-form';
 export interface MessagesPluginConfig {
-    hooks?: MessagesHooks;
     schema: MessagesSchema;
-    tabs?: boolean;
     /**
      * The slug of the collection to use for the messages.
      *
@@ -18,6 +16,8 @@ export interface MessagesPluginConfig {
      * @default `(req) => req.user !== null // Authenticated users only`
      */
     editorAccess?: MessagesGuard;
+    hooks?: MessagesHooks;
+    tabs?: boolean;
     /**
      * The options for the rich text editor.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payload-intl",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Payload Plugin for I18N using ICU Messages",
   "license": "MIT",
   "type": "module",
@@ -103,7 +103,6 @@
     "@tiptap/extension-underline": "^3.0.9",
     "@tiptap/extensions": "^3.0.9",
     "@tiptap/react": "^3.0.9",
-    "@tiptap/starter-kit": "^3.0.9",
     "clsx": "^2.1.1",
     "lodash-es": "^4.17.21",
     "radix-ui": "^1.4.2",