@payloadcms/richtext-lexical 3.0.0-canary.4704e79 → 3.0.0-canary.483db21

package/dist/features/upload/validate.js

@@ -0,0 +1,45 @@
+import { buildStateFromSchema } from '@payloadcms/ui/forms/buildStateFromSchema';
+import { isValidID } from 'payload';
+export const uploadValidation = (props)=>{
+    return async ({ node, validation: { options: { id, operation, preferences, req, req: { payload, t } } } })=>{
+        const idType = payload.collections[node.relationTo].customIDType || payload.db.defaultIDType;
+        // @ts-expect-error
+        const nodeID = node?.value?.id || node?.value // for backwards-compatibility
+        ;
+        if (!isValidID(nodeID, idType)) {
+            return t('validation:validUploadID');
+        }
+        if (!props?.collections) {
+            return true;
+        }
+        if (Object.keys(props?.collections).length === 0) {
+            return true;
+        }
+        const collection = props?.collections[node.relationTo];
+        if (!collection?.fields?.length) {
+            return true;
+        }
+        const result = await buildStateFromSchema({
+            id,
+            collectionSlug: node.relationTo,
+            data: node?.fields ?? {},
+            fieldSchema: collection.fields,
+            operation: operation === 'create' || operation === 'update' ? operation : 'update',
+            preferences,
+            req,
+            siblingData: node?.fields ?? {}
+        });
+        let errorPaths = [];
+        for(const fieldKey in result){
+            if (result[fieldKey].errorPaths) {
+                errorPaths = errorPaths.concat(result[fieldKey].errorPaths);
+            }
+        }
+        if (errorPaths.length) {
+            return 'The following fields are invalid: ' + errorPaths.join(', ');
+        }
+        return true;
+    };
+};
+
+//# sourceMappingURL=validate.js.map

