Calling useFloatingLinkInsertState in LinkFloatingToolbar leads to Unhandled Runtime Error

[alecswjo]

Description

I followed the directions on Link Floating Toolbar and tried to use it in my editor, but I got a Unhandled Runtime Error (TypeError: Cannot read properties of null (reading 'id')) when the component calls useFloatingLinkInsertState.

I import it into my plugins by:

createLinkPlugin({
      renderAfterEditable: LinkFloatingToolbar as RenderAfterEditable<MyValue>,
    }),

My code inside link-floating-toolbar.tsx looks like:

const floatingOptions: UseVirtualFloatingOptions = {
  placement: 'bottom-start',
  middleware: [
    offset(12),
    flip({
      padding: 12,
      fallbackPlacements: ['bottom-end', 'top-start', 'top-end'],
    }),
  ],
};

export interface LinkFloatingToolbarProps {
  state?: LinkFloatingToolbarState;
}

export function LinkFloatingToolbar({ state }: LinkFloatingToolbarProps) {
  const insertState = useFloatingLinkInsertState({
    ...state,
    floatingOptions: {
      ...floatingOptions,
      ...state?.floatingOptions,
    },
  });

Errors looks like:

My hunch is that something in useFloatingLinkInsertState changed recently and isn't compatible with how I'm calling it now, looked into src code but couldn't figure out a solution.

Steps to Reproduce

I followed the steps in Link Floating Toolbar.

Expected Behavior

The expected behavior is for the floating toolbar to work like in Link Floating Toolbar.

Environment

• slate: "slate": "^0.94.1", "@udecode/plate": "^23.7.0"
• slate-react: "slate-react": "^0.98.3",
• browser: chrome

Bounty

Click here to add a bounty via Algora.

Funding

• You can sponsor this specific effort via a Polar.sh pledge below
• We receive the pledge once the issue is completed & verified

[zbeyens]

We have a changelog for components. Could you try to update yours?

[alecswjo]

Fixed by updating everything.