Skip to content

fix(rich-text-editor): DP-134543 patchfix paste#676

Merged
Bianca Artola (bianca-artola-dialpad) merged 1 commit intostagingfrom
DP-134543_patch_fix
Mar 20, 2025
Merged

fix(rich-text-editor): DP-134543 patchfix paste#676
Bianca Artola (bianca-artola-dialpad) merged 1 commit intostagingfrom
DP-134543_patch_fix

Conversation

@bianca-artola-dialpad
Copy link
Copy Markdown
Contributor

fix(rich-text-editor): DP-134543 patchfix paste

Obligatory GIF (super important!)

Obligatory GIF

🛠️ Type Of Change

These types will increment the version number on release:

  • Fix

📖 Jira Ticket

https://dialpad.atlassian.net/browse/DP-134569
https://dialpad.atlassian.net/browse/DP-134543

📖 Description

The initial issue that was reported was an issue with links on Edge. With some investigation, we realized that when copying and pasting links from edge brings some html data inside that makes links not working as the other ones.

Technical details

I added these logs to see the behavior:

      console.log(event.clipboardData);
      console.log("Text:", event.clipboardData.getData("text/plain")); // Plain text
      console.log("HTML:", event.clipboardData.getData("text/html"));  // HTML formatted text (if available)
      console.log("Files:", event.clipboardData.files);               // List of files (if any)

This is what happened when pasting an edge link:
Screenshot 2025-03-20 at 9 32 01 AM

vs pasting a link from any other place:
Screenshot 2025-03-20 at 9 32 06 AM

but i don't think we can do something with that as we also get text/html when pasting for example a piece of code.

The original issue was with edge links -> we can identify those links with a regex and also we can also do the special handlePaste when the text/html section from the clipboardData is not null which we saw is the case for edge. Then, for all the other cases, we can just return and go into the normal paste behavior (in that way, we will avoid the new issues with pasting that were generated after my changes, like losing formatting or not working okey for pasting code).

I know it's no clean but it will give us more time to launch the link into the input with all the cases covered and tested.

💡 Context

We are receiving reports saying that the paste functionality is not working fine on the message input; this was caused by #653. We initially think on reverting those changes and using the link extension instead, but as we noticed some unexpected behavior with it I think adding this patch fix will be the easiest and most quick patch fix we can do to fix both errors.

Link PR for future: #674

Let me know what you think team!

@github-actions
Copy link
Copy Markdown
Contributor

Please add either the visual-test-ready or no-visual-test label to this PR depending on whether you want to run visual tests or not.
It is recommended to run visual tests if your PR changes any UI. ‼️

@github-actions
Copy link
Copy Markdown
Contributor

✔️ Deploy previews ready!
😎 Dialtone preview: https://dialtone.dialpad.com/deploy-previews/pr-676/
😎 Dialtone-vue 2 preview: https://dialtone.dialpad.com/vue/deploy-previews/pr-676/
😎 Dialtone-vue 3 the preview: https://dialtone.dialpad.com/vue3/deploy-previews/pr-676/

Copy link
Copy Markdown
Contributor

@braddialpad Brad Paugh (braddialpad) left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this should work well

Comment on lines +674 to +692
const regex = /^https?:\/\//;

if (!event?.clipboardData) {
return false;
}
const pastedContent = event.clipboardData.getData('text');

// Check if the pasted content is a valid URL (starting with http:// or https://)
// If it's not a URL, allow the default paste behavior
if (!regex.test(pastedContent)) {
return false;
}

// If `text/html` is missing from clipboard data, it's a plain link
// In this case, allow the default paste behavior
if (!event.clipboardData.getData('text/html')) {
return false;
}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm actually wondering if we should just ALWAYS take the text property from clipboard when our input is running in non-rich-text mode. Anyways that's a bit more dangerous so we can do this first.

@braddialpad
Copy link
Copy Markdown
Contributor

Bianca Artola (@bianca-artola-dialpad) Do you know what the plan is with this fix, if it's going to be a prod CP we'll have to handle the release a bit differently.

@bianca-artola-dialpad
Copy link
Copy Markdown
Contributor Author

Bianca Artola (@bianca-artola-dialpad) Do you know what the plan is with this fix, if it's going to be a prod CP we'll have to handle the release a bit differently.

Waiting for Andrea response. Will update here

@bianca-artola-dialpad
Copy link
Copy Markdown
Contributor Author

Bianca Artola (@bianca-artola-dialpad) Do you know what the plan is with this fix, if it's going to be a prod CP we'll have to handle the release a bit differently.

Waiting for Andrea response. Will update here

She said we can go with the regular flow for release, so if we deploy a version and update it on firespotter before Tuesday should be okay. I'll merge this, thank you Brad

@bianca-artola-dialpad Bianca Artola (bianca-artola-dialpad) merged commit d46fe42 into staging Mar 20, 2025
13 checks passed
@bianca-artola-dialpad Bianca Artola (bianca-artola-dialpad) deleted the DP-134543_patch_fix branch March 20, 2025 17:47
@braddialpad
Copy link
Copy Markdown
Contributor

She said we can go with the regular flow for release, so if we deploy a version and update it on firespotter before Tuesday should be okay. I'll merge this, thank you Brad

thanks! let's make sure to get some good QA testing on it so we don't continue creating regressions haha.

Julio Ortega (juliodialpad) pushed a commit that referenced this pull request Mar 24, 2025
## [2.178.2](dialtone-vue2/v2.178.1...dialtone-vue2/v2.178.2) (2025-03-20)

### Bug Fixes

* **Rich Text Editor:** DP-134543 patchfix paste ([#676](#676)) ([d46fe42](d46fe42))
Julio Ortega (juliodialpad) pushed a commit that referenced this pull request Mar 24, 2025
## [3.171.2](dialtone-vue3/v3.171.1...dialtone-vue3/v3.171.2) (2025-03-20)

### Bug Fixes

* **Rich Text Editor:** DP-134543 patchfix paste ([#676](#676)) ([d46fe42](d46fe42))
Julio Ortega (juliodialpad) pushed a commit that referenced this pull request Mar 24, 2025
## [9.105.2](dialtone/v9.105.1...dialtone/v9.105.2) (2025-03-20)

### Bug Fixes

* **Rich Text Editor:** DP-134543 patchfix paste ([#676](#676)) ([d46fe42](d46fe42))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

no-visual-test Add this tag when the PR does not need visual testing

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants