fix(docs-ui): link & checklist can't work on header-footer

packages-experimental/uni-formula-ui/src/controllers/doc-formula-input.controller.ts

@@ -18,7 +18,7 @@ import { CustomRangeType, Disposable, ICommandService, ILogService, Inject, IUni
 import type { IInsertCommandParams } from '@univerjs/docs';
 import { DeleteLeftCommand, InsertCommand, MoveCursorOperation, TextSelectionManagerService } from '@univerjs/docs';
 import { IEditorService } from '@univerjs/ui';
-import { DocHoverManagerService } from '@univerjs/docs-ui';
+import { DocEventManagerService } from '@univerjs/docs-ui';
 
 import { AddDocUniFormulaCommand, RemoveDocUniFormulaCommand, UpdateDocUniFormulaCommand } from '../commands/commands/doc.command';
 import type { IShowFormulaPopupOperationParams } from '../commands/operations/operation';
@@ -35,7 +35,7 @@ export class DocUniFormulaInputController extends Disposable {
         @IUniverInstanceService private readonly _instanceSrv: IUniverInstanceService,
         @IEditorService private readonly _editorService: IEditorService,
         @ILogService private readonly _logService: ILogService,
-        @Inject(DocHoverManagerService) private readonly _docHoverManagerSrv: DocHoverManagerService,
+        @Inject(DocEventManagerService) private readonly _docEventManagerService: DocEventManagerService,
         @Inject(UniFormulaPopupService) private readonly _formulaPopupSrv: UniFormulaPopupService,
         @Inject(TextSelectionManagerService) private readonly _textSelectionManagerService: TextSelectionManagerService
     ) {
@@ -91,7 +91,7 @@ export class DocUniFormulaInputController extends Disposable {
     }
 
     private _initHoverListener(): void {
-        this.disposeWithMe(this._docHoverManagerSrv.activeCustomRanges$.subscribe((customRanges) => {
+        this.disposeWithMe(this._docEventManagerService.hoverCustomRanges$.subscribe((customRanges) => {
             const focusedUnit = this._instanceSrv.getFocusedUnit();
 
             if (
@@ -102,7 +102,7 @@ export class DocUniFormulaInputController extends Disposable {
                 return;
             }
 
-            const formulaCustomRange = customRanges.find((range) => range.rangeType === CustomRangeType.UNI_FORMULA);
+            const formulaCustomRange = customRanges.find((range) => range.range.rangeType === CustomRangeType.UNI_FORMULA)?.range;
             if (formulaCustomRange) {
                 const { startIndex, rangeId } = formulaCustomRange;
                 this._logService.debug('[DocUniFormulaController]: activeCustomRanges', customRanges);

packages/core/src/docs/data-model/document-data-model.ts

@@ -329,13 +329,15 @@ export class DocumentDataModel extends DocumentDataModelSimple {
             for (const headerId in headers) {
                 const header = headers[headerId];
                 this.headerModelMap.set(headerId, new DocumentDataModel(header));
+                this.headerModelMap.get(headerId)!.updateDocumentId(this.getUnitId());
             }
         }
 
         if (footers) {
             for (const footerId in footers) {
                 const footer = footers[footerId];
                 this.footerModelMap.set(footerId, new DocumentDataModel(footer));
+                this.footerModelMap.get(footerId)!.updateDocumentId(this.getUnitId());
             }
         }
     }

packages/docs-hyper-link-ui/src/commands/commands/delete-link.command.ts

@@ -22,6 +22,7 @@ import { DocHyperLinkModel } from '@univerjs/docs-hyper-link';
 export interface IDeleteDocHyperLinkMutationParams {
     unitId: string;
     linkId: string;
+    segmentId?: string;
 }
 
 export const DeleteDocHyperLinkCommand: ICommand<IDeleteDocHyperLinkMutationParams> = {
@@ -31,15 +32,15 @@ export const DeleteDocHyperLinkCommand: ICommand<IDeleteDocHyperLinkMutationPara
         if (!params) {
             return false;
         }
-        const { unitId, linkId } = params;
+        const { unitId, linkId, segmentId } = params;
         const commandService = accessor.get(ICommandService);
         const hyperLinkModel = accessor.get(DocHyperLinkModel);
         const link = hyperLinkModel.getLink(unitId, linkId);
         if (!link) {
             return false;
         }
 
-        const doMutation = deleteCustomRangeFactory(accessor, { unitId, rangeId: linkId });
+        const doMutation = deleteCustomRangeFactory(accessor, { unitId, rangeId: linkId, segmentId });
         if (!doMutation) {
             return false;
         }

packages/docs-hyper-link-ui/src/commands/commands/update-link.command.ts

@@ -14,13 +14,17 @@
  * limitations under the License.
  */
 
-import { CommandType, type ICommand, ICommandService } from '@univerjs/core';
-import { UpdateDocHyperLinkMutation } from '@univerjs/docs-hyper-link';
+import { CommandType, CustomRangeType, DataStreamTreeTokenType, generateRandomId, type ICommand, ICommandService, sequenceExecute } from '@univerjs/core';
+import { replaceSelectionFactory, TextSelectionManagerService } from '@univerjs/docs';
+import type { IAddDocHyperLinkMutationParams } from '@univerjs/docs-hyper-link';
+import { AddDocHyperLinkMutation } from '@univerjs/docs-hyper-link';
 
 export interface IUpdateDocHyperLinkCommandParams {
     unitId: string;
     linkId: string;
     payload: string;
+    label: string;
+    segmentId: string;
 }
 
 export const UpdateDocHyperLinkCommand: ICommand<IUpdateDocHyperLinkCommandParams> = {
@@ -30,8 +34,54 @@ export const UpdateDocHyperLinkCommand: ICommand<IUpdateDocHyperLinkCommandParam
         if (!params) {
             return false;
         }
-
+        const { unitId, payload, segmentId } = params;
         const commandService = accessor.get(ICommandService);
-        return commandService.syncExecuteCommand(UpdateDocHyperLinkMutation.id, params);
+        const selectionService = accessor.get(TextSelectionManagerService);
+        const currentSelection = selectionService.getActiveTextRange();
+        if (!currentSelection) {
+            return false;
+        }
+
+        const newId = generateRandomId();
+        const replaceSelection = replaceSelectionFactory(accessor, {
+            unitId: params.unitId,
+            body: {
+                dataStream: `${DataStreamTreeTokenType.CUSTOM_RANGE_START}${params.label}${DataStreamTreeTokenType.CUSTOM_RANGE_END}`,
+                customRanges: [{
+                    rangeId: newId,
+                    rangeType: CustomRangeType.HYPERLINK,
+                    startIndex: 0,
+                    endIndex: params.label.length + 1,
+                }],
+            },
+            selection: {
+                startOffset: currentSelection.startOffset!,
+                endOffset: currentSelection.endOffset!,
+                collapsed: false,
+                segmentId,
+            },
+        });
+
+        if (!replaceSelection) {
+            return false;
+        }
+
+        // doc don't support undo now
+        // so use an new id to replace the old link
+        // in case of undo or redo
+        const addLinkMutation = {
+            id: AddDocHyperLinkMutation.id,
+            params: {
+                unitId,
+                link: {
+                    id: newId,
+                    payload,
+                },
+            } as IAddDocHyperLinkMutationParams,
+        };
+
+        const result = sequenceExecute([addLinkMutation, replaceSelection], commandService);
+
+        return result.result;
     },
 };

packages/docs-hyper-link-ui/src/commands/operations/popup.operation.ts

@@ -14,24 +14,17 @@
  * limitations under the License.
  */
 
-import type { DocumentDataModel, IAccessor, ICommand } from '@univerjs/core';
-import { CommandType, IUniverInstanceService, UniverInstanceType } from '@univerjs/core';
-import { DocSkeletonManagerService, serializeDocRange, TextSelectionManagerService } from '@univerjs/docs';
-import { DocumentEditArea, IRenderManagerService } from '@univerjs/engine-render';
+import type { DocumentDataModel, IAccessor, ICommand, ITextRange } from '@univerjs/core';
+import { CommandType, CustomRangeType, IUniverInstanceService, UniverInstanceType } from '@univerjs/core';
+import { getCustomRangesInterestsWithRange, TextSelectionManagerService } from '@univerjs/docs';
+import { DocHyperLinkModel } from '@univerjs/docs-hyper-link';
 import { DocHyperLinkPopupService } from '../../services/hyper-link-popup.service';
 
 export const shouldDisableAddLink = (accessor: IAccessor) => {
     const textSelectionService = accessor.get(TextSelectionManagerService);
     const univerInstanceService = accessor.get(IUniverInstanceService);
-    const textRanges = textSelectionService.getCurrentTextRanges()?.map(serializeDocRange);
-    const renderManagerService = accessor.get(IRenderManagerService);
-    const render = renderManagerService.getCurrent();
-    const skeleton = render?.with(DocSkeletonManagerService).getSkeleton();
-    const editArea = skeleton?.getViewModel().getEditArea();
-    if (editArea === DocumentEditArea.FOOTER || editArea === DocumentEditArea.HEADER) {
-        return true;
-    }
-    if (!textRanges || textRanges.length > 1) {
+    const textRanges = textSelectionService.getDocRanges();
+    if (!textRanges.length || textRanges.length > 1) {
         return true;
     }
 
@@ -41,14 +34,15 @@ export const shouldDisableAddLink = (accessor: IAccessor) => {
         return true;
     }
 
-    const paragraphs = doc.getBody()?.paragraphs;
+    const body = doc.getSelfOrHeaderFooterModel(activeRange.segmentId).getBody();
+    const paragraphs = body?.paragraphs;
     if (!paragraphs) {
         return true;
     }
 
     for (let i = 0, len = paragraphs.length; i < len; i++) {
         const p = paragraphs[i];
-        if (activeRange.startOffset <= p.startIndex && activeRange.endOffset > p.startIndex) {
+        if (activeRange.startOffset! <= p.startIndex && activeRange.endOffset! > p.startIndex) {
             return true;
         }
 
@@ -57,20 +51,23 @@ export const shouldDisableAddLink = (accessor: IAccessor) => {
         }
     }
 
-    return false;
+    const insertCustomRanges = getCustomRangesInterestsWithRange(activeRange as ITextRange, body.customRanges ?? []);
+    // can't insert hyperlink in range contains other custom ranges
+    return !insertCustomRanges.every((range) => range.rangeType === CustomRangeType.HYPERLINK);
 };
 
 export interface IShowDocHyperLinkEditPopupOperationParams {
     link?: {
         unitId: string;
         linkId: string;
-        rangeIndex: number;
+        segmentId?: string;
+        segmentPage?: number;
     };
 }
 
 export const ShowDocHyperLinkEditPopupOperation: ICommand<IShowDocHyperLinkEditPopupOperationParams> = {
     type: CommandType.OPERATION,
-    id: 'docs.operation.show-hyper-link-edit-popup',
+    id: 'doc.operation.show-hyper-link-edit-popup',
     handler(accessor, params) {
         const linkInfo = params?.link;
         if (shouldDisableAddLink(accessor) && !linkInfo) {
@@ -81,3 +78,43 @@ export const ShowDocHyperLinkEditPopupOperation: ICommand<IShowDocHyperLinkEditP
         return true;
     },
 };
+
+export interface IShowDocHyperLinkInfoPopupOperationParams {
+    linkId: string;
+    segmentId?: string;
+    unitId: string;
+    segmentPage?: number;
+}
+
+export const ToggleDocHyperLinkInfoPopupOperation: ICommand<IShowDocHyperLinkInfoPopupOperationParams> = {
+    type: CommandType.OPERATION,
+    id: 'doc.operation.toggle-hyper-link-info-popup',
+    handler(accessor, params) {
+        const hyperLinkService = accessor.get(DocHyperLinkPopupService);
+        if (!params) {
+            hyperLinkService.hideInfoPopup();
+            return true;
+        }
+
+        hyperLinkService.showInfoPopup(params);
+        return true;
+    },
+};
+
+export const ClickDocHyperLinkOperation: ICommand<{ unitId: string; linkId: string }> = {
+    type: CommandType.OPERATION,
+    id: 'doc.operation.click-hyper-link',
+    handler(accessor, params) {
+        if (!params) {
+            return false;
+        }
+        const { unitId, linkId } = params;
+        const docLinkModel = accessor.get(DocHyperLinkModel);
+        const link = docLinkModel.getLink(unitId, linkId);
+        if (!link) {
+            return false;
+        }
+        window.open(link.payload, '_blank', 'noopener noreferrer');
+        return true;
+    },
+};

packages/docs-hyper-link-ui/src/controllers/doc-hyper-link-selection.controller.ts

@@ -17,8 +17,8 @@
 import type { DocumentDataModel } from '@univerjs/core';
 import { Disposable, ICommandService, Inject, IUniverInstanceService, LifecycleStages, OnLifecycle, UniverInstanceType } from '@univerjs/core';
 import type { ISetTextSelectionsOperationParams } from '@univerjs/docs';
-import { DocSkeletonManagerService, SetTextSelectionsOperation } from '@univerjs/docs';
-import { DocumentEditArea, IRenderManagerService } from '@univerjs/engine-render';
+import { SetTextSelectionsOperation } from '@univerjs/docs';
+import { IRenderManagerService } from '@univerjs/engine-render';
 import { DocHyperLinkPopupService } from '../services/hyper-link-popup.service';
 
 @OnLifecycle(LifecycleStages.Ready, DocHyperLinkSelectionController)
@@ -39,30 +39,25 @@ export class DocHyperLinkSelectionController extends Disposable {
             this._commandService.onCommandExecuted((commandInfo) => {
                 if (commandInfo.id === SetTextSelectionsOperation.id) {
                     const params = commandInfo.params as ISetTextSelectionsOperationParams;
-                    const { unitId, ranges } = params;
-                    const render = this._renderMangerService.getRenderById(unitId);
-                    const skeleton = render?.with(DocSkeletonManagerService).getSkeleton();
-                    const editArea = skeleton?.getViewModel().getEditArea();
-                    if (editArea !== DocumentEditArea.BODY) {
-                        this._docHyperLinkService.hideInfoPopup();
-                        this._docHyperLinkService.hideEditPopup();
-                        return;
-                    }
+                    const { unitId, ranges, segmentId } = params;
 
                     const doc = this._univerInstanceService.getUnit<DocumentDataModel>(unitId, UniverInstanceType.UNIVER_DOC);
                     const primary = ranges[0];
                     if (primary && doc) {
-                        const { startOffset, endOffset, collapsed } = primary;
-                        const customRanges = doc.getBody()?.customRanges;
-                        if (collapsed) { // cursor
+                        const { startOffset, endOffset, collapsed, segmentPage } = primary;
+                        const customRanges = doc.getSelfOrHeaderFooterModel(segmentId)?.getBody()?.customRanges;
+                        if (collapsed) {
+                            // cursor
                             const index = customRanges?.findIndex((value) => (value.startIndex) < startOffset && value.endIndex > endOffset - 1) ?? -1;
                             if (index > -1) {
                                 const customRange = customRanges![index];
-                                this._docHyperLinkService.showInfoPopup({ unitId, linkId: customRange.rangeId, rangeIndex: index });
+                                this._docHyperLinkService.showInfoPopup({ unitId, linkId: customRange.rangeId, segmentId, segmentPage });
                                 return;
                             }
-                        } else { // range
-                            if (customRanges?.find((value) => value.startIndex <= startOffset && value.endIndex >= (endOffset - 1))) {
+                        } else {
+                            // range
+                            const range = customRanges?.find((value) => value.startIndex <= startOffset && value.endIndex >= (endOffset - 1));
+                            if (range) {
                                 return;
                             }
                         }