Skip to content

Releases: TypeCellOS/BlockNote

0.10.0

04 Dec 17:16
@matthewlipski matthewlipski
v0.10.0
2f1b344
Compare
Choose a tag to compare
0.10.0

Features

Some nice new stuff now possible with BlockNote!

Tables

ezgif-2-fd6034a112

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

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

Contributors

YousefED and matthewlipski
Assets 2
Loading

0.9.6

30 Oct 13:03
@matthewlipski matthewlipski
v0.9.6
7f4c6fd
Compare
Choose a tag to compare
0.9.6

What's Changed

New Contributors

Full Changelog: v0.9.5...v0.9.6

Contributors

danlgz and matthewlipski
Assets 2
Loading

0.9.5

11 Oct 20:42
@matthewlipski matthewlipski
v0.9.5
d172057
Compare
Choose a tag to compare
0.9.5

What's Changed

Full Changelog: v0.9.4...v0.9.5

Contributors

matthewlipski
Assets 2
Loading

0.9.4

03 Oct 18:57
@matthewlipski matthewlipski
v0.9.4
31e3c53
Compare
Choose a tag to compare
0.9.4

What's Changed

Full Changelog: v0.9.3...v0.9.4

Contributors

YousefED and matthewlipski
Assets 2
Loading

0.9.3

22 Sep 17:45
@matthewlipski matthewlipski
v0.9.3
3a3ca4d
Compare
Choose a tag to compare
0.9.3

What's Changed

Full Changelog: v0.9.2...v0.9.3

Contributors

matthewlipski
Assets 2
Loading

0.9.2

20 Aug 18:44
@matthewlipski matthewlipski
v0.9.2
4d18bc8
Compare
Choose a tag to compare
0.9.2

What's Changed

Full Changelog: v0.9.0...v0.9.1

Contributors

YousefED and matthewlipski
Assets 2
Loading

0.9.0

13 Aug 19:26
@matthewlipski matthewlipski
v0.9.0
75d9591
Compare
Choose a tag to compare
0.9.0

What's Changed

Full Changelog: v0.8.5...v0.9.0

Contributors

YousefED and matthewlipski
Assets 2
Loading

0.8.5

03 Aug 19:57
@matthewlipski matthewlipski
v0.8.5
5bdbc6a
Compare
Choose a tag to compare
0.8.5

What's Changed

Full Changelog: v0.8.4...v0.8.5

Contributors

YousefED and matthewlipski
Assets 2
Loading

0.8.4

03 Aug 19:57
@matthewlipski matthewlipski
v0.8.4
cac9d29
Compare
Choose a tag to compare
0.8.4

What's Changed

Full Changelog: v0.8.3...v0.8.4

Contributors

YousefED and matthewlipski
Assets 2
Loading

v0.8.3

01 Aug 22:15
@matthewlipski matthewlipski
v0.8.3
4b0778b
Compare
Choose a tag to compare
v0.8.3

This release includes an overhaul for customizing and rendering UI elements in BlockNote. Everything is now rendered under a single root. Includes breaking changes:

  • The slashCommands editor option has been renamed to slashMenuItems
  • BlockNote no longer uses factories to create UI elements. See the documentation to find out how this is now done.

What's Changed

New Contributors

Full Changelog: v0.8.2...v0.8.3

Contributors

YousefED, charlesfrisbee, and matthewlipski
Assets 2
Loading