Error converting Image Block to Markdown

[wkocjan]

Describe the bug
Newly inserted "Image Block" to the editor causes error when converting to markdown.

Error message:

Error: Expected node, not `undefined`

It happens when editor.blocksToMarkdown() is called with empty Image Block.

To Reproduce

1. Initialize editor with blocksToMarkdown() call in onEditorContentChange:

const editor = useBlockNote({
 onEditorContentChange: editor => {
 editor.blocksToMarkdown(editor.topLevelBlocks).then(markdown => {
 console.debug(markdown);
 });
 },
 });

2. Open editor in the browser & insert Image Block. Immediately onEditorContentChange event will fire, causing blocksToMarkdown to run, which throws an error.

Here is the block object with empty image causing the error:

{
 "id": "cdd6b0c5-fcb4-475c-a582-90a57f8639e1",
 "type": "image",
 "props": {
 "backgroundColor": "default",
 "textAlignment": "left",
 "url": "",
 "caption": "",
 "width": 512
 },
 "content": undefined,
 "children": []
}

Expected behavior

• Do not generate any markdown when image doesn't have url
• Generate markdown code ([alt text](image_url)) when there is an image.

[matthewlipski]

Thanks for writing up this issue! We still have some work to do on serializing blocks made using createBlockSpec and createReactBlockSpec. This issue is closely related to #221 and #282.

Context:
The root cause of this bug is that we're using ProseMirror's node views to define how custom blocks are rendered, as this lets us get the block that needs to be rendered. The problem with this is that node views are only used for rendering to the DOM, not for serialization, which is used for e.g. copying to clipboard and converting to HTML. We are still working on implementing a custom serializer for the underlying ProseMirror editor which will let us use a block's render function for both rendering and serialization.

[wkocjan]

Thanks for quick and detailed reply. Ease of writing custom components with Blocknote is great, keeping my fingers crossed for custom serialization solution.

For now I made a workaround to convert image block to markdown (and store them as paragraph block) before calling blocksToMarkdown(). It's not a nice solution, also complicates the backward conversion (from markdown to image block), but does the job... Definitely looking forward to more elegant & flexible way to achieve it.

[jmas]

@matthewlipski @wkocjan Hello! I added PR: #381 that fix the issue. Please check!