TypeCellOS / BlockNote

A React Rich Text Editor that's block-based (Notion style) and extensible. Built on top of Prosemirror and Tiptap.

Home Page:https://www.blocknotejs.org/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

How to disable sideMenu at top block (index 0)

Gr4vity4 opened this issue · comments

inspiration from notion title, at the top can't delete or change props, I tried to use getTextCursorPosition() method with simple watching instance with setInterval() then setState but still doesn't work

<BlockNoteView
  editor={editor}
  theme={"light"}
  onChange={() => {
    syncToCloud(editor.document);
  }}
  slashMenu={false}
  sideMenu={false}
>
  {/* {controlSideMenu && (
    <SideMenuController
      sideMenu={(props) => (
        <SideMenu {...props}>
          <DragHandleButton {...props} />
        </SideMenu>
      )}
    />
  )} */}

  {/* Replaces the default Slash Menu. */}
  <SuggestionMenuController
    triggerCharacter={"/"}
    getItems={async (query) =>
      // Gets all default slash menu items and `insertMarkdown` item.
      filterSuggestionItems(
        [
          ...getDefaultReactSlashMenuItems(editor),
          insertMarkdown(editor),
          insertMarkdownCompact(editor),
          insertAsk(editor),
        ],
        query
      )
    }
  />
</BlockNoteView>

Would love a solution for this

This should work:

<BlockNoteView editor={editor} sideMenu={false}>
  <SideMenuController
    sideMenu={(props) => {
      if (props.block.id === editor.document[0].id) {
        return null;
      }

      return (
        <SideMenu {...props}>
          <AddBlockButton {...props} />
          <DragHandleButton {...props} />
        </SideMenu>
      );
    }}
  />
</BlockNoteView>

You can use something similar for the other menus, just have to use editor.getTextCursorPosition().block instead of props.block.