Error on readonly editor - TypeError: Cannot read properties of undefined (reading 'FormattingToolbar')

[softmarshmallow]

I am building a CMS with BlockNote, need a way to render blocknote document, Did some research, but did not found a reliable way to generateHtml from blocknote document.

Where I ended up using BlockNote component to display the content for now, below.

"use client";

import {
  BlockNoteViewProps,
  useCreateBlockNote,
  BlockNoteViewRaw,
} from "@blocknote/react";

export function RichText({
  children,
  value,
  ...props
}: React.PropsWithChildren<
  Omit<BlockNoteViewProps<any, any, any>, "editable" | "editor"> & {
    value: any;
  }
>) {
  const editor = useCreateBlockNote({
    initialContent: value,
    defaultStyles: false,
  });

  return (
    <BlockNoteViewRaw
      data-theming-ui-css-variables
      editor={editor}
      editable={false}
      {...props}
    />
  );
}

Even with the editable=false, seems like the block note is trying to draw some toolbars & stuff. raising below

TypeError: Cannot read properties of undefined (reading 'FormattingToolbar')

This happens when I drag the text content, but wierdly only occurs from second entry (second text selection)

Using the mantine works, but is this supposed to be like this? (looking for a headless & lightest way possible to render blocknote contents, without styles)

"use client";

import {
  BlockNoteViewProps,
  useCreateBlockNote,
  BlockNoteViewRaw,
} from "@blocknote/react";
import { BlockNoteView } from "@blocknote/mantine";

export function RichText({
  children,
  value,
  ...props
}: React.PropsWithChildren<
  Omit<BlockNoteViewProps<any, any, any>, "editable" | "editor"> & {
    value: any;
  }
>) {
  const editor = useCreateBlockNote({
    initialContent: value,
    defaultStyles: false,
  });

  return (
    <BlockNoteView
      data-theming-ui-css-variables
      editor={editor}
      editable={false}
      {...props}
    />
  );
}

[YousefED]

I think you're interested in #451

But you also raise a good point, we could disable all UI extensions and react components when editable=false. wdyt @matthewlipski ?

[matthewlipski]

Makes sense imo, I think the non-editable state of the editor is not super robust right now and could use some work. Think it's worth spending a week or 2 at some point to iron out all the edge cases and cut out what isn't needed when the editor is non-editable.