feat: init @toeverything/hooks package (#1788)

packages/hooks/src/__tests__/index.spec.ts

@@ -0,0 +1,62 @@
+/**
+ * @vitest-environment happy-dom
+ */
+import 'fake-indexeddb/auto';
+
+import { __unstableSchemas, AffineSchemas } from '@blocksuite/blocks/models';
+import type { Page } from '@blocksuite/store';
+import { assertExists } from '@blocksuite/store';
+import { Workspace as BlockSuiteWorkspace } from '@blocksuite/store';
+import { renderHook } from '@testing-library/react';
+import { useBlockSuiteWorkspacePageTitle } from '@toeverything/hooks/use-blocksuite-workspace-page-title';
+import { describe, expect, test } from 'vitest';
+import { beforeEach } from 'vitest';
+
+import { useBlockSuiteWorkspaceName } from '../use-blocksuite-workspace-name';
+
+let blockSuiteWorkspace: BlockSuiteWorkspace;
+
+beforeEach(async () => {
+  blockSuiteWorkspace = new BlockSuiteWorkspace({ id: 'test' })
+    .register(AffineSchemas)
+    .register(__unstableSchemas);
+  const initPage = (page: Page) => {
+    expect(page).not.toBeNull();
+    assertExists(page);
+    const pageBlockId = page.addBlock('affine:page', {
+      title: new page.Text(''),
+    });
+    const frameId = page.addBlock('affine:frame', {}, pageBlockId);
+    page.addBlock('affine:paragraph', {}, frameId);
+  };
+  initPage(blockSuiteWorkspace.createPage('page0'));
+  initPage(blockSuiteWorkspace.createPage('page1'));
+  initPage(blockSuiteWorkspace.createPage('page2'));
+});
+
+describe('useBlockSuiteWorkspaceName', () => {
+  test('basic', async () => {
+    blockSuiteWorkspace.meta.setName('test 1');
+    const workspaceNameHook = renderHook(() =>
+      useBlockSuiteWorkspaceName(blockSuiteWorkspace)
+    );
+    expect(workspaceNameHook.result.current[0]).toBe('test 1');
+    blockSuiteWorkspace.meta.setName('test 2');
+    workspaceNameHook.rerender();
+    expect(workspaceNameHook.result.current[0]).toBe('test 2');
+    workspaceNameHook.result.current[1]('test 3');
+    expect(blockSuiteWorkspace.meta.name).toBe('test 3');
+  });
+});
+
+describe('useBlockSuiteWorkspacePageTitle', () => {
+  test('basic', async () => {
+    const pageTitleHook = renderHook(() =>
+      useBlockSuiteWorkspacePageTitle(blockSuiteWorkspace, 'page0')
+    );
+    expect(pageTitleHook.result.current).toBe('Untitled');
+    blockSuiteWorkspace.setPageMeta('page0', { title: '1' });
+    pageTitleHook.rerender();
+    expect(pageTitleHook.result.current).toBe('1');
+  });
+});

packages/hooks/src/use-blocksuite-workspace-name.ts

@@ -0,0 +1,32 @@
+import { UNTITLED_WORKSPACE_NAME } from '@affine/env';
+import type { Workspace } from '@blocksuite/store';
+import { assertExists } from '@blocksuite/store';
+import { useCallback, useEffect, useState } from 'react';
+
+export function useBlockSuiteWorkspaceName(
+  blockSuiteWorkspace: Workspace | null
+) {
+  const [name, set] = useState(
+    () => blockSuiteWorkspace?.meta.name ?? UNTITLED_WORKSPACE_NAME
+  );
+  useEffect(() => {
+    if (blockSuiteWorkspace) {
+      set(blockSuiteWorkspace.meta.name ?? '');
+      const dispose = blockSuiteWorkspace.meta.commonFieldsUpdated.on(() => {
+        set(blockSuiteWorkspace.meta.name ?? '');
+      });
+      return () => {
+        dispose.dispose();
+      };
+    }
+  }, [blockSuiteWorkspace]);
+  const setName = useCallback(
+    (name: string) => {
+      assertExists(blockSuiteWorkspace);
+      blockSuiteWorkspace.meta.setName(name);
+      set(name);
+    },
+    [blockSuiteWorkspace]
+  );
+  return [name, setName] as const;
+}

packages/hooks/src/use-blocksuite-workspace-page-title.ts

@@ -0,0 +1,25 @@
+import type { Workspace } from '@blocksuite/store';
+import { assertExists } from '@blocksuite/store';
+import { useEffect, useState } from 'react';
+
+export function useBlockSuiteWorkspacePageTitle(
+  blockSuiteWorkspace: Workspace,
+  pageId: string
+) {
+  const page = blockSuiteWorkspace.getPage(pageId);
+  const [title, setTitle] = useState(() => page?.meta.title || 'AFFiNE');
+  useEffect(() => {
+    const page = blockSuiteWorkspace.getPage(pageId);
+    setTitle(page?.meta.title || 'Untitled');
+    const dispose = blockSuiteWorkspace.meta.pageMetasUpdated.on(() => {
+      const page = blockSuiteWorkspace.getPage(pageId);
+      assertExists(page);
+      setTitle(page?.meta.title || 'Untitled');
+    });
+    return () => {
+      dispose.dispose();
+    };
+  }, [blockSuiteWorkspace, pageId]);
+
+  return title;
+}