Copy & Paste to blocks adds unwanted line breaks

[MaluNoPeleke]

Describe the bug
Copy & Paste to blocks adds unwanted line breaks in specific circumstances

To Reproduce
Steps to reproduce the behavior:

1. Go to https://de.wikipedia.org/wiki/%C3%9Cberfall_auf_die_Zionskirche
2. Copy the first paragraph ("Der Überfall...verschwinden.")
3. Paste it as a new block in a Kirby panel page
4. See the content with a lot of unwanted line breaks

Expected behavior
Pasted content is displayed as input.

Screenshots

Kirby Version
3.6-beta.3

Desktop (please complete the following information):

• OS: Windows 11
• Browser: Chrome
• Version: 94

[afbora]

The strange thing is that; This problem occurs when I manually select the first paragraph, but when I select the paragraph with a double click it works fine 🤷‍♂️

[bastianallgeier]

@afbora I already saw quite regularly that different forms of selecting content lead to different HTML. Sometimes the wrapping container is included, sometimes not.

[bastianallgeier]

✅

[afbora]

@bastianallgeier This issue still continue for rc.1

[bastianallgeier]

@afbora really? I can no longer reproduce it at all. That's so weird. Then we need to have another look in rc.2 I think I need the HTML from your clipboard to check for further issues. It could be a difference in the clipboard content between mac and windows.

[afbora]

@bastianallgeier Did you try to select the paragraph manually? (Not with double click)

https://user-images.githubusercontent.com/3393422/137882644-13b07383-1c0a-4270-b625-73a1feaeff68.mp4

[bastianallgeier]

Yes, I tried in multiple ways …

https://user-images.githubusercontent.com/24532/137883013-5435dfc7-ff1f-49ce-b913-ce15a262745c.mp4

[afbora]

I guess this is about Windows OS and also @MaluNoPeleke using Windows. Lets move the issue RC.2

[MaluNoPeleke]

Sadly I can confirm that it still occurs for me with RC.1

[distantnative]

@afbora @MaluNoPeleke since we're having problems to recreate this on macOS - is there any way you could share your clipboard content for when the problem happens?

[afbora]

https://de.wikipedia.org/wiki/%C3%9Cberfall_auf_die_Zionskirche

@distantnative First paragraph of this article. Try to select with manual (not double click)

Der Überfall auf die Zionskirche am 17. Oktober 1987 war ein Angriff von rechtsradikalen Skinheads auf Besucher eines Element-of-Crime-Konzertes in der Zionskirche in Ost-Berlin. Der Überfall, die Strafprozesse und das damit einhergehende Medienecho führten erstmals zu einer öffentlichen Auseinandersetzung mit Neonazis in der DDR. Das Ministerium für Staatssicherheit führte danach eine geheime Untersuchung über Skinheads in der DDR durch. Im Umfeld der DDR-Opposition, die auch in der Zionskirche beheimatet war, bildeten sich Ende 1987 die ersten Antifa-Gruppen. Der Überfall wurde als Zäsur wahrgenommen, bereits bestehende rechtsradikale und nationalistische Strömungen im Osten Deutschlands wurden sichtbar und konnten nicht mehr unter dem Mantel des staatlich verordneten „Antifaschismus“ verschwinden.

[distantnative]

@afbora Yes, but Bastian wrote he cannot reproduce this on macOS. So I think we really have to look at what ends up on the clipboard on Windows (seems to differ from what ends up on the clipboard on macOS).

[afbora]

Do you want JSON output?

[afbora]

When I paste the first paragraph, here the json output:

[
    {
        "content": {
            "text": "<p>Der</p><p><strong>Überfall auf die Zionskirche</strong></p><p>am 17. Oktober 1987 war ein Angriff von rechtsradikalen</p><p><a href=\"https://de.wikipedia.org/wiki/Skinhead\" title=\"Skinhead\" rel=\"noopener noreferrer\">Skinheads</a></p><p>auf Besucher eines</p><p><a href=\"https://de.wikipedia.org/wiki/Element_of_Crime\" title=\"Element of Crime\" rel=\"noopener noreferrer\">Element-of-Crime</a></p><p>-Konzertes in der</p><p><a href=\"https://de.wikipedia.org/wiki/Zionskirche_(Berlin)\" title=\"Zionskirche (Berlin)\" rel=\"noopener noreferrer\">Zionskirche</a></p><p>in</p><p><a href=\"https://de.wikipedia.org/wiki/Ost-Berlin\" title=\"Ost-Berlin\" rel=\"noopener noreferrer\">Ost-Berlin</a></p><p>. Der Überfall, die Strafprozesse und das damit einhergehende Medienecho führten erstmals zu einer öffentlichen Auseinandersetzung mit</p><p><a href=\"https://de.wikipedia.org/wiki/Neonazi\" title=\"Neonazi\" rel=\"noopener noreferrer\">Neonazis</a></p><p>in der</p><p><a href=\"https://de.wikipedia.org/wiki/DDR\" title=\"DDR\" rel=\"noopener noreferrer\">DDR</a></p><p>. Das</p><p><a href=\"https://de.wikipedia.org/wiki/Ministerium_f%C3%BCr_Staatssicherheit\" title=\"Ministerium für Staatssicherheit\" rel=\"noopener noreferrer\">Ministerium für Staatssicherheit</a></p><p>führte danach eine geheime Untersuchung über Skinheads in der DDR durch. Im Umfeld der DDR-Opposition, die auch in der Zionskirche beheimatet war, bildeten sich Ende 1987 die ersten</p><p><a href=\"https://de.wikipedia.org/wiki/Antifa\" title=\"Antifa\" rel=\"noopener noreferrer\">Antifa</a></p><p>-Gruppen. Der Überfall wurde als</p><p><a href=\"https://de.wikipedia.org/wiki/Z%C3%A4sur_(Geschichte)\" title=\"Zäsur (Geschichte)\" rel=\"noopener noreferrer\">Zäsur</a></p><p>wahrgenommen, bereits bestehende rechtsradikale und nationalistische Strömungen im Osten Deutschlands wurden sichtbar und konnten nicht mehr unter dem Mantel des staatlich verordneten „</p><p><a href=\"https://de.wikipedia.org/wiki/Antifaschismus#DDR\" title=\"Antifaschismus\" rel=\"noopener noreferrer\">Antifaschismus</a></p><p>“ verschwinden.</p>"
        },
        "id": "e7c3ce8b-388c-45ab-ae03-d39e7807d916",
        "isHidden": false,
        "type": "text"
    }
]

