Rich text editor & viewer | Support for absolute link

change/@ni-nimble-components-9f73b6f1-7567-4817-9f21-3c1c80bdd5c3.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Support for absolute links in rich text components",
+  "packageName": "@ni/nimble-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/nimble-components/package.json

@@ -70,6 +70,7 @@
     "@tiptap/extension-document": "^2.1.6",
     "@tiptap/extension-history": "^2.1.6",
     "@tiptap/extension-italic": "^2.1.6",
+    "@tiptap/extension-link": "^2.1.6",
     "@tiptap/extension-list-item": "^2.1.6",
     "@tiptap/extension-ordered-list": "^2.1.6",
     "@tiptap/extension-paragraph": "^2.1.6",

packages/nimble-components/src/rich-text/editor/index.ts

@@ -11,13 +11,15 @@ import {
     findParentNode,
     isList,
     AnyExtension,
-    Extension
+    Extension,
+    Mark
 } from '@tiptap/core';
 import Bold from '@tiptap/extension-bold';
 import BulletList from '@tiptap/extension-bullet-list';
 import Document from '@tiptap/extension-document';
 import History from '@tiptap/extension-history';
 import Italic from '@tiptap/extension-italic';
+import Link, { LinkOptions } from '@tiptap/extension-link';
 import ListItem from '@tiptap/extension-list-item';
 import OrderedList from '@tiptap/extension-ordered-list';
 import Paragraph from '@tiptap/extension-paragraph';
@@ -31,6 +33,7 @@ import { TipTapNodeName } from './types';
 import type { ErrorPattern } from '../../patterns/error/types';
 import { RichTextMarkdownParser } from '../models/markdown-parser';
 import { RichTextMarkdownSerializer } from '../models/markdown-serializer';
