release: v0.12 - new website and major refactor

[matthewlipski]

Overview

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.

• 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

Fixes 🤩

closes #530
closes #252
closes #471
closes #342
closes #349
closes #497
closes #565
closes #506
closes #488
closes #506
closes #495
closes #403
closes #320
closes #601
closes #582
closes #566
closes #554
closes #433
closes #583

Some changes are maybe easier to see in separate PRs that have been merged into this one:

#520
#579
#576
#567
#599
#600
#503

Dev notes

(internal list for contributors)

Homepage

• Add Demo (@matthewlipski), including "try it out here"
• Design "why blocknote?" area (@matthewlipski)
• Revise content
  • Code snippet that shows how easy it is
  • Highlight community
  • Highlight sponsors
• replace "turbo" background with original blocknote background (or maybe closer to logo)
• Wait for editor to load before showing it and glow
• Fix button styles
• Make screenshots for features
• gradients
• Fix border colors

Examples

• clean up scripts @YousefED
• organize example code in directories @YousefED
• clean .bnexample.json files
• review sorting
• (nice to have) filter examples / tags
• Instructions to contribute an example (link to PR template?)
• Review examples for usefulness + readmes
• What are good categories?
• Add examples
  • initial content
  • Add multiplayer examples (liveblocks / yjs / ...)
• Review playground attribute
  • Why wouldn't we want an example in the playground? Doesn't that mean the example is useless
  • Fix vanilla custom schema (entry in _meta.json is still required when all files have { playground: true, docs: false})

Code snippets

• make sure they work again, @YousefED
• Design @matthewlipski
  • code below editor
  • Toolbar / menu (open codesandbox / github / etc.)
• dark mode, @YousefED
• language highlighting
• Re-add styles
• Make editor fill demo height & make demo taller
• Fix block JSON styling for basics and cursor demos
• Fix built env not using monospaced font for code

Docs

• convert snippets to code
• Revise docs @YousefED
• merge mention / slash menu code?
• Revise high level mention/slash menu API
• Revise content of "Editor API" (which pages should be there vs at top level or elsewhere)
• UI Element docs + examples
• Custom schema documentation
• TODOs left in pages
• Check for instances where mentions of "editor contents" can/should be replaced with "document"
• Fix link styling

Others

• dark mode (@matthewlipski )
• footer
• !! About page: add a good call to action button component with mailto link (and that button should be reusable for other pages)
• Content of other pages (partner, community, etc.)
• Discord + Github at top right !!
• !! redirects where necessary: we need to 301 redirect old urls (check sidebar of docs that are live now) to new URLs. Can be done in vercel.json
• check broken links
• Fix CI
• !! write release details (highlighting new features, fixes and Breaking API changes with links to docs)
• !! custom styles are broken, custom inline content & styles throw error about flushSync
• inlinecontent api
• merge placeholders
• merge font extract

later

• sticky toolbar
• document uploadfile / image component / hyperlinktoolbar
• document hooks
• more collab examples
• sponsored content?
• revisit vanilla example?
• bounties / sponsors

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
blocknote	🔄 Building (Inspect)	Visit Preview	Mar 5, 2024 1:45pm
blocknote-website	🔄 Building (Inspect)	Visit Preview	Mar 5, 2024 1:45pm