payload-intl 1.2.1 → 1.2.3

package/dist/components/hooks/useHtmlLexicalAdapter.js

@@ -0,0 +1,63 @@
+import { defaultEditorConfig, defaultEditorFeatures } from '@payloadcms/richtext-lexical';
+import { buildDefaultEditorState, getEnabledNodes, 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';
+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=useHtmlLexicalAdapter.js.map

package/dist/components/hooks/useHtmlLexicalAdapter.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/hooks/useHtmlLexicalAdapter.ts"],"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  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\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","sanitizeClientEditorConfig","$getRoot","createHeadlessEditor","$generateHtmlFromNodes","$generateNodesFromDOM","useCallback","useMemo","useRef","EMPTY_STATE","useHtmlLexicalAdapter","html","onChange","headlessEditor","nodes","editorConfig","getSerializedState","htmlString","editor","current","update","parser","DOMParser","dom","parseFromString","root","clear","append","discrete","getEditorState","toJSON","value","serializedState","children","length","setValue","setEditorState","parseEditorState","read","newHtml"],"mappings":"AAIA,SACEA,mBAAmB,EACnBC,qBAAqB,QAChB,+BAA+B;AACtC,SACEC,uBAAuB,EACvBC,eAAe,EACfC,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;AAErD,MAAMC,cAAcV,wBAAwB,CAAC;AAO7C,OAAO,SAASW,sBAAsB,EACpCC,IAAI,EACJC,QAAQ,EACmB;IAC3B,0DAA0D;IAC1D,MAAMC,iBAAiBL,OACrBL,qBAAqB;QACnBW,OAAOd,gBAAgB;YACrBe,cAAcd,2BACZ,2BAA2B;YAC3BH,uBACAD;QAEJ;IACF;IAGF,6BAA6B;IAC7B,MAAMmB,qBAAqBV,YACzB,CAACW;QACC,MAAMC,SAASL,eAAeM,OAAO;QACrCD,OAAOE,MAAM,CACX;YACE,MAAMC,SAAS,IAAIC;YACnB,MAAMC,MAAMF,OAAOG,eAAe,CAACP,YAAY;YAC/C,MAAMH,QAAQT,sBAAsBa,QAAQK;YAE5C,MAAME,OAAOvB;YACbuB,KAAKC,KAAK,GAAGC,MAAM,IAAIb;QACzB,GACA;YAAEc,UAAU;QAAK;QAGnB,OAAOV,OAAOW,cAAc,GAAGC,MAAM;IACvC,GACA,EAAE;IAGJ,iEAAiE;IACjE,MAAMC,QAAQxB,QAAQ;QACpB,MAAMyB,kBAAkBhB,mBAAmBL;QAE3C,IAAIqB,gBAAgBP,IAAI,CAACQ,QAAQ,CAACC,MAAM,KAAK,GAAG;YAC9C,OAAOzB;QACT;QAEA,OAAOuB;IACT,GAAG;QAACrB;QAAMK;KAAmB;IAE7B,6BAA6B;IAC7B,MAAMmB,WAAW7B,YACf,CAAC0B;QACC,MAAMd,SAASL,eAAeM,OAAO;QAErC,qDAAqD;QACrDD,OAAOkB,cAAc,CAAClB,OAAOmB,gBAAgB,CAACL;QAE9C,gDAAgD;QAChDd,OAAOoB,IAAI,CAAC;YACV,MAAMC,UAAUnC,uBAAuBc;YACvC,IAAIqB,YAAY5B,MAAM;gBACpBC,SAAS2B;YACX;QACF;IACF,GACA;QAAC5B;QAAMC;KAAS;IAGlB,OAAO;QAAEmB,OAAOA;QAA6CI;IAAS;AACxE"}

package/dist/components/hooks/useMessagesFormSubmit.d.ts

@@ -0,0 +1,11 @@
+import type { UseFormReturn } from 'react-hook-form';
+import type { FormValues } from '../../components/MessagesFormProvider';
+import type { DeepPartial, Messages, Translations } from '../../types';
+interface UseMessagesFormSubmitOptions {
+    endpointUrl: string;
+    defaultValues: Translations<DeepPartial<Messages>>;
+    form: UseFormReturn<FormValues>;
+}
+export declare function useMessagesFormSubmit({ endpointUrl, defaultValues, form, }: UseMessagesFormSubmitOptions): (currentValues: FormValues) => Promise<void>;
+export {};
+//# sourceMappingURL=useMessagesFormSubmit.d.ts.map

package/dist/components/hooks/useMessagesFormSubmit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMessagesFormSubmit.d.ts","sourceRoot":"","sources":["../../../src/components/hooks/useMessagesFormSubmit.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AACpE,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAGnE,UAAU,4BAA4B;IACpC,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,YAAY,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC;IACnD,IAAI,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;CACjC;AAED,wBAAgB,qBAAqB,CAAC,EACpC,WAAW,EACX,aAAa,EACb,IAAI,GACL,EAAE,4BAA4B,mBAGc,UAAU,mBAyCtD"}

package/dist/components/hooks/useMessagesFormSubmit.js

@@ -0,0 +1,44 @@
+import { toast, useDocumentEvents } from '@payloadcms/ui';
+import { isEqual } from 'lodash-es';
+import { getErrorMessage } from '../../utils/error-handling';
+export function useMessagesFormSubmit({ endpointUrl, defaultValues, form }) {
+    const { reportUpdate } = useDocumentEvents();
+    const handleSubmit = async (currentValues)=>{
+        const toastId = toast.loading('Saving...');
+        const changes = Object.entries(currentValues).reduce((acc, [locale, value])=>{
+            const hasChanged = !isEqual(value, defaultValues[locale]);
+            if (!hasChanged) return acc;
+            acc[locale] = value;
+            return acc;
+        }, {});
+        try {
+            const response = await fetch(endpointUrl, {
+                method: 'PUT',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(changes)
+            });
+            if (!response.ok) {
+                const error = await getErrorMessage(response);
+                throw new Error(error);
+            }
+            form.reset(currentValues);
+            reportUpdate({
+                entitySlug: 'messages',
+                operation: 'update',
+                updatedAt: new Date().toISOString()
+            });
+            toast.success('Saved', {
+                id: toastId
+            });
+        } catch (error) {
+            toast.error(`Failed to save: ${error instanceof Error ? error.message : 'Unknown error'}`, {
+                id: toastId
+            });
+        }
+    };
+    return handleSubmit;
+}
+
+//# sourceMappingURL=useMessagesFormSubmit.js.map

package/dist/components/hooks/useMessagesFormSubmit.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/hooks/useMessagesFormSubmit.ts"],"sourcesContent":["import { toast, useDocumentEvents } from '@payloadcms/ui';\nimport { isEqual } from 'lodash-es';\nimport type { UseFormReturn } from 'react-hook-form';\nimport type { FormValues } from '@/components/MessagesFormProvider';\nimport type { DeepPartial, Messages, Translations } from '@/types';\nimport { getErrorMessage } from '@/utils/error-handling';\n\ninterface UseMessagesFormSubmitOptions {\n  endpointUrl: string;\n  defaultValues: Translations<DeepPartial<Messages>>;\n  form: UseFormReturn<FormValues>;\n}\n\nexport function useMessagesFormSubmit({\n  endpointUrl,\n  defaultValues,\n  form,\n}: UseMessagesFormSubmitOptions) {\n  const { reportUpdate } = useDocumentEvents();\n\n  const handleSubmit = async (currentValues: FormValues) => {\n    const toastId = toast.loading('Saving...');\n    const changes = Object.entries(currentValues).reduce<\n      Translations<Messages>\n    >((acc, [locale, value]) => {\n      const hasChanged = !isEqual(value, defaultValues[locale]);\n      if (!hasChanged) return acc;\n      acc[locale] = value;\n      return acc;\n    }, {});\n\n    try {\n      const response = await fetch(endpointUrl, {\n        method: 'PUT',\n        headers: {\n          'Content-Type': 'application/json',\n        },\n        body: JSON.stringify(changes),\n      });\n\n      if (!response.ok) {\n        const error = await getErrorMessage(response);\n        throw new Error(error);\n      }\n\n      form.reset(currentValues);\n      reportUpdate({\n        entitySlug: 'messages',\n        operation: 'update',\n        updatedAt: new Date().toISOString(),\n      });\n      toast.success('Saved', { id: toastId });\n    } catch (error) {\n      toast.error(\n        `Failed to save: ${error instanceof Error ? error.message : 'Unknown error'}`,\n        { id: toastId },\n      );\n    }\n  };\n\n  return handleSubmit;\n}\n"],"names":["toast","useDocumentEvents","isEqual","getErrorMessage","useMessagesFormSubmit","endpointUrl","defaultValues","form","reportUpdate","handleSubmit","currentValues","toastId","loading","changes","Object","entries","reduce","acc","locale","value","hasChanged","response","fetch","method","headers","body","JSON","stringify","ok","error","Error","reset","entitySlug","operation","updatedAt","Date","toISOString","success","id","message"],"mappings":"AAAA,SAASA,KAAK,EAAEC,iBAAiB,QAAQ,iBAAiB;AAC1D,SAASC,OAAO,QAAQ,YAAY;AAIpC,SAASC,eAAe,QAAQ,yBAAyB;AAQzD,OAAO,SAASC,sBAAsB,EACpCC,WAAW,EACXC,aAAa,EACbC,IAAI,EACyB;IAC7B,MAAM,EAAEC,YAAY,EAAE,GAAGP;IAEzB,MAAMQ,eAAe,OAAOC;QAC1B,MAAMC,UAAUX,MAAMY,OAAO,CAAC;QAC9B,MAAMC,UAAUC,OAAOC,OAAO,CAACL,eAAeM,MAAM,CAElD,CAACC,KAAK,CAACC,QAAQC,MAAM;YACrB,MAAMC,aAAa,CAAClB,QAAQiB,OAAOb,aAAa,CAACY,OAAO;YACxD,IAAI,CAACE,YAAY,OAAOH;YACxBA,GAAG,CAACC,OAAO,GAAGC;YACd,OAAOF;QACT,GAAG,CAAC;QAEJ,IAAI;YACF,MAAMI,WAAW,MAAMC,MAAMjB,aAAa;gBACxCkB,QAAQ;gBACRC,SAAS;oBACP,gBAAgB;gBAClB;gBACAC,MAAMC,KAAKC,SAAS,CAACd;YACvB;YAEA,IAAI,CAACQ,SAASO,EAAE,EAAE;gBAChB,MAAMC,QAAQ,MAAM1B,gBAAgBkB;gBACpC,MAAM,IAAIS,MAAMD;YAClB;YAEAtB,KAAKwB,KAAK,CAACrB;YACXF,aAAa;gBACXwB,YAAY;gBACZC,WAAW;gBACXC,WAAW,IAAIC,OAAOC,WAAW;YACnC;YACApC,MAAMqC,OAAO,CAAC,SAAS;gBAAEC,IAAI3B;YAAQ;QACvC,EAAE,OAAOkB,OAAO;YACd7B,MAAM6B,KAAK,CACT,CAAC,gBAAgB,EAAEA,iBAAiBC,QAAQD,MAAMU,OAAO,GAAG,iBAAiB,EAC7E;gBAAED,IAAI3B;YAAQ;QAElB;IACF;IAEA,OAAOF;AACT"}

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

@@ -0,0 +1,9 @@
+import type { FieldError } from 'react-hook-form';
+export interface FieldWrapperProps {
+    label?: string;
+    error: FieldError | undefined;
+    className?: string;
+    reference?: string;
+}
+export declare function FieldWrapper({ label, error, reference, className, children, }: React.PropsWithChildren<FieldWrapperProps>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=FieldWrapper.d.ts.map

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

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

package/dist/components/inputs/FieldWrapper.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import styles from './FieldWrapper.module.css';
+import { ReferencePopover } from './ReferencePopover';
+export function FieldWrapper({ label, error, reference, className, children }) {
+    return /*#__PURE__*/ _jsxs("div", {
+        className: clsx(styles.wrapper, className),
+        children: [
+            /*#__PURE__*/ _jsx(ReferencePopover, {
+                reference: reference,
+                children: /*#__PURE__*/ _jsx("fieldset", {
+                    className: clsx(styles.fieldset, error && styles.fieldsetError),
+                    children: children
+                })
+            }),
+            error?.message && /*#__PURE__*/ _jsx("p", {
+                className: styles.errorMessage,
+                children: error.message
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=FieldWrapper.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/inputs/FieldWrapper.tsx"],"sourcesContent":["import { FieldLabel } from '@payloadcms/ui';\nimport clsx from 'clsx';\nimport type { FieldError } from 'react-hook-form';\n\nimport styles from './FieldWrapper.module.css';\nimport { ReferencePopover } from './ReferencePopover';\n\nexport interface FieldWrapperProps {\n  label?: string;\n  error: FieldError | undefined;\n  className?: string;\n  reference?: string;\n}\n\nexport function FieldWrapper({\n  label,\n  error,\n  reference,\n  className,\n  children,\n}: React.PropsWithChildren<FieldWrapperProps>) {\n  return (\n    <div className={clsx(styles.wrapper, className)}>\n      <ReferencePopover reference={reference}>\n        <fieldset\n          className={clsx(styles.fieldset, error && styles.fieldsetError)}\n        >\n          {children}\n        </fieldset>\n      </ReferencePopover>\n      {error?.message && <p className={styles.errorMessage}>{error.message}</p>}\n    </div>\n  );\n}\n"],"names":["clsx","styles","ReferencePopover","FieldWrapper","label","error","reference","className","children","div","wrapper","fieldset","fieldsetError","message","p","errorMessage"],"mappings":";AACA,OAAOA,UAAU,OAAO;AAGxB,OAAOC,YAAY,4BAA4B;AAC/C,SAASC,gBAAgB,QAAQ,qBAAqB;AAStD,OAAO,SAASC,aAAa,EAC3BC,KAAK,EACLC,KAAK,EACLC,SAAS,EACTC,SAAS,EACTC,QAAQ,EACmC;IAC3C,qBACE,MAACC;QAAIF,WAAWP,KAAKC,OAAOS,OAAO,EAAEH;;0BACnC,KAACL;gBAAiBI,WAAWA;0BAC3B,cAAA,KAACK;oBACCJ,WAAWP,KAAKC,OAAOU,QAAQ,EAAEN,SAASJ,OAAOW,aAAa;8BAE7DJ;;;YAGJH,OAAOQ,yBAAW,KAACC;gBAAEP,WAAWN,OAAOc,YAAY;0BAAGV,MAAMQ,OAAO;;;;AAG1E"}

package/dist/components/inputs/{InputWrapper.module.css → FieldWrapper.module.css}

@@ -8,22 +8,12 @@
 
 .fieldset {
   margin-inline: 0;
+  padding: 0;
+  border: none;
   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);
 }

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

@@ -1,20 +1,9 @@
-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 {
+import type { FieldWrapperProps } from './FieldWrapper';
+export interface LexicalInputProps extends FieldWrapperProps {
     lang: string;
     value: string;
     onChange: (value: string) => void;
     onBlur: () => void;
 }
 export declare function LexicalInput({ error, label, value, onChange, className, }: LexicalInputProps): React.ReactNode;
-interface UseHtmlLexicalAdapterProps {
-    html: string;
-    onChange: (html: string) => void;
-}
-export declare function useHtmlLexicalAdapter({ html, onChange, }: UseHtmlLexicalAdapterProps): {
-    value: TypedEditorState<DefaultNodeTypes>;
-    setValue: (serializedState: SerializedEditorState) => void;
-};
-export {};
 //# sourceMappingURL=LexicalInput.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"LexicalInput.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/LexicalInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,gBAAgB,EAChB,gBAAgB,EACjB,MAAM,8BAA8B,CAAC;AAWtC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AASlF,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAGxD,MAAM,WAAW,iBAAkB,SAAQ,iBAAiB;IAC1D,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,KAAK,EACL,KAAK,EACL,QAAQ,EACR,SAAS,GACV,EAAE,iBAAiB,GAAG,KAAK,CAAC,SAAS,CAoBrC;AAID,UAAU,0BAA0B;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC;AAED,wBAAgB,qBAAqB,CAAC,EACpC,IAAI,EACJ,QAAQ,GACT,EAAE,0BAA0B;WAiEF,gBAAgB,CAAC,gBAAgB,CAAC;gCAjBvC,qBAAqB;EAkB1C"}
+{"version":3,"file":"LexicalInput.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/LexicalInput.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAGxD,MAAM,WAAW,iBAAkB,SAAQ,iBAAiB;IAC1D,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,KAAK,EACL,KAAK,EACL,QAAQ,EACR,SAAS,GACV,EAAE,iBAAiB,GAAG,KAAK,CAAC,SAAS,CAoBrC"}

package/dist/components/inputs/LexicalInput.js

@@ -1,17 +1,13 @@
 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';
+import { RenderLexical } from '@payloadcms/richtext-lexical/client';
+import { useHtmlLexicalAdapter } from '../hooks/useHtmlLexicalAdapter';
+import { FieldWrapper } from './FieldWrapper';
 export function LexicalInput({ error, label, value, onChange, className }) {
     const editor = useHtmlLexicalAdapter({
         html: value,
         onChange
     });
-    return /*#__PURE__*/ _jsx(InputWrapper, {
+    return /*#__PURE__*/ _jsx(FieldWrapper, {
         className: className,
         error: error,
         label: label,
@@ -27,60 +23,5 @@ export function LexicalInput({ error, label, value, onChange, className }) {
         })
     });
 }
-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

@@ -1 +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"}
+{"version":3,"sources":["../../../src/components/inputs/LexicalInput.tsx"],"sourcesContent":["import { RenderLexical } from '@payloadcms/richtext-lexical/client';\nimport type { SerializedEditorState } from '@payloadcms/richtext-lexical/lexical';\nimport { useHtmlLexicalAdapter } from '../hooks/useHtmlLexicalAdapter';\nimport type { FieldWrapperProps } from './FieldWrapper';\nimport { FieldWrapper } from './FieldWrapper';\n\nexport interface LexicalInputProps extends FieldWrapperProps {\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    <FieldWrapper 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    </FieldWrapper>\n  );\n}\n"],"names":["RenderLexical","useHtmlLexicalAdapter","FieldWrapper","LexicalInput","error","label","value","onChange","className","editor","html","field","name","type","schemaPath","setValue","val"],"mappings":";AAAA,SAASA,aAAa,QAAQ,sCAAsC;AAEpE,SAASC,qBAAqB,QAAQ,iCAAiC;AAEvE,SAASC,YAAY,QAAQ,iBAAiB;AAS9C,OAAO,SAASC,aAAa,EAC3BC,KAAK,EACLC,KAAK,EACLC,KAAK,EACLC,QAAQ,EACRC,SAAS,EACS;IAClB,MAAMC,SAASR,sBAAsB;QACnCS,MAAMJ;QACNC;IACF;IAEA,qBACE,KAACL;QAAaM,WAAWA;QAAWJ,OAAOA;QAAOC,OAAOA;kBACvD,cAAA,KAACL;YACCW,OAAO;gBACLC,MAAM;gBACNP,OAAO;gBACPQ,MAAM;YACR;YACAC,YAAW;YACXC,UAAU,CAACC,MAAQP,OAAOM,QAAQ,CAACC;YACnCV,OAAOG,OAAOH,KAAK;;;AAI3B"}

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

@@ -1,11 +1,14 @@
 import type { TemplateVariable } from '../../types';
-import type { InputWrapperProps } from './InputWrapper';
-export interface MessageInputProps extends InputWrapperProps {
+import type { FieldWrapperProps } from './FieldWrapper';
+export interface MessageInputProps extends FieldWrapperProps {
     value: string;
     lang: string;
     variables: TemplateVariable[];
     onChange: (value: string) => void;
     onBlur: () => void;
+    readOnly?: boolean;
+    multiline?: boolean;
+    reference?: string;
 }
-export declare function MessageInput({ label, value, lang, error, variables, onChange, onBlur, className, }: MessageInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function MessageInput({ label, value, lang, error, variables, onChange, onBlur, className, multiline, reference, }: MessageInputProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=MessageInput.d.ts.map

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":"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"}
+{"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;AA2BxD,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;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,KAAK,EACL,IAAI,EACJ,KAAK,EACL,SAAS,EACT,QAAQ,EACR,MAAM,EACN,SAAS,EACT,SAAS,EACT,SAAS,GACV,EAAE,iBAAiB,2CAuFnB"}

package/dist/components/inputs/MessageInput.js

@@ -2,44 +2,40 @@
 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 { useLexicalComposerContext } from '@payloadcms/richtext-lexical/lexical/react/LexicalComposerContext';
 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 clsx from 'clsx';
 import { BeautifulMentionNode, BeautifulMentionsPlugin } from 'lexical-beautiful-mentions';
-import { forwardRef, useCallback, useMemo } from 'react';
+import { useCallback, useEffect, 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 { FieldWrapper } from './FieldWrapper';
 import styles from './MessageInput.module.css';
+import { SingleLinePlugin } from './SingleLinePlugin';
 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 }) {
+import { MentionMenu, MentionMenuItem } from './variables/VariableSuggestion';
+function SyncValuePlugin({ value }) {
+    const [editor] = useLexicalComposerContext();
+    useEffect(()=>{
+        const currentText = editor.getEditorState().read(()=>$getRoot().getTextContent());
+        if (value !== currentText) {
+            queueMicrotask(()=>{
+                const newState = editor.parseEditorState(JSON.stringify(parseIcuToLexicalState(value)));
+                editor.setEditorState(newState);
+            });
+        }
+    }, [
+        value,
+        editor
+    ]);
+    return null;
+}
+export function MessageInput({ label, value, lang, error, variables, onChange, onBlur, className, multiline, reference }) {
     const handleChange = useCallback((editorState)=>{
         editorState.read(()=>{
             onChange($getRoot().getTextContent());
@@ -63,35 +59,43 @@ export function MessageInput({ label, value, lang, error, variables, onChange, o
     }, [
         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, {
+    // biome-ignore lint/correctness/useExhaustiveDependencies: LexicalComposer only reads initialConfig on mount
+    const initialConfig = useMemo(()=>({
+            namespace: 'ICUMessageEditor',
+            nodes: [
+                VariableMentionNode,
+                {
+                    replace: BeautifulMentionNode,
+                    with: (node)=>new VariableMentionNode(node.getTrigger(), node.getValue(), node.getData()),
+                    withKlass: VariableMentionNode
+                }
+            ],
+            editorState: JSON.stringify(parseIcuToLexicalState(value)),
+            editable: true,
+            onError: console.error
+        }), []);
+    return /*#__PURE__*/ _jsx(FieldWrapper, {
         className: className,
         error: error,
         label: label,
+        reference: reference,
         children: /*#__PURE__*/ _jsx(LexicalComposer, {
             initialConfig: initialConfig,
             children: /*#__PURE__*/ _jsxs("div", {
-                className: styles.editor,
+                className: clsx(styles.editor, multiline && styles.multiline),
                 lang: lang,
-                onBlur: onBlur,
                 children: [
                     /*#__PURE__*/ _jsx(PlainTextPlugin, {
                         contentEditable: /*#__PURE__*/ _jsx(ContentEditable, {
-                            className: styles.contentEditable
+                            className: clsx(styles.contentEditable, error && styles.contentEditableError),
+                            onBlur: onBlur
                         }),
                         ErrorBoundary: LexicalErrorBoundary
                     }),
+                    multiline && /*#__PURE__*/ _jsx(SingleLinePlugin, {}),
+                    /*#__PURE__*/ _jsx(SyncValuePlugin, {
+                        value: value
+                    }),
                     /*#__PURE__*/ _jsx(OnChangePlugin, {
                         onChange: handleChange
                     }),

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

@@ -1 +1 @@
-{"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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"}
+{"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 { useLexicalComposerContext } from '@payloadcms/richtext-lexical/lexical/react/LexicalComposerContext';\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 clsx from 'clsx';\nimport {\n  BeautifulMentionNode,\n  BeautifulMentionsPlugin,\n} from 'lexical-beautiful-mentions';\nimport { useCallback, useEffect, 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 { FieldWrapperProps } from './FieldWrapper';\nimport { FieldWrapper } from './FieldWrapper';\nimport styles from './MessageInput.module.css';\nimport { SingleLinePlugin } from './SingleLinePlugin';\nimport { VariableMentionNode } from './variables/VariableNode';\nimport { MentionMenu, MentionMenuItem } from './variables/VariableSuggestion';\n\nfunction SyncValuePlugin({ value }: { value: string }) {\n  const [editor] = useLexicalComposerContext();\n\n  useEffect(() => {\n    const currentText = editor\n      .getEditorState()\n      .read(() => $getRoot().getTextContent());\n    if (value !== currentText) {\n      queueMicrotask(() => {\n        const newState = editor.parseEditorState(\n          JSON.stringify(parseIcuToLexicalState(value)),\n        );\n        editor.setEditorState(newState);\n      });\n    }\n  }, [value, editor]);\n\n  return null;\n}\n\nexport interface MessageInputProps extends FieldWrapperProps {\n  value: string;\n  lang: string;\n  variables: TemplateVariable[];\n  onChange: (value: string) => void;\n  onBlur: () => void;\n  readOnly?: boolean;\n  multiline?: boolean;\n  reference?: string;\n}\n\nexport function MessageInput({\n  label,\n  value,\n  lang,\n  error,\n  variables,\n  onChange,\n  onBlur,\n  className,\n  multiline,\n  reference,\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  // biome-ignore lint/correctness/useExhaustiveDependencies: LexicalComposer only reads initialConfig on mount\n  const initialConfig = useMemo(\n    () => ({\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          withKlass: VariableMentionNode,\n        },\n      ],\n      editorState: JSON.stringify(parseIcuToLexicalState(value)),\n      editable: true,\n      onError: console.error,\n    }),\n    [],\n  );\n\n  return (\n    <FieldWrapper\n      className={className}\n      error={error}\n      label={label}\n      reference={reference}\n    >\n      <LexicalComposer initialConfig={initialConfig}>\n        <div\n          className={clsx(styles.editor, multiline && styles.multiline)}\n          lang={lang}\n        >\n          <PlainTextPlugin\n            contentEditable={\n              <ContentEditable\n                className={clsx(\n                  styles.contentEditable,\n                  error && styles.contentEditableError,\n                )}\n                onBlur={onBlur}\n              />\n            }\n            ErrorBoundary={LexicalErrorBoundary}\n          />\n          {multiline && <SingleLinePlugin />}\n          <SyncValuePlugin value={value} />\n          <OnChangePlugin onChange={handleChange} />\n          <HistoryPlugin />\n\n          <BeautifulMentionsPlugin\n            items={mentionItems}\n            menuAnchorClassName={styles.menuAnchor}\n            menuComponent={MentionMenu}\n            menuItemComponent={MentionMenuItem}\n          />\n        </div>\n      </LexicalComposer>\n    </FieldWrapper>\n  );\n}\n"],"names":["$getRoot","LexicalComposer","useLexicalComposerContext","ContentEditable","LexicalErrorBoundary","HistoryPlugin","OnChangePlugin","PlainTextPlugin","clsx","BeautifulMentionNode","BeautifulMentionsPlugin","useCallback","useEffect","useMemo","formatVariableLabel","isTagElement","parseIcuToLexicalState","serializeICUMessage","FieldWrapper","styles","SingleLinePlugin","VariableMentionNode","MentionMenu","MentionMenuItem","SyncValuePlugin","value","editor","currentText","getEditorState","read","getTextContent","queueMicrotask","newState","parseEditorState","JSON","stringify","setEditorState","MessageInput","label","lang","error","variables","onChange","onBlur","className","multiline","reference","handleChange","editorState","mentionItems","toItem","v","icu","map","filter","initialConfig","namespace","nodes","replace","with","node","getTrigger","getValue","getData","withKlass","editable","onError","console","div","contentEditable","contentEditableError","ErrorBoundary","items","menuAnchorClassName","menuAnchor","menuComponent","menuItemComponent"],"mappings":"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"}

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

@@ -1,25 +1,44 @@
 .editor {
   position: relative;
+  display: grid;
+  align-items: center;
   min-height: 2rem;
   font-size: var(--font-size-large);
 }
 
+.readOnly {
+  opacity: 0.7;
+  cursor: default;
+}
+
+.multiline {
+  min-height: 4rem;
+}
+
 .menuAnchor {
   z-index: 50;
 }
 
 .contentEditable {
   outline: none;
+  border-radius: var(--style-radius-m);
+  background-color: var(--theme-elevation-0);
+  border: 1px solid var(--theme-elevation-300);
+  padding-block: 0.25rem;
+  padding-inline: 0.75rem;
+  height: 100%;
 }
 
 .contentEditable:focus {
   outline: none;
+  border-color: var(--theme-elevation-600);
 }
 
-.contentEditable > :first-child {
-  margin-top: 0;
+.contentEditableError {
+  border-color: var(--theme-error-400);
+  background-color: var(--theme-error-100);
 }
 
-.contentEditable > :last-child {
-  margin-bottom: 0;
+.contentEditable p {
+  margin: 0;
 }