package/dist/features/upload/validate.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/features/upload/validate.ts"],"sourcesContent":["import { buildStateFromSchema } from '@payloadcms/ui/forms/buildStateFromSchema'\nimport { isValidID } from 'payload'\n\nimport type { NodeValidation } from '../typesServer.js'\nimport type { UploadFeatureProps } from './feature.server.js'\nimport type { SerializedUploadNode } from './nodes/UploadNode.js'\n\nexport const uploadValidation = (\n  props: UploadFeatureProps,\n): NodeValidation<SerializedUploadNode> => {\n  return async ({\n    node,\n    validation: {\n      options: {\n        id,\n        operation,\n        preferences,\n        req,\n        req: { payload, t },\n      },\n    },\n  }) => {\n    const idType = payload.collections[node.relationTo].customIDType || payload.db.defaultIDType\n    // @ts-expect-error\n    const nodeID = node?.value?.id || node?.value // for backwards-compatibility\n\n    if (!isValidID(nodeID, idType)) {\n      return t('validation:validUploadID')\n    }\n\n    if (!props?.collections) {\n      return true\n    }\n\n    if (Object.keys(props?.collections).length === 0) {\n      return true\n    }\n\n    const collection = props?.collections[node.relationTo]\n\n    if (!collection?.fields?.length) {\n      return true\n    }\n\n    const result = await buildStateFromSchema({\n      id,\n      collectionSlug: node.relationTo,\n      data: node?.fields ?? {},\n      fieldSchema: collection.fields,\n      operation: operation === 'create' || operation === 'update' ? operation : 'update',\n      preferences,\n      req,\n      siblingData: node?.fields ?? {},\n    })\n\n    let errorPaths = []\n    for (const fieldKey in result) {\n      if (result[fieldKey].errorPaths) {\n        errorPaths = errorPaths.concat(result[fieldKey].errorPaths)\n      }\n    }\n\n    if (errorPaths.length) {\n      return 'The following fields are invalid: ' + errorPaths.join(', ')\n    }\n\n    return true\n  }\n}\n"],"names":["buildStateFromSchema","isValidID","uploadValidation","props","node","validation","options","id","operation","preferences","req","payload","t","idType","collections","relationTo","customIDType","db","defaultIDType","nodeID","value","Object","keys","length","collection","fields","result","collectionSlug","data","fieldSchema","siblingData","errorPaths","fieldKey","concat","join"],"mappings":"AAAA,SAASA,oBAAoB,QAAQ,4CAA2C;AAChF,SAASC,SAAS,QAAQ,UAAS;AAMnC,OAAO,MAAMC,mBAAmB,CAC9BC;IAEA,OAAO,OAAO,EACZC,IAAI,EACJC,YAAY,EACVC,SAAS,EACPC,EAAE,EACFC,SAAS,EACTC,WAAW,EACXC,GAAG,EACHA,KAAK,EAAEC,OAAO,EAAEC,CAAC,EAAE,EACpB,EACF,EACF;QACC,MAAMC,SAASF,QAAQG,WAAW,CAACV,KAAKW,UAAU,CAAC,CAACC,YAAY,IAAIL,QAAQM,EAAE,CAACC,aAAa;QAC5F,mBAAmB;QACnB,MAAMC,SAASf,MAAMgB,OAAOb,MAAMH,MAAMgB,MAAM,8BAA8B;;QAE5E,IAAI,CAACnB,UAAUkB,QAAQN,SAAS;YAC9B,OAAOD,EAAE;QACX;QAEA,IAAI,CAACT,OAAOW,aAAa;YACvB,OAAO;QACT;QAEA,IAAIO,OAAOC,IAAI,CAACnB,OAAOW,aAAaS,MAAM,KAAK,GAAG;YAChD,OAAO;QACT;QAEA,MAAMC,aAAarB,OAAOW,WAAW,CAACV,KAAKW,UAAU,CAAC;QAEtD,IAAI,CAACS,YAAYC,QAAQF,QAAQ;YAC/B,OAAO;QACT;QAEA,MAAMG,SAAS,MAAM1B,qBAAqB;YACxCO;YACAoB,gBAAgBvB,KAAKW,UAAU;YAC/Ba,MAAMxB,MAAMqB,UAAU,CAAC;YACvBI,aAAaL,WAAWC,MAAM;YAC9BjB,WAAWA,cAAc,YAAYA,cAAc,WAAWA,YAAY;YAC1EC;YACAC;YACAoB,aAAa1B,MAAMqB,UAAU,CAAC;QAChC;QAEA,IAAIM,aAAa,EAAE;QACnB,IAAK,MAAMC,YAAYN,OAAQ;YAC7B,IAAIA,MAAM,CAACM,SAAS,CAACD,UAAU,EAAE;gBAC/BA,aAAaA,WAAWE,MAAM,CAACP,MAAM,CAACM,SAAS,CAACD,UAAU;YAC5D;QACF;QAEA,IAAIA,WAAWR,MAAM,EAAE;YACrB,OAAO,uCAAuCQ,WAAWG,IAAI,CAAC;QAChE;QAEA,OAAO;IACT;AACF,EAAC"}

package/dist/field/Field.d.ts

@@ -1,12 +1,12 @@
-import type { FormFieldBase } from '@payloadcms/ui/fields/shared';
+import type { FormFieldBase } from 'payload';
 import React from 'react';
-import type { SanitizedClientEditorConfig } from './lexical/config/types.js';
-import './index.scss';
+import type { SanitizedClientEditorConfig } from '../lexical/config/types.js';
 import './bundled.css';
-export declare const RichText: React.FC<FormFieldBase & {
+import './index.scss';
+export declare const RichText: React.FC<{
     editorConfig: SanitizedClientEditorConfig;
     name: string;
     richTextComponentMap: Map<string, React.ReactNode>;
     width?: string;
-}>;
+} & FormFieldBase>;
 //# sourceMappingURL=Field.d.ts.map

package/dist/field/Field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../src/field/Field.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAA;AAWjE,OAAO,KAAsB,MAAM,OAAO,CAAA;AAG1C,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,2BAA2B,CAAA;AAE5E,OAAO,cAAc,CAAA;AACrB,OAAO,eAAe,CAAA;AA2HtB,eAAO,MAAM,QAAQ;kBApHH,2BAA2B;UACnC,MAAM;0BACU,IAAI,MAAM,EAAE,MAAM,SAAS,CAAC;YAC1C,MAAM;EAiH8B,CAAA"}
+{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../src/field/Field.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAU5C,OAAO,KAAsB,MAAM,OAAO,CAAA;AAG1C,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,4BAA4B,CAAA;AAG7E,OAAO,eAAe,CAAA;AACtB,OAAO,cAAc,CAAA;AAsIrB,eAAO,MAAM,QAAQ;kBAhIH,2BAA2B;UACnC,MAAM;0BACU,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;YAC1C,MAAM;kBA6HsC,CAAA"}

package/dist/field/Field.js

@@ -1,13 +1,13 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { FieldDescription, FieldError, FieldLabel, useField, useFieldProps, withCondition } from '@payloadcms/ui/client';
+import { FieldDescription, FieldError, FieldLabel, useField, useFieldProps, withCondition } from '@payloadcms/ui';
 import React, { useCallback } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
+import { LexicalProvider } from '../lexical/LexicalProvider.js';
 import './bundled.css';
-import { LexicalProvider } from './lexical/LexicalProvider.js';
 const baseClass = 'rich-text-lexical';
-const _RichText = (props)=>{
-    const { name, CustomDescription, CustomError, CustomLabel, className, descriptionProps, editorConfig, errorProps, label, labelProps, path: pathFromProps, readOnly, required, style, validate, width } = props;
+const RichTextComponent = (props)=>{
+    const { name, CustomDescription, CustomError, CustomLabel, className, descriptionProps, editorConfig, errorProps, label, labelProps, path: pathFromProps, readOnly: readOnlyFromProps, required, style, validate, width } = props;
     const memoizedValidate = useCallback((value, validationOptions)=>{
         if (typeof validate === 'function') {
             return validate(value, {
@@ -23,18 +23,19 @@ const _RichText = (props)=>{
         validate,
         required
     ]);
-    const { path: pathFromContext } = useFieldProps();
+    const { path: pathFromContext, readOnly: readOnlyFromContext } = useFieldProps();
     const fieldType = useField({
         path: pathFromContext ?? pathFromProps ?? name,
         validate: memoizedValidate
     });
-    const { errorMessage, initialValue, path, schemaPath, setValue, showError, value } = fieldType;
+    const { errorMessage, formInitializing, formProcessing, initialValue, path, schemaPath, setValue, showError, value } = fieldType;
+    const disabled = readOnlyFromProps || readOnlyFromContext || formProcessing || formInitializing;
     const classes = [
         baseClass,
         'field-type',
         className,
         showError && 'error',
-        readOnly && `${baseClass}--read-only`,
+        disabled && `${baseClass}--read-only`,
         editorConfig?.admin?.hideGutter !== true ? `${baseClass}--show-gutter` : null
     ].filter(Boolean).join(' ');
     return /*#__PURE__*/ _jsxs("div", {
@@ -44,6 +45,12 @@ const _RichText = (props)=>{
             width
         },
         children: [
+            /*#__PURE__*/ _jsx(FieldError, {
+                CustomError: CustomError,
+                path: path,
+                ...errorProps || {},
+                alignCaret: "left"
+            }),
             /*#__PURE__*/ _jsx(FieldLabel, {
                 CustomLabel: CustomLabel,
                 label: label,
@@ -53,11 +60,6 @@ const _RichText = (props)=>{
             /*#__PURE__*/ _jsxs("div", {
                 className: `${baseClass}__wrap`,
                 children: [
-                    /*#__PURE__*/ _jsx(FieldError, {
-                        CustomError: CustomError,
-                        path: path,
-                        ...errorProps || {}
-                    }),
                     /*#__PURE__*/ _jsx(ErrorBoundary, {
                         fallbackRender: fallbackRender,
                         onReset: ()=>{},
@@ -77,7 +79,7 @@ const _RichText = (props)=>{
                                 setValue(serializedEditorState);
                             },
                             path: path,
-                            readOnly: readOnly,
+                            readOnly: disabled,
                             value: value
                         }, JSON.stringify({
                             initialValue,
@@ -110,6 +112,6 @@ function fallbackRender({ error }) {
         ]
     });
 }
-export const RichText = withCondition(_RichText);
+export const RichText = withCondition(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 { FormFieldBase } from '@payloadcms/ui/fields/shared'\nimport type { SerializedEditorState } from 'lexical'\n\nimport {\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n  useField,\n  useFieldProps,\n  withCondition,\n} from '@payloadcms/ui/client'\nimport React, { useCallback } from 'react'\nimport { ErrorBoundary } from 'react-error-boundary'\n\nimport type { SanitizedClientEditorConfig } from './lexical/config/types.js'\n\nimport './index.scss'\nimport './bundled.css'\nimport { LexicalProvider } from './lexical/LexicalProvider.js'\n\nconst baseClass = 'rich-text-lexical'\n\nconst _RichText: React.FC<\n  FormFieldBase & {\n    editorConfig: SanitizedClientEditorConfig // With rendered features n stuff\n    name: string\n    richTextComponentMap: Map<string, React.ReactNode>\n    width?: string\n  }\n> = (props) => {\n  const {\n    name,\n    CustomDescription,\n    CustomError,\n    CustomLabel,\n    className,\n    descriptionProps,\n    editorConfig,\n    errorProps,\n    label,\n    labelProps,\n    path: pathFromProps,\n    readOnly,\n    required,\n    style,\n    validate, // Users can pass in client side validation if they WANT to, but it's not required anymore\n    width,\n  } = props\n\n  const memoizedValidate = useCallback(\n    (value, validationOptions) => {\n      if (typeof validate === 'function') {\n        return validate(value, { ...validationOptions, props, 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  const { path: pathFromContext } = useFieldProps()\n\n  const fieldType = useField<SerializedEditorState>({\n    path: pathFromContext ?? pathFromProps ?? name,\n    validate: memoizedValidate,\n  })\n\n  const { errorMessage, initialValue, path, schemaPath, setValue, showError, value } = fieldType\n\n  const classes = [\n    baseClass,\n    'field-type',\n    className,\n    showError && 'error',\n    readOnly && `${baseClass}--read-only`,\n    editorConfig?.admin?.hideGutter !== true ? `${baseClass}--show-gutter` : null,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  return (\n    <div\n      className={classes}\n      key={path}\n      style={{\n        ...style,\n        width,\n      }}\n    >\n      <FieldLabel\n        CustomLabel={CustomLabel}\n        label={label}\n        required={required}\n        {...(labelProps || {})}\n      />\n      <div className={`${baseClass}__wrap`}>\n        <FieldError CustomError={CustomError} path={path} {...(errorProps || {})} />\n        <ErrorBoundary fallbackRender={fallbackRender} onReset={() => {}}>\n          <LexicalProvider\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={(editorState) => {\n              let serializedEditorState = editorState.toJSON()\n\n              // Transform state through save hooks\n              if (editorConfig?.features?.hooks?.save?.length) {\n                editorConfig.features.hooks.save.forEach((hook) => {\n                  serializedEditorState = hook({ incomingEditorState: serializedEditorState })\n                })\n              }\n\n              setValue(serializedEditorState)\n            }}\n            path={path}\n            readOnly={readOnly}\n            value={value}\n          />\n        </ErrorBoundary>\n        {CustomDescription !== undefined ? (\n          CustomDescription\n        ) : (\n          <FieldDescription {...(descriptionProps || {})} />\n        )}\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 = withCondition(_RichText)\n"],"names":["FieldDescription","FieldError","FieldLabel","useField","useFieldProps","withCondition","React","useCallback","ErrorBoundary","LexicalProvider","baseClass","_RichText","props","name","CustomDescription","CustomError","CustomLabel","className","descriptionProps","editorConfig","errorProps","label","labelProps","path","pathFromProps","readOnly","required","style","validate","width","memoizedValidate","value","validationOptions","pathFromContext","fieldType","errorMessage","initialValue","schemaPath","setValue","showError","classes","admin","hideGutter","filter","Boolean","join","div","fallbackRender","onReset","fieldProps","onChange","editorState","serializedEditorState","toJSON","features","hooks","save","length","forEach","hook","incomingEditorState","JSON","stringify","undefined","error","role","p","pre","color","message","RichText"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../../src/field/Field.tsx"],"sourcesContent":["'use client'\nimport type { SerializedEditorState } from 'lexical'\nimport type { FormFieldBase } from 'payload'\n\nimport {\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n  useField,\n  useFieldProps,\n  withCondition,\n} from '@payloadcms/ui'\nimport React, { useCallback } from 'react'\nimport { ErrorBoundary } from 'react-error-boundary'\n\nimport type { SanitizedClientEditorConfig } from '../lexical/config/types.js'\n\nimport { LexicalProvider } from '../lexical/LexicalProvider.js'\nimport './bundled.css'\nimport './index.scss'\n\nconst baseClass = 'rich-text-lexical'\n\nconst RichTextComponent: React.FC<\n  {\n    editorConfig: SanitizedClientEditorConfig // With rendered features n stuff\n    name: string\n    richTextComponentMap: Map<string, React.ReactNode>\n    width?: string\n  } & FormFieldBase\n> = (props) => {\n  const {\n    name,\n    CustomDescription,\n    CustomError,\n    CustomLabel,\n    className,\n    descriptionProps,\n    editorConfig,\n    errorProps,\n    label,\n    labelProps,\n    path: pathFromProps,\n    readOnly: readOnlyFromProps,\n    required,\n    style,\n    validate, // Users can pass in client side validation if they WANT to, but it's not required anymore\n    width,\n  } = props\n\n  const memoizedValidate = useCallback(\n    (value, validationOptions) => {\n      if (typeof validate === 'function') {\n        return validate(value, { ...validationOptions, props, 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  const { path: pathFromContext, readOnly: readOnlyFromContext } = useFieldProps()\n\n  const fieldType = useField<SerializedEditorState>({\n    path: pathFromContext ?? pathFromProps ?? name,\n    validate: memoizedValidate,\n  })\n\n  const {\n    errorMessage,\n    formInitializing,\n    formProcessing,\n    initialValue,\n    path,\n    schemaPath,\n    setValue,\n    showError,\n    value,\n  } = fieldType\n\n  const disabled = readOnlyFromProps || readOnlyFromContext || 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  return (\n    <div\n      className={classes}\n      key={path}\n      style={{\n        ...style,\n        width,\n      }}\n    >\n      <FieldError CustomError={CustomError} path={path} {...(errorProps || {})} alignCaret=\"left\" />\n      <FieldLabel\n        CustomLabel={CustomLabel}\n        label={label}\n        required={required}\n        {...(labelProps || {})}\n      />\n      <div className={`${baseClass}__wrap`}>\n        <ErrorBoundary fallbackRender={fallbackRender} onReset={() => {}}>\n          <LexicalProvider\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={(editorState) => {\n              let serializedEditorState = editorState.toJSON()\n\n              // Transform state through save hooks\n              if (editorConfig?.features?.hooks?.save?.length) {\n                editorConfig.features.hooks.save.forEach((hook) => {\n                  serializedEditorState = hook({ incomingEditorState: serializedEditorState })\n                })\n              }\n\n              setValue(serializedEditorState)\n            }}\n            path={path}\n            readOnly={disabled}\n            value={value}\n          />\n        </ErrorBoundary>\n        {CustomDescription !== undefined ? (\n          CustomDescription\n        ) : (\n          <FieldDescription {...(descriptionProps || {})} />\n        )}\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 = withCondition(RichTextComponent)\n"],"names":["FieldDescription","FieldError","FieldLabel","useField","useFieldProps","withCondition","React","useCallback","ErrorBoundary","LexicalProvider","baseClass","RichTextComponent","props","name","CustomDescription","CustomError","CustomLabel","className","descriptionProps","editorConfig","errorProps","label","labelProps","path","pathFromProps","readOnly","readOnlyFromProps","required","style","validate","width","memoizedValidate","value","validationOptions","pathFromContext","readOnlyFromContext","fieldType","errorMessage","formInitializing","formProcessing","initialValue","schemaPath","setValue","showError","disabled","classes","admin","hideGutter","filter","Boolean","join","div","alignCaret","fallbackRender","onReset","fieldProps","onChange","editorState","serializedEditorState","toJSON","features","hooks","save","length","forEach","hook","incomingEditorState","JSON","stringify","undefined","error","role","p","pre","color","message","RichText"],"mappings":"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"}

package/dist/field/index.d.ts

@@ -1,11 +1,11 @@
-import type { FormFieldBase } from '@payloadcms/ui/fields/shared';
 import type { EditorConfig as LexicalEditorConfig } from 'lexical';
+import type { FormFieldBase } from 'payload';
 import React from 'react';
 import type { LexicalFieldAdminProps } from '../types.js';
-export declare const RichTextField: React.FC<FormFieldBase & {
+export declare const RichTextField: React.FC<{
     admin?: LexicalFieldAdminProps;
     lexicalEditorConfig: LexicalEditorConfig;
     name: string;
     richTextComponentMap: Map<string, React.ReactNode>;
-}>;
+} & FormFieldBase>;
 //# sourceMappingURL=index.d.ts.map

package/dist/field/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/field/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAA;AACjE,OAAO,KAAK,EAAE,YAAY,IAAI,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAGlE,OAAO,KAA8C,MAAM,OAAO,CAAA;AAElE,OAAO,KAAK,EAAqC,sBAAsB,EAAE,MAAM,aAAa,CAAA;AAY5F,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAClC,aAAa,GAAG;IACd,KAAK,CAAC,EAAE,sBAAsB,CAAA;IAC9B,mBAAmB,EAAE,mBAAmB,CAAA;IACxC,IAAI,EAAE,MAAM,CAAA;IACZ,oBAAoB,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,CAAA;CACnD,CAmHF,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/field/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,IAAI,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAClE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAG5C,OAAO,KAA8C,MAAM,OAAO,CAAA;AAIlE,OAAO,KAAK,EAAqC,sBAAsB,EAAE,MAAM,aAAa,CAAA;AAU5F,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAClC;IACE,KAAK,CAAC,EAAE,sBAAsB,CAAA;IAC9B,mBAAmB,EAAE,mBAAmB,CAAA;IACxC,IAAI,EAAE,MAAM,CAAA;IACZ,oBAAoB,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,CAAA;CACnD,GAAG,aAAa,CA0HlB,CAAA"}