Add target top to external links in embed mode

app/controllers/pageflow/entries_controller.rb

@@ -119,7 +119,10 @@ def entry_redirect(entry)
     end
 
     def delegate_to_entry_type_frontend_app!(entry, override_status: nil)
-      EntriesControllerEnvHelper.add_entry_info_to_env(request.env, entry:, mode: :published)
+      EntriesControllerEnvHelper.add_entry_info_to_env(request.env,
+                                                       entry:,
+                                                       mode: :published,
+                                                       embed: params[:embed].present?)
 
       delegate_to_rack_app!(entry.entry_type.frontend_app) do |result|
         status, headers, body = result

entry_types/scrolled/app/controllers/pageflow_scrolled/entries_controller.rb

@@ -21,7 +21,11 @@ def show
       render(
         locals: {
           entry:,
-          widget_scope: get_entry_mode_from_env
+          widget_scope: get_entry_mode_from_env,
+          seed_options: {
+            embed: get_embed_from_env,
+            origin_url: request.original_url
+          }
         }
       )
     end

entry_types/scrolled/app/helpers/pageflow_scrolled/react_server_side_rendering_helper.rb

@@ -4,9 +4,9 @@ module ReactServerSideRenderingHelper
     include Pageflow::RenderJsonHelper
     include PageflowScrolled::EntryJsonSeedHelper
 
-    def render_scrolled_entry(entry)
+    def render_scrolled_entry(entry, options = {})
       seed_json = render_json do |json|
-        scrolled_entry_json_seed(json, entry)
+        scrolled_entry_json_seed(json, entry, options)
       end
 
       ReactServerSideRenderingHelper.renderer.render('Root', "{seed: #{seed_json}}", {})

entry_types/scrolled/app/views/pageflow_scrolled/entries/show.html.erb

@@ -35,7 +35,7 @@
         </script>
       <% end %>
 
-      <% ssr_html = local_assigns[:skip_ssr] ? '' : render_scrolled_entry(entry) %>
+      <% ssr_html = local_assigns[:skip_ssr] ? '' : render_scrolled_entry(entry, local_assigns[:seed_options] || {}) %>
 
       <% if !local_assigns[:skip_ssr] && (params[:frontend] == 'v2' || entry.feature_state('frontend_v2')) %>
         <%= generated_media_queries_tags_for(ssr_html) %>

entry_types/scrolled/app/views/pageflow_scrolled/entry_json_seed/_entry.json.jbuilder

@@ -48,6 +48,8 @@ json.config do
   )
 
   json.cut_off entry.cutoff_mode_enabled_for?(request)
+  json.embed options.fetch(:embed, false)
+  json.origin_url options[:origin_url] if options[:origin_url]
 end
 
 unless options[:skip_i18n]

entry_types/scrolled/package/spec/entryState/embedOriginUrl-spec.js

@@ -0,0 +1,43 @@
+import {useEmbedOriginUrl} from 'entryState';
+
+import {renderHookInEntry} from 'support';
+
+describe('useEmbedOriginUrl', () => {
+  it('returns undefined when embed is false', () => {
+    const {result} = renderHookInEntry(
+      () => useEmbedOriginUrl(), {
+        seed: {
+          embed: false,
+          originUrl: 'https://example.com/my-entry'
+        }
+      }
+    );
+
+    expect(result.current).toBeUndefined();
+  });
+
+  it('returns undefined when embed is true but originUrl not set', () => {
+    const {result} = renderHookInEntry(
+      () => useEmbedOriginUrl(), {
+        seed: {
+          embed: true
+        }
+      }
+    );
+
+    expect(result.current).toBeUndefined();
+  });
+
+  it('returns originUrl when embed is true and originUrl is set', () => {
+    const {result} = renderHookInEntry(
+      () => useEmbedOriginUrl(), {
+        seed: {
+          embed: true,
+          originUrl: 'https://example.com/my-entry'
+        }
+      }
+    );
+
+    expect(result.current).toEqual('https://example.com/my-entry');
+  });
+});

entry_types/scrolled/package/spec/frontend/EditableLink-spec.js

@@ -2,91 +2,27 @@ import React from 'react';
 
 import {EditableLink} from 'frontend';
 
-import {render} from '@testing-library/react';
 import {renderInEntry} from 'support';
 import '@testing-library/jest-dom/extend-expect'
 
