feat(docs-mention-ui): support doc mention

examples/src/sheets/main.ts

@@ -14,12 +14,12 @@
  * limitations under the License.
  */
 
-import type { Nullable } from '@univerjs/core';
 import type { IUniverRPCMainThreadConfig } from '@univerjs/rpc';
 import { FUniver, LocaleType, LogLevel, Univer, UniverInstanceType, UserManagerService } from '@univerjs/core';
 import { UniverDebuggerPlugin } from '@univerjs/debugger';
 import { defaultTheme } from '@univerjs/design';
 import { UniverDocsPlugin } from '@univerjs/docs';
+import { UniverDocsMentionUIPlugin } from '@univerjs/docs-mention-ui';
 import { UniverDocsUIPlugin } from '@univerjs/docs-ui';
 import { UniverFormulaEnginePlugin } from '@univerjs/engine-formula';
 import { UniverRenderEnginePlugin } from '@univerjs/engine-render';
@@ -39,7 +39,7 @@ import { UniverSheetsThreadCommentPlugin } from '@univerjs/sheets-thread-comment
 import { UniverSheetsThreadCommentUIPlugin } from '@univerjs/sheets-thread-comment-ui';
 import { UniverSheetsUIPlugin } from '@univerjs/sheets-ui';
 import { UniverSheetsZenEditorPlugin } from '@univerjs/sheets-zen-editor';
-import { IThreadCommentMentionDataService, type IThreadCommentMentionDataSource, UniverThreadCommentUIPlugin } from '@univerjs/thread-comment-ui';
+import { UniverThreadCommentUIPlugin } from '@univerjs/thread-comment-ui';
 import { UniverUIPlugin } from '@univerjs/ui';
 import { enUS, faIR, ruRU, viVN, zhCN, zhTW } from '../locales';
 
@@ -69,28 +69,6 @@ export const mockUser = {
     canBindAnonymous: false,
 };
 
