@univerjs/docs-hyper-link-ui 0.25.1 → 1.0.0-alpha.1

package/lib/es/index.js

@@ -1,18 +1,18 @@
-import { BuildTextUtils, CommandType, CustomRangeType, DOCS_NORMAL_EDITOR_UNIT_ID_KEY, DOCS_ZEN_EDITOR_UNIT_ID_KEY, DependentOn, Disposable, ICommandService, IConfigService, IUniverInstanceService, Inject, Injector, LocaleService, Plugin, Tools, UniverInstanceType, generateRandomId, getBodySlice, isSafeUrl, merge } from "@univerjs/core";
+import { BuildTextUtils, CommandType, CustomRangeType, DOCS_NORMAL_EDITOR_UNIT_ID_KEY, DependentOn, Disposable, ICommandService, IConfigService, IUniverInstanceService, Inject, Injector, LocaleService, Plugin, Tools, UniverInstanceType, generateRandomId, getBodySlice, isSafeUrl, merge } from "@univerjs/core";
 import { UniverDocsHyperLinkPlugin } from "@univerjs/docs-hyper-link";
 import { IRenderManagerService } from "@univerjs/engine-render";
-import { DOC_INTERCEPTOR_POINT, DocInterceptorService, DocSelectionManagerService, DocSkeletonManagerService, SetTextSelectionsOperation, addCustomRangeBySelectionFactory, deleteCustomRangeFactory, replaceSelectionFactory } from "@univerjs/docs";
-import { DocCanvasPopManagerService, DocEventManagerService, DocRenderController, EMPTY_PARAGRAPH_MENU_ID, INSERT_BELLOW_MENU_ID, whenDocAndEditorFocused } from "@univerjs/docs-ui";
-import { BehaviorSubject, Observable, debounceTime, distinctUntilChanged, pairwise } from "rxjs";
+import { CopyIcon, LinkIcon, UnlinkIcon, WriteIcon } from "@univerjs/icons";
+import { ComponentManager, ContextMenuGroup, ContextMenuPosition, IMenuManagerService, IMessageService, IShortcutService, IconManager, KeyCode, MenuItemType, MetaKeys, RibbonInsertGroup, getMenuHiddenObservable, useDependency, useObservable } from "@univerjs/ui";
 import { Button, FormLayout, Input, MessageType, Tooltip, borderClassName, clsx } from "@univerjs/design";
-import { ComponentManager, ContextMenuGroup, ContextMenuPosition, IMenuManagerService, IMessageService, IShortcutService, KeyCode, MenuItemType, MetaKeys, RibbonInsertGroup, getMenuHiddenObservable, useDependency, useObservable } from "@univerjs/ui";
+import { DOC_INTERCEPTOR_POINT, DocInterceptorService, DocSelectionManagerService, DocSkeletonManagerService, SetTextSelectionsOperation, addCustomRangeBySelectionFactory, deleteCustomRangeFactory, replaceSelectionFactory } from "@univerjs/docs";
 import { useEffect, useState } from "react";
+import { DocCanvasPopManagerService, DocEventManagerService, DocRenderController, EMPTY_PARAGRAPH_MENU_ID, FLOAT_TOOLBAR_MENU_POSITION, INSERT_BELLOW_MENU_ID, whenDocAndEditorFocused } from "@univerjs/docs-ui";
+import { BehaviorSubject, Observable, debounceTime, distinctUntilChanged, pairwise } from "rxjs";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { CopyIcon, LinkIcon, UnlinkIcon, WriteIcon } from "@univerjs/icons";
 
 //#region package.json
 var name = "@univerjs/docs-hyper-link-ui";
-var version = "0.25.1";
+var version = "1.0.0-alpha.1";
 
 //#endregion
 //#region src/config/config.ts
@@ -82,142 +82,6 @@ const UpdateDocHyperLinkCommand = {
 	}
 };
 
