Skip to content

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

Open
@softmarshmallow

Description

@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}
    />
  );
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions