@blocknote/react/src/hooks/useEditorDomElement.ts

A "Notion-style" block-based extensible text editor built on top of Prosemirror and Tiptap.

import { BlockNoteEditor } from "@blocknote/core";

import { useBlockNoteContext } from "../editor/BlockNoteContext.js";
import { useEditorState } from "./useEditorState.js";

// Returns the editor's DOM element reactively.
export function useEditorDOMElement(editor?: BlockNoteEditor<any, any, any>) {
  const editorContext = useBlockNoteContext();
  if (!editor) {
    editor = editorContext?.editor;
  }

  if (!editor) {
    throw new Error(
      "'editor' is required in `useEditorDOMElement`, either from BlockNoteContext or as a function argument",
    );
  }

  return useEditorState({
    editor,
    selector: (ctx) => ctx.editor.domElement,
    equalityFn: (a, b) => a === b,
    on: "mount",
  });
}