Writer fields with inline: true only store first paragraph when multiple are pasted

[crisgraphics]

Description

First off, sorry if someone posted this already, I couldn't find it.
If I paste something from MS Word into the writer field, only the first paragraph gets saved.

Screenshots

kirby_writerfield_issue.mp4

To reproduce

1. Go to About Us page of the starter kit
2. paste something from MS Word into the address field
3. Hit save
4. Reload

Kirby Version
3.6.6

Your system (please complete the following information)
Tested with:

• Mac OSX 11.6.4, Firefox latest
• Windows 10, MS Edge latest

[lukasbestle]

Thanks for the detailed issue description. 👍

The writer field from your example uses the inline mode, which only supports one paragraph. Does it work for you if you remove the inline property?

[crisgraphics]

Thanks Lukas!
It works fine when I'm turning off the inline mode.
However it's still a bit confusing to see the whole text getting pasted when only the first paragraph gets saved in the end.
My client has made changes to quite a couple of fields already when he first noticed, that some content is missing.
But now that I know, I guess it's my part to take care of that.

[lukasbestle]

I agree, the current behavior is quite confusing.

Issue Summary

Status quo

If the user gets the Editor to contain multiple paragraphs (for example by pasting formatted content), a writer field with inline: true will only store the first paragraph and ignore the rest.

Source of the issue

I think the issue is caused by this line:

kirby/panel/src/components/Forms/Writer/Editor.js

Line 325 in 005fc78

return div.querySelector("p").innerHTML;

It just takes the contents of the first <p> element and ignores the rest.

Possible solution

We could instead use querySelectorAll('p') and concat the contents of all matched elements. Between the paragraphs, a <br> should be inserted (maybe even two?).

[distantnative]

Isn't that quite negating the purpose of inline then? I'd think you get one line from this, not faked paragraphs via breaks. So not sure that's reducing confusion, rather shifting it.

[lukasbestle]

You can already enter multiple lines in an inline writer and it will also generate hard breaks instead of paragraphs. So it would only be consistent if the same happens on paste.

[lukasbestle]

Thinking about it again: I think the conversion should already happen on paste, not on export. This way the UI won't jump on save/reload.

[afbora]

We could instead use querySelectorAll('p') and concat the contents of all matched elements. Between the paragraphs, a
should be inserted.

@lukasbestle This solution works great. After the paragraphs are converted to <br> and the page is refreshed, the savebar does not appear when pasting the same text again. Do you want me to create a PR for your solution?

[lukasbestle]

@afbora Yes, that would be great. Bonus points if you find a way to do the conversion on paste. :)

[afbora]

find a way to do the conversion on paste. :)

Do you mean instant conversion (paragraphs to breaks) on paste, not after save, right?

[lukasbestle]

If the writer field has inline mode activated, yes. :)

[afbora]

@lukasbestle I've two solutions (Only one of them needs to be merged). But I couldn't find a way to conversation on paste.

• First solution Fix pasting multiple lines to writer field with inline mode (Encloses all paragraphs) #4350: Enclosing all paragraphs
• Second solution Fix pasting multiple lines to writer field with inline mode (no <p> output) #4351: Use editor's inline* mode

[lukasbestle]

Thanks! To be honest I don't have enough knowledge of the writer and ProseMirror to review which of the options is best or if there's another possible implementation. @bastianallgeier?

[bastianallgeier]

✅