search

ckeditor / ckeditor5

Powerful rich text editor framework with a modular architecture, modern integrations, and features like collaborative editing.
https://ckeditor.com/ckeditor-5
Other
8.71k stars 3.63k forks source link

Copying from Wikipedia creates text with white background #9329

Open neongreen opened 3 years ago

neongreen commented 3 years ago

📝 Provide detailed reproduction steps (if any)

  1. Open https://ckeditor.com/docs/ckeditor5/latest/features/font.html#demo
  2. Open https://en.wikipedia.org/wiki/White_Anglo-Saxon_Protestants and copy "usually of British descent" from the first paragraph
  3. Paste into CKEditor and check the text's background color

✔️ Expected result

Pasted text does not have a background color.

❌ Actual result

Pasted text has white background.

https://user-images.githubusercontent.com/1523306/112072694-ad99c300-8b72-11eb-892a-97ea461c555b.mov

This might not seem like a big deal, but it's very annoying when the editor is used in an application with a dark theme.

image

📃 Other details

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

neongreen commented 3 years ago

Funnily, this doesn't apply to bolded text.

image

AnnaTomanek commented 3 years ago

@ckeditor/qa-team Can you check what's in the clipboard in this case?

FilipTokarski commented 3 years ago

I pasted "White Anglo-Saxon Protestants (WASPs) are upper-class[1] white American Protestants, usually of British descent." fragment from wikipedia page:

<meta charset='utf-8'><b
    style="color: rgb(32, 33, 34); font-family: sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">White
    Anglo-Saxon Protestants</b><span
    style="color: rgb(32, 33, 34); font-family: sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;"><span> </span>(</span><b
    style="color: rgb(32, 33, 34); font-family: sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">WASPs</b><span
    style="color: rgb(32, 33, 34); font-family: sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;">)
    are<span> </span></span><a href="https://en.wikipedia.org/wiki/Upper-class" class="mw-redirect" title="Upper-class"
    style="text-decoration: none; color: rgb(6, 69, 173); background: none rgb(255, 255, 255); font-family: sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">upper-class</a><sup
    id="cite_ref-Zhang_1-0" class="reference"
    style="line-height: 1; unicode-bidi: isolate; white-space: nowrap; font-weight: 400; font-style: normal; font-size: 11.2px; color: rgb(32, 33, 34); font-family: sans-serif; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><a
        href="https://en.wikipedia.org/wiki/White_Anglo-Saxon_Protestants#cite_note-Zhang-1"
        style="text-decoration: none; color: rgb(6, 69, 173); background: none;">[1]</a></sup><span
    style="color: rgb(32, 33, 34); font-family: sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;"><span> </span>white<span> </span></span><a
    href="https://en.wikipedia.org/wiki/Protestantism_in_the_United_States" title=""
    style="text-decoration: underline; color: rgb(6, 69, 173); background: none rgb(255, 255, 255); font-family: sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">American
    Protestants</a><span
    style="color: rgb(32, 33, 34); font-family: sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;">,
    usually of British descent.</span>
dan-mcmanus commented 3 years ago

Have you tried the "Paste as plain text" option? (ctrl/cmd + shift + v)

neongreen commented 3 years ago

Sure, the "paste as plain text" works.

I am still surprised that Wikipedia text has background-color set, but maybe CKEditor can't do anything about it. I am also surprised that bold text doesn't have background-color set for whatever reason.

Regardless, I have worked around it by stripping background-color on paste altogether, so personally I wouldn't mind if this issue is closed.

benfosterlitmos commented 3 months ago

I have just run into this issue when enabling the FontColor and FontBackgroundColor plugins, and it is not specific to Wikipedia. It seems to occur when copying text from any website - the website's background color gets applied in the editor.

It is easily reproducible by copying text from a comment in this issue (with Github in dark mode) and pasting into the demo on this page: https://ckeditor.com/docs/ckeditor5/latest/examples/builds-custom/full-featured-editor.html. The text gets pasted with white font color and a dark grey background.

image
benfosterlitmos commented 3 months ago

Upon further inspection of the clipboard data it doesn't look like a CKEditor issue as the styles are being applied by the browser when copying the text. The same text pasted into Word will also apply the text+bg colors.

I'd like to remove the styles when pasting from external sources, but retain if copied with CKeditor, is there a way to do this in a plugin and distinguish between regular HTML paste vs paste of content copied from CKEditor?

RaviDecisions commented 1 month ago

One problem with this is when we apply the link on the pasted text the font color remains the same instead of the blue color.

benfosterlitmos commented 1 month ago

Looks like even Microsoft is changing the default paste behaviour for Word now to match formatting with the target document:

https://www.theverge.com/2024/5/13/24155312/microsoft-word-default-paste-option-merge-formatting

Would be great to have an option for similar merge formatting in CKEditor.

RaviDecisions commented 1 month ago

Is there any way to stop overriding the color of the font when we create a link in the pasted text in the editor?