Render "nimble-anchor" in rich text editor

ni / nimble

The NI Nimble Design System

MIT License

29 stars 8 forks source link

🧹 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 as nimble-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)

[x] 1. https://github.com/ni/nimble/issues/1502
[ ] 2. If you put the cursor in a link, you cannot left/right arrow past the ends of the link. (And if the cursor is outside a link, you cannot use the keyboard to get into the link.).
[x] 3. https://github.com/ni/nimble/issues/1508.
[ ] 4. If you copy and paste part of an existing link's URL, it will create a new link with the href set to the full URL, but just the partial text. I would have expected it to paste as plain text (if it didn't start with "http(s)://")
[ ] 5. If you click and drag from within a link to highlight, you cannot highlight beyond the ends of the link. Oddly, you can do this with shift+Home/End.
[ ] 6. In the Safari browser, pressing backspace deletes the entire anchor element, instead it should delete only the last character for a single key press. Part of https://github.com/ni/nimble/issues/1716

These issues might be due to either the nimble-anchor behavior in contenteditable div or in the Tiptap configurations. Once we have the fix for the above issues, the native anchor tag in the rich text editor should be replaced with nimble-anchor.

Code for rendering nimble-anchor in contenteditable div: https://stackblitz.com/edit/typescript-l63dbq?file=index.html

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.

HTML string when copied 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.

HTML string when copied 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.

ni / nimble

Render "nimble-anchor" in rich text editor #1516

🧹 Tech Debt