Added support for taking screenshot during Notebook publish to Gallery (#108)

* Added support for taking screenshot

- Screenshot is taken using html2canvas package
- Converted to base 64 and uploaded to metadata
- For Using first display output
  - Notebok object is passed instead of string, to publish pane
  - The first cell with output present is parsed out
  - The dom is also parsed to get corresponding div element to take screenshot of the first output

* fixed bug

* Addressed PR comments

- FIxed bug that didn't capture screenshot when mutiple notebook tabs are opened

* removed unnecessary dependencies

* fixed compile issues

* more edits

src/Explorer/Notebook/NotebookRenderer/NotebookRenderer.tsx

@@ -30,11 +30,18 @@ import { CellType } from "@nteract/commutable/src";
 import "./NotebookRenderer.less";
 import HoverableCell from "./decorators/HoverableCell";
 import CellLabeler from "./decorators/CellLabeler";
+import * as cdbActions from "../NotebookComponent/actions";
 
-export interface NotebookRendererProps {
+export interface NotebookRendererBaseProps {
   contentRef: any;
 }
 
+interface NotebookRendererDispatchProps {
+  updateNotebookParentDomElt: (contentRef: ContentRef, parentElt: HTMLElement) => void;
+}
+
+type NotebookRendererProps = NotebookRendererBaseProps & NotebookRendererDispatchProps;
+
 interface PassedEditorProps {
   id: string;
   contentRef: ContentRef;
@@ -68,6 +75,8 @@ const decorate = (id: string, contentRef: ContentRef, cell_type: CellType, child
 };
 
 class BaseNotebookRenderer extends React.Component<NotebookRendererProps> {
+  private notebookRendererRef = React.createRef<HTMLDivElement>();
+
   constructor(props: NotebookRendererProps) {
     super(props);
 
@@ -78,13 +87,22 @@ class BaseNotebookRenderer extends React.Component<NotebookRendererProps> {
 
   componentDidMount() {
     loadTransform(this.props as any);
+    this.props.updateNotebookParentDomElt(this.props.contentRef, this.notebookRendererRef.current);
+  }
+
+  componentDidUpdate() {
+    this.props.updateNotebookParentDomElt(this.props.contentRef, this.notebookRendererRef.current);
+  }
+
+  componentWillUnmount() {
+    this.props.updateNotebookParentDomElt(this.props.contentRef, undefined);
   }
 
   render(): JSX.Element {
     return (
       <>
         <div className="NotebookRendererContainer">
-          <div className="NotebookRenderer">
+          <div className="NotebookRenderer" ref={this.notebookRendererRef}>
             <DndProvider backend={HTML5Backend}>
               <KeyboardShortcuts contentRef={this.props.contentRef}>
                 <Cells contentRef={this.props.contentRef}>
@@ -146,7 +164,7 @@ class BaseNotebookRenderer extends React.Component<NotebookRendererProps> {
   }
 }
 
-const makeMapDispatchToProps = (initialDispatch: Dispatch, initialProps: NotebookRendererProps) => {
+const makeMapDispatchToProps = (initialDispatch: Dispatch, initialProps: NotebookRendererBaseProps) => {
   const mapDispatchToProps = (dispatch: Dispatch) => {
     return {
       addTransform: (transform: React.ComponentType & { MIMETYPE: string }) => {
@@ -156,6 +174,14 @@ const makeMapDispatchToProps = (initialDispatch: Dispatch, initialProps: Noteboo
             component: transform
           })
         );
+      },
+      updateNotebookParentDomElt: (contentRef: ContentRef, parentElt: HTMLElement) => {
+        return dispatch(
+          cdbActions.UpdateNotebookParentDomElt({
+            contentRef,
+            parentElt
+          })
+        );
       }
     };
   };