Opened 8 years ago

Closed 6 years ago

Last modified 6 years ago

#7146 closed Bug (fixed)

WebKit: pasting block elements results in an extra div

Reported by: Wiktor Walc Owned by:
Priority: Normal Milestone:
Component: Core : Pasting Version: 3.0
Keywords: WebKit IBM VendorFix Cc: satya_minnekanti@…

Description

Confirmed on both Safari and Chrome, on Mac and Windows.

Steps to reproduce

  • start with
    <h1>
             Heading1</h1>
    
  • copy the first line, press enter and paste it below
  • result: heading is surrounded with a div tag.
<h1>
        Heading1</h1>
<p>
        &nbsp;</p>
<div style="font-family: Arial, Verdana, sans-serif; font-size: 12px;
color: rgb(34, 34, 34); background-color: rgb(255, 255, 255); ">
        <h1>
                Heading1</h1>
</div>

The result in Chrome 9.0.597.94 is similar, but note the extra <meta> tag:

<h1>
        Heading1</h1>
<p>
        &nbsp;</p>
<meta charset="utf-8" />
<div style="font-family: Arial, Verdana, sans-serif; font-size: 12px;
color: rgb(34, 34, 34); background-color: rgb(255, 255, 255); ">
        <h1>
                Heading1</h1>
</div>

Attachments (2)

7146.patch (1.1 KB) - added by Garry Yao 8 years ago.
screen.png (59.8 KB) - added by Jakub Ś 7 years ago.

Download all attachments as: .zip

Change History (29)

comment:1 Changed 8 years ago by Wiktor Walc

Status: newconfirmed

comment:2 Changed 8 years ago by Wiktor Walc

Keywords: WebKit added

Looks like a similar issue to #6194.

comment:3 Changed 8 years ago by Garry Yao

Not a heading specific issue, a reduced TC:

  1. Load any sample page, select all doc content and copy to clipboard.
  2. Open new paragraph, paste into it;
    • Actual Result: an extra div's wrapping around copied content;

Changed 8 years ago by Garry Yao

Attachment: 7146.patch added

comment:4 Changed 8 years ago by Garry Yao

Owner: set to Garry Yao
Status: confirmedreview

It's a pity that even the comments inline had aware of the bug but not the codes ;/

comment:5 Changed 8 years ago by Wiktor Walc

Status: reviewreview_failed

