wip: feature: server-side processing

[YousefED]

This introduces a server-util package which can be used to interact with BlockNote without instantiating an entire editor. For example, it can be used to render HTML from BlockNote blocks in JSON format (or from a YDoc) for server-side rendering. Or, for server-side conversion to markdown for server-side search indexing.

TODO The current state is a PoC, there are several important todos to figure out:

• [ ] We rely on JSDOM to polyfill document. If we don't want this, we either need a more lightweight polyfill, or replace our document.createElement related calls with something else. Or for example, use React / JSX for built-in nodes as well, as React supports server-side rendering without a dependency on document
• [ ] Block serialization functions (toExternalHTML, toInternalHTML) currently expect an editor parameter. Is this useful / desired? Currently we fake an editor by passing editorContext instead
• [ ] Is there a way to convert from Posemirror JSON to BlockNote JSON by just transforming the json, and not rely on Nodes, extensions and pmSchema to be available?
• [ ] Add a test for server-side rendering including CSS, add tests for custom blocks, etc.
• [ ] This still pulls in the entire @blocknote/core package (and if you'd use a react custom block, it would pull in all of @blocknote/react). Perhaps we can organize our package structure to be more lightweight

closes #387 closes #311

[vercel[bot]]

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

Name	Status	Preview	Updated (UTC)
blocknote	✅ Ready (Inspect)	Visit Preview	Jul 15, 2024 10:21am
blocknote-website	✅ Ready (Inspect)	Visit Preview	Jul 15, 2024 10:21am

[nikkimontoya]

@YousefED Hi! Could you please tell me when you plan to deliver this feature? It would be very useful for me :-)

[Jakisundays]

@YousefED Hello! 🌟 I'm eagerly looking forward to using this. Could you please complete it? Your work is much appreciated! 🚀

[YousefED]

Hi @nikkimontoya @Jakisundays!

Atm we're prioritizing some work for our sponsors and I currently don't require this feature myself - so even though I'd love to, it will be a while before we can dig into this. You can consider sponsoring or opening a bounty to encourage community members to step in

[algora-pbc[bot]]

💎 $25 bounty • odufuwas

Steps to solve:

1. Start working: Comment /attempt #451 with your implementation plan
2. Submit work: Create a pull request including /claim #451 in the PR body to claim the bounty
3. Receive payment: 100% of the bounty is received 2-5 days post-reward. Make sure you are eligible for payouts

Thank you for contributing to TypeCellOS/BlockNote!

Add a bounty • Share on socials

[m-risto]

Hi @YousefED,

this is also something which is required, so that we can use BlockNote.

[YousefED]

Hi @YousefED,

this is also something which is required, so that we can use BlockNote.

Hi @m-risto! Thanks and thanks for your sponsorship. Would love to hear more about your exact requirements before we continue working on this. Mind specifying more here, or reaching out on Discord / X / email ([email protected])?

[m-risto]

Hi @YousefED

i will write it down tomorrow, if i have a some free time.

The short version is we want to create a pdf server side with puppeteer and that's why we need the html extract.

But i will write you more via discord.

[lawrencenika]

Hi @YousefED I have a use case of this on yPartyKit server side to update the blocknote custom blocks directly based on server side events, you can see my message here in discord help channel. How do we use this now? if it is not yet available, when would it be made across the finishing line, or how can I help to bring it across the finish line?

[Abdullah18557]

Hi @YousefED, thank you so much for this great tool you are building! i am already using it on one of my project to use AI to create a personal note and ideation pad. I have to use the server side blocknote editor here to get the blocks as readable strings and save them into database instead of saving base64 strings of the ydoc. Therefore, would love to try this feature asap, but no obligations!

[limzerui]

Hi team, this is a great feature! now I have to use the entire editor in my nodejs server to fetch the blocks to effect some changes, how can this be used to replace my current function?

[lawrencenika]

Thanks team for the hardwork, I tried but cant seem to install it from npm.

% npm install @blocknote/server-util npm ERR! code E404 npm ERR! 404 Not Found - GET https://registry.npmjs.org/@blocknote%2fserver-util - Not found npm ERR! 404 npm ERR! 404 '@blocknote/server-util@*' is not in this registry. npm ERR! 404 npm ERR! 404 Note that you can also install from a npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! A complete log of this run can be found in: /Users/xxx/.npm/_logs/2024-07-15T15_38_08_817Z-debug-0.log

[matthewlipski]

We accidentally left server-util private when deploying 0.15.0😅 - fixed with 0.15.1, should be on NPM now

[lawrencenika]

just tried to create editor on partykit server, but errored out immediately for not able to resolve the following packages: fs, net, http, https, url, zlib, os, child_process, perf_hooks, and tls. So, would this new package @blocknote/server-util only be able to run in environment like Node.js that have all those packages built-in?

[soranoo]

Im running it on Nextjs server action and the above error pops up when I import the package from server action.

[YousefED]

Opened https://github.com/TypeCellOS/BlockNote/issues/942 for @soranoo and @lawrencenika

[lawrencenika]

thanks @YousefED , I was told that Partykit uses javacript env by CF called Workerd. Even though it supports TypeScript, thousands of modules from the npm registry, and WebAssembly modules, it seems to not have access to the full node runtime. Only a small subset of npm packages are available on Partykit server. You can read more about it here https://edge-runtime.vercel.app/ https://nextjs.org/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes