@payloadcms/richtext-lexical 3.0.0-beta.134 → 3.0.0-beta.135

package/dist/field/Field.js

@@ -1,193 +1,98 @@
 'use client';
 
-import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { FieldLabel, useEditDepth, useField, withCondition } from '@payloadcms/ui';
-import React, { useCallback } from 'react';
+import { mergeFieldStyles } from '@payloadcms/ui/shared';
+import React, { useCallback, useMemo } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { LexicalProvider } from '../lexical/LexicalProvider.js';
 import './bundled.css';
 const baseClass = 'rich-text-lexical';
 const RichTextComponent = props => {
-  const $ = _c(42);
   const {
     editorConfig,
-    field: t0,
+    field,
+    field: {
+      name,
+      admin: {
+        className,
+        readOnly: readOnlyFromAdmin
+      } = {},
+      label,
+      localized,
+      required
+    },
     path: pathFromProps,
     readOnly: readOnlyFromTopLevelProps,
     validate
   } = props;
-  const {
-    name,
-    admin: t1,
-    label,
-    localized,
-    required
-  } = t0;
-  let t2;
-  if ($[0] !== t1) {
-    t2 = t1 === undefined ? {} : t1;
-    $[0] = t1;
-    $[1] = t2;
-  } else {
-    t2 = $[1];
-  }
-  const {
-    className,
-    readOnly: readOnlyFromAdmin,
-    style,
-    width
-  } = t2;
   const readOnlyFromProps = readOnlyFromTopLevelProps || readOnlyFromAdmin;
   const path = pathFromProps ?? name;
   const editDepth = useEditDepth();
-  let t3;
-  if ($[2] !== validate || $[3] !== required) {
-    t3 = (value, validationOptions) => {
-      if (typeof validate === "function") {
-        return validate(value, {
-          ...validationOptions,
-          required
-        });
-      }
-    };
-    $[2] = validate;
-    $[3] = required;
-    $[4] = t3;
-  } else {
-    t3 = $[4];
-  }
-  const memoizedValidate = t3;
-  let t4;
-  if ($[5] !== path || $[6] !== memoizedValidate) {
-    t4 = {
-      path,
-      validate: memoizedValidate
-    };
-    $[5] = path;
-    $[6] = memoizedValidate;
-    $[7] = t4;
-  } else {
-    t4 = $[7];
-  }
+  const memoizedValidate = useCallback((value, validationOptions) => {
+    if (typeof validate === 'function') {
+      return validate(value, {
+        ...validationOptions,
+        required
+      });
+    }
+  },
+  // 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: t5,
+    customComponents: {
+      AfterInput,
+      BeforeInput,
+      Description,
+      Error,
+      Label
+    } = {},
     formInitializing,
     formProcessing,
     initialValue,
     setValue,
     showError,
     value: value_0
-  } = useField(t4);
-  let t6;
-  if ($[8] !== t5) {
-    t6 = t5 === undefined ? {} : t5;
-    $[8] = t5;
-    $[9] = t6;
-  } else {
-    t6 = $[9];
-  }
-  const {
-    AfterInput,
-    BeforeInput,
-    Description,
-    Error,
-    Label
-  } = t6;
+  } = useField({
+    path,
+    // @ts-expect-error: TODO: Fix this
+    validate: memoizedValidate
+  });
   const disabled = readOnlyFromProps || formProcessing || formInitializing;
-  const t7 = showError && "error";
-  const t8 = disabled && `${baseClass}--read-only`;
-  const t9 = editorConfig?.admin?.hideGutter !== true ? `${baseClass}--show-gutter` : null;
-  let t10;
-  if ($[10] !== className || $[11] !== t7 || $[12] !== t8 || $[13] !== t9) {
-    t10 = [baseClass, "field-type", className, t7, t8, t9].filter(Boolean);
-    $[10] = className;
-    $[11] = t7;
-    $[12] = t8;
-    $[13] = t9;
-    $[14] = t10;
-  } else {
-    t10 = $[14];
-  }
-  const classes = t10.join(" ");
+  const classes = [baseClass, 'field-type', className, showError && 'error', disabled && `${baseClass}--read-only`, editorConfig?.admin?.hideGutter !== true ? `${baseClass}--show-gutter` : null].filter(Boolean).join(' ');
   const pathWithEditDepth = `${path}.${editDepth}`;
