@univerjs/docs-hyper-link-ui 1.0.0-rc.0 → 1.0.0

package/lib/index.js

@@ -1,16 +1,35 @@
-import { DocCanvasPopManagerService, DocEventManagerService, EMPTY_PARAGRAPH_MENU_ID, FLOAT_TOOLBAR_MENU_POSITION, INSERT_BELLOW_MENU_ID, UniverDocsUIPlugin, whenDocAndEditorFocused } from "@univerjs/docs-ui";
-import { ComponentManager, ContextMenuGroup, ContextMenuPosition, IMenuManagerService, IMessageService, IShortcutService, IconManager, KeyCode, MenuItemType, MetaKeys, RibbonInsertGroup, getMenuHiddenObservable, useDependency, useObservable } from "@univerjs/ui";
+import { DocBackScrollRenderController, DocCanvasPopManagerService, DocEventManagerService, DocMobileElementMenuService, EMPTY_PARAGRAPH_MENU_ID, FLOAT_TOOLBAR_MENU_POSITION, INSERT_BELLOW_MENU_ID, MOBILE_DOC_ELEMENT_MENU, UniverDocsMobileUIPlugin, UniverDocsUIPlugin, whenDocAndEditorFocused } from "@univerjs/docs-ui";
+import { ComponentManager, ContextMenuGroup, ContextMenuPosition, IDialogService, IMenuManagerService, IMessageService, IShortcutService, IconManager, KeyCode, MenuItemType, MetaKeys, RibbonInsertGroup, getMenuHiddenObservable, useDependency, useObservable } from "@univerjs/ui";
 import { BuildTextUtils, CommandType, CustomRangeType, DOCS_NORMAL_EDITOR_UNIT_ID_KEY, DependentOn, Disposable, DocumentDataModel, ICommandService, IConfigService, IPermissionService, IUniverInstanceService, Inject, Injector, LocaleService, Plugin, Tools, UniverInstanceType, generateRandomId, getBodySlice, isSafeUrl, merge } from "@univerjs/core";
-import { DOC_INTERCEPTOR_POINT, DocInterceptorService, DocSelectionManagerService, DocSkeletonManagerService, SetTextSelectionsOperation, UniverDocsPlugin, addCustomRangeBySelectionFactory, canEditDocumentTargets, deleteCustomRangeFactory, getDocumentEntityParentPermissionObjectIds, getDocumentEntityPermissionObjectId, getDocumentPermissionValue, replaceSelectionFactory } from "@univerjs/docs";
+import { DOC_INTERCEPTOR_POINT, DOC_SELECTION_OPTION_PRESERVE_CARET, DocInterceptorService, DocSelectionManagerService, DocSkeletonManagerService, RichTextEditingMutation, SetTextSelectionsOperation, UniverDocsPlugin, addCustomRangeBySelectionFactory, canEditDocumentTargets, deleteCustomRangeFactory, getDocumentEntityParentPermissionObjectIds, getDocumentEntityPermissionObjectId, getDocumentPermissionValue, replaceSelectionFactory } from "@univerjs/docs";
 import { IRenderManagerService, UniverRenderEnginePlugin } from "@univerjs/engine-render";
 import { BehaviorSubject, Observable, debounceTime } from "rxjs";
-import { Button, FormLayout, Input, MessageType, Tooltip, borderClassName, clsx } from "@univerjs/design";
-import { useEffect, useState } from "react";
 import { DocHyperLinkCommandId, UniverDocsHyperLinkPlugin } from "@univerjs/docs-hyper-link";
