'use client';

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { FieldDescription, FieldError, FieldLabel, RenderCustomComponent, useEditDepth, useField, withCondition } from '@payloadcms/ui';
import { mergeFieldStyles } from '@payloadcms/ui/shared';
import React, { useCallback, useMemo } from 'react';
import { ErrorBoundary } from 'react-error-boundary';
import './bundled.css';
import { LexicalProvider } from '../lexical/LexicalProvider.js';
const baseClass = 'rich-text-lexical';
const RichTextComponent = props => {
  const {
    editorConfig,
    field,
    field: {
      name,
      admin: {
        className,
        description,
        readOnly: readOnlyFromAdmin
      } = {},
      label,
      localized,
      required
    },
    path: pathFromProps,
    readOnly: readOnlyFromTopLevelProps,
    validate
  } = props;
  const readOnlyFromProps = readOnlyFromTopLevelProps || readOnlyFromAdmin;
  const path = pathFromProps ?? name;
  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
    } = {},
    formInitializing,
    formProcessing,
    initialValue,
    setValue,
    showError,
    value: value_0
  } = useField({
    path,
    validate: memoizedValidate
  });
  const disabled = readOnlyFromProps || formProcessing || formInitializing;
  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}`;
  const handleChange = useCallback(editorState => {
    setValue(editorState.toJSON());
  }, [setValue]);
  const styles = useMemo(() => mergeFieldStyles(field), [field]);
  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,
      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, /*#__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 /*#__PURE__*/_jsxs("div", {
    className: "errorBoundary",
    role: "alert",
    children: [/*#__PURE__*/_jsx("p", {
      children: "Something went wrong:"
    }), /*#__PURE__*/_jsx("pre", {
      style: {
        color: 'red'
      },
      children: error.message
    })]
  });
}
export const RichText = withCondition(RichTextComponent);
//# sourceMappingURL=Field.js.map