Error using @blocknote/ariakit

[sundargautam18]

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;