@payloadcms/richtext-lexical 4.0.0-internal.9496957 → 4.0.0-internal.94ef095

package/dist/features/blocks/client/component/index.js

@@ -1,13 +1,14 @@
 'use client';
 
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { useLexicalEditable } from '@lexical/react/useLexicalEditable';
 import { getTranslation } from '@payloadcms/translations';
-import { Button, Collapsible, Drawer, EditDepthProvider, ErrorPill, Form, formatDrawerSlug, MoreIcon, Pill, Popup, PopupList, RenderFields, SectionTitle, useConfig, useDocumentForm, useDocumentInfo, useEditDepth, useFormSubmitted, useServerFunctions, useTranslation, XIcon } from '@payloadcms/ui';
+import { Button, Collapsible, Drawer, EditDepthProvider, ErrorPill, Form, formatDrawerSlug, MoreIcon, Pill, Popup, PopupList, RenderFields, SectionTitle, useConfig, useDocumentForm, useDocumentInfo, useEditDepth, useFormSubmitted, useOperation, useServerFunctions, useTranslation, XIcon } from '@payloadcms/ui';
 import { abortAndIgnore } from '@payloadcms/ui/shared';
 import { $getNodeByKey, $getRoot, SKIP_DOM_SELECTION_TAG } from 'lexical';
-import { deepCopyObjectSimpleWithoutReactComponents, reduceFieldsToValues } from 'payload/shared';
+import { deepCopyObjectSimpleWithoutReactComponents, getDataFromFormState } from 'payload/shared';
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { v4 as uuid } from 'uuid';
 import './index.css';
@@ -15,9 +16,10 @@ import '../../../../utilities/fieldsDrawer/index.css';
 import { useEditorConfigContext } from '../../../../lexical/config/client/EditorConfigProvider.js';
 import { RegisterFormSubmit, useDrawerSubmit } from '../../../../utilities/fieldsDrawer/useDrawerSubmit.js';
 import { useLexicalDrawer } from '../../../../utilities/fieldsDrawer/useLexicalDrawer.js';
+import { getCachedFormStateIfDataMatches } from '../getCachedFormStateIfDataMatches.js';
 import { $isBlockNode } from '../nodes/BlocksNode.js';
 import { BlockContent, useBlockComponentContext } from './BlockContent.js';
