Interactive Sicp: Fix share link not working and increase editor size

src/commons/controlBar/ControlBarShareButton.tsx

@@ -1,4 +1,4 @@
-import { NonIdealState, Position, Spinner, Text } from '@blueprintjs/core';
+import { NonIdealState, Position, Spinner, SpinnerSize, Text } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import { Popover2, Tooltip2 } from '@blueprintjs/popover2';
 import * as React from 'react';
@@ -19,6 +19,7 @@ type StateProps = {
   queryString?: string;
   shortURL?: string;
   key: string;
+  isSicp?: boolean;
 };
 
 type State = {
@@ -51,6 +52,15 @@ export class ControlBarShareButton extends React.PureComponent<ControlBarShareBu
           Share your programs! Type something into the editor (left), then click on this button
           again.
         </Text>
+      ) : this.props.isSicp ? (
+        <div>
+          <input defaultValue={this.props.queryString!} readOnly={true} ref={this.shareInputElem} />
+          <Tooltip2 content="Copy link to clipboard">
+            <CopyToClipboard text={this.props.queryString!}>
+              {controlButton('', IconNames.DUPLICATE, this.selectShareInputText)}
+            </CopyToClipboard>
+          </Tooltip2>
+        </div>
       ) : (
         <>
           {!this.props.shortURL || this.props.shortURL === 'ERROR' ? (
@@ -71,7 +81,7 @@ export class ControlBarShareButton extends React.PureComponent<ControlBarShareBu
               <div>
                 <NonIdealState
                   description="Generating Shareable Link..."
-                  icon={<Spinner size={Spinner.SIZE_SMALL} />}
+                  icon={<Spinner size={SpinnerSize.SMALL} />}
                 />
               </div>
             )

src/commons/utils/Constants.ts

@@ -81,6 +81,7 @@ export enum Links {
   techSVC = 'mailto:techsvc@comp.nus.edu.sg',
   techSVCNumber = '6516 2736',
   textbook = 'https://source-academy.github.io/interactive-sicp/',
+  playground = 'https://source-academy.github.io/playground',
   textbookChapter2_2 = 'https://source-academy.github.io/interactive-sicp/2.2',
   textbookChapter3_2 = 'https://source-academy.github.io/interactive-sicp/3.2',
 

src/features/sicp/parser/ParseJson.tsx

@@ -105,7 +105,7 @@ const handleSnippet = (obj: JsonType) => {
       body: obj['body']!,
       id: obj['id']!,
       initialEditorValueHash: obj['withoutPrepend']!,
-      initialFullProgramHash: obj['program']!,
+      initialFullProgramHash: obj['program']! || obj['withoutPrepend']!,
       initialPrependHash: obj['prepend']!,
       output: obj['output']!
     };

src/features/sicp/parser/__tests__/__snapshots__/ParseJson.tsx.snap

@@ -160,7 +160,7 @@ exports[`Parse figures FIGURE with image successful 1`] = `
 exports[`Parse figures FIGURE with snippet successful 1`] = `
 "<div className=\\"sicp-figure\\">
   <div />
-  <Component body=\\"1 + 1;\\" id={[undefined]} initialEditorValueHash=\\"IwAg1CwNxA\\" initialFullProgramHash={[undefined]} initialPrependHash={[undefined]} output={[undefined]} />
+  <Component body=\\"1 + 1;\\" id={[undefined]} initialEditorValueHash=\\"IwAg1CwNxA\\" initialFullProgramHash=\\"IwAg1CwNxA\\" initialPrependHash={[undefined]} output={[undefined]} />
   <h5 className=\\"sicp-caption\\">
     name
     <span>
@@ -425,13 +425,13 @@ exports[`Parse snippet SNIPPET with prepend successful 1`] = `
 `;
 
 exports[`Parse snippet SNIPPET without prepend successful 1`] = `
-"<div body=\\"1 + 1;\\" id=\\"id\\" initialEditorValueHash=\\"IwAg1CwNxA\\" initialFullProgramHash={[undefined]} initialPrependHash={[undefined]} output={[undefined]}>
+"<div body=\\"1 + 1;\\" id=\\"id\\" initialEditorValueHash=\\"IwAg1CwNxA\\" initialFullProgramHash=\\"IwAg1CwNxA\\" initialPrependHash={[undefined]} output={[undefined]}>
   Code Snippet
 </div>"
 `;
 
 exports[`Parse snippet SNIPPET without prepend with output successful 1`] = `
-"<div body=\\"1 + 1;\\" id=\\"id\\" initialEditorValueHash=\\"IwAg1CwNxA\\" initialFullProgramHash={[undefined]} initialPrependHash={[undefined]} output=\\"2\\">
+"<div body=\\"1 + 1;\\" id=\\"id\\" initialEditorValueHash=\\"IwAg1CwNxA\\" initialFullProgramHash=\\"IwAg1CwNxA\\" initialPrependHash={[undefined]} output=\\"2\\">
   Code Snippet
 </div>"
 `;

src/pages/playground/Playground.tsx

@@ -44,7 +44,7 @@ import SideContentRemoteExecution from '../../commons/sideContent/SideContentRem
 import SideContentSubstVisualizer from '../../commons/sideContent/SideContentSubstVisualizer';
 import { SideContentTab, SideContentType } from '../../commons/sideContent/SideContentTypes';
 import SideContentVideoDisplay from '../../commons/sideContent/SideContentVideoDisplay';
-import Constants from '../../commons/utils/Constants';
+import Constants, { Links } from '../../commons/utils/Constants';
 import { generateSourceIntroduction } from '../../commons/utils/IntroductionHelper';
 import { stringParamToInt } from '../../commons/utils/ParamParseHelper';
 import { parseQuery } from '../../commons/utils/QueryHelper';
@@ -64,6 +64,7 @@ export type OwnProps = {
   isSicpEditor?: boolean;
   initialEditorValueHash?: string;
   initialPrependHash?: string | undefined;
+  initialFullProgramHash?: string;
 
   handleCloseEditor?: () => void;
 };
@@ -551,25 +552,30 @@ const Playground: React.FC<PlaygroundProps> = props => {
     />
   );
 
-  const shareButton = React.useMemo(
-    () => (
+  const shareButton = React.useMemo(() => {
+    const queryString = isSicpEditor
+      ? Links.playground + '#' + props.initialFullProgramHash
+      : props.queryString;
+    return (
       <ControlBarShareButton
         handleGenerateLz={props.handleGenerateLz}
         handleShortenURL={props.handleShortenURL}
         handleUpdateShortURL={props.handleUpdateShortURL}
-        queryString={props.queryString}
+        queryString={queryString}
         shortURL={props.shortURL}
+        isSicp={isSicpEditor}
         key="share"
       />
-    ),
-    [
-      props.handleGenerateLz,
-      props.handleShortenURL,
-      props.handleUpdateShortURL,
-      props.queryString,
-      props.shortURL
-    ]
-  );
+    );
+  }, [
+    isSicpEditor,
+    props.handleGenerateLz,
+    props.handleShortenURL,
+    props.handleUpdateShortURL,
+    props.initialFullProgramHash,
+    props.queryString,
+    props.shortURL
+  ]);
 
   const playgroundIntroductionTab: SideContentTab = React.useMemo(
     () => ({

src/pages/sicp/subcomponents/CodeSnippet.tsx

@@ -19,8 +19,8 @@ type OwnProps = {
   output: string;
   id: string;
   initialEditorValueHash: string;
-  initialPrependHash?: string | undefined;
-  initialFullProgramHash?: string | undefined;
+  initialPrependHash: string | undefined;
+  initialFullProgramHash: string | undefined;
 };
 
 const resizableProps = {
@@ -36,7 +36,7 @@ const resizableProps = {
   },
   defaultSize: {
     width: '100%',
-    height: '400px'
+    height: '500px'
   },
   minHeight: '250px',
   maxHeight: '2000px'
@@ -65,6 +65,7 @@ const CodeSnippet: React.FC<CodeSnippetProps> = props => {
       ? props.initialFullProgramHash
       : props.initialEditorValueHash,
     initialPrependHash: showPrepend ? undefined : props.initialPrependHash,
+    initialFullProgramHash: props.initialFullProgramHash,
     isSicpEditor: true,
 
     handleCloseEditor: handleClose
@@ -105,11 +106,13 @@ const CodeSnippet: React.FC<CodeSnippetProps> = props => {
               <SicpWorkspaceContainer {...WorkspaceProps} />
             </div>
           ) : (
-            <Resizable {...resizableProps}>
-              <div className="sicp-workspace-container-container">
-                <SicpWorkspaceContainer {...WorkspaceProps} />
-              </div>
-            </Resizable>
+            <div className="sicp-code-snippet-desktop-open">
+              <Resizable {...resizableProps}>
+                <div className="sicp-workspace-container-container">
+                  <SicpWorkspaceContainer {...WorkspaceProps} />
+                </div>
+              </Resizable>
+            </div>
           )}
         </div>
       ) : (

src/styles/_sicp.scss

@@ -1,6 +1,16 @@
 $sicp-text-color: #333333;
 $sicp-background-color: #ffffff;
 
+$sicp-max-width: 1050px;
+$sicp-code-snippet-width: 90vw;
+$sicp-code-snippet-max-width: 1500px;
+$sicp-content-lr-padding: 6em;
+
+// Override Sass min()
+@function min($numbers...) {
+  @return m#{i}n(#{$numbers});
+}
+
 .Sicp {
   width: 100%;
   color: $sicp-text-color;
@@ -50,8 +60,8 @@ $sicp-background-color: #ffffff;
 
   .sicp-content {
     margin: 1em auto;
-    padding: 0 6em;
-    max-width: 1050px;
+    padding: 0 $sicp-content-lr-padding;
+    max-width: $sicp-max-width;
     height: fit-content;
     background-color: $sicp-background-color;
 
@@ -157,17 +167,42 @@ $sicp-background-color: #ffffff;
 
   .sicp-code-snippet {
     margin: 10px 0;
+    line-height: 1;
 
     .sicp-code-snippet-open {
+      width: 100vw;
+      margin: 25px 0;
+      transform: translateX(
+        min(
+          -$sicp-content-lr-padding,
+          calc(#{$sicp-max-width} / 2 - 50vw - #{$sicp-content-lr-padding})
+        )
+      );
+      display: flex;
+      flex-flow: column nowrap;
+      align-items: center;
+
       > .ControlBar {
         display: flex;
         background-color: $cadet-color-1;
         color: white;
         padding: 5px;
+        width: $sicp-code-snippet-width;
+        max-width: $sicp-code-snippet-max-width;
 
         .ControlBar_flow {
           flex-grow: 1;
         }
+
+        @media only screen and (max-width: 768px) {
+          width: 100%;
+          max-width: unset;
+        }
+      }
+
+      .sicp-code-snippet-desktop-open {
+        width: $sicp-code-snippet-width;
+        max-width: $sicp-code-snippet-max-width;
       }
 
       .sicp-workspace-container-container {
@@ -183,11 +218,14 @@ $sicp-background-color: #ffffff;
       }
 
       @media only screen and (max-width: 768px) {
+        display: block;
         position: fixed;
+        margin: 0;
+        transform: none;
         z-index: 20;
         top: 0;
         left: 0;
-        height: calc(100% - 40px);
+        height: calc(100% - 40px); // minus size of control bar
         width: 100vw;
       }
     }