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: Prevent auto-linking when typing URL inside inline code mark #4160

Merged

Conversation

rfgamaral
Copy link
Contributor

Please describe your changes

At Doist we have extended the Code extension to allow all marks (e.g., Bold, Italic, and Strikethrough) to coexist with the Code mark, which gives a behaviour that more closely resembles GitHub, allowing us to render inline code marks with formatting and links, like this: Typist.

However, this created an issue for us, where URLs typed inside inline code marks were automatically converted into links, which is not the behaviour we want. Here's a demo of our own editor based on Tiptap exhibiting the issue:

CleanShot.2023-06-22.at.22.54.59.mp4

How did you accomplish your changes

Added a filter rule to the autolink helper where we check if the detected link being typed is inside a code mark, if it is, we discard it.

How have you tested your changes

Manually by bringing the autolink.ts file into our own editor and our own extended Link extension with the changes proposed in this PR.

How can we verify your changes

Tweak the editor running on Tiptap's homepage to run the Code extension without excluding all other marks (ref), and to use the changes proposed here. Then try something similar to demo above.

Checklist

  • The changes are not breaking the editor
  • Added tests where possible
  • Followed the guidelines
  • Fixed linting issues

@netlify
Copy link

netlify bot commented Jun 26, 2023

Deploy Preview for tiptap-embed ready!

Name Link
🔨 Latest commit 7cc96b6
🔍 Latest deploy log https://app.netlify.com/sites/tiptap-embed/deploys/6499c442ef482100089a1310
😎 Deploy Preview https://deploy-preview-4160--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 settings.

@bdbch
Copy link
Contributor

bdbch commented Jul 7, 2023

Looks good to me, thanks for the fix @rfgamaral

@bdbch bdbch merged commit b24df3a into ueberdosis:develop Jul 7, 2023
@rfgamaral rfgamaral deleted the disable-autolink-inside-code-marks branch July 17, 2023 08:44
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants