Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

[lsylsy186]

Description

The above error occurred in the component. It was handled by the error boundary. Error Component Stack
at BlockSelectionAfterEditable (BlockSelectionAfterEditable.tsx:30:31)
at Slate (slate.tsx:29:5)
at PlateSlate (PlateSlate.tsx:15:3)
at PlateContent (PlateContent.tsx:37:6)
at _c1 (editor.tsx:94:6)
at HydrateAtoms (createAtomProvider.tsx:56:3)
at createAtomProvider.tsx:87:13
at PlateInner (Plate.tsx:34:3)
at Plate (Plate.tsx:68:20)
at ai-chat-editor.tsx:17:5
at div ()
at Primitive.div (Primitive.tsx:38:13)
at index.mjs:1:652
at ExtendComponent (withProps.tsx:26:26)
at div ()
at Primitive.div (Primitive.tsx:38:13)
at Provider (createContext.tsx:58:15)
at div ()
at PopperContent (Popper.tsx:131:7)
at SlotClone (Slot.tsx:61:11)
at Slot (Slot.tsx:13:11)
at Primitive.div (Primitive.tsx:38:13)
at DismissableLayer (DismissableLayer.tsx:64:7)
at SlotClone (Slot.tsx:61:11)
at Slot (Slot.tsx:13:11)
at Primitive.div (Primitive.tsx:38:13)
at FocusScope (FocusScope.tsx:50:5)
at Popover.tsx:381:7
at Popover.tsx:298:59
at Presence (Presence.tsx:12:11)
at PopoverContent (Popover.tsx:223:64)
at SlotClone (Slot.tsx:61:11)
at Slot (Slot.tsx:13:11)
at Primitive.div (Primitive.tsx:38:13)
at Portal (Portal.tsx:22:22)
at Presence (Presence.tsx:12:11)
at Provider (createContext.tsx:59:15)
at PopoverPortal (Popover.tsx:192:11)
at _c (popover.tsx:20:6)
at Provider (createContext.tsx:59:15)
at Provider (createContext.tsx:58:15)
at Popper (Popper.tsx:50:11)
at Popover (Popover.tsx:58:5)
at AIMenu (ai-menu.tsx:35:52)
at afterEditable ()
at div ()
at SlotClone (Slot.tsx:61:11)
at Slot (Slot.tsx:13:11)
at Primitive.span (Primitive.tsx:38:13)
at ContextMenuTrigger (ContextMenu.tsx:93:13)
at Provider (createContext.tsx:59:15)
at Provider (createContext.tsx:59:15)
at Provider (createContext.tsx:58:15)
at Popper (Popper.tsx:50:11)
at Menu (Menu.tsx:88:11)
at Provider (createContext.tsx:59:15)
at ContextMenu (ContextMenu.tsx:44:11)
at BlockContextMenu (block-context-menu.tsx:36:36)
at Slate (slate.tsx:29:5)
at PlateSlate (PlateSlate.tsx:15:3)
at PlateContent (PlateContent.tsx:37:6)
at _c1 (editor.tsx:94:6)
at div ()
at EditorContainer (editor.tsx:32:3)

Reproduction URL

No response

Reproduction steps

1. go to "plate/templates/plate-playground-template",
2. pnpm install
3. pnpm dev
4. copy a long paragraph into the editor, then select all, make it shorter or make it longer

Plate version

40.0.4

Slate React version

0.111.0

Screenshots

No response

Logs

No response

Browsers

No response

[danielkh-be]

I am also struggling with this problem, actually making the AI Plugin quite useless at the moment. @zbeyens, I have looked through the source code for a couple of days now. Are there any more data / insights I can provide to help you or anyone else to understand this bug? :)

[felixfeng33]

Fixed by #3874.
Need to upgrade Plate to the latest version first, and then refer to #3874 PR use PlateStatic to replace the readonly plate editor.

[danielkh-be]

Fixed by #3874. Need to upgrade Plate to the latest version first, and then refer to #3874 PR use PlateStatic to replace the readonly plate editor.

I updated all the packages (plate-ai to 41.0.1, all all others also the latest version). But I still get the same error as above.

[felixfeng33]

@danielkh-be
did you use the PlateStatic?

[felixfeng33]

replace readonly plate editor by PlateStaic

use slate editor instead of plate editor

You can copy all of the files end with *-static.tsx in the plate-ui fold.
Add static element files

[danielkh-be]

@felixfeng33

Thank you for pointing me in the right direction here. Really appreciate it. It works now :)