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

Rich text editor | Support for hyperlinks along with absolute links #1527

Closed
8 tasks
vivinkrishna-ni opened this issue Sep 13, 2023 · 4 comments
Closed
8 tasks
Labels
enhancement New feature or request

Comments

@vivinkrishna-ni
Copy link
Contributor

vivinkrishna-ni commented Sep 13, 2023

📌 User Story

Context - We are envisioning that after adding hyper link support, only pasted or typed absolute URLs might use <autolink> syntax and rest of them will likely use normal links syntax [link text](url). However this is subjected to discussion on rich text components spec to decide the intended behavior after research.

Scope of this user story - As part of adding hyperlink support, we may need to revisit some restrictions on supporting only absolute links and consider removing/replacing them. This user story will capture those tasks for future reference.

Hyperlink (termed as Links in CommonMark Spec) support for the nimble-rich-text-editor component will be added along with current absolute link (termed as Autolinks in CommonMark Spec) support

  • Hyperlink markdown syntax - [link text](url)
  • Absolute link markdown syntax - <autolink>

Note that any detailed implementation plan for hyperlink support will be updated in spec HLD for rich text components.

😮 Current Support

We support only Absolute links for the initial pass which is by typing or pasting a full URL into the editor and not adding a link to the existing texts.

We also made the following changes to support only absolute links in the editor and autolink in the markdown which should be revisited when we support normal hyper links with text:

  1. Added pointer-event: none; to all the links in the editor which will restrict the user from opening the link from the editor in any form.
  2. In markdown-serializer.ts, prosemirror-markdown implements logic for both hyperlink and autolink in defaultMarkdownSerializer. Therefore, implemented our own implementation to support only autolink in markdown output.
  3. In markdown-parser.ts, bypass the default normalization link text provided by markdown-it to display the link as is in the editor and viewer. This needs to be removed.
  4. inclusive is disabled in the Tiptap editor as well as in the link schema because the absolute link mark need not be active when positioned at the end/start of the link after it was added. Needs an update here based on the requirements.
  5. linkOnPaste is switched off because it will add the link to the selected texts in the editor. Needs to be switched on.
  6. Restricted other marks such as bold/italics in absolute link since common mark spec for autolinks does not support it. But it is supported with hyperlinks. Restricted by setting excludes: "_" in the Tiptap editor and markdown parser.
  7. When hyperlinks are copied from a different source and pasted into the editor will actually render it as an absolute link by ignoring the text content. This is handled in the transformPasted method which needs an update when hyperlink support is added. Also, transformPasted validates if the copied links are valid (HTTPS/HTTP), as there is an open bug in Tiptap on adding the validation to the pasted links. If it is resolved, we could completely get off transformPasted when supporting Hyperlinks. [PRO]: Link extension not respecting validate rules on copy/paste ueberdosis/tiptap#4427
  8. When autolinks are between bold/italics sentences then the part that is next link formatting will be lost when parsing. For example, markdown: **Some text <https://link> Some text**, the output will be like - 'Some text https://link Some text'. This issue can be fixed when hyperlink support is enabled

💡 Future Support

  1. Link can be added to the existing text in the editor by opening a dialog based on the design.
  2. Both autolink<URL> and link[test](URL) can be enabled in markdown format.

🔗 Relevant Links

#1394
#1496

@vikisekarNI vikisekarNI changed the title Rich text editor | Support for links Rich text editor | Support for hyperlinks along with absolute links Sep 13, 2023
@rajsite rajsite added enhancement New feature or request triage New issue that needs to be reviewed labels Mar 6, 2024
@rajsite
Copy link
Member

rajsite commented Mar 7, 2024

@vivinkrishna-ni is this feature work being tracked in AzDo somewhere?

@vivinkrishna-ni
Copy link
Contributor Author

@rajsite Support for hyperlinks is tracked as part of this Epic 2383228
: Comment support for images and rich text emails and a related feature Feature 2567597: Support for opening links from comments in new tab

@rajsite
Copy link
Member

rajsite commented Mar 8, 2024

@vivinkrishna-ni can you make sure a link to this issue is captured in a feature on AzDo and then close this one as not planned. We can re-open this issue when prioritized.

@vivinkrishna-ni
Copy link
Contributor Author

Closing this as not planned for now and will reprioritize as part of this feature: Feature 2567597: Support for Hyperlink and opening links from comments in new tab

@m-akinc m-akinc moved this from Backlog to Done in Nimble Design System Priorities Apr 30, 2024
@m-akinc m-akinc removed the triage New issue that needs to be reviewed label Apr 30, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
Development

No branches or pull requests

3 participants