feat(docs-ui): support docs zoom bar & context menu

examples/src/docs/main.ts

@@ -57,7 +57,7 @@ univer.registerPlugin(UniverFormulaEnginePlugin);
 univer.registerPlugin(UniverDebuggerPlugin);
 univer.registerPlugin(UniverUIPlugin, {
     container: 'app',
-    footer: false,
+    // footer: false,
 });
 
 univer.registerPlugin(UniverDocsPlugin);

packages/core/src/common/const.ts

@@ -20,6 +20,8 @@ export const DOCS_NORMAL_EDITOR_UNIT_ID_KEY = `${PREFIX}DOCS_NORMAL`;
 
 export const DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY = `${PREFIX}DOCS_FORMULA_BAR`;
 
+export const DOCS_ZEN_EDITOR_UNIT_ID_KEY = '__defaultDocumentZenEditorSpecialUnitId_20231218__';
+
 export const DEFAULT_EMPTY_DOCUMENT_VALUE = '\r\n';
 
 export function createInternalEditorID(id: string) {

packages/core/src/index.ts

@@ -31,6 +31,7 @@ export {
     DEFAULT_EMPTY_DOCUMENT_VALUE,
     DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY,
     DOCS_NORMAL_EDITOR_UNIT_ID_KEY,
+    DOCS_ZEN_EDITOR_UNIT_ID_KEY,
     createInternalEditorID,
     isInternalEditorID,
 } from './common/const';

packages/debugger/src/controllers/debugger.controller.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { Disposable, ICommandService, Inject, Injector } from '@univerjs/core';
+import { Disposable, ICommandService, Inject, Injector, LifecycleStages, OnLifecycle } from '@univerjs/core';
 import type { IMenuItemFactory, MenuConfig } from '@univerjs/ui';
 import { ComponentManager, IMenuService } from '@univerjs/ui';
 
@@ -66,6 +66,7 @@ export interface IUniverDebuggerConfig {
 
 export const DefaultDebuggerConfig = {};
 
+@OnLifecycle(LifecycleStages.Ready, DebuggerController)
 export class DebuggerController extends Disposable {
     constructor(
         private readonly _config: Partial<IUniverDebuggerConfig>,

packages/debugger/src/debugger-plugin.ts

@@ -48,11 +48,10 @@ export class UniverDebuggerPlugin extends Plugin {
                 useFactory: () => this._injector.createInstance(DebuggerController, this._config),
             },
         ]);
-
-        this._debuggerController = this._injector.get(DebuggerController);
     }
 
     getDebuggerController() {
+        this._debuggerController = this._injector.get(DebuggerController);
         return this._debuggerController;
     }
 }

packages/docs-hyper-link-ui/src/controllers/menu.ts

@@ -28,7 +28,7 @@ export const DOC_LINK_ICON = 'doc-hyper-link-icon';
 export function AddHyperLinkMenuItemFactory(accessor: IAccessor): IMenuButtonItem {
     return {
         id: ShowDocHyperLinkEditPopupOperation.id,
-        group: MenuGroup.TOOLBAR_LAYOUT,
+        group: MenuGroup.CONTEXT_MENU_DATA,
         type: MenuItemType.BUTTON,
         icon: DOC_LINK_ICON,
         title: 'docLink.menu.tooltip',

packages/docs-hyper-link-ui/src/views/hyper-link-edit/index.tsx

@@ -76,9 +76,9 @@ export const DocHyperLinkEdit = () => {
     }, [editingId, hyperLinkModel, textSelectionManagerService, univerInstanceService]);
 
     useEffect(() => {
-        textSelectionRenderManager.blur();
+        textSelectionRenderManager.blurEditor();
         return () => {
-            textSelectionRenderManager.focus();
+            textSelectionRenderManager.focusEditor();
         };
     }, [textSelectionRenderManager]);
 

packages/docs-thread-comment-ui/src/commands/operations/show-comment-panel.operation.ts

@@ -20,6 +20,7 @@ import type { ActiveCommentInfo } from '@univerjs/thread-comment-ui';
 import { getDT, ThreadCommentPanelService } from '@univerjs/thread-comment-ui';
 import { ISidebarService } from '@univerjs/ui';
 import { getSelectionText, TextSelectionManagerService } from '@univerjs/docs';
+import { ITextSelectionRenderManager } from '@univerjs/engine-render';
 import { DocThreadCommentPanel } from '../../views/doc-thread-comment-panel';
 import { DEFAULT_DOC_SUBUNIT_ID } from '../../common/const';
 import { DocThreadCommentService } from '../../services/doc-thread-comment.service';
@@ -52,6 +53,30 @@ export const ShowCommentPanelOperation: ICommand<IShowCommentPanelOperationParam
     },
 };
 