-import { removeEmptyArrayValues } from './removeEmptyArrayValues.js';
+import { BlockReordering } from './BlockReordering/index.js';
 export const BlockComponent = props => {
   const {
     cacheBuster,
@@ -45,7 +47,6 @@ export const BlockComponent = props => {
   const {
     fields: parentDocumentFields
   } = useDocumentForm();
-  const onChangeAbortControllerRef = useRef(new AbortController());
   const editDepth = useEditDepth();
   const [errorCount, setErrorCount] = React.useState(0);
   const {
@@ -67,32 +68,43 @@ export const BlockComponent = props => {
   } = useDocumentInfo();
   const [editor] = useLexicalComposerContext();
   const isEditable = useLexicalEditable();
+  const operation = useOperation();
   const blockType = formData.blockType;
+  const componentMapRenderedBlockPath = `${schemaPath}.lexical_internal_feature.blocks.lexical_blocks.${blockType}`;
+  const clientSchemaMap = featureClientSchemaMap['blocks'];
+  const blocksField = clientSchemaMap?.[componentMapRenderedBlockPath]?.[0];
+  const blockOrSlug = blocksField?.blocks?.[0];
+  const clientBlock = typeof blockOrSlug === 'string' ? config.blocksMap[blockOrSlug] : blockOrSlug;
   const {
     getFormState
   } = useServerFunctions();
   const schemaFieldsPath = `${schemaPath}.lexical_internal_feature.blocks.lexical_blocks.${blockType}.fields`;
   const [initialState, setInitialState] = React.useState(() => {
     // Initial form state that was calculated server-side. May have stale values
-    const cachedFormState = initialLexicalFormState?.[formData.id]?.formState;
+    const cachedState = initialLexicalFormState?.[formData.id];
+    const cachedFormState = cachedState?.formState;
     if (!cachedFormState) {
       return false;
     }
-    // Merge current formData values into the cached form state
-    // This ensures that when the component remounts (e.g., due to view changes), we don't lose user edits
-    const mergedState = Object.fromEntries(Object.entries(cachedFormState).map(([fieldName, fieldState]) => [fieldName, fieldName in formData ? {
-      ...fieldState,
-      initialValue: formData[fieldName],
-      value: formData[fieldName]
-    } : fieldState]));
+    const matchingCachedState = getCachedFormStateIfDataMatches({
+      cachedFormState,
+      cachedSchemaPath: cachedState.schemaPath,
+      currentSchemaPath: schemaFieldsPath,
+      formData
+    });
+    if (!matchingCachedState) {
+      return false;
+    }
     // Manually add blockName, as it's not part of cachedFormState
-    mergedState.blockName = {
-      initialValue: formData.blockName,
-      passesCondition: true,
-      valid: true,
-      value: formData.blockName
+    return {
+      ...matchingCachedState,
+      blockName: {
+        initialValue: formData.blockName,
+        passesCondition: true,
+        valid: true,
+        value: formData.blockName
+      }
     };
-    return mergedState;
   });
   const hasMounted = useRef(false);
   const prevCacheBuster = useRef(cacheBuster);
@@ -134,7 +146,7 @@ export const BlockComponent = props => {
         isEditor: true,
         isJSXConverter: false,
         nodeKey: nodeKey,
-        // eslint-disable-next-line react-compiler/react-compiler -- intentionally passed as a prop for custom block components to call
+        // eslint-disable-next-line react-hooks/hooks -- intentionally passed as a prop for custom block components to call
         useBlockComponentContext: useBlockComponentContext
       });
     }
@@ -148,7 +160,7 @@ export const BlockComponent = props => {
         isEditor: true,
         isJSXConverter: false,
         nodeKey: nodeKey,
-        // eslint-disable-next-line react-compiler/react-compiler -- intentionally passed as a prop for custom block components to call
+        // eslint-disable-next-line react-hooks/hooks -- intentionally passed as a prop for custom block components to call
         useBlockComponentContext: useBlockComponentContext
       });
     }
@@ -173,12 +185,10 @@ export const BlockComponent = props => {
           fields: true
         },
         docPreferences: await getDocPreferences(),
-        documentFormState: deepCopyObjectSimpleWithoutReactComponents(parentDocumentFields, {
-          excludeFiles: true
-        }),
+        documentFormState: parentDocumentFields,
         globalSlug,
         initialBlockData: formData,
-        operation: 'update',
+        operation,
         readOnly: !isEditable,
         renderAllFields: true,
         schemaPath: schemaFieldsPath,
@@ -191,7 +201,7 @@ export const BlockComponent = props => {
           valid: true,
           value: formData.blockName
         };
-        const newFormStateData = reduceFieldsToValues(deepCopyObjectSimpleWithoutReactComponents(state, {
+        const newFormStateData = getDataFromFormState(deepCopyObjectSimpleWithoutReactComponents(state, {
           excludeFiles: true
         }), true);
         // Things like default values may come back from the server => update the node with the new data
@@ -217,61 +227,24 @@ export const BlockComponent = props => {
         }
       }
     };
-    if (formData && !initialState) {
+    if (clientBlock && formData && !initialState) {
       void awaitInitialState();
     }
     return () => {
       abortAndIgnore(abortController);
     };
-  }, [getFormState, schemaFieldsPath, isEditable, id, CustomLabelFromProps, CustomBlockFromProps, formData, editor, nodeKey, initialState, collectionSlug, globalSlug, getDocPreferences, parentDocumentFields, blockType]);
+  }, [getFormState, schemaFieldsPath, isEditable, id, CustomLabelFromProps, CustomBlockFromProps, formData, editor, nodeKey, initialState, collectionSlug, globalSlug, getDocPreferences, operation, parentDocumentFields, blockType, clientBlock]);
   const [isCollapsed, setIsCollapsed] = React.useState(initialLexicalFormState?.[formData.id]?.collapsed ?? false);
