review: addressed review comments

src/core/client/embed/PymControl.ts

@@ -15,7 +15,7 @@ export const defaultPymControlFactory: PymControlFactory = (config) =>
   new PymControl(config);
 
 export default class PymControl {
-  public pym: pym.Parent;
+  private pym: pym.Parent;
   private cleanups: CleanupCallback[];
 
   constructor(config: PymControlConfig) {

src/core/client/embed/StreamEmbed.ts

@@ -12,6 +12,7 @@ import {
   withConfig,
   withEventEmitter,
   withIOSSafariWidthWorkaround,
+  withKeypressEvent,
   withLiveCommentCount,
   withPymStorage,
   withSetCommentID,
@@ -22,7 +23,6 @@ import PymControl, {
   defaultPymControlFactory,
   PymControlFactory,
 } from "./PymControl";
-import hookUpWindowEvents from "./WindowEvents";
 
 export interface StreamEmbedConfig {
   storyID?: string;
@@ -150,6 +150,7 @@ export class StreamEmbed {
       withPymStorage(localStorage, "localStorage"),
       withPymStorage(sessionStorage, "sessionStorage"),
       withConfig(externalConfig),
+      withKeypressEvent,
     ];
 
     const query = stringifyQuery({
@@ -168,8 +169,6 @@ export class StreamEmbed {
       decorators: streamDecorators,
       url,
     });
-
-    hookUpWindowEvents(this.pymControl);
   }
 }
 

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

@@ -1,9 +1,10 @@
 export { Decorator, CleanupCallback } from "./types";
 export { default as withAutoHeight } from "./withAutoHeight";
 export { default as withClickEvent } from "./withClickEvent";
-export { default as withSetCommentID } from "./withSetCommentID";
-export { default as withEventEmitter } from "./withEventEmitter";
-export { default as withPymStorage } from "./withPymStorage";
 export { default as withConfig } from "./withConfig";
-export { default as withLiveCommentCount } from "./withLiveCommentCount";
+export { default as withEventEmitter } from "./withEventEmitter";
 export { default as withIOSSafariWidthWorkaround } from "./withIOSSafariWidthWorkaround";
+export { default as withKeypressEvent } from "./withKeypressEvent";
+export { default as withLiveCommentCount } from "./withLiveCommentCount";
+export { default as withPymStorage } from "./withPymStorage";
+export { default as withSetCommentID } from "./withSetCommentID";

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

@@ -0,0 +1,22 @@
+import { Decorator } from "./types";
+
+const withKeypressEvent: Decorator = (pym) => {
+  const handleKeypress = (e: KeyboardEvent) => {
+    const payload = {
+      key: e.key,
+      shiftKey: e.shiftKey,
+    };
+
+    pym.sendMessage("keypress", JSON.stringify(payload));
+  };
+
+  document.addEventListener("keypress", handleKeypress);
+
+  // Return cleanup callback.
+  return () => {
+    // Remove the event listeners.
+    document.removeEventListener("keypress", handleKeypress);
+  };
+};
+
+export default withKeypressEvent;

src/core/client/framework/helpers/index.ts

@@ -1,17 +1,18 @@
-export { default as getViewer } from "./getViewer";
-export { default as getViewerSourceID } from "./getViewerSourceID";
-export { default as getURLWithCommentID } from "./getURLWithCommentID";
-export { default as urls } from "./urls";
-export { default as createContextHOC } from "./createContextHOC";
-export { default as redirectOAuth2 } from "./redirectOAuth2";
-export { default as getParamsFromHashAndClearIt } from "./getParamsFromHashAndClearIt";
-export { default as getParamsFromHash } from "./getParamsFromHash";
 export { default as clearHash } from "./clearHash";
-export { default as roleIsAtLeast } from "./roleIsAtLeast";
-export { default as resolveStoryURL } from "./resolveStoryURL";
+export { default as createContextHOC } from "./createContextHOC";
 export { default as detectCountScript } from "./detectCountScript";
-export { default as potentiallyInjectAxe } from "./potentiallyInjectAxe";
+export { default as getModerationLink, QUEUE_NAME } from "./getModerationLink";
+export { default as getParamsFromHash } from "./getParamsFromHash";
+export { default as getParamsFromHashAndClearIt } from "./getParamsFromHashAndClearIt";
+export { default as getURLWithCommentID } from "./getURLWithCommentID";
+export { default as getViewer } from "./getViewer";
+export { default as getViewerSourceID } from "./getViewerSourceID";
 export { default as injectConditionalPolyfills } from "./injectConditionalPolyfills";
+export { default as onPymMessage } from "./onPymMessage";
 export { default as polyfillCSSVars } from "./polyfillCSSVars";
 export { default as polyfillIntlLocale } from "./polyfillIntlLocale";
-export { default as getModerationLink, QUEUE_NAME } from "./getModerationLink";
+export { default as potentiallyInjectAxe } from "./potentiallyInjectAxe";
+export { default as redirectOAuth2 } from "./redirectOAuth2";
+export { default as resolveStoryURL } from "./resolveStoryURL";
+export { default as roleIsAtLeast } from "./roleIsAtLeast";
+export { default as urls } from "./urls";

src/core/client/framework/helpers/onPymMessage.ts

@@ -0,0 +1,20 @@
+import { Child, MessageCallback } from "pym.js";
+
+function onPymMessage(
+  child: Child,
+  messageType: string,
+  callback: MessageCallback
+) {
+  child.onMessage(messageType, callback);
+  return () => {
+    const index = child.messageHandlers[messageType].indexOf(callback);
+    if (index > -1) {
+      child.messageHandlers[messageType].splice(index, 1);
+      if (child.messageHandlers[messageType].length === 0) {
+        delete child.messageHandlers[messageType];
+      }
+    }
+  };
+}
+
+export default onPymMessage;

src/core/client/framework/lib/bootstrap/createManaged.tsx

@@ -8,6 +8,7 @@ import { Environment, RecordSource, Store } from "relay-runtime";
 import { v1 as uuid } from "uuid";
 
 import { LanguageCode } from "coral-common/helpers/i18n";
+import { onPymMessage } from "coral-framework/helpers";
 import polyfillIntlLocale from "coral-framework/helpers/polyfillIntlLocale";
 import { getBrowserInfo } from "coral-framework/lib/browserInfo";
 import { ErrorReporter } from "coral-framework/lib/errors";
@@ -303,14 +304,7 @@ export default async function createManaged({
   let registerClickFarAway: ClickFarAwayRegister | undefined;
   if (pym) {
     registerClickFarAway = (cb) => {
-      pym.onMessage("click", cb);
-      // Return unlisten callback.
-      return () => {
-        const index = pym.messageHandlers.click.indexOf(cb);
-        if (index > -1) {
-          pym.messageHandlers.click.splice(index, 1);
-        }
-      };
+      return onPymMessage(pym, "click", cb);
     };
   }