-  let t11;
-  if ($[15] !== setValue) {
-    t11 = editorState => {
-      setValue(editorState.toJSON());
-    };
-    $[15] = setValue;
-    $[16] = t11;
-  } else {
-    t11 = $[16];
-  }
-  const handleChange = t11;
-  let t12;
-  if ($[17] !== style || $[18] !== width || $[19] !== Label || $[20] !== label || $[21] !== localized || $[22] !== required || $[23] !== pathWithEditDepth || $[24] !== editorConfig || $[25] !== props || $[26] !== handleChange || $[27] !== disabled || $[28] !== value_0 || $[29] !== initialValue || $[30] !== path || $[31] !== BeforeInput || $[32] !== AfterInput || $[33] !== Description || $[34] !== Error || $[35] !== classes) {
-    let t13;
-    if ($[37] !== Label || $[38] !== label || $[39] !== localized || $[40] !== required) {
-      t13 = Label || _jsx(FieldLabel, {
-        label,
-        localized,
-        required
-      });
-      $[37] = Label;
-      $[38] = label;
-      $[39] = localized;
-      $[40] = required;
-      $[41] = t13;
-    } else {
-      t13 = $[41];
-    }
-    t12 = _jsxs("div", {
-      className: classes,
-      style: {
-        ...style,
-        width
-      },
-      children: [Error, t13, _jsxs("div", {
-        className: `${baseClass}__wrap`,
-        children: [_jsxs(ErrorBoundary, {
-          fallbackRender,
-          onReset: _temp,
-          children: [BeforeInput, _jsx(LexicalProvider, {
-            composerKey: pathWithEditDepth,
-            editorConfig,
-            fieldProps: props,
-            onChange: handleChange,
-            readOnly: disabled,
-            value: value_0
-          }, JSON.stringify({
-            initialValue,
-            path
-          })), AfterInput]
-        }), Description]
-      })]
-    }, pathWithEditDepth);
-    $[17] = style;
-    $[18] = width;
-    $[19] = Label;
-    $[20] = label;
-    $[21] = localized;
-    $[22] = required;
-    $[23] = pathWithEditDepth;
-    $[24] = editorConfig;
-    $[25] = props;
-    $[26] = handleChange;
-    $[27] = disabled;
-    $[28] = value_0;
-    $[29] = initialValue;
-    $[30] = path;
-    $[31] = BeforeInput;
-    $[32] = AfterInput;
-    $[33] = Description;
-    $[34] = Error;
-    $[35] = classes;
-    $[36] = t12;
-  } else {
-    t12 = $[36];
-  }
-  return t12;
+  const handleChange = useCallback(editorState => {
+    setValue(editorState.toJSON());
+  }, [setValue]);
+  const styles = useMemo(() => mergeFieldStyles(field), [field]);
+  return /*#__PURE__*/_jsxs("div", {
+    className: classes,
+    style: styles,
+    children: [Error, Label || /*#__PURE__*/_jsx(FieldLabel, {
+      label: label,
+      localized: localized,
+      required: required
+    }), /*#__PURE__*/_jsxs("div", {
+      className: `${baseClass}__wrap`,
+      children: [/*#__PURE__*/_jsxs(ErrorBoundary, {
+        fallbackRender: fallbackRender,
+        onReset: () => {},
+        children: [BeforeInput, /*#__PURE__*/_jsx(LexicalProvider, {
+          composerKey: pathWithEditDepth,
+          editorConfig: editorConfig,
+          fieldProps: props,
+          onChange: handleChange,
+          readOnly: disabled,
+          value: value_0
+        }, JSON.stringify({
+          initialValue,
+          path
+        })), AfterInput]
+      }), Description]
+    })]
+  }, pathWithEditDepth);
 };
 function fallbackRender({
   error
@@ -207,5 +112,4 @@ function fallbackRender({
   });
 }
 export const RichText = withCondition(RichTextComponent);
-function _temp() {}
 //# sourceMappingURL=Field.js.map

package/dist/field/Field.js.map

@@ -1 +1 @@
-{"version":3,"file":"Field.js","names":["c","_c","FieldLabel","useEditDepth","useField","withCondition","React","useCallback","ErrorBoundary","LexicalProvider","baseClass","RichTextComponent","props","$","editorConfig","field","t0","path","pathFromProps","readOnly","readOnlyFromTopLevelProps","validate","name","admin","t1","label","localized","required","t2","undefined","className","readOnlyFromAdmin","style","width","readOnlyFromProps","editDepth","t3","value","validationOptions","memoizedValidate","t4","customComponents","t5","formInitializing","formProcessing","initialValue","setValue","showError","value_0","t6","AfterInput","BeforeInput","Description","Error","Label","disabled","t7","t8","t9","hideGutter","t10","filter","Boolean","classes","join","pathWithEditDepth","t11","editorState","toJSON","handleChange","t12","t13","_jsx","_jsxs","children","fallbackRender","onReset","_temp","composerKey","fieldProps","onChange","JSON","stringify","error","role","color","message","RichText"],"sources":["../../src/field/Field.tsx"],"sourcesContent":["'use client'\nimport type { EditorState, SerializedEditorState } from 'lexical'\n\nimport { FieldLabel, useEditDepth, useField, withCondition } from '@payloadcms/ui'\nimport React, { useCallback } from 'react'\nimport { ErrorBoundary } from 'react-error-boundary'\n\nimport type { SanitizedClientEditorConfig } from '../lexical/config/types.js'\nimport type { LexicalRichTextFieldProps } from '../types.js'\n\nimport { LexicalProvider } from '../lexical/LexicalProvider.js'\nimport './bundled.css'\nimport './index.scss'\nimport '../lexical/theme/EditorTheme.scss'\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      name,\n      admin: { className, readOnly: readOnlyFromAdmin, style, width } = {},\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  const path = pathFromProps ?? name\n\n  const editDepth = useEditDepth()\n\n  const memoizedValidate = useCallback(\n    (value, validationOptions) => {\n      if (typeof validate === 'function') {\n        return validate(value, { ...validationOptions, required })\n      }\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    formInitializing,\n    formProcessing,\n    initialValue,\n    setValue,\n    showError,\n    value,\n  } = useField<SerializedEditorState>({\n    path,\n    // @ts-expect-error: TODO: Fix this\n    validate: memoizedValidate,\n  })\n\n  const disabled = readOnlyFromProps || formProcessing || formInitializing\n\n  const classes = [\n    baseClass,\n    'field-type',\n    className,\n    showError && 'error',\n    disabled && `${baseClass}--read-only`,\n    editorConfig?.admin?.hideGutter !== true ? `${baseClass}--show-gutter` : null,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  const pathWithEditDepth = `${path}.${editDepth}`\n\n  const handleChange = useCallback(\n    (editorState: EditorState) => {\n      setValue(editorState.toJSON())\n    },\n    [setValue],\n  )\n\n  return (\n    <div\n      className={classes}\n      key={pathWithEditDepth}\n      style={{\n        ...style,\n        width,\n      }}\n    >\n      {Error}\n      {Label || <FieldLabel label={label} localized={localized} required={required} />}\n      <div className={`${baseClass}__wrap`}>\n        <ErrorBoundary fallbackRender={fallbackRender} onReset={() => {}}>\n          {BeforeInput}\n          <LexicalProvider\n            composerKey={pathWithEditDepth}\n            editorConfig={editorConfig}\n            fieldProps={props}\n            key={JSON.stringify({ initialValue, path })} // 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          {AfterInput}\n        </ErrorBoundary>\n        {Description}\n      </div>\n    </div>\n  )\n}\n\nfunction fallbackRender({ error }): React.ReactElement {\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 = withCondition(RichTextComponent)\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Field.js","names":["FieldLabel","useEditDepth","useField","withCondition","mergeFieldStyles","React","useCallback","useMemo","ErrorBoundary","LexicalProvider","baseClass","RichTextComponent","props","editorConfig","field","name","admin","className","readOnly","readOnlyFromAdmin","label","localized","required","path","pathFromProps","readOnlyFromTopLevelProps","validate","readOnlyFromProps","editDepth","memoizedValidate","value","validationOptions","customComponents","AfterInput","BeforeInput","Description","Error","Label","formInitializing","formProcessing","initialValue","setValue","showError","disabled","classes","hideGutter","filter","Boolean","join","pathWithEditDepth","handleChange","editorState","toJSON","styles","_jsxs","style","_jsx","fallbackRender","onReset","composerKey","fieldProps","onChange","JSON","stringify","error","role","color","message","RichText"],"sources":["../../src/field/Field.tsx"],"sourcesContent":["'use client'\nimport type { EditorState, SerializedEditorState } from 'lexical'\n\nimport { FieldLabel, useEditDepth, useField, withCondition } from '@payloadcms/ui'\nimport { mergeFieldStyles } from '@payloadcms/ui/shared'\nimport React, { useCallback, useMemo } from 'react'\nimport { ErrorBoundary } from 'react-error-boundary'\n\nimport type { SanitizedClientEditorConfig } from '../lexical/config/types.js'\nimport type { LexicalRichTextFieldProps } from '../types.js'\n\nimport { LexicalProvider } from '../lexical/LexicalProvider.js'\nimport './bundled.css'\nimport './index.scss'\nimport '../lexical/theme/EditorTheme.scss'\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      name,\n      admin: { className, 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  const path = pathFromProps ?? name\n\n  const editDepth = useEditDepth()\n\n  const memoizedValidate = useCallback(\n    (value, validationOptions) => {\n      if (typeof validate === 'function') {\n        return validate(value, { ...validationOptions, required })\n      }\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    formInitializing,\n    formProcessing,\n    initialValue,\n    setValue,\n    showError,\n    value,\n  } = useField<SerializedEditorState>({\n    path,\n    // @ts-expect-error: TODO: Fix this\n    validate: memoizedValidate,\n  })\n\n  const disabled = readOnlyFromProps || formProcessing || formInitializing\n\n  const classes = [\n    baseClass,\n    'field-type',\n    className,\n    showError && 'error',\n    disabled && `${baseClass}--read-only`,\n    editorConfig?.admin?.hideGutter !== true ? `${baseClass}--show-gutter` : null,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  const pathWithEditDepth = `${path}.${editDepth}`\n\n  const handleChange = useCallback(\n    (editorState: EditorState) => {\n      setValue(editorState.toJSON())\n    },\n    [setValue],\n  )\n\n  const styles = useMemo(() => mergeFieldStyles(field), [field])\n\n  return (\n    <div className={classes} key={pathWithEditDepth} style={styles}>\n      {Error}\n      {Label || <FieldLabel label={label} localized={localized} required={required} />}\n      <div className={`${baseClass}__wrap`}>\n        <ErrorBoundary fallbackRender={fallbackRender} onReset={() => {}}>\n          {BeforeInput}\n          <LexicalProvider\n            composerKey={pathWithEditDepth}\n            editorConfig={editorConfig}\n            fieldProps={props}\n            key={JSON.stringify({ initialValue, path })} // 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          {AfterInput}\n        </ErrorBoundary>\n        {Description}\n      </div>\n    </div>\n  )\n}\n\nfunction fallbackRender({ error }): React.ReactElement {\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 = withCondition(RichTextComponent)\n"],"mappings":"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","ignoreList":[]}