Integrate with embed

src/core/client/embed/Stream.ts

@@ -5,9 +5,9 @@ import {
   Decorator,
   withAutoHeight,
   withClickEvent,
-  withCommentID,
   withEventEmitter,
   withIOSSafariWidthWorkaround,
+  withSetCommentID,
 } from "./decorators";
 import PymControl from "./PymControl";
 import { ensureEndSlash } from "./utils";
@@ -15,6 +15,7 @@ import { ensureEndSlash } from "./utils";
 interface CreatePymControlConfig {
   assetID?: string;
   assetURL?: string;
+  commentID?: string;
   title?: string;
   eventEmitter: EventEmitter2;
   id: string;
@@ -26,13 +27,14 @@ export function createPymControl(config: CreatePymControlConfig) {
     withIOSSafariWidthWorkaround,
     withAutoHeight,
     withClickEvent,
-    withCommentID,
+    withSetCommentID,
     withEventEmitter(config.eventEmitter),
   ];
 
   const query = qs.stringify({
     assetID: config.assetID,
     assetURL: config.assetURL,
+    commentID: config.commentID,
   });
   const url = `${ensureEndSlash(config.rootURL)}stream.html?${query}`;
   return new PymControl({
@@ -73,6 +75,7 @@ export type StreamInterface = ReturnType<typeof createStreamInterface>;
 export interface CreateConfig {
   assetID?: string;
   assetURL?: string;
+  commentID?: string;
   title?: string;
   eventEmitter: EventEmitter2;
   id: string;

src/core/client/embed/decorators/index.ts

@@ -4,7 +4,7 @@ export type CleanupCallback = () => void;
 export type Decorator = (pym: pym.Parent) => CleanupCallback | void;
 export { default as withAutoHeight } from "./withAutoHeight";
 export { default as withClickEvent } from "./withClickEvent";
-export { default as withCommentID } from "./withCommentID";
+export { default as withSetCommentID } from "./withSetCommentID";
 export { default as withEventEmitter } from "./withEventEmitter";
 export {
   default as withIOSSafariWidthWorkaround,

src/core/client/embed/decorators/withCommentID.ts

@@ -1,36 +0,0 @@
-import qs from "query-string";
-
-import { buildURL } from "../utils";
-import { Decorator } from "./";
-
-const withCommentID: Decorator = pym => {
-  // Remove the comment id from the query.
-  pym.onMessage("view-all-comments", () => {
-    const search = qs.stringify({
-      ...qs.parse(location.search),
-      commentId: undefined,
-    });
-
-    // Remove the commentId url param.
-    const url = buildURL({ search });
-
-    // Change the url.
-    window.history.replaceState({}, document.title, url);
-  });
-
-  // Add the permalink comment id to the query.
-  pym.onMessage("view-comment", (id: string) => {
-    const search = qs.stringify({
-      ...qs.parse(location.search),
-      commentId: id,
-    });
-
-    // Remove the commentId url param.
-    const url = buildURL({ search });
-
-    // Change the url.
-    window.history.replaceState({}, document.title, url);
-  });
-};
-
-export default withCommentID;

src/core/client/embed/decorators/withSetCommentID.spec.ts

@@ -1,16 +1,16 @@
-import withCommentID from "./withCommentID";
+import withSetCommentID from "./withSetCommentID";
 
 it("should add commentID", () => {
   const previousLocation = location.toString();
   const previousState = window.history.state;
   const fakePym = {
     onMessage: (type: string, callback: (id: string) => void) => {
-      if (type === "view-comment") {
+      if (type === "setCommentID") {
         callback("comment-id");
       }
     },
   };
-  withCommentID(fakePym as any);
+  withSetCommentID(fakePym as any);
   expect(location.toString()).toBe("http://localhost/?commentId=comment-id");
   window.history.replaceState(previousState, document.title, previousLocation);
 });
@@ -25,12 +25,12 @@ it("should remove commentID", () => {
   );
   const fakePym = {
     onMessage: (type: string, callback: () => void) => {
-      if (type === "view-all-comments") {
+      if (type === "setCommentID") {
         callback();
       }
     },
   };
-  withCommentID(fakePym as any);
+  withSetCommentID(fakePym as any);
   expect(location.toString()).toBe("http://localhost/");
   window.history.replaceState(previousState, document.title, previousLocation);
 });

src/core/client/embed/decorators/withSetCommentID.ts

@@ -0,0 +1,22 @@
+import qs from "query-string";
+
+import { buildURL } from "../utils";
+import { Decorator } from "./";
+
+const withSetCommentID: Decorator = pym => {
+  // Add the permalink comment id to the query.
+  pym.onMessage("setCommentID", (id: string) => {
+    const search = qs.stringify({
+      ...qs.parse(location.search),
+      commentID: id || undefined,
+    });
+
+    // Remove the commentId url param.
+    const url = buildURL({ search });
+
+    // Change the url.
+    window.history.replaceState({}, document.title, url);
+  });
+};
+
+export default withSetCommentID;

src/core/client/embed/index.ts

@@ -6,6 +6,7 @@ import createStreamInterface from "./Stream";
 export interface Config {
   assetID?: string;
   assetURL?: string;
+  commentID?: string;
   rootURL?: string;
   id?: string;
   events?: (eventEmitter: EventEmitter2) => void;
@@ -23,6 +24,7 @@ export function render(config: Config = {}) {
   return createStreamInterface({
     assetID: config.assetID || query.assetID,
     assetURL: config.assetURL || query.assetURL,
+    commentID: config.commentID || query.commentID,
     id: config.id || "talk-embed-stream",
     rootURL: config.rootURL || location.origin,
     eventEmitter,