@payloadcms/richtext-lexical 3.68.0-internal-debug.e9b66ee → 3.68.0-internal.10bf491

package/dist/field/Diff/index.js

@@ -1,6 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { FieldDiffContainer, getHTMLDiffComponents } from '@payloadcms/ui/rsc';
-import './index.scss';
 import '../bundled.css';
+import React from 'react';
 import { convertLexicalToHTMLAsync } from '../../features/converters/lexicalToHtml/async/index.js';
 import { getPayloadPopulateFn } from '../../features/converters/utilities/payloadPopulateFn.js';
 import { LinkDiffHTMLConverterAsync } from './converters/link.js';
@@ -9,51 +10,70 @@ import { RelationshipDiffHTMLConverterAsync } from './converters/relationship/in
 import { UnknownDiffHTMLConverterAsync } from './converters/unknown/index.js';
 import { UploadDiffHTMLConverterAsync } from './converters/upload/index.js';
 const baseClass = 'lexical-diff';
-export const LexicalDiffComponent = async (args)=>{
-    const { comparisonValue: valueFrom, field, i18n, locale, nestingLevel, req, versionValue: valueTo } = args;
-    const converters = ({ defaultConverters })=>({
-            ...defaultConverters,
-            ...LinkDiffHTMLConverterAsync({}),
-            ...ListItemDiffHTMLConverterAsync,
-            ...UploadDiffHTMLConverterAsync({
-                i18n,
-                req
-            }),
-            ...RelationshipDiffHTMLConverterAsync({
-                i18n,
-                req
-            }),
-            ...UnknownDiffHTMLConverterAsync({
-                i18n,
-                req
-            })
-        });
-    const payloadPopulateFn = await getPayloadPopulateFn({
-        currentDepth: 0,
-        depth: 1,
-        req
-    });
-    const fromHTML = await convertLexicalToHTMLAsync({
-        converters,
-        data: valueFrom,
-        disableContainer: true,
-        populate: payloadPopulateFn
-    });
-    const toHTML = await convertLexicalToHTMLAsync({
-        converters,
-        data: valueTo,
-        disableContainer: true,
-        populate: payloadPopulateFn
-    });
-    const { From, To } = getHTMLDiffComponents({
-        // Ensure empty paragraph is displayed for empty rich text fields - otherwise, toHTML may be displayed in the wrong column
-        fromHTML: fromHTML?.length ? fromHTML : '<p></p>',
-        toHTML: toHTML?.length ? toHTML : '<p></p>'
-    });
-    return <FieldDiffContainer className={baseClass} From={From} i18n={i18n} label={{
-        label: field.label,
-        locale
-    }} nestingLevel={nestingLevel} To={To}/>;
+export const LexicalDiffComponent = async args => {
+  const {
+    comparisonValue: valueFrom,
+    field,
+    i18n,
+    locale,
+    nestingLevel,
+    req,
+    versionValue: valueTo
+  } = args;
+  const converters = ({
+    defaultConverters
+  }) => ({
+    ...defaultConverters,
+    ...LinkDiffHTMLConverterAsync({}),
+    ...ListItemDiffHTMLConverterAsync,
+    ...UploadDiffHTMLConverterAsync({
+      i18n,
+      req
+    }),
+    ...RelationshipDiffHTMLConverterAsync({
+      i18n,
+      req
+    }),
+    ...UnknownDiffHTMLConverterAsync({
+      i18n,
+      req
+    })
+  });
+  const payloadPopulateFn = await getPayloadPopulateFn({
+    currentDepth: 0,
+    depth: 1,
+    req
+  });
+  const fromHTML = await convertLexicalToHTMLAsync({
+    converters,
+    data: valueFrom,
+    disableContainer: true,
+    populate: payloadPopulateFn
+  });
+  const toHTML = await convertLexicalToHTMLAsync({
+    converters,
+    data: valueTo,
+    disableContainer: true,
+    populate: payloadPopulateFn
+  });
+  const {
+    From,
+    To
+  } = getHTMLDiffComponents({
+    // Ensure empty paragraph is displayed for empty rich text fields - otherwise, toHTML may be displayed in the wrong column
+    fromHTML: fromHTML?.length ? fromHTML : '<p></p>',
+    toHTML: toHTML?.length ? toHTML : '<p></p>'
+  });
+  return /*#__PURE__*/_jsx(FieldDiffContainer, {
+    className: baseClass,
+    From: From,
+    i18n: i18n,
+    label: {
+      label: field.label,
+      locale
+    },
+    nestingLevel: nestingLevel,
+    To: To
+  });
 };
-
 //# sourceMappingURL=index.js.map

package/dist/field/Diff/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/field/Diff/index.tsx"],"sourcesContent":["import type { SerializedEditorState } from 'lexical'\nimport type { RichTextFieldDiffServerComponent } from 'payload'\n\nimport { FieldDiffContainer, getHTMLDiffComponents } from '@payloadcms/ui/rsc'\n\nimport './index.scss'\nimport '../bundled.css'\n\nimport React from 'react'\n\nimport type { HTMLConvertersFunctionAsync } from '../../features/converters/lexicalToHtml/async/types.js'\n\nimport { convertLexicalToHTMLAsync } from '../../features/converters/lexicalToHtml/async/index.js'\nimport { getPayloadPopulateFn } from '../../features/converters/utilities/payloadPopulateFn.js'\nimport { LinkDiffHTMLConverterAsync } from './converters/link.js'\nimport { ListItemDiffHTMLConverterAsync } from './converters/listitem/index.js'\nimport { RelationshipDiffHTMLConverterAsync } from './converters/relationship/index.js'\nimport { UnknownDiffHTMLConverterAsync } from './converters/unknown/index.js'\nimport { UploadDiffHTMLConverterAsync } from './converters/upload/index.js'\n\nconst baseClass = 'lexical-diff'\n\nexport const LexicalDiffComponent: RichTextFieldDiffServerComponent = async (args) => {\n  const {\n    comparisonValue: valueFrom,\n    field,\n    i18n,\n    locale,\n    nestingLevel,\n    req,\n    versionValue: valueTo,\n  } = args\n\n  const converters: HTMLConvertersFunctionAsync = ({ defaultConverters }) => ({\n    ...defaultConverters,\n    ...LinkDiffHTMLConverterAsync({}),\n    ...ListItemDiffHTMLConverterAsync,\n    ...UploadDiffHTMLConverterAsync({ i18n, req }),\n    ...RelationshipDiffHTMLConverterAsync({ i18n, req }),\n    ...UnknownDiffHTMLConverterAsync({ i18n, req }),\n  })\n\n  const payloadPopulateFn = await getPayloadPopulateFn({\n    currentDepth: 0,\n    depth: 1,\n    req,\n  })\n  const fromHTML = await convertLexicalToHTMLAsync({\n    converters,\n    data: valueFrom as SerializedEditorState,\n    disableContainer: true,\n    populate: payloadPopulateFn,\n  })\n\n  const toHTML = await convertLexicalToHTMLAsync({\n    converters,\n    data: valueTo as SerializedEditorState,\n    disableContainer: true,\n    populate: payloadPopulateFn,\n  })\n\n  const { From, To } = getHTMLDiffComponents({\n    // Ensure empty paragraph is displayed for empty rich text fields - otherwise, toHTML may be displayed in the wrong column\n    fromHTML: fromHTML?.length ? fromHTML : '<p></p>',\n    toHTML: toHTML?.length ? toHTML : '<p></p>',\n  })\n\n  return (\n    <FieldDiffContainer\n      className={baseClass}\n      From={From}\n      i18n={i18n}\n      label={{\n        label: field.label,\n        locale,\n      }}\n      nestingLevel={nestingLevel}\n      To={To}\n    />\n  )\n}\n"],"names":["FieldDiffContainer","getHTMLDiffComponents","convertLexicalToHTMLAsync","getPayloadPopulateFn","LinkDiffHTMLConverterAsync","ListItemDiffHTMLConverterAsync","RelationshipDiffHTMLConverterAsync","UnknownDiffHTMLConverterAsync","UploadDiffHTMLConverterAsync","baseClass","LexicalDiffComponent","args","comparisonValue","valueFrom","field","i18n","locale","nestingLevel","req","versionValue","valueTo","converters","defaultConverters","payloadPopulateFn","currentDepth","depth","fromHTML","data","disableContainer","populate","toHTML","From","To","length","className","label"],"mappings":"AAGA,SAASA,kBAAkB,EAAEC,qBAAqB,QAAQ,qBAAoB;AAE9E,OAAO,eAAc;AACrB,OAAO,iBAAgB;AAMvB,SAASC,yBAAyB,QAAQ,yDAAwD;AAClG,SAASC,oBAAoB,QAAQ,2DAA0D;AAC/F,SAASC,0BAA0B,QAAQ,uBAAsB;AACjE,SAASC,8BAA8B,QAAQ,iCAAgC;AAC/E,SAASC,kCAAkC,QAAQ,qCAAoC;AACvF,SAASC,6BAA6B,QAAQ,gCAA+B;AAC7E,SAASC,4BAA4B,QAAQ,+BAA8B;AAE3E,MAAMC,YAAY;AAElB,OAAO,MAAMC,uBAAyD,OAAOC;IAC3E,MAAM,EACJC,iBAAiBC,SAAS,EAC1BC,KAAK,EACLC,IAAI,EACJC,MAAM,EACNC,YAAY,EACZC,GAAG,EACHC,cAAcC,OAAO,EACtB,GAAGT;IAEJ,MAAMU,aAA0C,CAAC,EAAEC,iBAAiB,EAAE,GAAM,CAAA;YAC1E,GAAGA,iBAAiB;YACpB,GAAGlB,2BAA2B,CAAC,EAAE;YACjC,GAAGC,8BAA8B;YACjC,GAAGG,6BAA6B;gBAAEO;gBAAMG;YAAI,EAAE;YAC9C,GAAGZ,mCAAmC;gBAAES;gBAAMG;YAAI,EAAE;YACpD,GAAGX,8BAA8B;gBAAEQ;gBAAMG;YAAI,EAAE;QACjD,CAAA;IAEA,MAAMK,oBAAoB,MAAMpB,qBAAqB;QACnDqB,cAAc;QACdC,OAAO;QACPP;IACF;IACA,MAAMQ,WAAW,MAAMxB,0BAA0B;QAC/CmB;QACAM,MAAMd;QACNe,kBAAkB;QAClBC,UAAUN;IACZ;IAEA,MAAMO,SAAS,MAAM5B,0BAA0B;QAC7CmB;QACAM,MAAMP;QACNQ,kBAAkB;QAClBC,UAAUN;IACZ;IAEA,MAAM,EAAEQ,IAAI,EAAEC,EAAE,EAAE,GAAG/B,sBAAsB;QACzC,0HAA0H;QAC1HyB,UAAUA,UAAUO,SAASP,WAAW;QACxCI,QAAQA,QAAQG,SAASH,SAAS;IACpC;IAEA,QACG9B,mBACCkC,WAAWzB,WACXsB,MAAMA,MACNhB,MAAMA,MACNoB,OAAO;QACLA,OAAOrB,MAAMqB,KAAK;QAClBnB;IACF,GACAC,cAAcA,cACde,IAAIA;AAGV,EAAC"}
+{"version":3,"file":"index.js","names":["FieldDiffContainer","getHTMLDiffComponents","React","convertLexicalToHTMLAsync","getPayloadPopulateFn","LinkDiffHTMLConverterAsync","ListItemDiffHTMLConverterAsync","RelationshipDiffHTMLConverterAsync","UnknownDiffHTMLConverterAsync","UploadDiffHTMLConverterAsync","baseClass","LexicalDiffComponent","args","comparisonValue","valueFrom","field","i18n","locale","nestingLevel","req","versionValue","valueTo","converters","defaultConverters","payloadPopulateFn","currentDepth","depth","fromHTML","data","disableContainer","populate","toHTML","From","To","length","_jsx","className","label"],"sources":["../../../src/field/Diff/index.tsx"],"sourcesContent":["import type { SerializedEditorState } from 'lexical'\nimport type { RichTextFieldDiffServerComponent } from 'payload'\n\nimport { FieldDiffContainer, getHTMLDiffComponents } from '@payloadcms/ui/rsc'\n\nimport './index.scss'\nimport '../bundled.css'\n\nimport React from 'react'\n\nimport type { HTMLConvertersFunctionAsync } from '../../features/converters/lexicalToHtml/async/types.js'\n\nimport { convertLexicalToHTMLAsync } from '../../features/converters/lexicalToHtml/async/index.js'\nimport { getPayloadPopulateFn } from '../../features/converters/utilities/payloadPopulateFn.js'\nimport { LinkDiffHTMLConverterAsync } from './converters/link.js'\nimport { ListItemDiffHTMLConverterAsync } from './converters/listitem/index.js'\nimport { RelationshipDiffHTMLConverterAsync } from './converters/relationship/index.js'\nimport { UnknownDiffHTMLConverterAsync } from './converters/unknown/index.js'\nimport { UploadDiffHTMLConverterAsync } from './converters/upload/index.js'\n\nconst baseClass = 'lexical-diff'\n\nexport const LexicalDiffComponent: RichTextFieldDiffServerComponent = async (args) => {\n  const {\n    comparisonValue: valueFrom,\n    field,\n    i18n,\n    locale,\n    nestingLevel,\n    req,\n    versionValue: valueTo,\n  } = args\n\n  const converters: HTMLConvertersFunctionAsync = ({ defaultConverters }) => ({\n    ...defaultConverters,\n    ...LinkDiffHTMLConverterAsync({}),\n    ...ListItemDiffHTMLConverterAsync,\n    ...UploadDiffHTMLConverterAsync({ i18n, req }),\n    ...RelationshipDiffHTMLConverterAsync({ i18n, req }),\n    ...UnknownDiffHTMLConverterAsync({ i18n, req }),\n  })\n\n  const payloadPopulateFn = await getPayloadPopulateFn({\n    currentDepth: 0,\n    depth: 1,\n    req,\n  })\n  const fromHTML = await convertLexicalToHTMLAsync({\n    converters,\n    data: valueFrom as SerializedEditorState,\n    disableContainer: true,\n    populate: payloadPopulateFn,\n  })\n\n  const toHTML = await convertLexicalToHTMLAsync({\n    converters,\n    data: valueTo as SerializedEditorState,\n    disableContainer: true,\n    populate: payloadPopulateFn,\n  })\n\n  const { From, To } = getHTMLDiffComponents({\n    // Ensure empty paragraph is displayed for empty rich text fields - otherwise, toHTML may be displayed in the wrong column\n    fromHTML: fromHTML?.length ? fromHTML : '<p></p>',\n    toHTML: toHTML?.length ? toHTML : '<p></p>',\n  })\n\n  return (\n    <FieldDiffContainer\n      className={baseClass}\n      From={From}\n      i18n={i18n}\n      label={{\n        label: field.label,\n        locale,\n      }}\n      nestingLevel={nestingLevel}\n      To={To}\n    />\n  )\n}\n"],"mappings":";AAGA,SAASA,kBAAkB,EAAEC,qBAAqB,QAAQ;AAG1D,OAAO;AAEP,OAAOC,KAAA,MAAW;AAIlB,SAASC,yBAAyB,QAAQ;AAC1C,SAASC,oBAAoB,QAAQ;AACrC,SAASC,0BAA0B,QAAQ;AAC3C,SAASC,8BAA8B,QAAQ;AAC/C,SAASC,kCAAkC,QAAQ;AACnD,SAASC,6BAA6B,QAAQ;AAC9C,SAASC,4BAA4B,QAAQ;AAE7C,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,oBAAA,GAAyD,MAAOC,IAAA;EAC3E,MAAM;IACJC,eAAA,EAAiBC,SAAS;IAC1BC,KAAK;IACLC,IAAI;IACJC,MAAM;IACNC,YAAY;IACZC,GAAG;IACHC,YAAA,EAAcC;EAAO,CACtB,GAAGT,IAAA;EAEJ,MAAMU,UAAA,GAA0CA,CAAC;IAAEC;EAAiB,CAAE,MAAM;IAC1E,GAAGA,iBAAiB;IACpB,GAAGlB,0BAAA,CAA2B,CAAC,EAAE;IACjC,GAAGC,8BAA8B;IACjC,GAAGG,4BAAA,CAA6B;MAAEO,IAAA;MAAMG;IAAI,EAAE;IAC9C,GAAGZ,kCAAA,CAAmC;MAAES,IAAA;MAAMG;IAAI,EAAE;IACpD,GAAGX,6BAAA,CAA8B;MAAEQ,IAAA;MAAMG;IAAI;EAC/C;EAEA,MAAMK,iBAAA,GAAoB,MAAMpB,oBAAA,CAAqB;IACnDqB,YAAA,EAAc;IACdC,KAAA,EAAO;IACPP;EACF;EACA,MAAMQ,QAAA,GAAW,MAAMxB,yBAAA,CAA0B;IAC/CmB,UAAA;IACAM,IAAA,EAAMd,SAAA;IACNe,gBAAA,EAAkB;IAClBC,QAAA,EAAUN;EACZ;EAEA,MAAMO,MAAA,GAAS,MAAM5B,yBAAA,CAA0B;IAC7CmB,UAAA;IACAM,IAAA,EAAMP,OAAA;IACNQ,gBAAA,EAAkB;IAClBC,QAAA,EAAUN;EACZ;EAEA,MAAM;IAAEQ,IAAI;IAAEC;EAAE,CAAE,GAAGhC,qBAAA,CAAsB;IACzC;IACA0B,QAAA,EAAUA,QAAA,EAAUO,MAAA,GAASP,QAAA,GAAW;IACxCI,MAAA,EAAQA,MAAA,EAAQG,MAAA,GAASH,MAAA,GAAS;EACpC;EAEA,oBACEI,IAAA,CAACnC,kBAAA;IACCoC,SAAA,EAAW1B,SAAA;IACXsB,IAAA,EAAMA,IAAA;IACNhB,IAAA,EAAMA,IAAA;IACNqB,KAAA,EAAO;MACLA,KAAA,EAAOtB,KAAA,CAAMsB,KAAK;MAClBpB;IACF;IACAC,YAAA,EAAcA,YAAA;IACde,EAAA,EAAIA;;AAGV","ignoreList":[]}

package/dist/field/Field.js

@@ -1,142 +1,182 @@
 'use client';
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { BulkUploadProvider, FieldDescription, FieldError, FieldLabel, RenderCustomComponent, useEditDepth, useEffectEvent, useField } from '@payloadcms/ui';
 import { mergeFieldStyles } from '@payloadcms/ui/shared';
 import { dequal } from 'dequal/lite';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
-import '../lexical/theme/EditorTheme.scss';
 import './bundled.css';
-import './index.scss';
 import { LexicalProvider } from '../lexical/LexicalProvider.js';
 import { useRunDeprioritized } from '../utilities/useRunDeprioritized.js';
 const baseClass = 'rich-text-lexical';
-const RichTextComponent = // With rendered features n stuff
-(props)=>{
-    const { editorConfig, field, field: { admin: { className, description, readOnly: readOnlyFromAdmin } = {}, label, localized, required }, path: pathFromProps, readOnly: readOnlyFromTopLevelProps, validate } = // Users can pass in client side validation if they WANT to, but it's not required anymore
-    props;
-    const readOnlyFromProps = readOnlyFromTopLevelProps || readOnlyFromAdmin;
-    const editDepth = useEditDepth();
-    const memoizedValidate = useCallback((value, validationOptions)=>{
-        if (typeof validate === 'function') {
-            // @ts-expect-error - vestiges of when tsconfig was not strict. Feel free to improve
-            return validate(value, {
-                ...validationOptions,
-                required
-            });
-        }
-        return true;
-    }, // Important: do not add props to the dependencies array.
-    // This would cause an infinite loop and endless re-rendering.
-    // Removing props from the dependencies array fixed this issue: https://github.com/payloadcms/payload/issues/3709
-    [
-        validate,
-        required
-    ]);
-    const { customComponents: { AfterInput, BeforeInput, Description, Error, Label } = {}, disabled: disabledFromField, initialValue, path, setValue, showError, value } = useField({
-        potentiallyStalePath: pathFromProps,
-        validate: memoizedValidate
-    });
-    const disabled = readOnlyFromProps || disabledFromField;
-    const [isSmallWidthViewport, setIsSmallWidthViewport] = useState(false);
-    const [rerenderProviderKey, setRerenderProviderKey] = useState();
-    const prevInitialValueRef = React.useRef(initialValue);
-    const prevValueRef = React.useRef(value);
-    useEffect(()=>{
-        const updateViewPortWidth = ()=>{
-            const isNextSmallWidthViewport = window.matchMedia('(max-width: 768px)').matches;
-            if (isNextSmallWidthViewport !== isSmallWidthViewport) {
-                setIsSmallWidthViewport(isNextSmallWidthViewport);
-            }
-        };
-        updateViewPortWidth();
-        window.addEventListener('resize', updateViewPortWidth);
-        return ()=>{
-            window.removeEventListener('resize', updateViewPortWidth);
-        };
-    }, [
-        isSmallWidthViewport
-    ]);
-    const classes = [
-        baseClass,
-        'field-type',
+const RichTextComponent = props => {
+  const {
+    editorConfig,
+    field,
+    field: {
+      admin: {
         className,
-        showError && 'error',
-        disabled && `${baseClass}--read-only`,
-        editorConfig?.admin?.hideGutter !== true && !isSmallWidthViewport ? `${baseClass}--show-gutter` : null
-    ].filter(Boolean).join(' ');
-    const pathWithEditDepth = `${path}.${editDepth}`;
-    const runDeprioritized = useRunDeprioritized();
-    // defaults to 500 ms timeout
-    const handleChange = useCallback((editorState)=>{
-        // Capture `editorState` in the closure so we can safely run later.
-        const updateFieldValue = ()=>{
-            const newState = editorState.toJSON();
-            prevValueRef.current = newState;
-            setValue(newState);
-        };
-        // Queue the update for the browser’s idle time (or Safari shim)
-        // and let the hook handle debouncing/cancellation.
-        void runDeprioritized(updateFieldValue);
-    }, [
-        setValue,
-        runDeprioritized
-    ]);
-    // `runDeprioritized` is stable (useCallback inside hook)
-    const styles = useMemo(()=>mergeFieldStyles(field), [
-        field
-    ]);
-    const handleInitialValueChange = useEffectEvent((initialValue)=>{
-        // Object deep equality check here, as re-mounting the editor if
-        // the new value is the same as the old one is not necessary.
-        // In postgres, the order of keys in JSON objects is not guaranteed to be preserved,
-        // so we need to do a deep equality check here that does not care about key order => we use dequal.
-        // If we used JSON.stringify, the editor would re-mount every time you save the document, as the order of keys changes => change detected => re-mount.
-        if (prevValueRef.current !== value && !dequal(prevValueRef.current != null ? JSON.parse(JSON.stringify(prevValueRef.current)) : prevValueRef.current, value)) {
-            prevInitialValueRef.current = initialValue;
-            prevValueRef.current = value;
-            setRerenderProviderKey(new Date());
-        }
-    });
-    useEffect(()=>{
-        // Needs to trigger for object reference changes - otherwise,
-        // reacting to the same initial value change twice will cause
-        // the second change to be ignored, even though the value has changed.
-        // That's because initialValue is not kept up-to-date
-        if (!Object.is(initialValue, prevInitialValueRef.current)) {
-            handleInitialValueChange(initialValue);
-        }
-    }, [
-        initialValue
-    ]);
-    return <div className={classes} key={pathWithEditDepth} style={styles}>
-      <RenderCustomComponent CustomComponent={Error} Fallback={<FieldError path={path} showError={showError}/>}/>
-      {Label || <FieldLabel label={label} localized={localized} path={path} required={required}/>}
-      <div className={`${baseClass}__wrap`}>
-        <ErrorBoundary fallbackRender={fallbackRender} onReset={()=>{}}>
-          {BeforeInput}
-          {}
-          <BulkUploadProvider drawerSlugPrefix={path}>
-            <LexicalProvider composerKey={pathWithEditDepth} editorConfig={editorConfig} fieldProps={props} isSmallWidthViewport={isSmallWidthViewport} key={JSON.stringify({
-        path,
-        rerenderProviderKey
-    })} // makes sure lexical is completely re-rendered when initialValue changes, bypassing the lexical-internal value memoization. That way, external changes to the form will update the editor. More infos in PR description (https://github.com/payloadcms/payload/pull/5010)
-    onChange={handleChange} readOnly={disabled} value={value}/>
-          </BulkUploadProvider>
-          {AfterInput}
-        </ErrorBoundary>
-        <RenderCustomComponent CustomComponent={Description} Fallback={<FieldDescription description={description} path={path}/>}/>
-      </div>
-    </div>;
+        description,
+        readOnly: readOnlyFromAdmin
+      } = {},
+      label,
+      localized,
+      required
+    },
+    path: pathFromProps,
+    readOnly: readOnlyFromTopLevelProps,
+    validate
+  } = props;
+  const readOnlyFromProps = readOnlyFromTopLevelProps || readOnlyFromAdmin;
+  const editDepth = useEditDepth();
+  const memoizedValidate = useCallback((value, validationOptions) => {
+    if (typeof validate === 'function') {
+      // @ts-expect-error - vestiges of when tsconfig was not strict. Feel free to improve
+      return validate(value, {
+        ...validationOptions,
+        required
+      });
+    }
+    return true;
+  },
+  // Important: do not add props to the dependencies array.
+  // This would cause an infinite loop and endless re-rendering.
+  // Removing props from the dependencies array fixed this issue: https://github.com/payloadcms/payload/issues/3709
+  [validate, required]);
+  const {
+    customComponents: {
+      AfterInput,
+      BeforeInput,
+      Description,
+      Error,
+      Label
+    } = {},
+    disabled: disabledFromField,
+    initialValue,
+    path,
+    setValue,
+    showError,
+    value: value_0
+  } = useField({
+    potentiallyStalePath: pathFromProps,
+    validate: memoizedValidate
+  });
+  const disabled = readOnlyFromProps || disabledFromField;
+  const [isSmallWidthViewport, setIsSmallWidthViewport] = useState(false);
+  const [rerenderProviderKey, setRerenderProviderKey] = useState();
+  const prevInitialValueRef = React.useRef(initialValue);
+  const prevValueRef = React.useRef(value_0);
+  useEffect(() => {
+    const updateViewPortWidth = () => {
+      const isNextSmallWidthViewport = window.matchMedia('(max-width: 768px)').matches;
+      if (isNextSmallWidthViewport !== isSmallWidthViewport) {
+        setIsSmallWidthViewport(isNextSmallWidthViewport);
+      }
+    };
+    updateViewPortWidth();
+    window.addEventListener('resize', updateViewPortWidth);
+    return () => {
+      window.removeEventListener('resize', updateViewPortWidth);
+    };
+  }, [isSmallWidthViewport]);
+  const classes = [baseClass, 'field-type', className, showError && 'error', disabled && `${baseClass}--read-only`, editorConfig?.admin?.hideGutter !== true && !isSmallWidthViewport ? `${baseClass}--show-gutter` : null].filter(Boolean).join(' ');
+  const pathWithEditDepth = `${path}.${editDepth}`;
+  const runDeprioritized = useRunDeprioritized() // defaults to 500 ms timeout
+  ;
+  const handleChange = useCallback(editorState => {
+    // Capture `editorState` in the closure so we can safely run later.
+    const updateFieldValue = () => {
+      const newState = editorState.toJSON();
+      prevValueRef.current = newState;
+      setValue(newState);
+    };
+    // Queue the update for the browser’s idle time (or Safari shim)
+    // and let the hook handle debouncing/cancellation.
+    void runDeprioritized(updateFieldValue);
+  }, [setValue, runDeprioritized]);
+  const styles = useMemo(() => mergeFieldStyles(field), [field]);
+  const handleInitialValueChange = useEffectEvent(initialValue_0 => {
+    // Object deep equality check here, as re-mounting the editor if
+    // the new value is the same as the old one is not necessary.
+    // In postgres, the order of keys in JSON objects is not guaranteed to be preserved,
+    // so we need to do a deep equality check here that does not care about key order => we use dequal.
+    // If we used JSON.stringify, the editor would re-mount every time you save the document, as the order of keys changes => change detected => re-mount.
+    if (prevValueRef.current !== value_0 && !dequal(prevValueRef.current != null ? JSON.parse(JSON.stringify(prevValueRef.current)) : prevValueRef.current, value_0)) {
+      prevInitialValueRef.current = initialValue_0;
+      prevValueRef.current = value_0;
+      setRerenderProviderKey(new Date());
+    }
+  });
+  useEffect(() => {
+    // Needs to trigger for object reference changes - otherwise,
+    // reacting to the same initial value change twice will cause
+    // the second change to be ignored, even though the value has changed.
+    // That's because initialValue is not kept up-to-date
+    if (!Object.is(initialValue, prevInitialValueRef.current)) {
+      handleInitialValueChange(initialValue);
+    }
+  }, [initialValue]);
+  return /*#__PURE__*/_jsxs("div", {
+    className: classes,
+    style: styles,
+    children: [/*#__PURE__*/_jsx(RenderCustomComponent, {
+      CustomComponent: Error,
+      Fallback: /*#__PURE__*/_jsx(FieldError, {
+        path: path,
+        showError: showError
+      })
+    }), Label || /*#__PURE__*/_jsx(FieldLabel, {
+      label: label,
+      localized: localized,
+      path: path,
+      required: required
+    }), /*#__PURE__*/_jsxs("div", {
+      className: `${baseClass}__wrap`,
+      children: [/*#__PURE__*/_jsxs(ErrorBoundary, {
+        fallbackRender: fallbackRender,
+        onReset: () => {},
+        children: [BeforeInput, /*#__PURE__*/_jsx(BulkUploadProvider, {
+          drawerSlugPrefix: path,
+          children: /*#__PURE__*/_jsx(LexicalProvider, {
+            composerKey: pathWithEditDepth,
+            editorConfig: editorConfig,
+            fieldProps: props,
+            isSmallWidthViewport: isSmallWidthViewport,
+            onChange: handleChange,
+            readOnly: disabled,
+            value: value_0
+          }, JSON.stringify({
+            path,
+            rerenderProviderKey
+          }))
+        }), AfterInput]
+      }), /*#__PURE__*/_jsx(RenderCustomComponent, {
+        CustomComponent: Description,
+        Fallback: /*#__PURE__*/_jsx(FieldDescription, {
+          description: description,
+          path: path
+        })
+      })]
+    })]
+  }, pathWithEditDepth);
 };
-function fallbackRender({ error }) {
-    // Call resetErrorBoundary() to reset the error boundary and retry the render.
-    return <div className="errorBoundary" role="alert">
-      <p>Something went wrong:</p>
-      <pre style={{
+function fallbackRender({
+  error
+}) {
+  // Call resetErrorBoundary() to reset the error boundary and retry the render.
+  return /*#__PURE__*/_jsxs("div", {
+    className: "errorBoundary",
+    role: "alert",
+    children: [/*#__PURE__*/_jsx("p", {
+      children: "Something went wrong:"
+    }), /*#__PURE__*/_jsx("pre", {
+      style: {
         color: 'red'
-    }}>{error.message}</pre>
-    </div>;
+      },
+      children: error.message
+    })]
+  });
 }
 export const RichText = RichTextComponent;
-
 //# sourceMappingURL=Field.js.map

package/dist/field/Field.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/field/Field.tsx"],"sourcesContent":["'use client'\nimport type { EditorState, SerializedEditorState } from 'lexical'\n\nimport {\n  BulkUploadProvider,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n  RenderCustomComponent,\n  useEditDepth,\n  useEffectEvent,\n  useField,\n} from '@payloadcms/ui'\nimport { mergeFieldStyles } from '@payloadcms/ui/shared'\nimport { dequal } from 'dequal/lite'\nimport { type Validate } from 'payload'\nimport React, { useCallback, useEffect, useMemo, useState } from 'react'\nimport { ErrorBoundary } from 'react-error-boundary'\n\nimport type { SanitizedClientEditorConfig } from '../lexical/config/types.js'\n\nimport '../lexical/theme/EditorTheme.scss'\nimport './bundled.css'\nimport './index.scss'\n\nimport type { LexicalRichTextFieldProps } from '../types.js'\n\nimport { LexicalProvider } from '../lexical/LexicalProvider.js'\nimport { useRunDeprioritized } from '../utilities/useRunDeprioritized.js'\n\nconst baseClass = 'rich-text-lexical'\n\nconst RichTextComponent: React.FC<\n  {\n    readonly editorConfig: SanitizedClientEditorConfig // With rendered features n stuff\n  } & LexicalRichTextFieldProps\n> = (props) => {\n  const {\n    editorConfig,\n    field,\n    field: {\n      admin: { className, description, readOnly: readOnlyFromAdmin } = {},\n      label,\n      localized,\n      required,\n    },\n    path: pathFromProps,\n    readOnly: readOnlyFromTopLevelProps,\n    validate, // Users can pass in client side validation if they WANT to, but it's not required anymore\n  } = props\n\n  const readOnlyFromProps = readOnlyFromTopLevelProps || readOnlyFromAdmin\n\n  const editDepth = useEditDepth()\n\n  const memoizedValidate = useCallback<Validate>(\n    (value, validationOptions) => {\n      if (typeof validate === 'function') {\n        // @ts-expect-error - vestiges of when tsconfig was not strict. Feel free to improve\n        return validate(value, { ...validationOptions, required })\n      }\n      return true\n    },\n    // Important: do not add props to the dependencies array.\n    // This would cause an infinite loop and endless re-rendering.\n    // Removing props from the dependencies array fixed this issue: https://github.com/payloadcms/payload/issues/3709\n    [validate, required],\n  )\n\n  const {\n    customComponents: { AfterInput, BeforeInput, Description, Error, Label } = {},\n    disabled: disabledFromField,\n    initialValue,\n    path,\n    setValue,\n    showError,\n    value,\n  } = useField<SerializedEditorState>({\n    potentiallyStalePath: pathFromProps,\n    validate: memoizedValidate,\n  })\n\n  const disabled = readOnlyFromProps || disabledFromField\n\n  const [isSmallWidthViewport, setIsSmallWidthViewport] = useState<boolean>(false)\n  const [rerenderProviderKey, setRerenderProviderKey] = useState<Date>()\n\n  const prevInitialValueRef = React.useRef<SerializedEditorState | undefined>(initialValue)\n  const prevValueRef = React.useRef<SerializedEditorState | undefined>(value)\n\n  useEffect(() => {\n    const updateViewPortWidth = () => {\n      const isNextSmallWidthViewport = window.matchMedia('(max-width: 768px)').matches\n\n      if (isNextSmallWidthViewport !== isSmallWidthViewport) {\n        setIsSmallWidthViewport(isNextSmallWidthViewport)\n      }\n    }\n    updateViewPortWidth()\n    window.addEventListener('resize', updateViewPortWidth)\n\n    return () => {\n      window.removeEventListener('resize', updateViewPortWidth)\n    }\n  }, [isSmallWidthViewport])\n\n  const classes = [\n    baseClass,\n    'field-type',\n    className,\n    showError && 'error',\n    disabled && `${baseClass}--read-only`,\n    editorConfig?.admin?.hideGutter !== true && !isSmallWidthViewport\n      ? `${baseClass}--show-gutter`\n      : null,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  const pathWithEditDepth = `${path}.${editDepth}`\n\n  const runDeprioritized = useRunDeprioritized() // defaults to 500 ms timeout\n\n  const handleChange = useCallback(\n    (editorState: EditorState) => {\n      // Capture `editorState` in the closure so we can safely run later.\n      const updateFieldValue = () => {\n        const newState = editorState.toJSON()\n        prevValueRef.current = newState\n        setValue(newState)\n      }\n\n      // Queue the update for the browser’s idle time (or Safari shim)\n      // and let the hook handle debouncing/cancellation.\n      void runDeprioritized(updateFieldValue)\n    },\n    [setValue, runDeprioritized], // `runDeprioritized` is stable (useCallback inside hook)\n  )\n\n  const styles = useMemo(() => mergeFieldStyles(field), [field])\n\n  const handleInitialValueChange = useEffectEvent(\n    (initialValue: SerializedEditorState | undefined) => {\n      // Object deep equality check here, as re-mounting the editor if\n      // the new value is the same as the old one is not necessary.\n      // In postgres, the order of keys in JSON objects is not guaranteed to be preserved,\n      // so we need to do a deep equality check here that does not care about key order => we use dequal.\n      // If we used JSON.stringify, the editor would re-mount every time you save the document, as the order of keys changes => change detected => re-mount.\n      if (\n        prevValueRef.current !== value &&\n        !dequal(\n          prevValueRef.current != null\n            ? JSON.parse(JSON.stringify(prevValueRef.current))\n            : prevValueRef.current,\n          value,\n        )\n      ) {\n        prevInitialValueRef.current = initialValue\n        prevValueRef.current = value\n        setRerenderProviderKey(new Date())\n      }\n    },\n  )\n\n  useEffect(() => {\n    // Needs to trigger for object reference changes - otherwise,\n    // reacting to the same initial value change twice will cause\n    // the second change to be ignored, even though the value has changed.\n    // That's because initialValue is not kept up-to-date\n    if (!Object.is(initialValue, prevInitialValueRef.current)) {\n      handleInitialValueChange(initialValue)\n    }\n  }, [initialValue])\n\n  return (\n    <div className={classes} key={pathWithEditDepth} style={styles}>\n      <RenderCustomComponent\n        CustomComponent={Error}\n        Fallback={<FieldError path={path} showError={showError} />}\n      />\n      {Label || <FieldLabel label={label} localized={localized} path={path} required={required} />}\n      <div className={`${baseClass}__wrap`}>\n        <ErrorBoundary fallbackRender={fallbackRender} onReset={() => {}}>\n          {BeforeInput}\n          {/* Lexical may be in a drawer. We need to define another BulkUploadProvider to ensure that the bulk upload drawer\n          is rendered in the correct depth (not displayed *behind* the current drawer)*/}\n          <BulkUploadProvider drawerSlugPrefix={path}>\n            <LexicalProvider\n              composerKey={pathWithEditDepth}\n              editorConfig={editorConfig}\n              fieldProps={props}\n              isSmallWidthViewport={isSmallWidthViewport}\n              key={JSON.stringify({ path, rerenderProviderKey })} // makes sure lexical is completely re-rendered when initialValue changes, bypassing the lexical-internal value memoization. That way, external changes to the form will update the editor. More infos in PR description (https://github.com/payloadcms/payload/pull/5010)\n              onChange={handleChange}\n              readOnly={disabled}\n              value={value}\n            />\n          </BulkUploadProvider>\n          {AfterInput}\n        </ErrorBoundary>\n        <RenderCustomComponent\n          CustomComponent={Description}\n          Fallback={<FieldDescription description={description} path={path} />}\n        />\n      </div>\n    </div>\n  )\n}\n\nfunction fallbackRender({ error }: { error: Error }) {\n  // Call resetErrorBoundary() to reset the error boundary and retry the render.\n\n  return (\n    <div className=\"errorBoundary\" role=\"alert\">\n      <p>Something went wrong:</p>\n      <pre style={{ color: 'red' }}>{error.message}</pre>\n    </div>\n  )\n}\n\nexport const RichText: typeof RichTextComponent = RichTextComponent\n"],"names":["BulkUploadProvider","FieldDescription","FieldError","FieldLabel","RenderCustomComponent","useEditDepth","useEffectEvent","useField","mergeFieldStyles","dequal","React","useCallback","useEffect","useMemo","useState","ErrorBoundary","LexicalProvider","useRunDeprioritized","baseClass","RichTextComponent","props","editorConfig","field","admin","className","description","readOnly","readOnlyFromAdmin","label","localized","required","path","pathFromProps","readOnlyFromTopLevelProps","validate","readOnlyFromProps","editDepth","memoizedValidate","value","validationOptions","customComponents","AfterInput","BeforeInput","Description","Error","Label","disabled","disabledFromField","initialValue","setValue","showError","potentiallyStalePath","isSmallWidthViewport","setIsSmallWidthViewport","rerenderProviderKey","setRerenderProviderKey","prevInitialValueRef","useRef","prevValueRef","updateViewPortWidth","isNextSmallWidthViewport","window","matchMedia","matches","addEventListener","removeEventListener","classes","hideGutter","filter","Boolean","join","pathWithEditDepth","runDeprioritized","handleChange","editorState","updateFieldValue","newState","toJSON","current","styles","handleInitialValueChange","JSON","parse","stringify","Date","Object","is","div","key","style","CustomComponent","Fallback","fallbackRender","onReset","drawerSlugPrefix","composerKey","fieldProps","onChange","error","role","p","pre","color","message","RichText"],"mappings":"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"}
+{"version":3,"file":"Field.js","names":["BulkUploadProvider","FieldDescription","FieldError","FieldLabel","RenderCustomComponent","useEditDepth","useEffectEvent","useField","mergeFieldStyles","dequal","React","useCallback","useEffect","useMemo","useState","ErrorBoundary","LexicalProvider","useRunDeprioritized","baseClass","RichTextComponent","props","editorConfig","field","admin","className","description","readOnly","readOnlyFromAdmin","label","localized","required","path","pathFromProps","readOnlyFromTopLevelProps","validate","readOnlyFromProps","editDepth","memoizedValidate","value","validationOptions","customComponents","AfterInput","BeforeInput","Description","Error","Label","disabled","disabledFromField","initialValue","setValue","showError","potentiallyStalePath","isSmallWidthViewport","setIsSmallWidthViewport","rerenderProviderKey","setRerenderProviderKey","prevInitialValueRef","useRef","prevValueRef","updateViewPortWidth","isNextSmallWidthViewport","window","matchMedia","matches","addEventListener","removeEventListener","classes","hideGutter","filter","Boolean","join","pathWithEditDepth","runDeprioritized","handleChange","editorState","updateFieldValue","newState","toJSON","current","styles","handleInitialValueChange","JSON","parse","stringify","Date","Object","is","_jsxs","style","_jsx","CustomComponent","Fallback","fallbackRender","onReset","drawerSlugPrefix","composerKey","fieldProps","onChange","error","role","color","message","RichText"],"sources":["../../src/field/Field.tsx"],"sourcesContent":["'use client'\nimport type { EditorState, SerializedEditorState } from 'lexical'\n\nimport {\n  BulkUploadProvider,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n  RenderCustomComponent,\n  useEditDepth,\n  useEffectEvent,\n  useField,\n} from '@payloadcms/ui'\nimport { mergeFieldStyles } from '@payloadcms/ui/shared'\nimport { dequal } from 'dequal/lite'\nimport { type Validate } from 'payload'\nimport React, { useCallback, useEffect, useMemo, useState } from 'react'\nimport { ErrorBoundary } from 'react-error-boundary'\n\nimport type { SanitizedClientEditorConfig } from '../lexical/config/types.js'\n\nimport '../lexical/theme/EditorTheme.scss'\nimport './bundled.css'\nimport './index.scss'\n\nimport type { LexicalRichTextFieldProps } from '../types.js'\n\nimport { LexicalProvider } from '../lexical/LexicalProvider.js'\nimport { useRunDeprioritized } from '../utilities/useRunDeprioritized.js'\n\nconst baseClass = 'rich-text-lexical'\n\nconst RichTextComponent: React.FC<\n  {\n    readonly editorConfig: SanitizedClientEditorConfig // With rendered features n stuff\n  } & LexicalRichTextFieldProps\n> = (props) => {\n  const {\n    editorConfig,\n    field,\n    field: {\n      admin: { className, description, readOnly: readOnlyFromAdmin } = {},\n      label,\n      localized,\n      required,\n    },\n    path: pathFromProps,\n    readOnly: readOnlyFromTopLevelProps,\n    validate, // Users can pass in client side validation if they WANT to, but it's not required anymore\n  } = props\n\n  const readOnlyFromProps = readOnlyFromTopLevelProps || readOnlyFromAdmin\n\n  const editDepth = useEditDepth()\n\n  const memoizedValidate = useCallback<Validate>(\n    (value, validationOptions) => {\n      if (typeof validate === 'function') {\n        // @ts-expect-error - vestiges of when tsconfig was not strict. Feel free to improve\n        return validate(value, { ...validationOptions, required })\n      }\n      return true\n    },\n    // Important: do not add props to the dependencies array.\n    // This would cause an infinite loop and endless re-rendering.\n    // Removing props from the dependencies array fixed this issue: https://github.com/payloadcms/payload/issues/3709\n    [validate, required],\n  )\n\n  const {\n    customComponents: { AfterInput, BeforeInput, Description, Error, Label } = {},\n    disabled: disabledFromField,\n    initialValue,\n    path,\n    setValue,\n    showError,\n    value,\n  } = useField<SerializedEditorState>({\n    potentiallyStalePath: pathFromProps,\n    validate: memoizedValidate,\n  })\n\n  const disabled = readOnlyFromProps || disabledFromField\n\n  const [isSmallWidthViewport, setIsSmallWidthViewport] = useState<boolean>(false)\n  const [rerenderProviderKey, setRerenderProviderKey] = useState<Date>()\n\n  const prevInitialValueRef = React.useRef<SerializedEditorState | undefined>(initialValue)\n  const prevValueRef = React.useRef<SerializedEditorState | undefined>(value)\n\n  useEffect(() => {\n    const updateViewPortWidth = () => {\n      const isNextSmallWidthViewport = window.matchMedia('(max-width: 768px)').matches\n\n      if (isNextSmallWidthViewport !== isSmallWidthViewport) {\n        setIsSmallWidthViewport(isNextSmallWidthViewport)\n      }\n    }\n    updateViewPortWidth()\n    window.addEventListener('resize', updateViewPortWidth)\n\n    return () => {\n      window.removeEventListener('resize', updateViewPortWidth)\n    }\n  }, [isSmallWidthViewport])\n\n  const classes = [\n    baseClass,\n    'field-type',\n    className,\n    showError && 'error',\n    disabled && `${baseClass}--read-only`,\n    editorConfig?.admin?.hideGutter !== true && !isSmallWidthViewport\n      ? `${baseClass}--show-gutter`\n      : null,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  const pathWithEditDepth = `${path}.${editDepth}`\n\n  const runDeprioritized = useRunDeprioritized() // defaults to 500 ms timeout\n\n  const handleChange = useCallback(\n    (editorState: EditorState) => {\n      // Capture `editorState` in the closure so we can safely run later.\n      const updateFieldValue = () => {\n        const newState = editorState.toJSON()\n        prevValueRef.current = newState\n        setValue(newState)\n      }\n\n      // Queue the update for the browser’s idle time (or Safari shim)\n      // and let the hook handle debouncing/cancellation.\n      void runDeprioritized(updateFieldValue)\n    },\n    [setValue, runDeprioritized], // `runDeprioritized` is stable (useCallback inside hook)\n  )\n\n  const styles = useMemo(() => mergeFieldStyles(field), [field])\n\n  const handleInitialValueChange = useEffectEvent(\n    (initialValue: SerializedEditorState | undefined) => {\n      // Object deep equality check here, as re-mounting the editor if\n      // the new value is the same as the old one is not necessary.\n      // In postgres, the order of keys in JSON objects is not guaranteed to be preserved,\n      // so we need to do a deep equality check here that does not care about key order => we use dequal.\n      // If we used JSON.stringify, the editor would re-mount every time you save the document, as the order of keys changes => change detected => re-mount.\n      if (\n        prevValueRef.current !== value &&\n        !dequal(\n          prevValueRef.current != null\n            ? JSON.parse(JSON.stringify(prevValueRef.current))\n            : prevValueRef.current,\n          value,\n        )\n      ) {\n        prevInitialValueRef.current = initialValue\n        prevValueRef.current = value\n        setRerenderProviderKey(new Date())\n      }\n    },\n  )\n\n  useEffect(() => {\n    // Needs to trigger for object reference changes - otherwise,\n    // reacting to the same initial value change twice will cause\n    // the second change to be ignored, even though the value has changed.\n    // That's because initialValue is not kept up-to-date\n    if (!Object.is(initialValue, prevInitialValueRef.current)) {\n      handleInitialValueChange(initialValue)\n    }\n  }, [initialValue])\n\n  return (\n    <div className={classes} key={pathWithEditDepth} style={styles}>\n      <RenderCustomComponent\n        CustomComponent={Error}\n        Fallback={<FieldError path={path} showError={showError} />}\n      />\n      {Label || <FieldLabel label={label} localized={localized} path={path} required={required} />}\n      <div className={`${baseClass}__wrap`}>\n        <ErrorBoundary fallbackRender={fallbackRender} onReset={() => {}}>\n          {BeforeInput}\n          {/* Lexical may be in a drawer. We need to define another BulkUploadProvider to ensure that the bulk upload drawer\n          is rendered in the correct depth (not displayed *behind* the current drawer)*/}\n          <BulkUploadProvider drawerSlugPrefix={path}>\n            <LexicalProvider\n              composerKey={pathWithEditDepth}\n              editorConfig={editorConfig}\n              fieldProps={props}\n              isSmallWidthViewport={isSmallWidthViewport}\n              key={JSON.stringify({ path, rerenderProviderKey })} // makes sure lexical is completely re-rendered when initialValue changes, bypassing the lexical-internal value memoization. That way, external changes to the form will update the editor. More infos in PR description (https://github.com/payloadcms/payload/pull/5010)\n              onChange={handleChange}\n              readOnly={disabled}\n              value={value}\n            />\n          </BulkUploadProvider>\n          {AfterInput}\n        </ErrorBoundary>\n        <RenderCustomComponent\n          CustomComponent={Description}\n          Fallback={<FieldDescription description={description} path={path} />}\n        />\n      </div>\n    </div>\n  )\n}\n\nfunction fallbackRender({ error }: { error: Error }) {\n  // Call resetErrorBoundary() to reset the error boundary and retry the render.\n\n  return (\n    <div className=\"errorBoundary\" role=\"alert\">\n      <p>Something went wrong:</p>\n      <pre style={{ color: 'red' }}>{error.message}</pre>\n    </div>\n  )\n}\n\nexport const RichText: typeof RichTextComponent = RichTextComponent\n"],"mappings":"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","ignoreList":[]}