@univerjs/docs-hyper-link-ui 0.2.7 → 0.2.9

package/lib/es/index.js

@@ -2,14 +2,14 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: !0 });
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key != "symbol" ? key + "" : key, value);
-import { CommandType, ICommandService, IUniverInstanceService, UniverInstanceType, useDependency, LocaleService, Disposable, Inject, generateRandomId, CustomRangeType, sequenceExecuteAsync, useObservable as useObservable$1, Tools, OnLifecycle, LifecycleStages, Injector, updateAttributeByDelete, DependentOn, Plugin } from "@univerjs/core";
-import { DocHyperLinkModel, AddDocHyperLinkMutation, UpdateDocHyperLinkMutation, UniverDocsHyperLinkPlugin } from "@univerjs/docs-hyper-link";
-import { IRenderManagerService, DocumentEditArea, ITextSelectionRenderManager } from "@univerjs/engine-render";
-import { IMessageService, useObservable, MetaKeys, KeyCode, MenuGroup, MenuItemType, MenuPosition, getMenuHiddenObservable, ComponentManager, IMenuService, IShortcutService } from "@univerjs/ui";
+import { CommandType, ICommandService, IUniverInstanceService, UniverInstanceType, CustomRangeType, useDependency, LocaleService, Disposable, Inject, generateRandomId, sequenceExecute, DataStreamTreeTokenType, useObservable as useObservable$1, Tools, getBodySlice, OnLifecycle, LifecycleStages, Injector, updateAttributeByDelete, DependentOn, Plugin } from "@univerjs/core";
+import { DocHyperLinkModel, AddDocHyperLinkMutation, UniverDocsHyperLinkPlugin } from "@univerjs/docs-hyper-link";
+import { ITextSelectionRenderManager, IRenderManagerService, DocumentEditArea } from "@univerjs/engine-render";
+import { IMessageService, useObservable, KeyCode, MetaKeys, MenuGroup, MenuItemType, MenuPosition, getMenuHiddenObservable, ComponentManager, IMenuService, IShortcutService } from "@univerjs/ui";
 import { Tooltip, MessageType, FormLayout, Input, Button } from "@univerjs/design";
 import React, { forwardRef, useRef, createElement, useState, useEffect } from "react";
-import { deleteCustomRangeFactory, TextSelectionManagerService, serializeDocRange, DocSkeletonManagerService, addCustomRangeBySelectionFactory, SetTextSelectionsOperation, DocInterceptorService, DOC_INTERCEPTOR_POINT, DocCustomRangeService } from "@univerjs/docs";
-import { DocCanvasPopManagerService, whenDocAndEditorFocused, DocRenderController, IDocClipboardService } from "@univerjs/docs-ui";
+import { deleteCustomRangeFactory, TextSelectionManagerService, getCustomRangesInterestsWithRange, addCustomRangeBySelectionFactory, replaceSelectionFactory, getPlainTextFormBody, SetTextSelectionsOperation, DocInterceptorService, DOC_INTERCEPTOR_POINT, DocCustomRangeService, DocSkeletonManagerService } from "@univerjs/docs";
+import { DocCanvasPopManagerService, whenDocAndEditorFocused, DocRenderController, IDocClipboardService, DocEventManagerService } from "@univerjs/docs-ui";
 import { BehaviorSubject, Observable, debounceTime, distinctUntilChanged, pairwise } from "rxjs";
 import cs from "clsx";
 const DOC_HYPER_LINK_UI_PLUGIN = "DOC_HYPER_LINK_UI_PLUGIN";
