Fix: video parsing and Markdown export issues

[Hector-Zhuang]

Description:

This PR addresses two issues related to <video> elements in the editor:

Video parsed as an image

Previously, <video> elements were being processed by the image handler in remarkRehype, causing videos to be treated as images.

Video exported as a link in Markdown

When exporting content containing videos to Markdown, the videos were incorrectly serialized as standard link Markdown:

Fixes implemented:

Updated the image handler to detect videos by extension (mp4, webm, etc.) and process them as <video> elements with the correct attributes: src, data-url, data-name and so on.

Added a convertVideoElementToMarkdown plugin to transform <video> elements into a dedicated video markdown with url and title.

#1938

[vercel]

@Hector-Zhuang is attempting to deploy a commit to the TypeCell Team on Vercel.

A member of the Team first needs to authorize it.

[iyansr]

@matthewlipski @nperez0111 @YousefED
Any possibilities to merge this ? We really need

[Hector-Zhuang]

@matthewlipski @nperez0111 @YousefED Any possibilities to merge this ? We really need

Try to maintain or fork a repository of this project. This is what I'm doing. I've been fixing bugs while integrating this with my work

[pkg-pr-new]

Open in StackBlitz

@blocknote/ariakit

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/ariakit@1955

@blocknote/code-block

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/code-block@1955

@blocknote/core

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/core@1955

@blocknote/mantine

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/mantine@1955

@blocknote/react

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/react@1955

@blocknote/server-util

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/server-util@1955

@blocknote/shadcn

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/shadcn@1955

@blocknote/xl-ai

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-ai@1955

@blocknote/xl-docx-exporter

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-docx-exporter@1955

@blocknote/xl-email-exporter

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-email-exporter@1955

@blocknote/xl-multi-column

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-multi-column@1955

@blocknote/xl-odt-exporter

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-odt-exporter@1955

@blocknote/xl-pdf-exporter

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-pdf-exporter@1955

commit: 4a2bc9c

[nperez0111]

Let's wait for: #1904

[nperez0111]

@iyansr feel free to use the pkg pr new versions that were generated above. They'll include this and some unreleased changes

[iyansr]

@iyansr feel free to use the pkg pr new versions that were generated above. They'll include this and some unreleased changes

@nperez0111 I got this when i install from pkg pr

[nperez0111]

@iyansr
This error happens when you have multiple versions of @blocknote/core installed in the same repo. You should update all of the versions to be pkg.pr.new versions, not just one package. Since they depend on each other.

[iyansr]

@iyansr This error happens when you have multiple versions of @blocknote/core installed in the same repo. You should update all of the versions to be pkg.pr.new versions, not just one package. Since they depend on each other.

@nperez0111 Should I install all with the pkg.pr.new ?

[nperez0111]

Yep, that should be it @iyansr

[iyansr]

Yep, that should be it @iyansr

The issue still exist unfortunately 🥲

[nperez0111]

You likely have duplicates somewhere, look around for duplicate versions using npm ls @blocknote/core or inspect your package-lock, this is your project so I can't help you with it anymore than this

[iyansr]

You likely have duplicates somewhere, look around for duplicate versions using npm ls @blocknote/core or inspect your package-lock, this is your project so I can't help you with it anymore than this

Sure, I will try, thanks for helping 🙏

[matthewlipski]

@nperez0111 how do you feel about checking if a file is a video based on a hard coded list of file endings? The alternative would be to get it from the meta.fileBlockAccept field in the video block's implementation. It would be nice to use this instead of a hard coded list, but I'm wary of what happens if someone replaces the default video block with their own. Wdyt?

[nperez0111]

I think hard-coding is fine for now, this is what the markdown parser would've done anyway.

[nperez0111]

Thanks @Hector-Zhuang for this!