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.
This commit is contained in:
Penar Musaraj 2023-02-06 11:10:50 -05:00 committed by GitHub
parent 9e1fcb2a79
commit a86112fc25
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 45 additions and 3 deletions

View File

@ -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"],

View File

@ -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:}

View File

@ -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

View File

@ -19,6 +19,7 @@
<%= yield :head %>
</head>
<body>
<%= theme_lookup("embedded_header") %>
<%= yield %>
</body>
</html>

View File

@ -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)"

View File

@ -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: "<strong class='custom-text'>hey there!</strong>\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)