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.34k stars 433 forks source link

Copy to Clipboard Error in Firefox #1063

Open luukbox opened 1 week ago

luukbox commented 1 week ago

Describe the bug Firefox does not support the async Clipboard API, causing an error when attempting to copy content from the editor.

To Reproduce

Workaround I noticed that createInternalHTMLSerializer and cleanHTMLToMarkdown aren't actually async. Therefore, it seems like selectedFragmentToHTML could be converted to a synchronous function by removing the call to initializeESMDependencies.

In our environment, I was able to do this and tested it successfully with a custom copyToClipboard extension while disabling the default one.

That said, I'm unsure of the exact circumstances when these dependencies are required, or their purpose, so I'm not certain if this is a universally viable solution.

For anyone interested, here is a StackBlitz example demonstrating the workaround.

matthewlipski commented 1 week ago

Awesome, thanks for providing your code! We did notice this was an issue when first implementing copy/paste but couldn't find a workaround at the time (hence why e2e tests for copy/paste on Firefox are disabled), so even if it requires tweaking it's great to have a something to reference for a fix.

Dartoxian commented 1 week ago

Thanks @luukbox - this workaround works for me. One minor change I needed was to use const editor: typeof schema.BlockNoteEditor as I'm using a custom schema.

carlonicora commented 3 hours ago

@Dartoxian I tried the same workaroud, but it does not work for me. Is there anything specific you do to make it work?

I have something like this

const schema = BlockNoteSchema.create({
    inlineContentSpecs: {
      ...defaultInlineContentSpecs,
    },
  });

  const editor: typeof schema.BlockNoteEditor = useCreateBlockNote({
    schema,
    initialContent: initialContent
      ? (JSON.parse(initialContent) as PartialBlock[])
      : undefined,
    uploadFile: uploadImage,
  });

and it still does not work.

Thanks a lot

carlonicora commented 3 hours ago

Sorry, in 0.15.9 that works!

carlonicora commented 1 hour ago

In the end the workaround seems to be working to paste something, but it is still present when trying to copy from it