+// Link behavior is tested in Link-spec.js.
+// These tests verify EditableLink correctly passes props to Link.
+
 describe('EditableLink', () => {
   it('renders link', () => {
-    const {getByRole} = render(
+    const {getByRole} = renderInEntry(
       <EditableLink href="https://example.com">Some link</EditableLink>
     );
 
     expect(getByRole('link')).toHaveTextContent('Some link')
     expect(getByRole('link')).toHaveAttribute('href', 'https://example.com')
-    expect(getByRole('link')).not.toHaveAttribute('target')
-    expect(getByRole('link')).not.toHaveAttribute('rel')
   });
 
   it('supports className', () => {
-    const {getByRole} = render(
+    const {getByRole} = renderInEntry(
       <EditableLink className="custom" href="https://example.com">Some link</EditableLink>
     );
 
     expect(getByRole('link')).toHaveClass('custom')
   });
-
-  it('supports rendering link with target blank', () => {
-    const {getByRole} = render(
-      <EditableLink href="https://example.com" openInNewTab>Some link</EditableLink>
-    );
-
-    expect(getByRole('link')).toHaveTextContent('Some link')
-    expect(getByRole('link')).toHaveAttribute('target', '_blank')
-    expect(getByRole('link')).toHaveAttribute('rel', 'noopener noreferrer')
-  });
-
-  it('supports rendering internal chapter links', () => {
-    const seed = {
-      chapters: [{id: 1, permaId: 10, configuration: {title: 'The Intro'}}]
-    };
-
-    const {getByRole} = renderInEntry(
-      <EditableLink href={{chapter: 10}}>Some link</EditableLink>,
-      {seed}
-    );
-
-    expect(getByRole('link')).toHaveTextContent('Some link')
-    expect(getByRole('link')).toHaveAttribute('href', '#the-intro')
-    expect(getByRole('link')).not.toHaveAttribute('target')
-    expect(getByRole('link')).not.toHaveAttribute('rel')
-  });
-
-  it('supports rendering internal section links', () => {
-    const seed = {
-      sections: [{id: 1, permaId: 10}]
-    };
-
-    const {getByRole} = renderInEntry(
-      <EditableLink href={{section: 10}}>Some link</EditableLink>,
-      {seed}
-    );
-
-    expect(getByRole('link')).toHaveTextContent('Some link')
-    expect(getByRole('link')).toHaveAttribute('href', '#section-10')
-    expect(getByRole('link')).not.toHaveAttribute('target')
-    expect(getByRole('link')).not.toHaveAttribute('rel')
-  });
-
-  it('supports rendering file links', () => {
-    const seed = {
-      imageFileUrlTemplates: {
-        original: ':id_partition/original/:basename.:extension'
-      },
-      sections: [{id: 1, permaId: 10}],
-      imageFiles: [{id: 1, permaId: 100, displayName: 'Some File.jpg'}]
-    };
-
-    const {getByRole} = renderInEntry(
-      <EditableLink href={{file: {permaId: 100, collectionName: 'imageFiles'}}}>
-        Some link
-      </EditableLink>,
-      {seed}
-    );
-
-    expect(getByRole('link')).toHaveTextContent('Some link')
-    expect(getByRole('link')).toHaveAttribute('href', '000/000/001/original/image.jpg?download=Some%20File.jpg')
-    expect(getByRole('link')).toHaveAttribute('target', '_blank')
-    expect(getByRole('link')).toHaveAttribute('rel', 'noopener noreferrer')
-  });
 });

entry_types/scrolled/package/spec/frontend/EditableTable-spec.js

@@ -4,6 +4,7 @@ import {EditableTable} from 'frontend';
 import * as phoneLayout from 'frontend/usePhoneLayout';
 
 import {render, screen} from '@testing-library/react';
+import {renderInEntry} from 'support';
 import '@testing-library/jest-dom/extend-expect'
 
 describe('EditableTable', () => {
@@ -74,7 +75,7 @@ describe('EditableTable', () => {
       ]
     }];
 
-    const {getByRole} = render(<EditableTable value={value} />);
+    const {getByRole} = renderInEntry(<EditableTable value={value} />);
 
     expect(getByRole('link')).toHaveTextContent('here')
     expect(getByRole('link')).toHaveAttribute('href', 'https://example.com')
@@ -111,7 +112,7 @@ describe('EditableTable', () => {
       ]
     }];
 
-    const {getByRole} = render(<EditableTable value={value} />);
+    const {getByRole} = renderInEntry(<EditableTable value={value} />);
 
     expect(getByRole('link')).toHaveTextContent('here')
     expect(getByRole('link')).toHaveAttribute('target', '_blank')

entry_types/scrolled/package/spec/frontend/EditableText-spec.js

@@ -97,6 +97,9 @@ describe('EditableText', () => {
     expect(getByRole('listitem')).toHaveTextContent('List item')
   });
 
+  // Link behavior is tested in Link-spec.js.
+  // These tests verify EditableText correctly renders links via Link.
+
   it('renders links', () => {
     const value = [{
       type: 'paragraph',
@@ -113,37 +116,11 @@ describe('EditableText', () => {
       ]
     }]
 
-    const {getByRole} = render(<EditableText value={value} />);
+    const {getByRole} = renderInEntry(<EditableText value={value} />);
 
     expect(getByRole('link')).toHaveTextContent('here')
     expect(getByRole('link')).toHaveAttribute('href', 'https://example.com')
     expect(getByRole('link')).toHaveClass('typography-contentLink')
-    expect(getByRole('link')).not.toHaveAttribute('target')
-    expect(getByRole('link')).not.toHaveAttribute('rel')
-  });
-
-  it('supports rendering links with target blank', () => {
-    const value = [{
-      type: 'paragraph',
-      children: [
-        {text: 'Find more '},
-        {
-          type: 'link',
-          href: 'https://example.com',
-          openInNewTab: true,
-          children: [
-            {text: 'here'}
-          ]
-        },
-        {text: '.'}
-      ]
-    }]
-
-    const {getByRole} = render(<EditableText value={value} />);
-
-    expect(getByRole('link')).toHaveTextContent('here')
-    expect(getByRole('link')).toHaveAttribute('target', '_blank')
-    expect(getByRole('link')).toHaveAttribute('rel', 'noopener noreferrer')
   });
 
   it('supports rendering internal chapter links', () => {
@@ -170,68 +147,6 @@ describe('EditableText', () => {
     expect(getByRole('link')).toHaveTextContent('here')
     expect(getByRole('link')).toHaveAttribute('href', '#the-intro')
     expect(getByRole('link')).toHaveClass('typography-contentLink')
-    expect(getByRole('link')).not.toHaveAttribute('target')
-    expect(getByRole('link')).not.toHaveAttribute('rel')
-  });
-
-  it('supports rendering internal section links', () => {
-    const value = [{
-      type: 'paragraph',
-      children: [
-        {text: 'Find more '},
-        {
-          type: 'link',
-          href: {section: 10},
-          children: [
-            {text: 'here'}
-          ]
-        },
-        {text: '.'}
-      ]
-    }];
-    const seed = {
-      sections: [{id: 1, permaId: 10}]
-    };
-
-    const {getByRole} = renderInEntry(<EditableText value={value} />, {seed});
-
-    expect(getByRole('link')).toHaveTextContent('here')
-    expect(getByRole('link')).toHaveAttribute('href', '#section-10')
-    expect(getByRole('link')).toHaveClass('typography-contentLink')
-    expect(getByRole('link')).not.toHaveAttribute('target')
-    expect(getByRole('link')).not.toHaveAttribute('rel')
-  });
-
-  it('supports rendering file links', () => {
-    const value = [{
-      type: 'paragraph',
-      children: [
-        {text: 'Find more '},
-        {
-          type: 'link',
-          href: {file: {permaId: 100, collectionName: 'imageFiles'}},
-          children: [
-            {text: 'here'}
-          ]
-        },
-        {text: '.'}
-      ]
-    }];
-    const seed = {
-      imageFileUrlTemplates: {
-        original: ':id_partition/original/:basename.:extension'
-      },
-      sections: [{id: 1, permaId: 10}],
-      imageFiles: [{id: 1, permaId: 100, displayName: 'MyImage.jpg'}]
-    };
-
-    const {getByRole} = renderInEntry(<EditableText value={value} />, {seed});
-
-    expect(getByRole('link')).toHaveTextContent('here')
-    expect(getByRole('link')).toHaveAttribute('href', '000/000/001/original/image.jpg?download=MyImage.jpg')
-    expect(getByRole('link')).toHaveClass('typography-contentLink')
-    expect(getByRole('link')).toHaveAttribute('target', '_blank')
-    expect(getByRole('link')).toHaveAttribute('rel', 'noopener noreferrer')
   });
 
   it('renders zero width no break space in empty leafs to prevent empty paragraphs from collapsing', () => {