feat: init outline plugin & basic styles

apps/web/next.config.mjs

@@ -94,6 +94,7 @@ const nextConfig = {
     '@affine/workspace',
     '@affine/jotai',
     '@affine/copilot',
+    '@affine/outline',
     '@toeverything/hooks',
     '@toeverything/y-indexeddb',
     '@toeverything/infra',

apps/web/package.json

@@ -17,6 +17,7 @@
     "@affine/graphql": "workspace:*",
     "@affine/i18n": "workspace:*",
     "@affine/jotai": "workspace:*",
+    "@affine/outline": "workspace:*",
     "@affine/templates": "workspace:*",
     "@affine/workspace": "workspace:*",
     "@blocksuite/block-std": "0.0.0-20230708145134-cac23f63-nightly",

apps/web/src/bootstrap/index.ts

@@ -39,6 +39,10 @@ if (!environment.isServer) {
   import('@affine/bookmark-block');
 }
 
+if (!environment.isServer) {
+  import('@affine/outline');
+}
+
 // platform check
 {
   if (globalThis.platform) {

apps/web/tsconfig.json

@@ -61,6 +61,9 @@
     {
       "path": "../../plugins/copilot"
     },
+    {
+      "path": "../../plugins/outline"
+    },
 
     // Static Server
     {

plugins/outline/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@affine/outline",
+  "private": true,
+  "main": "./src/index.ts",
+  "module": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "dependencies": {
+    "@affine/component": "workspace:*",
+    "@toeverything/plugin-infra": "workspace:*",
+    "smooth-scroll-into-view-if-needed": "^2.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.14",
+    "@types/react-dom": "^18.2.6",
+    "idb": "^7.1.1",
+    "jotai": "^2.2.2",
+    "react": "18.3.0-canary-1fdacbefd-20230630"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-dom": "*"
+  },
+  "version": "0.7.0-canary.36"
+}

plugins/outline/src/blocksuite/index.css.ts

@@ -0,0 +1,51 @@
+import { style } from '@vanilla-extract/css';
+
+// a sider menu style
+export const outlineContainerStyle = style({
+  display: 'flex',
+  flexDirection: 'column',
+  height: '100%',
+  padding: '0px 4px',
+  top: '200px',
+  position: 'absolute',
+  width: '200px',
+  backgroundColor: 'var(--affine-background-color)',
+  color: 'var(--affine-text-primary-color)',
+});
+
+export const outlineHeaderStyle = style({
+  fontWeight: 'bold',
+  marginBottom: '20px',
+});
+
+export const outlineContentStyle = style({});
+
+export const outlineMenuItemStyle = style({
+  cursor: 'pointer',
+  padding: '4px',
+  display: 'flex',
+  alignItems: 'center',
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  margin: '2px 0',
+  textOverflow: 'ellipsis',
+  color: 'var(--affine-text-primary-color)',
+  ':hover': {
+    backgroundColor: 'var(--affine-hover-color)',
+  },
+  ':active': {
+    backgroundColor: 'var(--affine-hover-color)',
+  },
+  ':focus': {
+    backgroundColor: 'var(--affine-hover-color)',
+  },
+});
+
+export const outlineItemContentStyle = style({
+  display: 'inline-block',
+  opacity: 0.6,
+  maxWidth: '100%',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+});

plugins/outline/src/blocksuite/index.tsx

@@ -0,0 +1,27 @@
+import type { PluginBlockSuiteAdapter } from '@toeverything/plugin-infra/type';
+import { noop } from 'foxact/noop';
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+
+import { OutlineUI } from './ui';
+
+export default {
+  uiDecorator: editor => {
+    if (editor.parentElement) {
+      const div = document.createElement('div');
+      editor.parentElement.appendChild(div);
+      const root = createRoot(div);
+      root.render(
+        <StrictMode>
+          <OutlineUI page={editor.page} />
+        </StrictMode>
+      );
+      return () => {
+        root.unmount();
+        div.remove();
+      };
+    } else {
+      return noop;
+    }
+  },
+} satisfies Partial<PluginBlockSuiteAdapter>;

plugins/outline/src/blocksuite/ui.tsx

@@ -0,0 +1,81 @@
+import type { PageBlockModel } from '@blocksuite/blocks';
+import type { Page } from '@blocksuite/store';
+import type { FC } from 'react';
+import { useCallback } from 'react';
+import scrollIntoView from 'scroll-into-view-if-needed';
+
+import {
+  outlineContainerStyle,
+  outlineContentStyle,
+  outlineHeaderStyle,
+  outlineItemContentStyle,
+  outlineMenuItemStyle,
+} from './index.css';
+
+export type OutlineProps = {
+  page: Page;
+};
+function isHeading(str?: string) {
+  return /^h[1-6]$/.test(str ?? '');
+}
+const getOutlineStructure = (root: PageBlockModel) => {
+  const children = root.children;
+  const directoryTree: {
+    level: number;
+    title: string;
+    id: string;
+  }[] = [];
+  for (const child of children) {
+    for (const heading of child.children) {
+      if (heading.type && isHeading(heading.type)) {
+        console.log(heading + '1');
+        const headingLevel = parseInt(heading.type.charAt(1));
+        directoryTree.push({
+          level: headingLevel,
+          id: heading.id,
+          title: heading.text?.toString() ?? '',
+        });
+      }
+    }
+  }
+  return directoryTree;
+};
+
+export const OutlineUI: FC<OutlineProps> = ({ page }) => {
+  const root = page.root as PageBlockModel;
+  const tree = getOutlineStructure(root);
+  const handleNav = useCallback((id: string) => {
+    const target = document.querySelector(`[data-block-id="${id}"]`);
+    if (!target) return;
+    scrollIntoView(target, {
+      behavior: 'smooth',
+      scrollMode: 'always',
+      block: 'center',
+      inline: 'center',
+    });
+  }, []);
+  return (
+    <div className={outlineContainerStyle}>
+      <div className={outlineHeaderStyle}>Outline</div>
+      <div className={outlineContentStyle}>
+        {tree.map((item, index) => {
+          if (!item.title) return null;
+          return (
+            <div
+              onClick={() => handleNav(item.id)}
+              key={index}
+              className={outlineMenuItemStyle}
+            >
+              <span
+                className={outlineItemContentStyle}
+                style={{ marginLeft: (item.level - 1) * 10 }}
+              >
+                {item.title}
+              </span>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};

plugins/outline/src/index.ts

@@ -0,0 +1,35 @@
+import { definePlugin } from '@toeverything/plugin-infra/manager';
+import { ReleaseStage } from '@toeverything/plugin-infra/type';
+
+definePlugin(
+  {
+    id: 'com.affine.outline',
+    name: {
+      fallback: 'AFFiNE Outline',
+      i18nKey: 'com.affine.outline.name',
+    },
+    description: {
+      fallback:
+        'AFFiNE Outline will help you with best writing experience on the World.',
+    },
+    publisher: {
+      name: {
+        fallback: 'AFFiNE',
+        i18nKey: 'com.affine.org',
+      },
+      link: 'https://affine.pro',
+    },
+    stage: ReleaseStage.NIGHTLY,
+    commands: [],
+    version: '0.0.1',
+  },
+  undefined,
+  {
+    load: () => import('./blocksuite/index'),
+    hotModuleReload: onHot =>
+      import.meta.webpackHot &&
+      import.meta.webpackHot.accept('./blocksuite', () =>
+        onHot(import('./blocksuite/index'))
+      ),
+  }
+);

plugins/outline/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["./src"],
+  "compilerOptions": {
+    "noEmit": false,
+    "outDir": "lib"
+  },
+  "references": [
+    {
+      "path": "../../packages/component"
+    },
+    {
+      "path": "../../packages/plugin-infra"
+    },
+    {
+      "path": "../../packages/env"
+    }
+  ]
+}

tsconfig.json

@@ -69,6 +69,8 @@
       "@affine/graphql": ["./packages/graphql/src"],
       "@affine/copilot": ["./plugins/copilot/src"],
       "@affine/copilot/*": ["./plugins/copilot/src/*"],
+      "@affine/outline": ["./plugins/outline/src"],
+      "@affine/outline/*": ["./plugins/outline/src/*"],
       "@affine/electron/scripts/*": ["./apps/electron/scripts/*"],
       "@affine-test/kit/*": ["./tests/kit/*"],
       "@affine-test/fixtures/*": ["./tests/fixtures/*"],
@@ -120,6 +122,9 @@
     {
       "path": "./plugins/copilot"
     },
+    {
+      "path": "./plugins/outline"
+    },
 
     // Tests
     {

yarn.lock

@@ -397,6 +397,24 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@affine/outline@workspace:*, @affine/outline@workspace:plugins/outline":
+  version: 0.0.0-use.local
+  resolution: "@affine/outline@workspace:plugins/outline"
+  dependencies:
+    "@affine/component": "workspace:*"
+    "@toeverything/plugin-infra": "workspace:*"
+    "@types/react": ^18.2.14
+    "@types/react-dom": ^18.2.6
+    idb: ^7.1.1
+    jotai: ^2.2.2
+    react: 18.3.0-canary-1fdacbefd-20230630
+    smooth-scroll-into-view-if-needed: ^2.0.0
+  peerDependencies:
+    react: "*"
+    react-dom: "*"
+  languageName: unknown
+  linkType: soft
+
 "@affine/server@workspace:apps/server":
   version: 0.0.0-use.local
   resolution: "@affine/server@workspace:apps/server"
@@ -518,6 +536,7 @@ __metadata:
     "@affine/graphql": "workspace:*"
     "@affine/i18n": "workspace:*"
     "@affine/jotai": "workspace:*"
+    "@affine/outline": "workspace:*"
     "@affine/templates": "workspace:*"
     "@affine/workspace": "workspace:*"
     "@blocksuite/block-std": 0.0.0-20230708145134-cac23f63-nightly
@@ -15326,6 +15345,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"compute-scroll-into-view@npm:^3.0.2":
+  version: 3.0.3
+  resolution: "compute-scroll-into-view@npm:3.0.3"
+  checksum: 7143869648d4de8ff2cb60eb8e96a21b47948c3210d15d1bfaa7e88de722c7f83f06676b97ebff94831dde0c03e42458ecfbde466747945187ee5c7667c68395
+  languageName: node
+  linkType: hard
+
 "concat-map@npm:0.0.1":
   version: 0.0.1
   resolution: "concat-map@npm:0.0.1"
@@ -27654,6 +27680,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"scroll-into-view-if-needed@npm:^3.0.6":
+  version: 3.0.10
+  resolution: "scroll-into-view-if-needed@npm:3.0.10"
+  dependencies:
+    compute-scroll-into-view: ^3.0.2
+  checksum: eab326e527620883040e1937329bce28396ac67199098202fc785853b1576646ff1c987594f5630f78bfd84fda8486a793845c0f5c0b1ad70638c6d015578ebb
+  languageName: node
+  linkType: hard
+
 "scuid@npm:^1.1.0":
   version: 1.1.0
   resolution: "scuid@npm:1.1.0"
@@ -28117,6 +28152,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"smooth-scroll-into-view-if-needed@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "smooth-scroll-into-view-if-needed@npm:2.0.0"
+  dependencies:
+    scroll-into-view-if-needed: ^3.0.6
+  checksum: 2a96df1d7e477eca30d7649e30cec85217084ad83a2cdf08559fac58a03121e07607e6977e480468d18cebe244cea6b7b4fd86de9bb2341a10b4be4a413cbef8
+  languageName: node
+  linkType: hard
+
 "snake-case@npm:^3.0.4":
   version: 3.0.4
   resolution: "snake-case@npm:3.0.4"