@@ -42,15 +42,15 @@ function replaceRuntimeIdsAndExtInAttrs(node, runtimeProps, extend) {
   var attrs = __assign({}, node.attrs);
   extend != null && extend.colorChannel1 && attrs.fill === "colorChannel1" && (attrs.fill = extend.colorChannel1);
   var defIds = runtimeProps.defIds;
-  return !defIds || defIds.length === 0 || (node.tag === "use" && attrs["xlink:href"] && (attrs["xlink:href"] = attrs["xlink:href"] + runtimeProps.idSuffix), Object.entries(attrs).forEach(function(_a8) {
-    var key = _a8[0], value = _a8[1];
+  return !defIds || defIds.length === 0 || (node.tag === "use" && attrs["xlink:href"] && (attrs["xlink:href"] = attrs["xlink:href"] + runtimeProps.idSuffix), Object.entries(attrs).forEach(function(_a9) {
+    var key = _a9[0], value = _a9[1];
     typeof value == "string" && (attrs[key] = value.replace(/url\(#(.*)\)/, "url(#$1".concat(runtimeProps.idSuffix, ")")));
   })), attrs;
 }
 __name(replaceRuntimeIdsAndExtInAttrs, "replaceRuntimeIdsAndExtInAttrs");
 function replaceRuntimeIdsInDefs(node, runtimeProps) {
-  var _a8, defIds = runtimeProps.defIds;
-  return !defIds || defIds.length === 0 ? node : node.tag === "defs" && (!((_a8 = node.children) === null || _a8 === void 0) && _a8.length) ? __assign(__assign({}, node), { children: node.children.map(function(child) {
+  var _a9, defIds = runtimeProps.defIds;
+  return !defIds || defIds.length === 0 ? node : node.tag === "defs" && (!((_a9 = node.children) === null || _a9 === void 0) && _a9.length) ? __assign(__assign({}, node), { children: node.children.map(function(child) {
     return typeof child.attrs.id == "string" && defIds && defIds.indexOf(child.attrs.id) > -1 ? __assign(__assign({}, child), { attrs: __assign(__assign({}, child.attrs), { id: child.attrs.id + runtimeProps.idSuffix }) }) : child;
   }) }) : node;
 }
@@ -60,14 +60,6 @@ function generateShortUuid() {
 }
 __name(generateShortUuid, "generateShortUuid");
 IconBase.displayName = "UniverIcon";
-var element$4 = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 16 16", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { fill: "currentColor", d: "M3.71274 2.86421C3.47843 2.6299 3.09853 2.6299 2.86421 2.86421C2.6299 3.09853 2.6299 3.47843 2.86421 3.71274L7.15154 8.00007L2.86421 12.2874C2.6299 12.5217 2.6299 12.9016 2.86421 13.1359C3.09853 13.3702 3.47843 13.3702 3.71274 13.1359L8.00007 8.84859L12.2874 13.1359C12.5217 13.3702 12.9016 13.3702 13.1359 13.1359C13.3702 12.9016 13.3702 12.5217 13.1359 12.2874L8.84859 8.00007L13.1359 3.71274C13.3702 3.47843 13.3702 3.09853 13.1359 2.86421C12.9016 2.6299 12.5217 2.6299 12.2874 2.86421L8.00007 7.15154L3.71274 2.86421Z" } }] }, CloseSingle = forwardRef(function(props, ref) {
-  return createElement(IconBase, Object.assign({}, props, {
-    id: "close-single",
-    ref,
-    icon: element$4
-  }));
-});
-CloseSingle.displayName = "CloseSingle";
 var element$3 = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 16 16", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { fill: "currentColor", d: "M4.1302 12.4251C4.25802 13.7417 5.36779 14.7708 6.71792 14.7708H11.7179C13.1539 14.7708 14.3179 13.6067 14.3179 12.1708V6.1708C14.3179 4.78586 13.2351 3.65383 11.8698 3.57517C11.742 2.25858 10.6323 1.22949 9.28213 1.22949H4.28213C2.84619 1.22949 1.68213 2.39355 1.68213 3.82949V9.82949C1.68213 11.2144 2.76497 12.3465 4.1302 12.4251ZM10.6583 3.5708H6.71792C5.28198 3.5708 4.11792 4.73486 4.11792 6.1708V11.22C3.4221 11.1387 2.88213 10.5471 2.88213 9.82949V3.82949C2.88213 3.05629 3.50893 2.42949 4.28213 2.42949H9.28213C9.96695 2.42949 10.5369 2.92119 10.6583 3.5708ZM13.1179 6.1708C13.1179 5.3976 12.4911 4.7708 11.7179 4.7708H6.71792C5.94472 4.7708 5.31792 5.3976 5.31792 6.1708V12.1708C5.31792 12.944 5.94472 13.5708 6.71792 13.5708H11.7179C12.4911 13.5708 13.1179 12.944 13.1179 12.1708V6.1708Z", fillRule: "evenodd", clipRule: "evenodd" } }] }, CopySingle = forwardRef(function(props, ref) {
   return createElement(IconBase, Object.assign({}, props, {
     id: "copy-single",
@@ -106,21 +98,21 @@ const DeleteDocHyperLinkCommand = {
   async handler(accessor, params) {
     if (!params)
       return !1;
-    const { unitId, linkId } = params, commandService = accessor.get(ICommandService);
+    const { unitId, linkId, segmentId } = params, commandService = accessor.get(ICommandService);
     if (!accessor.get(DocHyperLinkModel).getLink(unitId, linkId))
       return !1;
-    const doMutation = deleteCustomRangeFactory(accessor, { unitId, rangeId: linkId });
+    const doMutation = deleteCustomRangeFactory(accessor, { unitId, rangeId: linkId, segmentId });
     return doMutation ? await commandService.syncExecuteCommand(doMutation.id, doMutation.params) : !1;
   }
 }, shouldDisableAddLink = /* @__PURE__ */ __name((accessor) => {
-  var _a8, _b;
-  const textSelectionService = accessor.get(TextSelectionManagerService), univerInstanceService = accessor.get(IUniverInstanceService), textRanges = (_a8 = textSelectionService.getCurrentTextRanges()) == null ? void 0 : _a8.map(serializeDocRange), render2 = accessor.get(IRenderManagerService).getCurrent(), skeleton = render2 == null ? void 0 : render2.with(DocSkeletonManagerService).getSkeleton(), editArea = skeleton == null ? void 0 : skeleton.getViewModel().getEditArea();
-  if (editArea === DocumentEditArea.FOOTER || editArea === DocumentEditArea.HEADER || !textRanges || textRanges.length > 1)
+  var _a9;
+  const textSelectionService = accessor.get(TextSelectionManagerService), univerInstanceService = accessor.get(IUniverInstanceService), textRanges = textSelectionService.getDocRanges();
+  if (!textRanges.length || textRanges.length > 1)
     return !0;
   const activeRange = textRanges[0], doc = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_DOC);
   if (!doc || !activeRange || activeRange.collapsed)
     return !0;
-  const paragraphs = (_b = doc.getBody()) == null ? void 0 : _b.paragraphs;
+  const body = doc.getSelfOrHeaderFooterModel(activeRange.segmentId).getBody(), paragraphs = body == null ? void 0 : body.paragraphs;
   if (!paragraphs)
     return !0;
   for (let i = 0, len = paragraphs.length; i < len; i++) {
@@ -130,14 +122,30 @@ const DeleteDocHyperLinkCommand = {
     if (p.startIndex > activeRange.endOffset)
       break;
   }
-  return !1;
+  return !getCustomRangesInterestsWithRange(activeRange, (_a9 = body.customRanges) != null ? _a9 : []).every((range) => range.rangeType === CustomRangeType.HYPERLINK);
 }, "shouldDisableAddLink"), ShowDocHyperLinkEditPopupOperation = {
   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 == null ? void 0 : params.link;
     return shouldDisableAddLink(accessor) && !linkInfo ? !1 : (accessor.get(DocHyperLinkPopupService).showEditPopup(linkInfo), !0);
   }
+}, ToggleDocHyperLinkInfoPopupOperation = {
+  type: CommandType.OPERATION,
+  id: "doc.operation.toggle-hyper-link-info-popup",
+  handler(accessor, params) {
+    const hyperLinkService = accessor.get(DocHyperLinkPopupService);
+    return params ? (hyperLinkService.showInfoPopup(params), !0) : (hyperLinkService.hideInfoPopup(), !0);
+  }
+}, ClickDocHyperLinkOperation = {
+  type: CommandType.OPERATION,
+  id: "doc.operation.click-hyper-link",
+  handler(accessor, params) {
+    if (!params)
+      return !1;
+    const { unitId, linkId } = params, link = accessor.get(DocHyperLinkModel).getLink(unitId, linkId);
+    return link ? (window.open(link.payload, "_blank", "noopener noreferrer"), !0) : !1;
+  }
 }, docLink = "univer-doc-link", docLinkType = "univer-doc-link-type", docLinkContent = "univer-doc-link-content", docLinkContentError = "univer-doc-link-content-error", docLinkUrl = "univer-doc-link-url", docLinkOperations = "univer-doc-link-operations", docLinkOperation = "univer-doc-link-operation", docLinkOperationError = "univer-doc-link-operation-error", styles$1 = {
   docLink,
   docLinkType,
@@ -151,7 +159,7 @@ const DeleteDocHyperLinkCommand = {
   const hyperLinkService = useDependency(DocHyperLinkPopupService), hyperLinkModel = useDependency(DocHyperLinkModel), commandService = useDependency(ICommandService), messageService = useDependency(IMessageService), localeService = useDependency(LocaleService), currentPopup = useObservable(hyperLinkService.showingLink$);
   if (!currentPopup)
     return null;
-  const { unitId, linkId } = currentPopup, link = hyperLinkModel.getLink(unitId, linkId);
+  const { unitId, linkId, segmentId } = currentPopup, link = hyperLinkModel.getLink(unitId, linkId);
   return link ? /* @__PURE__ */ React.createElement(
     "div",
     {
@@ -191,7 +199,8 @@ const DeleteDocHyperLinkCommand = {
         onClick: /* @__PURE__ */ __name(() => {
           commandService.executeCommand(DeleteDocHyperLinkCommand.id, {
             unitId,
-            linkId: link.id
+            linkId: link.id,
+            segmentId
           });
         }, "onClick")
       },
@@ -200,15 +209,15 @@ const DeleteDocHyperLinkCommand = {
   ) : null;
 }, "DocLinkPopup");
 DocLinkPopup.componentKey = "univer.doc.link-info-popup";
-var __defProp$6 = Object.defineProperty, __getOwnPropDesc$6 = Object.getOwnPropertyDescriptor, __decorateClass$6 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
-  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$6(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
+var __defProp$7 = Object.defineProperty, __getOwnPropDesc$7 = Object.getOwnPropertyDescriptor, __decorateClass$7 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$7(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
     (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
-  return kind && result && __defProp$6(target, key, result), result;
-}, "__decorateClass$6"), __decorateParam$6 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$6");
-const SKIT_PLACEHOLDER = 2;
+  return kind && result && __defProp$7(target, key, result), result;
+}, "__decorateClass$7"), __decorateParam$7 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$7");
+const SKIT_PLACEHOLDER = 0;
 var _a;
 let DocHyperLinkPopupService = (_a = class extends Disposable {
-  constructor(_docCanvasPopupManagerService, _textSelectionManagerService, _docHyperLinkModel, _univerInstanceService, _commandService) {
+  constructor(_docCanvasPopupManagerService, _textSelectionManagerService, _docHyperLinkModel, _univerInstanceService) {
     super();
     __publicField(this, "_editingLink$", new BehaviorSubject(null));
     __publicField(this, "_showingLink$", new BehaviorSubject(null));
@@ -216,7 +225,7 @@ let DocHyperLinkPopupService = (_a = class extends Disposable {
     __publicField(this, "showingLink$", this._showingLink$.asObservable());
     __publicField(this, "_editPopup", null);
     __publicField(this, "_infoPopup", null);
-    this._docCanvasPopupManagerService = _docCanvasPopupManagerService, this._textSelectionManagerService = _textSelectionManagerService, this._docHyperLinkModel = _docHyperLinkModel, this._univerInstanceService = _univerInstanceService, this._commandService = _commandService, this.disposeWithMe(() => {
+    this._docCanvasPopupManagerService = _docCanvasPopupManagerService, this._textSelectionManagerService = _textSelectionManagerService, this._docHyperLinkModel = _docHyperLinkModel, this._univerInstanceService = _univerInstanceService, this.disposeWithMe(() => {
       this._editingLink$.complete(), this._showingLink$.complete();
     });
   }
@@ -227,21 +236,23 @@ let DocHyperLinkPopupService = (_a = class extends Disposable {
     return this._showingLink$.value;
   }
   showEditPopup(linkInfo) {
-    var _a8, _b;
+    var _a9, _b, _c;
     this._editPopup && this._editPopup.dispose(), this._editingLink$.next(linkInfo);
     let activeRange = this._textSelectionManagerService.getActiveTextRangeWithStyle();
     if (linkInfo) {
-      const { unitId, rangeIndex } = linkInfo, doc = this._univerInstanceService.getUnit(unitId, UniverInstanceType.UNIVER_DOC), range = (_b = (_a8 = doc == null ? void 0 : doc.getBody()) == null ? void 0 : _a8.customRanges) == null ? void 0 : _b[rangeIndex];
+      const { unitId, linkId, segmentId, segmentPage } = linkInfo, doc = this._univerInstanceService.getUnit(unitId, UniverInstanceType.UNIVER_DOC), range = (_c = (_b = (_a9 = doc == null ? void 0 : doc.getSelfOrHeaderFooterModel(segmentId)) == null ? void 0 : _a9.getBody()) == null ? void 0 : _b.customRanges) == null ? void 0 : _c.find((i) => i.rangeId === linkId);
       range && (activeRange = {
         collapsed: !1,
-        startOffset: range.startIndex,
-        endOffset: range.endIndex + 1
+        startOffset: range.startIndex + SKIT_PLACEHOLDER,
+        endOffset: range.endIndex + 1,
+        segmentId,
+        segmentPage
       }, this._textSelectionManagerService.replaceTextRanges([{
         startOffset: range.startIndex,
         endOffset: range.endIndex + 1
       }]));
     }
-    return activeRange ? (activeRange.startOffset += SKIT_PLACEHOLDER, this._editPopup = this._docCanvasPopupManagerService.attachPopupToRange(
+    return activeRange ? (this._editPopup = this._docCanvasPopupManagerService.attachPopupToRange(
       activeRange,
       {
         componentKey: DocHyperLinkEdit.componentKey,
@@ -250,25 +261,27 @@ let DocHyperLinkPopupService = (_a = class extends Disposable {
     ), this._editPopup) : null;
   }
   hideEditPopup() {
-    var _a8;
-    this._editingLink$.next(null), (_a8 = this._editPopup) == null || _a8.dispose();
+    var _a9;
+    this._editingLink$.next(null), (_a9 = this._editPopup) == null || _a9.dispose();
   }
   showInfoPopup(info) {
-    var _a8, _b, _c, _d;
-    const { linkId, unitId, rangeIndex } = info;
-    if (((_a8 = this.showing) == null ? void 0 : _a8.linkId) === linkId && ((_b = this.showing) == null ? void 0 : _b.unitId) === unitId && this.showing.rangeIndex === rangeIndex)
+    var _a9, _b, _c, _d, _e, _f;
+    const { linkId, unitId, segmentId, segmentPage } = info;
+    if (((_a9 = this.showing) == null ? void 0 : _a9.linkId) === linkId && ((_b = this.showing) == null ? void 0 : _b.unitId) === unitId && ((_c = this.showing) == null ? void 0 : _c.segmentId) === segmentId && ((_d = this.showing) == null ? void 0 : _d.segmentPage) === segmentPage)
       return;
     this._infoPopup && this._infoPopup.dispose();
     const link = this._docHyperLinkModel.getLink(unitId, linkId), doc = this._univerInstanceService.getUnit(unitId, UniverInstanceType.UNIVER_DOC);
     if (!doc || !link)
       return;
-    const range = (_d = (_c = doc.getBody()) == null ? void 0 : _c.customRanges) == null ? void 0 : _d[rangeIndex];
-    if (this._showingLink$.next({ unitId, linkId, rangeIndex }), !!range)
+    const range = (_f = (_e = doc.getSelfOrHeaderFooterModel(info.segmentId).getBody()) == null ? void 0 : _e.customRanges) == null ? void 0 : _f.find((i) => i.rangeId === linkId);
+    if (this._showingLink$.next({ unitId, linkId, segmentId, segmentPage }), !!range)
       return this._infoPopup = this._docCanvasPopupManagerService.attachPopupToRange(
         {
           collapsed: !1,
           startOffset: range.startIndex + SKIT_PLACEHOLDER,
-          endOffset: range.endIndex + 1
+          endOffset: range.endIndex + 1,
+          segmentId: info.segmentId,
+          segmentPage: info.segmentPage
         },
         {
           componentKey: DocLinkPopup.componentKey,
@@ -281,16 +294,15 @@ let DocHyperLinkPopupService = (_a = class extends Disposable {
       ), this._infoPopup;
   }
   hideInfoPopup() {
-    var _a8;
-    this._showingLink$.next(null), (_a8 = this._infoPopup) == null || _a8.dispose();
+    var _a9;
+    this._showingLink$.next(null), (_a9 = this._infoPopup) == null || _a9.dispose();
   }
 }, __name(_a, "DocHyperLinkPopupService"), _a);
-DocHyperLinkPopupService = __decorateClass$6([
-  __decorateParam$6(0, Inject(DocCanvasPopManagerService)),
-  __decorateParam$6(1, Inject(TextSelectionManagerService)),
-  __decorateParam$6(2, Inject(DocHyperLinkModel)),
-  __decorateParam$6(3, IUniverInstanceService),
-  __decorateParam$6(4, ICommandService)
+DocHyperLinkPopupService = __decorateClass$7([
+  __decorateParam$7(0, Inject(DocCanvasPopManagerService)),
+  __decorateParam$7(1, Inject(TextSelectionManagerService)),
+  __decorateParam$7(2, Inject(DocHyperLinkModel)),
+  __decorateParam$7(3, IUniverInstanceService)
 ], DocHyperLinkPopupService);
 const AddDocHyperLinkCommand = {
   type: CommandType.COMMAND,
@@ -310,7 +322,7 @@ const AddDocHyperLinkCommand = {
         id: AddDocHyperLinkMutation.id,
         params: { unitId, link: { payload, id } }
       };
-      return (await sequenceExecuteAsync([hyperLinkMutation, doMutation], commandService)).result;
+      return (await sequenceExecute([hyperLinkMutation, doMutation], commandService)).result;
     }
     return !1;
   }
@@ -318,7 +330,42 @@ const AddDocHyperLinkCommand = {
   id: "docs.command.update-hyper-link",
   type: CommandType.COMMAND,
   handler(accessor, params) {
-    return params ? accessor.get(ICommandService).syncExecuteCommand(UpdateDocHyperLinkMutation.id, params) : !1;
+    if (!params)
+      return !1;
+    const { unitId, payload, segmentId } = params, commandService = accessor.get(ICommandService), currentSelection = accessor.get(TextSelectionManagerService).getActiveTextRange();
+    if (!currentSelection)
+      return !1;
+    const newId = generateRandomId(), 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: !1,
+        segmentId
+      }
+    });
+    if (!replaceSelection)
+      return !1;
+    const addLinkMutation = {
+      id: AddDocHyperLinkMutation.id,
+      params: {
+        unitId,
+        link: {
+          id: newId,
+          payload
+        }
+      }
+    };
+    return sequenceExecute([addLinkMutation, replaceSelection], commandService).result;
   }
 }, docsLinkEdit = "univer-docs-link-edit", docsLinkEditTitle = "univer-docs-link-edit-title", docsLinkEditClose = "univer-docs-link-edit-close", docsLinkEditButtons = "univer-docs-link-edit-buttons", docsLinkEditButton = "univer-docs-link-edit-button", styles = {
   docsLinkEdit,
@@ -340,23 +387,25 @@ function transformUrl(urlStr) {
 }
 __name(transformUrl, "transformUrl");
 const DocHyperLinkEdit = /* @__PURE__ */ __name(() => {
-  const hyperLinkService = useDependency(DocHyperLinkPopupService), localeService = useDependency(LocaleService), hyperLinkModel = useDependency(DocHyperLinkModel), editingId = useObservable$1(hyperLinkService.editingLink$), commandService = useDependency(ICommandService), univerInstanceService = useDependency(IUniverInstanceService), textSelectionRenderManager = useDependency(ITextSelectionRenderManager), textSelectionManagerService = useDependency(TextSelectionManagerService), [link, setLink] = useState(""), [showError, setShowError] = useState(!1), isLegal = Tools.isLegalUrl(link), doc = editingId ? univerInstanceService.getUnit(editingId.unitId, UniverInstanceType.UNIVER_DOC) : univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_DOC);
+  const hyperLinkService = useDependency(DocHyperLinkPopupService), localeService = useDependency(LocaleService), hyperLinkModel = useDependency(DocHyperLinkModel), editing = useObservable$1(hyperLinkService.editingLink$), commandService = useDependency(ICommandService), univerInstanceService = useDependency(IUniverInstanceService), textSelectionRenderManager = useDependency(ITextSelectionRenderManager), textSelectionManagerService = useDependency(TextSelectionManagerService), [link, setLink] = useState(""), [label, setLabel] = useState(""), [showError, setShowError] = useState(!1), isLegal = Tools.isLegalUrl(link), doc = editing ? univerInstanceService.getUnit(editing.unitId, UniverInstanceType.UNIVER_DOC) : univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_DOC);
   useEffect(() => {
-    var _a8, _b, _c, _d;
-    if (editingId) {
-      const linkDetail = editingId ? hyperLinkModel.getLink(editingId.unitId, editingId.linkId) : null;
-      setLink((_a8 = linkDetail == null ? void 0 : linkDetail.payload) != null ? _a8 : "");
-      return;
-    }
+    var _a9, _b, _c, _d, _e, _f, _g;
     const activeRange = textSelectionManagerService.getActiveTextRangeWithStyle();
     if (!activeRange)
       return;
-    const doc2 = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_DOC), matchedRange = (_c = (_b = doc2 == null ? void 0 : doc2.getBody()) == null ? void 0 : _b.customRanges) == null ? void 0 : _c.find((i) => Math.max(activeRange.startOffset, i.startIndex) <= Math.min(activeRange.endOffset - 1, i.endIndex));
-    if (doc2 && matchedRange) {
-      const linkDetail = hyperLinkModel.getLink(doc2.getUnitId(), matchedRange.rangeId);
-      setLink((_d = linkDetail == null ? void 0 : linkDetail.payload) != null ? _d : "");
+    if (editing) {
+      const linkDetail = editing ? hyperLinkModel.getLink(editing.unitId, editing.linkId) : null;
+      setLink((_a9 = linkDetail == null ? void 0 : linkDetail.payload) != null ? _a9 : "");
+      const body = (_b = doc == null ? void 0 : doc.getSelfOrHeaderFooterModel(editing.segmentId)) == null ? void 0 : _b.getBody(), matchedRange2 = (_c = body == null ? void 0 : body.customRanges) == null ? void 0 : _c.find((i) => (linkDetail == null ? void 0 : linkDetail.id) === i.rangeId);
+      doc && matchedRange2 && setLabel(getPlainTextFormBody(getBodySlice(body, matchedRange2.startIndex, matchedRange2.endIndex)));
+      return;
     }
-  }, [editingId, hyperLinkModel, textSelectionManagerService, univerInstanceService]), useEffect(() => (textSelectionRenderManager.blurEditor(), () => {
+    const matchedRange = (_f = (_e = (_d = doc == null ? void 0 : doc.getSelfOrHeaderFooterModel(activeRange.segmentId)) == null ? void 0 : _d.getBody()) == null ? void 0 : _e.customRanges) == null ? void 0 : _f.find((i) => Math.max(activeRange.startOffset, i.startIndex) <= Math.min(activeRange.endOffset - 1, i.endIndex));
+    if (doc && matchedRange) {
+      const linkDetail = hyperLinkModel.getLink(doc.getUnitId(), matchedRange.rangeId);
+      setLink((_g = linkDetail == null ? void 0 : linkDetail.payload) != null ? _g : "");
+    }
+  }, [doc, editing, hyperLinkModel, textSelectionManagerService, univerInstanceService]), useEffect(() => (textSelectionRenderManager.blurEditor(), () => {
     textSelectionRenderManager.focusEditor();
   }), [textSelectionRenderManager]);
   const handleCancel = /* @__PURE__ */ __name(() => {
@@ -365,23 +414,59 @@ const DocHyperLinkEdit = /* @__PURE__ */ __name(() => {
     if (setShowError(!0), !isLegal || !doc)
       return;
     const linkFinal = transformUrl(link);
-    editingId ? commandService.executeCommand(UpdateDocHyperLinkCommand.id, {
-      unitId: doc.getUnitId(),
-      payload: linkFinal,
-      linkId: editingId.linkId
-    }) : commandService.executeCommand(AddDocHyperLinkCommand.id, {
-      unitId: doc.getUnitId(),
-      payload: linkFinal
-    }), hyperLinkService.hideEditPopup();
+    if (!editing)
+      commandService.executeCommand(AddDocHyperLinkCommand.id, {
+        unitId: doc.getUnitId(),
+        payload: linkFinal
+      });
+    else {
+      if (!label)
+        return;
+      commandService.executeCommand(UpdateDocHyperLinkCommand.id, {
+        unitId: doc.getUnitId(),
+        payload: linkFinal,
+        linkId: editing.linkId,
+        label,
+        segmentId: editing.segmentId
+      });
+    }
+    hyperLinkService.hideEditPopup();
   }, "handleConfirm");
   if (doc)
-    return /* @__PURE__ */ React.createElement("div", { className: styles.docsLinkEdit }, /* @__PURE__ */ React.createElement("div", { className: styles.docsLinkEditTitle }, /* @__PURE__ */ React.createElement("span", null, localeService.t("docLink.edit.title")), /* @__PURE__ */ React.createElement(CloseSingle, { className: styles.docsLinkEditClose, onClick: handleCancel })), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement("div", { className: styles.docsLinkEdit }, /* @__PURE__ */ React.createElement("div", null, editing ? /* @__PURE__ */ React.createElement(
+      FormLayout,
+      {
+        label: localeService.t("docLink.edit.label"),
+        error: showError && !isLegal ? localeService.t("docLink.edit.labelError") : ""
+      },
+      /* @__PURE__ */ React.createElement(
+        Input,
+        {
+          value: label,
+          onChange: setLabel,
+          autoFocus: !0,
+          onKeyDown: /* @__PURE__ */ __name((evt) => {
+            evt.keyCode === KeyCode.ENTER && handleConfirm();
+          }, "onKeyDown")
+        }
+      )
+    ) : null, /* @__PURE__ */ React.createElement(
       FormLayout,
       {
         label: localeService.t("docLink.edit.address"),
         error: showError && !isLegal ? localeService.t("docLink.edit.addressError") : ""
       },
-      /* @__PURE__ */ React.createElement(Input, { value: link, onChange: setLink, autoFocus: !0 })
+      /* @__PURE__ */ React.createElement(
+        Input,
+        {
+          value: link,
+          onChange: setLink,
+          autoFocus: !0,
+          onKeyDown: /* @__PURE__ */ __name((evt) => {
+            evt.keyCode === KeyCode.ENTER && handleConfirm();
+          }, "onKeyDown")
+        }
+      )
     )), /* @__PURE__ */ React.createElement("div", { className: styles.docsLinkEditButtons }, /* @__PURE__ */ React.createElement(
       Button,
       {
@@ -429,11 +514,11 @@ const addLinkShortcut = {
   description: "docLink.menu.tooltip",
   preconditions: whenDocAndEditorFocused
 };
-var __defProp$5 = Object.defineProperty, __getOwnPropDesc$5 = Object.getOwnPropertyDescriptor, __decorateClass$5 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
-  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$5(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
+var __defProp$6 = Object.defineProperty, __getOwnPropDesc$6 = Object.getOwnPropertyDescriptor, __decorateClass$6 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$6(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
     (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
-  return kind && result && __defProp$5(target, key, result), result;
-}, "__decorateClass$5"), __decorateParam$5 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$5"), _a2;
+  return kind && result && __defProp$6(target, key, result), result;
+}, "__decorateClass$6"), __decorateParam$6 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$6"), _a2;
 let DocHyperLinkUIController = (_a2 = class extends Disposable {
   constructor(_config, _componentManager, _commandService, _menuService, _injector, _shortcutService) {
     super(), this._config = _config, this._componentManager = _componentManager, this._commandService = _commandService, this._menuService = _menuService, this._injector = _injector, this._shortcutService = _shortcutService, this._initComponents(), this._initCommands(), this._initMenus(), this._initShortcut();
@@ -452,7 +537,9 @@ let DocHyperLinkUIController = (_a2 = class extends Disposable {
       AddDocHyperLinkCommand,
       UpdateDocHyperLinkCommand,
       DeleteDocHyperLinkCommand,
-      ShowDocHyperLinkEditPopupOperation
+      ShowDocHyperLinkEditPopupOperation,
+      ToggleDocHyperLinkInfoPopupOperation,
+      ClickDocHyperLinkOperation
     ].forEach((command) => {
       this._commandService.registerCommand(command);
     });
@@ -468,19 +555,19 @@ let DocHyperLinkUIController = (_a2 = class extends Disposable {
     });
   }
 }, __name(_a2, "DocHyperLinkUIController"), _a2);
-DocHyperLinkUIController = __decorateClass$5([
+DocHyperLinkUIController = __decorateClass$6([
   OnLifecycle(LifecycleStages.Starting, DocHyperLinkUIController),
-  __decorateParam$5(1, Inject(ComponentManager)),
-  __decorateParam$5(2, ICommandService),
-  __decorateParam$5(3, IMenuService),
-  __decorateParam$5(4, Inject(Injector)),
-  __decorateParam$5(5, IShortcutService)
+  __decorateParam$6(1, Inject(ComponentManager)),
+  __decorateParam$6(2, ICommandService),
+  __decorateParam$6(3, IMenuService),
+  __decorateParam$6(4, Inject(Injector)),
+  __decorateParam$6(5, IShortcutService)
 ], DocHyperLinkUIController);
-var __defProp$4 = Object.defineProperty, __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor, __decorateClass$4 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
-  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$4(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
+var __defProp$5 = Object.defineProperty, __getOwnPropDesc$5 = Object.getOwnPropertyDescriptor, __decorateClass$5 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$5(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
     (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
-  return kind && result && __defProp$4(target, key, result), result;
-}, "__decorateClass$4"), __decorateParam$4 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$4"), _a3;
+  return kind && result && __defProp$5(target, key, result), result;
+}, "__decorateClass$5"), __decorateParam$5 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$5"), _a3;
 let DocHyperLinkSelectionController = (_a3 = class extends Disposable {
   constructor(_commandService, _univerInstanceService, _docHyperLinkService, _renderMangerService) {
     super(), this._commandService = _commandService, this._univerInstanceService = _univerInstanceService, this._docHyperLinkService = _docHyperLinkService, this._renderMangerService = _renderMangerService, this._initSelectionChange();
@@ -488,24 +575,19 @@ let DocHyperLinkSelectionController = (_a3 = class extends Disposable {
   _initSelectionChange() {
     this.disposeWithMe(
       this._commandService.onCommandExecuted((commandInfo) => {
-        var _a8, _b;
+        var _a9, _b, _c;
         if (commandInfo.id === SetTextSelectionsOperation.id) {
-          const params = commandInfo.params, { unitId, ranges } = params, render2 = this._renderMangerService.getRenderById(unitId), skeleton = render2 == null ? void 0 : render2.with(DocSkeletonManagerService).getSkeleton();
-          if ((skeleton == null ? void 0 : skeleton.getViewModel().getEditArea()) !== DocumentEditArea.BODY) {
-            this._docHyperLinkService.hideInfoPopup(), this._docHyperLinkService.hideEditPopup();
-            return;
-          }
-          const doc = this._univerInstanceService.getUnit(unitId, UniverInstanceType.UNIVER_DOC), primary = ranges[0];
+          const params = commandInfo.params, { unitId, ranges, segmentId } = params, doc = this._univerInstanceService.getUnit(unitId, UniverInstanceType.UNIVER_DOC), primary = ranges[0];
           if (primary && doc) {
-            const { startOffset, endOffset, collapsed } = primary, customRanges = (_a8 = doc.getBody()) == null ? void 0 : _a8.customRanges;
+            const { startOffset, endOffset, collapsed, segmentPage } = primary, customRanges = (_b = (_a9 = doc.getSelfOrHeaderFooterModel(segmentId)) == null ? void 0 : _a9.getBody()) == null ? void 0 : _b.customRanges;
             if (collapsed) {
-              const index = (_b = customRanges == null ? void 0 : customRanges.findIndex((value) => value.startIndex < startOffset && value.endIndex > endOffset - 1)) != null ? _b : -1;
+              const index = (_c = customRanges == null ? void 0 : customRanges.findIndex((value) => value.startIndex < startOffset && value.endIndex > endOffset - 1)) != null ? _c : -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 if (customRanges != null && customRanges.find((value) => value.startIndex <= startOffset && value.endIndex >= endOffset - 1))
+            } else if (customRanges == null ? void 0 : customRanges.find((value) => value.startIndex <= startOffset && value.endIndex >= endOffset - 1))
               return;
           }
           this._docHyperLinkService.hideInfoPopup(), this._docHyperLinkService.hideEditPopup();
@@ -514,18 +596,18 @@ let DocHyperLinkSelectionController = (_a3 = class extends Disposable {
     );
   }
 }, __name(_a3, "DocHyperLinkSelectionController"), _a3);
-DocHyperLinkSelectionController = __decorateClass$4([
+DocHyperLinkSelectionController = __decorateClass$5([
   OnLifecycle(LifecycleStages.Ready, DocHyperLinkSelectionController),
-  __decorateParam$4(0, ICommandService),
-  __decorateParam$4(1, IUniverInstanceService),
-  __decorateParam$4(2, Inject(DocHyperLinkPopupService)),
-  __decorateParam$4(3, IRenderManagerService)
+  __decorateParam$5(0, ICommandService),
+  __decorateParam$5(1, IUniverInstanceService),
+  __decorateParam$5(2, Inject(DocHyperLinkPopupService)),
+  __decorateParam$5(3, IRenderManagerService)
 ], DocHyperLinkSelectionController);
-var __defProp$3 = Object.defineProperty, __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor, __decorateClass$3 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
-  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$3(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
+var __defProp$4 = Object.defineProperty, __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor, __decorateClass$4 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$4(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
     (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
-  return kind && result && __defProp$3(target, key, result), result;
-}, "__decorateClass$3"), __decorateParam$3 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$3"), _a4;
+  return kind && result && __defProp$4(target, key, result), result;
+}, "__decorateClass$4"), __decorateParam$4 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$4"), _a4;
 let DocHyperLinkRenderController = (_a4 = class extends Disposable {
   constructor(_context, _docInterceptorService, _hyperLinkService, _docRenderController) {
     super(), this._context = _context, this._docInterceptorService = _docInterceptorService, this._hyperLinkService = _hyperLinkService, this._docRenderController = _docRenderController, this._init(), this._initReRender();
@@ -552,16 +634,16 @@ let DocHyperLinkRenderController = (_a4 = class extends Disposable {
     }));
   }
 }, __name(_a4, "DocHyperLinkRenderController"), _a4);
-DocHyperLinkRenderController = __decorateClass$3([
-  __decorateParam$3(1, Inject(DocInterceptorService)),
-  __decorateParam$3(2, Inject(DocHyperLinkPopupService)),
-  __decorateParam$3(3, Inject(DocRenderController))
+DocHyperLinkRenderController = __decorateClass$4([
+  __decorateParam$4(1, Inject(DocInterceptorService)),
+  __decorateParam$4(2, Inject(DocHyperLinkPopupService)),
+  __decorateParam$4(3, Inject(DocRenderController))
 ], DocHyperLinkRenderController);
-var __defProp$2 = Object.defineProperty, __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor, __decorateClass$2 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
-  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$2(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
+var __defProp$3 = Object.defineProperty, __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor, __decorateClass$3 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$3(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
     (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
-  return kind && result && __defProp$2(target, key, result), result;
-}, "__decorateClass$2"), __decorateParam$2 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$2"), _a5;
+  return kind && result && __defProp$3(target, key, result), result;
+}, "__decorateClass$3"), __decorateParam$3 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$3"), _a5;
 let DocHyperLinkClipboardController = (_a5 = class extends Disposable {
   constructor(_docClipboardService, _univerInstanceService, _hyperLinkModel, _textSelectionManagerService, _commandService) {
     super(), this._docClipboardService = _docClipboardService, this._univerInstanceService = _univerInstanceService, this._hyperLinkModel = _hyperLinkModel, this._textSelectionManagerService = _textSelectionManagerService, this._commandService = _commandService, this._initClipboard();
@@ -569,13 +651,13 @@ let DocHyperLinkClipboardController = (_a5 = class extends Disposable {
   _initClipboard() {
     this.disposeWithMe(this._docClipboardService.addClipboardHook({
       onBeforePaste: /* @__PURE__ */ __name((body) => {
-        var _a8, _b;
+        var _a9, _b;
         const doc = this._univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_DOC);
         if (!doc)
           return body;
-        const activeRange = this._textSelectionManagerService.getActiveTextRangeWithStyle(), customRanges = (_a8 = doc.getBody()) == null ? void 0 : _a8.customRanges;
+        const activeRange = this._textSelectionManagerService.getActiveTextRangeWithStyle(), customRanges = (_a9 = doc.getBody()) == null ? void 0 : _a9.customRanges;
         if (activeRange ? customRanges == null ? void 0 : customRanges.find(
-          (range) => range.rangeType === CustomRangeType.HYPERLINK && range.startIndex <= activeRange.startOffset && range.endIndex >= activeRange.endOffset - 1
+          (range) => range.rangeType === CustomRangeType.HYPERLINK && range.startIndex < activeRange.startOffset && range.endIndex > activeRange.endOffset - 1
         ) : null) {
           const { customRanges: customRanges2 = [], ...extBody } = body, deleteIndexes = customRanges2.filter((range) => range.rangeType === CustomRangeType.HYPERLINK).map((i) => [i.startIndex, i.endIndex]).flat().sort((pre, aft) => pre - aft), bodyWithoutLink = {
             ...extBody,
@@ -587,7 +669,7 @@ let DocHyperLinkClipboardController = (_a5 = class extends Disposable {
         } else {
           const unitId = doc.getUnitId(), customRangeIds = new Set(customRanges == null ? void 0 : customRanges.map((i) => i.rangeType === CustomRangeType.HYPERLINK && i.rangeId));
           (_b = body.customRanges) == null || _b.forEach((range) => {
-            var _a9;
+            var _a10;
             if (range.rangeType === CustomRangeType.HYPERLINK) {
               if (customRangeIds.has(range.rangeId)) {
                 const link = this._hyperLinkModel.getLink(unitId, range.rangeId);
@@ -604,7 +686,7 @@ let DocHyperLinkClipboardController = (_a5 = class extends Disposable {
                     }
                   ), range.rangeId = newId;
                 }
-              } else if ((_a9 = body.payloads) != null && _a9[range.rangeId]) {
+              } else if ((_a10 = body.payloads) != null && _a10[range.rangeId]) {
                 const url = body.payloads[range.rangeId];
                 this._commandService.executeCommand(
                   AddDocHyperLinkMutation.id,
@@ -625,19 +707,19 @@ let DocHyperLinkClipboardController = (_a5 = class extends Disposable {
     }));
   }
 }, __name(_a5, "DocHyperLinkClipboardController"), _a5);
-DocHyperLinkClipboardController = __decorateClass$2([
+DocHyperLinkClipboardController = __decorateClass$3([
   OnLifecycle(LifecycleStages.Ready, DocHyperLinkClipboardController),
-  __decorateParam$2(0, Inject(IDocClipboardService)),
-  __decorateParam$2(1, IUniverInstanceService),
-  __decorateParam$2(2, Inject(DocHyperLinkModel)),
-  __decorateParam$2(3, Inject(TextSelectionManagerService)),
-  __decorateParam$2(4, ICommandService)
+  __decorateParam$3(0, Inject(IDocClipboardService)),
+  __decorateParam$3(1, IUniverInstanceService),
+  __decorateParam$3(2, Inject(DocHyperLinkModel)),
+  __decorateParam$3(3, Inject(TextSelectionManagerService)),
+  __decorateParam$3(4, ICommandService)
 ], DocHyperLinkClipboardController);
-var __defProp$1 = Object.defineProperty, __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor, __decorateClass$1 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
-  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
+var __defProp$2 = Object.defineProperty, __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor, __decorateClass$2 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$2(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
     (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
-  return kind && result && __defProp$1(target, key, result), result;
-}, "__decorateClass$1"), __decorateParam$1 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$1"), _a6;
+  return kind && result && __defProp$2(target, key, result), result;
+}, "__decorateClass$2"), __decorateParam$2 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$2"), _a6;
 let DocHyperLinkCustomRangeController = (_a6 = class extends Disposable {
   constructor(_docCustomRangeService, _docHyperLinkModel, _commandService) {
     super(), this._docCustomRangeService = _docCustomRangeService, this._docHyperLinkModel = _docHyperLinkModel, this._commandService = _commandService, this._initCustomRangeHooks();
@@ -689,18 +771,77 @@ let DocHyperLinkCustomRangeController = (_a6 = class extends Disposable {
     );
   }
 }, __name(_a6, "DocHyperLinkCustomRangeController"), _a6);
-DocHyperLinkCustomRangeController = __decorateClass$1([
+DocHyperLinkCustomRangeController = __decorateClass$2([
   OnLifecycle(LifecycleStages.Ready, DocHyperLinkCustomRangeController),
-  __decorateParam$1(0, Inject(DocCustomRangeService)),
-  __decorateParam$1(1, Inject(DocHyperLinkModel)),
-  __decorateParam$1(2, ICommandService)
+  __decorateParam$2(0, Inject(DocCustomRangeService)),
+  __decorateParam$2(1, Inject(DocHyperLinkModel)),
+  __decorateParam$2(2, ICommandService)
 ], DocHyperLinkCustomRangeController);
+var __defProp$1 = Object.defineProperty, __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor, __decorateClass$1 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
+    (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
+  return kind && result && __defProp$1(target, key, result), result;
+}, "__decorateClass$1"), __decorateParam$1 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$1"), _a7;
+let DocHyperLinkEventRenderController = (_a7 = class extends Disposable {
+  constructor(_context, _docEventManagerService, _commandService, _hyperLinkPopupService, _docSkeletonManagerService) {
+    super(), this._context = _context, this._docEventManagerService = _docEventManagerService, this._commandService = _commandService, this._hyperLinkPopupService = _hyperLinkPopupService, this._docSkeletonManagerService = _docSkeletonManagerService, this._initHover(), this._initClick();
+  }
+  get _skeleton() {
+    return this._docSkeletonManagerService.getSkeleton();
+  }
+  _hideInfoPopup() {
+    this._hyperLinkPopupService.showing && this._commandService.executeCommand(
+      ToggleDocHyperLinkInfoPopupOperation.id
+    );
+  }
+  _initHover() {
+    this.disposeWithMe(
+      this._docEventManagerService.hoverCustomRanges$.subscribe((ranges) => {
+        const link = ranges.find((range) => range.range.rangeType === CustomRangeType.HYPERLINK), editArea = this._skeleton.getViewModel().getEditArea();
+        if (link != null && link.segmentId && editArea === DocumentEditArea.BODY || !(link != null && link.segmentId) && editArea !== DocumentEditArea.BODY) {
+          this._hideInfoPopup();
+          return;
+        }
+        link ? this._commandService.executeCommand(
+          ToggleDocHyperLinkInfoPopupOperation.id,
+          {
+            unitId: this._context.unitId,
+            linkId: link.range.rangeId,
+            segmentId: link.segmentId,
+            segmentPage: link.segmentPageIndex,
+            rangeId: link.range.rangeId
+          }
+        ) : this._hideInfoPopup();
+      })
+    );
+  }
+  _initClick() {
+    this.disposeWithMe(
+      this._docEventManagerService.clickCustomRanges$.subscribe((range) => {
+        const link = range.range;
+        link && this._commandService.executeCommand(
+          ClickDocHyperLinkOperation.id,
+          {
+            unitId: this._context.unitId,
+            linkId: link.rangeId
+          }
+        );
+      })
+    );
+  }
+}, __name(_a7, "DocHyperLinkEventRenderController"), _a7);
+DocHyperLinkEventRenderController = __decorateClass$1([
+  __decorateParam$1(1, Inject(DocEventManagerService)),
+  __decorateParam$1(2, ICommandService),
+  __decorateParam$1(3, Inject(DocHyperLinkPopupService)),
+  __decorateParam$1(4, Inject(DocSkeletonManagerService))
+], DocHyperLinkEventRenderController);
 var __defProp2 = Object.defineProperty, __getOwnPropDesc = Object.getOwnPropertyDescriptor, __defNormalProp2 = /* @__PURE__ */ __name((obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, "__defNormalProp"), __decorateClass = /* @__PURE__ */ __name((decorators, target, key, kind) => {
   for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
     (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
   return kind && result && __defProp2(target, key, result), result;
-}, "__decorateClass"), __decorateParam = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam"), __publicField2 = /* @__PURE__ */ __name((obj, key, value) => __defNormalProp2(obj, typeof key != "symbol" ? key + "" : key, value), "__publicField"), _a7;
-let UniverDocsHyperLinkUIPlugin = (_a7 = class extends Plugin {
+}, "__decorateClass"), __decorateParam = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam"), __publicField2 = /* @__PURE__ */ __name((obj, key, value) => __defNormalProp2(obj, typeof key != "symbol" ? key + "" : key, value), "__publicField"), _a8;
+let UniverDocsHyperLinkUIPlugin = (_a8 = class extends Plugin {
   constructor(_config = { menu: {} }, _injector, _renderManagerSrv) {
     super(), this._config = _config, this._injector = _injector, this._renderManagerSrv = _renderManagerSrv;
   }
@@ -724,11 +865,14 @@ let UniverDocsHyperLinkUIPlugin = (_a7 = class extends Plugin {
     this._initRenderModule();
   }
   _initRenderModule() {
-    [DocHyperLinkRenderController].forEach((dep) => {
+    [
+      [DocHyperLinkRenderController],
+      [DocHyperLinkEventRenderController]
+    ].forEach((dep) => {
       this._renderManagerSrv.registerRenderModule(UniverInstanceType.UNIVER_DOC, dep);
     });
   }
-}, __name(_a7, "UniverDocsHyperLinkUIPlugin"), _a7);
+}, __name(_a8, "UniverDocsHyperLinkUIPlugin"), _a8);
 __publicField2(UniverDocsHyperLinkUIPlugin, "pluginName", DOC_HYPER_LINK_UI_PLUGIN);
 __publicField2(UniverDocsHyperLinkUIPlugin, "type", UniverInstanceType.UNIVER_DOC);
 UniverDocsHyperLinkUIPlugin = __decorateClass([