+export const ToggleCommentPanelOperation: ICommand = {
+    id: 'docs.operation.toggle-comment-panel',
+    type: CommandType.OPERATION,
+    handler(accessor) {
+        const panelService = accessor.get(ThreadCommentPanelService);
+        const sidebarService = accessor.get(ISidebarService);
+
+        if (!panelService.panelVisible) {
+            sidebarService.open({
+                header: { title: 'threadCommentUI.panel.title' },
+                children: { label: DocThreadCommentPanel.componentKey },
+                width: 320,
+                onClose: () => panelService.setPanelVisible(false),
+            });
+            panelService.setPanelVisible(true);
+        } else {
+            sidebarService.close();
+            panelService.setPanelVisible(false);
+            panelService.setActiveComment(null);
+        }
+        return true;
+    },
+};
+
 export const StartAddCommentOperation: ICommand = {
     id: 'docs.operation.start-add-comment',
     type: CommandType.OPERATION,
@@ -60,6 +85,7 @@ export const StartAddCommentOperation: ICommand = {
         const univerInstanceService = accessor.get(IUniverInstanceService);
         const doc = univerInstanceService.getCurrentUnitForType<DocumentDataModel>(UniverInstanceType.UNIVER_DOC);
         const textSelectionManagerService = accessor.get(TextSelectionManagerService);
+        const textSelectionRenderService = accessor.get(ITextSelectionRenderManager);
         const userManagerService = accessor.get(UserManagerService);
         const docCommentService = accessor.get(DocThreadCommentService);
         const commandService = accessor.get(ICommandService);
@@ -104,6 +130,7 @@ export const StartAddCommentOperation: ICommand = {
             threadId: commentId,
         };
 
+        textSelectionRenderService.blurEditor();
         docCommentService.startAdd(comment);
         panelService.setActiveComment({
             unitId,

packages/docs-thread-comment-ui/src/controllers/doc-thread-comment-selection.controller.ts

@@ -14,12 +14,13 @@
  * limitations under the License.
  */
 
-import type { DocumentDataModel } from '@univerjs/core';
+import type { DocumentDataModel, ITextRange } from '@univerjs/core';
 import { Disposable, ICommandService, Inject, IUniverInstanceService, LifecycleStages, OnLifecycle, UniverInstanceType } from '@univerjs/core';
 import type { ISetTextSelectionsOperationParams } from '@univerjs/docs';
 import { SetTextSelectionsOperation } from '@univerjs/docs';
 import { SetActiveCommentOperation, ThreadCommentPanelService } from '@univerjs/thread-comment-ui';
 import { DocBackScrollRenderController } from '@univerjs/docs-ui';
+import type { ITextRangeWithStyle } from '@univerjs/engine-render';
 import { IRenderManagerService } from '@univerjs/engine-render';
 import { ThreadCommentModel } from '@univerjs/thread-comment';
 import { DEFAULT_DOC_SUBUNIT_ID } from '../common/const';
@@ -43,13 +44,18 @@ export class DocThreadCommentSelectionController extends Disposable {
     }
 
     private _initSelectionChange() {
+        let lastSelection: ITextRange | undefined;
         this.disposeWithMe(
             this._commandService.onCommandExecuted((commandInfo) => {
                 if (commandInfo.id === SetTextSelectionsOperation.id) {
                     const params = commandInfo.params as ISetTextSelectionsOperationParams;
                     const { unitId, ranges } = params;
                     const doc = this._univerInstanceService.getUnit<DocumentDataModel>(unitId, UniverInstanceType.UNIVER_DOC);
-                    const primary = ranges[0];
+                    const primary = ranges[0] as ITextRangeWithStyle | undefined;
+                    if (lastSelection?.startOffset === primary?.startOffset && lastSelection?.endOffset === primary?.endOffset) {
+                        return;
+                    }
+                    lastSelection = primary;
                     if (primary && doc) {
                         const { startOffset, endOffset, collapsed } = primary;
                         let customRange;

packages/docs-thread-comment-ui/src/controllers/doc-thread-comment-ui.controller.ts

@@ -20,9 +20,9 @@ import { ComponentManager, IMenuService } from '@univerjs/ui';
 import { CommentSingle } from '@univerjs/icons';
 import { AddDocCommentComment } from '../commands/commands/add-doc-comment.command';
 import { DocThreadCommentPanel } from '../views/doc-thread-comment-panel';
-import { ShowCommentPanelOperation, StartAddCommentOperation } from '../commands/operations/show-comment-panel.operation';
+import { ShowCommentPanelOperation, StartAddCommentOperation, ToggleCommentPanelOperation } from '../commands/operations/show-comment-panel.operation';
 import { DeleteDocCommentComment } from '../commands/commands/delete-doc-comment.command';
-import { AddDocCommentMenuItemFactory } from './menu';
+import { AddDocCommentMenuItemFactory, ToolbarDocCommentMenuItemFactory } from './menu';
 
 export interface IDocThreadCommentUIConfig {
     menu: MenuConfig;
@@ -49,13 +49,17 @@ export class DocThreadCommentUIController extends Disposable {
             DeleteDocCommentComment,
             ShowCommentPanelOperation,
             StartAddCommentOperation,
+            ToggleCommentPanelOperation,
         ].forEach((command) => {
             this.disposeWithMe(this._commandService.registerCommand(command));
         });
     }
 
     private _initMenus() {
-        [AddDocCommentMenuItemFactory].forEach((menuFactory) => {
+        [
+            AddDocCommentMenuItemFactory,
+            ToolbarDocCommentMenuItemFactory,
+        ].forEach((menuFactory) => {
             this.disposeWithMe(this._menuService.addMenuItem(menuFactory(this._injector), this._config.menu));
         });
     }

packages/docs-thread-comment-ui/src/controllers/menu.ts

@@ -21,29 +21,35 @@ import { getMenuHiddenObservable, MenuGroup, MenuItemType, MenuPosition } from '
 import { DocSkeletonManagerService, TextSelectionManagerService } from '@univerjs/docs';
 import { DocumentEditArea, IRenderManagerService } from '@univerjs/engine-render';
 import { debounceTime, Observable } from 'rxjs';
-import { StartAddCommentOperation } from '../commands/operations/show-comment-panel.operation';
+import { StartAddCommentOperation, ToggleCommentPanelOperation } from '../commands/operations/show-comment-panel.operation';
 
 export const shouldDisableAddComment = (accessor: IAccessor) => {
     const renderManagerService = accessor.get(IRenderManagerService);
+    const textSelectionManagerService = accessor.get(TextSelectionManagerService);
     const render = renderManagerService.getCurrent();
     const skeleton = render?.with(DocSkeletonManagerService).getSkeleton();
     const editArea = skeleton?.getViewModel().getEditArea();
     if (editArea === DocumentEditArea.FOOTER || editArea === DocumentEditArea.HEADER) {
         return true;
     }
 
+    const range = textSelectionManagerService.getActiveRange();
+    if (!range || range.collapsed) {
+        return true;
+    }
+
     return false;
 };
 
 export function AddDocCommentMenuItemFactory(accessor: IAccessor): IMenuButtonItem {
     return {
         id: StartAddCommentOperation.id,
-        group: MenuGroup.TOOLBAR_LAYOUT,
+        group: MenuGroup.CONTEXT_MENU_DATA,
         type: MenuItemType.BUTTON,
         icon: 'CommentSingle',
         title: 'threadCommentUI.panel.addComment',
         tooltip: 'threadCommentUI.panel.addComment',
-        positions: [MenuPosition.TOOLBAR_START, MenuPosition.CONTEXT_MENU],
+        positions: [MenuPosition.CONTEXT_MENU],
         hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC),
         disabled$: new Observable(function (subscribe) {
             const textSelectionService = accessor.get(TextSelectionManagerService);
@@ -57,3 +63,16 @@ export function AddDocCommentMenuItemFactory(accessor: IAccessor): IMenuButtonIt
         }),
     };
 }
+
+export function ToolbarDocCommentMenuItemFactory(accessor: IAccessor): IMenuButtonItem {
+    return {
+        id: ToggleCommentPanelOperation.id,
+        group: MenuGroup.CONTEXT_MENU_DATA,
+        type: MenuItemType.BUTTON,
+        icon: 'CommentSingle',
+        title: 'threadCommentUI.panel.addComment',
+        tooltip: 'threadCommentUI.panel.addComment',
+        positions: [MenuPosition.TOOLBAR_START],
+        hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC),
+    };
+}

packages/docs-thread-comment-ui/src/views/doc-thread-comment-panel/index.tsx

@@ -18,7 +18,7 @@ import type { DocumentDataModel } from '@univerjs/core';
 import { ICommandService, IUniverInstanceService, UniverInstanceType, useDependency, useObservable } from '@univerjs/core';
 import { ThreadCommentPanel } from '@univerjs/thread-comment-ui';
 import React, { useEffect, useMemo, useState } from 'react';
-import { Observable } from 'rxjs';
+import { debounceTime, Observable } from 'rxjs';
 import { RichTextEditingMutation, TextSelectionManagerService } from '@univerjs/docs';
 import { DEFAULT_DOC_SUBUNIT_ID } from '../../common/const';
 import { StartAddCommentOperation } from '../../commands/operations/show-comment-panel.operation';
@@ -33,7 +33,11 @@ export const DocThreadCommentPanel = () => {
     const doc = useObservable(doc$);
     const subUnitId$ = useMemo(() => new Observable<string>((sub) => sub.next(DEFAULT_DOC_SUBUNIT_ID)), []);
     const textSelectionManagerService = useDependency(TextSelectionManagerService);
-    const textRange = useObservable(textSelectionManagerService.textSelection$)?.textRanges[0];
+    const selectionChange$ = useMemo(
+        () => textSelectionManagerService.textSelection$.pipe(debounceTime(16)),
+        [textSelectionManagerService.textSelection$]
+    );
+    useObservable(selectionChange$);
     const commandService = useDependency(ICommandService);
     const docCommentService = useDependency(DocThreadCommentService);
     const tempComment = useObservable(docCommentService.addingComment$);
@@ -67,7 +71,13 @@ export const DocThreadCommentPanel = () => {
     if (!doc) {
         return null;
     }
-    const isInValidSelection = textRange && textRange.endOffset === textRange.startOffset;
+
+    const activeRange = textSelectionManagerService.getActiveRange();
+    const isInValidSelection = Boolean(
+        activeRange &&
+        (activeRange.endOffset === activeRange.startOffset || activeRange.segmentId)
+    );
+
     const unitId = doc.getUnitId();
 
     return (

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

@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
-import { Disposable, Inject, Injector, LifecycleStages, OnLifecycle, UniverInstanceType } from '@univerjs/core';
+import { connectInjector, Disposable, Inject, Injector, IUniverInstanceService, LifecycleStages, OnLifecycle, UniverInstanceType } from '@univerjs/core';
 import type { IMenuItemFactory } from '@univerjs/ui';
-import { ComponentManager, ILayoutService, IMenuService } from '@univerjs/ui';
+import { BuiltInUIPart, ComponentManager, ILayoutService, IMenuService, IShortcutService, IUIPartsService } from '@univerjs/ui';
 
 import { ITextSelectionRenderManager } from '@univerjs/engine-render';
 import { COLOR_PICKER_COMPONENT, ColorPicker } from '../components/color-picker';
@@ -28,6 +28,7 @@ import {
 } from '../components/font-family';
 import { FONT_SIZE_COMPONENT, FontSize } from '../components/font-size';
 import type { IUniverDocsUIConfig } from '../basics';
+import { DocFooter } from '../views/doc-footer';
 import {
     AlignCenterMenuItemFactory,
     AlignJustifyMenuItemFactory,
@@ -48,6 +49,8 @@ import {
     TextColorSelectorMenuItemFactory,
     UnderlineMenuItemFactory,
 } from './menu/menu';
+import { CopyMenuFactory, CutMenuFactory, DeleteMenuFactory, PasteMenuFactory } from './menu/context-menu';
+import { AlignCenterShortCut, AlignJustifyShortCut, AlignLeftShortCut, AlignRightShortCut, BoldShortCut, BulletListShortCut, ItalicShortCut, OrderListShortCut, StrikeThroughShortCut, SubscriptShortCut, SuperscriptShortCut, UnderlineShortCut } from './shortcut/toolbar.shortcut';
 
 // FIXME: LifecycleStages.Rendered must be used, otherwise the menu cannot be added to the DOM, but the sheet ui plug-in can be added in LifecycleStages.Ready
 @OnLifecycle(LifecycleStages.Rendered, DocUIController)
@@ -57,7 +60,10 @@ export class DocUIController extends Disposable {
         @Inject(Injector) private readonly _injector: Injector,
         @Inject(ComponentManager) private readonly _componentManager: ComponentManager,
         @ILayoutService private readonly _layoutService: ILayoutService,
-        @IMenuService private readonly _menuService: IMenuService
+        @IMenuService private readonly _menuService: IMenuService,
+        @IUIPartsService private readonly _uiPartsService: IUIPartsService,
+        @IUniverInstanceService private readonly _univerInstanceService: IUniverInstanceService,
+        @IShortcutService private readonly _shortcutService: IShortcutService
     ) {
         super();
 
@@ -72,6 +78,13 @@ export class DocUIController extends Disposable {
         this.disposeWithMe(componentManager.register(FONT_SIZE_COMPONENT, FontSize));
     }
 
+    private _initUiParts() {
+        const workbook = this._univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET);
+        if (this._config.layout?.docContainerConfig?.footer && !workbook) {
+            this.disposeWithMe(this._uiPartsService.registerComponent(BuiltInUIPart.FOOTER, () => connectInjector(DocFooter, this._injector)));
+        }
+    }
+
     private _initMenus(): void {
         const { menu = {} } = this._config;
 
@@ -100,12 +113,46 @@ export class DocUIController extends Disposable {
         ).forEach((factory) => {
             this.disposeWithMe(this._menuService.addMenuItem(this._injector.invoke(factory), menu));
         });
+
+        [
+            CopyMenuFactory,
+            CutMenuFactory,
+            PasteMenuFactory,
+            DeleteMenuFactory,
+        ].forEach((factory) => {
+            try {
+                this.disposeWithMe(this._menuService.addMenuItem(this._injector.invoke(factory), menu));
+            } catch (error) {
+
+            }
+        });
+    }
+
+    private _initShortCut() {
+        [
+            BoldShortCut,
+            ItalicShortCut,
+            UnderlineShortCut,
+            StrikeThroughShortCut,
+            SubscriptShortCut,
+            SuperscriptShortCut,
+            AlignCenterShortCut,
+            AlignJustifyShortCut,
+            AlignRightShortCut,
+            AlignLeftShortCut,
+            OrderListShortCut,
+            BulletListShortCut,
+        ].forEach((shortcut) => {
+            this.disposeWithMe(this._shortcutService.registerShortcut(shortcut));
+        });
     }
 
     private _init(): void {
         this._initCustomComponents();
         this._initMenus();
         this._initFocusHandler();
+        this._initUiParts();
+        this._initShortCut();
     }
 
     private _initFocusHandler(): void {