diff --git a/packages/comment-widget/src/base-comment-item.ts b/packages/comment-widget/src/base-comment-item.ts index 90c6b23..c8e1ed8 100644 --- a/packages/comment-widget/src/base-comment-item.ts +++ b/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} diff --git a/packages/comment-widget/src/comment-content.ts b/packages/comment-widget/src/comment-content.ts index 9e8367f..05d6ee1 100644 --- a/packages/comment-widget/src/comment-content.ts +++ b/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('.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-']; diff --git a/packages/comment-widget/src/comment-editor.ts b/packages/comment-widget/src/comment-editor.ts index 4f9357d..cda6186 100644 --- a/packages/comment-widget/src/comment-editor.ts +++ b/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, }), diff --git a/packages/comment-widget/src/user-avatar.ts b/packages/comment-widget/src/user-avatar.ts index 692e74b..56e7fee 100644 --- a/packages/comment-widget/src/user-avatar.ts +++ b/packages/comment-widget/src/user-avatar.ts @@ -67,7 +67,7 @@ export class UserAvatar extends LitElement { override render() { if (this.href) { - return html` + return html` ${this.renderAvatarContent()} `; }