Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Pasting dark mode content becomes light mode #2870

Open
miku1958 opened this issue Nov 13, 2024 · 7 comments
Open

Pasting dark mode content becomes light mode #2870

miku1958 opened this issue Nov 13, 2024 · 7 comments

Comments

@miku1958
Copy link
Contributor

To Reproduce
Steps to reproduce the behavior:

  1. Use dark mode on Rooster and other editor like vscode
  2. Copy from vscode Image
  3. Paste on Rooster Demo Image

Expected behavior
Paste content keep dark mode

Device Information

  • OS: macOS 15.1
  • Browser edge, safari
@BryanValverdeU
Copy link
Contributor

Hello @miku1958,

This is by design, and this is more a copy issue than paste issue. The content that is wrote to the clipboard by vscode is already containing the background color as black. So, when that content is pasted in the editor, there is no way for us to identify whether the clipboard content is in Dark mode or not, so we just transform the content to the inverse colors.

For example:

Copying this:
Image

The HTML clipboard content looks like this, see that the parent div already contains the background color as black.

Version:0.9
StartHTML:0000000105
EndHTML:0000002289
StartFragment:0000000141
EndFragment:0000002253
<html>
<body>
<!--StartFragment--><div style="color: #ffffff;background-color: #000000;font-family: Consolas, 'Courier New', monospace;font-weight: normal;font-size: 14px;line-height: 19px;white-space: pre;"><div><span style="color: #ffffff;">&#160; &#160; &#160; &#160; </span><span style="color: #dcdcaa;">parseFormat</span><span style="color: #ffffff;">(</span><span style="color: #9cdcfe;">doc</span><span style="color: #ffffff;">.</span><span style="color: #9cdcfe;">body</span><span style="color: #ffffff;">, </span><span style="color: #9cdcfe;">context</span><span style="color: #ffffff;">.</span><span style="color: #9cdcfe;">formatParsers</span><span style="color: #ffffff;">.</span><span style="color: #9cdcfe;">segmentOnBlock</span><span style="color: #ffffff;">, </span><span style="color: #9cdcfe;">context</span><span style="color: #ffffff;">.</span><span style="color: #9cdcfe;">segmentFormat</span><span style="color: #ffffff;">, </span><span style="color: #9cdcfe;">context</span><span style="color: #ffffff;">);</span></div><br><div><span style="color: #ffffff;">&#160; &#160; &#160; &#160; </span><span style="color: #c586c0;">return</span><span style="color: #ffffff;"> </span><span style="color: #dcdcaa;">domToContentModel</span><span style="color: #ffffff;">(</span><span style="color: #9cdcfe;">doc</span><span style="color: #ffffff;">.</span><span style="color: #9cdcfe;">body</span><span style="color: #ffffff;">, </span><span style="color: #9cdcfe;">context</span><span style="color: #ffffff;">);</span></div><div><span style="color: #ffffff;">&#160; &#160; } </span><span style="color: #c586c0;">else</span><span style="color: #ffffff;"> {</span></div><div><span style="color: #ffffff;">&#160; &#160; &#160; &#160; </span><span style="color: #c586c0;">return</span><span style="color: #ffffff;"> </span><span style="color: #dcdcaa;">createEmptyModel</span><span style="color: #ffffff;">(</span><span style="color: #9cdcfe;">defaultSegmentFormat</span><span style="color: #ffffff;">);</span></div><div><span style="color: #ffffff;">&#160; &#160; }</span></div><div><span style="color: #ffffff;">}</span></div><br></div><!--EndFragment-->
</body>
</html>

Pasting the clipboard content to a normal HTML file and opening it looks like this:

Image

And since the Rooster editor is already in Dark mode we inverse the colors that vscode wrote to the clipboard.

@miku1958
Copy link
Contributor Author

Hi @BryanValverdeU I was thinking it would be nice to have an option to keep the clipboard contents in dark mode.

@BryanValverdeU
Copy link
Contributor

BryanValverdeU commented Nov 20, 2024 •
edited
Loading

I dont see a problem adding a new paste type for this requirement. But the consumer of the paste API should determine whether the content is in dark mode or not to use this paste type (Can be done passing the getPasteTypeGetter)

@miku1958 would you like to contribute with this change?

@jvillalobos
Copy link
Contributor

In an ideal world we would detect whether the content in the clipboard is dark or light, and choose to reverse the colors or not depending on it. But that's a difficult thing to do correctly, especially if the content has mixed coloring. Having an alternative paste type would be a nice way to give API consumers or even users a way to choose the right paste for them.

@JiuqingSong
Copy link
Collaborator

@jvillalobos I have some questions about the expected behavior, assume we copy from VSCode with dark background, then what are the expected behavior in the following cases with this paste option:

  1. Paste in light mode
  2. After 1, switch to dark mode
  3. After 2, switch back to light mode
  4. Paste in dark mode
  5. After 4, switch to light mode
  6. After 5, switch back to dark mode

@jvillalobos
Copy link
Contributor

To be clear, I'm not suggesting we change anything in the default behavior in Rooster or Outlook for the time being, but I see the value in adding the option via API.

But, thinking forward, I think what we should aim for is to determine the light/dark mode of the content in the clipboard and then decide if the color should be reversed or not, aiming to match the current light/dark mode of the editor. To figure out the mode I'm guessing that involves looking at the background color of the container, and if there is none, looking at the font color, but I imagine it's much more complex.

The alternative, and possibly easier approach, is to offer users a way to reverse the color of the pasted content manually. So, if the content doesn't match, they can go to the paste options, reverse the color, and see if that works better for them.

@JiuqingSong
Copy link
Collaborator

I agree.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@jvillalobos @BryanValverdeU @JiuqingSong @miku1958