From e3ffd04804759c309fd8d1f301163c34b11748f1 Mon Sep 17 00:00:00 2001
From: Alex Yang <himself65@outlook.com>
Date: Mon, 26 Jun 2023 21:39:07 +0800
Subject: [PATCH] feat(docs): bootstrapping using blocksuite (#2859)

---
 apps/docs/entries.ts                          |  18 ++--
 apps/docs/src/app.tsx                         |  54 +++++++-----
 apps/docs/src/atom.ts                         |  11 +++
 apps/docs/src/components/editor.tsx           |  82 +++++++++---------
 .../{sidebar.tsx => sidebar/index.tsx}        |  15 ++++
 .../src/components/sidebar/save-to-local.tsx  |  28 ++++++
 apps/docs/src/index.tsx                       |  12 +--
 apps/docs/src/pages/binary                    | Bin 0 -> 8249 bytes
 apps/docs/src/server-fns.ts                   |  10 +++
 9 files changed, 148 insertions(+), 82 deletions(-)
 create mode 100644 apps/docs/src/atom.ts
 rename apps/docs/src/components/{sidebar.tsx => sidebar/index.tsx} (50%)
 create mode 100644 apps/docs/src/components/sidebar/save-to-local.tsx
 create mode 100644 apps/docs/src/pages/binary
 create mode 100644 apps/docs/src/server-fns.ts

diff --git a/apps/docs/entries.ts b/apps/docs/entries.ts
index 6103ac4d5..63d05f6bd 100644
--- a/apps/docs/entries.ts
+++ b/apps/docs/entries.ts
@@ -1,21 +1,17 @@
-import { defineEntries } from 'waku/server';
+import { defineRouter } from 'waku/router/server';
 
-export default defineEntries(
-  // getEntry
+export default defineRouter(
   async id => {
     switch (id) {
-      case 'App':
-        return import('./src/app.js') as any;
+      case 'index': {
+        const { default: AppCreator } = await import('./src/app.js');
+        return AppCreator(id);
+      }
       default:
         return null;
     }
   },
-  // getBuildConfig
   async () => {
-    return {
-      '/': {
-        elements: [['App', {}]],
-      },
-    };
+    return ['index'];
   }
 );
diff --git a/apps/docs/src/app.tsx b/apps/docs/src/app.tsx
index 5f54c19e5..e6c746f48 100644
--- a/apps/docs/src/app.tsx
+++ b/apps/docs/src/app.tsx
@@ -1,36 +1,44 @@
 /// <reference types="vite/client" />
 'use server';
+import { existsSync, readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
 import type { ReactElement } from 'react';
 import { lazy } from 'react';
 
-import { Sidebar } from './components/sidebar.js';
+import { Sidebar } from './components/sidebar/index.js';
+import { saveFile } from './server-fns.js';
 
 const Editor = lazy(() =>
   import('./components/editor.js').then(({ Editor }) => ({ default: Editor }))
 );
 
-const markdown = `---
-title: AFFiNE Developer Documentation
----
+const __dirname = fileURLToPath(new URL('.', import.meta.url));
 
-## To Shape, not to adapt
+const AppCreator = (pathname: string) =>
+  function App(): ReactElement {
+    let path = resolve(__dirname, 'pages', 'binary');
+    if (!existsSync(path)) {
+      path = resolve(__dirname, '..', '..', 'src', 'pages', 'binary');
+    }
+    const buffer = [...readFileSync(path)];
 
----
+    return (
+      <div className="flex flex-col-reverse sm:flex-row">
+        <nav className="w-full sm:w-64">
+          <Sidebar />
+        </nav>
+        <main className="flex-1 p-6 w-full sm:w-[calc(100%-16rem)]">
+          <Editor
+            workspaceId={pathname}
+            pageId="1"
+            onSave={saveFile}
+            binary={buffer}
+          />
+        </main>
+      </div>
+    );
+  };
 
-**Powered by BlockSuite**
-`;
-
-const App = (): ReactElement => {
-  return (
-    <div className="flex flex-col-reverse sm:flex-row">
-      <nav className="w-full sm:w-64">
-        <Sidebar />
-      </nav>
-      <main className="flex-1 p-6 w-full sm:w-[calc(100%-16rem)]">
-        <Editor text={markdown} />
-      </main>
-    </div>
-  );
-};
-
-export default App;
+export default AppCreator;
diff --git a/apps/docs/src/atom.ts b/apps/docs/src/atom.ts
new file mode 100644
index 000000000..4014bdc1e
--- /dev/null
+++ b/apps/docs/src/atom.ts
@@ -0,0 +1,11 @@
+import { __unstableSchemas, AffineSchemas } from '@blocksuite/blocks/models';
+import { atom } from 'jotai/vanilla';
+
+export const workspaceAtom = atom(async () => {
+  const { Workspace } = await import('@blocksuite/store');
+  return new Workspace({
+    id: 'test-workspace',
+  })
+    .register(AffineSchemas)
+    .register(__unstableSchemas);
+});
diff --git a/apps/docs/src/components/editor.tsx b/apps/docs/src/components/editor.tsx
index ac9bd96cc..a1bb47b88 100644
--- a/apps/docs/src/components/editor.tsx
+++ b/apps/docs/src/components/editor.tsx
@@ -2,54 +2,52 @@
 import '@blocksuite/editor/themes/affine.css';
 
 import { BlockSuiteEditor } from '@affine/component/block-suite-editor';
-import { ContentParser } from '@blocksuite/blocks/content-parser';
-import { __unstableSchemas, AffineSchemas } from '@blocksuite/blocks/models';
-import { assertExists, Workspace } from '@blocksuite/store';
+import type { Page } from '@blocksuite/store';
+import { useAtomValue } from 'jotai/react';
 import type { ReactElement } from 'react';
-import { useCallback } from 'react';
+import { use } from 'react';
+import { applyUpdate } from 'yjs';
 
-const workspace = new Workspace({
-  id: 'local-workspace',
-})
-  .register(AffineSchemas)
-  .register(__unstableSchemas);
-
-const page = workspace.createPage({
-  id: 'example-page',
-});
+import { workspaceAtom } from '../atom.js';
 
 export type EditorProps = {
-  text: string;
+  workspaceId: string;
+  pageId: string;
+  binary?: number[];
+  onSave: (binary: any) => Promise<void>;
 };
 
 export const Editor = (props: EditorProps): ReactElement => {
-  return (
-    <BlockSuiteEditor
-      page={page}
-      mode="page"
-      onInit={useCallback(
-        async page => {
-          const text = props.text;
-          await page.waitForLoaded();
-          const metadata = text.split('---\n')[1];
-          assertExists(metadata);
+  const workspace = useAtomValue(workspaceAtom);
+  let page = workspace.getPage('page0') as Page;
+  if (!page) {
+    page = workspace.createPage({
+      id: 'page0',
+    });
+  }
 
-          // find title
-          const title = metadata.split('title: ')[1]?.split('\n')[0];
-          const pageBlockId = page.addBlock('affine:page', {
-            title: new page.Text(title),
-          });
-          page.addBlock('affine:surface', {}, pageBlockId);
-          const noteBlockId = page.addBlock('affine:note', {}, pageBlockId);
-          const contentParser = new ContentParser(page);
-          const content = text.split('---\n').splice(2).join('---\n');
-          assertExists(content);
-          await contentParser.importMarkdown(content, noteBlockId);
-          page.awarenessStore.setReadonly(page, true);
-          page.awarenessStore.setFlag('enable_drag_handle', false);
-        },
-        [props.text]
-      )}
-    />
-  );
+  if (props.binary && !page.root) {
+    use(
+      page.waitForLoaded().then(() => {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        applyUpdate(page._ySpaceDoc, new Uint8Array(props.binary as number[]));
+      })
+    );
+    if (import.meta.env.MODE !== 'development') {
+      page.awarenessStore.setReadonly(page, true);
+    }
+  } else if (!page.root) {
+    use(
+      page.waitForLoaded().then(() => {
+        const pageBlockId = page.addBlock('affine:page', {
+          title: new page.Text(''),
+        });
+        page.addBlock('affine:surface', {}, pageBlockId);
+        const noteBlockId = page.addBlock('affine:note', {}, pageBlockId);
+        page.addBlock('affine:paragraph', {}, noteBlockId);
+      })
+    );
+  }
+  return <BlockSuiteEditor page={page} mode="page" onInit={() => {}} />;
 };
diff --git a/apps/docs/src/components/sidebar.tsx b/apps/docs/src/components/sidebar/index.tsx
similarity index 50%
rename from apps/docs/src/components/sidebar.tsx
rename to apps/docs/src/components/sidebar/index.tsx
index eb401db0b..d7c701a85 100644
--- a/apps/docs/src/components/sidebar.tsx
+++ b/apps/docs/src/components/sidebar/index.tsx
@@ -1,3 +1,15 @@
+'use server';
+
+import { lazy } from 'react';
+
+import { saveFile } from '../../server-fns.js';
+
+const SaveToLocal = lazy(() =>
+  import('./save-to-local.js').then(({ SaveToLocal }) => ({
+    default: SaveToLocal,
+  }))
+);
+
 export const Sidebar = () => {
   return (
     <div
@@ -11,6 +23,9 @@ export const Sidebar = () => {
           AFFiNE
         </div>
       </a>
+      {import.meta.env.MODE === 'development' && (
+        <SaveToLocal saveFile={saveFile} />
+      )}
     </div>
   );
 };
diff --git a/apps/docs/src/components/sidebar/save-to-local.tsx b/apps/docs/src/components/sidebar/save-to-local.tsx
new file mode 100644
index 000000000..d469a992e
--- /dev/null
+++ b/apps/docs/src/components/sidebar/save-to-local.tsx
@@ -0,0 +1,28 @@
+'use client';
+import { assertExists } from '@blocksuite/global/utils';
+import { useAtomValue } from 'jotai/react';
+import { useCallback } from 'react';
+import { encodeStateAsUpdate } from 'yjs';
+
+import { workspaceAtom } from '../../atom.js';
+
+type SaveToLocalProps = {
+  saveFile: (update: number[]) => void;
+};
+
+export const SaveToLocal = (props: SaveToLocalProps) => {
+  const workspace = useAtomValue(workspaceAtom);
+  const saveFile = props.saveFile;
+  const onSave = useCallback(() => {
+    const page = workspace.getPage('page0');
+    assertExists(page);
+    saveFile([...encodeStateAsUpdate(page.spaceDoc)]);
+  }, [saveFile, workspace]);
+  return (
+    <div>
+      <div className="flex items-center justify-center h-16 font-bold">
+        <button onClick={onSave}>Save to Local</button>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/docs/src/index.tsx b/apps/docs/src/index.tsx
index 652a0a60d..481940766 100644
--- a/apps/docs/src/index.tsx
+++ b/apps/docs/src/index.tsx
@@ -1,14 +1,14 @@
+import '@blocksuite/editor/themes/affine.css';
 import './index.css';
 
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
-import { serve } from 'waku/client';
+import { Router } from 'waku/router/client';
 
-const App = serve('App');
-const rootElement = (
+const root = createRoot(document.getElementById('root') as HTMLElement);
+
+root.render(
   <StrictMode>
-    <App />
+    <Router />
   </StrictMode>
 );
-
-createRoot(document.getElementById('root') as HTMLElement).render(rootElement);
diff --git a/apps/docs/src/pages/binary b/apps/docs/src/pages/binary
new file mode 100644
index 0000000000000000000000000000000000000000..3d63fdf2b766f0d7d29f8ffe7548bc1aee2cd079
GIT binary patch
literal 8249
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

literal 0
HcmV?d00001

diff --git a/apps/docs/src/server-fns.ts b/apps/docs/src/server-fns.ts
new file mode 100644
index 000000000..2daf3708e
--- /dev/null
+++ b/apps/docs/src/server-fns.ts
@@ -0,0 +1,10 @@
+'use server';
+import { writeFile } from 'node:fs/promises';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = fileURLToPath(new URL('.', import.meta.url));
+
+export async function saveFile(binary: any) {
+  const data = new Uint8Array(binary);
+  await writeFile(__dirname + 'pages' + '/binary', data);
+}