Merge branch 'develop' into fix/upgrade-node-relay-10

docs/docs/comment-embed.md

@@ -12,6 +12,20 @@ Add the `commentEmbed.js` script to your `html` tree. On a page that includes th
 ></script>
 ```
 
+If you are manually including the embed script, and you want to set a `customCSSURL` and a `customFontsCSSURL` to use instead or in place of tenant settings for these values, include these as data attributes on the script for the single comment embed to use. If the script is automatically added by the _Stream Embed_, these values will be grabbed and set for you.
+
+Example of how to manually add them:
+
+```html
+<script
+  class="coral-script"
+  src="//{{ CORAL_DOMAIN_NAME }}/assets/js/commentEmbed.js"
+  data-customCSSURL="{{ CUSTOM_CSS_URL }}"
+  data-customFontsCSSURL="{{ CUSTOM_FONTS_CSS_URL }}"
+  defer
+></script>
+```
+
 > **NOTE:** Replace the value of `{{ CORAL_DOMAIN_NAME }}` with the location of your running instance of Coral.
 
 ### Embed code

src/core/client/embed/StreamEmbed.ts

@@ -132,7 +132,7 @@ export class StreamEmbed {
     injectCountScriptIfNeeded(config.rootURL, this.ts);
 
     // Detect if comment embed injection is needed and add the comment embed script.
-    injectCommentEmbedScriptIfNeeded(config.rootURL, this.ts);
+    injectCommentEmbedScriptIfNeeded(config, this.ts);
 
     if (config.commentID) {
       // Delay emit of `showPermalink` event to allow user enough time to setup

src/core/client/embed/injectCommentEmbedScriptIfNeeded.ts

@@ -4,21 +4,30 @@ import {
 } from "coral-framework/constants";
 import { detectCommentEmbedScript } from "coral-framework/helpers";
 
+import { StreamEmbedConfig } from "./StreamEmbed";
+
 /**
  * injectCommentEmbedScriptIfNeeded will detect if comment embed injection is necessary and
  * automatically includes the `commentEmbed.js` script.
  */
 const injectCommentEmbedScriptIfNeeded = (
-  rootURL: string,
+  config: StreamEmbedConfig,
   timestamp: number
 ) => {
   if (detectCommentEmbedScript(window)) {
     return;
   }
   if (document.querySelector(COMMENT_EMBED_SELECTOR)) {
     const s = document.createElement("script");
-    s.src = `${rootURL}/assets/js/commentEmbed.js?ts=${timestamp}`;
+    s.src = `${config.rootURL}/assets/js/commentEmbed.js?ts=${timestamp}`;
     s.className = ORIGIN_FALLBACK_ID;
+    s.setAttribute("id", "coralSingleCommentEmbedScript");
+    if (config.customCSSURL) {
+      s.setAttribute("data-customCSSURL", config.customCSSURL);
+    }
+    if (config.customFontsCSSURL) {
+      s.setAttribute("data-customFontsCSSURL", config.customFontsCSSURL);
+    }
     s.async = false;
     s.defer = true;
     (document.head || document.body).appendChild(s);

src/core/client/oembed/index.ts

@@ -10,6 +10,8 @@ interface CommentEmbedQueryArgs {
   commentID?: string;
   allowReplies?: string;
   reactionLabel?: string;
+  customFontsCSSURL?: string | null;
+  customCSSURL?: string | null;
 }
 
 /** createCommentEmbedQueryRef creates a unique reference from the query args */
@@ -34,9 +36,22 @@ function detectAndInject(opts: DetectAndInjectArgs = {}) {
     const commentID = element.dataset.commentid;
     const allowReplies = element.dataset.allowreplies;
     const reactionLabel = element.dataset.reactionlabel;
+    const embedScript = document.querySelector(
+      "#coralSingleCommentEmbedScript"
+    );
+    const customCSSURL = embedScript?.getAttribute("data-customCSSURL");
+    const customFontsCSSURL = embedScript?.getAttribute(
+      "data-customFontsCSSURL"
+    );
 
     // Construct the args for generating the ref.
-    const args = { commentID, allowReplies, reactionLabel };
+    const args = {
+      commentID,
+      allowReplies,
+      reactionLabel,
+      customCSSURL,
+      customFontsCSSURL,
+    };
 
     // Get or create a ref.
     let ref = element.dataset.coralRef;
@@ -59,14 +74,22 @@ function detectAndInject(opts: DetectAndInjectArgs = {}) {
 
   // Call server using JSONP.
   Object.keys(queryMap).forEach((ref) => {
-    const { commentID, allowReplies, reactionLabel } = queryMap[ref];
+    const {
+      commentID,
+      allowReplies,
+      reactionLabel,
+      customCSSURL,
+      customFontsCSSURL,
+    } = queryMap[ref];
 
     // Compile the arguments used to generate the
     const args: Record<string, string | undefined> = {
       allowReplies,
       commentID,
       ref,
       reactionLabel,
+      customCSSURL: customCSSURL ?? undefined,
+      customFontsCSSURL: customFontsCSSURL ?? undefined,
     };
 
     // Add the script element with the specified options to the page.

src/core/server/app/handlers/api/comment/commentEmbed.ts

@@ -37,6 +37,8 @@ const CommentEmbedJSONPQuerySchema = Joi.object().keys({
   commentID: Joi.string().required(),
   allowReplies: Joi.string().optional(),
   reactionLabel: Joi.string().optional(),
+  customCSSURL: Joi.string().optional(),
+  customFontsCSSURL: Joi.string().optional(),
   ref: Joi.string().required(),
 });
 
@@ -46,6 +48,8 @@ interface CommentEmbedJSONPQuery {
   ref: string;
   allowReplies?: string;
   reactionLabel?: string;
+  customCSSURL?: string;
+  customFontsCSSURL?: string;
 }
 
 /**
@@ -78,6 +82,8 @@ export const commentEmbedJSONPHandler =
         ref,
         allowReplies,
         reactionLabel,
+        customCSSURL: customCSSURLEmbed,
+        customFontsCSSURL: customFontsCSSURLEmbed,
       }: CommentEmbedJSONPQuery = validate(
         CommentEmbedJSONPQuerySchema,
         req.query
@@ -147,7 +153,7 @@ export const commentEmbedJSONPHandler =
           mediaUrl,
           includeReplies,
           streamCSS,
-          customCSSURL,
+          customCSSURL: customCSSURLEmbed || customCSSURL,
           staticRoot: staticURI || tenantURL,
           giphyMedia,
           tenantURL,
@@ -164,7 +170,7 @@ export const commentEmbedJSONPHandler =
       const data: CommentEmbedJSONPData = {
         ref,
         html,
-        customFontsCSSURL,
+        customFontsCSSURL: customFontsCSSURLEmbed || customFontsCSSURL,
         defaultFontsCSSURL,
         commentID,
         staticRoot: staticURI || tenantURL,