[afbora]

With clipboard content viewer tool

Version:0.9
StartHTML:0000000180
EndHTML:0000013224
StartFragment:0000000216
EndFragment:0000013188
SourceURL:https://de.wikipedia.org/wiki/%C3%9Cberfall_auf_die_Zionskirche
<html>
<body>
<!--StartFragment--><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;">Der<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;">Überfall auf die Zionskirche</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>am 17. Oktober 1987 war ein Angriff von rechtsradikalen<span> </span></span><a href="https://de.wikipedia.org/wiki/Skinhead" title="Skinhead" 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;">Skinheads</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;"><span> </span>auf Besucher eines<span> </span></span><a href="https://de.wikipedia.org/wiki/Element_of_Crime" title="Element of Crime" 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;">Element-of-Crime</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;">-Konzertes in der<span> </span></span><a href="https://de.wikipedia.org/wiki/Zionskirche_(Berlin)" title="Zionskirche (Berlin)" 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;">Zionskirche</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;"><span> </span>in<span> </span></span><a href="https://de.wikipedia.org/wiki/Ost-Berlin" title="Ost-Berlin" 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;">Ost-Berlin</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;">. Der Überfall, die Strafprozesse und das damit einhergehende Medienecho führten erstmals zu einer öffentlichen Auseinandersetzung mit<span> </span></span><a href="https://de.wikipedia.org/wiki/Neonazi" class="mw-redirect" title="Neonazi" 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;">Neonazis</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;"><span> </span>in der<span> </span></span><a href="https://de.wikipedia.org/wiki/DDR" class="mw-redirect" title="DDR" 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;">DDR</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;">. Das<span> </span></span><a href="https://de.wikipedia.org/wiki/Ministerium_f%C3%BCr_Staatssicherheit" title="Ministerium für Staatssicherheit" 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;">Ministerium für Staatssicherheit</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;"><span> </span>führte danach eine geheime Untersuchung über Skinheads in der DDR durch. Im Umfeld der DDR-Opposition, die auch in der Zionskirche beheimatet war, bildeten sich Ende 1987 die ersten<span> </span></span><a href="https://de.wikipedia.org/wiki/Antifa" title="Antifa" 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;">Antifa</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;">-Gruppen. Der Überfall wurde als<span> </span></span><a href="https://de.wikipedia.org/wiki/Z%C3%A4sur_(Geschichte)" title="Zäsur (Geschichte)" 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;">Zäsur</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;"><span> </span>wahrgenommen, bereits bestehende rechtsradikale und nationalistische Strömungen im Osten Deutschlands wurden sichtbar und konnten nicht mehr unter dem Mantel des staatlich verordneten „</span><a href="https://de.wikipedia.org/wiki/Antifaschismus#DDR" title="Antifaschismus" 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;">Antifaschismus</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;">“ verschwinden.</span><!--EndFragment-->
</body>
</html>

[distantnative]

Urgh, I can't reproduce it myself. It either works or the HTML from your clipboard just ends up as code block.

[MaluNoPeleke]

@afbora @MaluNoPeleke since we're having problems to recreate this on macOS - is there any way you could share your clipboard content for when the problem happens?

It seems to be a Windows only issue but I don't know how to provide the output from it in a format that helps you to reproduce it on macOS

[afbora]

@distantnative I've found a clue; This issue occurs when you copy a single paragraph or part of a paragraph and it contains html tags (strong, a, etc..)

Step to reproduce

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

1. Copy only first sentence from above paragraph, part of Lorem Ipsum ... industry
2. Be sure you copied only first sentence and from sample paragraph :))
3. Paste and see issue (at least for Windows)

[MaluNoPeleke]

I have another possibility discovered to reproduce this on macOS:

1. Open https://www.peleke.de/warum-eine-lowentrophae-aus-papier-trotz-schlechter-usability-ein-tolles-geschenk-ist/
2. Copy at least the first paragraph INCLUDING an embedded picture
3. Paste it as blocks
4. See garbled output:

As I am moving my personal blog from Ghost CMS to Kirby I have to do copy & paste every article manually.

[bastianallgeier]

I think I finally got it. I still cannot reproduce it. Even with the last example. But the code snippet from @afbora really helped to track it down. When you paste content that's wrapped in a span but no other block element, those nested spans create unwanted blocks. It's complicated to explain :) But I really believe that it is solved now.

[MaluNoPeleke]

I have just tested it and it fixes the mentioned problems for me :)

[bastianallgeier]

@MaluNoPeleke Phew! That's really great to hear :) Thanks for your massive help!

[bastianallgeier]

✅