Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Error converting Image Block to Markdown #361

Closed
wkocjan opened this issue Oct 4, 2023 · 3 comments
Closed

Error converting Image Block to Markdown #361

wkocjan opened this issue Oct 4, 2023 · 3 comments
Labels
bug Something isn't working prio:high High priority

Comments

@wkocjan
Copy link

wkocjan commented Oct 4, 2023

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);
      });
    },
  });
  1. 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.
@wkocjan wkocjan added the bug Something isn't working label Oct 4, 2023
@matthewlipski
Copy link
Collaborator

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.

@matthewlipski matthewlipski added the prio:high High priority label Oct 4, 2023
@wkocjan
Copy link
Author

wkocjan commented Oct 9, 2023

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
Copy link

jmas commented Oct 15, 2023

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working prio:high High priority
Projects
None yet
Development

No branches or pull requests

3 participants