After link submission error is thrown

[VelociraptorCZE]

Description

I use generated link-toolbar-button component:

'use client';

import {
  useLinkToolbarButton,
  useLinkToolbarButtonState,
} from '@platejs/link/react';
import { Link } from 'lucide-react';

import { ToolbarButton } from './toolbar';

export function LinkToolbarButton(
  props: React.ComponentProps<typeof ToolbarButton>
) {
  const state = useLinkToolbarButtonState();
  const { props: buttonProps } = useLinkToolbarButton(state);

  return (
    <ToolbarButton {...props} {...buttonProps} data-plate-focus tooltip="Link">
      <Link />
    </ToolbarButton>
  );
}

This is my editor:

	const editor = usePlateEditor({
		value: commentToEdit?.rawContent,
		plugins: EditorKit,
	});

	return (
		<>
			<Plate editor={editor} onChange={async ({ value }) => {
				setContent(await serializeHtml(editor));
				setRawContent(value);
			}}>
				<FixedToolbar className="justify-start rounded-t-lg bg-white border-b-0">
					<MarkToolbarButton className={"border-0"} nodeType="bold">B</MarkToolbarButton>
					<MarkToolbarButton className={"border-0"} nodeType="italic">I</MarkToolbarButton>
					<MarkToolbarButton className={"border-0"} nodeType="underline">U</MarkToolbarButton>
					<LinkToolbarButton className={"border-0"} />
				</FixedToolbar>

				<EditorContainer className={"border border-outline-variant rounded-lg !h-auto"}>
					<Editor placeholder="Type your comment here..." className={"!p-5 min-h-[180px]"} />
				</EditorContainer>
			</Plate>
        </>
    );

EditorKit:

'use client';

import { TrailingBlockPlugin,type Value } from 'platejs';
import { type TPlateEditor, useEditorRef } from 'platejs/react';

import { BasicBlocksKit } from './basic-blocks-kit';
import { BasicMarksKit } from './basic-marks-kit';
import { LinkKit } from './link-kit';

export const EditorKit = [
	...BasicBlocksKit,
	...LinkKit,
	...BasicMarksKit,
	TrailingBlockPlugin,
];

export type PlateEditor = TPlateEditor<Value, (typeof EditorKit)[number]>;

export const useEditor = () => useEditorRef<PlateEditor>();

LinkKit:

'use client';

import { LinkPlugin } from '@platejs/link/react';

import { LinkElement } from '../ui/link-node.tsx';
import { LinkFloatingToolbar } from '../ui/link-toolbar.tsx';

export const LinkKit = [
  LinkPlugin.configure({
    render: {
      node: LinkElement,
      afterEditable: () => <LinkFloatingToolbar />,
    },
  }),
];

When I try to submit a link, it throws an error, refer to logs. Button and floating bar is rendered as it should. Am I doing something wrong?

Plate version

49.2.21

Slate React version

0.117.4

Logs

chunk-CR3ZKNR2.js?v=6c5e91d1:13030 Uncaught (in promise) Error: Plate hooks must be used inside a Plate or PlateController
    at usePlateStore (chunk-CR3ZKNR2.js?v=6c5e91d1:13030:11)
    at useEditorMounted (chunk-CR3ZKNR2.js?v=6c5e91d1:13067:30)
    at PlateElement2 (chunk-CR3ZKNR2.js?v=6c5e91d1:12442:19)
    at Object.react_stack_bottom_frame (server.browser-WUDB6M23.js:7078:18)
    at renderWithHooks (server.browser-WUDB6M23.js:3734:24)
    at renderElement (server.browser-WUDB6M23.js:4425:41)
    at retryNode (server.browser-WUDB6M23.js:4708:43)
    at renderNodeDestructive (server.browser-WUDB6M23.js:4668:270)
    at finishFunctionComponent (server.browser-WUDB6M23.js:3752:238)
    at renderElement (server.browser-WUDB6M23.js:4029:13)

[dosubot[bot]]

Hi @VelociraptorCZE! I'm Dosu and I’m helping the plate team.

Your setup is almost correct, but the error means a component using Plate hooks (like LinkFloatingToolbar or LinkElement) is being rendered outside the Plate context. This usually happens if:

• Any component using Plate hooks is not inside a <Plate> component.
• The 'use client' directive is missing at the top of files using Plate hooks.
• There are version mismatches between platejs and all @platejs/* packages (they must all be exactly 49.2.21).
• You have multiple versions of slate, slate-react, or slate-dom in your dependency tree.
• Your custom ToolbarButton or floating toolbar components do not use React.forwardRef (required for Plate 49.x).

Check that:

1. All files/components using Plate hooks have 'use client' at the top.
2. All Plate-related packages are on the same version.
3. Only one version of each Slate package is installed.
4. Your ToolbarButton and any custom toolbar/floating components use React.forwardRef.

See more details and troubleshooting steps in the docs and official Plate link docs.

If you still see the error after these checks, try creating a minimal reproduction with only Plate and required dependencies to isolate the cause.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[amitksingh0880]

Hi, @VelociraptorCZE

• The error is due to context loss when rendering via afterEditable.

• Render floating toolbars/components directly inside your tree.

• Remove afterEditable from your plugin config.

[VelociraptorCZE]

I might be completely stupid, but what do you mean by "Render floating toolbars/components directly inside your tree", please?