BlockNote Versions Save

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

v0.12.4

1 month ago

What's Changed

New Contributors

Full Changelog: https://github.com/TypeCellOS/BlockNote/compare/v0.12.3...v0.12.4

v0.12.3

1 month ago

What's Changed

Full Changelog: https://github.com/TypeCellOS/BlockNote/compare/v0.12.2...v0.12.3

v0.12.2

1 month ago

What's Changed

Full Changelog: https://github.com/TypeCellOS/BlockNote/compare/v0.12.1...v0.12.2

v0.12.1

1 month ago

What's Changed

New Contributors

Full Changelog: https://github.com/TypeCellOS/BlockNote/compare/v0.12.0...v0.12.1

v0.12.0

2 months ago

v0.12 is a big one, which unlocks a number of highly requested features (and fixes) 🥳! As part of this, we're also shipping a brand new website with plenty of updated examples and completely revised the documentation.

Looking forward to your feedback! Although most of the API has stayed the same, there are a few breaking changes. Let us know in case you have trouble upgrading.

Features

  • New nextjs based website! https://www.blocknotejs.org with major update to Docs and a lot of new Examples.
  • Go beyond Custom Blocks, also customize your editor with bespoke Inline Content (e.g.: Mentions!) and Styles.
  • Easily create menus for mentions, tags, etc! We revisited the API + docs for customizing UI Components
  • Large number of fixes including a significant performance improvement by refactoring Placeholders and a rearchitecture of the React integration
  • It's now easier to wait for content to be fetched before initializing the editor, see the Saving & Loading Example.
  • Added method for inserting Inline Content, see Manipulating Inline Content.

Breaking changes

  • useBlockNote has been renamed to useCreateBlockNote. Also, event handlers mostly moved to BlockNoteView or hooks. onEditorReady event has been removed as it's no longer needed. See Editor Setup
  • BlockNoteView now takes props to disable built-in components. See Editor Setup
  • Customizing UI components has been updated to enable more powerful scenarios. See UI Components (among other changes, [element]Positioner components have been renamed to [element]Controller)
  • The API for changing Slash Menu Items has been revised, see Slash Menu
  • Use BlockNoteSchema to register your custom blocks / styles / inline content. See Custom Schemas
  • We separated the Inter font to reduce the main bundle size. Add import "@blocknote/core/fonts/inter.css"; separately

What's Changed

Full Changelog: https://github.com/TypeCellOS/BlockNote/compare/v0.11.2...v0.12.0

v0.11.2

3 months ago

What's Changed

New Contributors

Full Changelog: https://github.com/TypeCellOS/BlockNote/compare/v0.11.1...v0.11.2

v0.11.1

3 months ago

What's Changed

Full Changelog: https://github.com/TypeCellOS/BlockNote/compare/v0.11.0...v0.11.1

v0.11.0

4 months ago

What's Changed

New Contributors

Full Changelog: https://github.com/TypeCellOS/BlockNote/compare/v0.10.1...v0.11.0

Breaking Changes

Change import "@blocknote/core/style.css"; to import "@blocknote/react/style.css"; if you're using @blocknote/react

This update changes how themes and styles are applied to the editor. This means if you were previously overriding CSS using the componentStyles field in a Theme object, you should convert those styles to CSS rules. See the new theming and styling documentation here.

v0.10.1

5 months ago

What's Changed

Full Changelog: https://github.com/TypeCellOS/BlockNote/compare/v0.10.0...v0.10.1

v0.10.0

5 months ago

Features

Some nice new stuff now possible with BlockNote!

Tables

ezgif-2-fd6034a112

Closes https://github.com/TypeCellOS/BlockNote/issues/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 https://github.com/TypeCellOS/BlockNote/issues/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

Full Changelog: https://github.com/TypeCellOS/BlockNote/compare/v0.9.6...v0.10.0