feat(core): tags inline editor (#5748)

tags inline editor and some refactor

<div class='graphite__hidden'>
          <div>🎥 Video uploaded on Graphite:</div>
            <a href="https://app.graphite.dev/media/video/T2klNLEk0wxLh4NRDzhk/439da1e3-30a9-462a-b7b4-c8e7c3b5ef17.mp4">
              <img src="https://app.graphite.dev/api/v1/graphite/video/thumbnail/T2klNLEk0wxLh4NRDzhk/439da1e3-30a9-462a-b7b4-c8e7c3b5ef17.mp4">
            </a>
          </div>
<video src="https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/T2klNLEk0wxLh4NRDzhk/439da1e3-30a9-462a-b7b4-c8e7c3b5ef17.mp4">Kapture 2024-01-31 at 23.29.11.mp4</video>

fix AFF-467
fix AFF-468
fix AFF-472
fix AFF-466

packages/frontend/core/src/modules/services.ts

@@ -10,6 +10,7 @@ import { LocalStorageGlobalCache } from './infra-web/storage';
 import { CurrentPageService } from './page';
 import {
   CurrentWorkspaceService,
+  WorkspaceLegacyProperties,
   WorkspacePropertiesAdapter,
 } from './workspace';
 
@@ -19,7 +20,8 @@ export function configureBusinessServices(services: ServiceCollection) {
     .scope(WorkspaceScope)
     .add(CurrentPageService)
     .add(WorkspacePropertiesAdapter, [Workspace])
-    .add(CollectionService, [Workspace]);
+    .add(CollectionService, [Workspace])
+    .add(WorkspaceLegacyProperties, [Workspace]);
 }
 
 export function configureWebInfraServices(services: ServiceCollection) {

packages/frontend/core/src/modules/workspace/properties/index.ts

@@ -1 +1,2 @@
 export * from './adapter';
+export * from './legacy-properties';

packages/frontend/core/src/modules/workspace/properties/legacy-properties.ts

@@ -0,0 +1,81 @@
+import type { PagesPropertiesMeta, Tag } from '@blocksuite/store';
+import { LiveData } from '@toeverything/infra/livedata';
+import type { Workspace } from '@toeverything/infra/workspace';
+import { Observable } from 'rxjs';
+
+/**
+ * @deprecated use WorkspacePropertiesAdapter instead (later)
+ */
+export class WorkspaceLegacyProperties {
+  constructor(private readonly workspace: Workspace) {}
+
+  get workspaceId() {
+    return this.workspace.id;
+  }
+
+  get properties() {
+    return this.workspace.blockSuiteWorkspace.meta.properties;
+  }
+  get tagOptions() {
+    return this.properties.tags?.options ?? [];
+  }
+
+  updateProperties = (properties: PagesPropertiesMeta) => {
+    this.workspace.blockSuiteWorkspace.meta.setProperties(properties);
+  };
+
+  subscribe(cb: () => void) {
+    const disposable =
+      this.workspace.blockSuiteWorkspace.meta.pageMetasUpdated.on(cb);
+    return disposable.dispose;
+  }
+
+  properties$ = LiveData.from(
+    new Observable<PagesPropertiesMeta>(sub => {
+      return this.subscribe(() => sub.next(this.properties));
+    }),
+    this.properties
+  );
+
+  tagOptions$ = LiveData.from(
+    new Observable<Tag[]>(sub => {
+      return this.subscribe(() => sub.next(this.tagOptions));
+    }),
+    this.tagOptions
+  );
+
+  updateTagOptions = (options: Tag[]) => {
+    this.updateProperties({
+      ...this.properties,
+      tags: {
+        options,
+      },
+    });
+  };
+
+  updateTagOption = (id: string, option: Tag) => {
+    this.updateTagOptions(this.tagOptions.map(o => (o.id === id ? option : o)));
+  };
+
+  removeTagOption = (id: string) => {
+    this.workspace.blockSuiteWorkspace.doc.transact(() => {
+      this.updateTagOptions(this.tagOptions.filter(o => o.id !== id));
+      // need to remove tag from all pages
+      this.workspace.blockSuiteWorkspace.pages.forEach(page => {
+        const tags = page.meta.tags ?? [];
+        if (tags.includes(id)) {
+          this.updatePageTags(
+            page.id,
+            tags.filter(t => t !== id)
+          );
+        }
+      });
+    });
+  };
+
+  updatePageTags = (pageId: string, tags: string[]) => {
+    this.workspace.blockSuiteWorkspace.setPageMeta(pageId, {
+      tags,
+    });
+  };
+}