Content modelling/659 Preview Host Documents via iFrame

[Harriethw]

https://trello.com/c/e2rpWPUT/659-spike-preview-host-documents

We would like users to be able to click through from the edit journey to view a preview of the Host Document with the new Content Block content within it.
This PR suggests the first stage of enabling it via an iframe embedding the HTML from the gov.uk frontend of the Host Document.
We have come to this solution of using an iframe after extensive chats and found this to be the least bad option.
https://docs.google.com/document/d/19Nla6imjblR4XK_VI7t1lpob8Jmng2ZqRfpmsSnVuVQ/edit?tab=t.0#heading=h.s3ee1ypp6ehg

⚠️ This repo is Continuously Deployed: make sure you follow the guidance ⚠️

Follow these steps if you are doing a Rails upgrade.

[pezholio]

Looks largely on the right track so far. Just a coupla suggestions 👍

[pezholio]

This is ace! Just a couple of things to think about. Feel free to push back on any / all of them if I'm barking up the wrong tree.

[pezholio]

I wonder if this class could/should be more of a model-type class, especially as it returns something that looks like a model. I thinking something like:

class PreviewContent < Data.define(:title, :html)
  class << self
    def for_content_id(content_id)
        PreviewContent.new(title: content_item["title"], html:)
    end
    
    private

    def content_item
      @content_item ||= begin
        response = Services.publishing_api.get_content(@content_id)
        response.parsed_content
      end
    end

    def frontend_base_path
      Rails.env.development? ? Plek.external_url_for("government-frontend") : Plek.website_root
    end

    def frontend_path
      frontend_base_path + content_item["base_path"]
    end

    def html
      uri = URI(frontend_path)
      @html ||= Nokogiri::HTML.parse(Net::HTTP.get(uri))
    end
  end
end

[Harriethw]

good one 👍 liking the use of Data

[Harriethw]

I've done this in a new refactor commit

[pezholio]

This is ace, I didn't know about srcdoc!

[pezholio]

Would it be better to add a class here and then have the styling in the CSS? That way it'll be easier to make any tweakes further down the line - thinking maybe content-embed--preview to stay true to the BEM way of doing things. Could alter this with something like:

Suggested change

	span["style"] = "background-color: yellow;"
	span["class"] = "#{span["class"]} content-embed--preview"

[Harriethw]

oh I meant to put something in the commit about this - i just hit a slight complication with adding a style to an iframe from outside of it, but I think it is possible

[pezholio]

Ah, course. Good point. Maybe if it gets tricky, we could at least have the style in a constant, so it's easier to spot.

[pezholio]

Could/should we have a fallback if we don't get a response? I'm worried that when we run locally, we'll have to have the frontend stack running too, which could get annoying

[Harriethw]

hmm that's a good point and definitely something that needs some design thinking - what do you think we should show for now? A paragraph element that says "Preview not found"?

[pezholio]

Yeah, I think that'll be enough for now