refactor(infra): directory structure (#4615)

packages/plugins/outline/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@affine/outline-plugin",
+  "type": "module",
+  "private": true,
+  "description": "Outline plugin",
+  "version": "0.10.0-canary.1",
+  "scripts": {
+    "dev": "af dev",
+    "build": "af build"
+  },
+  "affinePlugin": {
+    "release": "development",
+    "entry": {
+      "core": "./src/index.ts"
+    }
+  },
+  "dependencies": {
+    "@affine/component": "workspace:*",
+    "@affine/sdk": "workspace:*",
+    "@blocksuite/icons": "2.1.34",
+    "@toeverything/components": "^0.0.45"
+  },
+  "devDependencies": {
+    "@affine/plugin-cli": "workspace:*",
+    "jotai": "^2.4.3",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  }
+}

packages/plugins/outline/project.json

@@ -0,0 +1,26 @@
+{
+  "name": "@affine/outline-plugin",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "namedInputs": {
+    "default": [
+      "{projectRoot}/**/*",
+      "{workspaceRoot}/tools/plugin-cli/src/**/*",
+      "sharedGlobals"
+    ]
+  },
+  "targets": {
+    "build": {
+      "executor": "nx:run-script",
+      "options": {
+        "script": "build"
+      },
+      "dependsOn": ["^build"],
+      "inputs": ["default"],
+      "outputs": [
+        "{workspaceRoot}/packages/frontend/core/public/plugins/outline",
+        "{workspaceRoot}/packages/frontend/electron/dist/plugins/outline"
+      ]
+    }
+  },
+  "tags": ["plugin"]
+}

packages/plugins/outline/src/app.tsx

@@ -0,0 +1,107 @@
+import {
+  currentPageIdAtom,
+  currentWorkspaceAtom,
+  deleteLayoutAtom,
+  pushLayoutAtom,
+} from '@affine/sdk/entry';
+import { TOCNotesPanel } from '@blocksuite/blocks';
+import { assertExists } from '@blocksuite/global/utils';
+import { RightSidebarIcon } from '@blocksuite/icons';
+import { IconButton } from '@toeverything/components/button';
+import { Tooltip } from '@toeverything/components/tooltip';
+import { useAtomValue, useSetAtom } from 'jotai';
+import type { ComponentType, PropsWithChildren } from 'react';
+import { useCallback, useRef, useState } from 'react';
+import { createRoot } from 'react-dom/client';
+
+const Outline = () => {
+  const tocPanelRef = useRef<TOCNotesPanel | null>(null);
+  const currentPageId = useAtomValue(currentPageIdAtom);
+  assertExists(currentPageId, 'current page id');
+  const currentWorkspace = useAtomValue(currentWorkspaceAtom);
+  const currentPage = currentWorkspace.getPage(currentPageId);
+  assertExists(currentPage, 'current page');
+
+  if (!tocPanelRef.current) {
+    tocPanelRef.current = new TOCNotesPanel();
+  }
+
+  if (currentPage !== tocPanelRef.current?.page) {
+    (tocPanelRef.current as TOCNotesPanel).page = currentPage;
+  }
+
+  return (
+    <div
+      className={`outline-wrapper`}
+      style={{
+        height: '100%',
+        borderLeft: `1px solid var(--affine-border-color)`,
+      }}
+      ref={useCallback((container: HTMLDivElement | null) => {
+        if (container) {
+          assertExists(tocPanelRef.current);
+          container.appendChild(tocPanelRef.current);
+        }
+      }, [])}
+    />
+  );
+};
+
+export const HeaderItem = ({
+  Provider,
+}: {
+  Provider: ComponentType<PropsWithChildren>;
+}) => {
+  const [open, setOpen] = useState(false);
+  const pushLayout = useSetAtom(pushLayoutAtom);
+  const deleteLayout = useSetAtom(deleteLayoutAtom);
+  const [container, setContainer] = useState<HTMLButtonElement | null>(null);
+
+  return (
+    <Tooltip
+      content={`${open ? 'Collapse' : 'Expand'} table of contents`}
+      portalOptions={{
+        container,
+      }}
+    >
+      <IconButton
+        size="large"
+        ref={setContainer}
+        style={{
+          width: '32px',
+          fontSize: '24px',
+        }}
+        onClick={useCallback(() => {
+          if (!open) {
+            setOpen(true);
+            pushLayout(
+              '@affine/outline-plugin',
+              div => {
+                const root = createRoot(div);
+
+                div.style.height = '100%';
+
+                root.render(
+                  <Provider>
+                    <Outline />
+                  </Provider>
+                );
+                return () => {
+                  root.unmount();
+                };
+              },
+              {
+                maxWidth: [undefined, 300],
+              }
+            );
+          } else {
+            setOpen(false);
+            deleteLayout('@affine/outline-plugin');
+          }
+        }, [Provider, deleteLayout, open, pushLayout])}
+      >
+        <RightSidebarIcon />
+      </IconButton>
+    </Tooltip>
+  );
+};

packages/plugins/outline/src/atom.ts

@@ -0,0 +1,5 @@
+import { atom } from 'jotai';
+
+export const blocksuiteRootAtom = atom(() =>
+  document.querySelector('block-suite-root')
+);

packages/plugins/outline/src/index.ts

@@ -0,0 +1,41 @@
+import type { PluginContext } from '@affine/sdk/entry';
+import { registerTOCComponents } from '@blocksuite/blocks';
+import { createElement } from 'react';
+import { createRoot } from 'react-dom/client';
+
+import { HeaderItem } from './app';
+
+export const entry = (context: PluginContext) => {
+  console.log('register outline');
+
+  context.register('headerItem', div => {
+    registerTOCComponents(components => {
+      for (const compName in components) {
+        if (window.customElements.get(compName)) continue;
+
+        window.customElements.define(
+          compName,
+          components[compName as keyof typeof components]
+        );
+      }
+    });
+
+    div.style.height = '100%';
+
+    const root = createRoot(div);
+    root.render(
+      createElement(
+        context.utils.PluginProvider,
+        {},
+        createElement(HeaderItem, {
+          Provider: context.utils.PluginProvider,
+        })
+      )
+    );
+    return () => {
+      root.unmount();
+    };
+  });
+
+  return () => {};
+};

packages/plugins/outline/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "extends": "../../../tsconfig.json",
+  "include": ["./src"],
+  "compilerOptions": {
+    "noEmit": false,
+    "outDir": "lib",
+    "jsx": "preserve"
+  },
+  "references": [
+    {
+      "path": "../../common/sdk"
+    },
+    {
+      "path": "../../frontend/component"
+    }
+  ]
+}