Decouple Playground from SICP Workspace

src/pages/playground/Playground.tsx

@@ -1,6 +1,5 @@
 import { Classes } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Ace, Range } from 'ace-builds';
 import { FSModule } from 'browserfs/dist/node/core/FS';
 import classNames from 'classnames';
 import { Chapter, Variant } from 'js-slang/dist/types';
@@ -115,7 +114,6 @@ import MobileWorkspace, {
 } from '../../commons/mobileWorkspace/MobileWorkspace';
 import { SideBarTab } from '../../commons/sideBar/SideBar';
 import { SideContentTab, SideContentType } from '../../commons/sideContent/SideContentTypes';
-import { Links } from '../../commons/utils/Constants';
 import { generateLanguageIntroduction } from '../../commons/utils/IntroductionHelper';
 import { convertParamToBoolean, convertParamToInt } from '../../commons/utils/ParamParseHelper';
 import { IParsedQuery, parseQuery } from '../../commons/utils/QueryHelper';
@@ -139,7 +137,6 @@ import {
 } from './PlaygroundTabs';
 
 export type PlaygroundProps = {
-  isSicpEditor?: boolean;
   initialEditorValueHash?: string;
   prependLength?: number;
   handleCloseEditor?: () => void;
@@ -233,8 +230,7 @@ export async function handleHash(
 }
 
 const Playground: React.FC<PlaygroundProps> = props => {
-  const { isSicpEditor } = props;
-  const workspaceLocation: WorkspaceLocation = isSicpEditor ? 'sicp' : 'playground';
+  const workspaceLocation: WorkspaceLocation = 'playground';
   const { isMobileBreakpoint } = useResponsive();
 
   const [deviceSecret, setDeviceSecret] = useState<string | undefined>();
@@ -328,8 +324,7 @@ const Playground: React.FC<PlaygroundProps> = props => {
     [deviceSecret]
   );
 
-  const usingRemoteExecution =
-    useTypedSelector(state => !!state.session.remoteExecutionSession) && !isSicpEditor;
+  const usingRemoteExecution = useTypedSelector(state => !!state.session.remoteExecutionSession);
   // this is still used by remote execution (EV3)
   // specifically, for the editor Ctrl+B to work
   const externalLibraryName = useTypedSelector(
@@ -348,7 +343,7 @@ const Playground: React.FC<PlaygroundProps> = props => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editorSessionId]);
 
-  const hash = isSicpEditor ? props.initialEditorValueHash : location.hash;
+  const hash = location.hash;
 
   useEffect(() => {
     if (!hash) {
@@ -403,7 +398,7 @@ const Playground: React.FC<PlaygroundProps> = props => {
     [isGreen]
   );
 
-  const onEditorValueChange = React.useCallback(
+  const onEditorValueChange = useCallback(
     (editorTabIndex: number, newEditorValue: string) => {
       setLastEdit(new Date());
       handleEditorValueChange(editorTabIndex, newEditorValue);
@@ -697,19 +692,19 @@ const Playground: React.FC<PlaygroundProps> = props => {
   );
 
   const shareButton = useMemo(() => {
-    const qs = isSicpEditor ? Links.playground + '#' + props.initialEditorValueHash : queryString;
+    const qs = queryString;
     return (
       <ControlBarShareButton
         handleGenerateLz={() => dispatch(generateLzString())}
         handleShortenURL={s => dispatch(shortenURL(s))}
         handleUpdateShortURL={s => dispatch(updateShortURL(s))}
         queryString={qs}
         shortURL={shortURL}
-        isSicp={isSicpEditor}
+        isSicp={false}
         key="share"
       />
     );
-  }, [dispatch, isSicpEditor, props.initialEditorValueHash, queryString, shortURL]);
+  }, [dispatch, queryString, shortURL]);
 
   const toggleFolderModeButton = useMemo(() => {
     return (
@@ -776,17 +771,14 @@ const Playground: React.FC<PlaygroundProps> = props => {
       }
     }
 
-    if (!isSicpEditor) {
-      tabs.push(remoteExecutionTab);
-    }
+    tabs.push(remoteExecutionTab);
 
     return tabs;
   }, [
     playgroundIntroductionTab,
     languageConfig.chapter,
     output,
     usingRemoteExecution,
-    isSicpEditor,
     dispatch,
     workspaceLocation,
     shouldShowDataVisualizer,
@@ -798,18 +790,6 @@ const Playground: React.FC<PlaygroundProps> = props => {
   // Remove Intro and Remote Execution tabs for mobile
   const mobileTabs = [...tabs].filter(({ id }) => !(id && desktopOnlyTabIds.includes(id)));
 
-  const onLoadMethod = useCallback(
-    (editor: Ace.Editor) => {
-      const addFold = () => {
-        editor.getSession().addFold('    ', new Range(1, 0, props.prependLength!, 0));
-        editor.renderer.off('afterRender', addFold);
-      };
-
-      editor.renderer.on('afterRender', addFold);
-    },
-    [props.prependLength]
-  );
-
   const onChangeMethod = useCallback(
     (newCode: string, delta: CodeDelta) => {
       const input: Input = {
@@ -928,7 +908,6 @@ const Playground: React.FC<PlaygroundProps> = props => {
     onChange: onChangeMethod,
     onCursorChange: onCursorChangeMethod,
     onSelectionChange: onSelectionChangeMethod,
-    onLoad: isSicpEditor && props.prependLength ? onLoadMethod : undefined,
     sourceChapter: languageConfig.chapter,
     externalLibraryName,
     sourceVariant: languageConfig.variant,
@@ -960,7 +939,7 @@ const Playground: React.FC<PlaygroundProps> = props => {
       selectedTab === SideContentType.envVisualizer,
     inputHidden: replDisabled,
     replButtons: [replDisabled ? null : evalButton, clearButton],
-    disableScrolling: isSicpEditor
+    disableScrolling: false
   };
 
   const sideBarProps: { tabs: SideBarTab[] } = useMemo(() => {
@@ -997,7 +976,7 @@ const Playground: React.FC<PlaygroundProps> = props => {
         autorunButtons,
         languageConfig.chapter === Chapter.FULL_JS ? null : shareButton,
         chapterSelectButton,
-        isSicpEditor ? null : sessionButtons,
+        sessionButtons,
         languageConfig.supports.multiFile ? toggleFolderModeButton : null,
         persistenceButtons,
         githubButtons,
@@ -1041,7 +1020,7 @@ const Playground: React.FC<PlaygroundProps> = props => {
           autorunButtons,
           chapterSelectButton,
           languageConfig.chapter === Chapter.FULL_JS ? null : shareButton,
-          isSicpEditor ? null : sessionButtons,
+          sessionButtons,
           languageConfig.supports.multiFile ? toggleFolderModeButton : null,
           persistenceButtons,
           githubButtons

src/pages/sicp/subcomponents/CodeSnippet.tsx

@@ -7,9 +7,9 @@ import ControlBar from 'src/commons/controlBar/ControlBar';
 import { ControlBarCloseButton } from 'src/commons/controlBar/ControlBarCloseButton';
 import { useResponsive } from 'src/commons/utils/Hooks';
 import { SourceTheme } from 'src/features/sicp/SourceTheme';
-import Playground from 'src/pages/playground/Playground';
 
 import { CodeSnippetContext } from '../Sicp';
+import SicpWorkspace from './SicpWorkspace';
 
 export type CodeSnippetProps = OwnProps;
 type OwnProps = {
@@ -55,7 +55,6 @@ const CodeSnippet: React.FC<CodeSnippetProps> = props => {
   const WorkspaceProps = {
     initialEditorValueHash: props.initialEditorValueHash,
     prependLength: props.prependLength,
-    isSicpEditor: true,
 
     handleCloseEditor: handleClose
   };
@@ -81,13 +80,13 @@ const CodeSnippet: React.FC<CodeSnippetProps> = props => {
           <ControlBar {...controlBarProps} />
           {isMobileBreakpoint ? (
             <div className="sicp-workspace-container-container">
-              <Playground {...WorkspaceProps} />
+              <SicpWorkspace {...WorkspaceProps} />
             </div>
           ) : (
             <div className="sicp-code-snippet-desktop-open">
               <Resizable {...resizableProps}>
                 <div className="sicp-workspace-container-container">
-                  <Playground {...WorkspaceProps} />
+                  <SicpWorkspace {...WorkspaceProps} />
                 </div>
               </Resizable>
             </div>