Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: extension link object replacement caracter sanitization #5887

Merged
merged 4 commits into from
Nov 29, 2024

Conversation

alexvcasillas
Copy link
Contributor

@alexvcasillas alexvcasillas commented Nov 28, 2024

Changes Overview

Prosemirror replaces zero-width non-joiner characters with Object Replacement Character from unicode. Therefore, linkifyjs does not recognize the link properly. We replace these characters with regular spaces to fix this issue.

Implementation Approach

Special Character Replacement

Testing Done

Tested within the demo with the provided content that produced the issue

Verification Steps

N/A

Additional Notes

N/A

Checklist

  • I have created a changeset for this PR if necessary.
  • My changes do not break the library.
  • I have added tests where applicable.
  • I have followed the project guidelines.
  • I have fixed any lint issues.

Related Issues

#5679

@alexvcasillas alexvcasillas added Type: Bug The issue or pullrequest is related to a bug Category: Open Source The issue or pull reuqest is related to the open source packages of Tiptap. Topic: Extension The issue or pullrequest is related to an extension of the project labels Nov 28, 2024
@alexvcasillas alexvcasillas self-assigned this Nov 28, 2024
Copy link

changeset-bot bot commented Nov 28, 2024

🦋 Changeset detected

Latest commit: 3e5d682

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 54 packages
Name Type
@tiptap/extension-link Patch
@tiptap/core Patch
@tiptap/extension-blockquote Patch
@tiptap/extension-bold Patch
@tiptap/extension-bubble-menu Patch
@tiptap/extension-bullet-list Patch
@tiptap/extension-character-count Patch
@tiptap/extension-code-block-lowlight Patch
@tiptap/extension-code-block Patch
@tiptap/extension-code Patch
@tiptap/extension-collaboration-cursor Patch
@tiptap/extension-collaboration Patch
@tiptap/extension-color Patch
@tiptap/extension-document Patch
@tiptap/extension-dropcursor Patch
@tiptap/extension-floating-menu Patch
@tiptap/extension-focus Patch
@tiptap/extension-font-family Patch
@tiptap/extension-gapcursor Patch
@tiptap/extension-hard-break Patch
@tiptap/extension-heading Patch
@tiptap/extension-highlight Patch
@tiptap/extension-history Patch
@tiptap/extension-horizontal-rule Patch
@tiptap/extension-image Patch
@tiptap/extension-italic Patch
@tiptap/extension-list-item Patch
@tiptap/extension-list-keymap Patch
@tiptap/extension-mention Patch
@tiptap/extension-ordered-list Patch
@tiptap/extension-paragraph Patch
@tiptap/extension-placeholder Patch
@tiptap/extension-strike Patch
@tiptap/extension-subscript Patch
@tiptap/extension-superscript Patch
@tiptap/extension-table-cell Patch
@tiptap/extension-table-header Patch
@tiptap/extension-table-row Patch
@tiptap/extension-table Patch
@tiptap/extension-task-item Patch
@tiptap/extension-task-list Patch
@tiptap/extension-text-align Patch
@tiptap/extension-text-style Patch
@tiptap/extension-text Patch
@tiptap/extension-typography Patch
@tiptap/extension-underline Patch
@tiptap/extension-youtube Patch
@tiptap/html Patch
@tiptap/pm Patch
@tiptap/react Patch
@tiptap/starter-kit Patch
@tiptap/suggestion Patch
@tiptap/vue-2 Patch
@tiptap/vue-3 Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Copy link

netlify bot commented Nov 28, 2024

Deploy Preview for tiptap-embed ready!

Name Link
🔨 Latest commit 3e5d682
🔍 Latest deploy log https://app.netlify.com/sites/tiptap-embed/deploys/67498ecbd233b700081958fb
😎 Deploy Preview https://deploy-preview-5887--tiptap-embed.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.

Copy link

pkg-pr-new bot commented Nov 28, 2024

Open in Stackblitz

@tiptap/core

npm i https://pkg.pr.new/@tiptap/core@5887

@tiptap/extension-bold

npm i https://pkg.pr.new/@tiptap/extension-bold@5887

@tiptap/extension-blockquote

npm i https://pkg.pr.new/@tiptap/extension-blockquote@5887

@tiptap/extension-bubble-menu

npm i https://pkg.pr.new/@tiptap/extension-bubble-menu@5887

@tiptap/extension-bullet-list

npm i https://pkg.pr.new/@tiptap/extension-bullet-list@5887

@tiptap/extension-character-count

npm i https://pkg.pr.new/@tiptap/extension-character-count@5887

@tiptap/extension-code

npm i https://pkg.pr.new/@tiptap/extension-code@5887

@tiptap/extension-code-block

npm i https://pkg.pr.new/@tiptap/extension-code-block@5887

@tiptap/extension-code-block-lowlight

npm i https://pkg.pr.new/@tiptap/extension-code-block-lowlight@5887

@tiptap/extension-collaboration

npm i https://pkg.pr.new/@tiptap/extension-collaboration@5887

@tiptap/extension-collaboration-cursor

npm i https://pkg.pr.new/@tiptap/extension-collaboration-cursor@5887

@tiptap/extension-color

npm i https://pkg.pr.new/@tiptap/extension-color@5887

@tiptap/extension-document

npm i https://pkg.pr.new/@tiptap/extension-document@5887

@tiptap/extension-dropcursor

npm i https://pkg.pr.new/@tiptap/extension-dropcursor@5887

@tiptap/extension-floating-menu

npm i https://pkg.pr.new/@tiptap/extension-floating-menu@5887