+import { Button, FormLayout, Input, MessageType, MobileActionRow, Tooltip, borderClassName, clsx } from "@univerjs/design";
+import { useEffect, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { CopyIcon, LinkIcon, UnlinkIcon, WriteIcon } from "@univerjs/icons";
 import { UnitAction } from "@univerjs/protocol";
 
+//#region src/commands/commands/delete-link.command.ts
+const DeleteDocHyperLinkCommand = {
+	type: CommandType.COMMAND,
+	id: DocHyperLinkCommandId.Delete,
+	async handler(accessor, params) {
+		if (!params) return false;
+		const { unitId, linkId, segmentId } = params;
+		const commandService = accessor.get(ICommandService);
+		const doMutation = deleteCustomRangeFactory(accessor, {
+			unitId,
+			rangeId: linkId,
+			segmentId
+		});
+		if (!doMutation) return false;
+		return await commandService.syncExecuteCommand(doMutation.id, doMutation.params);
+	}
+};
+
+//#endregion
 //#region src/commands/commands/add-link.command.ts
 const AddDocHyperLinkCommand = {
 	type: CommandType.COMMAND,
@@ -19,8 +38,9 @@ const AddDocHyperLinkCommand = {
 		if (!params) return false;
 		const { payload, unitId, selections } = params;
 		const commandService = accessor.get(ICommandService);
+		const id = generateRandomId();
 		const doMutation = addCustomRangeBySelectionFactory(accessor, {
-			rangeId: generateRandomId(),
+			rangeId: id,
 			rangeType: CustomRangeType.HYPERLINK,
 			properties: { url: payload },
 			unitId,
@@ -37,7 +57,7 @@ const UpdateDocHyperLinkCommand = {
 	id: DocHyperLinkCommandId.Update,
 	type: CommandType.COMMAND,
 	handler(accessor, params) {
-		var _doc$getSelfOrHeaderF, _getBodySlice$textRun;
+		var _doc$getSelfOrHeaderF, _oldBody$customRanges, _getBodySlice$textRun, _oldLink$properties, _oldLink$properties2;
 		if (!params) return false;
 		const { unitId, payload, segmentId, linkId } = params;
 		const commandService = accessor.get(ICommandService);
@@ -47,6 +67,7 @@ const UpdateDocHyperLinkCommand = {
 		if (!currentSelection || !doc) return false;
 		const oldBody = (_doc$getSelfOrHeaderF = doc.getSelfOrHeaderFooterModel(segmentId)) === null || _doc$getSelfOrHeaderF === void 0 ? void 0 : _doc$getSelfOrHeaderF.getBody();
 		if (!oldBody) return false;
+		const oldLink = (_oldBody$customRanges = oldBody.customRanges) === null || _oldBody$customRanges === void 0 ? void 0 : _oldBody$customRanges.find((range) => range.rangeId === linkId && range.rangeType === CustomRangeType.HYPERLINK);
 		const textRun = (_getBodySlice$textRun = getBodySlice(oldBody, currentSelection.startOffset, currentSelection.endOffset).textRuns) === null || _getBodySlice$textRun === void 0 ? void 0 : _getBodySlice$textRun[0];
 		if (textRun) textRun.ed = params.label.length + 1;
 		const replaceSelection = replaceSelectionFactory(accessor, {
@@ -58,7 +79,11 @@ const UpdateDocHyperLinkCommand = {
 					rangeType: CustomRangeType.HYPERLINK,
 					startIndex: 0,
 					endIndex: params.label.length + 1,
-					properties: { url: payload }
+					properties: {
+						url: payload,
+						...(oldLink === null || oldLink === void 0 || (_oldLink$properties = oldLink.properties) === null || _oldLink$properties === void 0 ? void 0 : _oldLink$properties.textStyleMode) ? { textStyleMode: oldLink.properties.textStyleMode } : null,
+						...(oldLink === null || oldLink === void 0 || (_oldLink$properties2 = oldLink.properties) === null || _oldLink$properties2 === void 0 ? void 0 : _oldLink$properties2.textColorMode) ? { textColorMode: oldLink.properties.textColorMode } : null
+					}
 				}],
 				textRuns: textRun ? [textRun] : void 0
 			},
@@ -96,20 +121,19 @@ function isBlankInput(value) {
 }
 
 //#endregion
-//#region src/views/DocHyperLinkEdit.tsx
-function hasProtocol(urlString) {
-	return /^[a-zA-Z]+:\/\//.test(urlString);
+//#region src/views/hyper-link-edit/use-doc-hyper-link-edit.ts
+function hasProtocol(url) {
+	return /^[a-zA-Z]+:\/\//.test(url);
 }
 function isEmail(url) {
-	return /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/.test(url);
+	return /^[\w.-]+@([\w-]+\.)+[\w-]{2,4}$/.test(url);
 }
-function transformUrl(urlStr) {
-	return hasProtocol(urlStr) ? urlStr : isEmail(urlStr) ? `mailto://${urlStr}` : `https://${urlStr}`;
+function transformUrl(url) {
+	return hasProtocol(url) ? url : isEmail(url) ? `mailto://${url}` : `https://${url}`;
 }
-const DocHyperLinkEdit = () => {
+function useDocHyperLinkEdit() {
 	const hyperLinkService = useDependency(DocHyperLinkPopupService);
-	const localeService = useDependency(LocaleService);
-	const editing = useObservable(hyperLinkService.editingLink$);
+	const editing = useObservable(hyperLinkService.editingLink$, hyperLinkService.editing);
 	const commandService = useDependency(ICommandService);
 	const univerInstanceService = useDependency(IUniverInstanceService);
 	const docSelectionManagerService = useDependency(DocSelectionManagerService);
@@ -125,7 +149,7 @@ const DocHyperLinkEdit = () => {
 		if (editing) {
 			var _doc$getSelfOrHeaderF, _body$customRanges;
 			const body = doc === null || doc === void 0 || (_doc$getSelfOrHeaderF = doc.getSelfOrHeaderFooterModel(editing.segmentId)) === null || _doc$getSelfOrHeaderF === void 0 ? void 0 : _doc$getSelfOrHeaderF.getBody();
-			const matchedRange = body === null || body === void 0 || (_body$customRanges = body.customRanges) === null || _body$customRanges === void 0 ? void 0 : _body$customRanges.find((i) => (editing === null || editing === void 0 ? void 0 : editing.linkId) === i.rangeId && i.startIndex === editing.startIndex && i.endIndex === editing.endIndex);
+			const matchedRange = body === null || body === void 0 || (_body$customRanges = body.customRanges) === null || _body$customRanges === void 0 ? void 0 : _body$customRanges.find((range) => editing.linkId === range.rangeId && range.startIndex === editing.startIndex && range.endIndex === editing.endIndex);
 			if (doc && matchedRange) {
 				var _matchedRange$propert;
 				setLink(((_matchedRange$propert = matchedRange.properties) === null || _matchedRange$propert === void 0 ? void 0 : _matchedRange$propert.url) ?? "");
@@ -138,37 +162,52 @@ const DocHyperLinkEdit = () => {
 		const matchedRange = selection && ((_BuildTextUtils$custo = BuildTextUtils.customRange.getCustomRangesInterestsWithSelection(selection, (body === null || body === void 0 ? void 0 : body.customRanges) ?? [])) === null || _BuildTextUtils$custo === void 0 ? void 0 : _BuildTextUtils$custo[0]);
 		if (doc && matchedRange) {
 			var _matchedRange$propert2;
-			setLink((matchedRange === null || matchedRange === void 0 || (_matchedRange$propert2 = matchedRange.properties) === null || _matchedRange$propert2 === void 0 ? void 0 : _matchedRange$propert2.url) ?? "");
+			setLink(((_matchedRange$propert2 = matchedRange.properties) === null || _matchedRange$propert2 === void 0 ? void 0 : _matchedRange$propert2.url) ?? "");
 		}
 	}, [
 		doc,
-		editing,
 		docSelectionManagerService,
-		univerInstanceService
+		editing
 	]);
-	const handleCancel = () => {
-		hyperLinkService.hideEditPopup();
-	};
+	const handleCancel = () => hyperLinkService.hideEditPopup();
 	const handleConfirm = () => {
 		setShowError(true);
 		if (!isLegal || !doc) return;
-		const linkFinal = transformUrl(link);
-		if (!editing) commandService.executeCommand(AddDocHyperLinkCommand.id, {
-			unitId: doc.getUnitId(),
-			payload: linkFinal
-		});
-		else {
+		const payload = transformUrl(link);
+		if (editing) {
 			if (isBlankInput(label)) return;
 			commandService.executeCommand(UpdateDocHyperLinkCommand.id, {
 				unitId: doc.getUnitId(),
-				payload: linkFinal,
+				payload,
 				linkId: editing.linkId,
 				label,
 				segmentId: editing.segmentId
-			});
-		}
+			}).catch(() => void 0);
+		} else commandService.executeCommand(AddDocHyperLinkCommand.id, {
+			unitId: doc.getUnitId(),
+			payload
+		}).catch(() => void 0);
 		hyperLinkService.hideEditPopup();
 	};
+	return {
+		doc,
+		editing,
+		handleCancel,
+		handleConfirm,
+		isLegal,
+		label,
+		link,
+		setLabel,
+		setLink,
+		showError
+	};
+}
+
+//#endregion
+//#region src/views/DocHyperLinkEdit.tsx
+const DocHyperLinkEdit = () => {
+	const localeService = useDependency(LocaleService);
+	const { doc, editing, handleCancel, handleConfirm, isLegal, label, link, setLabel, setLink, showError } = useDocHyperLinkEdit();
 	if (!doc) return;
 	return /* @__PURE__ */ jsxs("div", {
 		className: clsx("univer-box-border univer-w-[328px] univer-rounded-xl univer-bg-gray-0 univer-px-6 univer-py-5 univer-shadow dark:!univer-bg-gray-900", borderClassName),
@@ -179,8 +218,8 @@ const DocHyperLinkEdit = () => {
 				value: label,
 				onChange: setLabel,
 				autoFocus: true,
-				onKeyDown: (evt) => {
-					if (evt.keyCode === KeyCode.ENTER) handleConfirm();
+				onKeyDown: (event) => {
+					if (event.keyCode === KeyCode.ENTER) handleConfirm();
 				}
 			})
 		}) : null, /* @__PURE__ */ jsx(FormLayout, {
@@ -190,8 +229,8 @@ const DocHyperLinkEdit = () => {
 				value: link,
 				onChange: setLink,
 				autoFocus: true,
-				onKeyDown: (evt) => {
-					if (evt.keyCode === KeyCode.ENTER) handleConfirm();
+				onKeyDown: (event) => {
+					if (event.keyCode === KeyCode.ENTER) handleConfirm();
 				}
 			})
 		})] }), /* @__PURE__ */ jsxs("div", {
@@ -210,34 +249,15 @@ const DocHyperLinkEdit = () => {
 };
 DocHyperLinkEdit.componentKey = "docs-hyper-link-edit";
 
-//#endregion
-//#region src/commands/commands/delete-link.command.ts
-const DeleteDocHyperLinkCommand = {
-	type: CommandType.COMMAND,
-	id: DocHyperLinkCommandId.Delete,
-	async handler(accessor, params) {
-		if (!params) return false;
-		const { unitId, linkId, segmentId } = params;
-		const commandService = accessor.get(ICommandService);
-		const doMutation = deleteCustomRangeFactory(accessor, {
-			unitId,
-			rangeId: linkId,
-			segmentId
-		});
-		if (!doMutation) return false;
-		return await commandService.syncExecuteCommand(doMutation.id, doMutation.params);
-	}
-};
-
 //#endregion
 //#region src/views/DocLinkPopup.tsx
 const DocLinkPopup = () => {
-	var _doc$getSelfOrHeaderF, _body$customRanges, _link$properties;
+	var _doc$getSelfOrHeaderF, _body$customRanges, _link$properties, _link$properties2, _link$properties3;
 	const hyperLinkService = useDependency(DocHyperLinkPopupService);
 	const commandService = useDependency(ICommandService);
 	const messageService = useDependency(IMessageService);
 	const localeService = useDependency(LocaleService);
-	const currentPopup = useObservable(hyperLinkService.showingLink$);
+	const currentPopup = useObservable(hyperLinkService.showingLink$, hyperLinkService.showing);
 	const univerInstanceService = useDependency(IUniverInstanceService);
 	const permissionService = useDependency(IPermissionService);
 	if (!currentPopup) return null;
@@ -246,7 +266,7 @@ const DocLinkPopup = () => {
 	const body = doc instanceof DocumentDataModel ? (_doc$getSelfOrHeaderF = doc.getSelfOrHeaderFooterModel(segmentId)) === null || _doc$getSelfOrHeaderF === void 0 ? void 0 : _doc$getSelfOrHeaderF.getBody() : void 0;
 	const link = body === null || body === void 0 || (_body$customRanges = body.customRanges) === null || _body$customRanges === void 0 ? void 0 : _body$customRanges.find((range) => range.rangeId === linkId && range.rangeType === CustomRangeType.HYPERLINK && range.startIndex === startIndex && range.endIndex === endIndex);
 	if (!link) return null;
-	const url = (_link$properties = link.properties) === null || _link$properties === void 0 ? void 0 : _link$properties.url;
+	const target = ((_link$properties = link.properties) === null || _link$properties === void 0 ? void 0 : _link$properties.url) ?? `#${((_link$properties2 = link.properties) === null || _link$properties2 === void 0 ? void 0 : _link$properties2.bookmarkId) ?? ((_link$properties3 = link.properties) === null || _link$properties3 === void 0 ? void 0 : _link$properties3.headingId) ?? ""}`;
 	const canEdit = hyperLinkService.canEditLink(unitId, currentPopup);
 	const canCopy = getDocumentPermissionValue(permissionService, unitId, unitId, UnitAction.Copy);
 	return /* @__PURE__ */ jsxs("div", {
@@ -262,16 +282,20 @@ const DocLinkPopup = () => {
 		},
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "univer-flex univer-h-6 univer-flex-1 univer-cursor-pointer univer-items-center univer-truncate univer-text-sm univer-leading-5 univer-text-primary-500",
-			onClick: () => window.open(url, void 0, "noopener noreferrer"),
+			onClick: () => commandService.executeCommand(ClickDocHyperLinkOperation.id, {
+				unitId,
+				linkId,
+				segmentId
+			}),
 			children: [/* @__PURE__ */ jsx("div", {
 				className: "univer-mr-2 univer-flex univer-size-5 univer-flex-[0_0_auto] univer-items-center univer-justify-center univer-text-base univer-text-gray-900 dark:!univer-text-gray-0",
 				children: /* @__PURE__ */ jsx(LinkIcon, {})
 			}), /* @__PURE__ */ jsx(Tooltip, {
 				showIfEllipsis: true,
-				title: url,
+				title: target,
 				children: /* @__PURE__ */ jsx("span", {
 					className: "univer-flex-1 univer-truncate",
-					children: url
+					children: target
 				})
 			})]
 		}), /* @__PURE__ */ jsxs("div", {
@@ -284,7 +308,7 @@ const DocLinkPopup = () => {
 				className: "univer-ml-2 !univer-flex univer-size-6 !univer-rounded !univer-border-0 !univer-bg-transparent !univer-p-0 !univer-text-base !univer-font-normal hover:!univer-bg-transparent active:!univer-bg-transparent disabled:!univer-pointer-events-auto disabled:!univer-opacity-40",
 				disabled: !canCopy,
 				onClick: () => {
-					navigator.clipboard.writeText(url);
+					navigator.clipboard.writeText(target);
 					messageService.show({
 						content: localeService.t("docs-hyper-link-ui.info.coped"),
 						type: MessageType.Info
@@ -326,7 +350,7 @@ const DocLinkPopup = () => {
 DocLinkPopup.componentKey = "univer.doc.link-info-popup";
 
 //#endregion
-//#region \0@oxc-project+runtime@0.140.0/helpers/esm/typeof.js
+//#region \0@oxc-project+runtime@0.149.0/helpers/esm/typeof.js
 function _typeof(o) {
 	"@babel/helpers - typeof";
 	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
@@ -337,7 +361,7 @@ function _typeof(o) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.140.0/helpers/esm/toPrimitive.js
+//#region \0@oxc-project+runtime@0.149.0/helpers/esm/toPrimitive.js
 function toPrimitive(t, r) {
 	if ("object" != _typeof(t) || !t) return t;
 	var e = t[Symbol.toPrimitive];
@@ -350,14 +374,14 @@ function toPrimitive(t, r) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.140.0/helpers/esm/toPropertyKey.js
+//#region \0@oxc-project+runtime@0.149.0/helpers/esm/toPropertyKey.js
 function toPropertyKey(t) {
 	var i = toPrimitive(t, "string");
 	return "symbol" == _typeof(i) ? i : i + "";
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.140.0/helpers/esm/defineProperty.js
+//#region \0@oxc-project+runtime@0.149.0/helpers/esm/defineProperty.js
 function _defineProperty(e, r, t) {
 	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
 		value: t,
@@ -368,7 +392,7 @@ function _defineProperty(e, r, t) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.140.0/helpers/esm/decorateParam.js
+//#region \0@oxc-project+runtime@0.149.0/helpers/esm/decorateParam.js
 function __decorateParam(paramIndex, decorator) {
 	return function(target, key) {
 		decorator(target, key, paramIndex);
@@ -376,7 +400,7 @@ function __decorateParam(paramIndex, decorator) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.140.0/helpers/esm/decorate.js
+//#region \0@oxc-project+runtime@0.149.0/helpers/esm/decorate.js
 function __decorate(decorators, target, key, desc) {
 	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
 	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -386,33 +410,21 @@ function __decorate(decorators, target, key, desc) {
 
 //#endregion
 //#region src/services/hyper-link-popup.service.ts
-/**
-* Copyright 2023-present DreamNum Co., Ltd.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
 const INFO_POPUP_HIDE_DELAY = 150;
 function isSameLinkInfo(current, next) {
 	return (current === null || current === void 0 ? void 0 : current.linkId) === next.linkId && current.unitId === next.unitId && (current.segmentId ?? "") === (next.segmentId ?? "") && current.segmentPage === next.segmentPage && current.startIndex === next.startIndex && current.endIndex === next.endIndex;
 }
 let DocHyperLinkPopupService = class DocHyperLinkPopupService extends Disposable {
-	constructor(_docCanvasPopupManagerService, _textSelectionManagerService, _univerInstanceService, _permissionService, _renderManagerService) {
+	constructor(_docCanvasPopupManagerService, _textSelectionManagerService, _univerInstanceService, _permissionService, _renderManagerService, _dialogService, _localeService, _commandService) {
 		super();
 		this._docCanvasPopupManagerService = _docCanvasPopupManagerService;
 		this._textSelectionManagerService = _textSelectionManagerService;
 		this._univerInstanceService = _univerInstanceService;
 		this._permissionService = _permissionService;
 		this._renderManagerService = _renderManagerService;
+		this._dialogService = _dialogService;
+		this._localeService = _localeService;
+		this._commandService = _commandService;
 		_defineProperty(this, "_editingLink$", new BehaviorSubject(null));
 		_defineProperty(this, "_showingLink$", new BehaviorSubject(null));
 		_defineProperty(this, "editingLink$", this._editingLink$.asObservable());
@@ -484,21 +496,17 @@ let DocHyperLinkPopupService = class DocHyperLinkPopupService extends Disposable
 			}]);
 		}
 		if (activeRange) {
-			this._editPopup = this._docCanvasPopupManagerService.attachPopupToRange(activeRange, {
-				componentKey: DocHyperLinkEdit.componentKey,
-				direction: "bottom",
-				offset: [0, 10]
-			}, unitId);
+			this._editPopup = this._openEditSurface(activeRange, unitId);
 			this._editPopupUnitId = unitId;
 			return this._editPopup;
 		}
 		return null;
 	}
 	hideEditPopup() {
-		var _this$_editPopup;
 		this._editingLink$.next(null);
-		(_this$_editPopup = this._editPopup) === null || _this$_editPopup === void 0 || _this$_editPopup.dispose();
+		const popup = this._editPopup;
 		this._editPopup = null;
+		popup === null || popup === void 0 || popup.dispose();
 		this._editPopupUnitId = null;
 	}
 	showInfoPopup(info, options) {
@@ -523,14 +531,39 @@ let DocHyperLinkPopupService = class DocHyperLinkPopupService extends Disposable
 			startIndex,
 			endIndex
 		});
-		this._infoPopup = this._docCanvasPopupManagerService.attachPopupToRange({
+		this._infoPopup = this._openInfoSurface(info);
+		return this._infoPopup;
+	}
+	_openEditSurface(activeRange, unitId) {
+		return this._docCanvasPopupManagerService.attachPopupToRange(activeRange, {
+			componentKey: DocHyperLinkEdit.componentKey,
+			direction: "bottom",
+			offset: [0, 10]
+		}, unitId);
+	}
+	_openInfoSurface(info, componentKey = DocLinkPopup.componentKey) {
+		const { unitId, linkId, segmentId, segmentPage, startIndex, endIndex } = info;
+		return this._docCanvasPopupManagerService.attachPopupToRange({
 			collapsed: false,
 			startOffset: startIndex,
 			endOffset: endIndex + 1,
 			segmentId,
 			segmentPage
 		}, {
-			componentKey: DocLinkPopup.componentKey,
+			componentKey,
+			extraProps: {
+				onEdit: () => {
+					this.hideInfoPopup();
+					this.showEditPopup(unitId, info);
+				},
+				onDelete: async () => {
+					if (await this._commandService.executeCommand(DeleteDocHyperLinkCommand.id, {
+						unitId,
+						linkId,
+						segmentId
+					})) this.hideInfoPopup();
+				}
+			},
 			direction: "top-center",
 			multipleDirection: "top",
 			offset: [0, 10],
@@ -538,15 +571,19 @@ let DocHyperLinkPopupService = class DocHyperLinkPopupService extends Disposable
 				this.hideInfoPopup();
 			}
 		}, unitId);
-		return this._infoPopup;
+	}
+	showInfoPopupFromHover(info) {
+		this.cancelScheduledHideInfoPopup();
+		if (this._infoPopupPinned || this._infoPopupSuppressed) return;
+		if (!this.showing) this.showInfoPopup(info);
 	}
 	hideInfoPopup() {
-		var _this$_infoPopup;
 		this.cancelScheduledHideInfoPopup();
 		this._infoPopupPinned = false;
 		this._showingLink$.next(null);
-		(_this$_infoPopup = this._infoPopup) === null || _this$_infoPopup === void 0 || _this$_infoPopup.dispose();
+		const popup = this._infoPopup;
 		this._infoPopup = null;
+		popup === null || popup === void 0 || popup.dispose();
 	}
 	scheduleHideInfoPopup() {
 		if (this._infoPopupPinned || !this.showing) return;
@@ -584,7 +621,10 @@ DocHyperLinkPopupService = __decorate([
 	__decorateParam(1, Inject(DocSelectionManagerService)),
 	__decorateParam(2, IUniverInstanceService),
 	__decorateParam(3, IPermissionService),
-	__decorateParam(4, IRenderManagerService)
+	__decorateParam(4, IRenderManagerService),
+	__decorateParam(5, IDialogService),
+	__decorateParam(6, Inject(LocaleService)),
+	__decorateParam(7, ICommandService)
 ], DocHyperLinkPopupService);
 
 //#endregion
@@ -622,7 +662,8 @@ const ToggleDocHyperLinkInfoPopupOperation = {
 			hyperLinkService.hideInfoPopup();
 			return true;
 		}
-		hyperLinkService.showInfoPopup(params);
+		if (params.fromHover) hyperLinkService.showInfoPopupFromHover(params);
+		else hyperLinkService.showInfoPopup(params);
 		return true;
 	}
 };
@@ -630,17 +671,57 @@ const ClickDocHyperLinkOperation = {
 	type: CommandType.OPERATION,
 	id: "doc.operation.click-hyper-link",
 	handler(accessor, params) {
-		var _doc$getSelfOrHeaderF, _body$customRanges;
+		var _doc$getSelfOrHeaderF, _sourceBody$customRan;
 		if (!params) return false;
 		const { unitId, linkId, segmentId } = params;
 		const doc = accessor.get(IUniverInstanceService).getUnit(unitId, UniverInstanceType.UNIVER_DOC);
-		const body = doc === null || doc === void 0 || (_doc$getSelfOrHeaderF = doc.getSelfOrHeaderFooterModel(segmentId)) === null || _doc$getSelfOrHeaderF === void 0 ? void 0 : _doc$getSelfOrHeaderF.getBody();
-		const link = body === null || body === void 0 || (_body$customRanges = body.customRanges) === null || _body$customRanges === void 0 || (_body$customRanges = _body$customRanges.find((range) => range.rangeId === linkId && range.rangeType === CustomRangeType.HYPERLINK)) === null || _body$customRanges === void 0 || (_body$customRanges = _body$customRanges.properties) === null || _body$customRanges === void 0 ? void 0 : _body$customRanges.url;
-		if (!isSafeUrl(link)) return false;
-		window.open(link, "_blank", "noopener noreferrer");
+		const sourceBody = doc === null || doc === void 0 || (_doc$getSelfOrHeaderF = doc.getSelfOrHeaderFooterModel(segmentId)) === null || _doc$getSelfOrHeaderF === void 0 ? void 0 : _doc$getSelfOrHeaderF.getBody();
+		const link = sourceBody === null || sourceBody === void 0 || (_sourceBody$customRan = sourceBody.customRanges) === null || _sourceBody$customRan === void 0 || (_sourceBody$customRan = _sourceBody$customRan.find((range) => range.rangeId === linkId && range.rangeType === CustomRangeType.HYPERLINK)) === null || _sourceBody$customRan === void 0 ? void 0 : _sourceBody$customRan.properties;
+		if ((link === null || link === void 0 ? void 0 : link.bookmarkId) || (link === null || link === void 0 ? void 0 : link.headingId)) {
+			var _render$getInjector;
+			const targetOffset = findInternalLinkTarget(doc === null || doc === void 0 ? void 0 : doc.getBody(), link.bookmarkId, link.headingId);
+			if (targetOffset == null) return false;
+			const range = {
+				startOffset: targetOffset,
+				endOffset: targetOffset,
+				collapsed: true
+			};
+			const selectionManager = accessor.get(DocSelectionManagerService);
+			const selectTarget = () => selectionManager.replaceDocRanges([range], {
+				unitId,
+				subUnitId: unitId
+			}, false, { [DOC_SELECTION_OPTION_PRESERVE_CARET]: true });
+			const render = accessor.get(IRenderManagerService).getRenderUnitById(unitId);
+			const renderInjector = render === null || render === void 0 || (_render$getInjector = render.getInjector) === null || _render$getInjector === void 0 ? void 0 : _render$getInjector.call(render);
+			const backScrollController = (renderInjector === null || renderInjector === void 0 ? void 0 : renderInjector.has(DocBackScrollRenderController)) ? render === null || render === void 0 ? void 0 : render.with(DocBackScrollRenderController) : null;
+			if (backScrollController) backScrollController.scrollToRange(range, selectTarget);
+			else selectTarget();
+			return true;
+		}
+		if (!(link === null || link === void 0 ? void 0 : link.url) || !isSafeUrl(link.url)) return false;
+		window.open(link.url, "_blank", "noopener noreferrer");
 		return true;
 	}
 };
+function findInternalLinkTarget(body, bookmarkId, headingId) {
+	if (!body) return;
+	if (bookmarkId) {
+		var _body$customRanges;
+		const bookmark = (_body$customRanges = body.customRanges) === null || _body$customRanges === void 0 ? void 0 : _body$customRanges.find((range) => {
+			var _range$properties;
+			return range.rangeType === CustomRangeType.BOOKMARK && (range.rangeId === bookmarkId || ((_range$properties = range.properties) === null || _range$properties === void 0 ? void 0 : _range$properties.bookmarkId) === bookmarkId);
+		});
+		if (bookmark) return bookmark.startIndex;
+	}
+	if (headingId) {
+		var _body$paragraphs;
+		const paragraphIndex = ((_body$paragraphs = body.paragraphs) === null || _body$paragraphs === void 0 ? void 0 : _body$paragraphs.findIndex((paragraph) => {
+			var _paragraph$paragraphS;
+			return ((_paragraph$paragraphS = paragraph.paragraphStyle) === null || _paragraph$paragraphS === void 0 ? void 0 : _paragraph$paragraphS.headingId) === headingId;
+		})) ?? -1;
+		if (paragraphIndex >= 0) return paragraphIndex === 0 ? 0 : body.paragraphs[paragraphIndex - 1].startIndex + 1;
+	}
+}
 
 //#endregion
 //#region src/menu/menu.ts
@@ -674,6 +755,10 @@ const addLinkShortcut = {
 const menuSchema = {
 	[RibbonInsertGroup.MEDIA]: { [ShowDocHyperLinkEditPopupOperation.id]: {
 		order: 1,
+		gridLayout: {
+			row: 1,
+			column: 5
+		},
 		menuItemFactory: AddHyperLinkMenuItemFactory
 	} },
 	[FLOAT_TOOLBAR_MENU_POSITION]: { [ShowDocHyperLinkEditPopupOperation.id]: {
@@ -699,7 +784,7 @@ const menuSchema = {
 //#endregion
 //#region package.json
 var name = "@univerjs/docs-hyper-link-ui";
-var version = "1.0.0-rc.0";
+var version = "1.0.0";
 
 //#endregion
 //#region src/config/config.ts
@@ -707,42 +792,6 @@ const DOCS_HYPER_LINK_UI_PLUGIN_CONFIG_KEY = "docs-hyper-link-ui.config";
 const configSymbol = Symbol(DOCS_HYPER_LINK_UI_PLUGIN_CONFIG_KEY);
 const defaultPluginConfig = {};
 
-//#endregion
-//#region src/controllers/components.controller.ts
-/**
-* Copyright 2023-present DreamNum Co., Ltd.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
-let ComponentsController = class ComponentsController extends Disposable {
-	constructor(_componentManager, _iconManager) {
-		super();
-		this._componentManager = _componentManager;
-		this._iconManager = _iconManager;
-		this._registerComponents();
-		this._registerIcons();
-	}
-	_registerComponents() {
-		[[DocHyperLinkEdit.componentKey, DocHyperLinkEdit], [DocLinkPopup.componentKey, DocLinkPopup]].forEach(([key, comp]) => {
-			this.disposeWithMe(this._componentManager.register(key, comp));
-		});
-	}
-	_registerIcons() {
-		this.disposeWithMe(this._iconManager.register({ LinkIcon }));
-	}
-};
-ComponentsController = __decorate([__decorateParam(0, Inject(ComponentManager)), __decorateParam(1, Inject(IconManager))], ComponentsController);
-
 //#endregion
 //#region src/controllers/doc-hyper-link-selection.controller.ts
 let DocHyperLinkSelectionController = class DocHyperLinkSelectionController extends Disposable {
@@ -751,14 +800,45 @@ let DocHyperLinkSelectionController = class DocHyperLinkSelectionController exte
 		this._commandService = _commandService;
 		this._univerInstanceService = _univerInstanceService;
 		this._docHyperLinkService = _docHyperLinkService;
+		_defineProperty(this, "_selection", null);
 		this._initSelectionChange();
+		this.disposeWithMe(this._univerInstanceService.unitDisposed$.subscribe((unit) => {
+			var _this$_selection;
+			if (((_this$_selection = this._selection) === null || _this$_selection === void 0 ? void 0 : _this$_selection.unitId) === unit.getUnitId()) this._selection = null;
+		}));
 	}
 	_initSelectionChange() {
 		this.disposeWithMe(this._commandService.onCommandExecuted((commandInfo) => {
+			if (commandInfo.id === RichTextEditingMutation.id) {
+				var _this$_docHyperLinkSe;
+				if (commandInfo.params.unitId === ((_this$_docHyperLinkSe = this._docHyperLinkService.showing) === null || _this$_docHyperLinkSe === void 0 ? void 0 : _this$_docHyperLinkSe.unitId)) this._docHyperLinkService.hideInfoPopup();
+				return;
+			}
 			if (commandInfo.id === SetTextSelectionsOperation.id) {
-				const { unitId, ranges, segmentId } = commandInfo.params;
+				var _this$_selection2;
+				const params = commandInfo.params;
+				const { unitId, ranges, segmentId } = params;
 				const doc = this._univerInstanceService.getUnit(unitId, UniverInstanceType.UNIVER_DOC);
 				const primary = ranges[0];
+				const selectionKey = JSON.stringify([
+					unitId,
+					segmentId ?? "",
+					primary === null || primary === void 0 ? void 0 : primary.startOffset,
+					primary === null || primary === void 0 ? void 0 : primary.endOffset,
+					primary === null || primary === void 0 ? void 0 : primary.segmentPage
+				]);
+				const sameSelection = selectionKey === ((_this$_selection2 = this._selection) === null || _this$_selection2 === void 0 ? void 0 : _this$_selection2.key);
+				this._selection = {
+					unitId,
+					key: selectionKey
+				};
+				const editing = this._docHyperLinkService.editing;
+				if ((editing === null || editing === void 0 ? void 0 : editing.unitId) === unitId && (editing.segmentId ?? "") === (segmentId ?? "") && (primary === null || primary === void 0 ? void 0 : primary.startOffset) === editing.startIndex && primary.endOffset === editing.endIndex + 1) return;
+				if (params.isEditing) {
+					this._docHyperLinkService.hideInfoPopup();
+					return;
+				}
+				if (sameSelection) return;
 				if ((primary === null || primary === void 0 ? void 0 : primary.collapsed) && doc) {
 					var _doc$getSelfOrHeaderF;
 					const { startOffset, endOffset, segmentPage } = primary;
@@ -790,53 +870,196 @@ DocHyperLinkSelectionController = __decorate([
 ], DocHyperLinkSelectionController);
 
 //#endregion
-//#region src/controllers/render-controllers/hyper-link-event.render-controller.ts
-let DocHyperLinkEventRenderController = class DocHyperLinkEventRenderController extends Disposable {
+//#region src/views/MobileDocHyperLinkEdit.tsx
+function MobileDocHyperLinkEdit() {
+	const localeService = useDependency(LocaleService);
+	const { doc, editing, handleCancel, handleConfirm, isLegal, label, link, setLabel, setLink, showError } = useDocHyperLinkEdit();
+	if (!doc) return;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "univer-box-border univer-w-full univer-bg-gray-0 univer-py-2 dark:!univer-bg-gray-900",
+		children: [/* @__PURE__ */ jsxs("div", { children: [editing ? /* @__PURE__ */ jsx(FormLayout, {
+			label: localeService.t("docs-hyper-link-ui.edit.label"),
+			error: showError && isBlankInput(label) ? localeService.t("docs-hyper-link-ui.edit.labelError") : "",
+			children: /* @__PURE__ */ jsx(Input, {
+				value: label,
+				onChange: setLabel,
+				autoFocus: true,
+				onKeyDown: (event) => {
+					if (event.keyCode === KeyCode.ENTER) handleConfirm();
+				}
+			})
+		}) : null, /* @__PURE__ */ jsx(FormLayout, {
+			label: localeService.t("docs-hyper-link-ui.edit.address"),
+			error: showError && !isLegal ? localeService.t("docs-hyper-link-ui.edit.addressError") : "",
+			children: /* @__PURE__ */ jsx(Input, {
+				value: link,
+				onChange: setLink,
+				autoFocus: !editing,
+				onKeyDown: (event) => {
+					if (event.keyCode === KeyCode.ENTER) handleConfirm();
+				}
+			})
+		})] }), /* @__PURE__ */ jsxs("div", {
+			className: "univer-mt-5 univer-flex univer-gap-3",
+			children: [/* @__PURE__ */ jsx(Button, {
+				className: "univer-h-12 univer-flex-1",
+				onClick: handleCancel,
+				children: localeService.t("docs-hyper-link-ui.edit.cancel")
+			}), /* @__PURE__ */ jsx(Button, {
+				variant: "primary",
+				className: "univer-h-12 univer-flex-1",
+				disabled: isBlankInput(link),
+				onClick: handleConfirm,
+				children: localeService.t("docs-hyper-link-ui.edit.confirm")
+			})]
+		})]
+	});
+}
+MobileDocHyperLinkEdit.componentKey = "univer.doc.mobile-hyper-link-edit";
+
+//#endregion
+//#region src/views/MobileDocLinkPopup.tsx
+function MobileDocLinkPopup() {
+	var _document$getSelfOrHe, _body$customRanges, _link$properties;
+	const commandService = useDependency(ICommandService);
+	const hyperLinkService = useDependency(DocHyperLinkPopupService);
+	const localeService = useDependency(LocaleService);
+	const messageService = useDependency(IMessageService);
+	const permissionService = useDependency(IPermissionService);
+	const univerInstanceService = useDependency(IUniverInstanceService);
+	const currentPopup = useObservable(hyperLinkService.showingLink$, hyperLinkService.showing);
+	if (!currentPopup) return null;
+	const { unitId, linkId, segmentId, startIndex, endIndex } = currentPopup;
+	const document = univerInstanceService.getUnit(unitId, UniverInstanceType.UNIVER_DOC);
+	const body = document instanceof DocumentDataModel ? (_document$getSelfOrHe = document.getSelfOrHeaderFooterModel(segmentId)) === null || _document$getSelfOrHe === void 0 ? void 0 : _document$getSelfOrHe.getBody() : void 0;
+	const link = body === null || body === void 0 || (_body$customRanges = body.customRanges) === null || _body$customRanges === void 0 ? void 0 : _body$customRanges.find((range) => range.rangeId === linkId && range.rangeType === CustomRangeType.HYPERLINK && range.startIndex === startIndex && range.endIndex === endIndex);
+	if (!link) return null;
+	const url = (_link$properties = link.properties) === null || _link$properties === void 0 ? void 0 : _link$properties.url;
+	const canEdit = hyperLinkService.canEditLink(unitId, currentPopup);
+	const canCopy = getDocumentPermissionValue(permissionService, unitId, unitId, UnitAction.Copy);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "univer-flex univer-flex-col univer-gap-2 univer-py-2",
+		children: [
+			/* @__PURE__ */ jsx(MobileActionRow, {
+				title: /* @__PURE__ */ jsx("span", {
+					className: "univer-truncate univer-text-primary-600",
+					children: url
+				}),
+				"aria-label": url,
+				variant: "subtle",
+				onClick: () => window.open(url, void 0, "noopener noreferrer")
+			}),
+			canCopy && /* @__PURE__ */ jsx(MobileActionRow, {
+				title: localeService.t("docs-hyper-link-ui.info.copy"),
+				"aria-label": localeService.t("docs-hyper-link-ui.info.copy"),
+				variant: "subtle",
+				onClick: () => navigator.clipboard.writeText(url).then(() => {
+					messageService.show({
+						content: localeService.t("docs-hyper-link-ui.info.coped"),
+						type: MessageType.Info
+					});
+				}).catch(() => void 0)
+			}),
+			canEdit && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MobileActionRow, {
+				title: localeService.t("docs-hyper-link-ui.info.edit"),
+				"aria-label": localeService.t("docs-hyper-link-ui.info.edit"),
+				variant: "subtle",
+				onClick: () => {
+					commandService.executeCommand(ShowDocHyperLinkEditPopupOperation.id, { link: currentPopup }).catch(() => void 0);
+				}
+			}), /* @__PURE__ */ jsx(MobileActionRow, {
+				title: localeService.t("docs-hyper-link-ui.info.cancel"),
+				"aria-label": localeService.t("docs-hyper-link-ui.info.cancel"),
+				variant: "subtle",
+				onClick: () => {
+					commandService.executeCommand(DeleteDocHyperLinkCommand.id, {
+						unitId,
+						linkId: link.rangeId,
+						segmentId
+					}).catch(() => void 0);
+				}
+			})] })
+		]
+	});
+}
+MobileDocLinkPopup.componentKey = "univer.doc.mobile-link-info-popup";
+
+//#endregion
+//#region src/controllers/mobile/components.controller.ts
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+let MobileComponentsController = class MobileComponentsController extends Disposable {
+	constructor(_componentManager, _iconManager) {
+		super();
+		this._componentManager = _componentManager;
+		this._iconManager = _iconManager;
+		this._registerComponents();
+		this._registerIcons();
+	}
+	_registerComponents() {
+		[[MobileDocHyperLinkEdit.componentKey, MobileDocHyperLinkEdit], [MobileDocLinkPopup.componentKey, MobileDocLinkPopup]].forEach(([key, comp]) => {
+			this.disposeWithMe(this._componentManager.register(key, comp));
+		});
+	}
+	_registerIcons() {
+		this.disposeWithMe(this._iconManager.register({ LinkIcon }));
+	}
+};
+MobileComponentsController = __decorate([__decorateParam(0, Inject(ComponentManager)), __decorateParam(1, Inject(IconManager))], MobileComponentsController);
+
+//#endregion
+//#region src/controllers/render-controllers/mobile/hyper-link-event.render-controller.ts
+let MobileDocHyperLinkEventRenderController = class MobileDocHyperLinkEventRenderController extends Disposable {
 	get _skeleton() {
 		return this._docSkeletonManagerService.getSkeleton();
 	}
-	constructor(_context, _docEventManagerService, _commandService, _hyperLinkPopupService, _docSkeletonManagerService, _docSelectionManagerService) {
+	constructor(_context, _docEventManagerService, _commandService, _hyperLinkPopupService, _docSkeletonManagerService, _mobileElementMenuService) {
 		super();
 		this._context = _context;
 		this._docEventManagerService = _docEventManagerService;
 		this._commandService = _commandService;
 		this._hyperLinkPopupService = _hyperLinkPopupService;
 		this._docSkeletonManagerService = _docSkeletonManagerService;
-		this._docSelectionManagerService = _docSelectionManagerService;
+		this._mobileElementMenuService = _mobileElementMenuService;
 		if (this._context.unitId === DOCS_NORMAL_EDITOR_UNIT_ID_KEY) return;
 		this._initPointerDown();
-		this._initHover();
 		this._initClick();
 	}
-	_hideInfoPopup() {
-		if (this._hyperLinkPopupService.infoPopupPinned) return;
-		if (this._hyperLinkPopupService.showing) this._hyperLinkPopupService.scheduleHideInfoPopup();
-	}
 	_initPointerDown() {
 		this.disposeWithMe(this._docEventManagerService.pointerDownCustomRanges$.subscribe((ranges) => {
-			if (!ranges.some((range) => range.range.rangeType === CustomRangeType.HYPERLINK)) this._hyperLinkPopupService.hideInfoPopupOnPointerDown();
-		}));
-	}
-	_initHover() {
-		this.disposeWithMe(this._docEventManagerService.hoverCustomRanges$.subscribe((ranges) => {
-			var _activeRanges$;
 			const link = ranges.find((range) => range.range.rangeType === CustomRangeType.HYPERLINK);
-			const activeRanges = this._docSelectionManagerService.getTextRanges();
-			const currentSegmentId = activeRanges === null || activeRanges === void 0 || (_activeRanges$ = activeRanges[0]) === null || _activeRanges$ === void 0 ? void 0 : _activeRanges$.segmentId;
-			if (((link === null || link === void 0 ? void 0 : link.segmentId) ?? "") !== currentSegmentId) {
-				this._hideInfoPopup();
+			if (!link) {
+				this._hyperLinkPopupService.hideInfoPopupOnPointerDown();
 				return;
 			}
-			if (link) this._commandService.executeCommand(ToggleDocHyperLinkInfoPopupOperation.id, {
+			const info = {
 				unitId: this._context.unitId,
 				linkId: link.range.rangeId,
 				segmentId: link.segmentId,
 				segmentPage: link.segmentPageIndex,
-				rangeId: link.range.rangeId,
 				startIndex: link.range.startIndex,
 				endIndex: link.range.endIndex
+			};
+			const rect = link.rects[0];
+			if (rect && this._hyperLinkPopupService.canEditLink(info.unitId, info)) this._mobileElementMenuService.capture({
+				unitId: info.unitId,
+				rect,
+				onEdit: () => this._hyperLinkPopupService.showEditPopup(info.unitId, info),
+				onDelete: () => this._commandService.executeCommand(DeleteDocHyperLinkCommand.id, info)
 			});
-			else this._hideInfoPopup();
 		}));
 	}
 	_initClick() {
@@ -862,13 +1085,13 @@ let DocHyperLinkEventRenderController = class DocHyperLinkEventRenderController
 		}));
 	}
 };
-DocHyperLinkEventRenderController = __decorate([
+MobileDocHyperLinkEventRenderController = __decorate([
 	__decorateParam(1, Inject(DocEventManagerService)),
 	__decorateParam(2, ICommandService),
 	__decorateParam(3, Inject(DocHyperLinkPopupService)),
 	__decorateParam(4, Inject(DocSkeletonManagerService)),
-	__decorateParam(5, Inject(DocSelectionManagerService))
-], DocHyperLinkEventRenderController);
+	__decorateParam(5, Inject(DocMobileElementMenuService))
+], MobileDocHyperLinkEventRenderController);
 
 //#endregion
 //#region src/controllers/render-controllers/render.controller.ts
@@ -939,6 +1162,29 @@ DocHyperLinkUIController = __decorate([
 	__decorateParam(2, IShortcutService)
 ], DocHyperLinkUIController);
 
+//#endregion
+//#region src/services/mobile/hyper-link-popup.service.ts
+var MobileDocHyperLinkPopupService = class extends DocHyperLinkPopupService {
+	_openEditSurface(_activeRange, _unitId) {
+		return this._dialogService.open({
+			id: "doc-mobile-hyper-link-editor",
+			title: { title: this._localeService.t("docs-hyper-link-ui.menu.tooltip") },
+			children: { label: MobileDocHyperLinkEdit.componentKey },
+			maskClosable: false,
+			onClose: () => this.hideEditPopup()
+		});
+	}
+	_openInfoSurface(info) {
+		if (this.canEditLink(info.unitId, info)) return super._openInfoSurface(info, MOBILE_DOC_ELEMENT_MENU);
+		return this._dialogService.open({
+			id: "doc-mobile-hyper-link-viewer",
+			title: { title: this._localeService.t("docs-hyper-link-ui.menu.tooltip") },
+			children: { label: MobileDocLinkPopup.componentKey },
+			onClose: () => this.hideInfoPopup()
+		});
+	}
+};
+
 //#endregion
 //#region src/types/const/index.ts
 /**
@@ -958,6 +1204,175 @@ DocHyperLinkUIController = __decorate([
 */
 const DOC_HYPER_LINK_UI_PLUGIN = "DOC_HYPER_LINK_UI_PLUGIN";
 
+//#endregion
+//#region src/mobile-plugin.ts
+let UniverDocsHyperLinkMobileUIPlugin = class UniverDocsHyperLinkMobileUIPlugin extends Plugin {
+	constructor(_config = defaultPluginConfig, _injector, _renderManagerSrv, _configService) {
+		super();
+		this._config = _config;
+		this._injector = _injector;
+		this._renderManagerSrv = _renderManagerSrv;
+		this._configService = _configService;
+		const { menu, ...rest } = merge({}, defaultPluginConfig, this._config);
+		if (menu) this._configService.setConfig("menu", menu, { merge: true });
+		this._configService.setConfig(DOCS_HYPER_LINK_UI_PLUGIN_CONFIG_KEY, rest);
+	}
+	onStarting() {
+		[
+			[MobileComponentsController],
+			[DocHyperLinkPopupService, { useClass: MobileDocHyperLinkPopupService }],
+			[DocHyperLinkUIController],
+			[DocHyperLinkSelectionController]
+		].forEach((dep) => this._injector.add(dep));
+		this._injector.get(MobileComponentsController);
+		this._injector.get(DocHyperLinkUIController);
+	}
+	onReady() {
+		this._injector.get(DocHyperLinkSelectionController);
+	}
+	onRendered() {
+		[[DocHyperLinkRenderController], [MobileDocHyperLinkEventRenderController]].forEach((dep) => {
+			this._renderManagerSrv.registerRenderModule(UniverInstanceType.UNIVER_DOC, dep);
+		});
+	}
+};
+_defineProperty(UniverDocsHyperLinkMobileUIPlugin, "pluginName", DOC_HYPER_LINK_UI_PLUGIN);
+_defineProperty(UniverDocsHyperLinkMobileUIPlugin, "packageName", name);
+_defineProperty(UniverDocsHyperLinkMobileUIPlugin, "version", version);
+_defineProperty(UniverDocsHyperLinkMobileUIPlugin, "type", UniverInstanceType.UNIVER_DOC);
+UniverDocsHyperLinkMobileUIPlugin = __decorate([
+	DependentOn(UniverDocsPlugin, UniverRenderEnginePlugin, UniverDocsHyperLinkPlugin, UniverDocsMobileUIPlugin),
+	__decorateParam(1, Inject(Injector)),
+	__decorateParam(2, IRenderManagerService),
+	__decorateParam(3, IConfigService)
+], UniverDocsHyperLinkMobileUIPlugin);
+
+//#endregion
+//#region src/controllers/components.controller.ts
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+let ComponentsController = class ComponentsController extends Disposable {
+	constructor(_componentManager, _iconManager) {
+		super();
+		this._componentManager = _componentManager;
+		this._iconManager = _iconManager;
+		this._registerComponents();
+		this._registerIcons();
+	}
+	_registerComponents() {
+		[[DocHyperLinkEdit.componentKey, DocHyperLinkEdit], [DocLinkPopup.componentKey, DocLinkPopup]].forEach(([key, comp]) => {
+			this.disposeWithMe(this._componentManager.register(key, comp));
+		});
+	}
+	_registerIcons() {
+		this.disposeWithMe(this._iconManager.register({ LinkIcon }));
+	}
+};
+ComponentsController = __decorate([__decorateParam(0, Inject(ComponentManager)), __decorateParam(1, Inject(IconManager))], ComponentsController);
+
+//#endregion
+//#region src/controllers/render-controllers/hyper-link-event.render-controller.ts
+let DocHyperLinkEventRenderController = class DocHyperLinkEventRenderController extends Disposable {
+	get _skeleton() {
+		return this._docSkeletonManagerService.getSkeleton();
+	}
+	constructor(_context, _docEventManagerService, _commandService, _hyperLinkPopupService, _docSkeletonManagerService, _docSelectionManagerService) {
+		super();
+		this._context = _context;
+		this._docEventManagerService = _docEventManagerService;
+		this._commandService = _commandService;
+		this._hyperLinkPopupService = _hyperLinkPopupService;
+		this._docSkeletonManagerService = _docSkeletonManagerService;
+		this._docSelectionManagerService = _docSelectionManagerService;
+		if (this._context.unitId === DOCS_NORMAL_EDITOR_UNIT_ID_KEY) return;
+		this._initPointerDown();
+		this._initHover();
+		this._initClick();
+	}
+	_hideInfoPopup() {
+		if (this._hyperLinkPopupService.infoPopupPinned) return;
+		if (this._hyperLinkPopupService.showing) this._hyperLinkPopupService.scheduleHideInfoPopup();
+	}
+	_normalizeSegmentId(segmentId) {
+		var _this$_context$unit$g;
+		if (!segmentId) return "";
+		return ((_this$_context$unit$g = this._context.unit.getBody()) === null || _this$_context$unit$g === void 0 || (_this$_context$unit$g = _this$_context$unit$g.tables) === null || _this$_context$unit$g === void 0 ? void 0 : _this$_context$unit$g.some((table) => table.tableId === segmentId)) ? "" : segmentId;
+	}
+	_initPointerDown() {
+		this.disposeWithMe(this._docEventManagerService.pointerDownCustomRanges$.subscribe((ranges) => {
+			if (!ranges.find((range) => range.range.rangeType === CustomRangeType.HYPERLINK)) this._hyperLinkPopupService.hideInfoPopupOnPointerDown();
+		}));
+	}
+	_initHover() {
+		this.disposeWithMe(this._docEventManagerService.hoverCustomRanges$.subscribe((ranges) => {
+			var _activeRanges$;
+			const link = ranges.find((range) => range.range.rangeType === CustomRangeType.HYPERLINK);
+			const activeRanges = this._docSelectionManagerService.getTextRanges();
+			const currentSegmentId = activeRanges === null || activeRanges === void 0 || (_activeRanges$ = activeRanges[0]) === null || _activeRanges$ === void 0 ? void 0 : _activeRanges$.segmentId;
+			if (this._normalizeSegmentId(link === null || link === void 0 ? void 0 : link.segmentId) !== this._normalizeSegmentId(currentSegmentId)) {
+				this._hideInfoPopup();
+				return;
+			}
+			if (link) {
+				const info = {
+					unitId: this._context.unitId,
+					linkId: link.range.rangeId,
+					segmentId: link.segmentId,
+					segmentPage: link.segmentPageIndex,
+					startIndex: link.range.startIndex,
+					endIndex: link.range.endIndex
+				};
+				this._commandService.executeCommand(ToggleDocHyperLinkInfoPopupOperation.id, {
+					...info,
+					fromHover: true
+				});
+			} else this._hideInfoPopup();
+		}));
+	}
+	_initClick() {
+		this.disposeWithMe(this._docEventManagerService.clickCustomRanges$.subscribe((range) => {
+			const link = range.range;
+			if (link.rangeType !== CustomRangeType.HYPERLINK) return;
+			if (!range.ctrlKey && !range.metaKey) {
+				this._hyperLinkPopupService.showInfoPopup({
+					unitId: this._context.unitId,
+					linkId: link.rangeId,
+					segmentId: range.segmentId,
+					segmentPage: range.segmentPageIndex,
+					startIndex: link.startIndex,
+					endIndex: link.endIndex
+				}, { pinned: true });
+				return;
+			}
+			this._commandService.executeCommand(ClickDocHyperLinkOperation.id, {
+				unitId: this._context.unitId,
+				linkId: link.rangeId,
+				segmentId: range.segmentId
+			});
+		}));
+	}
+};
+DocHyperLinkEventRenderController = __decorate([
+	__decorateParam(1, Inject(DocEventManagerService)),
+	__decorateParam(2, ICommandService),
+	__decorateParam(3, Inject(DocHyperLinkPopupService)),
+	__decorateParam(4, Inject(DocSkeletonManagerService)),
+	__decorateParam(5, Inject(DocSelectionManagerService))
+], DocHyperLinkEventRenderController);
+
 //#endregion
 //#region src/plugin.ts
 let UniverDocsHyperLinkUIPlugin = class UniverDocsHyperLinkUIPlugin extends Plugin {
@@ -972,15 +1387,15 @@ let UniverDocsHyperLinkUIPlugin = class UniverDocsHyperLinkUIPlugin extends Plug
 		this._configService.setConfig(DOCS_HYPER_LINK_UI_PLUGIN_CONFIG_KEY, rest);
 	}
 	onStarting() {
-		this._injector.add([ComponentsController]);
-		this._injector.get(ComponentsController);
 		[
+			[ComponentsController],
 			[DocHyperLinkPopupService],
 			[DocHyperLinkUIController],
 			[DocHyperLinkSelectionController]
 		].forEach((dep) => {
 			this._injector.add(dep);
 		});
+		this._injector.get(ComponentsController);
 		this._injector.get(DocHyperLinkUIController);
 	}
 	onReady() {
@@ -1007,4 +1422,4 @@ UniverDocsHyperLinkUIPlugin = __decorate([
 ], UniverDocsHyperLinkUIPlugin);
 
 //#endregion
-export { menuSchema as DocsHyperLinkUIMenuSchema, UniverDocsHyperLinkUIPlugin };
+export { menuSchema as DocsHyperLinkUIMenuSchema, UniverDocsHyperLinkMobileUIPlugin, UniverDocsHyperLinkUIPlugin };