Open vivinkrishna-ni opened 11 months ago
We have observed another behavior of the nimble-anchor
when copying from the viewer and pasting it in the editor while implementing https://github.com/ni/nimble/pull/1559. Whenever the link is copied from rich text viewer by selecting from the beginning of the text to the end of the link and pasted into the editor, it doesn't render as a link. Instead, when pasted into the editor, the clipboard stores only the text content within a span
tag and so pasted as plain text. I think in this case, only the slotted content in the <span>
tag is copied when copying only the link.
nimble-anchor
from viewer<html>\r\n<body>\r\n\x3C!--StartFragment--><span style="color: rgb(22, 22, 23); font-family: "Source Sans Pro", "Source Sans Pro Fallback"; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; text-decoration: underline; display: inline !important; float: none;">https://nimble.ni.dev/</span>\x3C!--EndFragment-->\r\n</body>\r\n</html>
However, when nimble-anchor
is copied with other content or copied along with the whitespace from the viewer, it stores the whole information within the anchor tag as expected and renders it as a link in the editor.
Whereas, the native anchor tag copies and stores the content in a clipboard within the <a>
tag.
a
tag<html>\r\n<body>\r\n\x3C!--StartFragment--><a href="https://nimble.ni.dev/">Nimble Design System - NI</a>\x3C!--EndFragment-->\r\n</body>\r\n</html>
When we take up this tech debt we can consider handling this corner case.
🧹 Tech Debt
nimble-rich-text-editor
currently uses a native anchor tag to render the links entered into the editor or by parsed from markdown(autolink
) string to the editor. The actual plan to render all the links in the rich text editor asnimble-anchor
as mentioned here: https://github.com/ni/nimble/issues/1372#issuecomment-1658622984.However, we couldn't render
nimble-anchor
for the following reasons: (copied from https://github.com/ni/nimble/pull/1496#discussion_r1320335836)These issues might be due to either the
nimble-anchor
behavior incontenteditable
div or in theTiptap
configurations. Once we have the fix for the above issues, the native anchor tag in the rich text editor should be replaced withnimble-anchor
.Code for rendering
nimble-anchor
incontenteditable
div: https://stackblitz.com/edit/typescript-l63dbq?file=index.html