@univerjs/sheets-hyper-link-ui 0.2.12 → 0.2.14

package/lib/es/index.js

@@ -2,49 +2,347 @@ 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 { Disposable, UniverInstanceType, isValidRange, Inject, LocaleService, RANGE_TYPE, Rectangle, IUniverInstanceService, ICommandService, IConfigService, Tools, DEFAULT_EMPTY_DOCUMENT_VALUE, CommandType, IUndoRedoService, sequenceExecuteAsync, useDependency, createInternalEditorID, Range, ObjectMatrix, OnLifecycle, LifecycleStages, Injector, BooleanNumber, ThemeService, CellValueType, CustomRangeType, IPermissionService, Plugin, DependentOn } from "@univerjs/core";
-import { ERROR_RANGE, AddHyperLinkMutation, RemoveHyperLinkMutation, HyperLinkModel, UpdateHyperLinkMutation, UniverSheetsHyperLinkPlugin } from "@univerjs/sheets-hyper-link";
-import { ScrollToRangeOperation, SheetCanvasPopManagerService, COPY_TYPE, virtualizeDiscreteRanges, rangeToDiscreteRange, PREDEFINED_HOOK_NAME, getRepeatRange, ISheetClipboardService, SheetSkeletonManagerService, IEditorBridgeService, HoverManagerService, SheetPermissionInterceptorBaseController, whenSheetEditorFocused, getObservableWithExclusiveRange$, getCurrentRangeDisable$, APPLY_TYPE, IAutoFillService, getAutoFillRepeatRange } from "@univerjs/sheets-ui";
-import { Subject, BehaviorSubject, debounceTime } from "rxjs";
-import require$$0, { forwardRef, useRef, createElement, useState, useMemo, useEffect } from "react";
-import cs from "clsx";
-import { MessageType, FormLayout, Input, Select, Button, Tooltip } from "@univerjs/design";
-import { IMessageService, useObservable, useEvent, RangeSelector, ISidebarService, KeyCode, MetaKeys, MenuItemType, getMenuHiddenObservable, RibbonStartGroup, ContextMenuPosition, ContextMenuGroup, ComponentManager, IShortcutService, IMenuManagerService } from "@univerjs/ui";
-import { deserializeRangeWithSheet, serializeRangeWithSheet, IDefinedNamesService, serializeRangeToRefString, serializeRange } from "@univerjs/engine-formula";
-import { SetSelectionsOperation, SetWorksheetActiveOperation, SheetInterceptorService, getSheetCommandTarget, SheetsSelectionsService, RemoveSheetCommand, INTERCEPTOR_POINT, SetRangeValuesMutation, SetRangeValuesUndoMutationFactory, SetRangeValuesCommand, ClearSelectionContentCommand, ClearSelectionAllCommand, ClearSelectionFormatCommand, WorkbookViewPermission, WorksheetViewPermission, RangeProtectionPermissionViewPoint, WorkbookEditablePermission, WorksheetEditPermission, WorksheetInsertHyperlinkPermission, RangeProtectionPermissionEditPoint, WorkbookCopyPermission, WorksheetCopyPermission, WorksheetSetCellValuePermission } from "@univerjs/sheets";
+import { CommandType, ICommandService, IUndoRedoService, IUniverInstanceService, UniverInstanceType, BuildTextUtils, DataStreamTreeTokenType, CustomRangeType, TextX, CellValueType, sequenceExecuteAsync, generateRandomId, Tools, sequenceExecute, getBodySlice, isValidRange, Inject, LocaleService, RANGE_TYPE, Rectangle, IConfigService, useDependency, DOCS_ZEN_EDITOR_UNIT_ID_KEY, DEFAULT_EMPTY_DOCUMENT_VALUE, Disposable, IContextService, createInternalEditorID, FOCUSING_SHEET, Injector, Range, ObjectMatrix, OnLifecycle, LifecycleStages, DataValidationType, ThemeService, DOCS_NORMAL_EDITOR_UNIT_ID_KEY, IPermissionService, DisposableCollection, Plugin, DependentOn } from "@univerjs/core";
+import { DocSelectionManagerService } from "@univerjs/docs";
+import { addCustomRangeBySelectionFactory, deleteCustomRangeFactory, replaceSelectionFactory, getPlainTextFormBody, getPlainText, getPlainTextFormDocument, DocCanvasPopManagerService, DocEventManagerService, UniverDocsUIPlugin } from "@univerjs/docs-ui";
 import { IRenderManagerService } from "@univerjs/engine-render";
