Fix bug publish screenshot (#762)

[Preview this branch](https://cosmos-explorer-preview.azurewebsites.net/pull/762?feature.someFeatureFlagYouMightNeed=true)

The main change in this PR fixes the snapshot functionality in the Publish pane-related components. Because the code cell outputs are now rendered in their own iframes for security reasons, a single snapshot of the notebook is no longer possible: each cell output takes its own snapshot and the snapshots are collated on the main notebook snapshot.
- Move the snapshot functionality to notebook components: this removes the reference of the notebook DOM node that we must pass to the Publish pane via explorer.
- Add slice in the state and actions in notebook redux for notebook snapshot requests and result
- Add post robot message to take snapshots and receive results
- Add logic in `NotebookRenderer` to wait for all output snapshots done before taking the main one collating.
- Use `zustand` to share snapshot between Redux world and React world. This solves the issue of keeping the `PanelContainer` component generic, while being able to update its children (`PublishPanel` component) with the new snapshot.

Additional changes:
- Add `local()` in `@font-face` to check if font is already installed before downloading the font (must be done for Safari, but not Edge/Chrome)
- Add "Export output to image" menu item in notebook cell, since each cell output can take its own snapshot (which can be downloaded)
![image](https://user-images.githubusercontent.com/21954022/117454706-b5f16600-af46-11eb-8535-6bf99f3d9170.png)

src/hooks/useNotebookSnapshotStore.ts

@@ -0,0 +1,15 @@
+import create, { UseStore } from "zustand";
+
+export interface NotebookSnapshotHooks {
+  snapshot: string;
+  error: string;
+  setSnapshot: (imageSrc: string) => void;
+  setError: (error: string) => void;
+}
+
+export const useNotebookSnapshotStore: UseStore<NotebookSnapshotHooks> = create((set) => ({
+  snapshot: undefined,
+  error: undefined,
+  setSnapshot: (imageSrc: string) => set((state) => ({ ...state, snapshot: imageSrc })),
+  setError: (error: string) => set((state) => ({ ...state, error })),
+}));

src/hooks/useSidePanel.ts

@@ -4,7 +4,7 @@ export interface SidePanelHooks {
   isPanelOpen: boolean;
   panelContent: JSX.Element;
   headerText: string;
-  openSidePanel: (headerText: string, panelContent: JSX.Element) => void;
+  openSidePanel: (headerText: string, panelContent: JSX.Element, onClose?: () => void) => void;
   closeSidePanel: () => void;
 }
 
@@ -12,17 +12,23 @@ export const useSidePanel = (): SidePanelHooks => {
   const [isPanelOpen, setIsPanelOpen] = useState<boolean>(false);
   const [panelContent, setPanelContent] = useState<JSX.Element>();
   const [headerText, setHeaderText] = useState<string>();
+  const [onCloseCallback, setOnCloseCallback] = useState<{ callback: () => void }>();
 
-  const openSidePanel = (headerText: string, panelContent: JSX.Element): void => {
+  const openSidePanel = (headerText: string, panelContent: JSX.Element, onClose?: () => void): void => {
     setHeaderText(headerText);
     setPanelContent(panelContent);
     setIsPanelOpen(true);
+    setOnCloseCallback({ callback: onClose });
   };
 
   const closeSidePanel = (): void => {
     setHeaderText("");
     setPanelContent(undefined);
     setIsPanelOpen(false);
+    if (onCloseCallback) {
+      onCloseCallback.callback();
+      setOnCloseCallback(undefined);
+    }
   };
 
   return { isPanelOpen, panelContent, headerText, openSidePanel, closeSidePanel };