-  const componentMapRenderedBlockPath = `${schemaPath}.lexical_internal_feature.blocks.lexical_blocks.${blockType}`;
-  const clientSchemaMap = featureClientSchemaMap['blocks'];
-  const blocksField = clientSchemaMap?.[componentMapRenderedBlockPath]?.[0];
-  const blockOrSlug = blocksField?.blocks?.[0];
-  const clientBlock = typeof blockOrSlug === 'string' ? config.blocksMap[blockOrSlug] : blockOrSlug;
   const {
     i18n,
     t
   } = useTranslation();
-  const onChange = useCallback(async ({
-    formState: prevFormState,
-    submit
-  }) => {
-    abortAndIgnore(onChangeAbortControllerRef.current);
-    const controller = new AbortController();
-    onChangeAbortControllerRef.current = controller;
-    const {
-      state: newFormState
-    } = await getFormState({
-      id,
-      collectionSlug,
-      docPermissions: {
-        fields: true
-      },
-      docPreferences: await getDocPreferences(),
-      documentFormState: deepCopyObjectSimpleWithoutReactComponents(parentDocumentFields, {
-        excludeFiles: true
-      }),
-      formState: prevFormState,
-      globalSlug,
-      initialBlockFormState: prevFormState,
-      operation: 'update',
-      readOnly: !isEditable,
-      renderAllFields: submit ? true : false,
-      schemaPath: schemaFieldsPath,
-      signal: controller.signal
-    });
-    if (!newFormState) {
-      return prevFormState;
-    }
+  const applyServerState = useCallback((newFormState, prevFormState) => {
     if (prevFormState.blockName) {
       newFormState.blockName = prevFormState.blockName;
     }
-    const newFormStateData_0 = reduceFieldsToValues(removeEmptyArrayValues({
-      fields: deepCopyObjectSimpleWithoutReactComponents(newFormState, {
-        excludeFiles: true
-      })
+    const newFormStateData_0 = getDataFromFormState(deepCopyObjectSimpleWithoutReactComponents(newFormState, {
+      excludeFiles: true
     }), true);
     setTimeout(() => {
       editor.update(() => {
@@ -288,28 +261,22 @@ export const BlockComponent = props => {
         tag: SKIP_DOM_SELECTION_TAG
       });
     }, 0);
-    if (submit) {
+  }, [blockType, editor, nodeKey]);
+  const onChange = useCallback(({
+    formState,
+    submitted: submitted_0
+  }) => {
+    applyServerState(formState, formState);
+    if (submitted_0) {
       if (!CustomLabelFromProps) {
-        setCustomLabel(newFormState._components?.customComponents?.BlockLabel ?? undefined);
+        setCustomLabel(formState._components?.customComponents?.BlockLabel ?? undefined);
       }
       if (!CustomBlockFromProps) {
-        setCustomBlock(newFormState._components?.customComponents?.Block ?? undefined);
-      }
-      let rowErrorCount = 0;
-      for (const formField of Object.values(newFormState)) {
-        if (formField?.valid === false) {
-          rowErrorCount++;
-        }
+        setCustomBlock(formState._components?.customComponents?.Block ?? undefined);
       }
-      setErrorCount(rowErrorCount);
+      setErrorCount(Object.values(formState).filter(field => field.valid === false).length);
     }
-    return newFormState;
-  }, [getFormState, id, collectionSlug, getDocPreferences, globalSlug, schemaFieldsPath, blockType, parentDocumentFields, isEditable, editor, nodeKey, CustomBlockFromProps, CustomLabelFromProps]);
-  useEffect(() => {
-    return () => {
-      abortAndIgnore(onChangeAbortControllerRef.current);
-    };
-  }, []);
+  }, [applyServerState, CustomLabelFromProps, CustomBlockFromProps]);
   const removeBlock = useCallback(() => {
     editor.update(() => {
       $getNodeByKey(nodeKey)?.remove();
@@ -394,7 +361,7 @@ export const BlockComponent = props => {
     round: true,
     tooltip: "Remove Block"
   }), [baseClass, isEditable, removeBlock]);
-  const BlockCollapsible = useMemo(() => ({
+  const BlockCollapsible = useMemo(() => function BlockCollapsible({
     Actions,
     children: children_0,
     className,
@@ -408,77 +375,133 @@ export const BlockComponent = props => {
     removeButton,
     showDragHandle = true,
     showRowNumber = true
-  }) => {
-    return /*#__PURE__*/_jsx("div", {
-      className: `${baseClass}__container ${baseClass}-${blockType}`,
-      children: /*#__PURE__*/_jsx(Collapsible, {
-        actions: typeof Actions !== 'undefined' ? Actions : isEditable ? /*#__PURE__*/_jsx(Popup, {
-          button: /*#__PURE__*/_jsx(MoreIcon, {}),
-          buttonClassName: `${baseClass}__actions-button`,
-          caret: false,
-          horizontalAlign: "right",
-          render: ({
-            close
-          }) => /*#__PURE__*/_jsxs(PopupList.ButtonGroup, {
-            buttonSize: "medium",
-            children: [(resolvedCustomBlock && editButton !== false || !resolvedCustomBlock && editButton) && /*#__PURE__*/_jsx(PopupList.Button, {
-              onClick: () => {
-                toggleDrawer();
-                close();
-              },
-              children: t('general:edit')
-            }), removeButton !== false && /*#__PURE__*/_jsxs(PopupList.Button, {
-              onClick: () => {
-                removeBlock();
-                close();
-              },
-              children: [/*#__PURE__*/_jsx(XIcon, {}), t('general:remove')]
-            })]
+  }) {
+    return /*#__PURE__*/_jsx(BlockReordering, {
+      editor: editor,
+      nodeKey: nodeKey,
+      children: ({
+        isReordering,
+        move,
+        onBlur,
+        onKeyDown,
+        reorderInstructionsID,
+        targetIndex
+      }) => /*#__PURE__*/_jsx("div", {
+        className: `${baseClass}__container ${baseClass}-${blockType}`,
+        onKeyDownCapture: event => {
+          const target = event.target;
+          if (event.altKey || event.ctrlKey || event.metaKey || target.closest('.collapsible')?.parentElement !== event.currentTarget) {
+            return;
+          }
+          // Handle controls before Lexical consumes keys using its retained text selection.
+          if (target.matches('.collapsible__drag') && (event.key !== 'Escape' || isReordering) && [' ', 'ArrowDown', 'ArrowUp', 'Enter', 'Escape', 'Tab'].includes(event.key)) {
+            onKeyDown(event);
+            event.stopPropagation();
+          } else if (event.key === 'Tab' && target.matches('.collapsible__toggle')) {
+            event.stopPropagation();
+          }
+        },
+        children: /*#__PURE__*/_jsxs(Collapsible, {
+          actions: typeof Actions !== 'undefined' ? Actions : isEditable ? /*#__PURE__*/_jsx(Popup, {
+            button: /*#__PURE__*/_jsx(MoreIcon, {}),
+            buttonAriaLabel: t('general:moreOptions'),
+            buttonClassName: `${baseClass}__actions-button`,
+            caret: false,
+            horizontalAlign: "right",
+            popupType: "menu",
+            render: ({
+              close
+            }) => /*#__PURE__*/_jsxs(PopupList.ButtonGroup, {
+              buttonSize: "medium",
+              children: [/*#__PURE__*/_jsx(PopupList.Button, {
+                onClick: () => {
+                  close();
+                  move({
+                    direction: -1
+                  });
+                },
+                children: t('general:moveUp')
+              }), /*#__PURE__*/_jsx(PopupList.Button, {
+                onClick: () => {
+                  close();
+                  move({
+                    direction: 1
+                  });
+                },
+                children: t('general:moveDown')
+              }), (resolvedCustomBlock && editButton !== false || !resolvedCustomBlock && editButton) && /*#__PURE__*/_jsx(PopupList.Button, {
+                onClick: () => {
+                  toggleDrawer();
+                  close();
+                },
+                children: t('general:edit')
+              }), removeButton !== false && /*#__PURE__*/_jsxs(PopupList.Button, {
+                onClick: () => {
+                  removeBlock();
+                  close();
+                },
+                children: [/*#__PURE__*/_jsx(XIcon, {}), t('general:remove')]
+              })]
+            }),
+            size: "large"
+          }) : null,
+          className: [`${baseClass}__row`, fieldHasErrors ? `${baseClass}__row--has-errors` : `${baseClass}__row--no-errors`, className].filter(Boolean).join(' '),
+          collapsibleStyle: fieldHasErrors ? 'error' : 'default',
+          dragHandleProps: showDragHandle && isEditable ? {
+            id: nodeKey,
+            attributes: {
+              'aria-describedby': reorderInstructionsID,
+              'aria-pressed': isReordering,
+              role: 'button',
+              tabIndex: 0
+            },
+            draggable: true,
+            listeners: {
+              onBlur
+            }
+          } : undefined,
+          header: /*#__PURE__*/_jsx("div", {
+            className: `${baseClass}__block-header`,
+            children: typeof Label !== 'undefined' ? Label : typeof resolvedCustomLabel !== 'undefined' ? resolvedCustomLabel : /*#__PURE__*/_jsxs("div", {
+              className: `${baseClass}__block-label`,
+              children: [showRowNumber && /*#__PURE__*/_jsx("span", {
+                className: `${baseClass}__block-number`,
+                children: String(rowIndex + 1).padStart(2, '0')
+              }), typeof CustomPill !== 'undefined' ? CustomPill : /*#__PURE__*/_jsx(Pill, {
+                className: `${baseClass}__block-pill ${baseClass}__block-pill-${blockType}`,
+                pillStyle: "white",
+                size: "small",
+                children: blockDisplayName ?? blockType
+              }), !disableBlockName && !clientBlock?.admin?.disableBlockName && /*#__PURE__*/_jsx(SectionTitle, {
+                path: "blockName",
+                readOnly: !isEditable
+              }), fieldHasErrors && /*#__PURE__*/_jsx(BlockErrorPill, {
+                count: errorCount_0 ?? 0
+              })]
+            })
           }),
-          size: "large"
-        }) : null,
-        className: [`${baseClass}__row`, fieldHasErrors ? `${baseClass}__row--has-errors` : `${baseClass}__row--no-errors`, className].filter(Boolean).join(' '),
-        collapsibleStyle: fieldHasErrors ? 'error' : 'default',
-        dragHandleProps: showDragHandle ? {
-          id: nodeKey,
-          attributes: {
-            role: 'button',
-            tabIndex: 0
+          isCollapsed: isCollapsed,
+          onToggle: incomingCollapsedState => {
+            onCollapsedChange(incomingCollapsedState);
+            setIsCollapsed(incomingCollapsedState);
           },
-          listeners: {}
-        } : undefined,
-        header: /*#__PURE__*/_jsx("div", {
-          className: `${baseClass}__block-header`,
-          children: typeof Label !== 'undefined' ? Label : typeof resolvedCustomLabel !== 'undefined' ? resolvedCustomLabel : /*#__PURE__*/_jsxs("div", {
-            className: `${baseClass}__block-label`,
-            children: [showRowNumber && /*#__PURE__*/_jsx("span", {
-              className: `${baseClass}__block-number`,
-              children: String(rowIndex + 1).padStart(2, '0')
-            }), typeof CustomPill !== 'undefined' ? CustomPill : /*#__PURE__*/_jsx(Pill, {
-              className: `${baseClass}__block-pill ${baseClass}__block-pill-${blockType}`,
-              pillStyle: "white",
-              size: "small",
-              children: blockDisplayName ?? blockType
-            }), !disableBlockName && !clientBlock?.admin?.disableBlockName && /*#__PURE__*/_jsx(SectionTitle, {
-              path: "blockName",
-              readOnly: !isEditable
-            }), fieldHasErrors && /*#__PURE__*/_jsx(ErrorPill, {
-              count: errorCount_0 ?? 0,
-              i18n: i18n,
-              withMessage: true
+          ...(collapsibleProps || {}),
+          AfterCollapsible: /*#__PURE__*/_jsxs(_Fragment, {
+            children: [collapsibleProps?.AfterCollapsible, /*#__PURE__*/_jsx("span", {
+              className: "sr-only",
+              role: "status",
+              children: isReordering ? `${t('general:order')}: ${(targetIndex ?? 0) + 1}` : ''
             })]
-          })
-        }),
-        isCollapsed: isCollapsed,
-        onToggle: incomingCollapsedState => {
-          onCollapsedChange(incomingCollapsedState);
-          setIsCollapsed(incomingCollapsedState);
-        },
-        ...(collapsibleProps || {}),
-        children: children_0
-      }, 0)
+          }),
+          children: [/*#__PURE__*/_jsxs("span", {
+            className: "sr-only",
+            id: reorderInstructionsID,
+            children: ["Space / Enter · ", t('general:moveUp'), " ↑ · ", t('general:moveDown'), " ↓ ·", ' ', t('general:cancel'), " Escape"]
+          }), children_0]
+        }, 0)
+      })
     });
-  }, [resolvedCustomBlock, resolvedCustomLabel, blockDisplayName, baseClass, clientBlock?.admin?.disableBlockName, blockType, i18n, isCollapsed, onCollapsedChange, isEditable, nodeKey, removeBlock, rowIndex, t, toggleDrawer]);
+  }, [editor, resolvedCustomBlock, resolvedCustomLabel, blockDisplayName, baseClass, clientBlock?.admin?.disableBlockName, blockType, isCollapsed, onCollapsedChange, isEditable, nodeKey, removeBlock, rowIndex, t, toggleDrawer]);
   const blockID = formData?.id;
   const {
     headerActions,
@@ -519,21 +542,13 @@ export const BlockComponent = props => {
         display: 'contents'
       },
       children: /*#__PURE__*/_jsx(Form, {
-        beforeSubmit: [async ({
-          formState
-        }) => {
-          // This is only called when form is submitted from drawer - usually only the case if the block has a custom Block component
-          return await onChange({
-            formState,
-            submit: true
-          });
-        }],
         el: "div",
         fields: clientBlock?.fields ?? [],
         initialState: initialState,
         onChange: [onChange],
-        onSubmit: (formState_0, newData_1) => {
+        onSubmit: formState_0 => {
           // This is only called when form is submitted from drawer - usually only the case if the block has a custom Block component
+          const newData_1 = getDataFromFormState(formState_0, true);
           newData_1.blockType = blockType;
           editor.update(() => {
             const node_1 = $getNodeByKey(nodeKey);
@@ -548,6 +563,8 @@ export const BlockComponent = props => {
           });
           toggleDrawer();
         },
+        readOnly: !isEditable,
+        schemaPath: schemaFieldsPath,
         submitted: submitted,
         uuid: formUuid,
         children: /*#__PURE__*/_jsx(BlockContent, {
@@ -565,7 +582,7 @@ export const BlockComponent = props => {
         })
       })
     });
-  }, [BlockCollapsible, BlockDrawer, resolvedCustomBlock, resolvedCustomLabel, blockType, drawerSlug, RemoveButton, EditButton, baseClass, editor, errorCount, toggleDrawer, clientBlock?.fields, formUuid, initialState, nodeKey, onChange, submitted]);
+  }, [BlockCollapsible, BlockDrawer, resolvedCustomBlock, resolvedCustomLabel, blockType, drawerSlug, RemoveButton, EditButton, baseClass, editor, errorCount, toggleDrawer, clientBlock?.fields, formUuid, initialState, nodeKey, schemaFieldsPath, isEditable, onChange, submitted]);
   if (!clientBlock) {
     return /*#__PURE__*/_jsx(BlockCollapsible, {
       disableBlockName: true,
@@ -578,4 +595,32 @@ export const BlockComponent = props => {
   }
   return Block;
 };
+/**
+ * Reads `i18n` itself so `BlockCollapsible` does not depend on it. `BlockCollapsible` is created in
+ * a `useMemo`, so each new `i18n` object (e.g. once the date-fns locale is set after mount) would
+ * remount the whole block, closing its open menus and dropping focus.
+ */
+const BlockErrorPill = t0 => {
+  const $ = _c(3);
+  const {
+    count
+  } = t0;
+  const {
+    i18n
+  } = useTranslation();
+  let t1;
+  if ($[0] !== count || $[1] !== i18n) {
+    t1 = _jsx(ErrorPill, {
+      count,
+      i18n,
+      withMessage: true
+    });
+    $[0] = count;
+    $[1] = i18n;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+};
 //# sourceMappingURL=index.js.map