mdx-editor / editor

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

[BUG] Can't paste code with newlines, without it breaking into a paragraph for each line. #412

Closed gabrii closed 3 months ago

gabrii commented 3 months ago

Describe the bug There is no way to paste code as text while preserving the new lines and not converting them to paragraphs, other than trying to instruct the user to use a code block by pressing this:

```[space]

Which introduces a different set of issues.

To Reproduce Steps to reproduce the behavior:

  1. Go to https://codesandbox.io/p/sandbox/mdx-editor-base-q8s7zr?file=/src/App.tsx
  2. Set readOnly={false}
  3. Select all code on the codesandbox IDE (the left side)
  4. Click on the mdxeditor, and paste with either:
    • CTRL+SHIFT+V
    • Right Click -> Paste as plain text

Expected behavior I expect pasting as plain text to not break every line into it's own <p>: image

Actual behavior All the code is inserted with each line being it's own <p>. With just CTRL+V, all the code is inserted into a single <p>, but new lines are removed. image

Desktop (please complete the following information):

Additional context I don't want to speak for all users, as the default current behavior works quite well for pasting text (Although it's impossible to add a multi-line paragraph without splitting each line into distinct paragraphs). But we would find it very useful if there was some workaround or prop to allow either CTRL+V or CTRL+SHIFT+V to paste whatever the clipboard holds into a single paragraph while preserving new lines.

This might be very hard to fix without breaking behavior retrocompatibility (can't keep everyone happy), so instead some pointers on how to implement this (Maybe adding listeners for some event? But then how to inject the content in the current position of the cursor?). We've already "forked" some plugins of the MDX editor + Lexical to modify their behavior, so any pointers whatsoever on how to accomplish this change would be appreciated.

gabrii commented 3 months ago

I can confirm the exact same issue happens on Google Chrome in OSX with CMD + V or CMD + SHIFT + V

petyosi commented 3 months ago

This is not specific to the MDXEditor. You should be able to get some directions in the Lexical discord server. On a side note, pasting code in a markdown targeting editor will result in a very painful markdown source, because common programming characters have to be escaped. This will work with the Editor (because of the AST approach), but still.

gabrii commented 3 months ago

Thanks for the directions! I indeed didn't consider the escaping of the code, I think for simplicity I will switch to text area for user input.