TypeCellOS / BlockNote

A React Rich Text Editor that's block-based (Notion style) and extensible. Built on top of Prosemirror and Tiptap.
https://www.blocknotejs.org/
Mozilla Public License 2.0
6.58k stars 453 forks source link

Getting errors while using blocknote/react #920

Closed ShaquibKhanhub closed 3 months ago

ShaquibKhanhub commented 3 months ago

Describe the bug so i created a notion-clone and now i want to add editor option inside my app so i used blocknote/react libarary and blacknote/core for css but and im hovering on my sidebar im getting error which says TypeError: Cannot read properties of undefined (reading 'SideMenu') and in my whole code there's nothing called SideMenu to coutner this i exported every component which i have installed from shadcn and puts this inside shadCNComponents and let me you my whole code inside editor.ts im getting error only inside this

"use client"; import as Button from "@/components/ui/button" import as DropdownMenu from "@/components/ui/dropdown-menu" import as Command from "@/components/ui/command" import as Input from "@/components/ui/input" import as Label from "@/components/ui/label" import as Popover from "@/components/ui/popover" import as Dialog from "@/components/ui/dialog" import as Skeleton from "@/components/ui/skeleton"

import { BlockNoteEditor, PartialBlock } from "@blocknote/core"; import { BlockNoteViewRaw, useCreateBlockNote } from "@blocknote/react"; import "@blocknote/core/style.css"; import { useTheme } from "next-themes"; import { useEdgeStore } from "@/lib/edgestore";

interface EditorProps { onChange: (value: string) => void; initialContent?: string; editable?: boolean; }

const Editor = ({ onChange, initialContent, editable }: EditorProps) => { const { resolvedTheme } = useTheme(); const { edgestore } = useEdgeStore();

const handleUpload = async (file: File) => { const res = await edgestore.publicFiles.upload({ file, });

return res.url;

};

const editor: BlockNoteEditor = useCreateBlockNote({ editable, initialContent: initialContent ? (JSON.parse(initialContent) as PartialBlock[]) : undefined, uploadFile: handleUpload, });

// Update your onChange handler according to the expected signature const handleEditorChange = () => { onChange(JSON.stringify(editor.document, null, 2)); };

return (

); };

export default Editor;

and inside this code everything is updated and latest ver.

To Reproduce <clear steps to reproduce are super helpful! Best is to provide an online sandbox, click to create one>

Misc

matthewlipski commented 3 months ago

If you're using ShadCN, you should import BlockNoteView from @blocknote/shadcn and styles from @blocknote/shadcn/style.css. If you still get the same error, comment out the shadCNComponents prop and see if that changes anything.