Note that if you change the background color in contents.css into any other than white (e.g #eee), Safari will use the same background-color in this extra div element:

<div style="font-family: Arial, Verdana, sans-serif; font-size: 12px; color: rgb(34, 34, 34); background-color: rgb(238, 238, 238); ">

comment:6 Changed 8 years ago by Garry Yao

#6783 marked as a DUP.

comment:7 Changed 8 years ago by Satya Minnekanti

Cc: satya_minnekanti@… added
Keywords: IBM added

comment:8 in reply to:  5 Changed 8 years ago by Garry Yao

Owner: Garry Yao deleted
Status: review_failednew

Replying to wwalc:

Note that if you change the background color in contents.css into any other than white (e.g #eee), Safari will use the same background-color in this extra div element:

<div style="font-family: Arial, Verdana, sans-serif; font-size: 12px; color: rgb(34, 34, 34); background-color: rgb(238, 238, 238); ">

In that case it's difficult to find a proper way to determinate such an extra div, we might need to wait for a Webkit fix eventually.

comment:9 Changed 8 years ago by Jakub Ś

Similar (perhaps related) issue #6366

comment:10 Changed 8 years ago by Jakub Ś

Status: newconfirmed

Bug reported by @garry.yao to Webkit - https://bugs.webkit.org/show_bug.cgi?id=61779

As agreed with @wwalc I'm confirming this ticket.

comment:11 Changed 8 years ago by Garry Yao

The fixing of this bug has been planned in the new pasting system of v4 thus is not likely to be resolved in recent milestones.

comment:12 Changed 8 years ago by Garry Yao

Keywords: VendorFix added

comment:13 in reply to:  12 Changed 8 years ago by Satya Minnekanti

Replying to garry.yao:

@garry.yao could you please add the ticket that you logged with Safari & Chrome for this issue

comment:14 Changed 8 years ago by Frederico Caldeira Knabben

@satya, please check previous comments.

comment:15 Changed 7 years ago by Jakub Ś

This ticket was duplicated in #5394

comment:17 Changed 7 years ago by Jakub Ś

#6366 was marked as duplicate.

The same thing happens when you drag the contents from one editor to another.

comment:20 Changed 7 years ago by Jakub Ś

This is Webkit pasting problem and also our problem.

When you paste something from Notepad in Webkit or when you paste HTML it gets wrapped in Divs. When you have your enter mode set to default ENTER_P (paragraph) those Divs get pasted inside this paragraph.
This can be confirmed when looking at elements path and when viewing the code with Chrome developer tools (Please check the attached screen.png)
This invalid code gets fixed when switching to source or getting the data from editor (when HTML data processor is called). That is why users get impression that extra p is added.

For the above example with heading scenario is acctually the same. You paste Heading wrapped in Div into Heading what results in:

<h1><div style="font-family: Arial, Verdana, sans-serif; font-size: 12px; color: rgb(34, 34, 34); background-color: rgb(255, 255, 255); ">
	<h1>
		Heading1</h1>
</div></h1>

This gets fixed when you swich to source mode and the result is:

<h1>
	&nbsp;</h1>
<div style="font-family: Arial, Verdana, sans-serif; font-size: 12px; color: rgb(34, 34, 34); background-color: rgb(255, 255, 255); ">
	<h1>
		Heading1</h1>
</div>

Note that with the above example extra paragraph at the bottom is generated - it was described here: #8231 .

NOTE: This will be fixed in version 4 of editor which will soon be introduced.

Changed 7 years ago by Jakub Ś

Attachment: screen.png added

comment:21 Changed 7 years ago by Jakub Ś

Other tickets that also concern pasting in Webkit: #6436 and #6131

Last edited 7 years ago by Jakub Ś (previous) (diff)

comment:22 Changed 7 years ago by Jakub Ś

Original ticket is no longer reproducible in Chrome 18 but there is a way to still reproduce it. All you have to do is copy element like p or h1 with new line

TC taken from #8932:

  1. Content in the editor:
    <p>This is some <strong>sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p>
    
  2. Insert new paragraph at the end (hit return)
  3. Select all (Ctrl+A) and copy (Ctrl+C)
  4. Go to the end of the editor (the blank line)
  5. Paste in the text (Ctrl+V) several times

comment:23 Changed 7 years ago by Jakub Ś

#9051 was marked as duplicate.

comment:24 in reply to:  22 Changed 6 years ago by Piotrek Koszuliński

Replying to j.swiderski:

Original ticket is no longer reproducible in Chrome 18 but there is a way to still reproduce it. All you have to do is copy element like p or h1 with new line

This issue is no longer reproducible in v4.

comment:25 Changed 6 years ago by Jakub Ś

#9257 was markes as duplicate.

Comment from that ticket -

Because that's Safari's 5 problem. I believe that it was occurring in old version of Chrome, but was fixed in Webkit's version released between Safari 5 and Safari 6 (so it's also fixed in Safari 6).

comment:26 Changed 6 years ago by Piotrek Koszuliński

Resolution: fixed
Status: confirmedclosed

This issue definitely isn't reproducible any more.

comment:27 in reply to:  26 Changed 6 years ago by Satya Minnekanti

Replying to Reinmar:

This issue definitely isn't reproducible any more.

This is still reproducible in Safari on latest 4.x nightly builds as well. Please re-open this defect

comment:28 Changed 6 years ago by Piotrek Koszuliński

On which version of Safari?

comment:29 in reply to:  28 Changed 6 years ago by Satya Minnekanti

Replying to Reinmar:

On which version of Safari?

On Safari 5.1.2 & 5.1.7

comment:30 Changed 6 years ago by Piotrek Koszuliński

I can reopen this ticket but we're not going to fix this issue, because it has been fixed in Webkit many months (years?) ago, so both - Chrome and Safari 6 work correctly. It would be pointless to keep this ticket until we drop support for Safari 5.

Nota bene - since CKEditor 4.1 when editor is initialized without div support (removed div plugin or div button from toolbar) this issue will be fixed by the ACF (see #9829).

Note: See TracTickets for help on using tickets.
© 2003 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy