@payloadcms/richtext-lexical 4.0.0-internal.293e026 → 4.0.0-internal.2a3c3bc

package/dist/features/align/client/toolbarAlignGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toolbarAlignGroup.d.ts","sourceRoot":"","sources":["../../../../src/features/align/client/toolbarAlignGroup.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAI7E,eAAO,MAAM,0BAA0B,GAAI,OAAO,gBAAgB,EAAE,KAAG,YAStE,CAAA"}
+{"version":3,"file":"toolbarAlignGroup.d.ts","sourceRoot":"","sources":["../../../../src/features/align/client/toolbarAlignGroup.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAI7E,eAAO,MAAM,0BAA0B,UAAW,gBAAgB,EAAE,KAAG,YAStE,CAAA"}

package/dist/features/blockquote/client/index.js

@@ -1,5 +1,6 @@
 'use client';
 
+import { QUOTE } from '@lexical/markdown';
 import { $createQuoteNode, $isQuoteNode, QuoteNode } from '@lexical/rich-text';
 import { $setBlocksType } from '@lexical/selection';
 import { $getSelection, $isRangeSelection } from 'lexical';
@@ -7,7 +8,6 @@ import { BlockquoteIcon } from '../../../lexical/ui/icons/Blockquote/index.js';
 import { createClientFeature } from '../../../utilities/createClientFeature.js';
 import { slashMenuBasicGroupWithItems } from '../../shared/slashMenu/basicGroup.js';
 import { toolbarTextDropdownGroupWithItems } from '../../shared/toolbar/textDropdownGroup.js';
-import { MarkdownTransformer } from '../markdownTransformer.js';
 const toolbarGroups = [toolbarTextDropdownGroupWithItems([{
   ChildComponent: BlockquoteIcon,
   isActive: ({
@@ -40,7 +40,7 @@ const toolbarGroups = [toolbarTextDropdownGroupWithItems([{
   order: 20
 }])];
 export const BlockquoteFeatureClient = createClientFeature({
-  markdownTransformers: [MarkdownTransformer],
+  markdownTransformers: [QUOTE],
   nodes: [QuoteNode],
   slashMenu: {
     groups: [slashMenuBasicGroupWithItems([{

package/dist/features/blockquote/client/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["$createQuoteNode","$isQuoteNode","QuoteNode","$setBlocksType","$getSelection","$isRangeSelection","BlockquoteIcon","createClientFeature","slashMenuBasicGroupWithItems","toolbarTextDropdownGroupWithItems","MarkdownTransformer","toolbarGroups","ChildComponent","isActive","selection","node","getNodes","getParent","key","label","i18n","t","onSelect","editor","update","order","BlockquoteFeatureClient","markdownTransformers","nodes","slashMenu","groups","Icon","keywords","toolbarFixed","toolbarInline"],"sources":["../../../../src/features/blockquote/client/index.tsx"],"sourcesContent":["'use client'\n\nimport { $createQuoteNode, $isQuoteNode, QuoteNode } from '@lexical/rich-text'\nimport { $setBlocksType } from '@lexical/selection'\nimport { $getSelection, $isRangeSelection } from 'lexical'\n\nimport type { ToolbarGroup } from '../../toolbars/types.js'\n\nimport { BlockquoteIcon } from '../../../lexical/ui/icons/Blockquote/index.js'\nimport { createClientFeature } from '../../../utilities/createClientFeature.js'\nimport { slashMenuBasicGroupWithItems } from '../../shared/slashMenu/basicGroup.js'\nimport { toolbarTextDropdownGroupWithItems } from '../../shared/toolbar/textDropdownGroup.js'\nimport { MarkdownTransformer } from '../markdownTransformer.js'\n\nconst toolbarGroups: ToolbarGroup[] = [\n  toolbarTextDropdownGroupWithItems([\n    {\n      ChildComponent: BlockquoteIcon,\n      isActive: ({ selection }) => {\n        if (!$isRangeSelection(selection)) {\n          return false\n        }\n        for (const node of selection.getNodes()) {\n          if (!$isQuoteNode(node) && !$isQuoteNode(node.getParent())) {\n            return false\n          }\n        }\n        return true\n      },\n      key: 'blockquote',\n      label: ({ i18n }) => {\n        return i18n.t('lexical:blockquote:label')\n      },\n      onSelect: ({ editor }) => {\n        editor.update(() => {\n          const selection = $getSelection()\n          $setBlocksType(selection, () => $createQuoteNode())\n        })\n      },\n      order: 20,\n    },\n  ]),\n]\n\nexport const BlockquoteFeatureClient = createClientFeature({\n  markdownTransformers: [MarkdownTransformer],\n  nodes: [QuoteNode],\n\n  slashMenu: {\n    groups: [\n      slashMenuBasicGroupWithItems([\n        {\n          Icon: BlockquoteIcon,\n          key: 'blockquote',\n          keywords: ['quote', 'blockquote'],\n          label: ({ i18n }) => {\n            return i18n.t('lexical:blockquote:label')\n          },\n          onSelect: ({ editor }) => {\n            editor.update(() => {\n              const selection = $getSelection()\n              $setBlocksType(selection, () => $createQuoteNode())\n            })\n          },\n        },\n      ]),\n    ],\n  },\n  toolbarFixed: {\n    groups: toolbarGroups,\n  },\n  toolbarInline: {\n    groups: toolbarGroups,\n  },\n})\n"],"mappings":"AAAA;;AAEA,SAASA,gBAAgB,EAAEC,YAAY,EAAEC,SAAS,QAAQ;AAC1D,SAASC,cAAc,QAAQ;AAC/B,SAASC,aAAa,EAAEC,iBAAiB,QAAQ;AAIjD,SAASC,cAAc,QAAQ;AAC/B,SAASC,mBAAmB,QAAQ;AACpC,SAASC,4BAA4B,QAAQ;AAC7C,SAASC,iCAAiC,QAAQ;AAClD,SAASC,mBAAmB,QAAQ;AAEpC,MAAMC,aAAA,GAAgC,CACpCF,iCAAA,CAAkC,CAChC;EACEG,cAAA,EAAgBN,cAAA;EAChBO,QAAA,EAAUA,CAAC;IAAEC;EAAS,CAAE;IACtB,IAAI,CAACT,iBAAA,CAAkBS,SAAA,GAAY;MACjC,OAAO;IACT;IACA,KAAK,MAAMC,IAAA,IAAQD,SAAA,CAAUE,QAAQ,IAAI;MACvC,IAAI,CAACf,YAAA,CAAac,IAAA,KAAS,CAACd,YAAA,CAAac,IAAA,CAAKE,SAAS,KAAK;QAC1D,OAAO;MACT;IACF;IACA,OAAO;EACT;EACAC,GAAA,EAAK;EACLC,KAAA,EAAOA,CAAC;IAAEC;EAAI,CAAE;IACd,OAAOA,IAAA,CAAKC,CAAC,CAAC;EAChB;EACAC,QAAA,EAAUA,CAAC;IAAEC;EAAM,CAAE;IACnBA,MAAA,CAAOC,MAAM,CAAC;MACZ,MAAMV,SAAA,GAAYV,aAAA;MAClBD,cAAA,CAAeW,SAAA,EAAW,MAAMd,gBAAA;IAClC;EACF;EACAyB,KAAA,EAAO;AACT,EACD,EACF;AAED,OAAO,MAAMC,uBAAA,GAA0BnB,mBAAA,CAAoB;EACzDoB,oBAAA,EAAsB,CAACjB,mBAAA,CAAoB;EAC3CkB,KAAA,EAAO,CAAC1B,SAAA,CAAU;EAElB2B,SAAA,EAAW;IACTC,MAAA,EAAQ,CACNtB,4BAAA,CAA6B,CAC3B;MACEuB,IAAA,EAAMzB,cAAA;MACNY,GAAA,EAAK;MACLc,QAAA,EAAU,CAAC,SAAS,aAAa;MACjCb,KAAA,EAAOA,CAAC;QAAEC;MAAI,CAAE;QACd,OAAOA,IAAA,CAAKC,CAAC,CAAC;MAChB;MACAC,QAAA,EAAUA,CAAC;QAAEC;MAAM,CAAE;QACnBA,MAAA,CAAOC,MAAM,CAAC;UACZ,MAAMV,SAAA,GAAYV,aAAA;UAClBD,cAAA,CAAeW,SAAA,EAAW,MAAMd,gBAAA;QAClC;MACF;IACF,EACD;EAEL;EACAiC,YAAA,EAAc;IACZH,MAAA,EAAQnB;EACV;EACAuB,aAAA,EAAe;IACbJ,MAAA,EAAQnB;EACV;AACF","ignoreList":[]}
+{"version":3,"file":"index.js","names":["QUOTE","$createQuoteNode","$isQuoteNode","QuoteNode","$setBlocksType","$getSelection","$isRangeSelection","BlockquoteIcon","createClientFeature","slashMenuBasicGroupWithItems","toolbarTextDropdownGroupWithItems","toolbarGroups","ChildComponent","isActive","selection","node","getNodes","getParent","key","label","i18n","t","onSelect","editor","update","order","BlockquoteFeatureClient","markdownTransformers","nodes","slashMenu","groups","Icon","keywords","toolbarFixed","toolbarInline"],"sources":["../../../../src/features/blockquote/client/index.tsx"],"sourcesContent":["'use client'\n\nimport { QUOTE } from '@lexical/markdown'\nimport { $createQuoteNode, $isQuoteNode, QuoteNode } from '@lexical/rich-text'\nimport { $setBlocksType } from '@lexical/selection'\nimport { $getSelection, $isRangeSelection } from 'lexical'\n\nimport type { ToolbarGroup } from '../../toolbars/types.js'\n\nimport { BlockquoteIcon } from '../../../lexical/ui/icons/Blockquote/index.js'\nimport { createClientFeature } from '../../../utilities/createClientFeature.js'\nimport { slashMenuBasicGroupWithItems } from '../../shared/slashMenu/basicGroup.js'\nimport { toolbarTextDropdownGroupWithItems } from '../../shared/toolbar/textDropdownGroup.js'\n\nconst toolbarGroups: ToolbarGroup[] = [\n  toolbarTextDropdownGroupWithItems([\n    {\n      ChildComponent: BlockquoteIcon,\n      isActive: ({ selection }) => {\n        if (!$isRangeSelection(selection)) {\n          return false\n        }\n        for (const node of selection.getNodes()) {\n          if (!$isQuoteNode(node) && !$isQuoteNode(node.getParent())) {\n            return false\n          }\n        }\n        return true\n      },\n      key: 'blockquote',\n      label: ({ i18n }) => {\n        return i18n.t('lexical:blockquote:label')\n      },\n      onSelect: ({ editor }) => {\n        editor.update(() => {\n          const selection = $getSelection()\n          $setBlocksType(selection, () => $createQuoteNode())\n        })\n      },\n      order: 20,\n    },\n  ]),\n]\n\nexport const BlockquoteFeatureClient = createClientFeature({\n  markdownTransformers: [QUOTE],\n  nodes: [QuoteNode],\n\n  slashMenu: {\n    groups: [\n      slashMenuBasicGroupWithItems([\n        {\n          Icon: BlockquoteIcon,\n          key: 'blockquote',\n          keywords: ['quote', 'blockquote'],\n          label: ({ i18n }) => {\n            return i18n.t('lexical:blockquote:label')\n          },\n          onSelect: ({ editor }) => {\n            editor.update(() => {\n              const selection = $getSelection()\n              $setBlocksType(selection, () => $createQuoteNode())\n            })\n          },\n        },\n      ]),\n    ],\n  },\n  toolbarFixed: {\n    groups: toolbarGroups,\n  },\n  toolbarInline: {\n    groups: toolbarGroups,\n  },\n})\n"],"mappings":"AAAA;;AAEA,SAASA,KAAK,QAAQ;AACtB,SAASC,gBAAgB,EAAEC,YAAY,EAAEC,SAAS,QAAQ;AAC1D,SAASC,cAAc,QAAQ;AAC/B,SAASC,aAAa,EAAEC,iBAAiB,QAAQ;AAIjD,SAASC,cAAc,QAAQ;AAC/B,SAASC,mBAAmB,QAAQ;AACpC,SAASC,4BAA4B,QAAQ;AAC7C,SAASC,iCAAiC,QAAQ;AAElD,MAAMC,aAAA,GAAgC,CACpCD,iCAAA,CAAkC,CAChC;EACEE,cAAA,EAAgBL,cAAA;EAChBM,QAAA,EAAUA,CAAC;IAAEC;EAAS,CAAE;IACtB,IAAI,CAACR,iBAAA,CAAkBQ,SAAA,GAAY;MACjC,OAAO;IACT;IACA,KAAK,MAAMC,IAAA,IAAQD,SAAA,CAAUE,QAAQ,IAAI;MACvC,IAAI,CAACd,YAAA,CAAaa,IAAA,KAAS,CAACb,YAAA,CAAaa,IAAA,CAAKE,SAAS,KAAK;QAC1D,OAAO;MACT;IACF;IACA,OAAO;EACT;EACAC,GAAA,EAAK;EACLC,KAAA,EAAOA,CAAC;IAAEC;EAAI,CAAE;IACd,OAAOA,IAAA,CAAKC,CAAC,CAAC;EAChB;EACAC,QAAA,EAAUA,CAAC;IAAEC;EAAM,CAAE;IACnBA,MAAA,CAAOC,MAAM,CAAC;MACZ,MAAMV,SAAA,GAAYT,aAAA;MAClBD,cAAA,CAAeU,SAAA,EAAW,MAAMb,gBAAA;IAClC;EACF;EACAwB,KAAA,EAAO;AACT,EACD,EACF;AAED,OAAO,MAAMC,uBAAA,GAA0BlB,mBAAA,CAAoB;EACzDmB,oBAAA,EAAsB,CAAC3B,KAAA,CAAM;EAC7B4B,KAAA,EAAO,CAACzB,SAAA,CAAU;EAElB0B,SAAA,EAAW;IACTC,MAAA,EAAQ,CACNrB,4BAAA,CAA6B,CAC3B;MACEsB,IAAA,EAAMxB,cAAA;MACNW,GAAA,EAAK;MACLc,QAAA,EAAU,CAAC,SAAS,aAAa;MACjCb,KAAA,EAAOA,CAAC;QAAEC;MAAI,CAAE;QACd,OAAOA,IAAA,CAAKC,CAAC,CAAC;MAChB;MACAC,QAAA,EAAUA,CAAC;QAAEC;MAAM,CAAE;QACnBA,MAAA,CAAOC,MAAM,CAAC;UACZ,MAAMV,SAAA,GAAYT,aAAA;UAClBD,cAAA,CAAeU,SAAA,EAAW,MAAMb,gBAAA;QAClC;MACF;IACF,EACD;EAEL;EACAgC,YAAA,EAAc;IACZH,MAAA,EAAQnB;EACV;EACAuB,aAAA,EAAe;IACbJ,MAAA,EAAQnB;EACV;AACF","ignoreList":[]}

package/dist/features/blockquote/server/index.js

@@ -1,7 +1,7 @@
+import { QUOTE } from '@lexical/markdown';
 import { QuoteNode } from '@lexical/rich-text';
 import { createServerFeature } from '../../../utilities/createServerFeature.js';
 import { createNode } from '../../typeUtilities.js';
-import { MarkdownTransformer } from '../markdownTransformer.js';
 import { i18n } from './i18n.js';
 import { quoteNodeJSONSchema } from './schema.js';
 export const BlockquoteFeature = createServerFeature({
@@ -9,7 +9,7 @@ export const BlockquoteFeature = createServerFeature({
     ClientFeature: '@payloadcms/richtext-lexical/client#BlockquoteFeatureClient',
     clientFeatureProps: null,
     i18n,
-    markdownTransformers: [MarkdownTransformer],
+    markdownTransformers: [QUOTE],
     nodes: [createNode({
       jsonSchema: quoteNodeJSONSchema,
       node: QuoteNode

package/dist/features/blockquote/server/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["QuoteNode","createServerFeature","createNode","MarkdownTransformer","i18n","quoteNodeJSONSchema","BlockquoteFeature","feature","ClientFeature","clientFeatureProps","markdownTransformers","nodes","jsonSchema","node","key"],"sources":["../../../../src/features/blockquote/server/index.ts"],"sourcesContent":["import { QuoteNode } from '@lexical/rich-text'\n\nimport { createServerFeature } from '../../../utilities/createServerFeature.js'\nimport { createNode } from '../../typeUtilities.js'\nimport { MarkdownTransformer } from '../markdownTransformer.js'\nimport { i18n } from './i18n.js'\nimport { quoteNodeJSONSchema } from './schema.js'\n\nexport type { SerializedQuoteNode } from './schema.js'\n\nexport const BlockquoteFeature = createServerFeature({\n  feature: {\n    ClientFeature: '@payloadcms/richtext-lexical/client#BlockquoteFeatureClient',\n    clientFeatureProps: null,\n    i18n,\n    markdownTransformers: [MarkdownTransformer],\n    nodes: [\n      createNode({\n        jsonSchema: quoteNodeJSONSchema,\n        node: QuoteNode,\n      }),\n    ],\n  },\n  key: 'blockquote',\n})\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ;AAE1B,SAASC,mBAAmB,QAAQ;AACpC,SAASC,UAAU,QAAQ;AAC3B,SAASC,mBAAmB,QAAQ;AACpC,SAASC,IAAI,QAAQ;AACrB,SAASC,mBAAmB,QAAQ;AAIpC,OAAO,MAAMC,iBAAA,GAAoBL,mBAAA,CAAoB;EACnDM,OAAA,EAAS;IACPC,aAAA,EAAe;IACfC,kBAAA,EAAoB;IACpBL,IAAA;IACAM,oBAAA,EAAsB,CAACP,mBAAA,CAAoB;IAC3CQ,KAAA,EAAO,CACLT,UAAA,CAAW;MACTU,UAAA,EAAYP,mBAAA;MACZQ,IAAA,EAAMb;IACR;EAEJ;EACAc,GAAA,EAAK;AACP","ignoreList":[]}
+{"version":3,"file":"index.js","names":["QUOTE","QuoteNode","createServerFeature","createNode","i18n","quoteNodeJSONSchema","BlockquoteFeature","feature","ClientFeature","clientFeatureProps","markdownTransformers","nodes","jsonSchema","node","key"],"sources":["../../../../src/features/blockquote/server/index.ts"],"sourcesContent":["import { QUOTE } from '@lexical/markdown'\nimport { QuoteNode } from '@lexical/rich-text'\n\nimport { createServerFeature } from '../../../utilities/createServerFeature.js'\nimport { createNode } from '../../typeUtilities.js'\nimport { i18n } from './i18n.js'\nimport { quoteNodeJSONSchema } from './schema.js'\n\nexport type { SerializedQuoteNode } from './schema.js'\n\nexport const BlockquoteFeature = createServerFeature({\n  feature: {\n    ClientFeature: '@payloadcms/richtext-lexical/client#BlockquoteFeatureClient',\n    clientFeatureProps: null,\n    i18n,\n    markdownTransformers: [QUOTE],\n    nodes: [\n      createNode({\n        jsonSchema: quoteNodeJSONSchema,\n        node: QuoteNode,\n      }),\n    ],\n  },\n  key: 'blockquote',\n})\n"],"mappings":"AAAA,SAASA,KAAK,QAAQ;AACtB,SAASC,SAAS,QAAQ;AAE1B,SAASC,mBAAmB,QAAQ;AACpC,SAASC,UAAU,QAAQ;AAC3B,SAASC,IAAI,QAAQ;AACrB,SAASC,mBAAmB,QAAQ;AAIpC,OAAO,MAAMC,iBAAA,GAAoBJ,mBAAA,CAAoB;EACnDK,OAAA,EAAS;IACPC,aAAA,EAAe;IACfC,kBAAA,EAAoB;IACpBL,IAAA;IACAM,oBAAA,EAAsB,CAACV,KAAA,CAAM;IAC7BW,KAAA,EAAO,CACLR,UAAA,CAAW;MACTS,UAAA,EAAYP,mBAAA;MACZQ,IAAA,EAAMZ;IACR;EAEJ;EACAa,GAAA,EAAK;AACP","ignoreList":[]}

package/dist/features/blocks/client/component/BlockReordering/index.d.ts

@@ -0,0 +1,11 @@
+import type { LexicalEditor } from 'lexical';
+import type { ReactNode } from 'react';
+import { useBlockReordering } from '../useBlockReordering.js';
+export declare function BlockReordering({ children, editor, nodeKey, }: {
+    children: (props: {
+        reorderInstructionsID: string;
+    } & ReturnType<typeof useBlockReordering>) => ReactNode;
+    editor: LexicalEditor;
+    nodeKey: string;
+}): ReactNode;
+//# sourceMappingURL=index.d.ts.map

package/dist/features/blocks/client/component/BlockReordering/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/features/blocks/client/component/BlockReordering/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAC5C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItC,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAA;AAE7D,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,MAAM,EACN,OAAO,GACR,EAAE;IACD,QAAQ,EAAE,CACR,KAAK,EAAE;QAAE,qBAAqB,EAAE,MAAM,CAAA;KAAE,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,KAC7E,SAAS,CAAA;IACd,MAAM,EAAE,aAAa,CAAA;IACrB,OAAO,EAAE,MAAM,CAAA;CAChB,aAKA"}

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

@@ -0,0 +1,18 @@
+import { useId } from 'react';
+import { useBlockReordering } from '../useBlockReordering.js';
+export function BlockReordering({
+  children,
+  editor,
+  nodeKey
+}) {
+  const reorder = useBlockReordering({
+    editor,
+    nodeKey
+  });
+  const reorderInstructionsID = useId();
+  return children({
+    ...reorder,
+    reorderInstructionsID
+  });
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["useId","useBlockReordering","BlockReordering","children","editor","nodeKey","reorder","reorderInstructionsID"],"sources":["../../../../../../src/features/blocks/client/component/BlockReordering/index.tsx"],"sourcesContent":["import type { LexicalEditor } from 'lexical'\nimport type { ReactNode } from 'react'\n\nimport { useId } from 'react'\n\nimport { useBlockReordering } from '../useBlockReordering.js'\n\nexport function BlockReordering({\n  children,\n  editor,\n  nodeKey,\n}: {\n  children: (\n    props: { reorderInstructionsID: string } & ReturnType<typeof useBlockReordering>,\n  ) => ReactNode\n  editor: LexicalEditor\n  nodeKey: string\n}) {\n  const reorder = useBlockReordering({ editor, nodeKey })\n  const reorderInstructionsID = useId()\n\n  return children({ ...reorder, reorderInstructionsID })\n}\n"],"mappings":"AAGA,SAASA,KAAK,QAAQ;AAEtB,SAASC,kBAAkB,QAAQ;AAEnC,OAAO,SAASC,gBAAgB;EAC9BC,QAAQ;EACRC,MAAM;EACNC;AAAO,CAOR;EACC,MAAMC,OAAA,GAAUL,kBAAA,CAAmB;IAAEG,MAAA;IAAQC;EAAQ;EACrD,MAAME,qBAAA,GAAwBP,KAAA;EAE9B,OAAOG,QAAA,CAAS;IAAE,GAAGG,OAAO;IAAEC;EAAsB;AACtD","ignoreList":[]}

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

@@ -9,7 +9,7 @@
     }
 
     .collapsible__header-wrap {
-      right: var(--spacer-4);
+      inset-inline-end: var(--spacer-4);
     }
   }
 
@@ -68,7 +68,7 @@
 
   .LexicalEditorTheme__block__header-action {
     cursor: pointer;
-    margin-left: var(--spacer-1);
+    margin-inline-start: var(--spacer-1);
 
     &:hover,
     &:focus-visible {

package/dist/features/blocks/client/component/index.d.ts

@@ -21,13 +21,7 @@ export type BlockComponentProps<TFormData extends Record<string, unknown> = Bloc
      * Will be rendered with useBlockComponentContext hook.
      */
     readonly CustomLabel?: React.FC<ViewMapBlockComponentProps>;
-    /**
-     * The block's form data (field values).
-     */
     readonly formData: TFormData;
-    /**
-     * The unique key identifying this block node in the current editor instance.
-     */
     readonly nodeKey: string;
 };
 export declare const BlockComponent: React.FC<BlockComponentProps>;

package/dist/features/blocks/client/component/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/features/blocks/client/component/index.tsx"],"names":[],"mappings":"AAqCA,OAAO,KAAkD,MAAM,OAAO,CAAA;AAGtE,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,4BAA4B,CAAA;AAC5E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AAEzD,OAAO,aAAa,CAAA;AACpB,OAAO,8CAA8C,CAAA;AAerD,MAAM,MAAM,mBAAmB,CAAC,SAAS,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,WAAW,IAAI;IACzF;;;;OAIG;IACH,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAA;IAC5B,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAA;IAC1B;;;OAGG;IACH,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CAAC,CAAA;IAC3D;;;OAGG;IACH,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CAAC,CAAA;IAC3D;;OAEG;IACH,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAA;IAC5B;;OAEG;IACH,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAA;CACzB,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA0uBxD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/features/blocks/client/component/index.tsx"],"names":[],"mappings":"AAqCA,OAAO,KAAkD,MAAM,OAAO,CAAA;AAGtE,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,4BAA4B,CAAA;AAC5E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AAEzD,OAAO,aAAa,CAAA;AACpB,OAAO,8CAA8C,CAAA;AAmBrD,MAAM,MAAM,mBAAmB,CAAC,SAAS,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,WAAW,IAAI;IACzF;;;;OAIG;IACH,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAA;IAC5B,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAA;IAC1B;;;OAGG;IACH,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CAAC,CAAA;IAC3D;;;OAGG;IACH,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CAAC,CAAA;IAC3D,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAA;IAC5B,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAA;CACzB,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAmzBxD,CAAA"}

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

@@ -1,13 +1,13 @@
 'use client';
 
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-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 { abortAndIgnore } from '@payloadcms/ui/shared';
 import { $getNodeByKey, $getRoot, SKIP_DOM_SELECTION_TAG } from 'lexical';
-import { deepCopyObjectSimpleWithoutReactComponents, reduceFieldsToValues } from 'payload/shared';
+import { deepCopyObjectSimpleWithoutReactComponents } from 'payload/shared';
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { v4 as uuid } from 'uuid';
 import './index.css';
@@ -15,9 +15,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, reduceFormStateToBlockData } 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,
@@ -68,31 +69,43 @@ export const BlockComponent = props => {
   const [editor] = useLexicalComposerContext();
   const isEditable = useLexicalEditable();
   const blockType = formData.blockType;
+  const formDataRef = useRef(formData);
+  formDataRef.current = formData;
+  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);
@@ -191,9 +204,9 @@ export const BlockComponent = props => {
           valid: true,
           value: formData.blockName
         };
-        const newFormStateData = reduceFieldsToValues(deepCopyObjectSimpleWithoutReactComponents(state, {
+        const newFormStateData = reduceFormStateToBlockData(deepCopyObjectSimpleWithoutReactComponents(state, {
           excludeFiles: true
-        }), true);
+        }));
         // Things like default values may come back from the server => update the node with the new data
         editor.update(() => {
           const node = $getNodeByKey(nodeKey);
@@ -217,19 +230,14 @@ 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, 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
@@ -241,11 +249,15 @@ export const BlockComponent = props => {
     abortAndIgnore(onChangeAbortControllerRef.current);
     const controller = new AbortController();
     onChangeAbortControllerRef.current = controller;
+    const blockData = reduceFormStateToBlockData(deepCopyObjectSimpleWithoutReactComponents(prevFormState, {
+      excludeFiles: true
+    }), formDataRef.current);
     const {
       state: newFormState
     } = await getFormState({
       id,
       collectionSlug,
+      data: blockData,
       docPermissions: {
         fields: true
       },
@@ -255,7 +267,7 @@ export const BlockComponent = props => {
       }),
       formState: prevFormState,
       globalSlug,
-      initialBlockFormState: prevFormState,
+      initialBlockData: blockData,
       operation: 'update',
       readOnly: !isEditable,
       renderAllFields: submit ? true : false,
@@ -268,11 +280,9 @@ export const BlockComponent = props => {
     if (prevFormState.blockName) {
       newFormState.blockName = prevFormState.blockName;
     }
-    const newFormStateData_0 = reduceFieldsToValues(removeEmptyArrayValues({
-      fields: deepCopyObjectSimpleWithoutReactComponents(newFormState, {
-        excludeFiles: true
-      })
-    }), true);
+    const newFormStateData_0 = reduceFormStateToBlockData(deepCopyObjectSimpleWithoutReactComponents(newFormState, {
+      excludeFiles: true
+    }), blockData);
     setTimeout(() => {
       editor.update(() => {
         const node_0 = $getNodeByKey(nodeKey);
@@ -394,7 +404,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 +418,134 @@ 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
+            },
+            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(ErrorPill, {
+                count: errorCount_0 ?? 0,
+                i18n: i18n,
+                withMessage: true
+              })]
+            })
           }),
-          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, i18n, isCollapsed, onCollapsedChange, isEditable, nodeKey, removeBlock, rowIndex, t, toggleDrawer]);
   const blockID = formData?.id;
   const {
     headerActions,
@@ -532,8 +599,9 @@ export const BlockComponent = props => {
         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 = reduceFormStateToBlockData(formState_0, formDataRef.current);
           newData_1.blockType = blockType;
           editor.update(() => {
             const node_1 = $getNodeByKey(nodeKey);