What's Changed

v0.10.1 by @matthewlipski in https://github.com/TypeCellOS/BlockNote/pull/469
fix: Add block button incorrect cursor position by @matthewlipski in https://github.com/TypeCellOS/BlockNote/pull/484
fix: Delete handler error when cursor in last block by @matthewlipski in https://github.com/TypeCellOS/BlockNote/pull/485
fix: Bug in replaceBlocks by @matthewlipski in https://github.com/TypeCellOS/BlockNote/pull/487
feat: Return values for block manipulation methods by @matthewlipski in https://github.com/TypeCellOS/BlockNote/pull/458
fix: Image block DOM clutter, keyboard handling, and copy/paste by @matthewlipski in https://github.com/TypeCellOS/BlockNote/pull/456
fix: Multiline list indentation by @i-am-chitti in https://github.com/TypeCellOS/BlockNote/pull/491
fix: Remove console logs while pasting by @i-am-chitti in https://github.com/TypeCellOS/BlockNote/pull/489
chore: Mantine update by @matthewlipski in https://github.com/TypeCellOS/BlockNote/pull/479
docs: Mantine update by @matthewlipski in https://github.com/TypeCellOS/BlockNote/pull/502

New Contributors

@i-am-chitti made their first contribution in https://github.com/TypeCellOS/BlockNote/pull/491

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.

BlockNote - 0.10.1

Published by matthewlipski 11 months ago

What's Changed

v0.10.0 by @matthewlipski in https://github.com/TypeCellOS/BlockNote/pull/450
fix: React custom blocks re-mount on update by @matthewlipski in https://github.com/TypeCellOS/BlockNote/pull/466
fix: Missing exports for image formatting toolbar buttons and table handles by @matthewlipski in https://github.com/TypeCellOS/BlockNote/pull/459
fix: BlockNoteView types export by @matthewlipski in https://github.com/TypeCellOS/BlockNote/pull/457
fix: NextJS tables CSS error by @matthewlipski in https://github.com/TypeCellOS/BlockNote/pull/467

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

BlockNote - 0.10.0

Published by matthewlipski 11 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

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

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

BlockNote - 0.9.6

Published by matthewlipski 12 months ago

What's Changed

v0.9.5 by @matthewlipski in https://github.com/TypeCellOS/BlockNote/pull/373
docs: Example for changing editor font by @matthewlipski in https://github.com/TypeCellOS/BlockNote/pull/399
fix: Side menu not appearing after clicking add block button by @matthewlipski in https://github.com/TypeCellOS/BlockNote/pull/395
fix: Custom blocks with inline content overflow by @matthewlipski in https://github.com/TypeCellOS/BlockNote/pull/392
fix: Removed warning when node attribute does not correspond to a prop by @matthewlipski in https://github.com/TypeCellOS/BlockNote/pull/391
fix: Image blocks resizable when editor isn't editable by @matthewlipski in https://github.com/TypeCellOS/BlockNote/pull/390
docs: Minor fixes by @matthewlipski in https://github.com/TypeCellOS/BlockNote/pull/379
fix: saving-loading meta info by @danlgz in https://github.com/TypeCellOS/BlockNote/pull/376
fix: _tiptapOptions typing and fields getting overridden by @matthewlipski in https://github.com/TypeCellOS/BlockNote/pull/398