[CORL-666] Viewer Events (#2681)

* feat: viewer event system

* feat: more events

* feat: MORE events

* fix: tests

* fix: rte focus events

* chore: add comments

* fix: remove listening to events

* chore: update RTE

* fix: tests

* feature: generate event docs

* fix: remove obsolete line in docs

* chore: improve docs

* chore: improve formatting

* feature: protect events.md from getting out of sync

* chore: small improvements

* fix: removing redundant lambda

src/core/client/ui/components/SelectField/SelectField.tsx

@@ -4,6 +4,7 @@ import React, {
   EventHandler,
   FocusEvent,
   FunctionComponent,
+  MouseEvent,
 } from "react";
 
 import { withKeyboardFocus, withStyles } from "coral-ui/hocs";
@@ -37,6 +38,7 @@ export interface SelectFieldProps {
   autofocus?: boolean;
   name?: string;
   onChange?: EventHandler<ChangeEvent<HTMLSelectElement>>;
+  onClick?: EventHandler<MouseEvent>;
   disabled?: boolean;
 
   // These handlers are passed down by the `withKeyboardFocus` HOC.

src/core/client/ui/components/Timestamp/Timestamp.tsx

@@ -1,5 +1,11 @@
 import cn from "classnames";
-import React, { FunctionComponent, useCallback, useState } from "react";
+import React, {
+  EventHandler,
+  FunctionComponent,
+  MouseEvent,
+  useCallback,
+  useState,
+} from "react";
 
 import { AbsoluteTime, BaseButton, RelativeTime } from "coral-ui/components";
 
@@ -9,17 +15,28 @@ export interface TimestampProps {
   className?: string;
   children: string;
   toggleAbsolute?: boolean;
+  onToggleAbsolute?: (absolute: boolean) => void;
+  onClick?: EventHandler<MouseEvent>;
 }
 
 const Timestamp: FunctionComponent<TimestampProps> = props => {
   const [showAbsolute, setShowAbsolute] = useState(false);
-  const toggleShowAbsolute = useCallback(() => {
-    if (props.toggleAbsolute) {
-      setShowAbsolute(!showAbsolute);
-    }
-  }, [showAbsolute, setShowAbsolute]);
+  const handleOnClick = useCallback(
+    (event: MouseEvent) => {
+      if (props.toggleAbsolute) {
+        if (props.onToggleAbsolute) {
+          props.onToggleAbsolute(!showAbsolute);
+        }
+        setShowAbsolute(!showAbsolute);
+      }
+      if (props.onClick) {
+        return props.onClick(event);
+      }
+    },
+    [showAbsolute, setShowAbsolute, props.onClick]
+  );
   return (
-    <BaseButton className={styles.root} onClick={toggleShowAbsolute}>
+    <BaseButton className={styles.root} onClick={handleOnClick}>
       {showAbsolute ? (
         <AbsoluteTime
           date={props.children}