feat: align document read-only menu behavior

Author: DR-Univer

packages/docs-ui/src/menu/menu.ts

@@ -27,6 +27,7 @@ import {
     DocumentFlavor,
     HorizontalAlign,
     ICommandService,
+    IPermissionService,
     IUniverInstanceService,
     NAMED_STYLE_MAP,
     NamedStyleType,
@@ -39,10 +40,12 @@ import {
 import {
     DocSelectionManagerService,
     DocSkeletonManagerService,
+    getDocumentPermissionValue,
     RichTextEditingMutation,
     SetTextSelectionsOperation,
 } from '@univerjs/docs';
 import { DocumentEditArea, IRenderManagerService } from '@univerjs/engine-render';
+import { UnitAction } from '@univerjs/protocol';
 import {
     COLOR_PICKER_COMPONENT,
     COMMON_LABEL_COMPONENT,
@@ -58,7 +61,7 @@ import {
     SYMBOL_PICKER_COMPONENT,
 } from '@univerjs/ui';
 
-import { combineLatest, distinctUntilChanged, map, Observable, shareReplay } from 'rxjs';
+import { combineLatest, distinctUntilChanged, map, Observable, shareReplay, startWith } from 'rxjs';
 import { OpenHeaderFooterPanelCommand } from '../commands/commands/doc-header-footer.command';
 import { HorizontalLineCommand } from '../commands/commands/doc-horizontal-line.command';
 import {
@@ -327,8 +330,9 @@ function getTableDisabledObservable(accessor: IAccessor): Observable<boolean> {
 export function disableMenuWhenNoDocRange(accessor: IAccessor): Observable<boolean> {
     const docSelectionManagerService = accessor.get(DocSelectionManagerService);
     const univerInstanceService = accessor.get(IUniverInstanceService);
+    const permissionService = accessor.get(IPermissionService);
 
-    return new Observable((subscriber) => {
+    const selectionDisabled$ = new Observable<boolean>((subscriber) => {
         const subscription = docSelectionManagerService.textSelection$.subscribe((selection) => {
             if (selection == null) {
                 subscriber.next(true);
@@ -356,6 +360,20 @@ export function disableMenuWhenNoDocRange(accessor: IAccessor): Observable<boole
 
         return () => subscription.unsubscribe();
     });
+
+    const permissionDisabled$ = combineLatest([
+        univerInstanceService.getCurrentTypeOfUnit$<DocumentDataModel>(UniverInstanceType.UNIVER_DOC),
+        permissionService.permissionPointUpdate$.pipe(startWith(undefined)),
+    ]).pipe(map(([document]) => !document || !getDocumentPermissionValue(
+        permissionService,
+        document.getUnitId(),
+        document.getUnitId(),
+        UnitAction.Edit
+    )));
+
+    return combineLatest([selectionDisabled$, permissionDisabled$]).pipe(
+        map(([selectionDisabled, permissionDisabled]) => selectionDisabled || permissionDisabled)
+    );
 }
 
 export const DOC_INSERT_EMOJI_MENU_ID = 'doc.menu.insert-emoji';

packages/docs-ui/src/services/__tests__/float-menu.service.spec.ts

@@ -30,12 +30,15 @@ import {
     IContextService,
     ILogService,
     Injector,
+    IPermissionService,
     IUniverInstanceService,
+    PermissionService,
     RANGE_DIRECTION,
     UniverInstanceService,
 } from '@univerjs/core';
-import { DocSelectionManagerService, SetTextSelectionsOperation } from '@univerjs/docs';
+import { DocSelectionManagerService, setDocumentPermissionValue, SetTextSelectionsOperation } from '@univerjs/docs';
 import { NORMAL_TEXT_SELECTION_PLUGIN_STYLE } from '@univerjs/engine-render';
+import { UnitAction } from '@univerjs/protocol';
 import { ComponentManager } from '@univerjs/ui';
 import { Subject } from 'rxjs';
 import { describe, expect, it } from 'vitest';
@@ -93,6 +96,7 @@ function createActiveFloatMenuHarness(
     runtimeFocusCoordinator?: EmbedRuntimeFocusCoordinator
 ) {
     const injector = new Injector();
+    injector.add([IPermissionService, { useClass: PermissionService }]);
     injector.add([ILogService, { useClass: DesktopLogService }]);
     injector.add([IConfigService, { useClass: ConfigService }]);
     injector.add([IContextService, { useClass: ContextService }]);
@@ -125,6 +129,7 @@ function createActiveFloatMenuHarness(
 describe('DocFloatMenuService', () => {
     it('does not register or show a floating toolbar inside internal document editors', () => {
         const injector = new Injector();
+        injector.add([IPermissionService, { useClass: PermissionService }]);
         injector.add([ILogService, { useClass: DesktopLogService }]);
         injector.add([IConfigService, { useClass: ConfigService }]);
         injector.add([IContextService, { useClass: ContextService }]);
@@ -143,6 +148,7 @@ describe('DocFloatMenuService', () => {
 
     it('shows one floating toolbar for a text selection and hides it when selection restarts', () => {
         const injector = new Injector();
+        injector.add([IPermissionService, { useClass: PermissionService }]);
         injector.add([ILogService, { useClass: DesktopLogService }]);
         injector.add([IConfigService, { useClass: ConfigService }]);
         injector.add([IContextService, { useClass: ContextService }]);
@@ -207,8 +213,47 @@ describe('DocFloatMenuService', () => {
         expect(popupService.disposedCount).toBe(1);
     });
 
+    it('hides the floating toolbar when document edit permission is revoked', () => {
+        const unitId = 'doc-read-only-float-menu';
+        const harness = createActiveFloatMenuHarness(unitId, {
+            dataStream: 'Hello world\r\n',
+            paragraphs: [{ paragraphId: 'para_docs_ui_read_only_float_menu', startIndex: 11 }],
+            sectionBreaks: [],
+            customRanges: [],
+            tables: [],
+            textRuns: [],
+        });
+        const selection = {
+            textRanges: [{ startOffset: 0, endOffset: 5, collapsed: false }],
+            rectRanges: [],
+            segmentId: '',
+            segmentPage: -1,
+            style: NORMAL_TEXT_SELECTION_PLUGIN_STYLE,
+            isEditing: true,
+        };
+        harness.selectionManager.__replaceTextRangesWithNoRefresh(selection, { unitId, subUnitId: unitId });
+        expect(harness.service.floatMenu).toMatchObject({ start: 0, end: 5 });
+
+        setDocumentPermissionValue(
+            harness.injector.get(IPermissionService),
+            unitId,
+            unitId,
+            UnitAction.Edit,
+            false
+        );
+
+        expect(harness.service.floatMenu).toBeNull();
+        expect(harness.popupService.disposedCount).toBe(1);
+        harness.selectionManager.__replaceTextRangesWithNoRefresh({
+            ...selection,
+            textRanges: [{ startOffset: 6, endOffset: 11, collapsed: false }],
+        }, { unitId, subUnitId: unitId });
+        expect(harness.popupService.ranges).toEqual(['0:5']);
+    });
+
     it('does not show the floating toolbar for selections inside code blocks', () => {
         const injector = new Injector();
+        injector.add([IPermissionService, { useClass: PermissionService }]);
         injector.add([ILogService, { useClass: DesktopLogService }]);
         injector.add([IConfigService, { useClass: ConfigService }]);
         injector.add([IContextService, { useClass: ContextService }]);

packages/docs-ui/src/services/float-menu.service.ts

@@ -24,13 +24,15 @@ import {
     FOCUSING_COMMON_DRAWINGS,
     IContextService,
     Inject,
+    IPermissionService,
     isInternalEditorID,
     IUniverInstanceService,
     Optional,
     toDisposable,
     UniverInstanceType,
 } from '@univerjs/core';
-import { DocSelectionManagerService } from '@univerjs/docs';
+import { DocSelectionManagerService, getDocumentPermissionValue } from '@univerjs/docs';
+import { UnitAction } from '@univerjs/protocol';
 import { FLOAT_MENU_COMPONENT_KEY } from '../views/float-toolbar/FloatToolbar';
 import { IDocEmbedRuntimeFocusCoordinator } from './doc-embed-integration.service';
 import { DocCanvasPopManagerService } from './doc-popup-manager.service';
@@ -64,13 +66,15 @@ export class DocFloatMenuService extends Disposable implements IRenderModule {
         @Inject(IUniverInstanceService) private readonly _univerInstanceService: IUniverInstanceService,
         @Inject(DocSelectionRenderService) private readonly _docSelectionRenderService: DocSelectionRenderService,
         @IContextService private readonly _contextService: IContextService,
+        @IPermissionService private readonly _permissionService: IPermissionService,
         @Optional(IDocEmbedRuntimeFocusCoordinator) private readonly _embedRuntimeFocusCoordinator?: IDocEmbedRuntimeFocusCoordinator
     ) {
         super();
 
         if (isInternalEditorID(this._context.unitId)) {
             return;
         }
+        this._initPermissionLifecycle();
         this._initSelectionChange();
         this._initEmbedRuntimeLifecycle();
 
@@ -136,6 +140,23 @@ export class DocFloatMenuService extends Disposable implements IRenderModule {
         }));
     }
 
+    private _initPermissionLifecycle(): void {
+        this.disposeWithMe(this._permissionService.permissionPointUpdate$.subscribe(() => {
+            if (!this._canEditDocument()) {
+                this._hideFloatMenu();
+            }
+        }));
+    }
+
+    private _canEditDocument(): boolean {
+        return getDocumentPermissionValue(
+            this._permissionService,
+            this._context.unitId,
+            this._context.unitId,
+            UnitAction.Edit
+        );
+    }
+
     private _initEmbedRuntimeLifecycle(): void {
         if (!this._embedRuntimeFocusCoordinator) {
             return;
@@ -176,7 +197,7 @@ export class DocFloatMenuService extends Disposable implements IRenderModule {
 
     private _showFloatMenu(unitId: string, range: ITextRangeParam) {
         const documentDataModel = this._univerInstanceService.getUnit<DocumentDataModel>(unitId, UniverInstanceType.UNIVER_DOC);
-        if (!documentDataModel || documentDataModel.getDisabled()) {
+        if (!documentDataModel || documentDataModel.getDisabled() || !this._canEditDocument()) {
             return;
         }