From a86112fc255f240c13b5b46b9f2a35241350bca4 Mon Sep 17 00:00:00 2001 From: Penar Musaraj Date: Mon, 6 Feb 2023 11:10:50 -0500 Subject: [PATCH] FEATURE: Allow embedded view to include a header (#20150) This commits adds the ability to add a header to the embedded comments view. One use case for this is to allow `postMessage` communication between the comments iframe and the parent frame, for example, when toggling the theme of the parent webpage. --- .../javascripts/admin/addon/models/theme.js | 7 +++++- app/models/remote_theme.rb | 11 ++++++++- app/models/theme_field.rb | 2 +- app/views/layouts/embed.html.erb | 1 + config/locales/client.en.yml | 3 +++ spec/requests/embed_controller_spec.rb | 24 +++++++++++++++++++ 6 files changed, 45 insertions(+), 3 deletions(-) diff --git a/app/assets/javascripts/admin/addon/models/theme.js b/app/assets/javascripts/admin/addon/models/theme.js index d41ecb7f5f7..a7ac122c04c 100644 --- a/app/assets/javascripts/admin/addon/models/theme.js +++ b/app/assets/javascripts/admin/addon/models/theme.js @@ -67,7 +67,12 @@ const Theme = RestModel.extend({ } return { - common: [...common, "embedded_scss", "color_definitions"], + common: [ + ...common, + "color_definitions", + "embedded_scss", + "embedded_header", + ], desktop: common, mobile: common, settings: ["yaml"], diff --git a/app/models/remote_theme.rb b/app/models/remote_theme.rb index 4894a8a73c3..f80bbf26980 100644 --- a/app/models/remote_theme.rb +++ b/app/models/remote_theme.rb @@ -13,7 +13,16 @@ class RemoteTheme < ActiveRecord::Base class ImportError < StandardError end - ALLOWED_FIELDS = %w[scss embedded_scss head_tag header after_header body_tag footer] + ALLOWED_FIELDS = %w[ + scss + embedded_scss + embedded_header + head_tag + header + after_header + body_tag + footer + ] GITHUB_REGEXP = %r{\Ahttps?://github\.com/} GITHUB_SSH_REGEXP = %r{\Assh://git@github\.com:} diff --git a/app/models/theme_field.rb b/app/models/theme_field.rb index a2404c7f83f..dd8db0e8bf8 100644 --- a/app/models/theme_field.rb +++ b/app/models/theme_field.rb @@ -337,7 +337,7 @@ class ThemeField < ActiveRecord::Base end def self.html_fields - @html_fields ||= %w[body_tag head_tag header footer after_header] + @html_fields ||= %w[body_tag head_tag header footer after_header embedded_header] end def self.scss_fields diff --git a/app/views/layouts/embed.html.erb b/app/views/layouts/embed.html.erb index 90711df5d2c..8c095e69d99 100644 --- a/app/views/layouts/embed.html.erb +++ b/app/views/layouts/embed.html.erb @@ -19,6 +19,7 @@ <%= yield :head %> + <%= theme_lookup("embedded_header") %> <%= yield %> diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml index dbdb05efff3..dba2d4935a2 100644 --- a/config/locales/client.en.yml +++ b/config/locales/client.en.yml @@ -5097,6 +5097,9 @@ en: embedded_scss: text: "Embedded CSS" title: "Enter custom CSS to deliver with embedded version of comments" + embedded_header: + text: "Embedded Header" + title: "Enter HTML to display above the embedded version of comments" color_definitions: text: "Color Definitions" title: "Enter custom color definitions (advanced users only)" diff --git a/spec/requests/embed_controller_spec.rb b/spec/requests/embed_controller_spec.rb index 7963526532b..8ca1f4b8b33 100644 --- a/spec/requests/embed_controller_spec.rb +++ b/spec/requests/embed_controller_spec.rb @@ -212,6 +212,30 @@ RSpec.describe EmbedController do expect(response.body).to include(".test-osama-15") end + it "includes HTML from embedded_header field" do + theme = Fabricate(:theme) + theme.set_default! + + ThemeField.create!( + theme_id: theme.id, + name: "embedded_header", + target_id: 0, + type_id: 0, + value: "hey there!\n", + ) + + topic_embed = Fabricate(:topic_embed, embed_url: embed_url) + post = Fabricate(:post, topic: topic_embed.topic) + + get "/embed/comments", params: { embed_url: embed_url }, headers: headers + + html = Nokogiri::HTML5.fragment(response.body) + custom_header = html.at(".custom-text") + + expect(custom_header.name).to eq("strong") + expect(custom_header.text).to eq("hey there!") + end + context "with success" do after do expect(response.status).to eq(200)