feat: Use rel="noopener noreferrer nofollow ugc" on user links

packages/comment-widget/src/base-comment-item.ts

@@ -62,7 +62,7 @@ export class BaseCommentItem extends LitElement {
                 class="item-author font-medium text-sm text-text-1 hover:underline"
                 target="_blank"
                 href=${ifDefined(this.userWebsite)}
-                rel="noopener noreferrer"
+                rel="noopener noreferrer nofollow ugc"
               >
                 ${this.userDisplayName}
               </a>

packages/comment-widget/src/comment-content.ts

@@ -9,6 +9,16 @@ export class CommentContent extends LitElement {
   @property({ type: String })
   content: string = '';
 
+  private applyLinkAttributes() {
+    const anchors =
+      this.shadowRoot?.querySelectorAll<HTMLAnchorElement>('.content a');
+
+    anchors?.forEach((anchor) => {
+      anchor.target = '_blank';
+      anchor.rel = 'noopener noreferrer nofollow ugc';
+    });
+  }
+
   protected override firstUpdated(_changedProperties: PropertyValues) {
     super.firstUpdated(_changedProperties);
     const codeElements = this.shadowRoot?.querySelectorAll('pre>code');
@@ -38,6 +48,13 @@ export class CommentContent extends LitElement {
     );
   }
 
+  protected override updated(_changedProperties: PropertyValues) {
+    super.updated(_changedProperties);
+    if (_changedProperties.has('content')) {
+      this.applyLinkAttributes();
+    }
+  }
+
   private extractLanguageFromCodeElement(codeElement: Element): string | null {
     const supportedPrefixes = ['language-', 'lang-'];
 

packages/comment-widget/src/comment-editor.ts

@@ -95,12 +95,11 @@ export class CommentEditor extends LitElement {
 
   async createEditor() {
     const { Editor } = await import('@tiptap/core');
-    const { Placeholder } = await import('@tiptap/extensions');
+    const { CharacterCount, Placeholder } = await import('@tiptap/extensions');
     const { StarterKit } = await import('@tiptap/starter-kit');
     const { CodeBlockShiki } = await import(
       'tiptap-extension-code-block-shiki'
     );
-    const { CharacterCount } = await import('@tiptap/extensions');
 
     this.loading = false;
 
@@ -111,6 +110,11 @@ export class CommentEditor extends LitElement {
           heading: false,
           link: {
             openOnClick: false,
+            defaultProtocol: 'https',
+            HTMLAttributes: {
+              target: '_blank',
+              rel: 'noopener noreferrer nofollow ugc',
+            },
           },
           codeBlock: false,
         }),

packages/comment-widget/src/user-avatar.ts

@@ -67,7 +67,7 @@ export class UserAvatar extends LitElement {
 
   override render() {
     if (this.href) {
-      return html`<a class="avatar" href="${this.href}" target="_blank" rel="noopener noreferrer">
+      return html`<a class="avatar" href="${this.href}" target="_blank" rel="noopener noreferrer nofollow ugc">
         ${this.renderAvatarContent()}
       </a>`;
     }