From 5701223d79ea770a1ebcb2b5102a96ddc1955c85 Mon Sep 17 00:00:00 2001
From: Amelia Wattenberger <wattenberger@github.com>
Date: Mon, 18 Jul 2022 13:51:01 -0700
Subject: [PATCH] feat: add edit-and-preview block

---
 .gitignore                                    |  1 +
 blocks.config.json                            | 10 +++
 blocks/file-blocks/edit-and-preview/index.tsx | 84 +++++++++++++++++++
 3 files changed, 95 insertions(+)
 create mode 100644 blocks/file-blocks/edit-and-preview/index.tsx

diff --git a/.gitignore b/.gitignore
index d451ff1..ef2fbc9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,3 +3,4 @@ node_modules
 dist
 dist-ssr
 *.local
+.yalc
\ No newline at end of file
diff --git a/blocks.config.json b/blocks.config.json
index a946aba..bfe6e3a 100644
--- a/blocks.config.json
+++ b/blocks.config.json
@@ -197,6 +197,16 @@
     "matches": ["*"],
     "example_path": "https://github.com/githubnext/blocks-tutorial/blob/main/processing-sketch.js"
   },
+  {
+    "type": "file",
+    "id": "edit-and-preview-block",
+    "title": "Edit with Preview",
+    "description": "Edit code side-by-side with a preview",
+    "sandbox": false,
+    "entry": "blocks/file-blocks/edit-and-preview/index.tsx",
+    "matches": ["*"],
+    "example_path": "https://github.com/githubnext/blocks-tutorial/blob/main/README.md"
+  },
   {
     "type": "folder",
     "id": "minimap-block",
diff --git a/blocks/file-blocks/edit-and-preview/index.tsx b/blocks/file-blocks/edit-and-preview/index.tsx
new file mode 100644
index 0000000..70f4f2f
--- /dev/null
+++ b/blocks/file-blocks/edit-and-preview/index.tsx
@@ -0,0 +1,84 @@
+import {
+  Block,
+  BlockPicker,
+  BlocksRepo,
+  FileBlockProps,
+} from "@githubnext/blocks";
+import { Box } from "@primer/react";
+import { useEffect, useState } from "react";
+
+export default function (props: FileBlockProps) {
+  const { metadata, BlockComponent, context, onRequestBlocksRepos } = props;
+
+  const [panes, setPanes] = useState<Block[]>(metadata?.panes || []);
+
+  const setDefaultBlockOptions = async () => {
+    const blockRepoOptions = await onRequestBlocksRepos(context.path);
+    const blockOptions = blockRepoOptions.reduce(
+      (acc: Block[], repo: BlocksRepo) => {
+        return [...acc, ...repo.blocks];
+      },
+      []
+    );
+    setPanes(blockOptions.slice(0, 2));
+  };
+  useEffect(() => {
+    // default to first two relevant Blocks
+    if (panes.length) return;
+    setDefaultBlockOptions();
+  }, [context.path]);
+
+  return (
+    <Box
+      display="grid"
+      gridTemplateColumns={`repeat(${panes.length}, 1fr)`}
+      gridGap={2}
+      height="100%"
+      width="100%"
+      overflow="hidden"
+      p={2}
+      relative
+    >
+      {panes.map((pane, index) => (
+        <Box
+          display="flex"
+          flex="1"
+          flexDirection="column"
+          borderColor="border.default"
+          borderWidth={1}
+          borderStyle="solid"
+          overflow="hidden"
+          key={index}
+        >
+          <Box
+            flex="none"
+            p={1}
+            backgroundColor="pageHeaderBg"
+            borderColor="border.default"
+            borderBottomWidth={1}
+            borderBottomStyle="solid"
+          >
+            <BlockPicker
+              value={pane}
+              onChange={(pane) => {
+                let newPanes = [...panes];
+                newPanes[index] = pane;
+                setPanes(newPanes);
+              }}
+              onRequestBlocksRepos={onRequestBlocksRepos}
+            />
+          </Box>
+          <Box flex="1" overflow="auto">
+            {BlockComponent ? (
+              <BlockComponent context={context} block={pane} />
+            ) : (
+              <Box p={4} color="fg.subtle" fontStyle="italic">
+                No BlockComponent
+              </Box>
+            )}
+          </Box>
+        </Box>
+      ))}
+    </Box>
+  );
+}