-//#endregion
-//#region src/views/hyper-link-edit/utils.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.
-*/
-function isBlankInput(value) {
-	return value.trim().length === 0;
-}
-
-//#endregion
-//#region src/views/hyper-link-edit/index.tsx
-function hasProtocol(urlString) {
-	return /^[a-zA-Z]+:\/\//.test(urlString);
-}
-function isEmail(url) {
-	return /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/.test(url);
-}
-function transformUrl(urlStr) {
-	return hasProtocol(urlStr) ? urlStr : isEmail(urlStr) ? `mailto://${urlStr}` : `https://${urlStr}`;
-}
-const DocHyperLinkEdit = () => {
-	const hyperLinkService = useDependency(DocHyperLinkPopupService);
-	const localeService = useDependency(LocaleService);
-	const editing = useObservable(hyperLinkService.editingLink$);
-	const commandService = useDependency(ICommandService);
-	const univerInstanceService = useDependency(IUniverInstanceService);
-	const docSelectionManagerService = useDependency(DocSelectionManagerService);
-	const [link, setLink] = useState("");
-	const [label, setLabel] = useState("");
-	const [showError, setShowError] = useState(false);
-	const isLegal = Tools.isLegalUrl(link);
-	const doc = editing ? univerInstanceService.getUnit(editing.unitId, UniverInstanceType.UNIVER_DOC) : univerInstanceService.getCurrentUnitOfType(UniverInstanceType.UNIVER_DOC);
-	useEffect(() => {
-		var _doc$getSelfOrHeaderF2, _BuildTextUtils$custo, _body$customRanges2;
-		const activeRange = docSelectionManagerService.getActiveTextRange();
-		if (!activeRange) return;
-		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);
-			if (doc && matchedRange) {
-				var _matchedRange$propert, _matchedRange$propert2;
-				setLink((_matchedRange$propert = (_matchedRange$propert2 = matchedRange.properties) === null || _matchedRange$propert2 === void 0 ? void 0 : _matchedRange$propert2.url) !== null && _matchedRange$propert !== void 0 ? _matchedRange$propert : "");
-				setLabel(BuildTextUtils.transform.getPlainText(getBodySlice(body, matchedRange.startIndex, matchedRange.endIndex + 1).dataStream));
-			}
-			return;
-		}
-		const body = doc === null || doc === void 0 || (_doc$getSelfOrHeaderF2 = doc.getSelfOrHeaderFooterModel(activeRange.segmentId)) === null || _doc$getSelfOrHeaderF2 === void 0 ? void 0 : _doc$getSelfOrHeaderF2.getBody();
-		const selection = body ? activeRange : null;
-		const matchedRange = selection && ((_BuildTextUtils$custo = BuildTextUtils.customRange.getCustomRangesInterestsWithSelection(selection, (_body$customRanges2 = body === null || body === void 0 ? void 0 : body.customRanges) !== null && _body$customRanges2 !== void 0 ? _body$customRanges2 : [])) === null || _BuildTextUtils$custo === void 0 ? void 0 : _BuildTextUtils$custo[0]);
-		if (doc && matchedRange) {
-			var _matchedRange$propert3, _matchedRange$propert4;
-			setLink((_matchedRange$propert3 = matchedRange === null || matchedRange === void 0 || (_matchedRange$propert4 = matchedRange.properties) === null || _matchedRange$propert4 === void 0 ? void 0 : _matchedRange$propert4.url) !== null && _matchedRange$propert3 !== void 0 ? _matchedRange$propert3 : "");
-		}
-	}, [
-		doc,
-		editing,
-		docSelectionManagerService,
-		univerInstanceService
-	]);
-	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 {
-			if (isBlankInput(label)) return;
-			commandService.executeCommand(UpdateDocHyperLinkCommand.id, {
-				unitId: doc.getUnitId(),
-				payload: linkFinal,
-				linkId: editing.linkId,
-				label,
-				segmentId: editing.segmentId
-			});
-		}
-		hyperLinkService.hideEditPopup();
-	};
-	if (!doc) return;
-	return /* @__PURE__ */ jsxs("div", {
-		className: clsx("univer-box-border univer-w-[328px] univer-rounded-xl univer-bg-white univer-px-6 univer-py-5 univer-shadow dark:!univer-bg-gray-900", borderClassName),
-		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: (evt) => {
-					if (evt.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: true,
-				onKeyDown: (evt) => {
-					if (evt.keyCode === KeyCode.ENTER) handleConfirm();
-				}
-			})
-		})] }), /* @__PURE__ */ jsxs("div", {
-			className: "univer-flex univer-justify-end univer-gap-3",
-			children: [/* @__PURE__ */ jsx(Button, {
-				onClick: handleCancel,
-				children: localeService.t("docs-hyper-link-ui.edit.cancel")
-			}), /* @__PURE__ */ jsx(Button, {
-				variant: "primary",
-				disabled: isBlankInput(link),
-				onClick: handleConfirm,
-				children: localeService.t("docs-hyper-link-ui.edit.confirm")
-			})]
-		})]
-	});
-};
-DocHyperLinkEdit.componentKey = "docs-hyper-link-edit";
-
 //#endregion
 //#region src/commands/commands/delete-link.command.ts
 const DeleteDocHyperLinkCommand = {
@@ -293,7 +157,7 @@ const ClickDocHyperLinkOperation = {
 };
 
 //#endregion
-//#region src/views/hyper-link-popup/index.tsx
+//#region src/views/DocLinkPopup.tsx
 const DocLinkPopup = () => {
 	var _body$customRanges, _link$properties;
 	const hyperLinkService = useDependency(DocHyperLinkPopupService);
@@ -379,7 +243,7 @@ const DocLinkPopup = () => {
 DocLinkPopup.componentKey = "univer.doc.link-info-popup";
 
 //#endregion
-//#region \0@oxc-project+runtime@0.133.0/helpers/esm/typeof.js
+//#region \0@oxc-project+runtime@0.137.0/helpers/esm/typeof.js
 function _typeof(o) {
 	"@babel/helpers - typeof";
 	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
@@ -390,7 +254,7 @@ function _typeof(o) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.133.0/helpers/esm/toPrimitive.js
+//#region \0@oxc-project+runtime@0.137.0/helpers/esm/toPrimitive.js
 function toPrimitive(t, r) {
 	if ("object" != _typeof(t) || !t) return t;
 	var e = t[Symbol.toPrimitive];
@@ -403,14 +267,14 @@ function toPrimitive(t, r) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.133.0/helpers/esm/toPropertyKey.js
+//#region \0@oxc-project+runtime@0.137.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.133.0/helpers/esm/defineProperty.js
+//#region \0@oxc-project+runtime@0.137.0/helpers/esm/defineProperty.js
 function _defineProperty(e, r, t) {
 	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
 		value: t,
@@ -421,7 +285,7 @@ function _defineProperty(e, r, t) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.133.0/helpers/esm/decorateParam.js
+//#region \0@oxc-project+runtime@0.137.0/helpers/esm/decorateParam.js
 function __decorateParam(paramIndex, decorator) {
 	return function(target, key) {
 		decorator(target, key, paramIndex);
@@ -429,7 +293,7 @@ function __decorateParam(paramIndex, decorator) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.133.0/helpers/esm/decorate.js
+//#region \0@oxc-project+runtime@0.137.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);
@@ -540,6 +404,178 @@ DocHyperLinkPopupService = __decorate([
 	__decorateParam(2, IUniverInstanceService)
 ], DocHyperLinkPopupService);
 
+//#endregion
+//#region src/views/hyper-link-edit/utils.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.
+*/
+function isBlankInput(value) {
+	return value.trim().length === 0;
+}
+
+//#endregion
+//#region src/views/DocHyperLinkEdit.tsx
+function hasProtocol(urlString) {
+	return /^[a-zA-Z]+:\/\//.test(urlString);
+}
+function isEmail(url) {
+	return /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/.test(url);
+}
+function transformUrl(urlStr) {
+	return hasProtocol(urlStr) ? urlStr : isEmail(urlStr) ? `mailto://${urlStr}` : `https://${urlStr}`;
+}
+const DocHyperLinkEdit = () => {
+	const hyperLinkService = useDependency(DocHyperLinkPopupService);
+	const localeService = useDependency(LocaleService);
+	const editing = useObservable(hyperLinkService.editingLink$);
+	const commandService = useDependency(ICommandService);
+	const univerInstanceService = useDependency(IUniverInstanceService);
+	const docSelectionManagerService = useDependency(DocSelectionManagerService);
+	const [link, setLink] = useState("");
+	const [label, setLabel] = useState("");
+	const [showError, setShowError] = useState(false);
+	const isLegal = Tools.isLegalUrl(link);
+	const doc = editing ? univerInstanceService.getUnit(editing.unitId, UniverInstanceType.UNIVER_DOC) : univerInstanceService.getCurrentUnitOfType(UniverInstanceType.UNIVER_DOC);
+	useEffect(() => {
+		var _doc$getSelfOrHeaderF2, _BuildTextUtils$custo, _body$customRanges2;
+		const activeRange = docSelectionManagerService.getActiveTextRange();
+		if (!activeRange) return;
+		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);
+			if (doc && matchedRange) {
+				var _matchedRange$propert, _matchedRange$propert2;
+				setLink((_matchedRange$propert = (_matchedRange$propert2 = matchedRange.properties) === null || _matchedRange$propert2 === void 0 ? void 0 : _matchedRange$propert2.url) !== null && _matchedRange$propert !== void 0 ? _matchedRange$propert : "");
+				setLabel(BuildTextUtils.transform.getPlainText(getBodySlice(body, matchedRange.startIndex, matchedRange.endIndex + 1).dataStream));
+			}
+			return;
+		}
+		const body = doc === null || doc === void 0 || (_doc$getSelfOrHeaderF2 = doc.getSelfOrHeaderFooterModel(activeRange.segmentId)) === null || _doc$getSelfOrHeaderF2 === void 0 ? void 0 : _doc$getSelfOrHeaderF2.getBody();
+		const selection = body ? activeRange : null;
+		const matchedRange = selection && ((_BuildTextUtils$custo = BuildTextUtils.customRange.getCustomRangesInterestsWithSelection(selection, (_body$customRanges2 = body === null || body === void 0 ? void 0 : body.customRanges) !== null && _body$customRanges2 !== void 0 ? _body$customRanges2 : [])) === null || _BuildTextUtils$custo === void 0 ? void 0 : _BuildTextUtils$custo[0]);
+		if (doc && matchedRange) {
+			var _matchedRange$propert3, _matchedRange$propert4;
+			setLink((_matchedRange$propert3 = matchedRange === null || matchedRange === void 0 || (_matchedRange$propert4 = matchedRange.properties) === null || _matchedRange$propert4 === void 0 ? void 0 : _matchedRange$propert4.url) !== null && _matchedRange$propert3 !== void 0 ? _matchedRange$propert3 : "");
+		}
+	}, [
+		doc,
+		editing,
+		docSelectionManagerService,
+		univerInstanceService
+	]);
+	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 {
+			if (isBlankInput(label)) return;
+			commandService.executeCommand(UpdateDocHyperLinkCommand.id, {
+				unitId: doc.getUnitId(),
+				payload: linkFinal,
+				linkId: editing.linkId,
+				label,
+				segmentId: editing.segmentId
+			});
+		}
+		hyperLinkService.hideEditPopup();
+	};
+	if (!doc) return;
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("univer-box-border univer-w-[328px] univer-rounded-xl univer-bg-white univer-px-6 univer-py-5 univer-shadow dark:!univer-bg-gray-900", borderClassName),
+		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: (evt) => {
+					if (evt.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: true,
+				onKeyDown: (evt) => {
+					if (evt.keyCode === KeyCode.ENTER) handleConfirm();
+				}
+			})
+		})] }), /* @__PURE__ */ jsxs("div", {
+			className: "univer-flex univer-justify-end univer-gap-3",
+			children: [/* @__PURE__ */ jsx(Button, {
+				onClick: handleCancel,
+				children: localeService.t("docs-hyper-link-ui.edit.cancel")
+			}), /* @__PURE__ */ jsx(Button, {
+				variant: "primary",
+				disabled: isBlankInput(link),
+				onClick: handleConfirm,
+				children: localeService.t("docs-hyper-link-ui.edit.confirm")
+			})]
+		})]
+	});
+};
+DocHyperLinkEdit.componentKey = "docs-hyper-link-edit";
+
+//#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 {
@@ -603,7 +639,7 @@ let DocHyperLinkEventRenderController = class DocHyperLinkEventRenderController
 		this._hyperLinkPopupService = _hyperLinkPopupService;
 		this._docSkeletonManagerService = _docSkeletonManagerService;
 		this._docSelectionManagerService = _docSelectionManagerService;