-import { getPlainTextFormDocument } from "@univerjs/docs";
-var LinkType = /* @__PURE__ */ ((LinkType2) => (LinkType2.link = "link", LinkType2.range = "range", LinkType2.sheet = "gid", LinkType2.definedName = "rangeid", LinkType2))(LinkType || {});
-const _SheetsHyperLinkSidePanelService = class _SheetsHyperLinkSidePanelService extends Disposable {
-  constructor() {
-    super(...arguments);
-    __publicField(this, "_customHyperLinks", /* @__PURE__ */ new Map());
-  }
-  isBuiltInLinkType(type) {
-    return !!LinkType[type];
-  }
-  getOptions() {
-    return Array.from(this._customHyperLinks.values()).map(({ option }) => option);
-  }
-  findCustomHyperLink(link) {
-    return Array.from(this._customHyperLinks.values()).find((item) => item.match(link));
-  }
-  registerCustomHyperLink(customHyperLink) {
-    this._customHyperLinks.set(customHyperLink.type, customHyperLink);
+import { SetRangeValuesMutation, SetRangeValuesUndoMutationFactory, SetSelectionsOperation, SetWorksheetActiveOperation, getSheetCommandTarget, SheetsSelectionsService, WorkbookEditablePermission, WorksheetEditPermission, WorksheetSetCellValuePermission, WorksheetInsertHyperlinkPermission, RangeProtectionPermissionEditPoint, RemoveSheetCommand, SheetInterceptorService, INTERCEPTOR_POINT, SetRangeValuesCommand, ClearSelectionContentCommand, ClearSelectionAllCommand, ClearSelectionFormatCommand, WorkbookViewPermission, WorksheetViewPermission, RangeProtectionPermissionViewPoint, WorkbookCopyPermission, WorksheetCopyPermission, RefRangeService, handleDefaultRangeChangeWithEffectRefCommands } from "@univerjs/sheets";
+import { HyperLinkModel, RemoveHyperLinkMutation, AddHyperLinkMutation, SheetHyperLinkType, ERROR_RANGE, UniverSheetsHyperLinkPlugin } from "@univerjs/sheets-hyper-link";
+import { SheetSkeletonManagerService, ScrollToRangeOperation, IEditorBridgeService, IMarkSelectionService, getEditingCustomRangePosition, getCustomRangePosition, SheetCanvasPopManagerService, COPY_TYPE, virtualizeDiscreteRanges, rangeToDiscreteRange, PREDEFINED_HOOK_NAME, getRepeatRange, ISheetClipboardService, whenSheetEditorFocused, getCurrentRangeDisable$, HoverRenderController, HoverManagerService, SheetPermissionInterceptorBaseController, APPLY_TYPE, IAutoFillService, getAutoFillRepeatRange } from "@univerjs/sheets-ui";
+import { Subject, BehaviorSubject, map, mergeMap, Observable, debounceTime } from "rxjs";
+import { IMessageService, useObservable, IZenZoneService, useEvent, KeyCode, RangeSelector, IEditorService, IRangeSelectorService, MenuItemType, MenuPosition, MenuGroup, MetaKeys, getMenuHiddenObservable, RibbonStartGroup, ContextMenuPosition, ContextMenuGroup, ComponentManager, IShortcutService, IMenuManagerService } from "@univerjs/ui";
+import require$$0, { forwardRef, useRef, createElement, useState, useEffect, useMemo } from "react";
+import cs from "clsx";
+import { MessageType, Tooltip, FormLayout, Input, Select, Button } from "@univerjs/design";
+import { deserializeRangeWithSheet, serializeRangeWithSheet, serializeRange, IDefinedNamesService, serializeRangeToRefString } from "@univerjs/engine-formula";
+const AddHyperLinkCommand = {
+  type: CommandType.COMMAND,
+  id: "sheets.command.add-hyper-link",
+  // eslint-disable-next-line max-lines-per-function
+  async handler(accessor, params) {
+    var _a15;
+    if (!params)
+      return !1;
+    const commandService = accessor.get(ICommandService), undoRedoService = accessor.get(IUndoRedoService), renderManagerService = accessor.get(IRenderManagerService), univerInstanceService = accessor.get(IUniverInstanceService), hyperLinkModel = accessor.get(HyperLinkModel), { unitId, subUnitId, link } = params, workbook = univerInstanceService.getUnit(unitId, UniverInstanceType.UNIVER_SHEET), currentRender = renderManagerService.getRenderById(unitId);
+    if (!currentRender || !workbook)
+      return !1;
+    const worksheet = workbook == null ? void 0 : workbook.getSheetBySheetId(subUnitId), skeleton = (_a15 = currentRender.with(SheetSkeletonManagerService).getCurrent()) == null ? void 0 : _a15.skeleton;
+    if (!worksheet || !skeleton)
+      return !1;
+    const { payload, display, row, column, id } = link, cellData = worksheet.getCell(row, column), doc = skeleton.getBlankCellDocumentModel(cellData), snapshot = doc.documentModel.getSnapshot(), body = snapshot.body;
+    if (!body)
+      return !1;
+    let textX;
+    if (display ? textX = BuildTextUtils.selection.replace({
+      selection: {
+        startOffset: 0,
+        endOffset: body.dataStream.length - 2,
+        collapsed: !0
+      },
+      body: {
+        dataStream: `${DataStreamTreeTokenType.CUSTOM_RANGE_START}${display}${DataStreamTreeTokenType.CUSTOM_RANGE_END}`,
+        customRanges: [{
+          startIndex: 0,
+          endIndex: display.length + 1,
+          rangeType: CustomRangeType.HYPERLINK,
+          rangeId: id,
+          properties: {
+            url: payload
+            // refId: id,
+          }
+        }]
+      },
+      doc: doc.documentModel
+    }) : textX = BuildTextUtils.customRange.add({
+      body,
+      range: { startOffset: 0, endOffset: body.dataStream.length - 2, collapsed: !1 },
+      rangeId: id,
+      rangeType: CustomRangeType.HYPERLINK,
+      properties: {
+        url: payload,
+        refId: id
+      }
+    }), !textX)
+      return !1;
+    const newBody = TextX.apply(body, textX.serialize()), rangeValue = {
+      ...snapshot,
+      body: newBody
+    }, redoParams = {
+      unitId,
+      subUnitId,
+      cellValue: {
+        [link.row]: {
+          [link.column]: {
+            p: rangeValue,
+            t: CellValueType.STRING
+          }
+        }
+      }
+    }, redo = {
+      id: SetRangeValuesMutation.id,
+      params: redoParams
+    }, undoParams = SetRangeValuesUndoMutationFactory(accessor, redoParams), undo = {
+      id: SetRangeValuesMutation.id,
+      params: undoParams
+    }, redos = [redo], undos = [undo], modelLink = hyperLinkModel.getHyperLinkByLocation(unitId, subUnitId, row, column);
+    return modelLink && (redos.push({
+      id: RemoveHyperLinkMutation.id,
+      params: {
+        unitId,
+        subUnitId,
+        id: modelLink.id
+      }
+    }), undos.push({
+      id: AddHyperLinkMutation.id,
+      params: {
+        unitId,
+        subUnitId,
+        link: modelLink
+      }
+    })), await sequenceExecuteAsync(redos, commandService) ? (undoRedoService.pushUndoRedo({
+      redoMutations: redos,
+      undoMutations: undos,
+      unitID: unitId
+    }), !0) : !1;
   }
-  getCustomHyperLink(type) {
-    return this._customHyperLinks.get(type);
+}, AddRichHyperLinkCommand = {
+  id: "sheets.command.add-rich-hyper-link",
+  type: CommandType.COMMAND,
+  handler: /* @__PURE__ */ __name(async (accessor, params) => {
+    if (!params)
+      return !1;
+    const { documentId, link } = params, commandService = accessor.get(ICommandService), textSelectionService = accessor.get(DocSelectionManagerService), newId = generateRandomId(), { payload } = link;
+    if (!textSelectionService.getActiveTextRange())
+      return !1;
+    const replaceSelection = addCustomRangeBySelectionFactory(accessor, {
+      unitId: documentId,
+      rangeId: newId,
+      rangeType: CustomRangeType.HYPERLINK,
+      properties: {
+        url: payload,
+        refId: newId
+      }
+    });
+    return replaceSelection ? commandService.syncExecuteCommand(replaceSelection.id, replaceSelection.params) : !1;
+  }, "handler")
+}, CancelHyperLinkCommand = {
+  type: CommandType.COMMAND,
+  id: "sheets.command.cancel-hyper-link",
+  // eslint-disable-next-line max-lines-per-function
+  handler(accessor, params) {
+    var _a15, _b, _c;
+    if (!params)
+      return !1;
+    const commandService = accessor.get(ICommandService), undoRedoService = accessor.get(IUndoRedoService), renderManagerService = accessor.get(IRenderManagerService), univerInstanceService = accessor.get(IUniverInstanceService), hyperLinkModel = accessor.get(HyperLinkModel), { unitId, subUnitId, row, column, id } = params, workbook = univerInstanceService.getUnit(unitId, UniverInstanceType.UNIVER_SHEET), currentRender = renderManagerService.getRenderById(unitId);
+    if (!currentRender || !workbook)
+      return !1;
+    const worksheet = workbook == null ? void 0 : workbook.getSheetBySheetId(subUnitId), skeleton = (_a15 = currentRender.with(SheetSkeletonManagerService).getCurrent()) == null ? void 0 : _a15.skeleton;
+    if (!worksheet || !skeleton)
+      return !1;
+    const cellData = worksheet.getCell(row, column);
+    if (!cellData)
+      return !1;
+    const doc = skeleton.getCellDocumentModelWithFormula(cellData);
+    if (!(doc != null && doc.documentModel))
+      return !1;
+    const snapshot = Tools.deepClone(doc.documentModel.getSnapshot());
+    if (!((_c = (_b = snapshot.body) == null ? void 0 : _b.customRanges) == null ? void 0 : _c.find((range2) => range2.rangeId === id)))
+      return !1;
+    const textX = BuildTextUtils.customRange.delete(accessor, { documentDataModel: doc.documentModel, rangeId: id });
+    if (!textX)
+      return !1;
+    const newBody = TextX.apply(snapshot.body, textX.serialize()), redos = [], undos = [], setRangeParams = {
+      unitId,
+      subUnitId,
+      cellValue: {
+        [row]: {
+          [column]: {
+            p: {
+              ...snapshot,
+              body: newBody
+            },
+            t: CellValueType.STRING
+          }
+        }
+      }
+    };
+    redos.push({
+      id: SetRangeValuesMutation.id,
+      params: setRangeParams
+    });
+    const undoParams = SetRangeValuesUndoMutationFactory(accessor, setRangeParams);
+    undos.push({
+      id: SetRangeValuesMutation.id,
+      params: undoParams
+    });
+    const link = hyperLinkModel.getHyperLinkByLocation(unitId, subUnitId, row, column);
+    return link && (redos.push({
+      id: RemoveHyperLinkMutation.id,
+      params: {
+        unitId,
+        subUnitId,
+        id
+      }
+    }), undos.push({
+      id: AddHyperLinkMutation.id,
+      params: {
+        unitId,
+        subUnitId,
+        link: {
+          ...link
+        }
+      }
+    })), sequenceExecute(redos, commandService).result ? (undoRedoService.pushUndoRedo({
+      redoMutations: redos,
+      undoMutations: undos,
+      unitID: unitId
+    }), !0) : !1;
   }
-  removeCustomHyperLink(type) {
-    const { _customHyperLinks } = this;
-    _customHyperLinks.delete(type);
+}, CancelRichHyperLinkCommand = {
+  type: CommandType.COMMAND,
+  id: "sheets.command.cancel-rich-hyper-link",
+  handler(accessor, params) {
+    var _a15, _b;
+    if (!params)
+      return !1;
+    const { id: linkId, documentId } = params, commandService = accessor.get(ICommandService), doc = accessor.get(IUniverInstanceService).getUnit(documentId, UniverInstanceType.UNIVER_DOC), link = (_b = (_a15 = doc == null ? void 0 : doc.getBody()) == null ? void 0 : _a15.customRanges) == null ? void 0 : _b.find((i) => i.rangeId === linkId);
+    let insert = null;
+    link && link.endIndex === doc.getBody().dataStream.length - 3 && (insert = {
+      dataStream: " "
+    });
+    const doMutation = deleteCustomRangeFactory(accessor, { unitId: documentId, rangeId: linkId, insert });
+    return doMutation ? commandService.syncExecuteCommand(doMutation.id, doMutation.params) : !1;
   }
-  dispose() {
-    super.dispose(), this._customHyperLinks.clear();
+}, UpdateHyperLinkCommand = {
+  type: CommandType.COMMAND,
+  id: "sheets.command.update-hyper-link",
+  // eslint-disable-next-line max-lines-per-function, complexity
+  async handler(accessor, params) {
+    var _a15, _b, _c, _d;
+    if (!params)
+      return !1;
+    const commandService = accessor.get(ICommandService), undoRedoService = accessor.get(IUndoRedoService), renderManagerService = accessor.get(IRenderManagerService), univerInstanceService = accessor.get(IUniverInstanceService), hyperLinkModel = accessor.get(HyperLinkModel), { unitId, subUnitId, payload: link, row, column, id } = params, workbook = univerInstanceService.getUnit(unitId, UniverInstanceType.UNIVER_SHEET), currentRender = renderManagerService.getRenderById(unitId);
+    if (!currentRender || !workbook)
+      return !1;
+    const worksheet = workbook == null ? void 0 : workbook.getSheetBySheetId(subUnitId), skeleton = (_a15 = currentRender.with(SheetSkeletonManagerService).getCurrent()) == null ? void 0 : _a15.skeleton;
+    if (!worksheet || !skeleton)
+      return !1;
+    const { payload, display = "" } = link, cellData = worksheet.getCell(row, column);
+    if (!cellData)
+      return !1;
+    const doc = skeleton.getCellDocumentModelWithFormula(cellData);
+    if (!(doc != null && doc.documentModel))
+      return !1;
+    const snapshot = doc.documentModel.getSnapshot(), range = (_c = (_b = snapshot.body) == null ? void 0 : _b.customRanges) == null ? void 0 : _c.find((range2) => range2.rangeId === id);
+    if (!range)
+      return !1;
+    const newId = generateRandomId(), textRun = (_d = getBodySlice(doc.documentModel.getBody(), range.startIndex, range.endIndex + 1).textRuns) == null ? void 0 : _d[0];
+    textRun && (textRun.ed = display.length + 1);
+    const replaceSelection = replaceSelectionFactory(accessor, {
+      unitId,
+      body: {
+        dataStream: `${DataStreamTreeTokenType.CUSTOM_RANGE_START}${display}${DataStreamTreeTokenType.CUSTOM_RANGE_END}`,
+        customRanges: [{
+          rangeId: newId,
+          rangeType: CustomRangeType.HYPERLINK,
+          startIndex: 0,
+          endIndex: display.length + 1,
+          properties: {
+            url: payload
+          }
+        }],
+        textRuns: textRun ? [textRun] : void 0
+      },
+      selection: {
+        startOffset: range.startIndex,
+        endOffset: range.endIndex + 1,
+        collapsed: !1
+      },
+      doc: doc.documentModel
+    });
+    if (!replaceSelection)
+      return !1;
+    const newBody = TextX.apply(snapshot.body, replaceSelection.textX.serialize()), redo = {
+      id: SetRangeValuesMutation.id,
+      params: {
+        unitId,
+        subUnitId,
+        cellValue: {
+          [row]: {
+            [column]: {
+              p: {
+                ...snapshot,
+                body: newBody
+              },
+              t: CellValueType.STRING
+            }
+          }
+        }
+      }
+    }, undoParams = SetRangeValuesUndoMutationFactory(accessor, redo.params), undo = {
+      id: SetRangeValuesMutation.id,
+      params: undoParams
+    }, redos = [redo], undos = [undo], modelLink = hyperLinkModel.getHyperLinkByLocation(unitId, subUnitId, row, column);
+    return modelLink && (redos.push({
+      id: RemoveHyperLinkMutation.id,
+      params: {
+        unitId,
+        subUnitId,
+        id: modelLink.id
+      }
+    }), undos.push({
+      id: AddHyperLinkMutation.id,
+      params: {
+        unitId,
+        subUnitId,
+        link: modelLink
+      }
+    })), await sequenceExecuteAsync(redos, commandService) ? (undoRedoService.pushUndoRedo({
+      redoMutations: redos,
+      undoMutations: undos,
+      unitID: unitId
+    }), !0) : !1;
   }
+}, UpdateRichHyperLinkCommand = {
+  type: CommandType.COMMAND,
+  id: "sheets.command.update-rich-hyper-link",
+  handler: /* @__PURE__ */ __name((accessor, params) => {
+    var _a15, _b, _c, _d;
+    if (!params)
+      return !1;
+    const { documentId: unitId, payload, id: rangeId } = params, univerInstanceService = accessor.get(IUniverInstanceService), commandService = accessor.get(ICommandService), doc = univerInstanceService.getUnit(unitId, UniverInstanceType.UNIVER_DOC);
+    if (!doc)
+      return !1;
+    const range = (_b = (_a15 = doc.getBody()) == null ? void 0 : _a15.customRanges) == null ? void 0 : _b.find((range2) => range2.rangeId === rangeId);
+    if (!range)
+      return !1;
+    const display = (_c = params.payload.display) != null ? _c : "", newId = generateRandomId(), textRun = (_d = getBodySlice(doc.getBody(), range.startIndex, range.endIndex + 1).textRuns) == null ? void 0 : _d[0];
+    textRun && (textRun.ed = display.length + 1);
+    const replaceSelection = replaceSelectionFactory(accessor, {
+      unitId,
+      body: {
+        dataStream: `${DataStreamTreeTokenType.CUSTOM_RANGE_START}${display}${DataStreamTreeTokenType.CUSTOM_RANGE_END}`,
+        customRanges: [{
+          rangeId: newId,
+          rangeType: CustomRangeType.HYPERLINK,
+          startIndex: 0,
+          endIndex: display.length + 1,
+          properties: {
+            url: payload.payload
+          }
+        }],
+        textRuns: textRun ? [textRun] : void 0
+      },
+      selection: {
+        startOffset: range.startIndex,
+        endOffset: range.endIndex + 1,
+        collapsed: !1
+      },
+      doc
+    });
+    return replaceSelection ? commandService.syncExecuteCommand(replaceSelection.id, replaceSelection.params) : !1;
+  }, "handler")
 };
-__name(_SheetsHyperLinkSidePanelService, "SheetsHyperLinkSidePanelService");
-let SheetsHyperLinkSidePanelService = _SheetsHyperLinkSidePanelService;
 var jsxRuntime = { exports: {} }, reactJsxRuntime_production_min = {};
 /**
  * @license React
@@ -97,15 +395,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(_a14) {
-    var key = _a14[0], value = _a14[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(_a15) {
+    var key = _a15[0], value = _a15[1];
     typeof value == "string" && (attrs[key] = value.replace(/url\(#(.*)\)/, "url(#$1".concat(runtimeProps.idSuffix, ")")));
   })), attrs;
 }
 __name(replaceRuntimeIdsAndExtInAttrs, "replaceRuntimeIdsAndExtInAttrs");
 function replaceRuntimeIdsInDefs(node, runtimeProps) {
-  var _a14, defIds = runtimeProps.defIds;
-  return !defIds || defIds.length === 0 ? node : node.tag === "defs" && (!((_a14 = node.children) === null || _a14 === void 0) && _a14.length) ? __assign(__assign({}, node), { children: node.children.map(function(child) {
+  var _a15, defIds = runtimeProps.defIds;
+  return !defIds || defIds.length === 0 ? node : node.tag === "defs" && (!((_a15 = node.children) === null || _a15 === void 0) && _a15.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;
 }
@@ -164,11 +462,11 @@ var element = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 16 16", width:
 });
 Xlsx.displayName = "Xlsx";
 const PLUGIN_CONFIG_KEY = "sheets-hyper-link-ui.config", defaultPluginConfig = {};
-var __defProp$b = Object.defineProperty, __getOwnPropDesc$b = Object.getOwnPropertyDescriptor, __decorateClass$b = /* @__PURE__ */ __name((decorators, target, key, kind) => {
-  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$b(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
+var __defProp$c = Object.defineProperty, __getOwnPropDesc$c = Object.getOwnPropertyDescriptor, __decorateClass$c = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$c(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$b(target, key, result), result;
-}, "__decorateClass$b"), __decorateParam$b = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$b");
+  return kind && result && __defProp$c(target, key, result), result;
+}, "__decorateClass$c"), __decorateParam$c = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$c");
 function getContainRange(range, worksheet) {
   const mergedCells = worksheet.getMergeData(), maxCol = worksheet.getMaxColumns() - 1, maxRow = worksheet.getMaxRows() - 1;
   if (maxCol < range.endColumn && (range.endColumn = maxCol), maxRow < range.endRow && (range.endRow = maxRow), range.rangeType === RANGE_TYPE.COLUMN || RANGE_TYPE.ROW)
@@ -185,42 +483,37 @@ let SheetsHyperLinkResolverService = (_a = class {
     this._univerInstanceService = _univerInstanceService, this._commandService = _commandService, this._definedNamesService = _definedNamesService, this._messageService = _messageService, this._localeService = _localeService, this._configService = _configService;
   }
   _getURLName(params) {
-    var _a14;
-    const { gid, range, rangeid } = params, workbook = this._univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET);
+    var _a15;
+    const { gid, range, rangeid, unitid } = params, workbook = unitid ? this._univerInstanceService.getUnit(unitid, UniverInstanceType.UNIVER_SHEET) : this._univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET), invalidLink = {
+      type: SheetHyperLinkType.INVALID,
+      name: this._localeService.t("hyperLink.message.refError")
+    };
     if (!workbook)
-      return null;
-    const sheet = gid ? workbook.getSheetBySheetId(gid) : workbook.getActiveSheet(), sheetName = (_a14 = sheet == null ? void 0 : sheet.getName()) != null ? _a14 : "";
+      return invalidLink;
+    const sheet = gid ? workbook.getSheetBySheetId(gid) : workbook.getActiveSheet(), sheetName = (_a15 = sheet == null ? void 0 : sheet.getName()) != null ? _a15 : "";
     if (range) {
+      if (!sheet) return invalidLink;
       const rangeObj = deserializeRangeWithSheet(range).range;
-      return isValidRange(rangeObj) && range !== ERROR_RANGE ? {
-        type: "range",
+      return isValidRange(rangeObj, sheet) && range !== ERROR_RANGE ? {
+        type: SheetHyperLinkType.RANGE,
         name: serializeRangeWithSheet(sheetName, rangeObj)
-      } : {
-        type: "range-error",
-        name: this._localeService.t("hyperLink.message.refError")
-      };
+      } : invalidLink;
     }
     if (rangeid) {
       const range2 = this._definedNamesService.getValueById(workbook.getUnitId(), rangeid);
       return range2 ? {
-        type: "defineName",
+        type: SheetHyperLinkType.DEFINE_NAME,
         name: range2.formulaOrRefString
-      } : {
-        type: "range-error",
-        name: this._localeService.t("hyperLink.message.refError")
-      };
+      } : invalidLink;
     }
     if (gid) {
       const worksheet = workbook.getSheetBySheetId(gid);
       return worksheet ? {
-        type: "sheet",
+        type: SheetHyperLinkType.SHEET,
         name: worksheet.getName()
-      } : {
-        type: "sheet-error",
-        name: this._localeService.t("hyperLink.message.refError")
-      };
+      } : invalidLink;
     }
-    return null;
+    return invalidLink;
   }
   navigateTo(params) {
     const { gid, range, rangeid } = params, workbook = this._univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET);
@@ -236,17 +529,21 @@ let SheetsHyperLinkResolverService = (_a = class {
       this.navigateToSheetById(unitId, gid);
     }
   }
+  buildHyperLink(unitId, sheetId, range) {
+    return `#${SheetHyperLinkType.SHEET}=${sheetId}}${range ? `${typeof range == "string" ? SheetHyperLinkType.DEFINE_NAME : SheetHyperLinkType.RANGE}=${typeof range == "string" ? range : serializeRange(range)}` : ""}`;
+  }
   parseHyperLink(urlStr) {
-    var _a14, _b, _c;
-    if (urlStr != null && urlStr.startsWith("#")) {
+    var _a15, _b, _c, _d;
+    if (urlStr.startsWith("#")) {
       const search = new URLSearchParams(urlStr.slice(1)), searchObj = {
-        gid: (_a14 = search.get("gid")) != null ? _a14 : "",
+        gid: (_a15 = search.get("gid")) != null ? _a15 : "",
         range: (_b = search.get("range")) != null ? _b : "",
-        rangeid: (_c = search.get("rangeid")) != null ? _c : ""
+        rangeid: (_c = search.get("rangeid")) != null ? _c : "",
+        unitid: (_d = search.get("unitid")) != null ? _d : ""
       }, urlInfo = this._getURLName(searchObj);
       return {
-        type: (urlInfo == null ? void 0 : urlInfo.type) || "link",
-        name: (urlInfo == null ? void 0 : urlInfo.name) || urlStr,
+        type: urlInfo.type,
+        name: urlInfo.name,
         url: urlStr,
         searchObj,
         handler: /* @__PURE__ */ __name(() => {
@@ -255,12 +552,13 @@ let SheetsHyperLinkResolverService = (_a = class {
       };
     } else
       return {
-        type: "outer",
+        type: SheetHyperLinkType.URL,
         name: urlStr,
         url: urlStr,
         handler: /* @__PURE__ */ __name(() => {
           this.navigateToOtherWebsite(urlStr);
-        }, "handler")
+        }, "handler"),
+        searchObj: null
       };
   }
   async navigateToRange(unitId, subUnitId, range) {
@@ -324,21 +622,121 @@ let SheetsHyperLinkResolverService = (_a = class {
     return this._definedNamesService.focusRange(unitId, rangeid), !0;
   }
   async navigateToOtherWebsite(url) {
-    var _a14;
+    var _a15;
     const config = this._configService.getConfig(PLUGIN_CONFIG_KEY);
-    if ((_a14 = config == null ? void 0 : config.urlHandler) != null && _a14.navigateToOtherWebsite)
+    if ((_a15 = config == null ? void 0 : config.urlHandler) != null && _a15.navigateToOtherWebsite)
       return config.urlHandler.navigateToOtherWebsite(url);
     window.open(url, "_blank", "noopener noreferrer");
   }
 }, __name(_a, "SheetsHyperLinkResolverService"), _a);
-SheetsHyperLinkResolverService = __decorateClass$b([
-  __decorateParam$b(0, IUniverInstanceService),
-  __decorateParam$b(1, ICommandService),
-  __decorateParam$b(2, IDefinedNamesService),
-  __decorateParam$b(3, IMessageService),
-  __decorateParam$b(4, Inject(LocaleService)),
-  __decorateParam$b(5, IConfigService)
+SheetsHyperLinkResolverService = __decorateClass$c([
+  __decorateParam$c(0, IUniverInstanceService),
+  __decorateParam$c(1, ICommandService),
+  __decorateParam$c(2, IDefinedNamesService),
+  __decorateParam$c(3, IMessageService),
+  __decorateParam$c(4, Inject(LocaleService)),
+  __decorateParam$c(5, IConfigService)
 ], SheetsHyperLinkResolverService);
+var HyperLinkEditSourceType = /* @__PURE__ */ ((HyperLinkEditSourceType2) => (HyperLinkEditSourceType2.EDITING = "editing", HyperLinkEditSourceType2.VIEWING = "viewing", HyperLinkEditSourceType2.ZEN_EDITOR = "zen_mode", HyperLinkEditSourceType2))(HyperLinkEditSourceType || {});
+const cellLink = "univer-cell-link", cellLinkType = "univer-cell-link-type", cellLinkContent = "univer-cell-link-content", cellLinkContentError = "univer-cell-link-content-error", cellLinkUrl = "univer-cell-link-url", cellLinkOperations = "univer-cell-link-operations", cellLinkOperation = "univer-cell-link-operation", cellLinkOperationError = "univer-cell-link-operation-error", styles$1 = {
+  cellLink,
+  cellLinkType,
+  cellLinkContent,
+  cellLinkContentError,
+  cellLinkUrl,
+  cellLinkOperations,
+  cellLinkOperation,
+  cellLinkOperationError
+}, iconsMap = {
+  [SheetHyperLinkType.URL]: /* @__PURE__ */ jsxRuntimeExports.jsx(LinkSingle, {}),
+  [SheetHyperLinkType.SHEET]: /* @__PURE__ */ jsxRuntimeExports.jsx(Xlsx, {}),
+  [SheetHyperLinkType.RANGE]: /* @__PURE__ */ jsxRuntimeExports.jsx(AllBorderSingle, {}),
+  [SheetHyperLinkType.DEFINE_NAME]: /* @__PURE__ */ jsxRuntimeExports.jsx(AllBorderSingle, {}),
+  [SheetHyperLinkType.INVALID]: /* @__PURE__ */ jsxRuntimeExports.jsx(AllBorderSingle, {})
+}, CellLinkPopup = /* @__PURE__ */ __name(() => {
+  var _a15, _b;
+  const popupService = useDependency(SheetsHyperLinkPopupService), commandService = useDependency(ICommandService), messageService = useDependency(IMessageService), localeService = useDependency(LocaleService), [currentPopup, setCurrentPopup] = useState(null), resolverService = useDependency(SheetsHyperLinkResolverService), editorBridgeService = useDependency(IEditorBridgeService);
+  if (useEffect(() => {
+    setCurrentPopup(popupService.currentPopup);
+    const ob = popupService.currentPopup$.subscribe((popup) => {
+      setCurrentPopup(popup);
+    });
+    return () => {
+      ob.unsubscribe();
+    };
+  }, [popupService.currentPopup, popupService.currentPopup$]), !currentPopup)
+    return null;
+  const { unitId, subUnitId, customRange, row, col } = currentPopup;
+  if (!((_a15 = customRange == null ? void 0 : customRange.properties) != null && _a15.url))
+    return null;
+  const linkObj = resolverService.parseHyperLink((_b = customRange.properties.url) != null ? _b : ""), isError = linkObj.type === SheetHyperLinkType.INVALID;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$1.cellLink, onClick: /* @__PURE__ */ __name(() => popupService.hideCurrentPopup(), "onClick"), children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cs(styles$1.cellLinkContent, { [styles$1.cellLinkContentError]: isError }), onClick: linkObj.handler, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$1.cellLinkType, children: iconsMap[linkObj.type] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { showIfEllipsis: !0, title: linkObj.name, children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$1.cellLinkUrl, children: linkObj.name }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$1.cellLinkOperations, children: [
+      currentPopup.copyPermission && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "div",
+        {
+          className: cs(styles$1.cellLinkOperation, { [styles$1.cellLinkOperationError]: isError }),
+          onClick: /* @__PURE__ */ __name(() => {
+            if (!isError) {
+              if (linkObj.type !== SheetHyperLinkType.URL) {
+                const url = new URL(window.location.href);
+                url.hash = linkObj.url.slice(1), navigator.clipboard.writeText(url.href);
+              } else
+                navigator.clipboard.writeText(linkObj.url);
+              messageService.show({
+                content: localeService.t("hyperLink.message.coped"),
+                type: MessageType.Info
+              });
+            }
+          }, "onClick"),
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { placement: "bottom", title: localeService.t("hyperLink.popup.copy"), children: /* @__PURE__ */ jsxRuntimeExports.jsx(CopySingle, {}) })
+        }
+      ),
+      currentPopup.editPermission && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            className: styles$1.cellLinkOperation,
+            onClick: /* @__PURE__ */ __name(() => {
+              commandService.executeCommand(OpenHyperLinkEditPanelOperation.id, {
+                unitId,
+                subUnitId,
+                row,
+                col,
+                customRangeId: customRange.rangeId,
+                type: currentPopup.type
+              });
+            }, "onClick"),
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { placement: "bottom", title: localeService.t("hyperLink.popup.edit"), children: /* @__PURE__ */ jsxRuntimeExports.jsx(WriteSingle, {}) })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            className: styles$1.cellLinkOperation,
+            onClick: /* @__PURE__ */ __name(() => {
+              const commandId = currentPopup.type === HyperLinkEditSourceType.EDITING || currentPopup.type === HyperLinkEditSourceType.ZEN_EDITOR ? CancelRichHyperLinkCommand.id : CancelHyperLinkCommand.id;
+              commandService.syncExecuteCommand(commandId, {
+                unitId,
+                subUnitId,
+                id: customRange.rangeId,
+                row,
+                column: col,
+                documentId: currentPopup.type === HyperLinkEditSourceType.ZEN_EDITOR ? DOCS_ZEN_EDITOR_UNIT_ID_KEY : editorBridgeService.getCurrentEditorId()
+              }) && popupService.hideCurrentPopup(void 0, !0);
+            }, "onClick"),
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { placement: "bottom", title: localeService.t("hyperLink.popup.cancel"), children: /* @__PURE__ */ jsxRuntimeExports.jsx(UnlinkSingle, {}) })
+          }
+        )
+      ] })
+    ] })
+  ] });
+}, "CellLinkPopup");
+CellLinkPopup.componentKey = "univer.sheet.cell-link-popup";
 function isLegalLink(link) {
   return Tools.isLegalUrl(link);
 }
@@ -378,182 +776,220 @@ function getCellValueOrigin(cell) {
   return cell == null ? void 0 : cell.v;
 }
 __name(getCellValueOrigin, "getCellValueOrigin");
