payload-intl 0.2.2 → 0.2.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,99 +1,80 @@
1
1
  import { jsx as l } from "react/jsx-runtime";
2
2
  import { defaultEditorFeatures as p, defaultEditorConfig as f } from "@payloadcms/richtext-lexical";
3
- import { sanitizeClientEditorConfig as g, RenderLexical as E, getEnabledNodes as S } from "@payloadcms/richtext-lexical/client";
4
- import { $getRoot as h } from "@payloadcms/richtext-lexical/lexical";
5
- import { createHeadlessEditor as x } from "@payloadcms/richtext-lexical/lexical/headless";
6
- import { $generateNodesFromDOM as v, $generateHtmlFromNodes as C } from "@payloadcms/richtext-lexical/lexical/html";
7
- import { useRef as F, useCallback as c, useMemo as T } from "react";
8
- import { InputWrapper as b } from "./InputWrapper.js";
9
- function A({
3
+ import { buildDefaultEditorState as E, RenderLexical as g, getEnabledNodes as S, sanitizeClientEditorConfig as x } from "@payloadcms/richtext-lexical/client";
4
+ import { $getRoot as b } from "@payloadcms/richtext-lexical/lexical";
5
+ import { createHeadlessEditor as h } from "@payloadcms/richtext-lexical/lexical/headless";
6
+ import { $generateNodesFromDOM as C, $generateHtmlFromNodes as T } from "@payloadcms/richtext-lexical/lexical/html";
7
+ import { useRef as F, useCallback as u, useMemo as H } from "react";
8
+ import { InputWrapper as M } from "./InputWrapper.js";
9
+ function y({
10
10
  error: r,
11
11
  label: o,
12
- value: n,
13
- onChange: i,
12
+ value: i,
13
+ onChange: a,
14
14
  className: s
15
15
  }) {
16
- const a = M({
17
- html: n,
18
- onChange: i
16
+ const n = v({
17
+ html: i,
18
+ onChange: a
19
19
  });
20
- return /* @__PURE__ */ l(b, { label: o, error: r, className: s, children: /* @__PURE__ */ l(
21
- E,
20
+ return /* @__PURE__ */ l(M, { label: o, error: r, className: s, children: /* @__PURE__ */ l(
21
+ g,
22
22
  {
23
23
  field: {
24
24
  name: "myCustomEditor",
25
25
  label: !1,
26
26
  type: "richText"
27
27
  },
28
- value: a.value,
29
- setValue: (e) => a.setValue(e),
28
+ value: n.value,
29
+ setValue: (e) => n.setValue(e),
30
30
  schemaPath: "global.intl-plugin.editorTemplate"
31
31
  }
32
32
  ) });
33
33
  }
34
- const y = {
35
- root: {
36
- children: [
37
- {
38
- children: [],
39
- direction: null,
40
- textFormat: 0,
41
- format: "left",
42
- indent: 0,
43
- type: "paragraph",
44
- version: 1
45
- }
46
- ],
47
- direction: null,
48
- format: "",
49
- indent: 0,
50
- type: "root",
51
- version: 1
52
- }
53
- }, H = g(
54
- // @ts-expect-error - it works
55
- p,
56
- f
57
- );
58
- function M({
34
+ const N = E({});
35
+ function v({
59
36
  html: r,
60
37
  onChange: o
61
38
  }) {
62
- const n = F(
63
- x({
39
+ const i = F(
40
+ h({
64
41
  nodes: S({
65
- editorConfig: H
42
+ editorConfig: x(
43
+ // @ts-expect-error - FIXME
44
+ p,
45
+ f
46
+ )
66
47
  })
67
48
  })
68
- ), i = c(
49
+ ), a = u(
69
50
  (e) => {
70
- const t = n.current;
51
+ const t = i.current;
71
52
  return t.update(
72
53
  () => {
73
- const m = new DOMParser().parseFromString(e, "text/html"), u = v(t, m);
74
- h().clear().append(...u);
54
+ const c = new DOMParser().parseFromString(e, "text/html"), m = C(t, c);
55
+ b().clear().append(...m);
75
56
  },
76
57
  { discrete: !0 }
77
58
  ), t.getEditorState().toJSON();
78
59
  },
79
60
  []
80
- ), s = T(() => {
81
- const e = i(r);
82
- return e.root.children.length === 0 ? y : e;
83
- }, [r, i]), a = c(
61
+ ), s = H(() => {
62
+ const e = a(r);
63
+ return e.root.children.length === 0 ? N : e;
64
+ }, [r, a]), n = u(
84
65
  (e) => {
85
- const t = n.current;
66
+ const t = i.current;
86
67
  t.setEditorState(t.parseEditorState(e)), t.read(() => {
87
- const d = C(t);
68
+ const d = T(t);
88
69
  d !== r && o(d);
89
70
  });
90
71
  },
91
72
  [r, o]
92
73
  );
93
- return { value: s, setValue: a };
74
+ return { value: s, setValue: n };
94
75
  }
95
76
  export {
96
- A as LexicalInput,
97
- M as useHtmlLexicalAdapter
77
+ y as LexicalInput,
78
+ v as useHtmlLexicalAdapter
98
79
  };
99
80
  //# sourceMappingURL=LexicalInput.js.map
@@ -1 +1 @@
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 type { SerializedEditorState } from \"@payloadcms/richtext-lexical/lexical\";\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 } 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: 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\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\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(\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","editorConfig","sanitizeClientEditorConfig","defaultEditorFeatures","defaultEditorConfig","html","headlessEditor","useRef","createHeadlessEditor","getEnabledNodes","getSerializedState","useCallback","htmlString","dom","nodes","$generateNodesFromDOM","$getRoot","useMemo","serializedState","setValue","newHtml","$generateHtmlFromNodes"],"mappings":";;;;;;;;AAgCO,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,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,GAEMC,IAAeC;AAAA;AAAA,EAEnBC;AAAA,EACAC;AACF;AAOO,SAAST,EAAsB;AAAA,EACpC,MAAAU;AAAA,EACA,UAAAb;AACF,GAA+B;AAE7B,QAAMc,IAAiBC;AAAA,IACrBC,EAAqB;AAAA,MACnB,OAAOC,EAAgB;AAAA,QACrB,cAAAR;AAAA,MAAA,CACD;AAAA,IAAA,CACF;AAAA,EAAA,GAIGS,IAAqBC;AAAA,IACzB,CAACC,MAA8C;AAC7C,YAAMlB,IAASY,EAAe;AAC9B,aAAAZ,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,EAAmBL,CAAI;AAE/C,WAAIa,EAAgB,KAAK,SAAS,WAAW,IACpClB,IAGFkB;AAAA,EACT,GAAG,CAACb,GAAMK,CAAkB,CAAC,GAGvBS,IAAWR;AAAA,IACf,CAACO,MAA2C;AAC1C,YAAMxB,IAASY,EAAe;AAG9B,MAAAZ,EAAO,eAAeA,EAAO,iBAAiBwB,CAAe,CAAC,GAG9DxB,EAAO,KAAK,MAAM;AAChB,cAAM0B,IAAUC,EAAuB3B,CAAM;AAC7C,QAAI0B,MAAYf,KACdb,EAAS4B,CAAO;AAAA,MAEpB,CAAC;AAAA,IACH;AAAA,IACA,CAACf,GAAMb,CAAQ;AAAA,EAAA;AAGjB,SAAO,EAAE,OAAAD,GAAoD,UAAA4B,EAAA;AAC/D;"}
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 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;"}
@@ -1 +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 { toWords } from \"@/utils/format\";\nimport { parseMessageSchema } from \"@/utils/schema\";\nimport { createValidator } from \"@/utils/validate\";\n\nimport { LexicalInput } from \"../inputs/LexicalInput\";\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":";;;;;;;AAmBO,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;"}
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;"}
@@ -1 +1 @@
1
- {"version":3,"file":"MessagesTree.js","sources":["../../../src/components/layout/MessagesTree.tsx"],"sourcesContent":["import type { Messages } from \"@/types\";\nimport { Collapsible } from \"@payloadcms/ui\";\nimport { get } from \"lodash-es\";\nimport { useCallback } from \"react\";\nimport { useFormState } from \"react-hook-form\";\n\nimport { useMessagesForm } from \"@/context/messages-form\";\nimport { cn } from \"@/utils/cn\";\nimport { toWords } from \"@/utils/format\";\n\nimport { LexicalInput } from \"../inputs/LexicalInput\";\nimport { MessageField } from \"./MessageField\";\n\ninterface MessagesTreeProps {\n path: string;\n nestingLevel: number;\n schema: Messages;\n className?: string;\n}\n\n// TODO fix sticky position on single locale form\n\nexport function MessagesTree({\n path,\n schema,\n nestingLevel = 0,\n className,\n}: MessagesTreeProps): React.ReactNode {\n const { control, locales } = useMessagesForm();\n const { errors } = useFormState({ control });\n\n const hasErrors = useCallback(\n (key: string) => {\n return locales.some(\n (locale) => get(errors, [locale, path, key].join(\".\")) !== undefined,\n );\n },\n [errors, locales, path],\n );\n\n return (\n <div className={cn(\"grid gap-6\", className)}>\n {Object.entries(schema).map(([key, value]) => (\n <div\n key={key}\n className=\"grid min-w-0\"\n style={\n {\n [\"--nesting-level\"]: nestingLevel,\n } as React.CSSProperties\n }\n >\n <Collapsible\n className=\"messages-tree-collapsible min-w-0\"\n header={\n <span\n className={cn(\"text-xl\", {\n \"text-error\": hasErrors(key),\n })}\n >\n {toWords(key)}\n </span>\n }\n >\n {typeof value === \"string\" ? (\n <MessageField\n className=\"min-w-0\"\n schema={value}\n key={key}\n messageKey={key}\n path={path}\n />\n ) : (\n <MessagesTree\n nestingLevel={nestingLevel + 1}\n path={[path, key].join(\".\")}\n schema={value}\n />\n )}\n </Collapsible>\n </div>\n ))}\n </div>\n );\n}\n"],"names":["MessagesTree","path","schema","nestingLevel","className","control","locales","useMessagesForm","errors","useFormState","hasErrors","useCallback","key","locale","get","cn","value","jsx","Collapsible","MessageField"],"mappings":";;;;;;;;;AAsBO,SAASA,EAAa;AAAA,EAC3B,MAAAC;AAAA,EACA,QAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,WAAAC;AACF,GAAuC;AACrC,QAAM,EAAE,SAAAC,GAAS,SAAAC,EAAA,IAAYC,EAAA,GACvB,EAAE,QAAAC,EAAA,IAAWC,EAAa,EAAE,SAAAJ,GAAS,GAErCK,IAAYC;AAAA,IAChB,CAACC,MACQN,EAAQ;AAAA,MACb,CAACO,MAAWC,EAAIN,GAAQ,CAACK,GAAQZ,GAAMW,CAAG,EAAE,KAAK,GAAG,CAAC,MAAM;AAAA,IAAA;AAAA,IAG/D,CAACJ,GAAQF,GAASL,CAAI;AAAA,EAAA;AAGxB,2BACG,OAAA,EAAI,WAAWc,EAAG,cAAcX,CAAS,GACvC,UAAA,OAAO,QAAQF,CAAM,EAAE,IAAI,CAAC,CAACU,GAAKI,CAAK,MACtC,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MAEC,WAAU;AAAA,MACV,OACE;AAAA,QACG,mBAAoBd;AAAA,MAAA;AAAA,MAIzB,UAAA,gBAAAc;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,QACE,gBAAAD;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWF,EAAG,WAAW;AAAA,gBACvB,cAAcL,EAAUE,CAAG;AAAA,cAAA,CAC5B;AAAA,cAEA,YAAQA,CAAG;AAAA,YAAA;AAAA,UAAA;AAAA,UAIf,UAAA,OAAOI,KAAU,WAChB,gBAAAC;AAAA,YAACE;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,QAAQH;AAAA,cAER,YAAYJ;AAAA,cACZ,MAAAX;AAAA,YAAA;AAAA,YAFKW;AAAA,UAAA,IAKP,gBAAAK;AAAA,YAACjB;AAAA,YAAA;AAAA,cACC,cAAcG,IAAe;AAAA,cAC7B,MAAM,CAACF,GAAMW,CAAG,EAAE,KAAK,GAAG;AAAA,cAC1B,QAAQI;AAAA,YAAA;AAAA,UAAA;AAAA,QACV;AAAA,MAAA;AAAA,IAEJ;AAAA,IAnCKJ;AAAA,EAAA,CAqCR,GACH;AAEJ;"}
1
+ {"version":3,"file":"MessagesTree.js","sources":["../../../src/components/layout/MessagesTree.tsx"],"sourcesContent":["import type { Messages } from \"@/types\";\nimport { Collapsible } from \"@payloadcms/ui\";\nimport { get } from \"lodash-es\";\nimport { useCallback } from \"react\";\nimport { useFormState } from \"react-hook-form\";\n\nimport { useMessagesForm } from \"@/context/messages-form\";\nimport { cn } from \"@/utils/cn\";\nimport { toWords } from \"@/utils/format\";\n\nimport { MessageField } from \"./MessageField\";\n\ninterface MessagesTreeProps {\n path: string;\n nestingLevel: number;\n schema: Messages;\n className?: string;\n}\n\n// TODO fix sticky position on single locale form\n\nexport function MessagesTree({\n path,\n schema,\n nestingLevel = 0,\n className,\n}: MessagesTreeProps): React.ReactNode {\n const { control, locales } = useMessagesForm();\n const { errors } = useFormState({ control });\n\n const hasErrors = useCallback(\n (key: string) => {\n return locales.some(\n (locale) => get(errors, [locale, path, key].join(\".\")) !== undefined,\n );\n },\n [errors, locales, path],\n );\n\n return (\n <div className={cn(\"grid gap-6\", className)}>\n {Object.entries(schema).map(([key, value]) => (\n <div\n key={key}\n className=\"grid min-w-0\"\n style={\n {\n [\"--nesting-level\"]: nestingLevel,\n } as React.CSSProperties\n }\n >\n <Collapsible\n className=\"messages-tree-collapsible min-w-0\"\n header={\n <span\n className={cn(\"text-xl\", {\n \"text-error\": hasErrors(key),\n })}\n >\n {toWords(key)}\n </span>\n }\n >\n {typeof value === \"string\" ? (\n <MessageField\n className=\"min-w-0\"\n schema={value}\n key={key}\n messageKey={key}\n path={path}\n />\n ) : (\n <MessagesTree\n nestingLevel={nestingLevel + 1}\n path={[path, key].join(\".\")}\n schema={value}\n />\n )}\n </Collapsible>\n </div>\n ))}\n </div>\n );\n}\n"],"names":["MessagesTree","path","schema","nestingLevel","className","control","locales","useMessagesForm","errors","useFormState","hasErrors","useCallback","key","locale","get","cn","value","jsx","Collapsible","MessageField"],"mappings":";;;;;;;;;AAqBO,SAASA,EAAa;AAAA,EAC3B,MAAAC;AAAA,EACA,QAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,WAAAC;AACF,GAAuC;AACrC,QAAM,EAAE,SAAAC,GAAS,SAAAC,EAAA,IAAYC,EAAA,GACvB,EAAE,QAAAC,EAAA,IAAWC,EAAa,EAAE,SAAAJ,GAAS,GAErCK,IAAYC;AAAA,IAChB,CAACC,MACQN,EAAQ;AAAA,MACb,CAACO,MAAWC,EAAIN,GAAQ,CAACK,GAAQZ,GAAMW,CAAG,EAAE,KAAK,GAAG,CAAC,MAAM;AAAA,IAAA;AAAA,IAG/D,CAACJ,GAAQF,GAASL,CAAI;AAAA,EAAA;AAGxB,2BACG,OAAA,EAAI,WAAWc,EAAG,cAAcX,CAAS,GACvC,UAAA,OAAO,QAAQF,CAAM,EAAE,IAAI,CAAC,CAACU,GAAKI,CAAK,MACtC,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MAEC,WAAU;AAAA,MACV,OACE;AAAA,QACG,mBAAoBd;AAAA,MAAA;AAAA,MAIzB,UAAA,gBAAAc;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,QACE,gBAAAD;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWF,EAAG,WAAW;AAAA,gBACvB,cAAcL,EAAUE,CAAG;AAAA,cAAA,CAC5B;AAAA,cAEA,YAAQA,CAAG;AAAA,YAAA;AAAA,UAAA;AAAA,UAIf,UAAA,OAAOI,KAAU,WAChB,gBAAAC;AAAA,YAACE;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,QAAQH;AAAA,cAER,YAAYJ;AAAA,cACZ,MAAAX;AAAA,YAAA;AAAA,YAFKW;AAAA,UAAA,IAKP,gBAAAK;AAAA,YAACjB;AAAA,YAAA;AAAA,cACC,cAAcG,IAAe;AAAA,cAC7B,MAAM,CAACF,GAAMW,CAAG,EAAE,KAAK,GAAG;AAAA,cAC1B,QAAQI;AAAA,YAAA;AAAA,UAAA;AAAA,QACV;AAAA,MAAA;AAAA,IAEJ;AAAA,IAnCKJ;AAAA,EAAA,CAqCR,GACH;AAEJ;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "payload-intl",
3
- "version": "0.2.2",
3
+ "version": "0.2.4",
4
4
  "description": "Payload Plugin for I18N using ICU Messages",
5
5
  "license": "MIT",
6
6
  "author": "Michael Zeltner",