mdx-editor / editor

A rich text editor React component for markdown
https://mdxeditor.dev
MIT License
1.97k stars 148 forks source link

[BUG] Pasting from loop (MSFT) throws an error #365

Closed shaipetel closed 8 months ago

shaipetel commented 8 months ago

Describe the bug When I paste from loop, a Microsoft online app, the pasted HTML contains some errors. Unfortunately I can't share the source.

Would it be possible to register a "paste helper", some way for me to be able to cleanup the content that is being pasted before the editor takes over?

Expected behavior Paste from other system, such as loop, will work as expected. Allowing the developer to parse/manipulate and cleanup the pasted content before applying it to the editor.

Screenshots image

Additional context

It would be great if we can register a custom paste handler, that will be able to manipulate the pasted content before applying it to the editor. Otherwise, just fixing the paste process to handle what might be a broken HTML would also be good enough - the HTML content is produced by loop.microsoft.com when copying the page content. In my tests, I have run the HTML through TurndownService to convert it to markdown and it worked perfectly. It would be awesome to have that feature built in, or to allow devs to write our own paste handler.

shaipetel commented 8 months ago

To update, the bug on paste still exists but I did figure out how to write a custom paste handler, in case anyone else needs it.

I will work on trying to make it take over the paste.

export const pastePlugin = realmPlugin({
  init(realm, params) {
    realm.pub(createActiveEditorSubscription$, editor => {
      return editor?.registerCommand(PASTE_COMMAND, (event: ClipboardEvent) => {
        let cbPayload = Array.from(event.clipboardData?.items || [])
        cbPayload = cbPayload.filter((i) => /html/.test(i.type)) // Strip out the non-html bits
        //todo...
        //return true if command handled
        return true;
      },
        COMMAND_PRIORITY_CRITICAL);
    });
  }
});
petyosi commented 8 months ago

@shaipetel what you've discovered is the way to go - it's all in the Lexical space. From there on, I guess you should be fine? I'm not sure if that's the case.

shaipetel commented 8 months ago

Yeah, I was able to complete my goal of fixing the html before paste. however - the bug of pasting from loop remains with the error above - if you would like I can show you in a share session but I cannot share the loop data publicly.

Thanks!