-const AddHyperLinkCommand = {
-  type: CommandType.COMMAND,
-  id: "sheets.command.add-hyper-link",
-  async handler(accessor, params) {
-    if (!params)
-      return !1;
-    const sheetInterceptorService = accessor.get(SheetInterceptorService), commandService = accessor.get(ICommandService), undoRedoService = accessor.get(IUndoRedoService), { unitId, subUnitId, link } = params, { redos, undos } = sheetInterceptorService.onCommandExecute({
-      id: AddHyperLinkCommand.id,
-      params
-    }), redo = {
-      id: AddHyperLinkMutation.id,
-      params
-    }, undo = {
-      id: RemoveHyperLinkMutation.id,
-      params: {
-        unitId,
-        subUnitId,
-        id: link.id
-      }
-    };
-    return (await sequenceExecuteAsync([redo, ...redos], commandService)).result ? (undoRedoService.pushUndoRedo({
-      redoMutations: [redo, ...redos],
-      undoMutations: [undo, ...undos],
-      unitID: unitId
-    }), !0) : !1;
+const _SheetsHyperLinkSidePanelService = class _SheetsHyperLinkSidePanelService extends Disposable {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "_customHyperLinks", /* @__PURE__ */ new Map());
   }
-};
-function getHyperLinkContent(link) {
-  const { row, column, id, ...content } = link;
-  return content;
-}
-__name(getHyperLinkContent, "getHyperLinkContent");
-const UpdateHyperLinkCommand = {
-  type: CommandType.COMMAND,
-  id: "sheets.command.update-hyper-link",
-  async handler(accessor, params) {
-    if (!params)
-      return !1;
-    const sheetInterceptorService = accessor.get(SheetInterceptorService), commandService = accessor.get(ICommandService), undoRedoService = accessor.get(IUndoRedoService), model = accessor.get(HyperLinkModel), { unitId, subUnitId, id } = params, link = model.getHyperLink(unitId, subUnitId, id);
-    if (!link)
-      return !1;
-    const { redos, undos } = sheetInterceptorService.onCommandExecute({
-      id: UpdateHyperLinkCommand.id,
-      params
-    }), redo = {
-      id: UpdateHyperLinkMutation.id,
-      params
-    }, undo = {
-      id: UpdateHyperLinkMutation.id,
-      params: {
-        unitId,
-        subUnitId,
-        id,
-        payload: getHyperLinkContent(link)
-      }
-    };
-    return (await sequenceExecuteAsync([redo, ...redos], commandService)).result ? (undoRedoService.pushUndoRedo({
-      redoMutations: [redo, ...redos],
-      undoMutations: [undo, ...undos],
-      unitID: unitId
-    }), !0) : !1;
+  isBuiltInLinkType(type) {
+    return type !== SheetHyperLinkType.URL;
+  }
+  getOptions() {
+    return Array.from(this._customHyperLinks.values()).map(({ option }) => option);
+  }
+  findCustomHyperLink(link) {
+    return Array.from(this._customHyperLinks.values()).find((item) => item.match(link));
+  }
+  registerCustomHyperLink(customHyperLink) {
+    this._customHyperLinks.set(customHyperLink.type, customHyperLink);
+  }
+  getCustomHyperLink(type) {
+    return this._customHyperLinks.get(type);
+  }
+  removeCustomHyperLink(type) {
+    const { _customHyperLinks } = this;
+    _customHyperLinks.delete(type);
+  }
+  dispose() {
+    super.dispose(), this._customHyperLinks.clear();
   }
-}, cellLinkEditButtons = "univer-cell-link-edit-buttons", styles$1 = {
+};
+__name(_SheetsHyperLinkSidePanelService, "SheetsHyperLinkSidePanelService");
+let SheetsHyperLinkSidePanelService = _SheetsHyperLinkSidePanelService;
+const cellLinkEdit = "univer-cell-link-edit", cellLinkEditButtons = "univer-cell-link-edit-buttons", styles = {
+  cellLinkEdit,
   cellLinkEditButtons
 }, CellLinkEdit = /* @__PURE__ */ __name(() => {
-  var _a14;
-  const [id, setId] = useState(""), [display, setDisplay] = useState(""), [type, setType] = useState(LinkType.link), [payload, setPayload] = useState(""), localeService = useDependency(LocaleService), definedNameService = useDependency(IDefinedNamesService), univerInstanceService = useDependency(IUniverInstanceService), popupService = useDependency(SheetsHyperLinkPopupService), editing = useObservable(popupService.currentEditing$), hyperLinkModel = useDependency(HyperLinkModel), resolverService = useDependency(SheetsHyperLinkResolverService), commandService = useDependency(ICommandService), sidePanelService = useDependency(SheetsHyperLinkSidePanelService), sidePanelOptions = useMemo(() => sidePanelService.getOptions(), [sidePanelService]), customHyperLinkSidePanel = useMemo(() => {
+  var _a15;
+  const [id, setId] = useState(""), [hide, setHide] = useState(!1), [display, setDisplay] = useState(""), [showLabel, setShowLabel] = useState(!0), [type, setType] = useState(SheetHyperLinkType.URL), [payload, setPayload] = useState(""), localeService = useDependency(LocaleService), definedNameService = useDependency(IDefinedNamesService), editorBridgeService = useDependency(IEditorBridgeService), univerInstanceService = useDependency(IUniverInstanceService), popupService = useDependency(SheetsHyperLinkPopupService), editing = useObservable(popupService.currentEditing$), resolverService = useDependency(SheetsHyperLinkResolverService), commandService = useDependency(ICommandService), sidePanelService = useDependency(SheetsHyperLinkSidePanelService), sidePanelOptions = useMemo(() => sidePanelService.getOptions(), [sidePanelService]), zenZoneService = useDependency(IZenZoneService), markSelectionService = useDependency(IMarkSelectionService), textSelectionService = useDependency(DocSelectionManagerService), contextService = useDependency(IContextService), customHyperLinkSidePanel = useMemo(() => {
     if (!sidePanelService.isBuiltInLinkType(type))
       return sidePanelService.getCustomHyperLink(type);
   }, [sidePanelService, type]), [showError, setShowError] = useState(!1), setByPayload = useRef(!1);
   useEffect(() => {
-    var _a15, _b, _c;
-    if ((editing == null ? void 0 : editing.row) !== void 0 && editing.column !== void 0) {
-      const link = hyperLinkModel.getHyperLinkByLocationSync(editing.unitId, editing.subUnitId, editing.row, editing.column);
-      if (link) {
-        setId(link.id);
-        const customLink = sidePanelService.findCustomHyperLink(link);
-        if (customLink) {
-          const customLinkInfo = customLink.convert(link);
-          setType(customLinkInfo.type), setPayload(customLinkInfo.payload), setDisplay(customLinkInfo.display);
-          return;
+    var _a16, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q;
+    if ((editing == null ? void 0 : editing.row) !== void 0 && editing.col !== void 0) {
+      const { label, customRange, row, col } = editing;
+      let link;
+      if (customRange)
+        link = {
+          id: (_a16 = customRange == null ? void 0 : customRange.rangeId) != null ? _a16 : "",
+          display: label != null ? label : "",
+          payload: (_c = (_b = customRange == null ? void 0 : customRange.properties) == null ? void 0 : _b.url) != null ? _c : "",
+          row,
+          column: col
+        };
+      else if (editing.type === HyperLinkEditSourceType.VIEWING) {
+        const workbook2 = univerInstanceService.getUnit(editing.unitId), worksheet = workbook2 == null ? void 0 : workbook2.getSheetBySheetId(editing.subUnitId), cell = worksheet == null ? void 0 : worksheet.getCellRaw(editing.row, editing.col), range = (_f = (_e = (_d = cell == null ? void 0 : cell.p) == null ? void 0 : _d.body) == null ? void 0 : _e.customRanges) == null ? void 0 : _f.find((range2) => {
+          var _a17;
+          return range2.rangeType === CustomRangeType.HYPERLINK && ((_a17 = range2.properties) == null ? void 0 : _a17.url);
+        }), cellValue = `${(_g = getCellValueOrigin(cell)) != null ? _g : ""}`;
+        cell && (cell.p || cellValue) && setShowLabel(!1), link = {
+          id: "",
+          display: "",
+          payload: (_i = (_h = range == null ? void 0 : range.properties) == null ? void 0 : _h.url) != null ? _i : "",
+          row,
+          column: col
+        };
+      } else {
+        const doc = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_DOC), selection = textSelectionService.getActiveTextRange(), customRange2 = selection && ((_l = BuildTextUtils.customRange.getCustomRangesInterestsWithRange(selection, (_k = (_j = doc == null ? void 0 : doc.getBody()) == null ? void 0 : _j.customRanges) != null ? _k : [])) == null ? void 0 : _l[0]);
+        setShowLabel(!1), link = {
+          id: "",
+          display: label != null ? label : "",
+          payload: (_n = (_m = customRange2 == null ? void 0 : customRange2.properties) == null ? void 0 : _m.url) != null ? _n : "",
+          row,
+          column: col
+        };
+      }
+      setId(link.id);
+      const customLink = sidePanelService.findCustomHyperLink(link);
+      if (customLink) {
+        const customLinkInfo = customLink.convert(link);
+        setType(customLinkInfo.type), setPayload(customLinkInfo.payload), setDisplay(customLinkInfo.display);
+        return;
+      }
+      setDisplay(link.display);
+      const linkInfo = resolverService.parseHyperLink(link.payload);
+      switch (setType(linkInfo.type === SheetHyperLinkType.INVALID ? SheetHyperLinkType.RANGE : linkInfo.type), linkInfo.type) {
+        case SheetHyperLinkType.URL: {
+          setPayload(linkInfo.url), linkInfo.url === link.display && (setByPayload.current = !0);
+          break;
         }
-        setDisplay(link.display);
-        const linkInfo = resolverService.parseHyperLink(link.payload);
-        if (linkInfo.type === "outer") {
-          setType(LinkType.link), setPayload(linkInfo.url), linkInfo.url === link.display && (setByPayload.current = !0);
-          return;
-        } else {
+        case SheetHyperLinkType.RANGE: {
+          const params = linkInfo.searchObj, sheetName = params.gid && (_q = (_p = (_o = univerInstanceService.getUnit(editing.unitId)) == null ? void 0 : _o.getSheetBySheetId(params.gid)) == null ? void 0 : _p.getName()) != null ? _q : "", payload2 = serializeRangeWithSheet(sheetName, deserializeRangeWithSheet(params.range).range);
+          setPayload(payload2), payload2 === link.display && (setByPayload.current = !0);
+          break;
+        }
+        case SheetHyperLinkType.SHEET: {
           const params = linkInfo.searchObj;
-          if (params.rangeid) {
-            setType(LinkType.definedName), setPayload(params.rangeid);
-            return;
-          }
-          if (params.range) {
-            const sheetName = params.gid && (_c = (_b = (_a15 = univerInstanceService.getUnit(editing.unitId)) == null ? void 0 : _a15.getSheetBySheetId(params.gid)) == null ? void 0 : _b.getName()) != null ? _c : "";
-            if (setType(LinkType.range), params.range === ERROR_RANGE)
-              setPayload("");
-            else {
-              const payload2 = serializeRangeWithSheet(sheetName, deserializeRangeWithSheet(params.range).range);
-              setPayload(payload2), payload2 === link.display && (setByPayload.current = !0);
-            }
-            return;
-          }
-          if (params.gid) {
-            setType(LinkType.sheet), setPayload(params.gid);
-            return;
-          }
+          setPayload(params.gid);
+          break;
         }
+        case SheetHyperLinkType.DEFINE_NAME: {
+          const params = linkInfo.searchObj;
+          setPayload(params.rangeid);
+          break;
+        }
+        default:
+          setPayload("");
+          break;
       }
-      const workbook2 = univerInstanceService.getUnit(editing.unitId), worksheet = workbook2 == null ? void 0 : workbook2.getSheetBySheetId(editing.subUnitId), cell = worksheet == null ? void 0 : worksheet.getCellRaw(editing.row, editing.column), cellValue = getCellValueOrigin(cell);
-      setType(LinkType.link), setPayload(""), setDisplay((cellValue != null ? cellValue : "").toString()), setId("");
-      return;
     }
-    setType(LinkType.link), setPayload(""), setDisplay(""), setId("");
-  }, [editing, hyperLinkModel, resolverService, univerInstanceService]);
-  const payloadInitial = useMemo(() => payload, [type]), linkTypeOptions = [
+  }, [editing, resolverService, sidePanelService, textSelectionService, univerInstanceService]), useEffect(() => {
+    let id2 = null;
+    return editing && editing.type === HyperLinkEditSourceType.VIEWING && Tools.isDefine(editing.row) && Tools.isDefine(editing.col) && (id2 = markSelectionService.addShape(
+      {
+        range: {
+          startColumn: editing.col,
+          endColumn: editing.col,
+          startRow: editing.row,
+          endRow: editing.row
+        },
+        style: {
+          hasAutoFill: !1,
+          fill: "rgb(255, 189, 55, 0.35)",
+          strokeWidth: 1,
+          stroke: "#FFBD37",
+          widgets: {}
+        },
+        primary: null
+      },
+      [],
+      -1
+    )), () => {
+      id2 && markSelectionService.removeShape(id2);
+    };
+  }, [editing, markSelectionService]);
+  const payloadInitial = useMemo(() => payload, [type]);
+  useEffect(() => () => {
+    editorBridgeService.disableForceKeepVisible();
+  }, [editorBridgeService]);
+  const linkTypeOptions = [
     {
       label: localeService.t("hyperLink.form.link"),
-      value: LinkType.link
+      value: SheetHyperLinkType.URL
     },
     {
       label: localeService.t("hyperLink.form.range"),
-      value: LinkType.range
+      value: SheetHyperLinkType.RANGE
     },
     {
       label: localeService.t("hyperLink.form.worksheet"),
-      value: LinkType.sheet
+      value: SheetHyperLinkType.SHEET
     },
     {
       label: localeService.t("hyperLink.form.definedName"),
-      value: LinkType.definedName
+      value: SheetHyperLinkType.DEFINE_NAME
     },
     ...sidePanelOptions
   ], workbook = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET);
   if (!workbook)
     return;
-  const hiddens = workbook.getHiddenWorksheets(), sheetsOption = workbook.getSheets().map((sheet) => ({ label: sheet.getName(), value: sheet.getSheetId() })).filter((opt) => hiddens.indexOf(opt.value) === -1), definedNames = Object.values((_a14 = definedNameService.getDefinedNameMap(workbook.getUnitId())) != null ? _a14 : {}).map((value) => ({
+  const hiddens = workbook.getHiddenWorksheets(), sheetsOption = workbook.getSheets().map((sheet) => ({ label: sheet.getName(), value: sheet.getSheetId() })).filter((opt) => hiddens.indexOf(opt.value) === -1), definedNames = Object.values((_a15 = definedNameService.getDefinedNameMap(workbook.getUnitId())) != null ? _a15 : {}).map((value) => ({
     label: value.name,
     value: value.id
   })), formatUrl = /* @__PURE__ */ __name((type2, payload2) => {
-    if (type2 === LinkType.link)
+    if (type2 === SheetHyperLinkType.URL)
       return serializeUrl(payload2);
-    if (type2 === LinkType.range) {
+    if (type2 === SheetHyperLinkType.RANGE) {
       const info = deserializeRangeWithSheet(payload2), worksheet = workbook.getSheetBySheetName(info.sheetName);
       if (worksheet)
         return `#gid=${worksheet.getSheetId()}&range=${serializeRange(info.range)}`;
     }
     return `#${type2}=${payload2}`;
   }, "formatUrl"), handleRangeChange = useEvent((newValue) => {
-    var _a15;
+    var _a16;
     const range = newValue[0];
     if (!range || !isValidRange(range.range))
       return;
-    range.sheetName || (range.sheetName = ((_a15 = workbook.getActiveSheet()) == null ? void 0 : _a15.getName()) || "");
+    range.sheetName || (range.sheetName = ((_a16 = workbook.getActiveSheet()) == null ? void 0 : _a16.getName()) || "");
     const newPayload = serializeRangeToRefString(range);
     setPayload(newPayload), newPayload && (setByPayload.current || !display) && (setDisplay(newPayload), setByPayload.current = !0);
   }), handleSubmit = /* @__PURE__ */ __name(async () => {
-    if (editing && (id ? await commandService.executeCommand(UpdateHyperLinkCommand.id, {
-      unitId: editing.unitId,
-      subUnitId: editing.subUnitId,
-      id,
-      payload: {
-        display,
-        payload: formatUrl(type, payload)
-      }
-    }) : await commandService.executeCommand(AddHyperLinkCommand.id, {
-      unitId: editing.unitId,
-      subUnitId: editing.subUnitId,
-      link: {
-        id: Tools.generateRandomId(),
-        row: editing.row,
-        column: editing.column,
-        payload: formatUrl(type, payload),
-        display
+    if (showLabel && !display || !payload || type === SheetHyperLinkType.URL && !isLegalLink(payload)) {
+      setShowError(!0);
+      return;
+    }
+    if (editing)
+      if (id) {
+        const commandId = editing.type === HyperLinkEditSourceType.ZEN_EDITOR || editing.type === HyperLinkEditSourceType.EDITING ? UpdateRichHyperLinkCommand.id : UpdateHyperLinkCommand.id;
+        await commandService.executeCommand(commandId, {
+          id,
+          unitId: editing.unitId,
+          subUnitId: editing.subUnitId,
+          payload: {
+            display: showLabel ? display : "",
+            payload: formatUrl(type, payload)
+          },
+          row: editing.row,
+          column: editing.col,
+          documentId: editing.type === HyperLinkEditSourceType.ZEN_EDITOR ? DOCS_ZEN_EDITOR_UNIT_ID_KEY : editorBridgeService.getCurrentEditorId()
+        });
+      } else {
+        const commandId = editing.type === HyperLinkEditSourceType.ZEN_EDITOR || editing.type === HyperLinkEditSourceType.EDITING ? AddRichHyperLinkCommand.id : AddHyperLinkCommand.id;
+        await commandService.executeCommand(commandId, {
+          unitId: editing.unitId,
+          subUnitId: editing.subUnitId,
+          link: {
+            id: generateRandomId(),
+            row: editing.row,
+            column: editing.col,
+            payload: formatUrl(type, payload),
+            display: showLabel ? display : ""
+          },
+          documentId: editing.type === HyperLinkEditSourceType.ZEN_EDITOR ? DOCS_ZEN_EDITOR_UNIT_ID_KEY : editorBridgeService.getCurrentEditorId()
+        });
       }
-    })), editing) {
+    if ((editing == null ? void 0 : editing.type) === HyperLinkEditSourceType.VIEWING) {
       await commandService.executeCommand(SetWorksheetActiveOperation.id, {
         unitId: editing.unitId,
         subUnitId: editing.subUnitId
@@ -563,15 +999,15 @@ const UpdateHyperLinkCommand = {
         range: {
           startRow: Math.max(editing.row - GAP, 0),
           endRow: editing.row + GAP,
-          startColumn: Math.max(editing.column - GAP, 0),
-          endColumn: editing.column + GAP
+          startColumn: Math.max(editing.col - GAP, 0),
+          endColumn: editing.col + GAP
         }
       });
     }
-    commandService.executeCommand(CloseHyperLinkSidebarOperation.id);
+    commandService.executeCommand(CloseHyperLinkPopupOperation.id);
   }, "handleSubmit");
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return editing ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles.cellLinkEdit, style: { display: hide ? "none" : "block" }, children: [
+    showLabel ? /* @__PURE__ */ jsxRuntimeExports.jsx(
       FormLayout,
       {
         label: localeService.t("hyperLink.form.label"),
@@ -583,12 +1019,16 @@ const UpdateHyperLinkCommand = {
             onChange: /* @__PURE__ */ __name((v) => {
               setDisplay(v), setByPayload.current = !1;
             }, "onChange"),
-            placeholder: localeService.t("hyperLink.form.labelPlaceholder")
+            placeholder: localeService.t("hyperLink.form.labelPlaceholder"),
+            autoFocus: !0,
+            onKeyDown: /* @__PURE__ */ __name((e) => {
+              e.keyCode === KeyCode.ENTER && handleSubmit();
+            }, "onKeyDown")
           }
         )
       }
-    ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(FormLayout, { label: localeService.t("hyperLink.form.type"), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    ) : null,
+    /* @__PURE__ */ jsxRuntimeExports.jsx(FormLayout, { label: localeService.t("hyperLink.form.type"), contentStyle: { marginBottom: 0 }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       Select,
       {
         options: linkTypeOptions,
@@ -598,7 +1038,7 @@ const UpdateHyperLinkCommand = {
         }, "onChange")
       }
     ) }),
-    type === LinkType.link && /* @__PURE__ */ jsxRuntimeExports.jsx(
+    type === SheetHyperLinkType.URL && /* @__PURE__ */ jsxRuntimeExports.jsx(
       FormLayout,
       {
         error: showError ? payload ? isLegalLink(payload) ? "" : localeService.t("hyperLink.form.linkError") : localeService.t("hyperLink.form.inputError") : "",
@@ -609,43 +1049,55 @@ const UpdateHyperLinkCommand = {
             onChange: /* @__PURE__ */ __name((newLink) => {
               setPayload(newLink), newLink && (setByPayload.current || !display || display === payload) && (setDisplay(newLink), setByPayload.current = !0);
             }, "onChange"),
-            placeholder: localeService.t("hyperLink.form.linkPlaceholder")
+            placeholder: localeService.t("hyperLink.form.linkPlaceholder"),
+            autoFocus: !showLabel,
+            onKeyDown: /* @__PURE__ */ __name((e) => {
+              e.keyCode === KeyCode.ENTER && handleSubmit();
+            }, "onKeyDown")
           }
         )
       }
     ),
-    type === LinkType.range && /* @__PURE__ */ jsxRuntimeExports.jsx(FormLayout, { error: showError && !payload ? localeService.t("hyperLink.form.inputError") : "", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    type === SheetHyperLinkType.RANGE && /* @__PURE__ */ jsxRuntimeExports.jsx(FormLayout, { error: showError && !payload ? localeService.t("hyperLink.form.inputError") : "", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       RangeSelector,
       {
         openForSheetUnitId: workbook.getUnitId(),
         id: createInternalEditorID("hyper-link-edit"),
         isSingleChoice: !0,
         value: payloadInitial,
-        onChange: handleRangeChange
+        onChange: handleRangeChange,
+        disableInput: editing.type === HyperLinkEditSourceType.ZEN_EDITOR,
+        onSelectorVisibleChange: /* @__PURE__ */ __name(async (visible) => {
+          visible ? (editing.type === HyperLinkEditSourceType.ZEN_EDITOR && (zenZoneService.hide(), contextService.setContextValue(FOCUSING_SHEET, !0)), editing.type !== HyperLinkEditSourceType.VIEWING && editorBridgeService.enableForceKeepVisible(), setHide(!0)) : (await resolverService.navigateToRange(editing.unitId, editing.subUnitId, { startRow: editing.row, endRow: editing.row, startColumn: editing.col, endColumn: editing.col }), editing.type === HyperLinkEditSourceType.ZEN_EDITOR && (await commandService.executeCommand(SetSelectionsOperation.id, {
+            unitId: editing.unitId,
+            subUnitId: editing.subUnitId,
+            selections: [{ range: { startRow: editing.row, endRow: editing.row, startColumn: editing.col, endColumn: editing.col } }]
+          }), zenZoneService.show(), contextService.setContextValue(FOCUSING_SHEET, !1)), editorBridgeService.disableForceKeepVisible(), setHide(!1));
+        }, "onSelectorVisibleChange")
       }
     ) }),
-    type === LinkType.sheet && /* @__PURE__ */ jsxRuntimeExports.jsx(FormLayout, { error: showError && !payload ? localeService.t("hyperLink.form.selectError") : "", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    type === SheetHyperLinkType.SHEET && /* @__PURE__ */ jsxRuntimeExports.jsx(FormLayout, { error: showError && !payload ? localeService.t("hyperLink.form.selectError") : "", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       Select,
       {
         options: sheetsOption,
         value: payload,
         onChange: /* @__PURE__ */ __name((newPayload) => {
-          var _a15, _b;
+          var _a16, _b;
           setPayload(newPayload);
-          const label = (_a15 = sheetsOption.find((i) => i.value === newPayload)) == null ? void 0 : _a15.label, oldLabel = (_b = sheetsOption.find((i) => i.value === payload)) == null ? void 0 : _b.label;
+          const label = (_a16 = sheetsOption.find((i) => i.value === newPayload)) == null ? void 0 : _a16.label, oldLabel = (_b = sheetsOption.find((i) => i.value === payload)) == null ? void 0 : _b.label;
           label && (setByPayload.current || !display || display === oldLabel) && (setDisplay(label), setByPayload.current = !0);
         }, "onChange")
       }
     ) }),
-    type === LinkType.definedName && /* @__PURE__ */ jsxRuntimeExports.jsx(FormLayout, { error: showError && !payload ? localeService.t("hyperLink.form.selectError") : "", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    type === SheetHyperLinkType.DEFINE_NAME && /* @__PURE__ */ jsxRuntimeExports.jsx(FormLayout, { error: showError && !payload ? localeService.t("hyperLink.form.selectError") : "", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       Select,
       {
         options: definedNames,
         value: payload,
         onChange: /* @__PURE__ */ __name((newValue) => {
-          var _a15, _b;
+          var _a16, _b;
           setPayload(newValue);
-          const label = (_a15 = definedNames.find((i) => i.value === newValue)) == null ? void 0 : _a15.label, oldLabel = (_b = definedNames.find((i) => i.value === payload)) == null ? void 0 : _b.label;
+          const label = (_a16 = definedNames.find((i) => i.value === newValue)) == null ? void 0 : _a16.label, oldLabel = (_b = definedNames.find((i) => i.value === payload)) == null ? void 0 : _b.label;
           label && (setByPayload.current || !display || display === oldLabel) && (setDisplay(label), setByPayload.current = !0);
         }, "onChange")
       }
@@ -664,15 +1116,12 @@ const UpdateHyperLinkCommand = {
         setPayload
       }
     ),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$1.cellLinkEditButtons, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles.cellLinkEditButtons, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         Button,
         {
           onClick: /* @__PURE__ */ __name(() => {
-            editing && commandService.executeCommand(SetWorksheetActiveOperation.id, {
-              unitId: editing.unitId,
-              subUnitId: editing.subUnitId
-            }), commandService.executeCommand(CloseHyperLinkSidebarOperation.id);
+            editing && resolverService.navigateToRange(editing.unitId, editing.subUnitId, { startRow: editing.row, endRow: editing.row, startColumn: editing.col, endColumn: editing.col }), commandService.executeCommand(CloseHyperLinkPopupOperation.id);
           }, "onClick"),
           children: localeService.t("hyperLink.form.cancel")
         }
@@ -683,226 +1132,35 @@ const UpdateHyperLinkCommand = {
           type: "primary",
           style: { marginLeft: 8 },
           onClick: /* @__PURE__ */ __name(async () => {
-            if (!display || !payload || type === LinkType.link && !isLegalLink(payload)) {
-              setShowError(!0);
-              return;
-            }
             handleSubmit();
           }, "onClick"),
           children: localeService.t("hyperLink.form.ok")
         }
       )
     ] })
-  ] });
+  ] }) : null;
 }, "CellLinkEdit");
 CellLinkEdit.componentKey = "univer.sheet.cell-link-edit";
-const OpenHyperLinkSidebarOperation = {
-  type: CommandType.OPERATION,
-  id: "sheet.operation.open-hyper-link-sidebar",
-  handler(accessor, params) {
-    if (!params)
-      return !1;
-    const { unitId, subUnitId, row, column } = params, hyperLinkModel = accessor.get(HyperLinkModel), sidebarService = accessor.get(ISidebarService), popupService = accessor.get(SheetsHyperLinkPopupService), currentLink = hyperLinkModel.getHyperLinkByLocation(unitId, subUnitId, row, column);
-    return popupService.startEditing(params), sidebarService.open({
-      header: {
-        title: currentLink ? "hyperLink.form.editTitle" : "hyperLink.form.addTitle"
-      },
-      children: {
-        label: CellLinkEdit.componentKey
-      }
-    }), !0;
-  }
-}, CloseHyperLinkSidebarOperation = {
-  type: CommandType.OPERATION,
-  id: "sheet.operation.close-hyper-link-sidebar",
-  handler(accessor) {
-    const sidebarService = accessor.get(ISidebarService), popupService = accessor.get(SheetsHyperLinkPopupService);
-    return sidebarService.close(), popupService.endEditing(), !0;
-  }
-}, InsertHyperLinkOperation = {
-  type: CommandType.OPERATION,
-  id: "sheet.operation.insert-hyper-link",
-  handler(accessor) {
-    const univerInstanceService = accessor.get(IUniverInstanceService), target = getSheetCommandTarget(univerInstanceService);
-    if (!target)
-      return !1;
-    const commandService = accessor.get(ICommandService), selection = accessor.get(SheetsSelectionsService).getCurrentLastSelection();
-    if (!selection)
-      return !1;
-    const row = selection.primary.startRow, column = selection.primary.startColumn;
-    return commandService.executeCommand(OpenHyperLinkSidebarOperation.id, {
-      unitId: target.unitId,
-      subUnitId: target.subUnitId,
-      row,
-      column
-    });
-  }
-}, InsertHyperLinkToolbarOperation = {
-  type: CommandType.OPERATION,
-  id: "sheet.operation.insert-hyper-link-toolbar",
-  handler(accessor) {
-    const commandService = accessor.get(ICommandService);
-    return accessor.get(SheetsHyperLinkPopupService).currentEditing ? commandService.executeCommand(CloseHyperLinkSidebarOperation.id) : commandService.executeCommand(InsertHyperLinkOperation.id);
-  }
-}, RemoveHyperLinkCommand = {
-  type: CommandType.COMMAND,
-  id: "sheets.command.remove-hyper-link",
-  async handler(accessor, params) {
-    if (!params)
-      return !1;
-    const sheetInterceptorService = accessor.get(SheetInterceptorService), commandService = accessor.get(ICommandService), undoRedoService = accessor.get(IUndoRedoService), model = accessor.get(HyperLinkModel), { unitId, subUnitId, id } = params, link = model.getHyperLink(unitId, subUnitId, id), { redos, undos } = sheetInterceptorService.onCommandExecute({
-      id: RemoveHyperLinkCommand.id,
-      params
-    }), redo = {
-      id: RemoveHyperLinkMutation.id,
-      params
-    }, undo = {
-      id: AddHyperLinkMutation.id,
-      params: {
-        unitId,
-        subUnitId,
-        link
-      }
-    };
-    return (await sequenceExecuteAsync([redo, ...redos], commandService)).result ? (undoRedoService.pushUndoRedo({
-      redoMutations: [redo, ...redos],
-      undoMutations: [undo, ...undos],
-      unitID: unitId
-    }), !0) : !1;
-  }
-}, CancelHyperLinkCommand = {
-  type: CommandType.COMMAND,
-  id: "sheets.command.cancel-hyper-link",
-  async handler(accessor, params) {
-    if (!params)
-      return !1;
-    const commandService = accessor.get(ICommandService), undoRedoService = accessor.get(IUndoRedoService), model = accessor.get(HyperLinkModel), { unitId, subUnitId, id } = params, link = model.getHyperLink(unitId, subUnitId, id), redo = {
-      id: RemoveHyperLinkMutation.id,
-      params
-    }, undo = {
-      id: AddHyperLinkMutation.id,
-      params: {
-        unitId,
-        subUnitId,
-        link
-      }
-    };
-    return (await sequenceExecuteAsync([redo], commandService)).result ? (undoRedoService.pushUndoRedo({
-      redoMutations: [redo],
-      undoMutations: [undo],
-      unitID: unitId
-    }), !0) : !1;
-  }
-}, cellLink = "univer-cell-link", cellLinkType = "univer-cell-link-type", cellLinkContent = "univer-cell-link-content", cellLinkContentError = "univer-cell-link-content-error", cellLinkUrl = "univer-cell-link-url", cellLinkOperations = "univer-cell-link-operations", cellLinkOperation = "univer-cell-link-operation", cellLinkOperationError = "univer-cell-link-operation-error", styles = {
-  cellLink,
-  cellLinkType,
-  cellLinkContent,
-  cellLinkContentError,
-  cellLinkUrl,
-  cellLinkOperations,
-  cellLinkOperation,
-  cellLinkOperationError
-}, iconsMap = {
-  outer: /* @__PURE__ */ jsxRuntimeExports.jsx(LinkSingle, {}),
-  link: /* @__PURE__ */ jsxRuntimeExports.jsx(LinkSingle, {}),
-  sheet: /* @__PURE__ */ jsxRuntimeExports.jsx(Xlsx, {}),
-  range: /* @__PURE__ */ jsxRuntimeExports.jsx(AllBorderSingle, {}),
-  defineName: /* @__PURE__ */ jsxRuntimeExports.jsx(AllBorderSingle, {}),
-  "range-error": /* @__PURE__ */ jsxRuntimeExports.jsx(AllBorderSingle, {}),
-  "sheet-error": /* @__PURE__ */ jsxRuntimeExports.jsx(Xlsx, {})
-}, CellLinkPopup = /* @__PURE__ */ __name(() => {
-  const popupService = useDependency(SheetsHyperLinkPopupService), hyperLinkModel = useDependency(HyperLinkModel), commandService = useDependency(ICommandService), messageService = useDependency(IMessageService), localeService = useDependency(LocaleService), [currentPopup, setCurrentPopup] = useState(null), resolverService = useDependency(SheetsHyperLinkResolverService);
-  if (useEffect(() => {
-    setCurrentPopup(popupService.currentPopup);
-    const ob = popupService.currentPopup$.subscribe((popup) => {
-      setCurrentPopup(popup);
-    });
-    return () => {
-      ob.unsubscribe();
-    };
-  }, [popupService.currentPopup, popupService.currentPopup$]), !currentPopup)
-    return null;
-  const { unitId, subUnitId, id } = currentPopup, link = hyperLinkModel.getHyperLink(unitId, subUnitId, id);
-  if (!link)
-    return null;
-  const linkObj = resolverService.parseHyperLink(link.payload), isError = linkObj.type.indexOf("error") > -1;
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles.cellLink, onClick: /* @__PURE__ */ __name(() => popupService.hideCurrentPopup(), "onClick"), children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cs(styles.cellLinkContent, { [styles.cellLinkContentError]: isError }), onClick: linkObj.handler, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles.cellLinkType, children: iconsMap[linkObj.type] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { showIfEllipsis: !0, title: linkObj.name, children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles.cellLinkUrl, children: linkObj.name }) })
-    ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles.cellLinkOperations, children: [
-      currentPopup.copyPermission && /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "div",
-        {
-          className: cs(styles.cellLinkOperation, { [styles.cellLinkOperationError]: isError }),
-          onClick: /* @__PURE__ */ __name(() => {
-            if (!isError) {
-              if (linkObj.type !== "outer") {
-                const url = new URL(window.location.href);
-                url.hash = linkObj.url.slice(1), navigator.clipboard.writeText(url.href);
-              } else
-                navigator.clipboard.writeText(linkObj.url);
-              messageService.show({
-                content: localeService.t("hyperLink.message.coped"),
-                type: MessageType.Info
-              });
-            }
-          }, "onClick"),
-          children: /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { placement: "bottom", title: localeService.t("hyperLink.popup.copy"), children: /* @__PURE__ */ jsxRuntimeExports.jsx(CopySingle, {}) })
-        }
-      ),
-      currentPopup.editPermission && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "div",
-          {
-            className: styles.cellLinkOperation,
-            onClick: /* @__PURE__ */ __name(() => {
-              commandService.executeCommand(OpenHyperLinkSidebarOperation.id, {
-                unitId,
-                subUnitId,
-                row: link.row,
-                column: link.column
-              });
-            }, "onClick"),
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { placement: "bottom", title: localeService.t("hyperLink.popup.edit"), children: /* @__PURE__ */ jsxRuntimeExports.jsx(WriteSingle, {}) })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "div",
-          {
-            className: styles.cellLinkOperation,
-            onClick: /* @__PURE__ */ __name(() => {
-              commandService.executeCommand(CancelHyperLinkCommand.id, {
-                unitId,
-                subUnitId,
-                id: link.id
-              });
-            }, "onClick"),
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { placement: "bottom", title: localeService.t("hyperLink.popup.cancel"), children: /* @__PURE__ */ jsxRuntimeExports.jsx(UnlinkSingle, {}) })
-          }
-        )
-      ] })
-    ] })
-  ] });
-}, "CellLinkPopup");
-CellLinkPopup.componentKey = "univer.sheet.cell-link-popup";
-var __defProp$a = Object.defineProperty, __getOwnPropDesc$a = Object.getOwnPropertyDescriptor, __decorateClass$a = /* @__PURE__ */ __name((decorators, target, key, kind) => {
-  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$a(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
+var __defProp$b = Object.defineProperty, __getOwnPropDesc$b = Object.getOwnPropertyDescriptor, __decorateClass$b = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$b(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$a(target, key, result), result;
-}, "__decorateClass$a"), __decorateParam$a = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$a");
-const isEqualLink = /* @__PURE__ */ __name((a, b) => a.unitId === b.unitId && a.subUnitId === b.subUnitId && a.row === b.row && a.col === b.col, "isEqualLink");
+  return kind && result && __defProp$b(target, key, result), result;
+}, "__decorateClass$b"), __decorateParam$b = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$b");
+const isEqualLink = /* @__PURE__ */ __name((a, b) => {
+  var _a15, _b;
+  return a.unitId === b.unitId && a.subUnitId === b.subUnitId && a.row === b.row && a.col === b.col && ((_a15 = a.customRange) == null ? void 0 : _a15.rangeId) === ((_b = b.customRange) == null ? void 0 : _b.rangeId) && a.type === b.type;
+}, "isEqualLink");
 var _a2;
 let SheetsHyperLinkPopupService = (_a2 = class extends Disposable {
-  constructor(_hyperLinkModel, _sheetCanvasPopManagerService) {
+  constructor(_sheetCanvasPopManagerService, _injector, _univerInstanceService, _editorBridgeService, _textSelectionManagerService, _docCanvasPopManagerService, _editorService, _rangeSelectorService, _zenZoneService) {
     super();
     __publicField(this, "_currentPopup", null);
     __publicField(this, "_currentPopup$", new Subject());
     __publicField(this, "currentPopup$", this._currentPopup$.asObservable());
+    __publicField(this, "_currentEditingPopup", null);
     __publicField(this, "_currentEditing$", new BehaviorSubject(null));
     __publicField(this, "currentEditing$", this._currentEditing$.asObservable());
-    this._hyperLinkModel = _hyperLinkModel, this._sheetCanvasPopManagerService = _sheetCanvasPopManagerService, this.disposeWithMe(() => {
+    this._sheetCanvasPopManagerService = _sheetCanvasPopManagerService, this._injector = _injector, this._univerInstanceService = _univerInstanceService, this._editorBridgeService = _editorBridgeService, this._textSelectionManagerService = _textSelectionManagerService, this._docCanvasPopManagerService = _docCanvasPopManagerService, this._editorService = _editorService, this._rangeSelectorService = _rangeSelectorService, this._zenZoneService = _zenZoneService, this.disposeWithMe(() => {
       this.hideCurrentPopup(), this.endEditing(), this._currentEditing$.complete(), this._currentPopup$.complete();
     });
   }
@@ -913,52 +1171,260 @@ let SheetsHyperLinkPopupService = (_a2 = class extends Disposable {
     return this._currentEditing$.getValue();
   }
   showPopup(location2) {
-    if (this._currentPopup && isEqualLink(location2, this._currentPopup))
+    if (this._currentPopup && isEqualLink(location2, this._currentPopup) || (this.hideCurrentPopup(void 0, !0), location2.type !== HyperLinkEditSourceType.ZEN_EDITOR && this._zenZoneService.visible))
+      return;
+    const currentEditing = this._currentEditing$.getValue();
+    if (currentEditing && isEqualLink(location2, currentEditing))
       return;
-    this.hideCurrentPopup();
-    const { unitId, subUnitId, row, col } = location2, link = this._hyperLinkModel.getHyperLinkByLocation(unitId, subUnitId, row, col);
-    if (!link)
+    const { unitId, subUnitId, row, col, customRangeRect, customRange } = location2;
+    if (!customRange)
       return;
-    const disposable = this._sheetCanvasPopManagerService.attachPopupToCell(row, col, {
+    let disposable;
+    const popup = {
       componentKey: CellLinkPopup.componentKey,
       direction: "bottom",
-      closeOnSelfTarget: !0,
       onClickOutside: /* @__PURE__ */ __name(() => {
         this.hideCurrentPopup();
-      }, "onClickOutside")
-    });
-    disposable && (this._currentPopup = {
+      }, "onClickOutside"),
+      onClick: /* @__PURE__ */ __name(() => {
+        this.hideCurrentPopup(location2.type, !0);
+      }, "onClick")
+    };
+    location2.type === HyperLinkEditSourceType.EDITING ? disposable = customRangeRect && this._sheetCanvasPopManagerService.attachPopupToAbsolutePosition(
+      customRangeRect,
+      popup
+    ) : location2.type === HyperLinkEditSourceType.ZEN_EDITOR ? disposable = this._docCanvasPopManagerService.attachPopupToRange(
+      {
+        startOffset: customRange.startIndex,
+        endOffset: customRange.endIndex + 1,
+        collapsed: !1
+      },
+      popup,
+      DOCS_ZEN_EDITOR_UNIT_ID_KEY
+    ) : disposable = customRangeRect && this._sheetCanvasPopManagerService.attachPopupByPosition(
+      customRangeRect,
+      popup
+    ), disposable && (this._currentPopup = {
       unitId,
       subUnitId,
-      id: link.id,
       disposable,
       row,
       col,
       editPermission: !!location2.editPermission,
-      copyPermission: !!location2.copyPermission
+      copyPermission: !!location2.copyPermission,
+      customRange,
+      type: location2.type
     }, this._currentPopup$.next(this._currentPopup));
   }
-  hideCurrentPopup() {
-    var _a14;
-    this._currentPopup && ((_a14 = this._currentPopup.disposable) == null || _a14.dispose(), this._currentPopup = null, this._currentPopup$.next(null));
+  hideCurrentPopup(type, force) {
+    var _a15, _b;
+    this._currentPopup && ((!type || type === this._currentPopup.type) && this._currentPopup.disposable.canDispose() || force) && ((_b = (_a15 = this._currentPopup) == null ? void 0 : _a15.disposable) == null || _b.dispose(), this._currentPopup = null, this._currentPopup$.next(null));
+  }
+  _getEditingRange() {
+    var _a15, _b, _c;
+    const visible = this._editorBridgeService.isVisible().visible, state = this._editorBridgeService.getEditCellState();
+    if (visible && state) {
+      const textRange = this._textSelectionManagerService.getActiveTextRange(), body = (_a15 = state.documentLayoutObject.documentModel) == null ? void 0 : _a15.getBody();
+      if (!body)
+        return null;
+      if (!textRange || textRange.collapsed)
+        return {
+          startOffset: 0,
+          endOffset: body.dataStream.length - 2,
+          collapsed: body.dataStream.length - 2 === 0,
+          label: getPlainTextFormBody(body)
+        };
+      const links = BuildTextUtils.customRange.getCustomRangesInterestsWithRange(textRange, (_c = (_b = body.customRanges) == null ? void 0 : _b.filter((i) => i.rangeType === CustomRangeType.HYPERLINK)) != null ? _c : []);
+      let start = textRange.startOffset, end = textRange.endOffset;
+      return links.forEach((link) => {
+        start = Math.min(start, link.startIndex), end = Math.max(end, link.endIndex + 1);
+      }), {
+        startOffset: start,
+        endOffset: end,
+        collapsed: start === end,
+        label: getPlainText(body.dataStream.slice(start, end))
+      };
+    }
+    return null;
+  }
+  get _editPopup() {
+    return {
+      componentKey: CellLinkEdit.componentKey,
+      direction: "bottom",
+      onClickOutside: /* @__PURE__ */ __name(() => {
+        const hyperLinkRangeSelectorId = createInternalEditorID("hyper-link-edit");
+        this._editorService.getFocusId() !== hyperLinkRangeSelectorId && (this._rangeSelectorService.getCurrentSelectorId() === hyperLinkRangeSelectorId && this._rangeSelectorService.selectorModalVisible || this.endEditing());
+      }, "onClickOutside"),
+      hiddenType: "hide"
+    };
+  }
+  startAddEditing(link) {
+    var _a15, _b, _c;
+    const { unitId, subUnitId, type } = link;
+    if (type === HyperLinkEditSourceType.ZEN_EDITOR) {
+      const document = this._univerInstanceService.getUnit(DOCS_ZEN_EDITOR_UNIT_ID_KEY, UniverInstanceType.UNIVER_DOC);
+      if (!document)
+        return;
+      const range = this._textSelectionManagerService.getActiveTextRange();
+      if (!range)
+        return;
+      this._currentEditingPopup = this._docCanvasPopManagerService.attachPopupToRange(
+        range,
+        this._editPopup,
+        DOCS_ZEN_EDITOR_UNIT_ID_KEY
+      );
+      const label = (_a15 = document.getBody()) == null ? void 0 : _a15.dataStream.slice(range.startOffset, range.endOffset - 1);
+      this._currentEditing$.next({
+        ...link,
+        label
+      });
+    } else if (type === HyperLinkEditSourceType.EDITING) {
+      const range = this._getEditingRange();
+      range && this._textSelectionManagerService.replaceTextRanges([{ ...range }]), this._currentEditingPopup = this._sheetCanvasPopManagerService.attachPopupToCell(
+        link.row,
+        link.col,
+        this._editPopup,
+        unitId,
+        subUnitId
+      ), this._currentEditing$.next({
+        ...link,
+        label: (_b = range == null ? void 0 : range.label) != null ? _b : ""
+      });
+    } else {
+      this._currentEditingPopup = this._sheetCanvasPopManagerService.attachPopupToCell(
+        link.row,
+        link.col,
+        this._editPopup,
+        unitId,
+        subUnitId
+      );
+      const workbook = this._univerInstanceService.getUnit(unitId, UniverInstanceType.UNIVER_SHEET), worksheet = workbook == null ? void 0 : workbook.getSheetBySheetId(subUnitId), cell = worksheet == null ? void 0 : worksheet.getCellRaw(link.row, link.col);
+      this._currentEditing$.next({
+        ...link,
+        label: cell != null && cell.p ? getPlainTextFormDocument(cell.p) : ((_c = cell == null ? void 0 : cell.v) != null ? _c : "").toString()
+      });
+    }
   }
   startEditing(link) {
-    this._currentEditing$.next(link);
+    var _a15, _b, _c, _d, _e, _f;
+    (_a15 = this._currentEditingPopup) == null || _a15.dispose(), this.hideCurrentPopup(void 0, !0);
+    const { unitId, subUnitId } = link;
+    let customRange, label;
+    if (link.type === HyperLinkEditSourceType.ZEN_EDITOR) {
+      const document = this._univerInstanceService.getUnit(DOCS_ZEN_EDITOR_UNIT_ID_KEY, UniverInstanceType.UNIVER_DOC);
+      if (customRange = (_c = (_b = document == null ? void 0 : document.getBody()) == null ? void 0 : _b.customRanges) == null ? void 0 : _c.find((range) => range.rangeId === link.customRangeId), label = customRange ? (_d = document == null ? void 0 : document.getBody()) == null ? void 0 : _d.dataStream.slice(customRange.startIndex + 1, customRange.endIndex) : "", !customRange || !label)
+        return;
+      this._textSelectionManagerService.replaceTextRanges([
+        {
+          startOffset: customRange.startIndex,
+          endOffset: customRange.endIndex + 1
+        }
+      ]), this._currentEditingPopup = this._docCanvasPopManagerService.attachPopupToRange(
+        {
+          startOffset: customRange.startIndex,
+          endOffset: customRange.endIndex,
+          collapsed: !1
+        },
+        this._editPopup,
+        DOCS_ZEN_EDITOR_UNIT_ID_KEY
+      );
+    } else if (link.type === HyperLinkEditSourceType.EDITING) {
+      const customRangeInfo = getEditingCustomRangePosition(this._injector, link.unitId, link.subUnitId, link.row, link.col, link.customRangeId);
+      if (!customRangeInfo || !((_e = customRangeInfo.rects) != null && _e.length))
+        return;
+      customRange = customRangeInfo.customRange, label = customRangeInfo.label, this._textSelectionManagerService.replaceTextRanges([
+        {
+          startOffset: customRange.startIndex,
+          endOffset: customRange.endIndex + 1
+        }
+      ]), this._currentEditingPopup = this._sheetCanvasPopManagerService.attachPopupToAbsolutePosition(
+        customRangeInfo.rects.pop(),
+        this._editPopup,
+        unitId,
+        subUnitId
+      );
+    } else {
+      const customRangeInfo = getCustomRangePosition(this._injector, link.unitId, link.subUnitId, link.row, link.col, link.customRangeId);
+      if (!customRangeInfo || !((_f = customRangeInfo.rects) != null && _f.length))
+        return;
+      customRange = customRangeInfo.customRange, label = customRangeInfo.label, this._currentEditingPopup = this._sheetCanvasPopManagerService.attachPopupByPosition(
+        customRangeInfo.rects.pop(),
+        this._editPopup,
+        unitId,
+        subUnitId
+      );
+    }
+    this._currentEditing$.next({
+      ...link,
+      customRange,
+      label
+    });
+  }
+  endEditing(type) {
+    var _a15;
+    const current = this._currentEditing$.getValue();
+    current && (!type || type === current.type) && ((_a15 = this._currentEditingPopup) == null || _a15.dispose(), this._currentEditing$.next(null));
+  }
+}, __name(_a2, "SheetsHyperLinkPopupService"), _a2);
+SheetsHyperLinkPopupService = __decorateClass$b([
+  __decorateParam$b(0, Inject(SheetCanvasPopManagerService)),
+  __decorateParam$b(1, Inject(Injector)),
+  __decorateParam$b(2, IUniverInstanceService),
+  __decorateParam$b(3, IEditorBridgeService),
+  __decorateParam$b(4, Inject(DocSelectionManagerService)),
+  __decorateParam$b(5, Inject(DocCanvasPopManagerService)),
+  __decorateParam$b(6, IEditorService),
+  __decorateParam$b(7, IRangeSelectorService),
+  __decorateParam$b(8, IZenZoneService)
+], SheetsHyperLinkPopupService);
+const OpenHyperLinkEditPanelOperation = {
+  type: CommandType.OPERATION,
+  id: "sheet.operation.open-hyper-link-edit-panel",
+  handler(accessor, params) {
+    if (!params)
+      return !1;
+    const popupService = accessor.get(SheetsHyperLinkPopupService);
+    return params.customRangeId ? popupService.startEditing(params) : popupService.startAddEditing(params), !0;
+  }
+}, CloseHyperLinkPopupOperation = {
+  type: CommandType.OPERATION,
+  id: "sheet.operation.close-hyper-link-popup",
+  handler(accessor) {
+    return accessor.get(SheetsHyperLinkPopupService).endEditing(), !0;
+  }
+}, InsertHyperLinkOperation = {
+  type: CommandType.OPERATION,
+  id: "sheet.operation.insert-hyper-link",
+  handler(accessor) {
+    var _a15;
+    const univerInstanceService = accessor.get(IUniverInstanceService), target = getSheetCommandTarget(univerInstanceService), editorBridgeService = accessor.get(IEditorBridgeService);
+    if (!target)
+      return !1;
+    const commandService = accessor.get(ICommandService), selection = accessor.get(SheetsSelectionsService).getCurrentLastSelection();
+    if (!selection)
+      return !1;
+    const row = selection.range.startRow, col = selection.range.startColumn, visible = editorBridgeService.isVisible(), isZenEditor = ((_a15 = univerInstanceService.getFocusedUnit()) == null ? void 0 : _a15.getUnitId()) === DOCS_ZEN_EDITOR_UNIT_ID_KEY;
+    return commandService.executeCommand(OpenHyperLinkEditPanelOperation.id, {
+      unitId: target.unitId,
+      subUnitId: target.subUnitId,
+      row,
+      col,
+      type: isZenEditor ? HyperLinkEditSourceType.ZEN_EDITOR : visible.visible ? HyperLinkEditSourceType.EDITING : HyperLinkEditSourceType.VIEWING
+    });
   }
-  endEditing() {
-    this._currentEditing$.next(null);
+}, InsertHyperLinkToolbarOperation = {
+  type: CommandType.OPERATION,
+  id: "sheet.operation.insert-hyper-link-toolbar",
+  handler(accessor) {
+    const commandService = accessor.get(ICommandService);
+    return accessor.get(SheetsHyperLinkPopupService).currentEditing ? commandService.executeCommand(CloseHyperLinkPopupOperation.id) : commandService.executeCommand(InsertHyperLinkOperation.id);
   }
-}, __name(_a2, "SheetsHyperLinkPopupService"), _a2);
-SheetsHyperLinkPopupService = __decorateClass$a([
-  __decorateParam$a(0, Inject(HyperLinkModel)),
-  __decorateParam$a(1, Inject(SheetCanvasPopManagerService))
-], SheetsHyperLinkPopupService);
-const SHEET_HYPER_LINK_UI_PLUGIN = "SHEET_HYPER_LINK_UI_PLUGIN";
-var __defProp$9 = Object.defineProperty, __getOwnPropDesc$9 = Object.getOwnPropertyDescriptor, __decorateClass$9 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
-  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$9(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
+}, SHEET_HYPER_LINK_UI_PLUGIN = "SHEET_HYPER_LINK_UI_PLUGIN";
+var __defProp$a = Object.defineProperty, __getOwnPropDesc$a = Object.getOwnPropertyDescriptor, __decorateClass$a = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$a(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$9(target, key, result), result;
-}, "__decorateClass$9"), __decorateParam$9 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$9"), _a3;
+  return kind && result && __defProp$a(target, key, result), result;
+}, "__decorateClass$a"), __decorateParam$a = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$a"), _a3;
 let SheetsHyperLinkCopyPasteController = (_a3 = class extends Disposable {
   constructor(_sheetClipboardService, _hyperLinkModel, _injector, _resolverService) {
     super();
@@ -989,7 +1455,7 @@ let SheetsHyperLinkCopyPasteController = (_a3 = class extends Disposable {
       onPastePlainText: /* @__PURE__ */ __name((pasteTo, clipText) => {
         const filterResult = this._filterPlainText(clipText);
         if (isLegalLink(clipText) && filterResult) {
-          const text = serializeUrl(clipText), { range, unitId, subUnitId } = pasteTo, { ranges: [pasteToRange], mapFunc } = virtualizeDiscreteRanges([range]), redos = [], undos = [];
+          const { range, unitId, subUnitId } = pasteTo, { ranges: [pasteToRange], mapFunc } = virtualizeDiscreteRanges([range]), redos = [], undos = [];
           return Range.foreach(pasteToRange, (originRow, originCol) => {
             const { row, col: column } = mapFunc(originRow, originCol), link = this._hyperLinkModel.getHyperLinkByLocation(unitId, subUnitId, row, column);
             link && redos.push({
@@ -999,27 +1465,6 @@ let SheetsHyperLinkCopyPasteController = (_a3 = class extends Disposable {
                 subUnitId,
                 id: link.id
               }
-            });
-            const newId = Tools.generateRandomId();
-            redos.push({
-              id: AddHyperLinkMutation.id,
-              params: {
-                unitId,
-                subUnitId,
-                link: {
-                  id: newId,
-                  row,
-                  column,
-                  payload: text
-                }
-              }
-            }), undos.push({
-              id: RemoveHyperLinkMutation.id,
-              params: {
-                unitId,
-                subUnitId,
-                id: newId
-              }
             }), link && undos.push({
               id: AddHyperLinkMutation.id,
               params: {
@@ -1048,9 +1493,9 @@ let SheetsHyperLinkCopyPasteController = (_a3 = class extends Disposable {
     const { rows, cols } = discreteRange;
     rows.forEach((row, rowIndex) => {
       cols.forEach((col, colIndex) => {
-        var _a14;
+        var _a15;
         const link = this._hyperLinkModel.getHyperLinkByLocation(unitId, subUnitId, row, col);
-        matrix.setValue(rowIndex, colIndex, (_a14 = link == null ? void 0 : link.id) != null ? _a14 : "");
+        matrix.setValue(rowIndex, colIndex, (_a15 = link == null ? void 0 : link.id) != null ? _a15 : "");
       });
     });
   }
@@ -1071,8 +1516,8 @@ let SheetsHyperLinkCopyPasteController = (_a3 = class extends Disposable {
       return { redos: [], undos: [] };
     const { unitId, subUnitId } = this._copyInfo, redos = [], undos = [], { ranges: [vCopyRange, vPastedRange], mapFunc } = virtualizeDiscreteRanges([copyInfo.copyRange, pastedRange]);
     return getRepeatRange(vCopyRange, vPastedRange, !0).forEach(({ startRange }) => {
-      var _a14;
-      (_a14 = this._copyInfo) == null || _a14.matrix.forValue((row, col, ruleId) => {
+      var _a15;
+      (_a15 = this._copyInfo) == null || _a15.matrix.forValue((row, col, ruleId) => {
         const range = Rectangle.getPositionRange(
           {
             startRow: row,
@@ -1120,18 +1565,104 @@ let SheetsHyperLinkCopyPasteController = (_a3 = class extends Disposable {
     }), { redos, undos };
   }
 }, __name(_a3, "SheetsHyperLinkCopyPasteController"), _a3);
-SheetsHyperLinkCopyPasteController = __decorateClass$9([
+SheetsHyperLinkCopyPasteController = __decorateClass$a([
   OnLifecycle(LifecycleStages.Ready, SheetsHyperLinkCopyPasteController),
-  __decorateParam$9(0, ISheetClipboardService),
-  __decorateParam$9(1, Inject(HyperLinkModel)),
-  __decorateParam$9(2, Inject(Injector)),
-  __decorateParam$9(3, Inject(SheetsHyperLinkResolverService))
+  __decorateParam$a(0, ISheetClipboardService),
+  __decorateParam$a(1, Inject(HyperLinkModel)),
+  __decorateParam$a(2, Inject(Injector)),
+  __decorateParam$a(3, Inject(SheetsHyperLinkResolverService))
 ], SheetsHyperLinkCopyPasteController);
-var __defProp$8 = Object.defineProperty, __getOwnPropDesc$8 = Object.getOwnPropertyDescriptor, __decorateClass$8 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
-  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$8(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
+const getLinkDisable$ = /* @__PURE__ */ __name((accessor) => {
+  const disableRange$ = getCurrentRangeDisable$(accessor, { workbookTypes: [WorkbookEditablePermission], worksheetTypes: [WorksheetEditPermission, WorksheetSetCellValuePermission, WorksheetInsertHyperlinkPermission], rangeTypes: [RangeProtectionPermissionEditPoint] }), univerInstanceService = accessor.get(IUniverInstanceService), sheetSelectionService = accessor.get(SheetsSelectionsService), disableCell$ = univerInstanceService.focused$.pipe(
+    map((focused) => focused ? univerInstanceService.getUnit(focused, UniverInstanceType.UNIVER_SHEET) : null),
+    mergeMap((unit) => unit ? unit.activeSheet$ : new Observable((sub) => {
+      sub.next(null);
+    })),
+    mergeMap((sheet) => sheetSelectionService.selectionMoveEnd$.pipe(map((selections) => sheet && { selections, sheet }))),
+    map((sheetWithSelection) => {
+      if (!sheetWithSelection)
+        return !0;
+      const { selections, sheet } = sheetWithSelection;
+      if (!selections.length)
+        return !0;
+      const row = selections[0].range.startRow, col = selections[0].range.startColumn, cell = sheet.getCell(row, col);
+      if (cell != null && cell.f || cell != null && cell.si)
+        return !0;
+      const disables = [
+        DataValidationType.CHECKBOX,
+        DataValidationType.LIST,
+        DataValidationType.LIST_MULTIPLE
+      ];
+      return !!(cell != null && cell.dataValidation && disables.includes(cell.dataValidation.rule.type));
+    })
+  );
+  return disableRange$.pipe(mergeMap((disableRange) => disableCell$.pipe(map((disableCell) => disableRange || disableCell))));
+}, "getLinkDisable$"), shouldDisableAddLink = /* @__PURE__ */ __name((accessor) => {
+  var _a15;
+  const textSelectionService = accessor.get(DocSelectionManagerService), 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 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++) {
+    const p2 = paragraphs[i];
+    if (activeRange.startOffset <= p2.startIndex && activeRange.endOffset > p2.startIndex)
+      return !0;
+    if (p2.startIndex > activeRange.endOffset)
+      break;
+  }
+  return !BuildTextUtils.customRange.getCustomRangesInterestsWithRange(activeRange, (_a15 = body.customRanges) != null ? _a15 : []).every((range) => range.rangeType === CustomRangeType.HYPERLINK);
+}, "shouldDisableAddLink"), getZenLinkDisable$ = /* @__PURE__ */ __name((accessor) => accessor.get(IUniverInstanceService).focused$.pipe(
+  mergeMap((focused) => !focused || focused !== DOCS_ZEN_EDITOR_UNIT_ID_KEY ? new Observable((sub) => sub.next(null)) : accessor.get(DocSelectionManagerService).textSelection$),
+  map((selection) => !selection || selection.unitId !== DOCS_ZEN_EDITOR_UNIT_ID_KEY ? !0 : shouldDisableAddLink(accessor))
+), "getZenLinkDisable$"), linkMenu = {
+  commandId: InsertHyperLinkOperation.id,
+  type: MenuItemType.BUTTON,
+  positions: [MenuPosition.CONTEXT_MENU],
+  title: "hyperLink.menu.add",
+  icon: "LinkSingle"
+}, genZenEditorMenuId = /* @__PURE__ */ __name((id) => `${id}-zen-editor`, "genZenEditorMenuId"), insertLinkMenuFactory = /* @__PURE__ */ __name((accessor) => ({
+  ...linkMenu,
+  id: linkMenu.commandId,
+  hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET),
+  disabled$: getLinkDisable$(accessor)
+  // disabled$: getObservableWithExclusiveRange$(accessor, getCurrentRangeDisable$(accessor, { workbookTypes: [WorkbookEditablePermission], worksheetTypes: [WorksheetEditPermission, WorksheetSetCellValuePermission, WorksheetInsertHyperlinkPermission], rangeTypes: [RangeProtectionPermissionEditPoint] })),
+}), "insertLinkMenuFactory"), zenEditorInsertLinkMenuFactory = /* @__PURE__ */ __name((accessor) => ({
+  ...linkMenu,
+  id: genZenEditorMenuId(linkMenu.commandId),
+  hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC, DOCS_ZEN_EDITOR_UNIT_ID_KEY),
+  disabled$: getZenLinkDisable$(accessor)
+}), "zenEditorInsertLinkMenuFactory"), linkToolbarMenu = {
+  tooltip: "hyperLink.form.addTitle",
+  positions: MenuPosition.TOOLBAR_START,
+  group: MenuGroup.TOOLBAR_OTHERS,
+  commandId: InsertHyperLinkToolbarOperation.id,
+  type: MenuItemType.BUTTON,
+  icon: "LinkSingle"
+}, insertLinkMenuToolbarFactory = /* @__PURE__ */ __name((accessor) => ({
+  ...linkToolbarMenu,
+  id: linkToolbarMenu.commandId,
+  hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET),
+  disabled$: getLinkDisable$(accessor)
+}), "insertLinkMenuToolbarFactory"), zenEditorInsertLinkMenuToolbarFactory = /* @__PURE__ */ __name((accessor) => ({
+  ...linkToolbarMenu,
+  id: genZenEditorMenuId(linkToolbarMenu.commandId),
+  hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC, DOCS_ZEN_EDITOR_UNIT_ID_KEY),
+  disabled$: getZenLinkDisable$(accessor)
+}), "zenEditorInsertLinkMenuToolbarFactory"), InsertLinkShortcut = {
+  id: InsertHyperLinkToolbarOperation.id,
+  binding: KeyCode.K | MetaKeys.CTRL_COMMAND,
+  preconditions: whenSheetEditorFocused
+};
+var __defProp$9 = Object.defineProperty, __getOwnPropDesc$9 = Object.getOwnPropertyDescriptor, __decorateClass$9 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$9(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$8(target, key, result), result;
-}, "__decorateClass$8"), __decorateParam$8 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$8"), _a4;
+  return kind && result && __defProp$9(target, key, result), result;
+}, "__decorateClass$9"), __decorateParam$9 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$9"), _a4;
 let SheetsHyperLinkRemoveSheetController = (_a4 = class extends Disposable {
   constructor(_sheetInterceptorService, _univerInstanceService, _hyperLinkModel) {
     super(), this._sheetInterceptorService = _sheetInterceptorService, this._univerInstanceService = _univerInstanceService, this._hyperLinkModel = _hyperLinkModel, this._initSheetChange();
@@ -1140,12 +1671,12 @@ let SheetsHyperLinkRemoveSheetController = (_a4 = class extends Disposable {
     this.disposeWithMe(
       this._sheetInterceptorService.interceptCommand({
         getMutations: /* @__PURE__ */ __name((commandInfo) => {
-          var _a14;
+          var _a15;
           if (commandInfo.id === RemoveSheetCommand.id) {
             const params = commandInfo.params, workbook = params.unitId ? this._univerInstanceService.getUnit(params.unitId) : this._univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET);
             if (!workbook)
               return { redos: [], undos: [] };
-            const unitId = workbook.getUnitId(), subUnitId = params.subUnitId || ((_a14 = workbook.getActiveSheet()) == null ? void 0 : _a14.getSheetId());
+            const unitId = workbook.getUnitId(), subUnitId = params.subUnitId || ((_a15 = workbook.getActiveSheet()) == null ? void 0 : _a15.getSheetId());
             if (!subUnitId)
               return { redos: [], undos: [] };
             const links = this._hyperLinkModel.getSubUnit(unitId, subUnitId), redos = links.map((link) => ({
@@ -1171,25 +1702,25 @@ let SheetsHyperLinkRemoveSheetController = (_a4 = class extends Disposable {
     );
   }
 }, __name(_a4, "SheetsHyperLinkRemoveSheetController"), _a4);
-SheetsHyperLinkRemoveSheetController = __decorateClass$8([
+SheetsHyperLinkRemoveSheetController = __decorateClass$9([
   OnLifecycle(LifecycleStages.Ready, SheetsHyperLinkRemoveSheetController),
-  __decorateParam$8(0, Inject(SheetInterceptorService)),
-  __decorateParam$8(1, IUniverInstanceService),
-  __decorateParam$8(2, Inject(HyperLinkModel))
+  __decorateParam$9(0, Inject(SheetInterceptorService)),
+  __decorateParam$9(1, IUniverInstanceService),
+  __decorateParam$9(2, Inject(HyperLinkModel))
 ], SheetsHyperLinkRemoveSheetController);
-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--)
+var __defProp$8 = Object.defineProperty, __getOwnPropDesc$8 = Object.getOwnPropertyDescriptor, __decorateClass$8 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
+  for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$8(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$7(target, key, result), result;
-}, "__decorateClass$7"), __decorateParam$7 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$7"), _a5;
+  return kind && result && __defProp$8(target, key, result), result;
+}, "__decorateClass$8"), __decorateParam$8 = /* @__PURE__ */ __name((index, decorator) => (target, key) => decorator(target, key, index), "__decorateParam$8"), _a5;
 let SheetsHyperLinkRenderController = (_a5 = class extends Disposable {
   constructor(_context, _hyperLinkModel, _sheetSkeletonManagerService, _renderManagerService) {
     super(), this._context = _context, this._hyperLinkModel = _hyperLinkModel, this._sheetSkeletonManagerService = _sheetSkeletonManagerService, this._renderManagerService = _renderManagerService, this._initSkeletonChange();
   }
   _initSkeletonChange() {
     const markSkeletonDirty = /* @__PURE__ */ __name(() => {
-      var _a14;
-      const workbook = this._context.unit, unitId = workbook.getUnitId(), subUnitId = (_a14 = workbook.getActiveSheet()) == null ? void 0 : _a14.getSheetId();
+      var _a15;
+      const workbook = this._context.unit, unitId = workbook.getUnitId(), subUnitId = (_a15 = workbook.getActiveSheet()) == null ? void 0 : _a15.getSheetId();
       if (!subUnitId) {
         console.warn("No active sheet found");
         return;
@@ -1202,10 +1733,10 @@ let SheetsHyperLinkRenderController = (_a5 = class extends Disposable {
     }));
   }
 }, __name(_a5, "SheetsHyperLinkRenderController"), _a5);
-SheetsHyperLinkRenderController = __decorateClass$7([
-  __decorateParam$7(1, Inject(HyperLinkModel)),
-  __decorateParam$7(2, Inject(SheetSkeletonManagerService)),
-  __decorateParam$7(3, IRenderManagerService)
+SheetsHyperLinkRenderController = __decorateClass$8([
+  __decorateParam$8(1, Inject(HyperLinkModel)),
+  __decorateParam$8(2, Inject(SheetSkeletonManagerService)),
+  __decorateParam$8(3, IRenderManagerService)
 ], SheetsHyperLinkRenderController);
 var _a6;
 let SheetsHyperLinkRenderManagerController = (_a6 = class extends Disposable {
@@ -1218,17 +1749,11 @@ let SheetsHyperLinkRenderManagerController = (_a6 = class extends Disposable {
         INTERCEPTOR_POINT.CELL_CONTENT,
         {
           handler: /* @__PURE__ */ __name((cell, pos, next) => {
-            const { row, col, unitId, subUnitId } = pos, link = this._hyperLinkModel.getHyperLinkByLocation(unitId, subUnitId, row, col), styleSheet = this._themeService.getCurrentTheme();
+            const { row, col, unitId, subUnitId } = pos, link = this._hyperLinkModel.getHyperLinkByLocation(unitId, subUnitId, row, col);
             return next(link ? {
               ...cell,
-              interceptorStyle: {
-                ul: {
-                  s: BooleanNumber.TRUE
-                },
-                cl: {
-                  rgb: styleSheet.blue500
-                }
-              }
+              linkUrl: link.payload,
+              linkId: link.id
             } : cell);
           }, "handler"),
           priority: 100
@@ -1237,140 +1762,32 @@ let SheetsHyperLinkRenderManagerController = (_a6 = class extends Disposable {
     );
   }
 }, __name(_a6, "SheetsHyperLinkRenderManagerController"), _a6);
-SheetsHyperLinkRenderManagerController = __decorateClass$7([
+SheetsHyperLinkRenderManagerController = __decorateClass$8([
   OnLifecycle(LifecycleStages.Ready, SheetsHyperLinkRenderManagerController),
-  __decorateParam$7(0, Inject(SheetInterceptorService)),
-  __decorateParam$7(1, Inject(HyperLinkModel)),
-  __decorateParam$7(2, Inject(ThemeService))
+  __decorateParam$8(0, Inject(SheetInterceptorService)),
+  __decorateParam$8(1, Inject(HyperLinkModel)),
+  __decorateParam$8(2, Inject(ThemeService))
 ], SheetsHyperLinkRenderManagerController);
-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"), _a7;
+  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"), _a7;
 let SheetHyperLinkSetRangeController = (_a7 = class extends Disposable {
-  constructor(_sheetInterceptorService, _injector, _hyperLinkModel, _selectionManagerService, _univerInstanceService, _editorBridgeService) {
-    super(), this._sheetInterceptorService = _sheetInterceptorService, this._injector = _injector, this._hyperLinkModel = _hyperLinkModel, this._selectionManagerService = _selectionManagerService, this._univerInstanceService = _univerInstanceService, this._editorBridgeService = _editorBridgeService, this._initCommandInterceptor();
+  constructor(_sheetInterceptorService, _hyperLinkModel, _selectionManagerService, _univerInstanceService, _editorBridgeService, _renderManagerService) {
+    super(), this._sheetInterceptorService = _sheetInterceptorService, this._hyperLinkModel = _hyperLinkModel, this._selectionManagerService = _selectionManagerService, this._univerInstanceService = _univerInstanceService, this._editorBridgeService = _editorBridgeService, this._renderManagerService = _renderManagerService, this._initCommandInterceptor(), this._initAfterEditor();
   }
   _initCommandInterceptor() {
-    this._initAddHyperLinkCommandInterceptor(), this._initSetRangeValuesCommandInterceptor(), this._initUpdateHyperLinkCommandInterceptor(), this._initClearSelectionCommandInterceptor(), this._initRichTextEditorInterceptor();
-  }
-  _getCurrentCell(unitId, subUnitId, row, col) {
-    var _a14, _b;
-    return (_b = (_a14 = this._univerInstanceService.getUnit(unitId, UniverInstanceType.UNIVER_SHEET)) == null ? void 0 : _a14.getSheetBySheetId(subUnitId)) == null ? void 0 : _b.getCell(row, col);
-  }
-  _initAddHyperLinkCommandInterceptor() {
-    this.disposeWithMe(this._sheetInterceptorService.interceptCommand({
-      getMutations: /* @__PURE__ */ __name((command) => {
-        var _a14;
-        if (command.id === AddHyperLinkCommand.id) {
-          const params = command.params, { unitId, subUnitId, link } = params, currentCell = this._getCurrentCell(unitId, subUnitId, link.row, link.column), redoParams = {
-            unitId,
-            subUnitId,
-            cellValue: {
-              [link.row]: {
-                [link.column]: {
-                  v: link.display,
-                  // t: CellValueType.STRING, // Setting a link to a number is still a number
-                  p: null,
-                  t: (_a14 = currentCell == null ? void 0 : currentCell.t) != null ? _a14 : void 0
-                  // Keep force string type
-                }
-              }
-            }
-          };
-          return {
-            redos: [{
-              id: SetRangeValuesMutation.id,
-              params: redoParams
-            }],
-            undos: [{
-              id: SetRangeValuesMutation.id,
-              params: SetRangeValuesUndoMutationFactory(this._injector, redoParams)
-            }]
-          };
-        }
-        return {
-          redos: [],
-          undos: []
-        };
-      }, "getMutations")
-    }));
-  }
-  _initUpdateHyperLinkCommandInterceptor() {
-    this.disposeWithMe(this._sheetInterceptorService.interceptCommand({
-      getMutations: /* @__PURE__ */ __name((command) => {
-        if (command.id === UpdateHyperLinkCommand.id) {
-          const params = command.params, { unitId, subUnitId, id, payload } = params, current = this._hyperLinkModel.getHyperLink(unitId, subUnitId, id);
-          if (current && current.display !== payload.display) {
-            const redoParams = {
-              unitId,
-              subUnitId,
-              cellValue: {
-                [current.row]: {
-                  [current.column]: {
-                    v: payload.display,
-                    t: CellValueType.STRING,
-                    p: null
-                  }
-                }
-              }
-            };
-            return {
-              redos: [{
-                id: SetRangeValuesMutation.id,
-                params: redoParams
-              }],
-              undos: [{
-                id: SetRangeValuesMutation.id,
-                params: SetRangeValuesUndoMutationFactory(this._injector, redoParams)
-              }]
-            };
-          }
-        }
-        return {
-          redos: [],
-          undos: []
-        };
-      }, "getMutations")
-    }));
+    this._initSetRangeValuesCommandInterceptor(), this._initClearSelectionCommandInterceptor();
   }
   _initSetRangeValuesCommandInterceptor() {
     this.disposeWithMe(this._sheetInterceptorService.interceptCommand({
       getMutations: /* @__PURE__ */ __name((command) => {
         if (command.id === SetRangeValuesCommand.id) {
           const params = command.params, { unitId, subUnitId } = params, redos = [], undos = [];
-          return params.cellValue && new ObjectMatrix(params.cellValue).forValue((row, col, cell) => {
-            var _a14, _b, _c, _d, _e, _f, _g;
-            const cellValueRaw = (_c = cell == null ? void 0 : cell.v) != null ? _c : (_b = (_a14 = cell == null ? void 0 : cell.p) == null ? void 0 : _a14.body) == null ? void 0 : _b.dataStream.slice(0, -2), cellValue = (cellValueRaw != null ? cellValueRaw : "").toString(), link = this._hyperLinkModel.getHyperLinkByLocation(unitId, subUnitId, row, col);
-            if (!link) {
-              if (isLegalLink(cellValue) || (_d = cell == null ? void 0 : cell.custom) != null && _d.__link_url) {
-                const url = (_f = (_e = cell == null ? void 0 : cell.custom) == null ? void 0 : _e.__link_url) != null ? _f : cellValue, id = Tools.generateRandomId();
-                undos.push({
-                  id: RemoveHyperLinkMutation.id,
-                  params: {
-                    unitId,
-                    subUnitId,
-                    id
-                  }
-                }), redos.push({
-                  id: AddHyperLinkMutation.id,
-                  params: {
-                    unitId,
-                    subUnitId,
-                    link: {
-                      id,
-                      row,
-                      column: col,
-                      display: cellValue,
-                      payload: serializeUrl(url)
-                    }
-                  }
-                });
-              }
-              return;
-            }
-            (cellValueRaw === "" || ((_g = cell == null ? void 0 : cell.custom) == null ? void 0 : _g.__link_url) === "") && (redos.push({
+          return params.cellValue && new ObjectMatrix(params.cellValue).forValue((row, col) => {
+            const link = this._hyperLinkModel.getHyperLinkByLocation(unitId, subUnitId, row, col);
+            link && (redos.push({
               id: RemoveHyperLinkMutation.id,
               params: {
                 unitId,
@@ -1435,88 +1852,220 @@ let SheetHyperLinkSetRangeController = (_a7 = class extends Disposable {
       }, "getMutations")
     }));
   }
-  _initRichTextEditorInterceptor() {
-    this.disposeWithMe(
-      this._editorBridgeService.interceptor.intercept(
-        this._editorBridgeService.interceptor.getInterceptPoints().AFTER_CELL_EDIT,
-        {
-          handler: /* @__PURE__ */ __name((data, context, next) => {
-            var _a14, _b, _c;
-            if (data != null && data.p) {
-              const range = (_b = (_a14 = data.p.body) == null ? void 0 : _a14.customRanges) == null ? void 0 : _b.find((i) => i.rangeType === CustomRangeType.HYPERLINK);
-              if (range) {
-                const url = (_c = range.properties) == null ? void 0 : _c.url;
-                return next({
-                  ...data,
-                  p: null,
-                  v: getPlainTextFormDocument(data.p),
-                  t: CellValueType.STRING,
-                  custom: {
-                    __link_url: url
-                  }
-                });
+  _initAfterEditor() {
+    this.disposeWithMe(this._editorBridgeService.interceptor.intercept(this._editorBridgeService.interceptor.getInterceptPoints().AFTER_CELL_EDIT, {
+      handler: /* @__PURE__ */ __name((cell, context, next) => {
+        if (!cell || cell.p)
+          return next(cell);
+        if (typeof cell.v == "string" && Tools.isLegalUrl(cell.v) && cell.v[cell.v.length - 1] !== " ") {
+          const { unitId, subUnitId } = context, renderer = this._renderManagerService.getRenderById(unitId), skeleton = renderer == null ? void 0 : renderer.with(SheetSkeletonManagerService).getWorksheetSkeleton(subUnitId);
+          if (!skeleton)
+            return next(cell);
+          const doc = skeleton.skeleton.getBlankCellDocumentModel(cell);
+          if (!doc.documentModel)
+            return next(cell);
+          const textX = BuildTextUtils.selection.replace({
+            selection: {
+              startOffset: 0,
+              endOffset: cell.v.length,
+              collapsed: !1
+            },
+            body: {
+              dataStream: `${DataStreamTreeTokenType.CUSTOM_RANGE_START}${cell.v}${DataStreamTreeTokenType.CUSTOM_RANGE_END}`,
+              customRanges: [{
+                startIndex: 0,
+                endIndex: cell.v.length,
+                rangeId: generateRandomId(),
+                rangeType: CustomRangeType.HYPERLINK,
+                properties: {
+                  url: cell.v
+                }
+              }]
+            },
+            doc: doc.documentModel
+          });
+          if (!textX)
+            return next(cell);
+          const body = doc.documentModel.getBody();
+          return TextX.apply(body, textX.serialize()), next({
+            ...cell,
+            p: {
+              id: DOCS_NORMAL_EDITOR_UNIT_ID_KEY,
+              body,
+              documentStyle: {
+                pageSize: {
+                  width: 1 / 0,
+                  height: 1 / 0
+                }
               }
             }
-            return next(data);
-          }, "handler")
+          });
         }
-      )
-    );
+        return next(cell);
+      }, "handler")
+    }));
   }
 }, __name(_a7, "SheetHyperLinkSetRangeController"), _a7);
-SheetHyperLinkSetRangeController = __decorateClass$6([
+SheetHyperLinkSetRangeController = __decorateClass$7([
   OnLifecycle(LifecycleStages.Starting, SheetHyperLinkSetRangeController),
-  __decorateParam$6(0, Inject(SheetInterceptorService)),
-  __decorateParam$6(1, Inject(Injector)),
-  __decorateParam$6(2, Inject(HyperLinkModel)),
-  __decorateParam$6(3, Inject(SheetsSelectionsService)),
-  __decorateParam$6(4, IUniverInstanceService),
-  __decorateParam$6(5, IEditorBridgeService)
+  __decorateParam$7(0, Inject(SheetInterceptorService)),
+  __decorateParam$7(1, Inject(HyperLinkModel)),
+  __decorateParam$7(2, Inject(SheetsSelectionsService)),
+  __decorateParam$7(3, IUniverInstanceService),
+  __decorateParam$7(4, IEditorBridgeService),
+  __decorateParam$7(5, IRenderManagerService)
 ], SheetHyperLinkSetRangeController);
-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"), _a8;
+  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"), _a8;
 let SheetsHyperLinkPopupController = (_a8 = class extends Disposable {
-  constructor(_hoverManagerService, _sheetsHyperLinkPopupService, _renderManagerService, _permissionService, _sheetPermissionInterceptorBaseController, _commandService) {
-    super(), this._hoverManagerService = _hoverManagerService, this._sheetsHyperLinkPopupService = _sheetsHyperLinkPopupService, this._renderManagerService = _renderManagerService, this._permissionService = _permissionService, this._sheetPermissionInterceptorBaseController = _sheetPermissionInterceptorBaseController, this._commandService = _commandService, this._initHoverListener(), this._initCommandListener();
+  constructor(_hoverManagerService, _sheetsHyperLinkPopupService, _renderManagerService, _permissionService, _sheetPermissionInterceptorBaseController, _commandService, _editorBridgeService, _textSelectionManagerService, _univerInstanceService, _zenZoneService) {
+    super(), this._hoverManagerService = _hoverManagerService, this._sheetsHyperLinkPopupService = _sheetsHyperLinkPopupService, this._renderManagerService = _renderManagerService, this._permissionService = _permissionService, this._sheetPermissionInterceptorBaseController = _sheetPermissionInterceptorBaseController, this._commandService = _commandService, this._editorBridgeService = _editorBridgeService, this._textSelectionManagerService = _textSelectionManagerService, this._univerInstanceService = _univerInstanceService, this._zenZoneService = _zenZoneService, this._initHoverListener(), this._initCommandListener(), this._initHoverEditingListener(), this._initTextSelectionListener(), this._initZenEditor();
+  }
+  _getLinkPermission(location2) {
+    const { unitId, subUnitId, row: currentRow, col: currentCol } = location2, viewPermission = this._sheetPermissionInterceptorBaseController.permissionCheckWithRanges({
+      workbookTypes: [WorkbookViewPermission],
+      worksheetTypes: [WorksheetViewPermission],
+      rangeTypes: [RangeProtectionPermissionViewPoint]
+    }, [{ startRow: currentRow, startColumn: currentCol, endRow: currentRow, endColumn: currentCol }]), editPermission = this._sheetPermissionInterceptorBaseController.permissionCheckWithRanges({
+      workbookTypes: [WorkbookEditablePermission],
+      worksheetTypes: [WorksheetEditPermission, WorksheetInsertHyperlinkPermission],
+      rangeTypes: [RangeProtectionPermissionEditPoint]
+    }, [{ startRow: currentRow, startColumn: currentCol, endRow: currentRow, endColumn: currentCol }]), copyPermission = this._permissionService.composePermission([new WorkbookCopyPermission(unitId).id, new WorksheetCopyPermission(unitId, subUnitId).id]).every((permission) => permission.value);
+    return {
+      viewPermission,
+      editPermission,
+      copyPermission
+    };
   }
   _initHoverListener() {
     this.disposeWithMe(
-      this._hoverManagerService.currentCell$.pipe(debounceTime(200)).subscribe((currentCell) => {
-        var _a14, _b;
+      // hover over not editing cell
+      this._hoverManagerService.currentRichText$.pipe(debounceTime(200)).subscribe((currentCell) => {
+        var _a15;
         if (!currentCell) {
           this._sheetsHyperLinkPopupService.hideCurrentPopup();
           return;
         }
-        const skeleton = (_b = (_a14 = this._renderManagerService.getRenderById(currentCell.location.unitId)) == null ? void 0 : _a14.with(SheetSkeletonManagerService).getWorksheetSkeleton(currentCell.location.subUnitId)) == null ? void 0 : _b.skeleton, currentCol = currentCell.location.col, currentRow = currentCell.location.row;
+        const { unitId, subUnitId, row, col } = currentCell, renderer = this._renderManagerService.getRenderById(unitId);
+        if (!renderer)
+          return;
+        if (!renderer.with(HoverRenderController).active) {
+          this._sheetsHyperLinkPopupService.hideCurrentPopup(HyperLinkEditSourceType.VIEWING);
+          return;
+        }
+        const skeleton = (_a15 = renderer == null ? void 0 : renderer.with(SheetSkeletonManagerService).getWorksheetSkeleton(subUnitId)) == null ? void 0 : _a15.skeleton, currentCol = col, currentRow = row;
         let targetRow = currentRow, targetCol = currentCol;
-        if (skeleton && skeleton.overflowCache.forValue((row, col, value) => {
-          Rectangle.contains(value, { startColumn: currentCol, endColumn: currentCol, startRow: currentRow, endRow: currentRow }) && (targetRow = row, targetCol = col);
-        }), !this._sheetPermissionInterceptorBaseController.permissionCheckWithRanges({
-          workbookTypes: [WorkbookViewPermission],
-          worksheetTypes: [WorksheetViewPermission],
-          rangeTypes: [RangeProtectionPermissionViewPoint]
-        }, [{ startRow: currentRow, startColumn: currentCol, endRow: currentRow, endColumn: currentCol }])) {
+        skeleton && skeleton.overflowCache.forValue((row2, col2, value) => {
+          Rectangle.contains(value, { startColumn: currentCol, endColumn: currentCol, startRow: currentRow, endRow: currentRow }) && (targetRow = row2, targetCol = col2);
+        });
+        const { viewPermission, editPermission, copyPermission } = this._getLinkPermission(currentCell);
+        if (!viewPermission || !currentCell.customRange) {
           this._sheetsHyperLinkPopupService.hideCurrentPopup();
           return;
         }
-        const editPermission = this._sheetPermissionInterceptorBaseController.permissionCheckWithRanges({
-          workbookTypes: [WorkbookEditablePermission],
-          worksheetTypes: [WorksheetEditPermission, WorksheetInsertHyperlinkPermission],
-          rangeTypes: [RangeProtectionPermissionEditPoint]
-        }, [{ startRow: currentRow, startColumn: currentCol, endRow: currentRow, endColumn: currentCol }]), unitId = currentCell.location.unitId, subUnitId = currentCell.location.subUnitId, copyPermission = this._permissionService.composePermission([new WorkbookCopyPermission(unitId).id, new WorksheetCopyPermission(unitId, subUnitId).id]).every((permission) => permission.value);
         this._sheetsHyperLinkPopupService.showPopup({
-          ...currentCell.location,
           row: targetRow,
           col: targetCol,
           editPermission,
-          copyPermission
+          copyPermission,
+          customRange: currentCell.customRange,
+          customRangeRect: currentCell.rect,
+          type: HyperLinkEditSourceType.VIEWING,
+          unitId,
+          subUnitId
         });
       })
     );
   }
+  _initHoverEditingListener() {
+    let subscribe = null;
+    this.disposeWithMe(
+      this._editorBridgeService.currentEditCellState$.pipe(mergeMap((state) => this._editorBridgeService.visible$.pipe(map((visible) => ({ visible, state }))))).subscribe(({ visible, state }) => {
+        if (!state || state.editorUnitId !== DOCS_NORMAL_EDITOR_UNIT_ID_KEY)
+          return;
+        if (!visible.visible) {
+          subscribe == null || subscribe.unsubscribe(), this._sheetsHyperLinkPopupService.hideCurrentPopup(HyperLinkEditSourceType.EDITING), this._sheetsHyperLinkPopupService.endEditing(HyperLinkEditSourceType.EDITING);
+          return;
+        }
+        const { editorUnitId, unitId, sheetId, row, column } = state, renderer = this._renderManagerService.getRenderById(editorUnitId);
+        if (!renderer)
+          return;
+        const { editPermission, viewPermission, copyPermission } = this._getLinkPermission({ unitId, subUnitId: sheetId, row, col: column }), docEventService = renderer.with(DocEventManagerService);
+        viewPermission && (subscribe == null || subscribe.unsubscribe(), subscribe = docEventService.hoverCustomRanges$.pipe(debounceTime(200)).subscribe((customRanges) => {
+          var _a15, _b;
+          const customRange = customRanges.find((customRange2) => customRange2.range.rangeType === CustomRangeType.HYPERLINK);
+          if (!customRange) {
+            this._sheetsHyperLinkPopupService.hideCurrentPopup();
+            return;
+          }
+          const rect = customRange.rects[customRange.rects.length - 1];
+          if (!((_b = (_a15 = this._renderManagerService.getRenderById(unitId)) == null ? void 0 : _a15.with(SheetSkeletonManagerService).getWorksheetSkeleton(sheetId)) == null ? void 0 : _b.skeleton) || !rect)
+            return;
+          const canvasClientRect = renderer.engine.getCanvasElement().getBoundingClientRect();
+          this._sheetsHyperLinkPopupService.showPopup({
+            unitId,
+            subUnitId: sheetId,
+            row,
+            col: column,
+            customRange: customRange.range,
+            customRangeRect: {
+              left: rect.left + canvasClientRect.left,
+              top: rect.top + canvasClientRect.top,
+              bottom: rect.bottom + canvasClientRect.top,
+              right: rect.right + canvasClientRect.left
+            },
+            editPermission,
+            copyPermission,
+            type: HyperLinkEditSourceType.EDITING
+          });
+        }));
+      })
+    ), this.disposeWithMe(() => {
+      subscribe == null || subscribe.unsubscribe();
+    });
+  }
+  _initZenEditor() {
+    this.disposeWithMe(
+      this._zenZoneService.visible$.subscribe((visible) => {
+        visible && (this._sheetsHyperLinkPopupService.hideCurrentPopup(HyperLinkEditSourceType.VIEWING), this._sheetsHyperLinkPopupService.hideCurrentPopup(HyperLinkEditSourceType.EDITING), this._sheetsHyperLinkPopupService.endEditing(HyperLinkEditSourceType.EDITING), this._sheetsHyperLinkPopupService.hideCurrentPopup(HyperLinkEditSourceType.VIEWING));
+      })
+    ), this.disposeWithMe(
+      this._univerInstanceService.focused$.pipe(
+        mergeMap((id) => {
+          const render2 = id === DOCS_ZEN_EDITOR_UNIT_ID_KEY ? this._renderManagerService.getRenderById(id) : null;
+          return render2 ? render2.with(DocEventManagerService).hoverCustomRanges$.pipe(debounceTime(200)) : new Observable((sub) => {
+            sub.next(null);
+          });
+        })
+      ).subscribe((value) => {
+        const range = value == null ? void 0 : value.find((range2) => range2.range.rangeType === CustomRangeType.HYPERLINK), state = this._editorBridgeService.getEditCellState();
+        if (range && state) {
+          const { unitId, sheetId, row, column } = state, { editPermission, viewPermission, copyPermission } = this._getLinkPermission({ unitId, subUnitId: sheetId, row, col: column });
+          viewPermission && this._sheetsHyperLinkPopupService.showPopup({
+            type: HyperLinkEditSourceType.ZEN_EDITOR,
+            unitId,
+            subUnitId: sheetId,
+            row,
+            col: column,
+            customRange: range.range,
+            editPermission,
+            copyPermission
+          });
+        } else
+          this._sheetsHyperLinkPopupService.hideCurrentPopup(HyperLinkEditSourceType.ZEN_EDITOR);
+      })
+    );
+  }
+  _initTextSelectionListener() {
+    this.disposeWithMe(
+      this._textSelectionManagerService.textSelection$.subscribe((selection) => {
+        selection && selection.unitId === DOCS_NORMAL_EDITOR_UNIT_ID_KEY && this._sheetsHyperLinkPopupService.endEditing(HyperLinkEditSourceType.EDITING);
+      })
+    );
+  }
   _initCommandListener() {
     const HIDE_COMMAND_LIST = [ClearSelectionContentCommand.id, ClearSelectionAllCommand.id, ClearSelectionFormatCommand.id];
     this.disposeWithMe(this._commandService.onCommandExecuted((command) => {
@@ -1524,38 +2073,28 @@ let SheetsHyperLinkPopupController = (_a8 = class extends Disposable {
     }));
   }
 }, __name(_a8, "SheetsHyperLinkPopupController"), _a8);
-SheetsHyperLinkPopupController = __decorateClass$5([
+SheetsHyperLinkPopupController = __decorateClass$6([
   OnLifecycle(LifecycleStages.Rendered, SheetsHyperLinkPopupController),
-  __decorateParam$5(0, Inject(HoverManagerService)),
-  __decorateParam$5(1, Inject(SheetsHyperLinkPopupService)),
-  __decorateParam$5(2, Inject(IRenderManagerService)),
-  __decorateParam$5(3, Inject(IPermissionService)),
-  __decorateParam$5(4, Inject(SheetPermissionInterceptorBaseController)),
-  __decorateParam$5(5, ICommandService)
+  __decorateParam$6(0, Inject(HoverManagerService)),
+  __decorateParam$6(1, Inject(SheetsHyperLinkPopupService)),
+  __decorateParam$6(2, Inject(IRenderManagerService)),
+  __decorateParam$6(3, Inject(IPermissionService)),
+  __decorateParam$6(4, Inject(SheetPermissionInterceptorBaseController)),
+  __decorateParam$6(5, ICommandService),
+  __decorateParam$6(6, IEditorBridgeService),
+  __decorateParam$6(7, Inject(DocSelectionManagerService)),
+  __decorateParam$6(8, IUniverInstanceService),
+  __decorateParam$6(9, IZenZoneService)
 ], SheetsHyperLinkPopupController);
-const insertLinkMenuFactory = /* @__PURE__ */ __name((accessor) => ({
-  id: InsertHyperLinkOperation.id,
-  type: MenuItemType.BUTTON,
-  title: "hyperLink.menu.add",
-  hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET),
-  icon: "LinkSingle",
-  disabled$: getObservableWithExclusiveRange$(accessor, getCurrentRangeDisable$(accessor, { workbookTypes: [WorkbookEditablePermission], worksheetTypes: [WorksheetEditPermission, WorksheetSetCellValuePermission, WorksheetInsertHyperlinkPermission], rangeTypes: [RangeProtectionPermissionEditPoint] }))
-}), "insertLinkMenuFactory"), insertLinkMenuToolbarFactory = /* @__PURE__ */ __name((accessor) => ({
-  tooltip: "hyperLink.form.addTitle",
-  id: InsertHyperLinkToolbarOperation.id,
-  type: MenuItemType.BUTTON,
-  icon: "LinkSingle",
-  hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET),
-  disabled$: getObservableWithExclusiveRange$(accessor, getCurrentRangeDisable$(accessor, { workbookTypes: [WorkbookEditablePermission], worksheetTypes: [WorksheetEditPermission, WorksheetSetCellValuePermission, WorksheetInsertHyperlinkPermission], rangeTypes: [RangeProtectionPermissionEditPoint] }))
-}), "insertLinkMenuToolbarFactory"), InsertLinkShortcut = {
-  id: InsertHyperLinkToolbarOperation.id,
-  binding: KeyCode.K | MetaKeys.CTRL_COMMAND,
-  preconditions: whenSheetEditorFocused
-}, menuSchema = {
+const menuSchema = {
   [RibbonStartGroup.OTHERS]: {
     [InsertHyperLinkToolbarOperation.id]: {
       order: 2,
       menuItemFactory: insertLinkMenuToolbarFactory
+    },
+    [genZenEditorMenuId(InsertHyperLinkToolbarOperation.id)]: {
+      order: 2,
+      menuItemFactory: zenEditorInsertLinkMenuToolbarFactory
     }
   },
   [ContextMenuPosition.MAIN_AREA]: {
@@ -1564,15 +2103,19 @@ const insertLinkMenuFactory = /* @__PURE__ */ __name((accessor) => ({
       [InsertHyperLinkToolbarOperation.id]: {
         order: 0,
         menuItemFactory: insertLinkMenuFactory
+      },
+      [genZenEditorMenuId(InsertHyperLinkToolbarOperation.id)]: {
+        order: 0,
+        menuItemFactory: zenEditorInsertLinkMenuFactory
       }
     }
   }
 };
-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"), _a9;
+  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"), _a9;
 let SheetsHyperLinkUIController = (_a9 = class extends Disposable {
   constructor(_componentManager, _commandService, _menuManagerService, _injector, _shortcutService) {
     super(), this._componentManager = _componentManager, this._commandService = _commandService, this._menuManagerService = _menuManagerService, this._injector = _injector, this._shortcutService = _shortcutService, this._initComponents(), this._initCommands(), this._initMenus(), this._initShortCut();
@@ -1588,14 +2131,16 @@ let SheetsHyperLinkUIController = (_a9 = class extends Disposable {
   }
   _initCommands() {
     [
-      OpenHyperLinkSidebarOperation,
-      CloseHyperLinkSidebarOperation,
+      OpenHyperLinkEditPanelOperation,
+      CloseHyperLinkPopupOperation,
       InsertHyperLinkOperation,
       InsertHyperLinkToolbarOperation,
       AddHyperLinkCommand,
       UpdateHyperLinkCommand,
-      RemoveHyperLinkCommand,
-      CancelHyperLinkCommand
+      CancelHyperLinkCommand,
+      UpdateRichHyperLinkCommand,
+      CancelRichHyperLinkCommand,
+      AddRichHyperLinkCommand
     ].forEach((command) => {
       this._commandService.registerCommand(command);
     });
@@ -1607,19 +2152,19 @@ let SheetsHyperLinkUIController = (_a9 = class extends Disposable {
     this._shortcutService.registerShortcut(InsertLinkShortcut);
   }
 }, __name(_a9, "SheetsHyperLinkUIController"), _a9);
-SheetsHyperLinkUIController = __decorateClass$4([
+SheetsHyperLinkUIController = __decorateClass$5([
   OnLifecycle(LifecycleStages.Ready, SheetsHyperLinkUIController),
-  __decorateParam$4(0, Inject(ComponentManager)),
-  __decorateParam$4(1, ICommandService),
-  __decorateParam$4(2, IMenuManagerService),
-  __decorateParam$4(3, Inject(Injector)),
-  __decorateParam$4(4, Inject(IShortcutService))
+  __decorateParam$5(0, Inject(ComponentManager)),
+  __decorateParam$5(1, ICommandService),
+  __decorateParam$5(2, IMenuManagerService),
+  __decorateParam$5(3, Inject(Injector)),
+  __decorateParam$5(4, Inject(IShortcutService))
 ], SheetsHyperLinkUIController);
-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"), _a10;
+  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"), _a10;
 let SheetsHyperLinkAutoFillController = (_a10 = class extends Disposable {
   constructor(_autoFillService, _hyperLinkModel) {
     super(), this._autoFillService = _autoFillService, this._hyperLinkModel = _hyperLinkModel, this._initAutoFill();
@@ -1707,16 +2252,16 @@ let SheetsHyperLinkAutoFillController = (_a10 = class extends Disposable {
     this.disposeWithMe(this._autoFillService.addHook(hook));
   }
 }, __name(_a10, "SheetsHyperLinkAutoFillController"), _a10);
-SheetsHyperLinkAutoFillController = __decorateClass$3([
+SheetsHyperLinkAutoFillController = __decorateClass$4([
   OnLifecycle(LifecycleStages.Ready, SheetsHyperLinkAutoFillController),
-  __decorateParam$3(0, IAutoFillService),
-  __decorateParam$3(1, Inject(HyperLinkModel))
+  __decorateParam$4(0, IAutoFillService),
+  __decorateParam$4(1, Inject(HyperLinkModel))
 ], SheetsHyperLinkAutoFillController);
-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"), _a11;
+  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"), _a11;
 let SheetHyperLinkUrlController = (_a11 = class extends Disposable {
   constructor(_resolverService) {
     super(), this._resolverService = _resolverService, this._handleInitUrl();
@@ -1726,15 +2271,15 @@ let SheetHyperLinkUrlController = (_a11 = class extends Disposable {
     hash && this._resolverService.parseHyperLink(hash).handler();
   }
 }, __name(_a11, "SheetHyperLinkUrlController"), _a11);
-SheetHyperLinkUrlController = __decorateClass$2([
+SheetHyperLinkUrlController = __decorateClass$3([
   OnLifecycle(LifecycleStages.Rendered, SheetHyperLinkUrlController),
-  __decorateParam$2(0, Inject(SheetsHyperLinkResolverService))
+  __decorateParam$3(0, Inject(SheetsHyperLinkResolverService))
 ], SheetHyperLinkUrlController);
-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"), _a12;
+  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"), _a12;
 let SheetsHyperLinkPermissionController = (_a12 = class extends Disposable {
   constructor(_localeService, _commandService, _sheetPermissionInterceptorBaseController) {
     super(), this._localeService = _localeService, this._commandService = _commandService, this._sheetPermissionInterceptorBaseController = _sheetPermissionInterceptorBaseController, this._commandExecutedListener();
@@ -1751,18 +2296,175 @@ let SheetsHyperLinkPermissionController = (_a12 = class extends Disposable {
     );
   }
 }, __name(_a12, "SheetsHyperLinkPermissionController"), _a12);
-SheetsHyperLinkPermissionController = __decorateClass$1([
+SheetsHyperLinkPermissionController = __decorateClass$2([
   OnLifecycle(LifecycleStages.Rendered, SheetsHyperLinkPermissionController),
-  __decorateParam$1(0, Inject(LocaleService)),
-  __decorateParam$1(1, ICommandService),
-  __decorateParam$1(2, Inject(SheetPermissionInterceptorBaseController))
+  __decorateParam$2(0, Inject(LocaleService)),
+  __decorateParam$2(1, ICommandService),
+  __decorateParam$2(2, Inject(SheetPermissionInterceptorBaseController))
 ], SheetsHyperLinkPermissionController);
+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"), _a13;
+let SheetsHyperLinkRichTextRefRangeController = (_a13 = class extends Disposable {
+  constructor(_commandService, _univerInstanceService, _refRangeService) {
+    super();
+    __publicField(this, "_refRangeMap", /* @__PURE__ */ new Map());
+    this._commandService = _commandService, this._univerInstanceService = _univerInstanceService, this._refRangeService = _refRangeService, this._initWorkbookLoad(), this._initWorkbookUnload(), this._initSetRangesListener();
+  }
+  _enusreMap(unitId, subUnitId) {
+    let unitMap = this._refRangeMap.get(unitId);
+    unitMap || (unitMap = /* @__PURE__ */ new Map(), this._refRangeMap.set(unitId, unitMap));
+    let subUnitMap = unitMap.get(subUnitId);
+    return subUnitMap || (subUnitMap = new ObjectMatrix(), unitMap.set(subUnitId, subUnitMap)), subUnitMap;
+  }
+  _isLegalRangeUrl(unitId, payload) {
+    var _a15, _b, _c;
+    const workbook = this._univerInstanceService.getUnit(unitId, UniverInstanceType.UNIVER_SHEET);
+    if (!workbook)
+      return null;
+    if (payload && payload.startsWith("#")) {
+      const search = new URLSearchParams(payload.slice(1)), searchObj = {
+        gid: (_a15 = search.get("gid")) != null ? _a15 : "",
+        range: (_b = search.get("range")) != null ? _b : "",
+        rangeid: (_c = search.get("rangeid")) != null ? _c : ""
+      };
+      if (searchObj.range && searchObj.gid) {
+        const subUnitId = searchObj.gid, worksheet = workbook.getSheetBySheetId(subUnitId);
+        if (!worksheet)
+          return null;
+        const range = deserializeRangeWithSheet(searchObj.range).range;
+        if (isValidRange(range, worksheet) && searchObj.range !== ERROR_RANGE)
+          return range;
+      }
+    }
+    return null;
+  }
+  _registerRange(unitId, subUnitId, row, col, p2) {
+    var _a15, _b, _c, _d;
+    const map2 = this._enusreMap(unitId, subUnitId), data = Tools.deepClone(p2), handleRangeChange = /* @__PURE__ */ __name((commandInfo) => {
+      var _a16, _b2;
+      const dataCopy = Tools.deepClone(data);
+      (_b2 = (_a16 = dataCopy.body) == null ? void 0 : _a16.customRanges) == null || _b2.forEach((customRange) => {
+        var _a17;
+        if (customRange.rangeType === CustomRangeType.HYPERLINK) {
+          const payload = (_a17 = customRange.properties) == null ? void 0 : _a17.url, range = this._isLegalRangeUrl(unitId, payload);
+          if (range) {
+            const resultRange = handleDefaultRangeChangeWithEffectRefCommands(range, commandInfo), newPayload = `#gid=${subUnitId}&range=${resultRange ? serializeRange(resultRange) : ERROR_RANGE}`;
+            customRange.properties.url = newPayload;
+          }
+        }
+      });
+      const position = handleDefaultRangeChangeWithEffectRefCommands({ startRow: row, endRow: row, startColumn: col, endColumn: col }, commandInfo);
+      return position ? {
+        redos: [{
+          id: SetRangeValuesMutation.id,
+          params: {
+            unitId,
+            subUnitId,
+            cellValue: {
+              [position.startRow]: {
+                [position.startColumn]: {
+                  p: dataCopy
+                }
+              }
+            }
+          }
+        }],
+        undos: [
+          {
+            id: SetRangeValuesMutation.id,
+            params: {
+              unitId,
+              subUnitId,
+              cellValue: {
+                [row]: {
+                  [col]: {
+                    p: data
+                  }
+                }
+              }
+            }
+          }
+        ]
+      } : {
+        redos: [],
+        undos: []
+      };
+    }, "handleRangeChange");
+    if ((_b = (_a15 = p2.body) == null ? void 0 : _a15.customRanges) != null && _b.some((customRange) => {
+      var _a16;
+      return customRange.rangeType === CustomRangeType.HYPERLINK && this._isLegalRangeUrl(unitId, (_a16 = customRange.properties) == null ? void 0 : _a16.url);
+    })) {
+      const disposableCollection = new DisposableCollection();
+      (_d = (_c = p2.body) == null ? void 0 : _c.customRanges) == null || _d.forEach((customRange) => {
+        var _a16;
+        if (customRange.rangeType === CustomRangeType.HYPERLINK) {
+          const payload = (_a16 = customRange.properties) == null ? void 0 : _a16.url, range = this._isLegalRangeUrl(unitId, payload);
+          range && disposableCollection.add(this._refRangeService.registerRefRange(range, handleRangeChange, unitId, subUnitId));
+        }
+      }), map2.setValue(row, col, disposableCollection);
+    }
+  }
+  _initWorkbookLoad() {
+    const handleWorkbook = /* @__PURE__ */ __name((workbook) => {
+      const unitId = workbook.getUnitId();
+      workbook.getSheets().forEach((sheet) => {
+        const subUnitId = sheet.getSheetId(), map2 = this._enusreMap(unitId, subUnitId);
+        sheet.getCellMatrix().forValue((row, col, cell) => {
+          const dispose = map2.getValue(row, col);
+          dispose && dispose.dispose(), cell && cell.p && this._registerRange(unitId, subUnitId, row, col, cell.p);
+        });
+      });
+    }, "handleWorkbook");
+    this._univerInstanceService.getAllUnitsForType(UniverInstanceType.UNIVER_SHEET).forEach((workbook) => {
+      handleWorkbook(workbook);
+    }), this.disposeWithMe(
+      this._univerInstanceService.unitAdded$.subscribe((unit) => {
+        unit.type === UniverInstanceType.UNIVER_SHEET && handleWorkbook(unit);
+      })
+    );
+  }
+  _initWorkbookUnload() {
+    this._univerInstanceService.unitDisposed$.subscribe((unit) => {
+      if (unit.type === UniverInstanceType.UNIVER_SHEET) {
+        const workbook = unit, unitId = workbook.getUnitId();
+        workbook.getSheets().forEach((sheet) => {
+          const subUnitId = sheet.getSheetId();
+          this._enusreMap(unitId, subUnitId).forValue((row, col, dispose) => {
+            dispose && dispose.dispose();
+          });
+        }), this._refRangeMap.delete(unitId);
+      }
+    });
+  }
+  _initSetRangesListener() {
+    this.disposeWithMe(
+      this._commandService.onCommandExecuted((commandInfo) => {
+        if (commandInfo.id === SetRangeValuesMutation.id) {
+          const params = commandInfo.params, { unitId, subUnitId, cellValue } = params, map2 = this._enusreMap(unitId, subUnitId);
+          cellValue && new ObjectMatrix(cellValue).forValue((row, col, cell) => {
+            const dispose = map2.getValue(row, col);
+            dispose && dispose.dispose(), cell && cell.p && this._registerRange(unitId, subUnitId, row, col, cell.p);
+          });
+        }
+      })
+    );
+  }
+}, __name(_a13, "SheetsHyperLinkRichTextRefRangeController"), _a13);
+SheetsHyperLinkRichTextRefRangeController = __decorateClass$1([
+  OnLifecycle(LifecycleStages.Starting, SheetsHyperLinkRichTextRefRangeController),
+  __decorateParam$1(0, ICommandService),
+  __decorateParam$1(1, IUniverInstanceService),
+  __decorateParam$1(2, Inject(RefRangeService))
+], SheetsHyperLinkRichTextRefRangeController);
 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"), _a13;
-let UniverSheetsHyperLinkUIPlugin = (_a13 = 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"), _a14;
+let UniverSheetsHyperLinkUIPlugin = (_a14 = class extends Plugin {
   constructor(_config = defaultPluginConfig, _injector, _renderManagerService, _configService) {
     super(), this._config = _config, this._injector = _injector, this._renderManagerService = _renderManagerService, this._configService = _configService;
     const { menu, ...rest } = this._config;
@@ -1781,7 +2483,8 @@ let UniverSheetsHyperLinkUIPlugin = (_a13 = class extends Plugin {
       [SheetsHyperLinkAutoFillController],
       [SheetsHyperLinkCopyPasteController],
       [SheetsHyperLinkPermissionController],
-      [SheetHyperLinkUrlController]
+      [SheetHyperLinkUrlController],
+      [SheetsHyperLinkRichTextRefRangeController]
     ].forEach((dep) => this._injector.add(dep));
   }
   onReady() {
@@ -1789,11 +2492,11 @@ let UniverSheetsHyperLinkUIPlugin = (_a13 = class extends Plugin {
       [SheetsHyperLinkRenderController]
     ].forEach((d) => this._renderManagerService.registerRenderModule(UniverInstanceType.UNIVER_SHEET, d));
   }
-}, __name(_a13, "UniverSheetsHyperLinkUIPlugin"), _a13);
+}, __name(_a14, "UniverSheetsHyperLinkUIPlugin"), _a14);
 __publicField2(UniverSheetsHyperLinkUIPlugin, "pluginName", SHEET_HYPER_LINK_UI_PLUGIN);
 __publicField2(UniverSheetsHyperLinkUIPlugin, "type", UniverInstanceType.UNIVER_SHEET);
 UniverSheetsHyperLinkUIPlugin = __decorateClass([
-  DependentOn(UniverSheetsHyperLinkPlugin),
+  DependentOn(UniverSheetsHyperLinkPlugin, UniverDocsUIPlugin),
   __decorateParam(1, Inject(Injector)),
   __decorateParam(2, IRenderManagerService),
   __decorateParam(3, IConfigService)
@@ -1801,11 +2504,10 @@ UniverSheetsHyperLinkUIPlugin = __decorateClass([
 export {
   AddHyperLinkCommand,
   CancelHyperLinkCommand,
-  CloseHyperLinkSidebarOperation,
+  CloseHyperLinkPopupOperation,
   InsertHyperLinkOperation,
   InsertLinkShortcut,
-  OpenHyperLinkSidebarOperation,
-  RemoveHyperLinkCommand,
+  OpenHyperLinkEditPanelOperation,
   SheetsHyperLinkCopyPasteController,
   SheetsHyperLinkPopupService,
   SheetsHyperLinkResolverService,