Issue when pasting web content into frontend-editable textfields that allow no markup

[BernhardBaumrock]

Short description of the issue

Please see the description with screenshots in the forum: https://processwire.com/talk/topic/29034-frontend-editing-adding-markup/

Expected behavior

There should not be any markup after pasting.

Steps to reproduce the issue

1. Create a regular text field with textformatter "HTML Entity Encoder"
2. Enable frontend editing
3. Add that field to your frontend and make it editable
4. Go to processwire.com and copy the headline "A friendly and powerful open source CMS with an API that is a joy to use at any scale."
5. Paste that content into your frontend editable field

On my website it even shows the blue background:

6. Hit save
7. Reload the page

Setup/Environment

SERVER DETAILS
ProcessWire: 3.0.227
PHP: 8.1.16
Webserver: Apache/2.4.54 (Debian)
MySQL Server: 10.6.12-MariaDB-1:10.6.12+maria~ubu2004-log
MySQL Client: mysqlnd 8.1.16

[teppokoivula]

Seems like the expected behaviour, actually: PageFrontEdit uses contenteditable for regular text fields, and contenteditable allows HTML. On initial paste there is no formatting, but after save the value is encoded; again expected behaviour.

As far as I can tell this is how it has always worked. If we want to strip markup from contenteditable, additional steps would be required. Perhaps something along these lines: https://stackoverflow.com/questions/58980235/stop-pasting-html-style-in-a-contenteditable-div-only-paste-the-plain-text.

Checking the strip tags option for the field would also help to an extent. It would'nt affect what you initially see on the page, though, just what happens after save.

[BernhardBaumrock]

Hey @teppokoivula thx for your reply!

Yes, technically this might be somehow "expected" and I understand why it is happening. But from a user's perspective this is definitely not expected and that's the more important complain here. Of course proper encoding after saving the content is a necessity, but I think the frontend editor should remove tags directly after/before pasting something into a contenteditable of a field that does not allow any html.

Thx for the link to stackoverflow! I've tried this:

<div contentEditable="plaintext-only"></div>

But this will break the nice user experience, because when editing the field it will remove all styles and therefore look ugly. And also I ended up with markup after save. Not sure why. Firefox doesn't support it, so it's no real option anyhow.

@ryancramerdesign what about this solution? https://stackoverflow.com/a/74157816 Don't think we need an undo feature on plain text fields?

[BernhardBaumrock]

This is the fix that I came up with thx to ChatGPT:

document.addEventListener("paste", function (e) {
  // only intercept pasting to frontend editable text fields
  // we don't want to strip anything from wysiwyg fields
  if (!document.activeElement.isContentEditable) return;
  if (!document.activeElement.closest(".pw-edit-InputfieldText")) return;

  // Prevent the default paste action
  e.preventDefault();

  // Get the clipboard data as plain text
  const clipboardData = (e.originalEvent || e).clipboardData;
  const pastedText = clipboardData.getData("text/plain");

  // Convert any markup in the pasted text to plaintext
  var tmp = document.createElement("div");
  tmp.innerHTML = pastedText;
  const plainText = tmp.textContent || tmp.innerText || "";

  // Insert the plain text into the contenteditable element or textarea
  document.execCommand("insertText", false, plainText);
});

[ryancramerdesign]

@BernhardBaumrock Thanks, I was able to duplicate the issue you mentioned and your fix is a major improvement. I have added it, with some adjustments. At first I was getting <br> tags. It seems to be inserting <br> tags where newlines are in the original pasted content. In the example below, I copied the headline and the first word of the following paragraph and then pasted it in. This is what I copied and what appears after I clicked Save:

I was getting a trailing <br> even if I just copied the headline, and it was one that couldn't be removed except in the admin page editor. I'm not sure if it's my browser that's the culprit (Chrome) or if it does this on all browsers.

I kept experimenting with it and found that I could get it to work if I replaced the "insertText" comment with "insertHTML". I also had to entity encode the the pasted text before doing the insertHTML command. Following that, no more <br> tags in the pasted content. Do you find the modified solution also works there?

[BernhardBaumrock]

Works great @ryancramerdesign thank you!