-		if (this._context.unitId === DOCS_ZEN_EDITOR_UNIT_ID_KEY || this._context.unitId === DOCS_NORMAL_EDITOR_UNIT_ID_KEY) return;
+		if (this._context.unitId === DOCS_NORMAL_EDITOR_UNIT_ID_KEY) return;
 		this._initHover();
 		this._initClick();
 	}
@@ -696,12 +732,11 @@ DocHyperLinkRenderController = __decorate([
 
 //#endregion
 //#region src/menu/menu.ts
-const DOC_LINK_ICON = "doc-hyper-link-icon";
 function AddHyperLinkMenuItemFactory(accessor) {
 	return {
 		id: ShowDocHyperLinkEditPopupOperation.id,
 		type: MenuItemType.BUTTON,
-		icon: DOC_LINK_ICON,
+		icon: "LinkIcon",
 		title: "docs-hyper-link-ui.menu.tooltip",
 		tooltip: "docs-hyper-link-ui.menu.tooltip",
 		hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC),
@@ -729,6 +764,10 @@ const menuSchema = {
 		order: 1,
 		menuItemFactory: AddHyperLinkMenuItemFactory
 	} },
+	[FLOAT_TOOLBAR_MENU_POSITION]: { [ShowDocHyperLinkEditPopupOperation.id]: {
+		order: 20,
+		menuItemFactory: AddHyperLinkMenuItemFactory
+	} },
 	[ContextMenuPosition.MAIN_AREA]: { [ContextMenuGroup.DATA]: { [ShowDocHyperLinkEditPopupOperation.id]: {
 		order: 0,
 		menuItemFactory: AddHyperLinkMenuItemFactory
@@ -748,26 +787,15 @@ const menuSchema = {
 //#endregion
 //#region src/controllers/ui.controller.ts
 let DocHyperLinkUIController = class DocHyperLinkUIController extends Disposable {
-	constructor(_componentManager, _commandService, _menuManagerService, _shortcutService) {
+	constructor(_commandService, _menuManagerService, _shortcutService) {
 		super();
-		this._componentManager = _componentManager;
 		this._commandService = _commandService;
 		this._menuManagerService = _menuManagerService;
 		this._shortcutService = _shortcutService;
-		this._initComponents();
 		this._initCommands();
 		this._initMenus();
 		this._initShortcut();
 	}
-	_initComponents() {
-		[
-			[DocHyperLinkEdit.componentKey, DocHyperLinkEdit],
-			[DocLinkPopup.componentKey, DocLinkPopup],
-			[DOC_LINK_ICON, LinkIcon]
-		].forEach(([key, comp]) => {
-			this.disposeWithMe(this._componentManager.register(key, comp));
-		});
-	}
 	_initCommands() {
 		[
 			AddDocHyperLinkCommand,
@@ -786,14 +814,14 @@ let DocHyperLinkUIController = class DocHyperLinkUIController extends Disposable
 		});
 	}
 	_initMenus() {
+		this._menuManagerService.appendRootMenu({ [FLOAT_TOOLBAR_MENU_POSITION]: {} });
 		this._menuManagerService.mergeMenu(menuSchema);
 	}
 };
 DocHyperLinkUIController = __decorate([
-	__decorateParam(0, Inject(ComponentManager)),
-	__decorateParam(1, ICommandService),
-	__decorateParam(2, IMenuManagerService),
-	__decorateParam(3, IShortcutService)
+	__decorateParam(0, ICommandService),
+	__decorateParam(1, IMenuManagerService),
+	__decorateParam(2, IShortcutService)
 ], DocHyperLinkUIController);
 
 //#endregion
@@ -829,6 +857,8 @@ 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);
 		[
 			[DocHyperLinkPopupService],
 			[DocHyperLinkUIController],