Comments for Blocknote

Comments feature for Blocknote.

Demo

A demo is worth a thousand words

Installation

Install via YARN

Get the package

$ yarn add @defensestation/blocknote-comments

Usage

Include module at your application

import {
  commentStyleSpec,
  CommentToolbarController,
  CreateCommentButton,
} from "@defensestation/blocknote-comments";

Create schema with comment style spec.

const schema = BlockNoteSchema.create({
  styleSpecs: {
    // Adds all default styles.
    ...defaultStyleSpecs,
    comment: commentStyleSpec,
  },
});

Add comment button in toolbar.

const CustomToolbar = () => (<FormattingToolbarController
          formattingToolbar={() => (
            <FormattingToolbar>
              <CreateCommentButton key={"createCommentButtin"} />
            </FormattingToolbar>
          )}
        />)

Add comment controller.

<BlockNoteView formattingToolbar={false} editor={editor}>
    <CustomToolbar />
    <CommentToolbarController />
</BlockNoteView>