我是 Platejs 的新手,我按照 Platejs 中的固定工具栏文档
这是我的代码:
import { Plate, PlateContent } from '@udecode/plate-common';
import { Editor } from '@/components/plate-ui/editor';
import React, { useRef } from 'react';
import { cn } from '@udecode/cn';
import { CommentsProvider } from '@udecode/plate-comments';
import { ELEMENT_PARAGRAPH } from '@udecode/plate-paragraph';
import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
// import { commentsUsers, myUserId } from '@/lib/plate/comments';
const commentsUsers = {
1: {
id: '1',
name: 'zbeyens',
avatarUrl: 'https://avatars.githubusercontent.com/u/19695832?s=96&v=4',
},
};
const myUserId = '1';
import { MENTIONABLES } from '@/lib/plate/mentionables';
import { plugins } from '@/lib/plate/plugins';
import { CommentsPopover } from '@/components/plate-ui/comments-popover';
import { CursorOverlay } from '@/components/plate-ui/cursor-overlay';
import { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';
import { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';
import { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';
import { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';
import { MentionCombobox } from '@/components/plate-ui/mention-combobox';
export function CreateProject(){
const containerRef = useRef(null);
const initialValue = [
{
id: '1',
type: ELEMENT_PARAGRAPH,
children: [{ text: 'Hello, World!' }],
},
];
return (
<div className='h-screen w-1/2 mx-auto mt-20 bg-slate-50'>
<DndProvider backend={HTML5Backend}>
<CommentsProvider users={commentsUsers} myUserId={myUserId}>
<Plate
plugins={plugins}
initialValue={initialValue}
>
<div
ref={containerRef}
className={cn(
'relative',
// Block selection
'[&_.slate-start-area-left]:!w-[64px] [&_.slate-start-area-right]:!w-[64px] [&_.slate-start-area-top]:!h-4'
)}
>
<FixedToolbar>
<FixedToolbarButtons />
</FixedToolbar>
<Editor
className="px-[96px] py-16"
autoFocus
focusRing={false}
variant="ghost"
size="md"
/>
<FloatingToolbar>
<FloatingToolbarButtons />
</FloatingToolbar>
<MentionCombobox items={MENTIONABLES} />
<CommentsPopover />
<CursorOverlay containerRef={containerRef} />
</div>
</Plate>
</CommentsProvider>
</DndProvider>
</div>
)
}
我收到此错误:
组件中出现上述错误:
at $a093c7e1ec25a057$export$28c660c63b792dea (http://localhost:5173/node_modules/.vite/deps/@radix-ui_react-tooltip.js?v=32a51597:116:11) at ExtendComponent (http://localhost:5173/src/components/plate-ui/tooltip.tsx:35:32) at http://localhost:5173/node_modules/.vite/deps/chunk-77W7KSQV.js?v=32a51597:69:11 at http://localhost:5173/node_modules/.vite/deps/chunk-77W7KSQV.js?v=32a51597:46:11 at http://localhost:5173/node_modules/.vite/deps/chunk-CNAETF6X.js?v=32a51597:38:13 at http://localhost:5173/node_modules/.vite/deps/chunk-77W7KSQV.js?v=32a51597:69:11 at http://localhost:5173/node_modules/.vite/deps/chunk-77W7KSQV.js?v=32a51597:46:11 at http://localhost:5173/node_modules/.vite/deps/chunk-CNAETF6X.js?v=32a51597:38:13 at http://localhost:5173/node_modules/.vite/deps/chunk-ZEXNATZL.js?v=32a51597:629:11 at http://localhost:5173/node_modules/.vite/deps/@radix-ui_react-dropdown-menu.js?v=32a51597:170:11 at http://localhost:5173/node_modules/.vite/deps/@radix-ui_react-dropdown-menu.js?v=32a51597:1020:11 at Provider (http://localhost:5173/node_modules/.vite/deps/chunk-PGH5UBMJ.js?v=32a51597:20:15) at Provider (http://localhost:5173/node_modules/.vite/deps/chunk-PGH5UBMJ.js?v=32a51597:20:15) at Provider (http://localhost:5173/node_modules/.vite/deps/chunk-PGH5UBMJ.js?v=32a51597:20:15) at $cf1ac5d9fe0e8206$export$badac9ada3a0bdf9 (http://localhost:5173/node_modules/.vite/deps/chunk-ZEXNATZL.js?v=32a51597:616:11) at $6cc32821e9371a1c$export$d9b273488cd8ce6f (http://localhost:5173/node_modules/.vite/deps/@radix-ui_react-dropdown-menu.js?v=32a51597:112:11) at Provider (http://localhost:5173/node_modules/.vite/deps/chunk-PGH5UBMJ.js?v=32a51597:20:15) at $d08ef79370b62062$export$e44a253a59704894 (http://localhost:5173/node_modules/.vite/deps/@radix-ui_react-dropdown-menu.js?v=32a51597:984:11) at InsertDropdownMenu (http://localhost:5173/src/components/plate-ui/insert-dropdown-menu.tsx:142:18) at div at div at _c6 (http://localhost:5173/src/components/plate-ui/toolbar.tsx:164:46) at div at div at FixedToolbarButtons (http://localhost:5173/src/components/plate-ui/fixed-toolbar-buttons.tsx:34:20) at div at http://localhost:5173/node_modules/.vite/deps/chunk-CNAETF6X.js?v=32a51597:38:13 at http://localhost:5173/node_modules/.vite/deps/chunk-77W7KSQV.js?v=32a51597:69:11 at http://localhost:5173/node_modules/.vite/deps/chunk-77W7KSQV.js?v=32a51597:46:11 at http://localhost:5173/node_modules/.vite/deps/chunk-CNAETF6X.js?v=32a51597:38:13 at Provider (http://localhost:5173/node_modules/.vite/deps/chunk-PGH5UBMJ.js?v=32a51597:20:15) at http://localhost:5173/node_modules/.vite/deps/chunk-2EGUBRDI.js?v=32a51597:54:11 at http://localhost:5173/node_modules/.vite/deps/chunk-77W7KSQV.js?v=32a51597:69:11 at http://localhost:5173/node_modules/.vite/deps/chunk-77W7KSQV.js?v=32a51597:46:11 at http://localhost:5173/node_modules/.vite/deps/chunk-N4QM573P.js?v=32a51597:41:13 at Provider (http://localhost:5173/node_modules/.vite/deps/chunk-PGH5UBMJ.js?v=32a51597:20:15) at CollectionProvider (http://localhost:5173/node_modules/.vite/deps/chunk-N4QM573P.js?v=32a51597:27:13) at http://localhost:5173/node_modules/.vite/deps/chunk-2EGUBRDI.js?v=32a51597:43:18 at Provider (http://localhost:5173/node_modules/.vite/deps/chunk-PGH5UBMJ.js?v=32a51597:20:15) at http://localhost:5173/node_modules/.vite/deps/@radix-ui_react-toolbar.js?v=32a51597:245:11 at ExtendComponent (http://localhost:5173/node_modules/.vite/deps/@udecode_cn.js?v=32a51597:81:17) at ExtendComponent (http://localhost:5173/node_modules/.vite/deps/@udecode_cn.js?v=32a51597:81:17) at div at PlateEffects (http://localhost:5173/node_modules/.vite/deps/chunk-Y3TOVENN.js?v=32a51597:23561:18) at HydrateAtoms (http://localhost:5173/node_modules/.vite/deps/chunk-Y3TOVENN.js?v=32a51597:5897:5) at Provider (http://localhost:5173/node_modules/.vite/deps/chunk-Y3TOVENN.js?v=32a51597:5583:3) at http://localhost:5173/node_modules/.vite/deps/chunk-Y3TOVENN.js?v=32a51597:5918:20 at PlateInner (http://localhost:5173/node_modules/.vite/deps/chunk-Y3TOVENN.js?v=32a51597:23566:26) at Plate (http://localhost:5173/node_modules/.vite/deps/chunk-Y3TOVENN.js?v=32a51597:23645:15) at HydrateAtoms (http://localhost:5173/node_modules/.vite/deps/chunk-Y3TOVENN.js?v=32a51597:5897:5) at Provider (http://localhost:5173/node_modules/.vite/deps/chunk-Y3TOVENN.js?v=32a51597:5583:3) at http://localhost:5173/node_modules/.vite/deps/chunk-Y3TOVENN.js?v=32a51597:5918:20 at DndProvider2 (http://localhost:5173/node_modules/.vite/deps/react-dnd.js?v=32a51597:1527:9) at div at CreateProject (http://localhost:5173/src/components/CreateProject.tsx?t=1710700427274:45:24) at RenderedRoute (http://localhost:5173/node_modules/.vite/deps/chunk-GIMIJEAX.js?v=32a51597:3548:5) at Routes (http://localhost:5173/node_modules/.vite/deps/chunk-GIMIJEAX.js?v=32a51597:3983:5) at Router (http://localhost:5173/node_modules/.vite/deps/chunk-GIMIJEAX.js?v=32a51597:3926:15) at BrowserRouter (http://localhost:5173/node_modules/.vite/deps/chunk-GIMIJEAX.js?v=32a51597:4666:5) at ThemeProvider (http://localhost:5173/src/components/theme-provider.tsx:27:3) at App
考虑向树中添加错误边界以自定义错误 处理行为。访问 https://reactjs.org/link/error-boundaries 来 了解有关错误边界的更多信息。
如果我删除
<FixedToolbar>
<FixedToolbarButtons />
</FixedToolbar>
从我的代码中,我不再收到错误,它出现但没有工具栏。所以它一定来自这段代码,但我不知道为什么或如何解决它。
我必须用
<TooltipProvider>
包裹所有东西。