-class CustomMentionDataService implements IThreadCommentMentionDataService {
-    dataSource: Nullable<IThreadCommentMentionDataSource>;
-    trigger: string = '@';
-
-    async getMentions() {
-        return [
-            {
-                id: mockUser.userID,
-                label: mockUser.name,
-                type: 'user',
-                icon: mockUser.avatar,
-            },
-            {
-                id: '2',
-                label: 'User2',
-                type: 'user',
-                icon: mockUser.avatar,
-            },
-        ];
-    }
-}
-
 // univer
 const univer = new Univer({
     theme: defaultTheme,
@@ -114,6 +92,7 @@ univer.registerPlugin(UniverDocsPlugin);
 univer.registerPlugin(UniverRenderEnginePlugin);
 univer.registerPlugin(UniverUIPlugin, { container: 'app' });
 univer.registerPlugin(UniverDocsUIPlugin);
+univer.registerPlugin(UniverDocsMentionUIPlugin);
 
 univer.registerPlugin(UniverSheetsPlugin, { notExecuteFormula: true });
 univer.registerPlugin(UniverSheetsUIPlugin);
@@ -128,9 +107,7 @@ univer.registerPlugin(UniverSheetsConditionalFormattingPlugin);
 univer.registerPlugin(UniverSheetsFilterPlugin);
 univer.registerPlugin(UniverSheetsSortPlugin);
 univer.registerPlugin(UniverSheetsHyperLinkPlugin);
-univer.registerPlugin(UniverThreadCommentUIPlugin, {
-    overrides: [[IThreadCommentMentionDataService, { useClass: CustomMentionDataService }]],
-});
+univer.registerPlugin(UniverThreadCommentUIPlugin);
 univer.registerPlugin(UniverSheetsThreadCommentPlugin);
 univer.registerPlugin(UniverSheetsThreadCommentUIPlugin);
 

examples/src/uni/main.ts

@@ -14,9 +14,7 @@
  * limitations under the License.
  */
 
-import type { Nullable } from '@univerjs/core';
 import type { IUniverRPCMainThreadConfig } from '@univerjs/rpc';
-import type { IThreadCommentMentionDataSource } from '@univerjs/thread-comment-ui';
 import { FUniver, Injector, LocaleType, LogLevel, Univer, UniverInstanceType } from '@univerjs/core';
 import { UniverDebuggerPlugin } from '@univerjs/debugger';
 import { defaultTheme } from '@univerjs/design';
@@ -41,7 +39,7 @@ import { UniverSheetsThreadCommentPlugin } from '@univerjs/sheets-thread-comment
 import { SheetUIController, UniverSheetsUIPlugin } from '@univerjs/sheets-ui';
 import { UniverSlidesPlugin } from '@univerjs/slides';
 import { SlidesUIController, UniverSlidesUIPlugin } from '@univerjs/slides-ui';
-import { IThreadCommentMentionDataService, UniverThreadCommentUIPlugin } from '@univerjs/thread-comment-ui';
+import { UniverThreadCommentUIPlugin } from '@univerjs/thread-comment-ui';
 import { UniDocsUIController } from '@univerjs/uni-docs-ui';
 import { UniverDocUniFormulaPlugin } from '@univerjs/uni-formula';
 import { UniSheetsUIController } from '@univerjs/uni-sheets-ui';
@@ -67,36 +65,6 @@ registerSheetPlugins(univer);
 registerSlidePlugins(univer);
 registerUniPlugins(univer);
 
-const mockUser = {
-    userID: 'Owner_qxVnhPbQ',
-    name: 'Owner',
-    avatar: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAInSURBVHgBtZU9TxtBEIbfWRzFSIdkikhBSqRQkJqkCKTCFkqVInSUSaT0wC8w/gXxD4gU2nRJkXQWhAZowDUUWKIwEgWWbEEB3mVmx3dn4DA2nB/ppNuPeWd29mMIPXDr+RxwtgRHeW6+guNPRxogqnL7Dwz9psJ27S4NShaeZTH3kwXy6I81dlRKcmRui88swdq9AcSFL7Buz1Vmlns64MiLsCjzwnIYHLH57tbfFbs7KRaXyEU8FVZofqccOfA5l7Q8LPIkGrwnb2RPNEXWFVMUF3L+kDCk0btDDAMzOm5YfAHDwp4tG74wnzAsiOYMnJ3GoDybA7IT98/jm5+JNnfiIzAS6LlqHQBN/i6b2t/cV1Hh6BfwYlHnHP4AXi5q/8kmMMpOs8+BixZw/Fd6xUEHEbnkgclvQP2fGp7uShRKnQ3G32rkjV1th8JhIGG7tR/JyjGteSOZELwGMmNqIIigRCLRh2OZIE6BjItdd7pCW6Uhm1zzkUtungSxwEUzNpQ+GQumtH1ej1MqgmNT6vwmhCq5yuwq56EYTbgeQUz3yvrpV1b4ok3nYJ+eYhgYmjRUqErx2EDq0Fr8FhG++iqVGqxlUJI/70Ar0UgJaWHj6hYVHJrfKssAHot1JfqwE9WVWzXZVd5z2Ws/4PnmtEjkXeKJDvxUecLbWOXH/DP6QQ4J72NS0adedp1aseBfXP8odlZFfPvBF7SN/8hky1TYuPOAXAEipMx15u5ToAAAAABJRU5ErkJggg==',
-    anonymous: false,
-    canBindAnonymous: false,
-};
-
-class CustomMentionDataService implements IThreadCommentMentionDataService {
-    dataSource: Nullable<IThreadCommentMentionDataSource>;
-    trigger: string = '@';
-
-    async getMentions() {
-        return [
-            {
-                id: mockUser.userID,
-                label: mockUser.name,
-                type: 'user',
-                icon: mockUser.avatar,
-            },
-            {
-                id: '2',
-                label: 'User2',
-                type: 'user',
-                icon: mockUser.avatar,
-            },
-        ];
-    }
-}
-
 // create univer instances
 univer.createUnit(UniverInstanceType.UNIVER_SHEET, DEFAULT_WORKBOOK_DATA_DEMO);
 univer.createUnit(UniverInstanceType.UNIVER_DOC, DEFAULT_DOCUMENT_DATA_EN);
@@ -149,9 +117,7 @@ function registerBasicPlugins(univer: Univer) {
     univer.registerPlugin(UniverRPCMainThreadPlugin, {
         workerURL: new Worker(new URL('./worker.js', import.meta.url), { type: 'module' }),
     } as IUniverRPCMainThreadConfig);
-    univer.registerPlugin(UniverThreadCommentUIPlugin, {
-        overrides: [[IThreadCommentMentionDataService, { useClass: CustomMentionDataService }]],
-    });
+    univer.registerPlugin(UniverThreadCommentUIPlugin);
 
     univer.registerPlugin(UniverDocsDrawingUIPlugin);
 }

packages/core/src/index.ts

@@ -72,6 +72,8 @@ export { getCustomDecorationSlice, getCustomRangeSlice, normalizeBody } from './
 export { EventState, EventSubject, fromEventSubject, type IEventObserver } from './observer/observable';
 export { AuthzIoLocalService } from './services/authz-io/authz-io-local.service';
 export { IAuthzIoService } from './services/authz-io/type';
+export { MentionIOLocalService } from './services/mention-io/mention-io-local.service';
+export { type IListMentionParam, type IListMentionResponse, IMentionIOService, type ITypeMentionList } from './services/mention-io/type';
 export {
     type CommandListener,
     CommandService,

packages/core/src/services/mention-io/mention-io-local.service.ts

@@ -0,0 +1,49 @@
+/**
+ * Copyright 2023-present DreamNum Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { IListMentionParam, IListMentionResponse, IMentionIOService } from './type';
+import { Inject } from '@wendellhu/redi';
+import { MentionType } from '../../types/enum';
+import { UserManagerService } from '../user-manager/user-manager.service';
+
+export class MentionIOLocalService implements IMentionIOService {
+    constructor(
+        @Inject(UserManagerService) private _userManagerService: UserManagerService
+    ) {}
+
+    async list(params: IListMentionParam): Promise<IListMentionResponse> {
+        return {
+            list: [{
+                type: MentionType.PERSON,
+                mentions: [
+                    {
+                        objectType: MentionType.PERSON,
+                        objectId: this._userManagerService.getCurrentUser().userID,
+                        label: this._userManagerService.getCurrentUser().name,
+                        metadata: {
+                            icon: this._userManagerService.getCurrentUser().avatar,
+                        },
+                    },
+                ],
+                metadata: {},
+                title: 'PEOPLE',
+            }],
+            page: params.page,
+            size: params.size,
+            total: 1,
+        };
+    }
+}

packages/core/src/services/mention-io/type.ts

@@ -0,0 +1,47 @@
+/**
+ * Copyright 2023-present DreamNum Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { MentionType } from '../../types/enum';
+import type { IMention } from '../../types/interfaces';
+import { createIdentifier } from '@wendellhu/redi';
+
+export interface IListMentionParam {
+    search?: string;
+    type?: MentionType;
+    page?: number;
+    size?: number;
+    unitId?: string;
+}
+
+export interface ITypeMentionList {
+    mentions: IMention[];
+    type: MentionType;
+    metadata: Record<string, string>;
+    title: string;
+}
+
+export interface IListMentionResponse {
+    list: ITypeMentionList[];
+    page?: number;
+    size?: number;
+    total?: number;
+}
+
+export interface IMentionIOService {
+    list (params: IListMentionParam): Promise<IListMentionResponse>;
+}
+
+export const IMentionIOService = createIdentifier<IMentionIOService>('univer.service.mention-io');

packages/core/src/types/enum/index.ts

@@ -26,6 +26,7 @@ export * from './direction';
 export * from './format-type';
 export * from './interpolation-point-type';
 export * from './locale-type';
+export * from './mention-type';
 export * from './protection-type';
 export * from './prst-geom-type';
 export * from './relative-date';

packages/docs-mention-ui/src/types/enums/mention-type.ts → packages/core/src/types/enum/mention-type.ts

@@ -16,4 +16,8 @@
 
 export enum MentionType {
     PERSON,
+    FILE,
+    DATE,
+    LOCATION,
+    EVENT,
 }

packages/core/src/types/interfaces/i-document-data.ts

@@ -17,6 +17,7 @@
 import type { IAbsoluteTransform, ISize } from '../../shared/shape';
 import type { Nullable } from '../../shared/types';
 import type { BooleanNumber, CellValueType, HorizontalAlign, LocaleType, TextDirection, VerticalAlign, WrapStrategy } from '../enum';
+import type { IMention } from './i-mention';
 import type { IColorStyle, IStyleBase } from './i-style-data';
 
 // Attention: all dimensional units, unless otherwise stated, refer to pt，1 pt = 1 / 72 in
@@ -360,6 +361,8 @@ export interface ICustomRange<T extends Record<string, any> = Record<string, any
 
 export type IHyperLinkCustomRange = ICustomRange<{ url: string }>;
 
+export type IMentionCustomRange = ICustomRange<IMention>;
+
 export enum CustomRangeType {
     HYPERLINK,
     FIELD, // 17.16 Fields and Hyperlinks

packages/docs-mention-ui/src/types/interfaces/i-mention.ts → packages/core/src/types/interfaces/i-mention.ts

@@ -14,16 +14,15 @@
  * limitations under the License.
  */
 
-import type { MentionType } from '../enums/mention-type';
+import type { MentionType } from '../enum/mention-type';
 
 export interface IDocMention extends IMention {
     id: string;
 }
 
 export interface IMention {
-    // mention payload
     objectType: MentionType;
     objectId: string;
     label: string;
-    extra?: Record<string, any>;
+    metadata?: Record<string, string | number | boolean | undefined>;
 }

packages/core/src/types/interfaces/index.ts

@@ -17,6 +17,7 @@
 export * from './i-document-data';
 export * from './i-document-data-interceptor';
 export * from './i-image-properties';
+export * from './i-mention';
 export * from './i-need-check-disposable';
 export * from './i-placeholder';
 export * from './i-shape-properties';

packages/core/src/univer.ts

@@ -40,6 +40,8 @@ import { LifecycleStages } from './services/lifecycle/lifecycle';
 import { LifecycleService } from './services/lifecycle/lifecycle.service';
 import { LocaleService } from './services/locale/locale.service';
 import { DesktopLogService, ILogService } from './services/log/log.service';
+import { MentionIOLocalService } from './services/mention-io/mention-io-local.service';
+import { IMentionIOService } from './services/mention-io/type';
 import { PermissionService } from './services/permission/permission.service';
 import { IPermissionService } from './services/permission/type';
 import { PluginService } from './services/plugin/plugin.service';
@@ -194,6 +196,7 @@ function createUniverInjector(parentInjector?: Injector, override?: DependencyOv
         [IResourceManagerService, { useClass: ResourceManagerService, lazy: true }],
         [IResourceLoaderService, { useClass: ResourceLoaderService, lazy: true }],
         [IAuthzIoService, { useClass: AuthzIoLocalService, lazy: true }],
+        [IMentionIOService, { useClass: MentionIOLocalService, lazy: true }],
     ], override);
 
     const injector = parentInjector ? parentInjector.createChild(dependencies) : new Injector(dependencies);

packages/docs-mention-ui/src/commands/commands/doc-mention.command.ts

@@ -14,8 +14,7 @@
  * limitations under the License.
  */
 
-import type { ICommand, IDocumentBody } from '@univerjs/core';
-import type { IDocMention } from '../../types/interfaces/i-mention';
+import type { ICommand, IDocMention, IDocumentBody } from '@univerjs/core';
 import { CommandType, CustomRangeType, ICommandService } from '@univerjs/core';
 import { deleteCustomRangeFactory, DocSelectionManagerService, replaceSelectionFactory } from '@univerjs/docs';
 
@@ -41,8 +40,8 @@ export const AddDocMentionCommand: ICommand<IAddDocMentionCommandParams> = {
             return false;
         }
 
-        const { extra, ...mentionConfig } = mention;
-        const dataStream = ` @${mention.label} `;
+        const { metadata, ...mentionConfig } = mention;
+        const dataStream = `@${mention.label}`;
         const body: IDocumentBody = {
             dataStream,
             customRanges: [{
@@ -53,7 +52,7 @@ export const AddDocMentionCommand: ICommand<IAddDocMentionCommandParams> = {
                 wholeEntity: true,
                 properties: {
                     ...mentionConfig,
-                    ...extra,
+                    ...metadata,
                 },
             }],
         };

packages/docs-mention-ui/src/controllers/doc-mention-trigger.controller.ts

@@ -41,10 +41,12 @@ export class DocMentionTriggerController extends Disposable {
                     const params = commandInfo.params as IInsertCommandParams;
                     const activeRange = this._textSelectionManagerService.getActiveTextRange();
                     if (params.body.dataStream === '@' && activeRange && !Tools.isDefine(this._docMentionService.editing)) {
-                        this._commandService.executeCommand(ShowMentionEditPopupOperation.id, {
-                            startIndex: activeRange.startOffset - 1,
-                            unitId: params.unitId,
-                        });
+                        setTimeout(() => {
+                            this._commandService.executeCommand(ShowMentionEditPopupOperation.id, {
+                                startIndex: activeRange.startOffset - 1,
+                                unitId: params.unitId,
+                            });
+                        }, 100);
                     }
                 }
 

packages/docs-mention-ui/src/services/doc-mention-popup.service.ts

@@ -28,7 +28,7 @@ export class DocMentionPopupService extends Disposable {
         return this._infoPopup$.value;
     }
 
-    private readonly _editPopup$ = new BehaviorSubject<Nullable<{ anchor: number; popup: IDisposable }>>(undefined);
+    private readonly _editPopup$ = new BehaviorSubject<Nullable<{ anchor: number; popup: IDisposable; unitId: string }>>(undefined);
     readonly editPopup$ = this._editPopup$.asObservable();
     get editPopup() {
         return this._editPopup$.value;
@@ -66,7 +66,7 @@ export class DocMentionPopupService extends Disposable {
             },
             unitId
         );
-        this._editPopup$.next({ popup: dispose, anchor: index });
+        this._editPopup$.next({ popup: dispose, anchor: index, unitId });
     }
 
     closeEditPopup() {