payload-intl 1.1.2 → 1.2.0

package/dist/components/actions/JsonImport.module.css

@@ -0,0 +1,14 @@
+.submenu {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.icon {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.button {
+  margin-block: 0;
+}

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

@@ -1 +1 @@
-{"version":3,"file":"Move.d.ts","sourceRoot":"","sources":["../../../src/components/actions/Move.tsx"],"names":[],"mappings":"AAMA,wBAAgB,IAAI,4CA4BnB"}
+{"version":3,"file":"Move.d.ts","sourceRoot":"","sources":["../../../src/components/actions/Move.tsx"],"names":[],"mappings":"AAQA,wBAAgB,IAAI,4CA4BnB"}

package/dist/components/actions/Move.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from '@payloadcms/ui';
+import { IconBraces } from '@tabler/icons-react';
+import { get } from 'lodash-es';
+import { useMessagesForm } from '../../components/MessageFormContext';
+import styles from './Move.module.css';
+export function Move() {
+    const { getValues, setValue, locales } = useMessagesForm();
+    const handleMove = ()=>{
+        const sourcePath = prompt('Source path');
+        if (!sourcePath) {
+            return;
+        }
+        const targetPath = prompt('Target path');
+        if (!targetPath) {
+            return;
+        }
+        locales.forEach((locale)=>{
+            const sourceValue = get(getValues(), [
+                locale,
+                sourcePath
+            ].join('.'));
+            setValue([
+                locale,
+                targetPath
+            ].join('.'), sourceValue);
+        });
+    };
+    return /*#__PURE__*/ _jsx(Button, {
+        buttonStyle: "subtle",
+        className: styles.button,
+        icon: /*#__PURE__*/ _jsx(IconBraces, {
+            className: styles.icon
+        }),
+        iconPosition: "left",
+        onClick: handleMove,
+        children: "Copy"
+    });
+}
+
+//# sourceMappingURL=Move.js.map

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

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

package/dist/components/actions/Move.module.css

@@ -0,0 +1,8 @@
+.icon {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.button {
+  margin-block: 0;
+}

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

@@ -1,4 +1,4 @@
-import { FieldError } from 'react-hook-form';
+import type { FieldError } from 'react-hook-form';
 export interface InputWrapperProps {
     label?: string;
     error: FieldError | undefined;

package/dist/components/inputs/InputWrapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputWrapper.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/InputWrapper.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAIlD,MAAM,WAAW,iBAAiB;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,UAAU,GAAG,SAAS,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,KAAK,EACL,SAAS,EACT,QAAQ,GACT,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,2CAqB5C"}
+{"version":3,"file":"InputWrapper.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/InputWrapper.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAIlD,MAAM,WAAW,iBAAiB;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,UAAU,GAAG,SAAS,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,KAAK,EACL,SAAS,EACT,QAAQ,GACT,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,2CAkB5C"}

package/dist/components/inputs/InputWrapper.js

@@ -1,32 +1,34 @@
-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: l,
-  className: t,
-  children: i
-}) {
-  return /* @__PURE__ */ s("div", { className: o("flex h-full min-w-5 flex-col gap-1", t), children: [
-    /* @__PURE__ */ s(
-      "fieldset",
-      {
-        className: o(
-          "mx-0 flex-1 rounded-md focus-within:border-elevation-400",
-          {
-            "border-error bg-error": l
-          }
-        ),
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FieldLabel } from '@payloadcms/ui';
+import styles from './InputWrapper.module.css';
+export function InputWrapper({ label, error, className, children }) {
+    return /*#__PURE__*/ _jsxs("div", {
+        className: [
+            styles.wrapper,
+            className
+        ].filter(Boolean).join(' '),
         children: [
-          r && /* @__PURE__ */ e("legend", { className: "-ml-2 px-1.5 text-base", children: /* @__PURE__ */ e(m, { label: r }) }),
-          i
+            /*#__PURE__*/ _jsxs("fieldset", {
+                className: [
+                    styles.fieldset,
+                    error ? styles.fieldsetError : undefined
+                ].filter(Boolean).join(' '),
+                children: [
+                    label && /*#__PURE__*/ _jsx("legend", {
+                        className: styles.legend,
+                        children: /*#__PURE__*/ _jsx(FieldLabel, {
+                            label: label
+                        })
+                    }),
+                    children
+                ]
+            }),
+            /*#__PURE__*/ _jsx("p", {
+                className: styles.errorMessage,
+                children: error?.message
+            })
         ]
-      }
-    ),
-    /* @__PURE__ */ e("p", { className: "text-base text-error", children: l?.message })
-  ] });
+    });
 }
-export {
-  c as InputWrapper
-};
-//# sourceMappingURL=InputWrapper.js.map
+
+//# sourceMappingURL=InputWrapper.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"InputWrapper.js","sources":["../../../src/components/inputs/InputWrapper.tsx"],"sourcesContent":["import { FieldLabel } from '@payloadcms/ui';\nimport type { FieldError } from 'react-hook-form';\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 h-full min-w-5 flex-col gap-1', className)}>\n      <fieldset\n        className={cn(\n          'mx-0 flex-1 rounded-md focus-within:border-elevation-400',\n          {\n            'border-error bg-error': error,\n          },\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;AAAA,UACT;AAAA,UACA;AAAA,YACE,yBAAyBH;AAAA,UAAA;AAAA,QAC3B;AAAA,QAGD,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,"sources":["../../../src/components/inputs/InputWrapper.tsx"],"sourcesContent":["import { FieldLabel } from '@payloadcms/ui';\nimport type { FieldError } from 'react-hook-form';\n\nimport styles from './InputWrapper.module.css';\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={[styles.wrapper, className].filter(Boolean).join(' ')}>\n      <fieldset\n        className={[styles.fieldset, error ? styles.fieldsetError : undefined]\n          .filter(Boolean)\n          .join(' ')}\n      >\n        {label && (\n          <legend className={styles.legend}>\n            <FieldLabel label={label} />\n          </legend>\n        )}\n        {children}\n      </fieldset>\n      <p className={styles.errorMessage}>{error?.message}</p>\n    </div>\n  );\n}\n"],"names":["FieldLabel","styles","InputWrapper","label","error","className","children","div","wrapper","filter","Boolean","join","fieldset","fieldsetError","undefined","legend","p","errorMessage","message"],"mappings":";AAAA,SAASA,UAAU,QAAQ,iBAAiB;AAG5C,OAAOC,YAAY,4BAA4B;AAQ/C,OAAO,SAASC,aAAa,EAC3BC,KAAK,EACLC,KAAK,EACLC,SAAS,EACTC,QAAQ,EACmC;IAC3C,qBACE,MAACC;QAAIF,WAAW;YAACJ,OAAOO,OAAO;YAAEH;SAAU,CAACI,MAAM,CAACC,SAASC,IAAI,CAAC;;0BAC/D,MAACC;gBACCP,WAAW;oBAACJ,OAAOW,QAAQ;oBAAER,QAAQH,OAAOY,aAAa,GAAGC;iBAAU,CACnEL,MAAM,CAACC,SACPC,IAAI,CAAC;;oBAEPR,uBACC,KAACY;wBAAOV,WAAWJ,OAAOc,MAAM;kCAC9B,cAAA,KAACf;4BAAWG,OAAOA;;;oBAGtBG;;;0BAEH,KAACU;gBAAEX,WAAWJ,OAAOgB,YAAY;0BAAGb,OAAOc;;;;AAGjD"}

package/dist/components/inputs/InputWrapper.module.css

@@ -0,0 +1,34 @@
+.wrapper {
+  display: flex;
+  height: 100%;
+  min-width: 1.25rem;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.fieldset {
+  margin-inline: 0;
+  flex: 1;
+  border-radius: var(--style-radius-m);
+  overflow: visible;
+}
+
+.fieldset:focus-within {
+  border-color: var(--theme-elevation-400);
+}
+
+.fieldsetError {
+  border: 1px solid var(--theme-error-400);
+  background-color: var(--theme-error-100);
+}
+
+.legend {
+  margin-left: -0.5rem;
+  padding-inline: 0.375rem;
+  font-size: var(--font-size-base);
+}
+
+.errorMessage {
+  font-size: var(--font-size-base);
+  color: var(--theme-error-400);
+}

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

@@ -1,6 +1,6 @@
-import { DefaultNodeTypes, TypedEditorState } from '@payloadcms/richtext-lexical';
-import { SerializedEditorState } from '@payloadcms/richtext-lexical/lexical';
-import { InputWrapperProps } from './InputWrapper';
+import type { DefaultNodeTypes, TypedEditorState } from '@payloadcms/richtext-lexical';
+import type { SerializedEditorState } from '@payloadcms/richtext-lexical/lexical';
+import type { InputWrapperProps } from './InputWrapper';
 export interface LexicalInputProps extends InputWrapperProps {
     lang: string;
     value: string;

package/dist/components/inputs/LexicalInput.js

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/inputs/LexicalInput.tsx"],"sourcesContent":["import type {\n  DefaultNodeTypes,\n  TypedEditorState,\n} from '@payloadcms/richtext-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 type { SerializedEditorState } from '@payloadcms/richtext-lexical/lexical';\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 className={className} error={error} label={label}>\n      <RenderLexical\n        field={{\n          name: 'myCustomEditor',\n          label: false,\n          type: 'richText',\n        }}\n        schemaPath=\"global.intl-plugin.editorTemplate\"\n        setValue={(val) => editor.setValue(val as SerializedEditorState)}\n        value={editor.value}\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":["defaultEditorConfig","defaultEditorFeatures","buildDefaultEditorState","getEnabledNodes","RenderLexical","sanitizeClientEditorConfig","$getRoot","createHeadlessEditor","$generateHtmlFromNodes","$generateNodesFromDOM","useCallback","useMemo","useRef","InputWrapper","LexicalInput","error","label","value","onChange","className","editor","useHtmlLexicalAdapter","html","field","name","type","schemaPath","setValue","val","EMPTY_STATE","headlessEditor","nodes","editorConfig","getSerializedState","htmlString","current","update","parser","DOMParser","dom","parseFromString","root","clear","append","discrete","getEditorState","toJSON","serializedState","children","length","setEditorState","parseEditorState","read","newHtml"],"mappings":";AAIA,SACEA,mBAAmB,EACnBC,qBAAqB,QAChB,+BAA+B;AACtC,SACEC,uBAAuB,EACvBC,eAAe,EACfC,aAAa,EACbC,0BAA0B,QACrB,sCAAsC;AAE7C,SAASC,QAAQ,QAAQ,uCAAuC;AAChE,SAASC,oBAAoB,QAAQ,gDAAgD;AACrF,SACEC,sBAAsB,EACtBC,qBAAqB,QAChB,4CAA4C;AACnD,SAASC,WAAW,EAAEC,OAAO,EAAEC,MAAM,QAAQ,QAAQ;AAGrD,SAASC,YAAY,QAAQ,iBAAiB;AAS9C,OAAO,SAASC,aAAa,EAC3BC,KAAK,EACLC,KAAK,EACLC,KAAK,EACLC,QAAQ,EACRC,SAAS,EACS;IAClB,MAAMC,SAASC,sBAAsB;QACnCC,MAAML;QACNC;IACF;IAEA,qBACE,KAACL;QAAaM,WAAWA;QAAWJ,OAAOA;QAAOC,OAAOA;kBACvD,cAAA,KAACZ;YACCmB,OAAO;gBACLC,MAAM;gBACNR,OAAO;gBACPS,MAAM;YACR;YACAC,YAAW;YACXC,UAAU,CAACC,MAAQR,OAAOO,QAAQ,CAACC;YACnCX,OAAOG,OAAOH,KAAK;;;AAI3B;AAEA,MAAMY,cAAc3B,wBAAwB,CAAC;AAO7C,OAAO,SAASmB,sBAAsB,EACpCC,IAAI,EACJJ,QAAQ,EACmB;IAC3B,0DAA0D;IAC1D,MAAMY,iBAAiBlB,OACrBL,qBAAqB;QACnBwB,OAAO5B,gBAAgB;YACrB6B,cAAc3B,2BACZ,2BAA2B;YAC3BJ,uBACAD;QAEJ;IACF;IAGF,6BAA6B;IAC7B,MAAMiC,qBAAqBvB,YACzB,CAACwB;QACC,MAAMd,SAASU,eAAeK,OAAO;QACrCf,OAAOgB,MAAM,CACX;YACE,MAAMC,SAAS,IAAIC;YACnB,MAAMC,MAAMF,OAAOG,eAAe,CAACN,YAAY;YAC/C,MAAMH,QAAQtB,sBAAsBW,QAAQmB;YAE5C,MAAME,OAAOnC;YACbmC,KAAKC,KAAK,GAAGC,MAAM,IAAIZ;QACzB,GACA;YAAEa,UAAU;QAAK;QAGnB,OAAOxB,OAAOyB,cAAc,GAAGC,MAAM;IACvC,GACA,EAAE;IAGJ,iEAAiE;IACjE,MAAM7B,QAAQN,QAAQ;QACpB,MAAMoC,kBAAkBd,mBAAmBX;QAE3C,IAAIyB,gBAAgBN,IAAI,CAACO,QAAQ,CAACC,MAAM,KAAK,GAAG;YAC9C,OAAOpB;QACT;QAEA,OAAOkB;IACT,GAAG;QAACzB;QAAMW;KAAmB;IAE7B,6BAA6B;IAC7B,MAAMN,WAAWjB,YACf,CAACqC;QACC,MAAM3B,SAASU,eAAeK,OAAO;QAErC,qDAAqD;QACrDf,OAAO8B,cAAc,CAAC9B,OAAO+B,gBAAgB,CAACJ;QAE9C,gDAAgD;QAChD3B,OAAOgC,IAAI,CAAC;YACV,MAAMC,UAAU7C,uBAAuBY;YACvC,IAAIiC,YAAY/B,MAAM;gBACpBJ,SAASmC;YACX;QACF;IACF,GACA;QAAC/B;QAAMJ;KAAS;IAGlB,OAAO;QAAED,OAAOA;QAA6CU;IAAS;AACxE"}

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

@@ -1,5 +1,5 @@
-import { TemplateVariable } from '../../types';
-import { InputWrapperProps } from './InputWrapper';
+import type { TemplateVariable } from '../../types';
+import type { InputWrapperProps } from './InputWrapper';
 export interface MessageInputProps extends InputWrapperProps {
     value: string;
     lang: string;

package/dist/components/inputs/MessageInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageInput.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/MessageInput.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAIhD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAIxD,MAAM,WAAW,iBAAkB,SAAQ,iBAAiB;IAC1D,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,gBAAgB,EAAE,CAAC;IAC9B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAKD,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,KAAK,EACL,IAAI,EACJ,KAAK,EACL,SAAS,EACT,QAAQ,EACR,MAAM,EACN,SAAS,GACV,EAAE,iBAAiB,2CAkBnB"}
+{"version":3,"file":"MessageInput.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/MessageInput.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAShD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAMxD,MAAM,WAAW,iBAAkB,SAAQ,iBAAiB;IAC1D,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,gBAAgB,EAAE,CAAC;IAC9B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAsCD,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,KAAK,EACL,IAAI,EACJ,KAAK,EACL,SAAS,EACT,QAAQ,EACR,MAAM,EACN,SAAS,GACV,EAAE,iBAAiB,2CAiEnB"}

package/dist/components/inputs/MessageInput.js

@@ -1,38 +1,111 @@
-import { jsx as r } from "react/jsx-runtime";
-import d from "@tiptap/extension-document";
-import c from "@tiptap/extension-paragraph";
-import u from "@tiptap/extension-text";
-import { useEditor as l, EditorContent as x } from "@tiptap/react";
-import { parseIcuToProseMirrorJSON as g } from "../../utils/icu-tranform.js";
-import { InputWrapper as h } from "./InputWrapper.js";
-import { VariableMention as I } from "./variables/extension.js";
-function C({
-  label: o,
-  value: t,
-  lang: e,
-  error: i,
-  variables: m,
-  onChange: n,
-  onBlur: p,
-  className: a
-}) {
-  const s = l({
-    immediatelyRender: !1,
-    content: g(t),
-    extensions: [d, c, u, I(m)],
-    onUpdate: ({ editor: f }) => n(f.getText())
-  });
-  return /* @__PURE__ */ r(h, { className: a, error: i, label: o, children: /* @__PURE__ */ r(
-    x,
-    {
-      className: "tiptap-editor min-h-8",
-      editor: s,
-      lang: e,
-      onBlur: p
-    }
-  ) });
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { $getRoot } from '@payloadcms/richtext-lexical/lexical';
+import { LexicalComposer } from '@payloadcms/richtext-lexical/lexical/react/LexicalComposer';
+import { ContentEditable } from '@payloadcms/richtext-lexical/lexical/react/LexicalContentEditable';
+import { LexicalErrorBoundary } from '@payloadcms/richtext-lexical/lexical/react/LexicalErrorBoundary';
+import { HistoryPlugin } from '@payloadcms/richtext-lexical/lexical/react/LexicalHistoryPlugin';
+import { OnChangePlugin } from '@payloadcms/richtext-lexical/lexical/react/LexicalOnChangePlugin';
+import { PlainTextPlugin } from '@payloadcms/richtext-lexical/lexical/react/LexicalPlainTextPlugin';
+import { BeautifulMentionNode, BeautifulMentionsPlugin } from 'lexical-beautiful-mentions';
+import { forwardRef, useCallback, useMemo } from 'react';
+import { formatVariableLabel } from '../../utils/format';
+import { isTagElement } from '../../utils/guards';
+import { parseIcuToLexicalState, serializeICUMessage } from '../../utils/icu-tranform';
+import { InputWrapper } from './InputWrapper';
+import styles from './MessageInput.module.css';
+import { VariableMentionNode } from './variables/VariableNode';
+import suggestionStyles from './variables/VariableSuggestion.module.css';
+const MentionMenu = /*#__PURE__*/ forwardRef(({ loading: _, ...props }, ref)=>/*#__PURE__*/ _jsx("ul", {
+        ...props,
+        className: suggestionStyles.list,
+        ref: ref
+    }));
+const MentionMenuItem = /*#__PURE__*/ forwardRef((props, ref)=>/*#__PURE__*/ _jsx("li", {
+        "aria-selected": props.selected,
+        className: [
+            suggestionStyles.item,
+            props.selected ? suggestionStyles.itemSelected : undefined
+        ].filter(Boolean).join(' '),
+        onClick: props.onClick,
+        onKeyDown: props.onKeyDown,
+        onMouseDown: props.onMouseDown,
+        onMouseEnter: props.onMouseEnter,
+        ref: ref,
+        // biome-ignore lint/a11y/noNoninteractiveElementToInteractiveRole: standard WAI-ARIA listbox/option pattern
+        role: "option",
+        tabIndex: -1,
+        children: typeof props.item.data?.label === 'string' ? props.item.data.label : props.item.displayValue
+    }));
+// TODO add variable editor (style, options, etc)
+// TODO add tooltip to show all variables
+export function MessageInput({ label, value, lang, error, variables, onChange, onBlur, className }) {
+    const handleChange = useCallback((editorState)=>{
+        editorState.read(()=>{
+            onChange($getRoot().getTextContent());
+        });
+    }, [
+        onChange
+    ]);
+    const mentionItems = useMemo(()=>{
+        const toItem = (v)=>({
+                value: v.value,
+                label: formatVariableLabel(v),
+                icu: serializeICUMessage([
+                    v
+                ])
+            });
+        return {
+            '@': variables.map(toItem),
+            '{': variables.filter((v)=>!isTagElement(v)).map(toItem),
+            '<': variables.filter((v)=>isTagElement(v)).map(toItem)
+        };
+    }, [
+        variables
+    ]);
+    const initialConfig = {
+        namespace: 'ICUMessageEditor',
+        nodes: [
+            VariableMentionNode,
+            {
+                replace: BeautifulMentionNode,
+                with: (node)=>new VariableMentionNode(node.getTrigger(), node.getValue(), node.getData())
+            }
+        ],
+        editorState: JSON.stringify(parseIcuToLexicalState(value)),
+        onError: console.error
+    };
+    return /*#__PURE__*/ _jsx(InputWrapper, {
+        className: className,
+        error: error,
+        label: label,
+        children: /*#__PURE__*/ _jsx(LexicalComposer, {
+            initialConfig: initialConfig,
+            children: /*#__PURE__*/ _jsxs("div", {
+                className: styles.editor,
+                lang: lang,
+                onBlur: onBlur,
+                children: [
+                    /*#__PURE__*/ _jsx(PlainTextPlugin, {
+                        contentEditable: /*#__PURE__*/ _jsx(ContentEditable, {
+                            className: styles.contentEditable
+                        }),
+                        ErrorBoundary: LexicalErrorBoundary
+                    }),
+                    /*#__PURE__*/ _jsx(OnChangePlugin, {
+                        onChange: handleChange
+                    }),
+                    /*#__PURE__*/ _jsx(HistoryPlugin, {}),
+                    /*#__PURE__*/ _jsx(BeautifulMentionsPlugin, {
+                        items: mentionItems,
+                        menuAnchorClassName: styles.menuAnchor,
+                        menuComponent: MentionMenu,
+                        menuItemComponent: MentionMenuItem
+                    })
+                ]
+            })
+        })
+    });
 }
-export {
-  C as MessageInput
-};
-//# sourceMappingURL=MessageInput.js.map
+
+//# sourceMappingURL=MessageInput.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"MessageInput.js","sources":["../../../src/components/inputs/MessageInput.tsx"],"sourcesContent":["import Document from '@tiptap/extension-document';\nimport Paragraph from '@tiptap/extension-paragraph';\nimport Text from '@tiptap/extension-text';\nimport { EditorContent, useEditor } from '@tiptap/react';\nimport type { TemplateVariable } from '@/types';\n\nimport { parseIcuToProseMirrorJSON } from '@/utils/icu-tranform';\n\nimport type { InputWrapperProps } from './InputWrapper';\nimport { InputWrapper } from './InputWrapper';\nimport { VariableMention } from './variables/extension';\n\nexport interface MessageInputProps extends InputWrapperProps {\n  value: string;\n  lang: string;\n  variables: TemplateVariable[];\n  onChange: (value: string) => void;\n  onBlur: () => void;\n}\n\n// TODO add variable editor (style, options, etc)\n// TODO add tooltip to show all variables\n\nexport function MessageInput({\n  label,\n  value,\n  lang,\n  error,\n  variables,\n  onChange,\n  onBlur,\n  className,\n}: MessageInputProps) {\n  const editor = useEditor({\n    immediatelyRender: false,\n    content: parseIcuToProseMirrorJSON(value),\n    extensions: [Document, Paragraph, Text, VariableMention(variables)],\n    onUpdate: ({ editor }) => onChange(editor.getText()),\n  });\n\n  return (\n    <InputWrapper className={className} error={error} label={label}>\n      <EditorContent\n        className=\"tiptap-editor min-h-8\"\n        editor={editor}\n        lang={lang}\n        onBlur={onBlur}\n      />\n    </InputWrapper>\n  );\n}\n"],"names":["MessageInput","label","value","lang","error","variables","onChange","onBlur","className","editor","useEditor","parseIcuToProseMirrorJSON","Document","Paragraph","Text","VariableMention","jsx","InputWrapper","EditorContent"],"mappings":";;;;;;;;AAuBO,SAASA,EAAa;AAAA,EAC3B,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AACF,GAAsB;AACpB,QAAMC,IAASC,EAAU;AAAA,IACvB,mBAAmB;AAAA,IACnB,SAASC,EAA0BT,CAAK;AAAA,IACxC,YAAY,CAACU,GAAUC,GAAWC,GAAMC,EAAgBV,CAAS,CAAC;AAAA,IAClE,UAAU,CAAC,EAAE,QAAAI,QAAaH,EAASG,EAAO,QAAA,CAAS;AAAA,EAAA,CACpD;AAED,SACE,gBAAAO,EAACC,GAAA,EAAa,WAAAT,GAAsB,OAAAJ,GAAc,OAAAH,GAChD,UAAA,gBAAAe;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,QAAAT;AAAA,MACA,MAAAN;AAAA,MACA,QAAAI;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ;"}
+{"version":3,"sources":["../../../src/components/inputs/MessageInput.tsx"],"sourcesContent":["'use client';\n\nimport type { EditorState } from '@payloadcms/richtext-lexical/lexical';\nimport { $getRoot } from '@payloadcms/richtext-lexical/lexical';\nimport { LexicalComposer } from '@payloadcms/richtext-lexical/lexical/react/LexicalComposer';\nimport { ContentEditable } from '@payloadcms/richtext-lexical/lexical/react/LexicalContentEditable';\nimport { LexicalErrorBoundary } from '@payloadcms/richtext-lexical/lexical/react/LexicalErrorBoundary';\nimport { HistoryPlugin } from '@payloadcms/richtext-lexical/lexical/react/LexicalHistoryPlugin';\nimport { OnChangePlugin } from '@payloadcms/richtext-lexical/lexical/react/LexicalOnChangePlugin';\nimport { PlainTextPlugin } from '@payloadcms/richtext-lexical/lexical/react/LexicalPlainTextPlugin';\nimport {\n  BeautifulMentionNode,\n  type BeautifulMentionsMenuItemProps,\n  type BeautifulMentionsMenuProps,\n  BeautifulMentionsPlugin,\n} from 'lexical-beautiful-mentions';\nimport { forwardRef, useCallback, useMemo } from 'react';\nimport type { TemplateVariable } from '@/types';\n\nimport { formatVariableLabel } from '@/utils/format';\nimport { isTagElement } from '@/utils/guards';\nimport {\n  parseIcuToLexicalState,\n  serializeICUMessage,\n} from '@/utils/icu-tranform';\n\nimport type { InputWrapperProps } from './InputWrapper';\nimport { InputWrapper } from './InputWrapper';\nimport styles from './MessageInput.module.css';\nimport { VariableMentionNode } from './variables/VariableNode';\nimport suggestionStyles from './variables/VariableSuggestion.module.css';\n\nexport interface MessageInputProps extends InputWrapperProps {\n  value: string;\n  lang: string;\n  variables: TemplateVariable[];\n  onChange: (value: string) => void;\n  onBlur: () => void;\n}\n\nconst MentionMenu = forwardRef<HTMLUListElement, BeautifulMentionsMenuProps>(\n  ({ loading: _, ...props }, ref) => (\n    <ul {...props} className={suggestionStyles.list} ref={ref} />\n  ),\n);\n\nconst MentionMenuItem = forwardRef<\n  HTMLLIElement,\n  BeautifulMentionsMenuItemProps\n>((props, ref) => (\n  <li\n    aria-selected={props.selected}\n    className={[\n      suggestionStyles.item,\n      props.selected ? suggestionStyles.itemSelected : undefined,\n    ]\n      .filter(Boolean)\n      .join(' ')}\n    onClick={props.onClick}\n    onKeyDown={props.onKeyDown}\n    onMouseDown={props.onMouseDown}\n    onMouseEnter={props.onMouseEnter}\n    ref={ref}\n    // biome-ignore lint/a11y/noNoninteractiveElementToInteractiveRole: standard WAI-ARIA listbox/option pattern\n    role=\"option\"\n    tabIndex={-1}\n  >\n    {typeof props.item.data?.label === 'string'\n      ? props.item.data.label\n      : props.item.displayValue}\n  </li>\n));\n\n// TODO add variable editor (style, options, etc)\n// TODO add tooltip to show all variables\n\nexport function MessageInput({\n  label,\n  value,\n  lang,\n  error,\n  variables,\n  onChange,\n  onBlur,\n  className,\n}: MessageInputProps) {\n  const handleChange = useCallback(\n    (editorState: EditorState) => {\n      editorState.read(() => {\n        onChange($getRoot().getTextContent());\n      });\n    },\n    [onChange],\n  );\n\n  const mentionItems = useMemo(() => {\n    const toItem = (v: TemplateVariable) => ({\n      value: v.value,\n      label: formatVariableLabel(v),\n      icu: serializeICUMessage([v]),\n    });\n\n    return {\n      '@': variables.map(toItem),\n      '{': variables.filter((v) => !isTagElement(v)).map(toItem),\n      '<': variables.filter((v) => isTagElement(v)).map(toItem),\n    };\n  }, [variables]);\n\n  const initialConfig = {\n    namespace: 'ICUMessageEditor',\n    nodes: [\n      VariableMentionNode,\n      {\n        replace: BeautifulMentionNode,\n        with: (node: BeautifulMentionNode) =>\n          new VariableMentionNode(\n            node.getTrigger(),\n            node.getValue(),\n            node.getData(),\n          ),\n      },\n    ],\n    editorState: JSON.stringify(parseIcuToLexicalState(value)),\n    onError: console.error,\n  };\n\n  return (\n    <InputWrapper className={className} error={error} label={label}>\n      <LexicalComposer initialConfig={initialConfig}>\n        {/* biome-ignore lint/a11y/noStaticElementInteractions: onBlur captures focus-leave from the Lexical contentEditable */}\n        <div className={styles.editor} lang={lang} onBlur={onBlur}>\n          <PlainTextPlugin\n            contentEditable={\n              <ContentEditable className={styles.contentEditable} />\n            }\n            ErrorBoundary={LexicalErrorBoundary}\n          />\n          <OnChangePlugin onChange={handleChange} />\n          <HistoryPlugin />\n          <BeautifulMentionsPlugin\n            items={mentionItems}\n            menuAnchorClassName={styles.menuAnchor}\n            menuComponent={MentionMenu}\n            menuItemComponent={MentionMenuItem}\n          />\n        </div>\n      </LexicalComposer>\n    </InputWrapper>\n  );\n}\n"],"names":["$getRoot","LexicalComposer","ContentEditable","LexicalErrorBoundary","HistoryPlugin","OnChangePlugin","PlainTextPlugin","BeautifulMentionNode","BeautifulMentionsPlugin","forwardRef","useCallback","useMemo","formatVariableLabel","isTagElement","parseIcuToLexicalState","serializeICUMessage","InputWrapper","styles","VariableMentionNode","suggestionStyles","MentionMenu","loading","_","props","ref","ul","className","list","MentionMenuItem","li","aria-selected","selected","item","itemSelected","undefined","filter","Boolean","join","onClick","onKeyDown","onMouseDown","onMouseEnter","role","tabIndex","data","label","displayValue","MessageInput","value","lang","error","variables","onChange","onBlur","handleChange","editorState","read","getTextContent","mentionItems","toItem","v","icu","map","initialConfig","namespace","nodes","replace","with","node","getTrigger","getValue","getData","JSON","stringify","onError","console","div","editor","contentEditable","ErrorBoundary","items","menuAnchorClassName","menuAnchor","menuComponent","menuItemComponent"],"mappings":"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"}

package/dist/components/inputs/MessageInput.module.css

@@ -0,0 +1,25 @@
+.editor {
+  position: relative;
+  min-height: 2rem;
+  font-size: var(--font-size-large);
+}
+
+.menuAnchor {
+  z-index: 50;
+}
+
+.contentEditable {
+  outline: none;
+}
+
+.contentEditable:focus {
+  outline: none;
+}
+
+.contentEditable > :first-child {
+  margin-top: 0;
+}
+
+.contentEditable > :last-child {
+  margin-bottom: 0;
+}

package/dist/components/inputs/variables/VariableChip.d.ts

@@ -1,3 +1,9 @@
-import { ReactNodeViewProps } from '@tiptap/react';
-export declare function VariableChip({ node, updateAttributes, }: ReactNodeViewProps<HTMLElement>): import("react/jsx-runtime").JSX.Element;
+import type { NodeKey } from '@payloadcms/richtext-lexical/lexical';
+export interface VariableChipProps {
+    name: string;
+    label: string;
+    icu: string;
+    nodeKey: NodeKey;
+}
+export declare function VariableChip({ name, label, icu, nodeKey }: VariableChipProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=VariableChip.d.ts.map

package/dist/components/inputs/variables/VariableChip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VariableChip.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/variables/VariableChip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AA0BxD,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,gBAAgB,GACjB,EAAE,kBAAkB,CAAC,WAAW,CAAC,2CAiEjC"}
+{"version":3,"file":"VariableChip.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/variables/VariableChip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,sCAAsC,CAAC;AAwBpE,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,OAAO,CAAC;CAClB;AAID,wBAAgB,YAAY,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE,OAAO,EAAE,EAAE,iBAAiB,2CAkE5E"}