TypeCellOS / BlockNote

A React Rich Text Editor that's block-based (Notion style) and extensible. Built on top of Prosemirror and Tiptap.
https://www.blocknotejs.org/
Mozilla Public License 2.0
6.76k stars 471 forks source link

Add "disableUploads"/"embeddedOnly" option on Media blocks? #1230

Open bleafman opened 2 weeks ago

bleafman commented 2 weeks ago

Is your feature request related to a problem? Please describe.

Hi BlockNote folks! We would like to be able to support Image uploads but only allow embeds for other media formats (video, audio, etc.).

Describe the solution you'd like

I'd like for Media blocks to accept some sort of configuration option (ex. embedOnly) that will not show the Upload option.

Screenshot 2024-11-08 at 3 08 28 PM

The "Upload" option is currently all or nothing for all Media blocks if you provide an uploadFile function in the FilePanel.

Describe alternatives you've considered

I can build my own custom blocks but because the control for FilePanel is so deep I'm copying a LOT of code to keep the same UX for all Media blocks.

Additional context

Happy to put up a PR, just wanted to check to make sure it wouldn't violate any design decisions with the component APIs to add more configuration.

Bonus [ ] I'm a sponsor and would appreciate if you could look into this sooner than later 💖

YousefED commented 1 week ago

Thanks!

I can build my own custom blocks but because the control for FilePanel is so deep I'm copying a LOT of code to keep the same UX for all Media blocks.

Curious what you're running into exactly. Could you just pass a different set of tabs depending on the block? Haven't tried this, but my first thoughts are along these lines:

// pseudo code
const MyFilePanel(props) {
if(props.block.type === "xxx") {
 return <FilePanel tabs={[{
      name: dict.file_panel.embed.title,
      tabPanel: <EmbedTab block={props.block} />,
    }]}
}
return <FilePanel />
}