feat: better zero states around code

src/ui/menus/CodeEditor/CodeEditor.tsx

@@ -1,3 +1,4 @@
+// https://github.com/microsoft/monaco-editor/issues/1228
 import React, { useRef, useState, useEffect, useMemo } from 'react';
 import Editor, { Monaco, loader } from '@monaco-editor/react';
 import monaco from 'monaco-editor';
@@ -28,6 +29,7 @@ import { AI, Formula, Python } from '../../icons';
 import { TooltipHint } from '../../components/TooltipHint';
 import { KeyboardSymbols } from '../../../helpers/keyboardSymbols';
 import { ResizeControl } from './ResizeControl';
+import { CodeEditorPlaceholder } from './CodeEditorPlaceholder';
 import mixpanel from 'mixpanel-browser';
 import useAlertOnUnsavedChanges from '../../../hooks/useAlertOnUnsavedChanges';
 
@@ -273,6 +275,8 @@ export const CodeEditor = (props: CodeEditorProps) => {
     return <></>;
   }
 
+  console.log(editorContent);
+
   return (
     <div
       id="QuadraticCodeEditorID"
@@ -386,6 +390,7 @@ export const CodeEditor = (props: CodeEditorProps) => {
       {/* Editor Body */}
       <div
         style={{
+          position: 'relative',
           minHeight: '100px',
           flex: '2',
         }}
@@ -395,9 +400,7 @@ export const CodeEditor = (props: CodeEditorProps) => {
           width="100%"
           language={editorMode === 'PYTHON' ? 'python' : editorMode === 'FORMULA' ? 'formula' : 'plaintext'}
           value={editorContent}
-          onChange={(value) => {
-            setEditorContent(value);
-          }}
+          onChange={setEditorContent}
           onMount={handleEditorDidMount}
           options={{
             minimap: { enabled: true },
@@ -412,6 +415,9 @@ export const CodeEditor = (props: CodeEditorProps) => {
             wordWrap: 'on',
           }}
         />
+        {selectedCell.type === 'PYTHON' && (
+          <CodeEditorPlaceholder editorContent={editorContent} setEditorContent={setEditorContent} />
+        )}
       </div>
 
       <ResizeControl setState={setConsoleHeight} position="TOP" />

src/ui/menus/CodeEditor/CodeEditorPlaceholder.tsx

@@ -0,0 +1,119 @@
+import useLocalStorage from '../../../hooks/useLocalStorage';
+import { codeEditorCommentStyles } from './styles';
+
+export const snippets = [
+  {
+    label: 'fetch data',
+    // prettier-ignore
+    code:
+`import json
+from pyodide.http import pyfetch
+
+# Fetch data
+res = await pyfetch(
+  'https://jsonplaceholder.typicode.com/users',
+  method = 'GET',
+  headers = {
+    'Content-Type': 'application/json'
+  }
+)
+users = json.loads(await res.string())
+
+# Table
+out = []
+
+# Headers
+out.append(['Username',  'Email', 'Website'])
+
+# Rows (from json)
+for user in users:
+    out.append([user['username'], user['email'], user['website']])
+
+# Last line returns to sheet
+out`,
+  },
+  {
+    label: 'reference cells',
+    // prettier-ignore
+    code: 
+`# Reference a value from the sheet
+myCell = cell(x, y)
+
+# Or reference a range of cells (returns a Pandas DataFrame)
+cells((x1, y1), (x2, y2))`,
+  },
+  {
+    label: 'return data to the sheet',
+    // prettier-ignore
+    code: 
+`out = []
+for x in range(10):
+    out.append(x)
+
+# Last line returns to the sheet
+out
+# [out] # Wrap in array to expand horizontally`,
+  },
+];
+
+export function CodeEditorPlaceholder({
+  editorContent,
+  setEditorContent,
+}: {
+  editorContent: string | undefined;
+  setEditorContent: (str: string | undefined) => void;
+}) {
+  const [showPlaceholder, setShowPlaceholder] = useLocalStorage<boolean>('showCodeEditorPlaceholder', true);
+
+  if (editorContent) {
+    return null;
+  }
+
+  if (!showPlaceholder) {
+    return null;
+  }
+
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        left: '64px',
+        top: 0,
+        pointerEvents: 'none',
+        // Kinda hacky, but we're copying the style of the code editor
+        ...codeEditorCommentStyles,
+      }}
+    >
+      Start typing — or get started with a quick snippet:{' '}
+      {snippets.map((snippet, i: number) => (
+        <>
+          <a
+            href={`#snippet-${i}`}
+            style={{ color: 'inherit', pointerEvents: 'auto' }}
+            onClick={(e) => {
+              e.preventDefault();
+              setEditorContent(snippet.code);
+            }}
+          >
+            {snippet.label}
+          </a>
+          {i === snippets.length - 1 ? '.' : i < snippets.length - 2 ? ', ' : ', or '}
+        </>
+      ))}
+      <br />
+      <br />
+      Last line returns to the sheet (
+      <a
+        href="#dont-show-again"
+        style={{ color: 'inherit', pointerEvents: 'auto' }}
+        onClick={(e) => {
+          e.preventDefault();
+          setShowPlaceholder(false);
+        }}
+      >
+        don’t show this again
+      </a>
+      ).
+    </div>
+  );
+}