Description
Unexpected Application Error!
useBlockNoteEditor was called outside of a BlockNoteContext provider or BlockNoteView component
Error: useBlockNoteEditor was called outside of a BlockNoteContext provider or BlockNoteView component
at H (http://localhost:6679/node_modules/.vite/deps/chunk-C2W5FXJ6.js?v=56dd50f9:675:11)
at Zr (http://localhost:6679/node_modules/.vite/deps/chunk-C2W5FXJ6.js?v=56dd50f9:2336:13)
at renderWithHooks (http://localhost:6679/node_modules/.vite/deps/chunk-RY6NLCXT.js?v=56dd50f9:11548:26)
at mountIndeterminateComponent (http://localhost:6679/node_modules/.vite/deps/chunk-RY6NLCXT.js?v=56dd50f9:14926:21)
at beginWork (http://localhost:6679/node_modules/.vite/deps/chunk-RY6NLCXT.js?v=56dd50f9:15914:22)
at beginWork$1 (http://localhost:6679/node_modules/.vite/deps/chunk-RY6NLCXT.js?v=56dd50f9:19753:22)
at performUnitOfWork (http://localhost:6679/node_modules/.vite/deps/chunk-RY6NLCXT.js?v=56dd50f9:19198:20)
at workLoopSync (http://localhost:6679/node_modules/.vite/deps/chunk-RY6NLCXT.js?v=56dd50f9:19137:13)
at renderRootSync (http://localhost:6679/node_modules/.vite/deps/chunk-RY6NLCXT.js?v=56dd50f9:19116:15)
at recoverFromConcurrentError (http://localhost:6679/node_modules/.vite/deps/chunk-RY6NLCXT.js?v=56dd50f9:18736:28)
💿 Hey developer 👋
You can provide a way better UX than this when your app throws errors by providing your own ErrorBoundary or errorElement prop on your route.
My code:
import "@blocknote/core/fonts/inter.css";
import {
getDefaultReactSlashMenuItems,
SuggestionMenuController,
useCreateBlockNote,
} from "@blocknote/react";
import { BlockNoteView } from "@blocknote/ariakit";
import "@blocknote/ariakit/style.css";
import { useFormContext } from "react-hook-form";
import classNames from "classnames";
import { imageHandlerBlock } from "../../services/imageHandler";
import {
BlockNoteSchema,
defaultBlockSpecs,
filterSuggestionItems,
insertOrUpdateBlock,
} from "@blocknote/core";
import { RiAlertFill } from "react-icons/ri";
import { Alert } from "./common-alert";
// Our schema with block specs, which contain the configs and implementations
// for blocks that we want our editor to use.
const schema = BlockNoteSchema.create({
blockSpecs: {
// Adds all default blocks.
...defaultBlockSpecs,
// Adds the Alert block.
alert: Alert,
},
});
// Slash menu item to insert an Alert block
const insertAlert = (editor: typeof schema.BlockNoteEditor) => ({
title: "Alert",
onItemClick: () => {
insertOrUpdateBlock(editor, {
type: "alert",
});
},
aliases: [
"alert",
"notification",
"emphasize",
"warning",
"error",
"info",
"success",
],
group: "Other",
icon: <RiAlertFill />,
});
const CommonEditor = ({
id,
content,
viewonly,
label,
className,
}: {
id: string;
url?: string;
content?: any;
viewonly?: boolean;
className?: string;
label?: string;
}) => {
const {
clearErrors,
trigger,
setValue,
formState: { errors },
} = useFormContext();
const editor = useCreateBlockNote({
initialContent: content,
uploadFile: uploadFile,
schema,
});
async function uploadFile(file: File) {
// const imagUpload = await imageHandler(file);
// const body = new FormData();
// body.append("image", file);
// const res = await api.post(`myapi/${url}`, body, {
// headers: {
// "Content-Type": "multipart/form-data",
// },
// });
// return res.data.data?.imageUrl?.url;
const url = await imageHandlerBlock(file);
return url;
}
return (
<>
<div className="flex flex-col gap-2">
<p className="text-sm font-bold text-primaryblue">
{label || "Content"}
</p>
<div className={classNames("quill-editor rounded-lg", className)}>
<BlockNoteView
editable={!viewonly}
editor={editor}
slashMenu={false}
theme={"light"}
onChange={() => {
if (editor?.document?.length < 1) return trigger(id);
const data = editor?.document?.filter(
(content: any) => content?.content?.length > 0
);
if (data?.length < 1) {
return trigger(id);
} else {
setValue(id, editor.document);
clearErrors(id);
}
}}
formattingToolbar={false}
>
<SuggestionMenuController
triggerCharacter={"/"}
getItems={async (query) =>
// Gets all default slash menu items and `insertAlert` item.
filterSuggestionItems(
[
...getDefaultReactSlashMenuItems(editor),
insertAlert(editor),
],
query
)
}
/>
</BlockNoteView>
</div>
<span className="text-red-500 text-xs font-normal ">
{errors.content?.message as string}
</span>
</div>
<style>{`
.ProseMirror.bn-editor.bn-default-styles {
min-height: 200px;
}
`}</style>
</>
);
};
export default CommonEditor;