novu icon indicating copy to clipboard operation
novu copied to clipboard

fix: prohibit paste text/html content into email editor, allow paste …

Open YugfeldID opened this issue 9 months ago • 4 comments

fix for #5445

What changed? Why was the change needed?

Blocks paste text/html content into the email editor (allow paste only text/plain). Problem: when the user copies text from the rich text editor (like the editor from the In-App channel) all styles will be copied, it leads to an inability to process variables and clear formatting.

Screenshots

Without fix pasted content can look like this (with the inability to change the font, clear background, remove list items, and bold formatting): Снимок экрана 2024-04-30 в 16 59 29

Special notes for your reviewer

If this approach is okay, I will add a test

YugfeldID avatar Apr 30 '24 14:04 YugfeldID

Deploy request for dev-web-novu pending review.

Visit the deploys page to approve it

Name Link
Latest commit 689c162ed3c8069bba05ea1c4df1a19ea959df5c

netlify[bot] avatar Apr 30 '24 14:04 netlify[bot]

Deploy Preview for novu-design ready!

Name Link
Latest commit 689c162ed3c8069bba05ea1c4df1a19ea959df5c
Latest deploy log https://app.netlify.com/sites/novu-design/deploys/664b03e31238f60008b54426
Deploy Preview https://deploy-preview-5478--novu-design.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify[bot] avatar Apr 30 '24 14:04 netlify[bot]

hello @YugfeldID! 👋 thanks for the contribution! 🤝

I think that this is the right approach for now, but I noticed some problems with the current implementation:

  • variables are not recognized
  • the undo (cmd + Z) works weird

My feelings is that the inserted text node is not recognized somehow as a text change that's why the weird behaviour with undo. The another solution is to use document.execCommand('insertText', false, pastedData); but its deprecated and not recommended.

Hello @LetItRock, thanks for feedback.

I pushed some changes:

  • methods.setValue(``${stepFormPath}.template.content.${blockIndex}.content``, ref.current?.innerHTML ?? '') should trigger changes -> variables will be parsed and placeholder will be gone
  • you are right, it seems like the only way to make undo works properly is using document.execCommand('insertText', false, pastedData);, because only it interacts with browser's undo manager

YugfeldID avatar May 20 '24 08:05 YugfeldID

This PR is being marked as stale due to inactivity.

github-actions[bot] avatar Aug 18 '24 23:08 github-actions[bot]

This PR is being closed due to inactivity. Please reopen if work is intended to be continued.

github-actions[bot] avatar Sep 19 '24 00:09 github-actions[bot]