payload-intl 0.2.4 → 0.3.0

package/README.md

@@ -13,7 +13,7 @@
 - Autocomplete to quickly insert and configure valid ICU arguments
 - Add optional descriptions to each message so editors understand the context
 - Visual tree & tabbed editor for quick navigation
-- Support for Rich Text messages
+<!-- - Support for Rich Text messages -->
 <!-- - Import/export JSON, copy messages between paths -->
 
 ## Getting Started
@@ -107,7 +107,6 @@ The `intlPlugin` accepts the following configuration:
 | `editorAccess`          | Authenticated users only | Access control for editing messages                     |
 | `hooks`                 | -                        | Collection hooks with and additional `afterUpdate` hook |
 | `tabs`                  | -                        | Enable tabbed interface                                 |
-| `richTextEditorOptions` | -                        | Configure rich text editor options                      |
 
 ## Storage Adapter Requirements
 
@@ -131,7 +130,7 @@ export default {
 } as const;
 ```
 
-### Rich Text Messages
+<!-- ### Rich Text Messages
 
 Use `"$RICH$"` as the message value to enable rich text editing. Note that rich text messages do not support ICU arguments.
 
@@ -142,7 +141,7 @@ export default {
     terms: "$RICH$", // Rich text editor will be used
   },
 } as const;
-```
+``` -->
 
 ## Example Usage
 

package/dist/components/MessageController.js

@@ -1,65 +1,43 @@
 import { jsx as o } from "react/jsx-runtime";
-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";
-function M({
-  type: l,
-  name: n,
-  variables: m,
-  label: u,
-  locale: t,
-  validate: p,
-  className: s
+import { Controller as p } from "react-hook-form";
+import { useMessagesForm as g } from "../context/messages-form.js";
+import { MessageInput as i } from "./inputs/MessageInput.js";
+function v({
+  type: C,
+  name: e,
+  variables: n,
+  label: t,
+  locale: s,
+  validate: u,
+  className: l
 }) {
-  const { control: a } = i();
-  return l === "rich" ? /* @__PURE__ */ o(
-    g,
+  const { control: m } = g();
+  return /* @__PURE__ */ o(
+    p,
     {
-      control: a,
-      name: n,
-      render: ({ field: r, fieldState: e }) => /* @__PURE__ */ o(
-        C,
+      control: m,
+      name: e,
+      render: ({ field: r, fieldState: a }) => /* @__PURE__ */ o(
+        i,
         {
-          className: s,
-          error: e.error,
-          label: u,
-          lang: t,
-          onChange: r.onChange,
-          onBlur: r.onBlur,
-          value: r.value || ""
-        }
-      ),
-      rules: {
-        required: !0
-      }
-    }
-  ) : /* @__PURE__ */ o(
-    g,
-    {
-      control: a,
-      name: n,
-      render: ({ field: r, fieldState: e }) => /* @__PURE__ */ o(
-        h,
-        {
-          label: u,
-          lang: t,
-          className: s,
+          label: t,
+          lang: s,
+          className: l,
           value: r.value || "",
-          variables: m,
-          error: e.error,
+          variables: n,
+          error: a.error,
           onChange: r.onChange,
           onBlur: r.onBlur
         }
       ),
       rules: {
         required: !0,
-        validate: p
+        validate: u
       }
     }
   );
 }
 export {
-  M as MessageController
+  v as MessageController
 };
 //# sourceMappingURL=MessageController.js.map

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 { 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;"}
+{"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\";\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","MessageInput"],"mappings":";;;;AAmBO,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;AAyBpB,SACE,gBAAAC;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,OAAAV;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/layout/MessageField.js

@@ -1,6 +1,6 @@
-import { jsxs as f, jsx as i } from "react/jsx-runtime";
+import { jsxs as d, jsx as i } from "react/jsx-runtime";
 import { useMemo as p } from "react";
-import { useMessagesForm as d } from "../../context/messages-form.js";
+import { useMessagesForm as f } from "../../context/messages-form.js";
 import { cn as n } from "../../utils/cn.js";
 import { parseMessageSchema as v } from "../../utils/schema.js";
 import { createValidator as x } from "../../utils/validate.js";
@@ -11,11 +11,11 @@ function w({
   path: t,
   className: l
 }) {
-  const { locales: r } = d(), e = p(() => v(o), [o]), m = p(
+  const { locales: r } = f(), e = p(() => v(o), [o]), m = p(
     () => x(e.variables),
     [e.variables]
   );
-  return /* @__PURE__ */ f("div", { className: n("", l), children: [
+  return /* @__PURE__ */ d("div", { className: n("", l), children: [
     e.description && /* @__PURE__ */ i("p", { children: e.description }),
     r.length === 1 ? /* @__PURE__ */ i(
       c,
@@ -31,8 +31,8 @@ function w({
       "div",
       {
         className: n("-mx-3 flex min-w-0 gap-4 px-3", {
-          "overflow-x-auto": e.type === "icu",
-          "flex-col": e.type === "rich"
+          "overflow-x-auto": e.type === "icu"
+          // "flex-col": config.type === "rich",
         }),
         children: r.map((a) => /* @__PURE__ */ i(
           c,

package/dist/components/layout/MessageField.js.map

@@ -1 +1 @@
-{"version":3,"file":"MessageField.js","sources":["../../../src/components/layout/MessageField.tsx"],"sourcesContent":["import type { MessageSchema } from \"@/types\";\nimport { useMemo } from \"react\";\n\nimport { useMessagesForm } from \"@/context/messages-form\";\nimport { cn } from \"@/utils/cn\";\nimport { parseMessageSchema } from \"@/utils/schema\";\nimport { createValidator } from \"@/utils/validate\";\n\nimport { MessageController } from \"../MessageController\";\n\ninterface MessageFieldProps {\n  schema: MessageSchema;\n  messageKey: string;\n  path: string;\n  className?: string;\n}\n\nexport function MessageField({\n  schema,\n  messageKey,\n  path,\n  className,\n}: MessageFieldProps): React.ReactNode {\n  const { locales } = useMessagesForm();\n\n  const config = useMemo(() => parseMessageSchema(schema), [schema]);\n\n  const validator = useMemo(\n    () => createValidator(config.variables),\n    [config.variables],\n  );\n\n  return (\n    <div className={cn(\"\", className)}>\n      {config.description && <p>{config.description}</p>}\n\n      {locales.length === 1 ? (\n        <MessageController\n          className={className}\n          type={config.type}\n          variables={config.variables}\n          locale={locales[0]}\n          name={[locales[0], path, messageKey].join(\".\")}\n          validate={validator}\n        />\n      ) : (\n        <div\n          className={cn(\"-mx-3 flex min-w-0 gap-4 px-3\", {\n            \"overflow-x-auto\": config.type === \"icu\",\n            \"flex-col\": config.type === \"rich\",\n          })}\n        >\n          {locales.map((locale) => (\n            <MessageController\n              key={locale}\n              className=\"flex-1\"\n              type={config.type}\n              label={locale.toUpperCase()}\n              locale={locale}\n              variables={config.variables}\n              name={[locale, path, messageKey].join(\".\")}\n              validate={validator}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["MessageField","schema","messageKey","path","className","locales","useMessagesForm","config","useMemo","parseMessageSchema","validator","createValidator","cn","jsx","MessageController","locale"],"mappings":";;;;;;;AAiBO,SAASA,EAAa;AAAA,EAC3B,QAAAC;AAAA,EACA,YAAAC;AAAA,EACA,MAAAC;AAAA,EACA,WAAAC;AACF,GAAuC;AACrC,QAAM,EAAE,SAAAC,EAAA,IAAYC,EAAA,GAEdC,IAASC,EAAQ,MAAMC,EAAmBR,CAAM,GAAG,CAACA,CAAM,CAAC,GAE3DS,IAAYF;AAAA,IAChB,MAAMG,EAAgBJ,EAAO,SAAS;AAAA,IACtC,CAACA,EAAO,SAAS;AAAA,EAAA;AAGnB,2BACG,OAAA,EAAI,WAAWK,EAAG,IAAIR,CAAS,GAC7B,UAAA;AAAA,IAAAG,EAAO,eAAe,gBAAAM,EAAC,KAAA,EAAG,UAAAN,EAAO,aAAY;AAAA,IAE7CF,EAAQ,WAAW,IAClB,gBAAAQ;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,WAAAV;AAAA,QACA,MAAMG,EAAO;AAAA,QACb,WAAWA,EAAO;AAAA,QAClB,QAAQF,EAAQ,CAAC;AAAA,QACjB,MAAM,CAACA,EAAQ,CAAC,GAAGF,GAAMD,CAAU,EAAE,KAAK,GAAG;AAAA,QAC7C,UAAUQ;AAAA,MAAA;AAAA,IAAA,IAGZ,gBAAAG;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWD,EAAG,iCAAiC;AAAA,UAC7C,mBAAmBL,EAAO,SAAS;AAAA,UACnC,YAAYA,EAAO,SAAS;AAAA,QAAA,CAC7B;AAAA,QAEA,UAAAF,EAAQ,IAAI,CAACU,MACZ,gBAAAF;AAAA,UAACC;AAAA,UAAA;AAAA,YAEC,WAAU;AAAA,YACV,MAAMP,EAAO;AAAA,YACb,OAAOQ,EAAO,YAAA;AAAA,YACd,QAAAA;AAAA,YACA,WAAWR,EAAO;AAAA,YAClB,MAAM,CAACQ,GAAQZ,GAAMD,CAAU,EAAE,KAAK,GAAG;AAAA,YACzC,UAAUQ;AAAA,UAAA;AAAA,UAPLK;AAAA,QAAA,CASR;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GAEJ;AAEJ;"}
+{"version":3,"file":"MessageField.js","sources":["../../../src/components/layout/MessageField.tsx"],"sourcesContent":["import type { MessageSchema } from \"@/types\";\nimport { useMemo } from \"react\";\n\nimport { useMessagesForm } from \"@/context/messages-form\";\nimport { cn } from \"@/utils/cn\";\nimport { parseMessageSchema } from \"@/utils/schema\";\nimport { createValidator } from \"@/utils/validate\";\n\nimport { MessageController } from \"../MessageController\";\n\ninterface MessageFieldProps {\n  schema: MessageSchema;\n  messageKey: string;\n  path: string;\n  className?: string;\n}\n\nexport function MessageField({\n  schema,\n  messageKey,\n  path,\n  className,\n}: MessageFieldProps): React.ReactNode {\n  const { locales } = useMessagesForm();\n\n  const config = useMemo(() => parseMessageSchema(schema), [schema]);\n\n  const validator = useMemo(\n    () => createValidator(config.variables),\n    [config.variables],\n  );\n\n  return (\n    <div className={cn(\"\", className)}>\n      {config.description && <p>{config.description}</p>}\n\n      {locales.length === 1 ? (\n        <MessageController\n          className={className}\n          type={config.type}\n          variables={config.variables}\n          locale={locales[0]}\n          name={[locales[0], path, messageKey].join(\".\")}\n          validate={validator}\n        />\n      ) : (\n        <div\n          className={cn(\"-mx-3 flex min-w-0 gap-4 px-3\", {\n            \"overflow-x-auto\": config.type === \"icu\",\n            // \"flex-col\": config.type === \"rich\",\n          })}\n        >\n          {locales.map((locale) => (\n            <MessageController\n              key={locale}\n              className=\"flex-1\"\n              type={config.type}\n              label={locale.toUpperCase()}\n              locale={locale}\n              variables={config.variables}\n              name={[locale, path, messageKey].join(\".\")}\n              validate={validator}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["MessageField","schema","messageKey","path","className","locales","useMessagesForm","config","useMemo","parseMessageSchema","validator","createValidator","cn","jsx","MessageController","locale"],"mappings":";;;;;;;AAiBO,SAASA,EAAa;AAAA,EAC3B,QAAAC;AAAA,EACA,YAAAC;AAAA,EACA,MAAAC;AAAA,EACA,WAAAC;AACF,GAAuC;AACrC,QAAM,EAAE,SAAAC,EAAA,IAAYC,EAAA,GAEdC,IAASC,EAAQ,MAAMC,EAAmBR,CAAM,GAAG,CAACA,CAAM,CAAC,GAE3DS,IAAYF;AAAA,IAChB,MAAMG,EAAgBJ,EAAO,SAAS;AAAA,IACtC,CAACA,EAAO,SAAS;AAAA,EAAA;AAGnB,2BACG,OAAA,EAAI,WAAWK,EAAG,IAAIR,CAAS,GAC7B,UAAA;AAAA,IAAAG,EAAO,eAAe,gBAAAM,EAAC,KAAA,EAAG,UAAAN,EAAO,aAAY;AAAA,IAE7CF,EAAQ,WAAW,IAClB,gBAAAQ;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,WAAAV;AAAA,QACA,MAAMG,EAAO;AAAA,QACb,WAAWA,EAAO;AAAA,QAClB,QAAQF,EAAQ,CAAC;AAAA,QACjB,MAAM,CAACA,EAAQ,CAAC,GAAGF,GAAMD,CAAU,EAAE,KAAK,GAAG;AAAA,QAC7C,UAAUQ;AAAA,MAAA;AAAA,IAAA,IAGZ,gBAAAG;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWD,EAAG,iCAAiC;AAAA,UAC7C,mBAAmBL,EAAO,SAAS;AAAA;AAAA,QAAA,CAEpC;AAAA,QAEA,UAAAF,EAAQ,IAAI,CAACU,MACZ,gBAAAF;AAAA,UAACC;AAAA,UAAA;AAAA,YAEC,WAAU;AAAA,YACV,MAAMP,EAAO;AAAA,YACb,OAAOQ,EAAO,YAAA;AAAA,YACd,QAAAA;AAAA,YACA,WAAWR,EAAO;AAAA,YAClB,MAAM,CAACQ,GAAQZ,GAAMD,CAAU,EAAE,KAAK,GAAG;AAAA,YACzC,UAAUQ;AAAA,UAAA;AAAA,UAPLK;AAAA,QAAA,CASR;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GAEJ;AAEJ;"}

package/dist/utils/schema.d.ts

@@ -1,7 +1,7 @@
 import { MessageSchema, TemplateVariable } from '../types.ts';
 export declare const parseMessageSchema: (schema: MessageSchema) => MessageConfig;
 export declare const extractTemplateVariables: (schema: MessageSchema) => TemplateVariable[];
-export type MessageType = "rich" | "icu";
+export type MessageType = "icu";
 export type MessageConfig = {
     description: string | undefined;
     type: MessageType;

package/dist/utils/schema.js

@@ -1,9 +1,10 @@
 import { parse as r, TYPE as e } from "@formatjs/icu-messageformat-parser";
-const n = (a) => ({
+const i = (a) => ({
   description: a.match(/^\[.+\]/)?.[0]?.slice(1, -1),
-  type: a === "$RICH$" ? "rich" : "icu",
-  variables: i(a)
-}), i = (a) => c(r(a)), c = (a) => a.flatMap((t) => {
+  // type: schema === "$RICH$" ? "rich" : "icu",
+  type: "icu",
+  variables: l(a)
+}), l = (a) => s(r(a)), s = (a) => a.flatMap((t) => {
   switch (t.type) {
     case e.literal:
     case e.pound:
@@ -17,18 +18,18 @@ const n = (a) => ({
     case e.select:
       return [
         t,
-        ...c(
-          Object.values(t.options).flatMap(({ value: s }) => s)
+        ...s(
+          Object.values(t.options).flatMap(({ value: c }) => c)
         )
       ];
     case e.tag:
-      return [t, ...c(t.children)];
+      return [t, ...s(t.children)];
     default:
       return [t];
   }
 });
 export {
-  i as extractTemplateVariables,
-  n as parseMessageSchema
+  l as extractTemplateVariables,
+  i as parseMessageSchema
 };
 //# sourceMappingURL=schema.js.map

package/dist/utils/schema.js.map

@@ -1 +1 @@
-{"version":3,"file":"schema.js","sources":["../../src/utils/schema.ts"],"sourcesContent":["import type { MessageSchema, TemplateVariable } from \"@/types\";\nimport type { MessageFormatElement } from \"@formatjs/icu-messageformat-parser\";\nimport { parse, TYPE } from \"@formatjs/icu-messageformat-parser\";\n\nexport const parseMessageSchema = (schema: MessageSchema): MessageConfig => {\n  const description = schema.match(/^\\[.+\\]/)?.[0];\n  // TODO add support for variables description\n  // const withoutDescription = schema.replace(description || \"\", \"\").trim();\n  // const withoutOptional = withoutDescription.split(\" | \")[0]?.trim();\n\n  return {\n    description: description?.slice(1, -1),\n    type: schema === \"$RICH$\" ? \"rich\" : \"icu\",\n    variables: extractTemplateVariables(schema),\n  };\n};\n\nexport const extractTemplateVariables = (\n  schema: MessageSchema,\n): TemplateVariable[] => collectTemplateVariables(parse(schema));\n\nconst collectTemplateVariables = (\n  parts: MessageFormatElement[],\n): TemplateVariable[] =>\n  parts.flatMap<TemplateVariable>((part) => {\n    switch (part.type) {\n      case TYPE.literal:\n      case TYPE.pound:\n        return [];\n      case TYPE.argument:\n      case TYPE.number:\n      case TYPE.date:\n      case TYPE.time:\n        return [part];\n      case TYPE.plural:\n      case TYPE.select:\n        return [\n          part,\n          ...collectTemplateVariables(\n            Object.values(part.options).flatMap(({ value }) => value),\n          ),\n        ];\n      case TYPE.tag:\n        return [part, ...collectTemplateVariables(part.children)];\n      default:\n        return [part];\n    }\n  });\n\n// MARK: Types\n\nexport type MessageType = \"rich\" | \"icu\";\nexport type MessageConfig = {\n  description: string | undefined;\n  type: MessageType;\n  variables: TemplateVariable[];\n};\n"],"names":["parseMessageSchema","schema","extractTemplateVariables","collectTemplateVariables","parse","parts","part","TYPE","value"],"mappings":";AAIO,MAAMA,IAAqB,CAACC,OAM1B;AAAA,EACL,aANkBA,EAAO,MAAM,SAAS,IAAI,CAAC,GAMnB,MAAM,GAAG,EAAE;AAAA,EACrC,MAAMA,MAAW,WAAW,SAAS;AAAA,EACrC,WAAWC,EAAyBD,CAAM;AAAA,IAIjCC,IAA2B,CACtCD,MACuBE,EAAyBC,EAAMH,CAAM,CAAC,GAEzDE,IAA2B,CAC/BE,MAEAA,EAAM,QAA0B,CAACC,MAAS;AACxC,UAAQA,EAAK,MAAA;AAAA,IACX,KAAKC,EAAK;AAAA,IACV,KAAKA,EAAK;AACR,aAAO,CAAA;AAAA,IACT,KAAKA,EAAK;AAAA,IACV,KAAKA,EAAK;AAAA,IACV,KAAKA,EAAK;AAAA,IACV,KAAKA,EAAK;AACR,aAAO,CAACD,CAAI;AAAA,IACd,KAAKC,EAAK;AAAA,IACV,KAAKA,EAAK;AACR,aAAO;AAAA,QACLD;AAAA,QACA,GAAGH;AAAA,UACD,OAAO,OAAOG,EAAK,OAAO,EAAE,QAAQ,CAAC,EAAE,OAAAE,EAAA,MAAYA,CAAK;AAAA,QAAA;AAAA,MAC1D;AAAA,IAEJ,KAAKD,EAAK;AACR,aAAO,CAACD,GAAM,GAAGH,EAAyBG,EAAK,QAAQ,CAAC;AAAA,IAC1D;AACE,aAAO,CAACA,CAAI;AAAA,EAAA;AAElB,CAAC;"}
+{"version":3,"file":"schema.js","sources":["../../src/utils/schema.ts"],"sourcesContent":["import type { MessageSchema, TemplateVariable } from \"@/types\";\nimport type { MessageFormatElement } from \"@formatjs/icu-messageformat-parser\";\nimport { parse, TYPE } from \"@formatjs/icu-messageformat-parser\";\n\nexport const parseMessageSchema = (schema: MessageSchema): MessageConfig => {\n  const description = schema.match(/^\\[.+\\]/)?.[0];\n  // TODO add support for variables description\n  // const withoutDescription = schema.replace(description || \"\", \"\").trim();\n  // const withoutOptional = withoutDescription.split(\" | \")[0]?.trim();\n\n  return {\n    description: description?.slice(1, -1),\n    // type: schema === \"$RICH$\" ? \"rich\" : \"icu\",\n    type: \"icu\",\n    variables: extractTemplateVariables(schema),\n  };\n};\n\nexport const extractTemplateVariables = (\n  schema: MessageSchema,\n): TemplateVariable[] => collectTemplateVariables(parse(schema));\n\nconst collectTemplateVariables = (\n  parts: MessageFormatElement[],\n): TemplateVariable[] =>\n  parts.flatMap<TemplateVariable>((part) => {\n    switch (part.type) {\n      case TYPE.literal:\n      case TYPE.pound:\n        return [];\n      case TYPE.argument:\n      case TYPE.number:\n      case TYPE.date:\n      case TYPE.time:\n        return [part];\n      case TYPE.plural:\n      case TYPE.select:\n        return [\n          part,\n          ...collectTemplateVariables(\n            Object.values(part.options).flatMap(({ value }) => value),\n          ),\n        ];\n      case TYPE.tag:\n        return [part, ...collectTemplateVariables(part.children)];\n      default:\n        return [part];\n    }\n  });\n\n// MARK: Types\n\nexport type MessageType = \"icu\" // \"rich\";\nexport type MessageConfig = {\n  description: string | undefined;\n  type: MessageType;\n  variables: TemplateVariable[];\n};\n"],"names":["parseMessageSchema","schema","extractTemplateVariables","collectTemplateVariables","parse","parts","part","TYPE","value"],"mappings":";AAIO,MAAMA,IAAqB,CAACC,OAM1B;AAAA,EACL,aANkBA,EAAO,MAAM,SAAS,IAAI,CAAC,GAMnB,MAAM,GAAG,EAAE;AAAA;AAAA,EAErC,MAAM;AAAA,EACN,WAAWC,EAAyBD,CAAM;AAAA,IAIjCC,IAA2B,CACtCD,MACuBE,EAAyBC,EAAMH,CAAM,CAAC,GAEzDE,IAA2B,CAC/BE,MAEAA,EAAM,QAA0B,CAACC,MAAS;AACxC,UAAQA,EAAK,MAAA;AAAA,IACX,KAAKC,EAAK;AAAA,IACV,KAAKA,EAAK;AACR,aAAO,CAAA;AAAA,IACT,KAAKA,EAAK;AAAA,IACV,KAAKA,EAAK;AAAA,IACV,KAAKA,EAAK;AAAA,IACV,KAAKA,EAAK;AACR,aAAO,CAACD,CAAI;AAAA,IACd,KAAKC,EAAK;AAAA,IACV,KAAKA,EAAK;AACR,aAAO;AAAA,QACLD;AAAA,QACA,GAAGH;AAAA,UACD,OAAO,OAAOG,EAAK,OAAO,EAAE,QAAQ,CAAC,EAAE,OAAAE,EAAA,MAAYA,CAAK;AAAA,QAAA;AAAA,MAC1D;AAAA,IAEJ,KAAKD,EAAK;AACR,aAAO,CAACD,GAAM,GAAGH,EAAyBG,EAAK,QAAQ,CAAC;AAAA,IAC1D;AACE,aAAO,CAACA,CAAI;AAAA,EAAA;AAElB,CAAC;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payload-intl",
-  "version": "0.2.4",
+  "version": "0.3.0",
   "description": "Payload Plugin for I18N using ICU Messages",
   "license": "MIT",
   "author": "Michael Zeltner",

package/dist/components/inputs/LexicalInput.js

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"LexicalInput.js","sources":["../../../src/components/inputs/LexicalInput.tsx"],"sourcesContent":["import type {\n  DefaultNodeTypes,\n  TypedEditorState,\n} from \"@payloadcms/richtext-lexical\";\nimport type { SerializedEditorState } from \"@payloadcms/richtext-lexical/lexical\";\nimport {\n  defaultEditorConfig,\n  defaultEditorFeatures,\n} from \"@payloadcms/richtext-lexical\";\nimport {\n  buildDefaultEditorState,\n  getEnabledNodes,\n  RenderLexical,\n  sanitizeClientEditorConfig,\n} from \"@payloadcms/richtext-lexical/client\";\nimport { $getRoot } from \"@payloadcms/richtext-lexical/lexical\";\nimport { createHeadlessEditor } from \"@payloadcms/richtext-lexical/lexical/headless\";\nimport {\n  $generateHtmlFromNodes,\n  $generateNodesFromDOM,\n} from \"@payloadcms/richtext-lexical/lexical/html\";\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 = buildDefaultEditorState({});\n\ninterface UseHtmlLexicalAdapterProps {\n  html: string;\n  onChange: (html: string) => void;\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: sanitizeClientEditorConfig(\n          // @ts-expect-error - FIXME\n          defaultEditorFeatures,\n          defaultEditorConfig,\n        ),\n      }),\n    }),\n  );\n\n  // 2. HTML -> SerializedState\n  const getSerializedState = useCallback(\n    (htmlString: string): SerializedEditorState => {\n      const editor = headlessEditor.current;\n      editor.update(\n        () => {\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        },\n        { discrete: true },\n      );\n\n      return editor.getEditorState().toJSON();\n    },\n    [],\n  );\n\n  // 3. Memoize the initial value to prevent unnecessary re-renders\n  const value = useMemo(() => {\n    const serializedState = getSerializedState(html);\n\n    if (serializedState.root.children.length === 0) {\n      return EMPTY_STATE;\n    }\n\n    return serializedState;\n  }, [html, getSerializedState]);\n\n  // 4. SerializedState -> HTML\n  const setValue = useCallback(\n    (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    },\n    [html, onChange],\n  );\n\n  return { value: value as TypedEditorState<DefaultNodeTypes>, setValue };\n}\n"],"names":["LexicalInput","error","label","value","onChange","className","editor","useHtmlLexicalAdapter","jsx","InputWrapper","RenderLexical","val","EMPTY_STATE","buildDefaultEditorState","html","headlessEditor","useRef","createHeadlessEditor","getEnabledNodes","sanitizeClientEditorConfig","defaultEditorFeatures","defaultEditorConfig","getSerializedState","useCallback","htmlString","dom","nodes","$generateNodesFromDOM","$getRoot","useMemo","serializedState","setValue","newHtml","$generateHtmlFromNodes"],"mappings":";;;;;;;;AAiCO,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,MAAMJ;AAAA,IACN,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,IAAcC,EAAwB,EAAE;AAOvC,SAASN,EAAsB;AAAA,EACpC,MAAAO;AAAA,EACA,UAAAV;AACF,GAA+B;AAE7B,QAAMW,IAAiBC;AAAA,IACrBC,EAAqB;AAAA,MACnB,OAAOC,EAAgB;AAAA,QACrB,cAAcC;AAAA;AAAA,UAEZC;AAAA,UACAC;AAAA,QAAA;AAAA,MACF,CACD;AAAA,IAAA,CACF;AAAA,EAAA,GAIGC,IAAqBC;AAAA,IACzB,CAACC,MAA8C;AAC7C,YAAMlB,IAASS,EAAe;AAC9B,aAAAT,EAAO;AAAA,QACL,MAAM;AAEJ,gBAAMmB,IADS,IAAI,UAAA,EACA,gBAAgBD,GAAY,WAAW,GACpDE,IAAQC,EAAsBrB,GAAQmB,CAAG;AAG/C,UADaG,EAAA,EACR,MAAA,EAAQ,OAAO,GAAGF,CAAK;AAAA,QAC9B;AAAA,QACA,EAAE,UAAU,GAAA;AAAA,MAAK,GAGZpB,EAAO,eAAA,EAAiB,OAAA;AAAA,IACjC;AAAA,IACA,CAAA;AAAA,EAAC,GAIGH,IAAQ0B,EAAQ,MAAM;AAC1B,UAAMC,IAAkBR,EAAmBR,CAAI;AAE/C,WAAIgB,EAAgB,KAAK,SAAS,WAAW,IACpClB,IAGFkB;AAAA,EACT,GAAG,CAAChB,GAAMQ,CAAkB,CAAC,GAGvBS,IAAWR;AAAA,IACf,CAACO,MAA2C;AAC1C,YAAMxB,IAASS,EAAe;AAG9B,MAAAT,EAAO,eAAeA,EAAO,iBAAiBwB,CAAe,CAAC,GAG9DxB,EAAO,KAAK,MAAM;AAChB,cAAM0B,IAAUC,EAAuB3B,CAAM;AAC7C,QAAI0B,MAAYlB,KACdV,EAAS4B,CAAO;AAAA,MAEpB,CAAC;AAAA,IACH;AAAA,IACA,CAAClB,GAAMV,CAAQ;AAAA,EAAA;AAGjB,SAAO,EAAE,OAAAD,GAAoD,UAAA4B,EAAA;AAC/D;"}