Features

Some nice new stuff now possible with BlockNote!

Tables

Closes #194

Custom Inline Content and Custom Styles

Until now, it was only possible to create your own custom Blocks. Now, you can also create custom Styles and Inline Content. Styles are markup that can be enabled on text (think bold, italic, etc.). Custom Inline Content can be used for "inline blocks", for example for Mentions.

Closes #267

Better copy paste handling

The copy / paste and Blocks to / from Markdown / HTML system has been overhauled and should be more robust. Copying and pasting of custom blocks is now also supported!

Closes #221 #69 #361 #381 #282 #226 #249

Breaking changes:

Custom Block API

If you're using Custom Blocks (createReactBlockSpec), there are 3 major changes:

• The "schema" of your block and the "implementation" are now separated
• The <InlineContent /> element has been removed in favor of contentRef
• Use content: "inline" | "none" instead of containsInlineContent: boolean

Old (deprecated) code example:

const ImageBlock = createReactBlockSpec({
  type: "image",
  propSchema: {
    src: {
      default: "https://via.placeholder.com/1000",
    },
  },
  containsInlineContent: true,
  render: ({ block }) => (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
      }}>
      <img
        style={{
          width: "100%",
        }}
        src={block.props.src}
        alt={"Image"}
        contentEditable={false}
      />
      <InlineContent />
    </div>
  ),
});

New version:

const ImageBlock = createReactBlockSpec({
  type: "image",
  propSchema: {
    src: {
      default: "https://via.placeholder.com/1000",
    },
  },
  content: "inline"
}, {
  render: ({ block, contentRef }) => (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
      }}>
      <img
        style={{
          width: "100%",
        }}
        src={block.props.src}
        alt={"Image"}
        contentEditable={false}
      />
      <span ref={contentRef} />
    </div>
  ),
});

Additionally, blockSchemas are now blockSpecs, so to pass in the blocks that you want the editor to use:

const editor = useBlockNote({
  blockSpecs: {
    ...defaultBlockSpecs,
    image: ImageBlock
  }
});

In functions that still require a BlockSchema type, you can use the getBlockSchemaFromSpecs function, e.g. for getDefaultReactSlashMenuItems:

const blockSpecs = {
  ...defaultBlockSpecs,
  image: ImageBlock
}

const blockSchema = getBlockSchemaFromSpecs(blockSpecs);

const editor = useBlockNote({
  blockSpecs: blockSpecs,
  slashMenuItems: {
    ...getDefaultReactSlashMenuItems(blockSchema),
    insertImageBlock
  }
});

Naming of export / parse functions

To better indicate the conversion to / from Markdown and HTML is lossy, the following functions have been renamed:

• editor.blocksToHTML -> editor.blocksToHTMLLossy
• editor.HTMLToBlocks -> editor.tryParseHTMLToBlocks
• editor.blocksToMarkdown -> editor.blocksToMarkdownLossy
• editor.markdownToBlocks -> editor.tryParseMarkdownToBlocks

Vanilla (non-react) constructor usage

Instead of new BlockNoteEditor(...), now use BlockNoteEditor.create(...)

Changelog

• v0.9.6 by @matthewlipski in #402
• fix: block id null when using collaboration by @YousefED in #419
• Chore/upgrade partykit by @YousefED in #445
• chore: setup relative ci by @YousefED in #446
• feature: v0.10: tables, custom inline content, custom styles, better copy / paste handling by @YousefED in #426

Full Changelog: v0.9.6...v0.10.0