🐛 Added explanatory message when linking to hidden/deleted comments (#26390)

closes https://linear.app/ghost/issue/BER-3324/

- scroll the page to the comments area when a permalink targets ahidden/deleted comment
- show a notice: "The linked comment is no longer available."

Author: kevinansfield

apps/comments-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tryghost/comments-ui",
-  "version": "1.3.4",
+  "version": "1.3.6",
   "license": "MIT",
   "repository": "https://github.com/TryGhost/Ghost",
   "author": "Ghost Foundation",

apps/comments-ui/src/app-context.ts

@@ -87,6 +87,7 @@ export type EditableAppContext = {
     commentsIsLoading?: boolean,
     commentIdToHighlight: string | null,
     commentIdToScrollTo: string | null,
+    showMissingCommentNotice: boolean,
     pageUrl: string,
     supportEmail: string | null,
     isMember: boolean,
@@ -129,4 +130,3 @@ export const useLabs = () => {
         return {};
     }
 };
-

apps/comments-ui/src/app.tsx

@@ -44,6 +44,7 @@ const App: React.FC<AppProps> = ({scriptTag, initialCommentId, pageUrl}) => {
         commentsIsLoading: false,
         commentIdToHighlight: null,
         commentIdToScrollTo: initialCommentId,
+        showMissingCommentNotice: false,
         pageUrl,
         supportEmail: null,
         isMember: false,
@@ -332,6 +333,7 @@ const App: React.FC<AppProps> = ({scriptTag, initialCommentId, pageUrl}) => {
                 commentsIsLoading: false,
                 commentIdToHighlight: null,
                 commentIdToScrollTo: scrollTargetFound ? initialCommentId : null,
+                showMissingCommentNotice: !!initialCommentId && !scrollTargetFound,
                 supportEmail,
                 isMember,
                 isPaidOnly,

apps/comments-ui/src/components/content/content.tsx

@@ -6,7 +6,7 @@ import MainForm from './forms/main-form';
 import Pagination from './pagination';
 import {ROOT_DIV_ID} from '../../utils/constants';
 import {SortingForm} from './forms/sorting-form';
-import {parseCommentIdFromHash} from '../../utils/helpers';
+import {parseCommentIdFromHash, scrollToElement} from '../../utils/helpers';
 import {useAppContext, useLabs} from '../../app-context';
 import {useCallback, useEffect, useRef} from 'react';
 
@@ -73,7 +73,7 @@ function onIframeResize(
 
 const Content = () => {
     const labs = useLabs();
-    const {pagination, comments, commentCount, title, showCount, commentsIsLoading, t, dispatchAction, commentIdToScrollTo, isMember, isPaidOnly, hasRequiredTier, isCommentingDisabled} = useAppContext();
+    const {pagination, comments, commentCount, title, showCount, commentsIsLoading, t, dispatchAction, commentIdToScrollTo, showMissingCommentNotice, isMember, isPaidOnly, hasRequiredTier, isCommentingDisabled} = useAppContext();
     const containerRef = useRef<HTMLDivElement>(null);
 
     const scrollToComment = useCallback((element: HTMLElement, commentId: string) => {
@@ -137,6 +137,26 @@ const Content = () => {
         scrollToComment(element, commentIdToScrollTo);
     }, [commentIdToScrollTo, commentsIsLoading, comments, scrollToComment]);
 
+    useEffect(() => {
+        if (!showMissingCommentNotice || commentsIsLoading) {
+            return;
+        }
+
+        const root = document.getElementById(ROOT_DIV_ID);
+        if (!root) {
+            return;
+        }
+
+        const iframe = findContainingIframe(root.ownerDocument);
+        if (iframe) {
+            return onIframeResize(iframe, () => {
+                scrollToElement(root);
+            });
+        }
+
+        scrollToElement(root);
+    }, [showMissingCommentNotice, commentsIsLoading]);
+
     const isFirst = pagination?.total === 0;
     const canComment = isMember && hasRequiredTier && !isCommentingDisabled;
 
@@ -150,6 +170,11 @@ const Content = () => {
     return (
         <>
             <ContentTitle count={commentCount} showCount={showCount} title={title}/>
+            {showMissingCommentNotice && (
+                <div className="mb-6 rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 font-sans text-sm text-amber-900 dark:border-amber-500/40 dark:bg-amber-500/15 dark:text-amber-100" data-testid="missing-comment-notice">
+                    {t('The linked comment is no longer available.')}
+                </div>
+            )}
             <div>
                 {showMainForm && <MainForm commentsCount={comments.length} />}
                 {showDisabledBox && (

apps/comments-ui/test/e2e/permalink.test.ts

@@ -46,6 +46,8 @@ async function setupPermalinkTest(
     return page.frameLocator('iframe[title="comments-frame"]');
 }
 
+const TALL_BODY_HTML = '<html><head><meta charset="UTF-8" /></head><body><div style="width: 100%; height: 1500px;"></div></body></html>';
+
 test.describe('Comment Permalinks', async () => {
     test('timestamp is a link with correct permalink href', async ({page}) => {
         const mockedApi = new MockedApi({});
@@ -100,8 +102,7 @@ test.describe('Comment Permalinks', async () => {
         });
 
         // Include a tall div to push comments below viewport (like lazy-loading test)
-        const tallBodyHtml = '<html><head><meta charset="UTF-8" /></head><body><div style="width: 100%; height: 1500px;"></div></body></html>';
-        const commentsFrame = await setupPermalinkTest(page, mockedApi, `#ghost-comments-${commentId}`, tallBodyHtml);
+        const commentsFrame = await setupPermalinkTest(page, mockedApi, `#ghost-comments-${commentId}`, TALL_BODY_HTML);
 
         await page.locator('iframe[title="comments-frame"]').waitFor({state: 'attached'});
 
@@ -161,12 +162,16 @@ test.describe('Comment Permalinks', async () => {
             html: '<p>Regular comment</p>'
         });
 
-        const commentsFrame = await setupPermalinkTest(page, mockedApi, '#ghost-comments-nonexistent123');
+        const commentsFrame = await setupPermalinkTest(page, mockedApi, '#ghost-comments-dead00000000000000000000', TALL_BODY_HTML);
 
         // Comments should still load and display normally even with invalid ID
         await expect(commentsFrame.getByText('Regular comment')).toBeVisible();
 
-        // No errors should be thrown - page should function normally
+        // A permalink to a non-existent comment should show a notice and scroll to comments
+        await expect(commentsFrame.getByTestId('missing-comment-notice')).toContainText('The linked comment is no longer available.');
+        await expect.poll(() => page.evaluate(() => window.scrollY)).toBeGreaterThan(0);
+
+        // Page should still function normally
         const comments = commentsFrame.getByTestId('comment-component');
         await expect(comments).toHaveCount(1);
     });
@@ -180,8 +185,7 @@ test.describe('Comment Permalinks', async () => {
         });
 
         // Include a tall div to push comments below viewport
-        const tallBodyHtml = '<html><head><meta charset="UTF-8" /></head><body><div style="width: 100%; height: 1500px;"></div></body></html>';
-        const commentsFrame = await setupPermalinkTest(page, mockedApi, '#some-other-hash', tallBodyHtml);
+        const commentsFrame = await setupPermalinkTest(page, mockedApi, '#some-other-hash', TALL_BODY_HTML);
 
         await page.locator('iframe[title="comments-frame"]').waitFor({state: 'attached'});
 
@@ -190,7 +194,7 @@ test.describe('Comment Permalinks', async () => {
         await expect(commentsFrame.getByTestId('loading')).toHaveCount(1);
     });
 
-    test('does not scroll to hidden comment', async ({page}) => {
+    test('shows missing-comment notice for hidden permalink and scrolls to comments area', async ({page}) => {
         const mockedApi = new MockedApi({});
         mockedApi.setMember({});
 
@@ -207,22 +211,26 @@ test.describe('Comment Permalinks', async () => {
             status: 'hidden'
         });
 
-        const commentsFrame = await setupPermalinkTest(page, mockedApi, `#ghost-comments-${hiddenCommentId}`);
+        const commentsFrame = await setupPermalinkTest(page, mockedApi, `#ghost-comments-${hiddenCommentId}`, TALL_BODY_HTML);
 
         // The visible comment should be displayed
         await expect(commentsFrame.getByText('Visible comment')).toBeVisible();
 
-        // The hidden comment element should not be scrolled to or highlighted
+        // The hidden comment element should not be rendered
         // (hidden comments are not visible to regular members)
         const hiddenCommentElement = commentsFrame.locator(`[id="${hiddenCommentId}"]`);
         await expect(hiddenCommentElement).toHaveCount(0);
 
-        // Page should function normally with no errors
+        // A permalink to a non-available comment should show a notice and scroll to comments
+        await expect(commentsFrame.getByTestId('missing-comment-notice')).toContainText('The linked comment is no longer available.');
+        await expect.poll(() => page.evaluate(() => window.scrollY)).toBeGreaterThan(0);
+
+        // Page should still function normally
         const comments = commentsFrame.getByTestId('comment-component');
         await expect(comments).toHaveCount(1);
     });
 
-    test('does not scroll to deleted comment', async ({page}) => {
+    test('shows missing-comment notice for deleted permalink and scrolls to comments area', async ({page}) => {
         const mockedApi = new MockedApi({});
         mockedApi.setMember({});
 
@@ -239,16 +247,20 @@ test.describe('Comment Permalinks', async () => {
             status: 'deleted'
         });
 
-        const commentsFrame = await setupPermalinkTest(page, mockedApi, `#ghost-comments-${deletedCommentId}`);
+        const commentsFrame = await setupPermalinkTest(page, mockedApi, `#ghost-comments-${deletedCommentId}`, TALL_BODY_HTML);
 
         // The visible comment should be displayed
         await expect(commentsFrame.getByText('Visible comment')).toBeVisible();
 
-        // The deleted comment element should not be scrolled to or highlighted
+        // The deleted comment element should not be rendered
         const deletedCommentElement = commentsFrame.locator(`[id="${deletedCommentId}"]`);
         await expect(deletedCommentElement).toHaveCount(0);
 
-        // Page should function normally with no errors
+        // A permalink to a non-available comment should show a notice and scroll to comments
+        await expect(commentsFrame.getByTestId('missing-comment-notice')).toContainText('The linked comment is no longer available.');
+        await expect.poll(() => page.evaluate(() => window.scrollY)).toBeGreaterThan(0);
+
+        // Page should still function normally
         const comments = commentsFrame.getByTestId('comment-component');
         await expect(comments).toHaveCount(1);
     });

ghost/i18n/locales/af/comments.json

@@ -69,6 +69,7 @@
     "Sign up now": "Sluit nou aan",
     "Sort by": "",
     "Start the conversation": "Begin die gesprek",
+    "The linked comment is no longer available.": "",
     "This comment has been hidden.": "Hierdie kommentaar is weggesteek.",
     "This comment has been removed.": "Hierdie kommentaar is verwyder.",
     "Upgrade now": "Gradeer nou op",

ghost/i18n/locales/ar/comments.json

@@ -69,6 +69,7 @@
     "Sign up now": "قم بالتسجيل الآن",
     "Sort by": "ترتيب بحسب",
     "Start the conversation": "ابدأ النقاش",
+    "The linked comment is no longer available.": "",
     "This comment has been hidden.": "تم اخفاء هذا التعليق",
     "This comment has been removed.": "تم حذف هذا التعليق",
     "Upgrade now": "قم بالترقية الآن",

ghost/i18n/locales/bg/comments.json

@@ -69,6 +69,7 @@
     "Sign up now": "Регистрация",
     "Sort by": "Сортиране по",
     "Start the conversation": "Започнете дискусия",
+    "The linked comment is no longer available.": "",
     "This comment has been hidden.": "Този коментар е скрит.",
     "This comment has been removed.": "Този коментар е премахнат.",
     "Upgrade now": "Надградете сега",

ghost/i18n/locales/bn/comments.json

@@ -69,6 +69,7 @@
     "Sign up now": "এখনই সাইন আপ করুন",
     "Sort by": "",
     "Start the conversation": "আলোচনা শুরু করুন",
+    "The linked comment is no longer available.": "",
     "This comment has been hidden.": "এই মন্তব্য লুকানো হয়েছে।",
     "This comment has been removed.": "এই মন্তব্য মুছে ফেলা হয়েছে।",
     "Upgrade now": "এখনই আপগ্রেড করুন",

ghost/i18n/locales/bs/comments.json

@@ -69,6 +69,7 @@
     "Sign up now": "Postani član",
     "Sort by": "",
     "Start the conversation": "Započni diskusiju",
+    "The linked comment is no longer available.": "",
     "This comment has been hidden.": "Ovaj komentar je sakriven.",
     "This comment has been removed.": "Ovaj komentar je uklonjen.",
     "Upgrade now": "Nadogradi račun sada",