@tiptap/extension-focus

npm i https://pkg.pr.new/@tiptap/extension-focus@5887

@tiptap/extension-font-family

npm i https://pkg.pr.new/@tiptap/extension-font-family@5887

@tiptap/extension-gapcursor

npm i https://pkg.pr.new/@tiptap/extension-gapcursor@5887

@tiptap/extension-hard-break

npm i https://pkg.pr.new/@tiptap/extension-hard-break@5887

@tiptap/extension-heading

npm i https://pkg.pr.new/@tiptap/extension-heading@5887

@tiptap/extension-highlight

npm i https://pkg.pr.new/@tiptap/extension-highlight@5887

@tiptap/extension-history

npm i https://pkg.pr.new/@tiptap/extension-history@5887

@tiptap/extension-horizontal-rule

npm i https://pkg.pr.new/@tiptap/extension-horizontal-rule@5887

@tiptap/extension-image

npm i https://pkg.pr.new/@tiptap/extension-image@5887

@tiptap/extension-italic

npm i https://pkg.pr.new/@tiptap/extension-italic@5887

@tiptap/extension-link

npm i https://pkg.pr.new/@tiptap/extension-link@5887

@tiptap/extension-list-item

npm i https://pkg.pr.new/@tiptap/extension-list-item@5887

@tiptap/extension-list-keymap

npm i https://pkg.pr.new/@tiptap/extension-list-keymap@5887

@tiptap/extension-mention

npm i https://pkg.pr.new/@tiptap/extension-mention@5887

@tiptap/extension-ordered-list

npm i https://pkg.pr.new/@tiptap/extension-ordered-list@5887

@tiptap/extension-paragraph

npm i https://pkg.pr.new/@tiptap/extension-paragraph@5887

@tiptap/extension-placeholder

npm i https://pkg.pr.new/@tiptap/extension-placeholder@5887

@tiptap/extension-strike

npm i https://pkg.pr.new/@tiptap/extension-strike@5887

@tiptap/extension-superscript

npm i https://pkg.pr.new/@tiptap/extension-superscript@5887

@tiptap/extension-subscript

npm i https://pkg.pr.new/@tiptap/extension-subscript@5887

@tiptap/extension-table

npm i https://pkg.pr.new/@tiptap/extension-table@5887

@tiptap/extension-table-header

npm i https://pkg.pr.new/@tiptap/extension-table-header@5887

@tiptap/extension-table-cell

npm i https://pkg.pr.new/@tiptap/extension-table-cell@5887

@tiptap/extension-table-row

npm i https://pkg.pr.new/@tiptap/extension-table-row@5887

@tiptap/extension-task-item

npm i https://pkg.pr.new/@tiptap/extension-task-item@5887

@tiptap/extension-task-list

npm i https://pkg.pr.new/@tiptap/extension-task-list@5887

@tiptap/extension-text

npm i https://pkg.pr.new/@tiptap/extension-text@5887

@tiptap/extension-text-align

npm i https://pkg.pr.new/@tiptap/extension-text-align@5887

@tiptap/extension-text-style

npm i https://pkg.pr.new/@tiptap/extension-text-style@5887

@tiptap/extension-typography

npm i https://pkg.pr.new/@tiptap/extension-typography@5887

@tiptap/extension-underline

npm i https://pkg.pr.new/@tiptap/extension-underline@5887

@tiptap/extension-youtube

npm i https://pkg.pr.new/@tiptap/extension-youtube@5887

@tiptap/html

npm i https://pkg.pr.new/@tiptap/html@5887

@tiptap/pm

npm i https://pkg.pr.new/@tiptap/pm@5887

@tiptap/react

npm i https://pkg.pr.new/@tiptap/react@5887

@tiptap/starter-kit

npm i https://pkg.pr.new/@tiptap/starter-kit@5887

@tiptap/suggestion

npm i https://pkg.pr.new/@tiptap/suggestion@5887

@tiptap/vue-2

npm i https://pkg.pr.new/@tiptap/vue-2@5887

@tiptap/vue-3

npm i https://pkg.pr.new/@tiptap/vue-3@5887

commit: 3e5d682

"@tiptap/extension-link": patch
---

object replacement character sanitization
Copy link
Contributor

Choose a reason for hiding this comment

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

Would be good to include issue #, and a little clearer description

Copy link
Contributor

@nperez0111 nperez0111 left a comment

Choose a reason for hiding this comment

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

gtg after those comments are addressed

// Therefore, linkifyjs does not recognize the
// link properly. We replace these characters
// with regular spaces to fix this issue.
const links = find(text.replaceAll('\uFFFC', ' ')).filter(
Copy link
Contributor

Choose a reason for hiding this comment

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

Did we figure out if this char is valid in a URL? If not, may want to try to upstream this to linkify

Copy link
Contributor Author

Choose a reason for hiding this comment

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

This char won't work if you paste it on any URL, it would be serialized for the URL but would count as a character in the URL and it won't work

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Reported to linkifyjs nfrasser/linkifyjs#495

Copy link
Contributor

@nperez0111 nperez0111 left a comment

Choose a reason for hiding this comment

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

Looks good to me. Thanks for the report

@nperez0111 nperez0111 merged commit 2acf260 into develop Nov 29, 2024
15 checks passed
@nperez0111 nperez0111 deleted the fix/extension-link-object-replacement-character branch November 29, 2024 11:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Category: Open Source The issue or pull reuqest is related to the open source packages of Tiptap. Topic: Extension The issue or pullrequest is related to an extension of the project Type: Bug The issue or pullrequest is related to a bug
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants