Implement simple link decoration in richtext fields #4397
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
manuelmeister
added
Feature request
type: Frontend
deploy!
manuelmeister
requested review from
usu,
pmattmann,
BacLuc,
carlobeltrame and
simfeld
manuelmeister
temporarily deployed
to
feature-branch
GitHub Actions
Inactive
⛔ Feature branch deployment currently inactive.If the PR is still open, you can add the |
manuelmeister
added
deploy!
manuelmeister
temporarily deployed
to
feature-branch
GitHub Actions
Inactive
manuelmeister
temporarily deployed
to
feature-branch
GitHub Actions
Inactive
carlobeltrame
approved these changes
Jan 6, 2024
manuelmeister
temporarily deployed
to
feature-branch
GitHub Actions
Inactive
pmattmann
previously requested changes
Jan 6, 2024
| rel: 'noopener noreferrer', | ||
| } | ||
| if (this.editor.isEditable) { | ||
| attrs.onclick = `(event.metaKey || event.ctrlKey) && window.open("${link}", "_blank");` |
There was a problem hiding this comment.
Two inputs:
-
I like the idea that you have to use
Ctrl + Clickto follow the link, but I'm unsure if all users will discover this themselves. Let's see (I would leave it like this for now) -
Ctrl + Clickis already used by Tiptap. The text-edit dialog (bold, italic) is then displayed. Maybe you can stop this withevent.stopPropagation().
There was a problem hiding this comment.
- I like the idea that you have to use Ctrl + Click to follow the link, but I'm unsure if all users will discover this themselves. Let's see (I would leave it like this for now)
Sadly the browser prevents the click if it is inside a contenteditable. That's why I've added the click handler. I've also made it possible to doubleclick the link to open it.
- Ctrl + Click is already used by Tiptap. The text-edit dialog (bold, italic) is then displayed. Maybe you can stop this with event.stopPropagation().
I was able to prevent the bubble menu if you click or select within/whole link.
manuelmeister
temporarily deployed
to
feature-branch
GitHub Actions
Inactive
manuelmeister
temporarily deployed
to
feature-branch
GitHub Actions
Inactive
manuelmeister
temporarily deployed
to
feature-branch
GitHub Actions
Inactive
manuelmeister
temporarily deployed
to
feature-branch
GitHub Actions
Inactive
BacLuc
approved these changes
Jan 9, 2024
# Conflicts: # frontend/package-lock.json # frontend/package.json
manuelmeister
temporarily deployed
to
feature-branch
GitHub Actions
Inactive
1 task
Suspect IssuesThis pull request was deployed and Sentry observed the following issues:
Did you find this useful? React with a 👍 or 👎 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
It has been requested several times to be able to click links. To reduce this pain we provide a simple prosemirror plugin that highlights all links automatically. The link text can't be changed to something more readable and the link as an element is not saved to the database (doesn't modify the editor storage)
This is only a small step towards an eventual smartlink, but it is the minimal valuable product.
This uses the linkify-it package used by markdown-it maintainers. It also provides support for fuzzy links (e.g. without
http://) An example can be seen here: https://markdown-it.github.io/linkify-it/We only support
httpand 'https' protocols and fuzzy links with a known tld (.ch,.com,.org,…) or then the link needs to have a port (localhost:3000)The link is rendered as long as it is detected as a link and has no marks (e.g. bold). The url can only be changed with the keyboard, otherwise if you [ ctrl | cmd |
dbl]-click on the link, it opens the link.Relates to #4241