+import { anchorTag } from '../../anchor';
 
 declare global {
     interface HTMLElementTagNameMap {
@@ -330,6 +333,8 @@ export class RichTextEditor extends FoundationElement implements ErrorPattern {
     }
 
     private createTiptapEditor(): Editor {
+        const customLink = this.getCustomLinkExtension();
+
         /**
          * For more information on the extensions for the supported formatting options, refer to the links below.
          * Tiptap marks: https://tiptap.dev/api/marks
@@ -350,11 +355,48 @@ export class RichTextEditor extends FoundationElement implements ErrorPattern {
                 Placeholder.configure({
                     placeholder: '',
                     showOnlyWhenEditable: false
+                }),
+                customLink.configure({
+                    // HTMLAttribute cannot be in camelCase as we want to match it with the name in Tiptap
+                    // eslint-disable-next-line @typescript-eslint/naming-convention
+                    HTMLAttributes: {
+                        rel: 'noopener noreferrer',
+                        target: null
+                    },
+                    autolink: true,
+                    openOnClick: false,
+                    linkOnPaste: false,
+                    validate: href => /^https?:\/\//i.test(href)
                 })
             ]
         });
     }
 
+    /**
+     * Extending the default link mark schema defined in the TipTap.
+     *
+     * "excludes": https://prosemirror.net/docs/ref/#model.MarkSpec.excludes
+     * "inclusive": https://prosemirror.net/docs/ref/#model.MarkSpec.inclusive
+     * "parseHTML": https://tiptap.dev/guide/custom-extensions#parse-html
+     * "renderHTML": https://tiptap.dev/guide/custom-extensions/#render-html
+     */
+    private getCustomLinkExtension(): Mark<LinkOptions> {
+        return Link.extend({
+            excludes: '_',
+            inclusive: false,
+            parseHTML() {
+                return [{ tag: anchorTag }];
+            },
+            // HTMLAttribute cannot be in camelCase as we want to match it with the name in Tiptap
+            // eslint-disable-next-line @typescript-eslint/naming-convention
+            renderHTML({ HTMLAttributes }) {
+                // The below 'a' tag should be replaced with 'nimble-anchor' once the below issue is fixed.
+                // https://github.com/ni/nimble/issues/1516
+                return ['a', HTMLAttributes];
+            }
+        });
+    }
+
     /**
      * This function takes the Fragment from parseMarkdownToDOM function and return the serialized string using XMLSerializer
      */

packages/nimble-components/src/rich-text/editor/styles.ts

@@ -12,7 +12,8 @@ import {
     failColor,
     iconSize,
     smallDelay,
-    standardPadding
+    standardPadding,
+    linkFontColor
 } from '../../theme-provider/design-tokens';
 import { styles as errorStyles } from '../../patterns/error/styles';
 
@@ -188,6 +189,26 @@ export const styles = css`
         color: ${controlLabelDisabledFontColor};
     }
 
+    .ProseMirror a {
+        color: ${linkFontColor};
+        white-space: normal;
+        ${
+            /**
+             * Setting 'pointer-events: none;' to restrict the user from opening a link using the right-click context menu: If the user manually edits
+             * the link's text content, the 'href' attribute of the anchor tag will not be updated. If they attempt to open it using
+             * the right-click context menu with 'Open in new tab/window,' it will still navigate to the link specified
+             * in the 'href' attribute, which may create unnecessary confusion while trying to open the link.
+             */ ''
+        }
+        pointer-events: none;
+    }
+
+    :host([disabled]) .ProseMirror a {
+        color: ${bodyDisabledFontColor};
+        fill: currentcolor;
+        cursor: default;
+    }
+
     .footer-section {
         display: flex;
         justify-content: space-between;

packages/nimble-components/src/rich-text/editor/testing/rich-text-editor.pageobject.ts

@@ -5,7 +5,9 @@ import type { ToggleButton } from '../../../toggle-button';
 import type { ToolbarButton } from './types';
 import {
     getTagsFromElement,
-    getLeafContentsFromElement
+    getLeafContentsFromElement,
+    getLastChildElement,
+    getLastChildElementAttribute
 } from '../../models/testing/markdown-parser-utils';
 
 /**
@@ -115,15 +117,18 @@ export class RichTextEditorPageObject {
     }
 
     public async setEditorTextContent(value: string): Promise<void> {
-        let lastElement = this.getTiptapEditor()?.lastElementChild;
-
-        while (lastElement?.lastElementChild) {
-            lastElement = lastElement?.lastElementChild;
-        }
-        lastElement!.parentElement!.textContent = value;
+        const lastElement = this.getEditorLastChildElement();
+        lastElement.parentElement!.textContent = value;
         await waitForUpdatesAsync();
     }
 
+    public getEditorLastChildAttribute(attribute: string): string {
+        return getLastChildElementAttribute(
+            attribute,
+            this.getTiptapEditor() as HTMLElement
+        );
+    }
+
     public getEditorFirstChildTagName(): string {
         return this.getTiptapEditor()?.firstElementChild?.tagName ?? '';
     }
@@ -142,6 +147,28 @@ export class RichTextEditorPageObject {
         );
     }
 
+    public getEditorTagNamesWithClosingTags(): string[] {
+        const tagNames: string[] = [];
+        const tiptapEditor = this.getTiptapEditor();
+
+        const processNode = (node: Node): void => {
+            if (node.nodeType === Node.ELEMENT_NODE) {
+                const el = node as Element;
+                tagNames.push(el.tagName);
+
+                el.childNodes.forEach(processNode);
+
+                tagNames.push(`/${el.tagName}`);
+            }
+        };
+
+        if (tiptapEditor) {
+            processNode(tiptapEditor);
+        }
+
+        return tagNames.slice(1, -1);
+    }
+
     public getFormattingButtonTextContent(
         toolbarButton: ToolbarButton
     ): string {
@@ -224,6 +251,10 @@ export class RichTextEditorPageObject {
         return buttons[button];
     }
 
+    private getEditorLastChildElement(): Element {
+        return getLastChildElement(this.getTiptapEditor() as HTMLElement)!;
+    }
+
     private getIconSlot(
         button: ToolbarButton
     ): HTMLSpanElement | null | undefined {

packages/nimble-components/src/rich-text/editor/tests/rich-text-editor-matrix.stories.ts

@@ -30,7 +30,7 @@ const metadata: Meta = {
     }
 };
 
-const richTextMarkdownString = '1. **Bold*Italics***';
+const richTextMarkdownString = '1. <https://nimble.ni.dev>\n2. **Bold*Italics***';
 
 export default metadata;