Display linked chapters and sections in preview link tooltip

The tooltip for links to entries that are not published yet or
password protected names the linked chapter or section. Its preview
link points to the chapter or section in the draft.

Author: tf

entry_types/scrolled/config/locales/de.yml

@@ -2190,3 +2190,4 @@ de:
         open_draft_preview: Vorschau des Entwurfs öffnen
         open_preview: Vorschau öffnen
         password_protected: Passwortgeschützt
+        section_in: Abschnitt in

entry_types/scrolled/config/locales/en.yml

@@ -2016,3 +2016,4 @@ en:
         open_draft_preview: Open draft preview
         open_preview: Open preview
         password_protected: Password protected
+        section_in: Section in

entry_types/scrolled/package/spec/frontend/commenting/features/linkTooltip-spec.js

@@ -14,18 +14,20 @@ describe('link tooltip in commenting mode', () => {
     'pageflow_scrolled.review.link_tooltip.password_protected': 'Password protected',
     'pageflow_scrolled.review.link_tooltip.open_preview': 'Open preview',
     'pageflow_scrolled.review.link_tooltip.open_draft_preview': 'Open draft preview',
+    'pageflow_scrolled.review.link_tooltip.section_in': 'Section in',
     'pageflow_scrolled.inline_editing.link_tooltip.opens_in_same_tab': 'Opens in same tab'
   });
 
-  function renderLink(href, {publicationState = 'not_published'} = {}) {
+  function renderLink(href, {publicationState = 'not_published', chapters} = {}) {
     return renderEntry({
       seed: {
         linkedEntries: [{
           id: 7,
           title: 'Other story',
           url: 'https://example.com/other',
           previewUrl: '/admin/entries/other/preview',
-          publicationState
+          publicationState,
+          chapters
         }]
       },
       contentElement: {ui: <Link href={href}>A link</Link>}
@@ -92,4 +94,43 @@ describe('link tooltip in commenting mode', () => {
 
     expect(entry.getAllByRole('link')).toHaveLength(1);
   });
+
+  describe('with chapter or section', () => {
+    it('offers preview of chapter', async () => {
+      const user = userEvent.setup();
+      const entry = renderLink({entry: 7, chapter: 20, signature: 's'}, {
+        chapters: [{permaId: 20, title: 'New chapter', slug: 'new-chapter',
+                    previewSlug: 'new-chapter'}]
+      });
+
+      await user.hover(entry.getByText('A link'));
+
+      expect(entry.getByText('Other story › New chapter')).toBeInTheDocument();
+      expect(entry.getByRole('link', {name: 'Open preview'}))
+        .toHaveAttribute('href', '/admin/entries/other/preview#new-chapter');
+    });
+
+    it('offers preview of section', async () => {
+      const user = userEvent.setup();
+      const entry = renderLink({entry: 7, section: 30, signature: 's'});
+
+      await user.hover(entry.getByText('A link'));
+
+      expect(entry.getByText('Section in Other story')).toBeInTheDocument();
+      expect(entry.getByRole('link', {name: 'Open preview'}))
+        .toHaveAttribute('href', '/admin/entries/other/preview#section-30');
+    });
+
+    it('does not display tooltip for chapters of published entries', async () => {
+      const user = userEvent.setup();
+      const entry = renderLink({entry: 7, chapter: 20, signature: 's'}, {
+        publicationState: 'published_without_password_protection',
+        chapters: [{permaId: 20, title: 'Intro', slug: 'intro', previewSlug: 'intro'}]
+      });
+
+      await user.hover(entry.getByText('A link'));
+
+      expect(entry.getAllByRole('link')).toHaveLength(1);
+    });
+  });
 });

entry_types/scrolled/package/src/frontend/commenting/Link.js

@@ -2,13 +2,13 @@ import React from 'react';
 
 import {PlainLink} from '../Link';
 import {useLinkTooltip} from '../../shared/linkTooltip';
-import {usePreviewableLinkedEntry} from './LinkTooltip';
+import {usePreviewableLinkDestination} from './LinkTooltip';
 
 export function Link(props) {
   const linkTooltip = useLinkTooltip();
-  const linkedEntry = usePreviewableLinkedEntry(props.href);
+  const destination = usePreviewableLinkDestination(props.href);
 
-  if (!linkedEntry || !linkTooltip) {
+  if (!destination || !linkTooltip) {
     return <PlainLink {...props} />;
   }
 

entry_types/scrolled/package/src/frontend/commenting/LinkTooltip.js

@@ -2,7 +2,7 @@ import React from 'react';
 import {FloatingArrow} from '@floating-ui/react';
 
 import {useI18n} from '../i18n';
-import {useLinkedEntry} from 'pageflow-scrolled/entryState';
+import {useLinkedEntryDestination} from 'pageflow-scrolled/entryState';
 import {
   LinkTooltipProvider as SharedLinkTooltipProvider,
   useLinkTooltip
@@ -20,21 +20,24 @@ export function LinkTooltipProvider({children}) {
   );
 }
 
-export function usePreviewableLinkedEntry(href) {
-  const linkedEntry = useLinkedEntry(href?.entry);
+export function usePreviewableLinkDestination(href) {
+  const destination = useLinkedEntryDestination(href?.entry ? href : {});
 
-  return linkedEntry && previewLabels[linkedEntry.publicationState] ? linkedEntry : null;
+  return destination && previewLabels[destination.linkedEntry.publicationState] ?
+         destination :
+         null;
 }
 
 function LinkTooltip({setFloating, floatingStyles, floatingContext, arrowRef, state}) {
   const {keep, deactivate} = useLinkTooltip();
-  const linkedEntry = usePreviewableLinkedEntry(state?.href);
+  const destination = usePreviewableLinkDestination(state?.href);
   const {t} = useI18n({locale: 'ui'});
 
-  if (!linkedEntry) {
+  if (!destination) {
     return null;
   }
 
+  const {linkedEntry} = destination;
   const labels = previewLabels[linkedEntry.publicationState];
 
   return (
@@ -47,13 +50,17 @@ function LinkTooltip({setFloating, floatingStyles, floatingContext, arrowRef, st
       <FloatingArrow ref={arrowRef}
                      context={floatingContext} />
       <div className={styles.entry}>
-        <span>{linkedEntry.title}</span>
+        <span>
+          {destination.section ?
+           `${t('pageflow_scrolled.review.link_tooltip.section_in')} ${linkedEntry.title}` :
+           [linkedEntry.title, destination.chapter?.title].filter(Boolean).join(' › ')}
+        </span>
         <span className={styles.pill}>
           {t(`pageflow_scrolled.review.link_tooltip.${labels.state}`)}
         </span>
       </div>
       <div className={styles.previewLink}>
-        <a href={linkedEntry.previewUrl}
+        <a href={destination.previewUrl}
            target="_blank"
            rel="noopener noreferrer">
           {t(`pageflow_scrolled.review.link_tooltip.${labels.link}`)}