payload-intl 0.1.0 → 0.2.1

package/dist/components/MessageController.js

@@ -1,22 +1,22 @@
 import { jsx as o } from "react/jsx-runtime";
-import { Controller as m } from "react-hook-form";
+import { Controller as g } from "react-hook-form";
 import { useMessagesForm as i } from "../context/messages-form.js";
+import { LexicalInput as C } from "./inputs/LexicalInput.js";
 import { MessageInput as h } from "./inputs/MessageInput.js";
-import { RichTextInput as C } from "./inputs/RichTextInput.js";
 function M({
-  type: a,
+  type: l,
   name: n,
-  variables: l,
+  variables: m,
   label: u,
   locale: t,
   validate: p,
   className: s
 }) {
-  const { control: g } = i();
-  return a === "rich" ? /* @__PURE__ */ o(
-    m,
+  const { control: a } = i();
+  return l === "rich" ? /* @__PURE__ */ o(
+    g,
     {
-      control: g,
+      control: a,
       name: n,
       render: ({ field: r, fieldState: e }) => /* @__PURE__ */ o(
         C,
@@ -35,9 +35,9 @@ function M({
       }
     }
   ) : /* @__PURE__ */ o(
-    m,
+    g,
     {
-      control: g,
+      control: a,
       name: n,
       render: ({ field: r, fieldState: e }) => /* @__PURE__ */ o(
         h,
@@ -46,7 +46,7 @@ function M({
           lang: t,
           className: s,
           value: r.value || "",
-          variables: l,
+          variables: m,
           error: e.error,
           onChange: r.onChange,
           onBlur: r.onBlur

package/dist/components/MessageController.js.map

@@ -1 +1 @@
-{"version":3,"file":"MessageController.js","sources":["../../src/components/MessageController.tsx"],"sourcesContent":["import type { TemplateVariable } from \"@/types\";\nimport type { MessageType } from \"@/utils/schema\";\nimport type { MessageValidator } from \"@/utils/validate\";\nimport { Controller } from \"react-hook-form\";\n\nimport { useMessagesForm } from \"@/context/messages-form\";\n\nimport { MessageInput } from \"./inputs/MessageInput\";\nimport { RichTextInput } from \"./inputs/RichTextInput\";\n\ninterface MessageControllerProps {\n  type: MessageType;\n  label?: string;\n  locale: string;\n  name: string;\n  className?: string;\n  variables: TemplateVariable[];\n  validate: MessageValidator;\n}\n\nexport function MessageController({\n  type,\n  name,\n  variables,\n  label,\n  locale,\n  validate,\n  className,\n}: MessageControllerProps): React.ReactNode {\n  const { control } = useMessagesForm();\n\n  if (type === \"rich\") {\n    return (\n      <Controller\n        control={control}\n        name={name}\n        render={({ field, fieldState }) => (\n          <RichTextInput\n            className={className}\n            error={fieldState.error}\n            label={label}\n            lang={locale}\n            onChange={field.onChange}\n            onBlur={field.onBlur}\n            value={(field.value as unknown as string) || \"\"}\n          />\n        )}\n        rules={{\n          required: true,\n        }}\n      />\n    );\n  }\n\n  return (\n    <Controller\n      control={control}\n      name={name}\n      render={({ field, fieldState }) => (\n        <MessageInput\n          label={label}\n          lang={locale}\n          className={className}\n          value={(field.value as unknown as string) || \"\"}\n          variables={variables}\n          error={fieldState.error}\n          onChange={field.onChange}\n          onBlur={field.onBlur}\n        />\n      )}\n      rules={{\n        required: true,\n        validate,\n      }}\n    />\n  );\n}\n"],"names":["MessageController","type","name","variables","label","locale","validate","className","control","useMessagesForm","jsx","Controller","field","fieldState","RichTextInput","MessageInput"],"mappings":";;;;;AAoBO,SAASA,EAAkB;AAAA,EAChC,MAAAC;AAAA,EACA,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AACF,GAA4C;AAC1C,QAAM,EAAE,SAAAC,EAAA,IAAYC,EAAA;AAEpB,SAAIR,MAAS,SAET,gBAAAS;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAAAH;AAAA,MACA,MAAAN;AAAA,MACA,QAAQ,CAAC,EAAE,OAAAU,GAAO,YAAAC,QAChB,gBAAAH;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,WAAAP;AAAA,UACA,OAAOM,EAAW;AAAA,UAClB,OAAAT;AAAA,UACA,MAAMC;AAAA,UACN,UAAUO,EAAM;AAAA,UAChB,QAAQA,EAAM;AAAA,UACd,OAAQA,EAAM,SAA+B;AAAA,QAAA;AAAA,MAAA;AAAA,MAGjD,OAAO;AAAA,QACL,UAAU;AAAA,MAAA;AAAA,IACZ;AAAA,EAAA,IAMJ,gBAAAF;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAAAH;AAAA,MACA,MAAAN;AAAA,MACA,QAAQ,CAAC,EAAE,OAAAU,GAAO,YAAAC,QAChB,gBAAAH;AAAA,QAACK;AAAA,QAAA;AAAA,UACC,OAAAX;AAAA,UACA,MAAMC;AAAA,UACN,WAAAE;AAAA,UACA,OAAQK,EAAM,SAA+B;AAAA,UAC7C,WAAAT;AAAA,UACA,OAAOU,EAAW;AAAA,UAClB,UAAUD,EAAM;AAAA,UAChB,QAAQA,EAAM;AAAA,QAAA;AAAA,MAAA;AAAA,MAGlB,OAAO;AAAA,QACL,UAAU;AAAA,QACV,UAAAN;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"MessageController.js","sources":["../../src/components/MessageController.tsx"],"sourcesContent":["import type { TemplateVariable } from \"@/types\";\nimport type { MessageType } from \"@/utils/schema\";\nimport type { MessageValidator } from \"@/utils/validate\";\nimport { Controller } from \"react-hook-form\";\n\nimport { useMessagesForm } from \"@/context/messages-form\";\n\nimport { LexicalInput } from \"./inputs/LexicalInput\";\nimport { MessageInput } from \"./inputs/MessageInput\";\n\ninterface MessageControllerProps {\n  type: MessageType;\n  label?: string;\n  locale: string;\n  name: string;\n  className?: string;\n  variables: TemplateVariable[];\n  validate: MessageValidator;\n}\n\nexport function MessageController({\n  type,\n  name,\n  variables,\n  label,\n  locale,\n  validate,\n  className,\n}: MessageControllerProps): React.ReactNode {\n  const { control } = useMessagesForm();\n\n  if (type === \"rich\") {\n    return (\n      <Controller\n        control={control}\n        name={name}\n        render={({ field, fieldState }) => (\n          <LexicalInput\n            className={className}\n            error={fieldState.error}\n            label={label}\n            lang={locale}\n            onChange={field.onChange}\n            onBlur={field.onBlur}\n            value={(field.value as unknown as string) || \"\"}\n          />\n        )}\n        rules={{\n          required: true,\n        }}\n      />\n    );\n  }\n\n  return (\n    <Controller\n      control={control}\n      name={name}\n      render={({ field, fieldState }) => (\n        <MessageInput\n          label={label}\n          lang={locale}\n          className={className}\n          value={(field.value as unknown as string) || \"\"}\n          variables={variables}\n          error={fieldState.error}\n          onChange={field.onChange}\n          onBlur={field.onBlur}\n        />\n      )}\n      rules={{\n        required: true,\n        validate,\n      }}\n    />\n  );\n}\n"],"names":["MessageController","type","name","variables","label","locale","validate","className","control","useMessagesForm","jsx","Controller","field","fieldState","LexicalInput","MessageInput"],"mappings":";;;;;AAoBO,SAASA,EAAkB;AAAA,EAChC,MAAAC;AAAA,EACA,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AACF,GAA4C;AAC1C,QAAM,EAAE,SAAAC,EAAA,IAAYC,EAAA;AAEpB,SAAIR,MAAS,SAET,gBAAAS;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAAAH;AAAA,MACA,MAAAN;AAAA,MACA,QAAQ,CAAC,EAAE,OAAAU,GAAO,YAAAC,QAChB,gBAAAH;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,WAAAP;AAAA,UACA,OAAOM,EAAW;AAAA,UAClB,OAAAT;AAAA,UACA,MAAMC;AAAA,UACN,UAAUO,EAAM;AAAA,UAChB,QAAQA,EAAM;AAAA,UACd,OAAQA,EAAM,SAA+B;AAAA,QAAA;AAAA,MAAA;AAAA,MAGjD,OAAO;AAAA,QACL,UAAU;AAAA,MAAA;AAAA,IACZ;AAAA,EAAA,IAMJ,gBAAAF;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAAAH;AAAA,MACA,MAAAN;AAAA,MACA,QAAQ,CAAC,EAAE,OAAAU,GAAO,YAAAC,QAChB,gBAAAH;AAAA,QAACK;AAAA,QAAA;AAAA,UACC,OAAAX;AAAA,UACA,MAAMC;AAAA,UACN,WAAAE;AAAA,UACA,OAAQK,EAAM,SAA+B;AAAA,UAC7C,WAAAT;AAAA,UACA,OAAOU,EAAW;AAAA,UAClB,UAAUD,EAAM;AAAA,UAChB,QAAQA,EAAM;AAAA,QAAA;AAAA,MAAA;AAAA,MAGlB,OAAO;AAAA,QACL,UAAU;AAAA,QACV,UAAAN;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;"}

package/dist/components/MessagesForm.d.ts

@@ -1,11 +1,10 @@
-import { DeepPartial, Locales, Messages, MessagesSchema, RichTextEditorOptions, Translations } from '../types.ts';
+import { DeepPartial, Locales, Messages, MessagesSchema, Translations } from '../types.ts';
 interface MessagesFormProps {
     locales: Locales;
     schema: MessagesSchema;
     tabs?: boolean;
     values: Translations<DeepPartial<Messages>>;
     endpointUrl: string;
-    richTextEditorOptions?: RichTextEditorOptions;
 }
-export declare function MessagesForm({ locales, schema, tabs, values, endpointUrl, richTextEditorOptions, }: MessagesFormProps): React.ReactNode;
+export declare function MessagesForm({ locales, schema, tabs, values, endpointUrl, }: MessagesFormProps): React.ReactNode;
 export {};

package/dist/components/MessagesForm.js

@@ -1,112 +1,119 @@
 "use client";
-import { jsx as s, jsxs as r } from "react/jsx-runtime";
-import { useStepNav as M, Button as j } from "@payloadcms/ui";
+import { jsx as s, jsxs as o } from "react/jsx-runtime";
+import { useStepNav as x, Button as M } from "@payloadcms/ui";
 import { isEqual as y } from "lodash-es";
-import { useEffect as T, useState as F } from "react";
-import { useForm as O } from "react-hook-form";
-import { toast as h } from "sonner";
-import { MessagesFormProvider as w } from "../context/messages-form.js";
-import { cn as p } from "../utils/cn.js";
+import { useEffect as j, useState as w } from "react";
+import { useForm as T } from "react-hook-form";
+import { toast as d } from "sonner";
+import { MessagesFormProvider as E } from "../context/messages-form.js";
+import { cn as h } from "../utils/cn.js";
+import { getErrorMessage as F } from "../utils/error-handling.js";
 import { JsonImport as C } from "./actions/JsonImport.js";
-import { MessageField as I } from "./layout/MessageField.js";
-import { MessagesTabs as E } from "./layout/MessagesTabs.js";
+import { MessageField as O } from "./layout/MessageField.js";
+import { MessagesTabs as I } from "./layout/MessagesTabs.js";
 import { MessagesTree as g } from "./layout/MessagesTree.js";
 function Q({
   locales: u,
   schema: a,
-  tabs: o = !1,
-  values: m,
-  endpointUrl: b,
-  richTextEditorOptions: v
+  tabs: m = !1,
+  values: l,
+  endpointUrl: b
 }) {
-  const { setStepNav: c } = M();
-  T(() => {
-    c([{ label: "Intl Messages", url: "/intl" }]);
-  }, [c]);
-  const i = O({
-    defaultValues: m,
+  const { setStepNav: f } = x();
+  j(() => {
+    f([{ label: "Intl Messages", url: "/intl" }]);
+  }, [f]);
+  const i = T({
+    defaultValues: l,
     reValidateMode: "onChange"
-  }), [n, N] = F(Object.keys(a)[0]), S = async (e) => {
-    const t = h.loading("Saving..."), x = Object.entries(e).reduce((d, [l, f]) => y(f, m[l]) ? d : {
-      ...d,
-      [l]: f
+  }), [c, v] = w(Object.keys(a)[0]), N = async (e) => {
+    const r = d.loading("Saving..."), S = Object.entries(e).reduce((t, [n, p]) => y(p, l[n]) ? t : {
+      ...t,
+      [n]: p
     }, {});
-    await fetch(b, {
-      method: "PUT",
-      body: JSON.stringify(x)
-    }), i.reset(e), h.success("Saved", { id: t });
+    try {
+      const t = await fetch(b, {
+        method: "PUT",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify(S)
+      });
+      if (!t.ok) {
+        const n = await F(t);
+        throw new Error(n);
+      }
+      i.reset(e), d.success("Saved", { id: r });
+    } catch (t) {
+      d.error(
+        `Failed to save: ${t instanceof Error ? t.message : "Unknown error"}`,
+        { id: r }
+      );
+    }
   };
-  return /* @__PURE__ */ s(
-    w,
+  return /* @__PURE__ */ s(E, { form: i, locales: u, children: /* @__PURE__ */ o(
+    "form",
     {
-      form: i,
-      locales: u,
-      richTextEditorOptions: v,
-      children: /* @__PURE__ */ r(
-        "form",
-        {
-          className: "flex h-[calc(100vh-var(--app-header-height))] flex-col",
-          onSubmit: i.handleSubmit(S),
-          children: [
-            /* @__PURE__ */ r("div", { className: "sticky top-0 z-10 bg-background", children: [
-              /* @__PURE__ */ r("header", { className: "mb-6 flex items-center justify-between gap-4", children: [
-                /* @__PURE__ */ s("h1", { className: "text-4xl", children: "Messages" }),
-                /* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ s(C, {}),
-                  /* @__PURE__ */ s(
-                    j,
-                    {
-                      className: "my-0",
-                      type: "submit",
-                      disabled: !i.formState.isDirty,
-                      children: "Save"
-                    }
-                  )
-                ] })
-              ] }),
-              o && /* @__PURE__ */ s(
-                E,
+      className: "flex h-[calc(100vh-var(--app-header-height))] flex-col",
+      onSubmit: i.handleSubmit(N),
+      children: [
+        /* @__PURE__ */ o("div", { className: "sticky top-0 z-10 bg-background", children: [
+          /* @__PURE__ */ o("header", { className: "mb-6 flex items-center justify-between gap-4", children: [
+            /* @__PURE__ */ s("h1", { className: "text-4xl", children: "Messages" }),
+            /* @__PURE__ */ o("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ s(C, {}),
+              /* @__PURE__ */ s(
+                M,
                 {
-                  schema: a,
-                  activeTab: n,
-                  setActiveTab: N
+                  className: "my-0",
+                  type: "submit",
+                  disabled: !i.formState.isDirty,
+                  children: "Save"
                 }
               )
-            ] }),
-            /* @__PURE__ */ r(
-              "div",
-              {
-                id: "messages-form-content",
-                className: "min-h-0 overflow-y-auto pt-8 pb-16",
-                children: [
-                  !o && /* @__PURE__ */ s(g, { path: "", schema: a, nestingLevel: 0 }),
-                  o && Object.entries(a).map(([e, t]) => typeof t == "string" ? /* @__PURE__ */ s(
-                    I,
-                    {
-                      schema: t,
-                      className: p({ hidden: n !== e }),
-                      messageKey: e,
-                      path: e
-                    },
-                    e
-                  ) : /* @__PURE__ */ s(
-                    g,
-                    {
-                      className: p({ hidden: n !== e }),
-                      path: e,
-                      schema: t,
-                      nestingLevel: 0
-                    },
-                    e
-                  ))
-                ]
-              }
-            )
-          ]
-        }
-      )
+            ] })
+          ] }),
+          m && /* @__PURE__ */ s(
+            I,
+            {
+              schema: a,
+              activeTab: c,
+              setActiveTab: v
+            }
+          )
+        ] }),
+        /* @__PURE__ */ o(
+          "div",
+          {
+            id: "messages-form-content",
+            className: "min-h-0 overflow-y-auto pt-8 pb-16",
+            children: [
+              !m && /* @__PURE__ */ s(g, { path: "", schema: a, nestingLevel: 0 }),
+              m && Object.entries(a).map(([e, r]) => typeof r == "string" ? /* @__PURE__ */ s(
+                O,
+                {
+                  schema: r,
+                  className: h({ hidden: c !== e }),
+                  messageKey: e,
+                  path: e
+                },
+                e
+              ) : /* @__PURE__ */ s(
+                g,
+                {
+                  className: h({ hidden: c !== e }),
+                  path: e,
+                  schema: r,
+                  nestingLevel: 0
+                },
+                e
+              ))
+            ]
+          }
+        )
+      ]
     }
-  );
+  ) });
 }
 export {
   Q as MessagesForm

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 { 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\n          id=\"messages-form-content\"\n          className=\"min-h-0 overflow-y-auto pt-8 pb-16\"\n        >\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","jsx","MessagesFormProvider","jsxs","JsonImport","Button","MessagesTabs","MessagesTree","key","MessageField","cn"],"mappings":"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"}
+{"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  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\";\nimport { getErrorMessage } from \"@/utils/error-handling\";\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}\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) {\n        return acc;\n      }\n      return {\n        ...acc,\n        [locale]: value,\n      };\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\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\n          {tabs && (\n            <MessagesTabs\n              schema={schema}\n              activeTab={activeTab}\n              setActiveTab={setActiveTab}\n            />\n          )}\n        </div>\n\n        <div\n          id=\"messages-form-content\"\n          className=\"min-h-0 overflow-y-auto pt-8 pb-16\"\n        >\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","setStepNav","useStepNav","useEffect","form","useForm","activeTab","setActiveTab","useState","handleSubmit","currentValues","toastId","toast","changes","acc","locale","value","isEqual","response","error","getErrorMessage","jsx","MessagesFormProvider","jsxs","JsonImport","Button","MessagesTabs","MessagesTree","key","MessageField","cn"],"mappings":"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"}

package/dist/components/inputs/InputWrapper.js

@@ -1,26 +1,26 @@
-import { jsxs as o, jsx as e } from "react/jsx-runtime";
-import { FieldLabel as i } from "@payloadcms/ui";
-import { cn as t } from "../../utils/cn.js";
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import { FieldLabel as m } from "@payloadcms/ui";
+import { cn as o } from "../../utils/cn.js";
 function c({
   label: r,
-  error: s,
-  className: l,
-  children: a
+  error: l,
+  className: t,
+  children: i
 }) {
-  return /* @__PURE__ */ o("div", { className: t("flex flex-col gap-1", l), children: [
-    /* @__PURE__ */ o(
+  return /* @__PURE__ */ s("div", { className: o("flex flex-col gap-1 h-full min-w-5", t), children: [
+    /* @__PURE__ */ s(
       "fieldset",
       {
-        className: t("mx-0 rounded-md focus-within:border-elevation-400", {
-          "border-error bg-error": s
+        className: o("mx-0 rounded-md flex-1 focus-within:border-elevation-400", {
+          "border-error bg-error": l
         }),
         children: [
-          r && /* @__PURE__ */ e("legend", { className: "-ml-2 px-1.5 text-base", children: /* @__PURE__ */ e(i, { label: r }) }),
-          a
+          r && /* @__PURE__ */ e("legend", { className: "-ml-2 px-1.5 text-base", children: /* @__PURE__ */ e(m, { label: r }) }),
+          i
         ]
       }
     ),
-    /* @__PURE__ */ e("p", { className: "text-base text-error", children: s?.message })
+    /* @__PURE__ */ e("p", { className: "text-base text-error", children: l?.message })
   ] });
 }
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"InputWrapper.js","sources":["../../../src/components/inputs/InputWrapper.tsx"],"sourcesContent":["import type { FieldError } from \"react-hook-form\";\nimport { FieldLabel } from \"@payloadcms/ui\";\n\nimport { cn } from \"@/utils/cn\";\n\nexport interface InputWrapperProps {\n  label?: string;\n  error: FieldError | undefined;\n  className?: string;\n}\n\nexport function InputWrapper({\n  label,\n  error,\n  className,\n  children,\n}: React.PropsWithChildren<InputWrapperProps>) {\n  return (\n    <div className={cn(\"flex flex-col gap-1\", className)}>\n      <fieldset\n        className={cn(\"mx-0 rounded-md focus-within:border-elevation-400\", {\n          \"border-error bg-error\": error,\n        })}\n      >\n        {label && (\n          <legend className=\"-ml-2 px-1.5 text-base\">\n            <FieldLabel label={label} />\n          </legend>\n        )}\n        {children}\n      </fieldset>\n      <p className=\"text-base text-error\">{error?.message}</p>\n    </div>\n  );\n}\n"],"names":["InputWrapper","label","error","className","children","cn","jsxs","jsx","FieldLabel"],"mappings":";;;AAWO,SAASA,EAAa;AAAA,EAC3B,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AACF,GAA+C;AAC7C,2BACG,OAAA,EAAI,WAAWC,EAAG,uBAAuBF,CAAS,GACjD,UAAA;AAAA,IAAA,gBAAAG;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWD,EAAG,qDAAqD;AAAA,UACjE,yBAAyBH;AAAA,QAAA,CAC1B;AAAA,QAEA,UAAA;AAAA,UAAAD,uBACE,UAAA,EAAO,WAAU,0BAChB,UAAA,gBAAAM,EAACC,GAAA,EAAW,OAAAP,GAAc,EAAA,CAC5B;AAAA,UAEDG;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEH,gBAAAG,EAAC,KAAA,EAAE,WAAU,wBAAwB,aAAO,QAAA,CAAQ;AAAA,EAAA,GACtD;AAEJ;"}
+{"version":3,"file":"InputWrapper.js","sources":["../../../src/components/inputs/InputWrapper.tsx"],"sourcesContent":["import type { FieldError } from \"react-hook-form\";\nimport { FieldLabel } from \"@payloadcms/ui\";\n\nimport { cn } from \"@/utils/cn\";\n\nexport interface InputWrapperProps {\n  label?: string;\n  error: FieldError | undefined;\n  className?: string;\n}\n\nexport function InputWrapper({\n  label,\n  error,\n  className,\n  children,\n}: React.PropsWithChildren<InputWrapperProps>) {\n  return (\n    <div className={cn(\"flex flex-col gap-1 h-full min-w-5\", className)}>\n      <fieldset\n        className={cn(\"mx-0 rounded-md flex-1 focus-within:border-elevation-400\", {\n          \"border-error bg-error\": error,\n        })}\n      >\n        {label && (\n          <legend className=\"-ml-2 px-1.5 text-base\">\n            <FieldLabel label={label} />\n          </legend>\n        )}\n        {children}\n      </fieldset>\n      <p className=\"text-base text-error\">{error?.message}</p>\n    </div>\n  );\n}\n"],"names":["InputWrapper","label","error","className","children","cn","jsxs","jsx","FieldLabel"],"mappings":";;;AAWO,SAASA,EAAa;AAAA,EAC3B,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AACF,GAA+C;AAC7C,2BACG,OAAA,EAAI,WAAWC,EAAG,sCAAsCF,CAAS,GAChE,UAAA;AAAA,IAAA,gBAAAG;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWD,EAAG,4DAA4D;AAAA,UACxE,yBAAyBH;AAAA,QAAA,CAC1B;AAAA,QAEA,UAAA;AAAA,UAAAD,uBACE,UAAA,EAAO,WAAU,0BAChB,UAAA,gBAAAM,EAACC,GAAA,EAAW,OAAAP,GAAc,EAAA,CAC5B;AAAA,UAEDG;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEH,gBAAAG,EAAC,KAAA,EAAE,WAAU,wBAAwB,aAAO,QAAA,CAAQ;AAAA,EAAA,GACtD;AAEJ;"}

package/dist/components/inputs/LexicalInput.d.ts

@@ -0,0 +1,19 @@
+import { DefaultNodeTypes, TypedEditorState } from '@payloadcms/richtext-lexical';
+import { SerializedEditorState } from '@payloadcms/richtext-lexical/lexical';
+import { InputWrapperProps } from './InputWrapper';
+export interface LexicalInputProps extends InputWrapperProps {
+    lang: string;
+    value: string;
+    onChange: (value: string) => void;
+    onBlur: () => void;
+}
+export declare function LexicalInput({ error, label, value, onChange, className, }: LexicalInputProps): React.ReactNode;
+interface UseHtmlLexicalAdapterProps {
+    html: string;
+    onChange: (html: string) => void;
+}
+export declare function useHtmlLexicalAdapter({ html, onChange, }: UseHtmlLexicalAdapterProps): {
+    value: TypedEditorState<DefaultNodeTypes>;
+    setValue: (serializedState: SerializedEditorState) => void;
+};
+export {};

package/dist/components/inputs/LexicalInput.js

@@ -0,0 +1,90 @@
+import { jsx as l } from "react/jsx-runtime";
+import { $generateNodesFromDOM as p, $generateHtmlFromNodes as f } from "@lexical/html";
+import { defaultEditorFeatures as g, defaultEditorConfig as E } from "@payloadcms/richtext-lexical";
+import { sanitizeClientEditorConfig as S, RenderLexical as h, getEnabledNodes as x } from "@payloadcms/richtext-lexical/client";
+import { $getRoot as v } from "@payloadcms/richtext-lexical/lexical";
+import { createHeadlessEditor as C } from "@payloadcms/richtext-lexical/lexical/headless";
+import { useRef as F, useCallback as c, useMemo as T } from "react";
+import { InputWrapper as b } from "./InputWrapper.js";
+function A({
+  error: r,
+  label: o,
+  value: n,
+  onChange: i,
+  className: s
+}) {
+  const a = M({
+    html: n,
+    onChange: i
+  });
+  return /* @__PURE__ */ l(b, { label: o, error: r, className: s, children: /* @__PURE__ */ l(
+    h,
+    {
+      field: {
+        name: "myCustomEditor",
+        label: !1,
+        type: "richText"
+      },
+      value: a.value,
+      setValue: (e) => a.setValue(e),
+      schemaPath: "global.intl-plugin.editorTemplate"
+    }
+  ) });
+}
+const y = {
+  root: {
+    children: [
+      {
+        children: [],
+        direction: null,
+        textFormat: 0,
+        format: "left",
+        indent: 0,
+        type: "paragraph",
+        version: 1
+      }
+    ],
+    direction: null,
+    format: "",
+    indent: 0,
+    type: "root",
+    version: 1
+  }
+}, H = S(
+  // @ts-expect-error - it works
+  g,
+  E
+);
+function M({
+  html: r,
+  onChange: o
+}) {
+  const n = F(
+    C({
+      nodes: x({
+        editorConfig: H
+      })
+    })
+  ), i = c((e) => {
+    const t = n.current;
+    return t.update(() => {
+      const m = new DOMParser().parseFromString(e, "text/html"), u = p(t, m);
+      v().clear().append(...u);
+    }, { discrete: !0 }), t.getEditorState().toJSON();
+  }, []), s = T(() => {
+    const e = i(r);
+    return e.root.children.length === 0 ? y : e;
+  }, [r, i]), a = c((e) => {
+    const t = n.current;
+    t.setEditorState(t.parseEditorState(e)), t.read(() => {
+      const d = f(t);
+      d !== r && o(d);
+    });
+  }, [r, o]);
+  return { value: s, setValue: a };
+}
+export {
+  A as LexicalInput,
+  M as useHtmlLexicalAdapter
+};
+//# sourceMappingURL=LexicalInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LexicalInput.js","sources":["../../../src/components/inputs/LexicalInput.tsx"],"sourcesContent":["import type {\n  DefaultNodeTypes,\n  TypedEditorState,\n} from \"@payloadcms/richtext-lexical\";\nimport { $generateHtmlFromNodes, $generateNodesFromDOM } from \"@lexical/html\";\nimport {\n  defaultEditorConfig,\n  defaultEditorFeatures,\n} from \"@payloadcms/richtext-lexical\";\nimport {\n  getEnabledNodes,\n  RenderLexical,\n  sanitizeClientEditorConfig,\n} from \"@payloadcms/richtext-lexical/client\";\nimport { $getRoot, type SerializedEditorState } from \"@payloadcms/richtext-lexical/lexical\";\nimport { createHeadlessEditor } from \"@payloadcms/richtext-lexical/lexical/headless\";\nimport { useCallback, useMemo, useRef } from \"react\";\n\nimport type { InputWrapperProps } from \"./InputWrapper\";\nimport { InputWrapper } from \"./InputWrapper\";\n\nexport interface LexicalInputProps extends InputWrapperProps {\n  lang: string;\n  value: string;\n  onChange: (value: string) => void;\n  onBlur: () => void;\n}\n\nexport function LexicalInput({\n  error,\n  label,\n  value,\n  onChange,\n  className,\n}: LexicalInputProps): React.ReactNode {\n  const editor = useHtmlLexicalAdapter({\n    html:value,\n    onChange,\n  });\n\n  return (\n    <InputWrapper label={label} error={error} className={className}>\n      <RenderLexical\n        field={{\n          name: \"myCustomEditor\",\n          label: false,\n          type: \"richText\",\n        }}\n        value={editor.value}\n        setValue={(val) => editor.setValue(val as SerializedEditorState)}\n        schemaPath=\"global.intl-plugin.editorTemplate\"\n      />\n    </InputWrapper>\n  );\n}\n\nconst EMPTY_STATE: TypedEditorState<DefaultNodeTypes> = {\n  root: {\n    children: [\n      {\n        children: [],\n        direction: null,\n        textFormat: 0,\n        format: \"left\",\n        indent: 0,\n        type: \"paragraph\",\n        version: 1,\n      },\n    ],\n    direction: null,\n    format: \"\",\n    indent: 0,\n    type: \"root\",\n    version: 1,\n  },\n};\n\n\nconst editorConfig = sanitizeClientEditorConfig(\n  // @ts-expect-error - it works\n  defaultEditorFeatures,\n  defaultEditorConfig,\n);\n\ninterface UseHtmlLexicalAdapterProps {\n  html: string;\n  onChange: (html: string) => void;\n}\n\n\nexport function useHtmlLexicalAdapter({ \n  html, \n  onChange, \n}: UseHtmlLexicalAdapterProps) {\n  // 1. Maintain a persistent headless editor for conversion\n  const headlessEditor = useRef(\n    createHeadlessEditor({\n      nodes:getEnabledNodes({\n        editorConfig,\n      }),\n    })\n  );\n\n  // 2. HTML -> SerializedState\n  const getSerializedState = useCallback((htmlString: string): SerializedEditorState => {\n    const editor = headlessEditor.current;\n    editor.update(() => {\n      const parser = new DOMParser();\n      const dom = parser.parseFromString(htmlString, \"text/html\");\n      const nodes = $generateNodesFromDOM(editor, dom);\n      \n      const root = $getRoot();\n      root.clear().append(...nodes);\n    }, { discrete: true });\n\n    return editor.getEditorState().toJSON();\n  }, []);\n\n  // 3. Memoize the initial value to prevent unnecessary re-renders\n  const value = useMemo(() => {\n\n    const serializedState = getSerializedState(html)\n\n    if (serializedState.root.children.length === 0) {\n      return EMPTY_STATE;\n    }\n\n    return serializedState;\n\n\n  }, [html, getSerializedState]);\n\n  // 4. SerializedState -> HTML\n  const setValue = useCallback((serializedState: SerializedEditorState) => {\n    const editor = headlessEditor.current;\n    \n    // Update headless editor to match the incoming state\n    editor.setEditorState(editor.parseEditorState(serializedState));\n    \n    // Generate HTML and broadcast if it has changed\n    editor.read(() => {\n      const newHtml = $generateHtmlFromNodes(editor);\n      if (newHtml !== html) {\n        onChange(newHtml);\n      }\n    });\n  }, [html, onChange]);\n\n  return { value: value as TypedEditorState<DefaultNodeTypes>, setValue };\n}\n\n\n\n"],"names":["LexicalInput","error","label","value","onChange","className","editor","useHtmlLexicalAdapter","jsx","InputWrapper","RenderLexical","val","EMPTY_STATE","editorConfig","sanitizeClientEditorConfig","defaultEditorFeatures","defaultEditorConfig","html","headlessEditor","useRef","createHeadlessEditor","getEnabledNodes","getSerializedState","useCallback","htmlString","dom","nodes","$generateNodesFromDOM","$getRoot","useMemo","serializedState","setValue","newHtml","$generateHtmlFromNodes"],"mappings":";;;;;;;;AA4BO,SAASA,EAAa;AAAA,EAC3B,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AACF,GAAuC;AACrC,QAAMC,IAASC,EAAsB;AAAA,IACnC,MAAKJ;AAAA,IACL,UAAAC;AAAA,EAAA,CACD;AAED,SACE,gBAAAI,EAACC,GAAA,EAAa,OAAAP,GAAc,OAAAD,GAAc,WAAAI,GACxC,UAAA,gBAAAG;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,QACL,MAAM;AAAA,QACN,OAAO;AAAA,QACP,MAAM;AAAA,MAAA;AAAA,MAER,OAAOJ,EAAO;AAAA,MACd,UAAU,CAACK,MAAQL,EAAO,SAASK,CAA4B;AAAA,MAC/D,YAAW;AAAA,IAAA;AAAA,EAAA,GAEf;AAEJ;AAEA,MAAMC,IAAkD;AAAA,EACtD,MAAM;AAAA,IACJ,UAAU;AAAA,MACR;AAAA,QACE,UAAU,CAAA;AAAA,QACV,WAAW;AAAA,QACX,YAAY;AAAA,QACZ,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,MAAM;AAAA,QACN,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,IAEF,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,SAAS;AAAA,EAAA;AAEb,GAGMC,IAAeC;AAAA;AAAA,EAEnBC;AAAA,EACAC;AACF;AAQO,SAAST,EAAsB;AAAA,EACpC,MAAAU;AAAA,EACA,UAAAb;AACF,GAA+B;AAE7B,QAAMc,IAAiBC;AAAA,IACrBC,EAAqB;AAAA,MACnB,OAAMC,EAAgB;AAAA,QACpB,cAAAR;AAAA,MAAA,CACD;AAAA,IAAA,CACF;AAAA,EAAA,GAIGS,IAAqBC,EAAY,CAACC,MAA8C;AACpF,UAAMlB,IAASY,EAAe;AAC9B,WAAAZ,EAAO,OAAO,MAAM;AAElB,YAAMmB,IADS,IAAI,UAAA,EACA,gBAAgBD,GAAY,WAAW,GACpDE,IAAQC,EAAsBrB,GAAQmB,CAAG;AAG/C,MADaG,EAAA,EACR,MAAA,EAAQ,OAAO,GAAGF,CAAK;AAAA,IAC9B,GAAG,EAAE,UAAU,IAAM,GAEdpB,EAAO,eAAA,EAAiB,OAAA;AAAA,EACjC,GAAG,CAAA,CAAE,GAGCH,IAAQ0B,EAAQ,MAAM;AAE1B,UAAMC,IAAkBR,EAAmBL,CAAI;AAE/C,WAAIa,EAAgB,KAAK,SAAS,WAAW,IACpClB,IAGFkB;AAAA,EAGT,GAAG,CAACb,GAAMK,CAAkB,CAAC,GAGvBS,IAAWR,EAAY,CAACO,MAA2C;AACvE,UAAMxB,IAASY,EAAe;AAG9B,IAAAZ,EAAO,eAAeA,EAAO,iBAAiBwB,CAAe,CAAC,GAG9DxB,EAAO,KAAK,MAAM;AAChB,YAAM0B,IAAUC,EAAuB3B,CAAM;AAC7C,MAAI0B,MAAYf,KACdb,EAAS4B,CAAO;AAAA,IAEpB,CAAC;AAAA,EACH,GAAG,CAACf,GAAMb,CAAQ,CAAC;AAEnB,SAAO,EAAE,OAAAD,GAAoD,UAAA4B,EAAA;AAC/D;"}

package/dist/components/inputs/variables/editors/PluralVariableEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"PluralVariableEditor.js","sources":["../../../../../src/components/inputs/variables/editors/PluralVariableEditor.tsx"],"sourcesContent":["import { TYPE } from \"@formatjs/icu-messageformat-parser\";\nimport { IconX } from \"@tabler/icons-react\";\nimport { Popover } from \"radix-ui\";\nimport { Fragment, useImperativeHandle, useMemo } from \"react\";\nimport { Controller, useFieldArray, useForm } from \"react-hook-form\";\n\nimport type { PluralElement } from \"@/types\";\nimport { cn } from \"@/utils/cn\";\nimport { parseICUMessage, serializeICUMessage } from \"@/utils/icu-tranform\";\n\nconst NAMED_PLURAL_OPTIONS = [\"zero\", \"one\", \"two\", \"few\", \"many\"] as const;\n\nexport interface PluralVariableEditorProps {\n  variableName: string;\n  element: PluralElement | undefined;\n  ref: React.Ref<{ getValue: () => string }>;\n}\n\n// TODO add support for selectordinal (\"pluralType\": \"ordinal\")\n\nexport function PluralVariableEditor({\n  variableName,\n  element,\n  ref,\n}: PluralVariableEditorProps) {\n  const config = useMemo<{\n    offset: number;\n    options: { name: string; content: string }[];\n    other: string;\n  }>(() => {\n    const { other, ...options } = element?.options ?? {};\n    return {\n      offset: element?.offset ?? 0,\n      options: Object.entries(options).map(([name, option]) => ({\n        name,\n        content: serializeICUMessage(option.value),\n      })),\n      other: serializeICUMessage(other ? other.value : []),\n    };\n  }, [element]);\n\n  const { control, register, getValues } = useForm<{\n    offset: number;\n    options: { name: string; content: string }[];\n    other: string;\n    customValue?: number;\n  }>({\n    defaultValues: config,\n  });\n\n  useImperativeHandle(ref, () => ({\n    getValue: () => {\n      const values = getValues();\n      const updatedElement: PluralElement = {\n        type: TYPE.plural,\n        value: variableName,\n        offset: values.offset,\n        pluralType: element?.pluralType ?? \"cardinal\",\n        options: Object.fromEntries(\n          values.options.map(({ name, content }) => [\n            name,\n            { value: parseICUMessage(content) },\n          ]),\n        ),\n      };\n      return serializeICUMessage([updatedElement]);\n    },\n  }));\n\n  const options = useFieldArray({\n    control,\n    name: \"options\",\n  });\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <fieldset className=\"mx-0 grid grid-cols-[3rem_8rem_1.5rem] gap-y-2 rounded-md border border-border px-2 pr-0\">\n        <legend>Options</legend>\n        {options.fields.map((field, index) => (\n          <Fragment key={field.id}>\n            <label htmlFor={`options.${index}`}>{field.name}</label>\n            {/* // TODO add support for variable mentions */}\n            <input\n              className=\"focus:outline-none\"\n              type=\"text\"\n              {...register(`options.${index}.content`, { required: true })}\n            />\n            <button\n              className=\"ml-auto flex cursor-pointer items-center justify-center border-none bg-transparent p-0 hover:text-error\"\n              type=\"button\"\n              onClick={() => options.remove(index)}\n            >\n              <IconX size={16} />\n            </button>\n          </Fragment>\n        ))}\n\n        <>\n          <label htmlFor=\"other\">other</label>\n          {/* // TODO add support for variable mentions */}\n          <input\n            type=\"text\"\n            className=\"col-span-2 focus:outline-none\"\n            {...register(\"other\", { required: true })}\n          />\n        </>\n      </fieldset>\n      <div className=\"grid grid-cols-2 items-center gap-2\">\n        <label className=\"flex items-center gap-3 pl-2\">\n          offset\n          <input\n            className=\"w-8 text-center\"\n            type=\"numeric\"\n            placeholder=\"0\"\n            {...register(\"offset\")}\n          />\n        </label>\n        <Popover.Root>\n          <Popover.Trigger>Add Option</Popover.Trigger>\n          <Popover.Portal>\n            <Popover.Content\n              sideOffset={4}\n              className=\"z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border border-border bg-elevation-50 shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\"\n            >\n              <div className=\"flex flex-col\">\n                {NAMED_PLURAL_OPTIONS.filter((option) =>\n                  options.fields.every((field) => field.name !== option),\n                ).map((option) => (\n                  <Popover.Close\n                    key={option}\n                    className={cn(\n                      \"cursor-pointer border-none bg-transparent px-1 hover:bg-elevation-250\",\n                    )}\n                    onClick={() => {\n                      // TODO ensure the fields are always in the same order as staticPluralOptions\n                      options.append(\n                        {\n                          name: option,\n                          content: \"\",\n                        },\n                        {\n                          shouldFocus: true,\n                        },\n                      );\n                    }}\n                  >\n                    {option}\n                  </Popover.Close>\n                ))}\n              </div>\n\n              <div className=\"flex items-center justify-between gap-2 border-t border-border p-2\">\n                <label htmlFor=\"customValue\">custom</label>\n                <Controller\n                  control={control}\n                  name=\"customValue\"\n                  render={({ field }) => (\n                    // eslint-disable-next-line jsx-a11y/control-has-associated-label\n                    <input\n                      type=\"numeric\"\n                      className=\"w-8 rounded-sm border-transparent text-center focus:border-border focus:outline-none\"\n                      placeholder=\"=0\"\n                      min={0}\n                      value={field.value ?? \"\"}\n                      onChange={({ currentTarget: { value } }) => {\n                        const number = Number(value);\n                        if (isNaN(number)) return;\n                        if (number < 0) return;\n                        field.onChange(number);\n                      }}\n                      onKeyDown={(e) => {\n                        if (e.key !== \"Enter\") return;\n                        if (field.value === undefined) return;\n                        const isUnique = !options.fields.some(\n                          (existingField) =>\n                            existingField.name === `=${field.value}`,\n                        );\n                        if (!isUnique) return; // TODO maybe show error?\n                        options.append(\n                          {\n                            name: `=${field.value}`,\n                            content: \"\",\n                          },\n                          {\n                            shouldFocus: true,\n                          },\n                        );\n                        field.onChange(undefined);\n                      }}\n                    />\n                  )}\n                />\n              </div>\n            </Popover.Content>\n          </Popover.Portal>\n        </Popover.Root>\n      </div>\n    </div>\n  );\n}\n"],"names":["NAMED_PLURAL_OPTIONS","PluralVariableEditor","variableName","element","ref","config","useMemo","other","options","name","option","serializeICUMessage","control","register","getValues","useForm","useImperativeHandle","values","updatedElement","TYPE","content","parseICUMessage","useFieldArray","jsxs","jsx","field","index","Fragment","IconX","Popover","cn","Controller","value","number","e","existingField"],"mappings":"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"}
+{"version":3,"file":"PluralVariableEditor.js","sources":["../../../../../src/components/inputs/variables/editors/PluralVariableEditor.tsx"],"sourcesContent":["import type { PluralElement } from \"@/types\";\nimport { TYPE } from \"@formatjs/icu-messageformat-parser\";\nimport { IconX } from \"@tabler/icons-react\";\nimport { Popover } from \"radix-ui\";\nimport { Fragment, useImperativeHandle, useMemo } from \"react\";\nimport { Controller, useFieldArray, useForm } from \"react-hook-form\";\n\nimport { cn } from \"@/utils/cn\";\nimport { parseICUMessage, serializeICUMessage } from \"@/utils/icu-tranform\";\n\nconst NAMED_PLURAL_OPTIONS = [\"zero\", \"one\", \"two\", \"few\", \"many\"] as const;\n\nexport interface PluralVariableEditorProps {\n  variableName: string;\n  element: PluralElement | undefined;\n  ref: React.Ref<{ getValue: () => string }>;\n}\n\n// TODO add support for selectordinal (\"pluralType\": \"ordinal\")\n\nexport function PluralVariableEditor({\n  variableName,\n  element,\n  ref,\n}: PluralVariableEditorProps) {\n  const config = useMemo<{\n    offset: number;\n    options: { name: string; content: string }[];\n    other: string;\n  }>(() => {\n    const { other, ...options } = element?.options ?? {};\n    return {\n      offset: element?.offset ?? 0,\n      options: Object.entries(options).map(([name, option]) => ({\n        name,\n        content: serializeICUMessage(option.value),\n      })),\n      other: serializeICUMessage(other ? other.value : []),\n    };\n  }, [element]);\n\n  const { control, register, getValues } = useForm<{\n    offset: number;\n    options: { name: string; content: string }[];\n    other: string;\n    customValue?: number;\n  }>({\n    defaultValues: config,\n  });\n\n  useImperativeHandle(ref, () => ({\n    getValue: () => {\n      const values = getValues();\n      const updatedElement: PluralElement = {\n        type: TYPE.plural,\n        value: variableName,\n        offset: values.offset,\n        pluralType: element?.pluralType ?? \"cardinal\",\n        options: Object.fromEntries(\n          values.options.map(({ name, content }) => [\n            name,\n            { value: parseICUMessage(content) },\n          ]),\n        ),\n      };\n      return serializeICUMessage([updatedElement]);\n    },\n  }));\n\n  const options = useFieldArray({\n    control,\n    name: \"options\",\n  });\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <fieldset className=\"mx-0 grid grid-cols-[3rem_8rem_1.5rem] gap-y-2 rounded-md border border-border px-2 pr-0\">\n        <legend>Options</legend>\n        {options.fields.map((field, index) => (\n          <Fragment key={field.id}>\n            <label htmlFor={`options.${index}`}>{field.name}</label>\n            {/* // TODO add support for variable mentions */}\n            <input\n              className=\"focus:outline-none\"\n              type=\"text\"\n              {...register(`options.${index}.content`, { required: true })}\n            />\n            <button\n              className=\"ml-auto flex cursor-pointer items-center justify-center border-none bg-transparent p-0 hover:text-error\"\n              type=\"button\"\n              onClick={() => options.remove(index)}\n            >\n              <IconX size={16} />\n            </button>\n          </Fragment>\n        ))}\n\n        <>\n          <label htmlFor=\"other\">other</label>\n          {/* // TODO add support for variable mentions */}\n          <input\n            type=\"text\"\n            className=\"col-span-2 focus:outline-none\"\n            {...register(\"other\", { required: true })}\n          />\n        </>\n      </fieldset>\n      <div className=\"grid grid-cols-2 items-center gap-2\">\n        <label className=\"flex items-center gap-3 pl-2\">\n          offset\n          <input\n            className=\"w-8 text-center\"\n            type=\"numeric\"\n            placeholder=\"0\"\n            {...register(\"offset\")}\n          />\n        </label>\n        <Popover.Root>\n          <Popover.Trigger>Add Option</Popover.Trigger>\n          <Popover.Portal>\n            <Popover.Content\n              sideOffset={4}\n              className=\"z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border border-border bg-elevation-50 shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\"\n            >\n              <div className=\"flex flex-col\">\n                {NAMED_PLURAL_OPTIONS.filter((option) =>\n                  options.fields.every((field) => field.name !== option),\n                ).map((option) => (\n                  <Popover.Close\n                    key={option}\n                    className={cn(\n                      \"cursor-pointer border-none bg-transparent px-1 hover:bg-elevation-250\",\n                    )}\n                    onClick={() => {\n                      // TODO ensure the fields are always in the same order as staticPluralOptions\n                      options.append(\n                        {\n                          name: option,\n                          content: \"\",\n                        },\n                        {\n                          shouldFocus: true,\n                        },\n                      );\n                    }}\n                  >\n                    {option}\n                  </Popover.Close>\n                ))}\n              </div>\n\n              <div className=\"flex items-center justify-between gap-2 border-t border-border p-2\">\n                <label htmlFor=\"customValue\">custom</label>\n                <Controller\n                  control={control}\n                  name=\"customValue\"\n                  render={({ field }) => (\n                    // eslint-disable-next-line jsx-a11y/control-has-associated-label\n                    <input\n                      type=\"numeric\"\n                      className=\"w-8 rounded-sm border-transparent text-center focus:border-border focus:outline-none\"\n                      placeholder=\"=0\"\n                      min={0}\n                      value={field.value ?? \"\"}\n                      onChange={({ currentTarget: { value } }) => {\n                        const number = Number(value);\n                        if (isNaN(number)) return;\n                        if (number < 0) return;\n                        field.onChange(number);\n                      }}\n                      onKeyDown={(e) => {\n                        if (e.key !== \"Enter\") return;\n                        if (field.value === undefined) return;\n                        const isUnique = !options.fields.some(\n                          (existingField) =>\n                            existingField.name === `=${field.value}`,\n                        );\n                        if (!isUnique) return; // TODO maybe show error?\n                        options.append(\n                          {\n                            name: `=${field.value}`,\n                            content: \"\",\n                          },\n                          {\n                            shouldFocus: true,\n                          },\n                        );\n                        field.onChange(undefined);\n                      }}\n                    />\n                  )}\n                />\n              </div>\n            </Popover.Content>\n          </Popover.Portal>\n        </Popover.Root>\n      </div>\n    </div>\n  );\n}\n"],"names":["NAMED_PLURAL_OPTIONS","PluralVariableEditor","variableName","element","ref","config","useMemo","other","options","name","option","serializeICUMessage","control","register","getValues","useForm","useImperativeHandle","values","updatedElement","TYPE","content","parseICUMessage","useFieldArray","jsxs","jsx","field","index","Fragment","IconX","Popover","cn","Controller","value","number","e","existingField"],"mappings":"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"}

package/dist/components/inputs/variables/editors/SelectVariableEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectVariableEditor.js","sources":["../../../../../src/components/inputs/variables/editors/SelectVariableEditor.tsx"],"sourcesContent":["import { useEffect, useMemo } from \"react\";\nimport { useFieldArray, useForm } from \"react-hook-form\";\n\nimport type { SelectElement } from \"@/types\";\nimport { parseICUMessage, serializeICUMessage } from \"@/utils/icu-tranform\";\n\nexport interface SelectVariableEditorProps {\n  element: SelectElement;\n  onUpdate: (value: string) => void;\n}\n\nexport function SelectVariableEditor({\n  element,\n  onUpdate,\n}: SelectVariableEditorProps) {\n  const options = useMemo<{ name: string; content: string }[]>(\n    () =>\n      Object.entries(element.options).map(([name, option]) => ({\n        name,\n        content: serializeICUMessage(option.value),\n      })),\n    [element],\n  );\n\n  const { control, register, getValues } = useForm<{\n    options: { name: string; content: string }[];\n  }>({\n    defaultValues: { options },\n  });\n  const { fields } = useFieldArray({\n    control,\n    name: \"options\",\n  });\n\n  useEffect(() => {\n    return () => {\n      const values = getValues();\n      const updatedElement: SelectElement = {\n        ...element,\n        options: Object.fromEntries(\n          values.options.map(({ name, content }) => [\n            name,\n            { value: parseICUMessage(content) },\n          ]),\n        ),\n      };\n      onUpdate(serializeICUMessage([updatedElement]));\n    };\n  }, []);\n\n  return (\n    <div className=\"flex flex-col gap-2 p-3\">\n      {fields.map((field, index) => (\n        <div key={field.name} className=\"flex flex-col gap-1\">\n          <label className=\"text-sm font-medium\">{field.name}</label>\n          {/* // TODO add support for variable mentions */}\n          <input\n            className=\"focus:outline-none\"\n            {...register(`options.${index}.content`)}\n          />\n        </div>\n      ))}\n    </div>\n  );\n}\n"],"names":["SelectVariableEditor","element","onUpdate","options","useMemo","name","option","serializeICUMessage","control","register","getValues","useForm","fields","useFieldArray","useEffect","values","updatedElement","content","parseICUMessage","jsx","field","index","jsxs"],"mappings":";;;;AAWO,SAASA,EAAqB;AAAA,EACnC,SAAAC;AAAA,EACA,UAAAC;AACF,GAA8B;AAC5B,QAAMC,IAAUC;AAAA,IACd,MACE,OAAO,QAAQH,EAAQ,OAAO,EAAE,IAAI,CAAC,CAACI,GAAMC,CAAM,OAAO;AAAA,MACvD,MAAAD;AAAA,MACA,SAASE,EAAoBD,EAAO,KAAK;AAAA,IAAA,EACzC;AAAA,IACJ,CAACL,CAAO;AAAA,EAAA,GAGJ,EAAE,SAAAO,GAAS,UAAAC,GAAU,WAAAC,EAAA,IAAcC,EAEtC;AAAA,IACD,eAAe,EAAE,SAAAR,EAAA;AAAA,EAAQ,CAC1B,GACK,EAAE,QAAAS,EAAA,IAAWC,EAAc;AAAA,IAC/B,SAAAL;AAAA,IACA,MAAM;AAAA,EAAA,CACP;AAED,SAAAM,EAAU,MACD,MAAM;AACX,UAAMC,IAASL,EAAA,GACTM,IAAgC;AAAA,MACpC,GAAGf;AAAA,MACH,SAAS,OAAO;AAAA,QACdc,EAAO,QAAQ,IAAI,CAAC,EAAE,MAAAV,GAAM,SAAAY,QAAc;AAAA,UACxCZ;AAAA,UACA,EAAE,OAAOa,EAAgBD,CAAO,EAAA;AAAA,QAAE,CACnC;AAAA,MAAA;AAAA,IACH;AAEF,IAAAf,EAASK,EAAoB,CAACS,CAAc,CAAC,CAAC;AAAA,EAChD,GACC,CAAA,CAAE,GAGH,gBAAAG,EAAC,OAAA,EAAI,WAAU,2BACZ,UAAAP,EAAO,IAAI,CAACQ,GAAOC,MAClB,gBAAAC,EAAC,OAAA,EAAqB,WAAU,uBAC9B,UAAA;AAAA,IAAA,gBAAAH,EAAC,SAAA,EAAM,WAAU,uBAAuB,UAAAC,EAAM,MAAK;AAAA,IAEnD,gBAAAD;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACT,GAAGV,EAAS,WAAWY,CAAK,UAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EACzC,EAAA,GANQD,EAAM,IAOhB,CACD,GACH;AAEJ;"}
+{"version":3,"file":"SelectVariableEditor.js","sources":["../../../../../src/components/inputs/variables/editors/SelectVariableEditor.tsx"],"sourcesContent":["import type { SelectElement } from \"@/types\";\nimport { useEffect, useMemo } from \"react\";\nimport { useFieldArray, useForm } from \"react-hook-form\";\n\nimport { parseICUMessage, serializeICUMessage } from \"@/utils/icu-tranform\";\n\nexport interface SelectVariableEditorProps {\n  element: SelectElement;\n  onUpdate: (value: string) => void;\n}\n\nexport function SelectVariableEditor({\n  element,\n  onUpdate,\n}: SelectVariableEditorProps) {\n  const options = useMemo<{ name: string; content: string }[]>(\n    () =>\n      Object.entries(element.options).map(([name, option]) => ({\n        name,\n        content: serializeICUMessage(option.value),\n      })),\n    [element],\n  );\n\n  const { control, register, getValues } = useForm<{\n    options: { name: string; content: string }[];\n  }>({\n    defaultValues: { options },\n  });\n  const { fields } = useFieldArray({\n    control,\n    name: \"options\",\n  });\n\n  useEffect(() => {\n    return () => {\n      const values = getValues();\n      const updatedElement: SelectElement = {\n        ...element,\n        options: Object.fromEntries(\n          values.options.map(({ name, content }) => [\n            name,\n            { value: parseICUMessage(content) },\n          ]),\n        ),\n      };\n      onUpdate(serializeICUMessage([updatedElement]));\n    };\n  }, []);\n\n  return (\n    <div className=\"flex flex-col gap-2 p-3\">\n      {fields.map((field, index) => (\n        <div key={field.name} className=\"flex flex-col gap-1\">\n          <label className=\"text-sm font-medium\">{field.name}</label>\n          {/* // TODO add support for variable mentions */}\n          <input\n            className=\"focus:outline-none\"\n            {...register(`options.${index}.content`)}\n          />\n        </div>\n      ))}\n    </div>\n  );\n}\n"],"names":["SelectVariableEditor","element","onUpdate","options","useMemo","name","option","serializeICUMessage","control","register","getValues","useForm","fields","useFieldArray","useEffect","values","updatedElement","content","parseICUMessage","jsx","field","index","jsxs"],"mappings":";;;;AAWO,SAASA,EAAqB;AAAA,EACnC,SAAAC;AAAA,EACA,UAAAC;AACF,GAA8B;AAC5B,QAAMC,IAAUC;AAAA,IACd,MACE,OAAO,QAAQH,EAAQ,OAAO,EAAE,IAAI,CAAC,CAACI,GAAMC,CAAM,OAAO;AAAA,MACvD,MAAAD;AAAA,MACA,SAASE,EAAoBD,EAAO,KAAK;AAAA,IAAA,EACzC;AAAA,IACJ,CAACL,CAAO;AAAA,EAAA,GAGJ,EAAE,SAAAO,GAAS,UAAAC,GAAU,WAAAC,EAAA,IAAcC,EAEtC;AAAA,IACD,eAAe,EAAE,SAAAR,EAAA;AAAA,EAAQ,CAC1B,GACK,EAAE,QAAAS,EAAA,IAAWC,EAAc;AAAA,IAC/B,SAAAL;AAAA,IACA,MAAM;AAAA,EAAA,CACP;AAED,SAAAM,EAAU,MACD,MAAM;AACX,UAAMC,IAASL,EAAA,GACTM,IAAgC;AAAA,MACpC,GAAGf;AAAA,MACH,SAAS,OAAO;AAAA,QACdc,EAAO,QAAQ,IAAI,CAAC,EAAE,MAAAV,GAAM,SAAAY,QAAc;AAAA,UACxCZ;AAAA,UACA,EAAE,OAAOa,EAAgBD,CAAO,EAAA;AAAA,QAAE,CACnC;AAAA,MAAA;AAAA,IACH;AAEF,IAAAf,EAASK,EAAoB,CAACS,CAAc,CAAC,CAAC;AAAA,EAChD,GACC,CAAA,CAAE,GAGH,gBAAAG,EAAC,OAAA,EAAI,WAAU,2BACZ,UAAAP,EAAO,IAAI,CAACQ,GAAOC,MAClB,gBAAAC,EAAC,OAAA,EAAqB,WAAU,uBAC9B,UAAA;AAAA,IAAA,gBAAAH,EAAC,SAAA,EAAM,WAAU,uBAAuB,UAAAC,EAAM,MAAK;AAAA,IAEnD,gBAAAD;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACT,GAAGV,EAAS,WAAWY,CAAK,UAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EACzC,EAAA,GANQD,EAAM,IAOhB,CACD,GACH;AAEJ;"}

package/dist/components/inputs/variables/editors/TagVariableEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"TagVariableEditor.js","sources":["../../../../../src/components/inputs/variables/editors/TagVariableEditor.tsx"],"sourcesContent":["import { useEffect, useMemo } from \"react\";\nimport { useForm } from \"react-hook-form\";\n\nimport type { TagElement } from \"@/types\";\nimport { parseICUMessage, serializeICUMessage } from \"@/utils/icu-tranform\";\n\nexport interface TagVariableEditorProps {\n  element: TagElement;\n  onUpdate: (value: string) => void;\n}\n\nexport function TagVariableEditor({\n  element,\n  onUpdate,\n}: TagVariableEditorProps) {\n  const content = useMemo<string>(\n    () => serializeICUMessage(element.children),\n    [element],\n  );\n\n  const { register, getValues } = useForm<{ content: string }>({\n    defaultValues: { content },\n  });\n\n  useEffect(() => {\n    return () => {\n      const { content } = getValues();\n      // TODO find better solution for this\n      const updatedElement: TagElement = {\n        ...element,\n        children: parseICUMessage(content),\n      };\n      onUpdate(serializeICUMessage([updatedElement]));\n    };\n  }, []);\n\n  // TODO add support for variable mentions\n  return (\n    <textarea\n      className=\"p-3 focus:outline-none\"\n      {...register(\"content\")}\n      rows={1}\n    />\n  );\n}\n"],"names":["TagVariableEditor","element","onUpdate","content","useMemo","serializeICUMessage","register","getValues","useForm","useEffect","updatedElement","parseICUMessage","jsx"],"mappings":";;;;AAWO,SAASA,EAAkB;AAAA,EAChC,SAAAC;AAAA,EACA,UAAAC;AACF,GAA2B;AACzB,QAAMC,IAAUC;AAAA,IACd,MAAMC,EAAoBJ,EAAQ,QAAQ;AAAA,IAC1C,CAACA,CAAO;AAAA,EAAA,GAGJ,EAAE,UAAAK,GAAU,WAAAC,EAAA,IAAcC,EAA6B;AAAA,IAC3D,eAAe,EAAE,SAAAL,EAAA;AAAA,EAAQ,CAC1B;AAED,SAAAM,EAAU,MACD,MAAM;AACX,UAAM,EAAE,SAAAN,EAAAA,IAAYI,EAAA,GAEdG,IAA6B;AAAA,MACjC,GAAGT;AAAA,MACH,UAAUU,EAAgBR,CAAO;AAAA,IAAA;AAEnC,IAAAD,EAASG,EAAoB,CAACK,CAAc,CAAC,CAAC;AAAA,EAChD,GACC,CAAA,CAAE,GAIH,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACT,GAAGN,EAAS,SAAS;AAAA,MACtB,MAAM;AAAA,IAAA;AAAA,EAAA;AAGZ;"}
+{"version":3,"file":"TagVariableEditor.js","sources":["../../../../../src/components/inputs/variables/editors/TagVariableEditor.tsx"],"sourcesContent":["import type { TagElement } from \"@/types\";\nimport { useEffect, useMemo } from \"react\";\nimport { useForm } from \"react-hook-form\";\n\nimport { parseICUMessage, serializeICUMessage } from \"@/utils/icu-tranform\";\n\nexport interface TagVariableEditorProps {\n  element: TagElement;\n  onUpdate: (value: string) => void;\n}\n\nexport function TagVariableEditor({\n  element,\n  onUpdate,\n}: TagVariableEditorProps) {\n  const content = useMemo<string>(\n    () => serializeICUMessage(element.children),\n    [element],\n  );\n\n  const { register, getValues } = useForm<{ content: string }>({\n    defaultValues: { content },\n  });\n\n  useEffect(() => {\n    return () => {\n      const { content } = getValues();\n      // TODO find better solution for this\n      const updatedElement: TagElement = {\n        ...element,\n        children: parseICUMessage(content),\n      };\n      onUpdate(serializeICUMessage([updatedElement]));\n    };\n  }, []);\n\n  // TODO add support for variable mentions\n  return (\n    <textarea\n      className=\"p-3 focus:outline-none\"\n      {...register(\"content\")}\n      rows={1}\n    />\n  );\n}\n"],"names":["TagVariableEditor","element","onUpdate","content","useMemo","serializeICUMessage","register","getValues","useForm","useEffect","updatedElement","parseICUMessage","jsx"],"mappings":";;;;AAWO,SAASA,EAAkB;AAAA,EAChC,SAAAC;AAAA,EACA,UAAAC;AACF,GAA2B;AACzB,QAAMC,IAAUC;AAAA,IACd,MAAMC,EAAoBJ,EAAQ,QAAQ;AAAA,IAC1C,CAACA,CAAO;AAAA,EAAA,GAGJ,EAAE,UAAAK,GAAU,WAAAC,EAAA,IAAcC,EAA6B;AAAA,IAC3D,eAAe,EAAE,SAAAL,EAAA;AAAA,EAAQ,CAC1B;AAED,SAAAM,EAAU,MACD,MAAM;AACX,UAAM,EAAE,SAAAN,EAAAA,IAAYI,EAAA,GAEdG,IAA6B;AAAA,MACjC,GAAGT;AAAA,MACH,UAAUU,EAAgBR,CAAO;AAAA,IAAA;AAEnC,IAAAD,EAASG,EAAoB,CAACK,CAAc,CAAC,CAAC;AAAA,EAChD,GACC,CAAA,CAAE,GAIH,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACT,GAAGN,EAAS,SAAS;AAAA,MACtB,MAAM;AAAA,IAAA;AAAA,EAAA;AAGZ;"}