@univerjs/docs-hyper-link-ui 0.20.1 → 0.21.0

package/lib/index.js

@@ -1 +1,854 @@
-import{BuildTextUtils as e,CommandType as t,CustomRangeType as n,DOCS_NORMAL_EDITOR_UNIT_ID_KEY as r,DOCS_ZEN_EDITOR_UNIT_ID_KEY as i,DependentOn as a,Disposable as o,ICommandService as s,IConfigService as c,IUniverInstanceService as l,Inject as u,Injector as d,LocaleService as f,Plugin as p,Tools as m,UniverInstanceType as h,generateRandomId as g,getBodySlice as _,merge as v}from"@univerjs/core";import{UniverDocsHyperLinkPlugin as y}from"@univerjs/docs-hyper-link";import{IRenderManagerService as b}from"@univerjs/engine-render";import{DOC_INTERCEPTOR_POINT as x,DocInterceptorService as S,DocSelectionManagerService as C,DocSkeletonManagerService as ee,SetTextSelectionsOperation as te,addCustomRangeBySelectionFactory as ne,deleteCustomRangeFactory as re,replaceSelectionFactory as ie}from"@univerjs/docs";import{DocCanvasPopManagerService as ae,DocEventManagerService as oe,DocRenderController as se,whenDocAndEditorFocused as ce}from"@univerjs/docs-ui";import{BehaviorSubject as le,Observable as ue,debounceTime as de,distinctUntilChanged as fe,pairwise as pe}from"rxjs";import{Button as w,FormLayout as T,Input as E,MessageType as me,Tooltip as D,borderClassName as O,clsx as he}from"@univerjs/design";import{ComponentManager as ge,ContextMenuGroup as _e,ContextMenuPosition as ve,IMenuManagerService as ye,IMessageService as be,IShortcutService as xe,KeyCode as k,MenuItemType as Se,MetaKeys as Ce,RibbonInsertGroup as we,getMenuHiddenObservable as Te,useDependency as A,useObservable as j}from"@univerjs/ui";import{useEffect as Ee,useState as M}from"react";import{jsx as N,jsxs as P}from"react/jsx-runtime";import{CopyIcon as De,LinkIcon as F,UnlinkIcon as Oe,WriteIcon as ke}from"@univerjs/icons";var Ae=`@univerjs/docs-hyper-link-ui`,je=`0.20.1`;const I=`docs-hyper-link-ui.config`;Symbol(I);const L={},Me={type:t.COMMAND,id:`docs.command.add-hyper-link`,async handler(e,t){if(!t)return!1;let{payload:r,unitId:i,selections:a}=t,o=e.get(s),c=ne(e,{rangeId:g(),rangeType:n.HYPERLINK,properties:{url:r},unitId:i,selections:a});return c?o.syncExecuteCommand(c.id,c.params):!1}},R={id:`docs.command.update-hyper-link`,type:t.COMMAND,handler(e,t){var r;if(!t)return!1;let{unitId:i,payload:a,segmentId:o,linkId:c}=t,u=e.get(s),d=e.get(l),f=e.get(C).getActiveTextRange(),p=d.getUnit(i,h.UNIVER_DOC);if(!f||!p)return!1;let m=(r=_(p.getSelfOrHeaderFooterModel(o).getBody(),f.startOffset,f.endOffset).textRuns)==null?void 0:r[0];m&&(m.ed=t.label.length+1);let g=ie(e,{unitId:i,body:{dataStream:`${t.label}`,customRanges:[{rangeId:c,rangeType:n.HYPERLINK,startIndex:0,endIndex:t.label.length+1,properties:{url:a}}],textRuns:m?[m]:void 0},selection:{startOffset:f.startOffset,endOffset:f.endOffset,collapsed:!1,segmentId:o}});return g?u.syncExecuteCommand(g.id,g.params):!1}};function z(e){return e.trim().length===0}function Ne(e){return/^[a-zA-Z]+:\/\//.test(e)}function Pe(e){return/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/.test(e)}function Fe(e){return Ne(e)?e:Pe(e)?`mailto://${e}`:`https://${e}`}const B=()=>{let t=A(J),n=A(f),r=j(t.editingLink$),i=A(s),a=A(l),o=A(C),[c,u]=M(``),[d,p]=M(``),[g,v]=M(!1),y=m.isLegalUrl(c),b=r?a.getUnit(r.unitId,h.UNIVER_DOC):a.getCurrentUnitForType(h.UNIVER_DOC);Ee(()=>{var t,n,i;let a=o.getActiveTextRange();if(!a)return;if(r){var s,c;let t=b==null||(s=b.getSelfOrHeaderFooterModel(r.segmentId))==null?void 0:s.getBody(),n=t==null||(c=t.customRanges)==null?void 0:c.find(e=>(r==null?void 0:r.linkId)===e.rangeId&&e.startIndex===r.startIndex&&e.endIndex===r.endIndex);if(b&&n){var l,d;u((l=(d=n.properties)==null?void 0:d.url)==null?``:l),p(e.transform.getPlainText(_(t,n.startIndex,n.endIndex+1).dataStream))}return}let f=b==null||(t=b.getSelfOrHeaderFooterModel(a.segmentId))==null?void 0:t.getBody(),m=f?a:null,h=m&&((n=e.customRange.getCustomRangesInterestsWithSelection(m,(i=f==null?void 0:f.customRanges)==null?[]:i))==null?void 0:n[0]);if(b&&h){var g,v;u((g=h==null||(v=h.properties)==null?void 0:v.url)==null?``:g)}},[b,r,o,a]);let x=()=>{t.hideEditPopup()},S=()=>{if(v(!0),!y||!b)return;let e=Fe(c);if(!r)i.executeCommand(Me.id,{unitId:b.getUnitId(),payload:e});else{if(z(d))return;i.executeCommand(R.id,{unitId:b.getUnitId(),payload:e,linkId:r.linkId,label:d,segmentId:r.segmentId})}t.hideEditPopup()};if(b)return P(`div`,{className:he(`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`,O),children:[P(`div`,{children:[r?N(T,{label:n.t(`docLink.edit.label`),error:g&&z(d)?n.t(`docLink.edit.labelError`):``,children:N(E,{value:d,onChange:p,autoFocus:!0,onKeyDown:e=>{e.keyCode===k.ENTER&&S()}})}):null,N(T,{label:n.t(`docLink.edit.address`),error:g&&!y?n.t(`docLink.edit.addressError`):``,children:N(E,{value:c,onChange:u,autoFocus:!0,onKeyDown:e=>{e.keyCode===k.ENTER&&S()}})})]}),P(`div`,{className:`univer-flex univer-justify-end univer-gap-3`,children:[N(w,{onClick:x,children:n.t(`docLink.edit.cancel`)}),N(w,{variant:`primary`,disabled:z(c),onClick:S,children:n.t(`docLink.edit.confirm`)})]})]})};B.componentKey=`docs-hyper-link-edit`;const Ie={type:t.COMMAND,id:`docs.command.delete-hyper-link`,async handler(e,t){if(!t)return!1;let{unitId:n,linkId:r,segmentId:i}=t,a=e.get(s),o=re(e,{unitId:n,rangeId:r,segmentId:i});return o?await a.syncExecuteCommand(o.id,o.params):!1}},Le=e=>{let t=e.get(C),n=e.get(l),r=t.getTextRanges();if(!(r!=null&&r.length))return!0;let i=r[0];return!!(!n.getCurrentUnitForType(h.UNIVER_DOC)||!i||i.collapsed)},V={type:t.OPERATION,id:`doc.operation.show-hyper-link-edit-popup`,handler(e,t){var n;let r=t==null?void 0:t.link,i=e.get(l);if(Le(e)&&!r)return!1;let a=e.get(J),o=(r==null?void 0:r.unitId)||((n=i.getCurrentUnitForType(h.UNIVER_DOC))==null?void 0:n.getUnitId());return o?(a.showEditPopup(o,r),!0):!1}},H={type:t.OPERATION,id:`doc.operation.toggle-hyper-link-info-popup`,handler(e,t){let n=e.get(J);return t?(n.showInfoPopup(t),!0):(n.hideInfoPopup(),!0)}},Re={type:t.OPERATION,id:`doc.operation.click-hyper-link`,handler(e,t){var r;if(!t)return!1;let{unitId:i,linkId:a,segmentId:o}=t,s=e.get(l).getUnit(i,h.UNIVER_DOC),c=s==null?void 0:s.getSelfOrHeaderFooterModel(o).getBody(),u=c==null||(r=c.customRanges)==null||(r=r.find(e=>e.rangeId===a&&e.rangeType===n.HYPERLINK))==null||(r=r.properties)==null?void 0:r.url;return u&&window.open(u,`_blank`,`noopener noreferrer`),!0}},U=()=>{var e,t;let r=A(J),i=A(s),a=A(be),o=A(f),c=j(r.showingLink$),u=A(l);if(!c)return null;let{unitId:d,linkId:p,segmentId:m,startIndex:g,endIndex:_}=c,v=u.getUnit(d,h.UNIVER_DOC),y=v==null?void 0:v.getSelfOrHeaderFooterModel(m).getBody(),b=y==null||(e=y.customRanges)==null?void 0:e.find(e=>e.rangeId===p&&e.rangeType===n.HYPERLINK&&e.startIndex===g&&e.endIndex===_);if(!b)return null;let x=(t=b.properties)==null?void 0:t.url;return P(`div`,{className:he(`univer-box-border univer-flex univer-max-w-80 univer-items-center univer-justify-between univer-overflow-hidden univer-rounded-lg univer-bg-white univer-p-3 univer-shadow dark:!univer-bg-gray-900`,O),onClick:()=>{r.hideInfoPopup()},children:[P(`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(x,void 0,`noopener noreferrer`),children:[N(`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-white`,children:N(F,{})}),N(D,{showIfEllipsis:!0,title:x,children:N(`span`,{className:`univer-flex-1 univer-truncate`,children:x})})]}),P(`div`,{className:`univer-flex univer-h-6 univer-flex-[0_0_auto] univer-items-center univer-justify-center`,children:[N(`div`,{className:`univer-ml-2 univer-flex univer-size-6 univer-cursor-pointer univer-items-center univer-justify-center univer-rounded univer-text-base`,onClick:()=>{navigator.clipboard.writeText(x),a.show({content:o.t(`docLink.info.coped`),type:me.Info})},children:N(D,{placement:`bottom`,title:o.t(`docLink.info.copy`),children:N(De,{})})}),N(`div`,{className:`univer-ml-2 univer-flex univer-size-6 univer-cursor-pointer univer-items-center univer-justify-center univer-rounded univer-text-base`,onClick:()=>{i.executeCommand(V.id,{link:c})},children:N(D,{placement:`bottom`,title:o.t(`docLink.info.edit`),children:N(ke,{})})}),N(`div`,{className:`univer-ml-2 univer-flex univer-size-6 univer-cursor-pointer univer-items-center univer-justify-center univer-rounded univer-text-base`,onClick:()=>{i.executeCommand(Ie.id,{unitId:d,linkId:b.rangeId,segmentId:m})},children:N(D,{placement:`bottom`,title:o.t(`docLink.info.cancel`),children:N(Oe,{})})})]})]})};U.componentKey=`univer.doc.link-info-popup`;function W(e){"@babel/helpers - typeof";return W=typeof Symbol==`function`&&typeof Symbol.iterator==`symbol`?function(e){return typeof e}:function(e){return e&&typeof Symbol==`function`&&e.constructor===Symbol&&e!==Symbol.prototype?`symbol`:typeof e},W(e)}function ze(e,t){if(W(e)!=`object`||!e)return e;var n=e[Symbol.toPrimitive];if(n!==void 0){var r=n.call(e,t||`default`);if(W(r)!=`object`)return r;throw TypeError(`@@toPrimitive must return a primitive value.`)}return(t===`string`?String:Number)(e)}function Be(e){var t=ze(e,`string`);return W(t)==`symbol`?t:t+``}function G(e,t,n){return(t=Be(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function K(e,t){return function(n,r){t(n,r,e)}}function q(e,t,n,r){var i=arguments.length,a=i<3?t:r===null?r=Object.getOwnPropertyDescriptor(t,n):r,o;if(typeof Reflect==`object`&&typeof Reflect.decorate==`function`)a=Reflect.decorate(e,t,n,r);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(a=(i<3?o(a):i>3?o(t,n,a):o(t,n))||a);return i>3&&a&&Object.defineProperty(t,n,a),a}let J=class extends o{constructor(e,t,n){super(),this._docCanvasPopupManagerService=e,this._textSelectionManagerService=t,this._univerInstanceService=n,G(this,`_editingLink$`,new le(null)),G(this,`_showingLink$`,new le(null)),G(this,`editingLink$`,this._editingLink$.asObservable()),G(this,`showingLink$`,this._showingLink$.asObservable()),G(this,`_editPopup`,null),G(this,`_infoPopup`,null),this.disposeWithMe(()=>{this._editingLink$.complete(),this._showingLink$.complete()})}get editing(){return this._editingLink$.value}get showing(){return this._showingLink$.value}showEditPopup(e,t){this._editPopup&&this._editPopup.dispose(),this._editingLink$.next(t);let n=this._textSelectionManagerService.getTextRanges({unitId:e,subUnitId:e}),r=n==null?void 0:n[n.length-1];if(t){let{segmentId:e,segmentPage:n,startIndex:i,endIndex:a}=t;r={collapsed:!1,startOffset:i,endOffset:a+1,segmentId:e,segmentPage:n},this._textSelectionManagerService.replaceDocRanges([{startOffset:i,endOffset:a+1}])}return r?(this._editPopup=this._docCanvasPopupManagerService.attachPopupToRange(r,{componentKey:B.componentKey,direction:`bottom`},e),this._editPopup):null}hideEditPopup(){var e;this._editingLink$.next(null),(e=this._editPopup)==null||e.dispose()}showInfoPopup(e){var t,n,r,i,a,o;let{linkId:s,unitId:c,segmentId:l,segmentPage:u,startIndex:d,endIndex:f}=e;if(!(((t=this.showing)==null?void 0:t.linkId)===s&&((n=this.showing)==null?void 0:n.unitId)===c&&((r=this.showing)==null?void 0:r.segmentId)===l&&((i=this.showing)==null?void 0:i.segmentPage)===u&&((a=this.showing)==null?void 0:a.startIndex)===d&&((o=this.showing)==null?void 0:o.endIndex)===f)&&(this._infoPopup&&this._infoPopup.dispose(),this._univerInstanceService.getUnit(c,h.UNIVER_DOC)))return this._showingLink$.next({unitId:c,linkId:s,segmentId:l,segmentPage:u,startIndex:d,endIndex:f}),this._infoPopup=this._docCanvasPopupManagerService.attachPopupToRange({collapsed:!1,startOffset:d,endOffset:f+1,segmentId:l,segmentPage:u},{componentKey:U.componentKey,direction:`top-center`,multipleDirection:`top`,onClickOutside:()=>{this.hideInfoPopup()}},c),this._infoPopup}hideInfoPopup(){var e;this._showingLink$.next(null),(e=this._infoPopup)==null||e.dispose()}};J=q([K(0,u(ae)),K(1,u(C)),K(2,l)],J);let Y=class extends o{constructor(e,t,n){super(),this._commandService=e,this._univerInstanceService=t,this._docHyperLinkService=n,this._initSelectionChange()}_initSelectionChange(){this.disposeWithMe(this._commandService.onCommandExecuted(e=>{if(e.id===te.id){let{unitId:r,ranges:i,segmentId:a}=e.params,o=this._univerInstanceService.getUnit(r,h.UNIVER_DOC),s=i[0];if(s&&o){var t;let{startOffset:e,endOffset:i,collapsed:c,segmentPage:l}=s,u=(t=o.getSelfOrHeaderFooterModel(a))==null||(t=t.getBody())==null?void 0:t.customRanges;if(c){var n;let t=(n=u==null?void 0:u.findIndex(t=>t.startIndex<e&&t.endIndex>i-1))==null?-1:n;if(t>-1){let e=u[t];this._docHyperLinkService.showInfoPopup({unitId:r,linkId:e.rangeId,segmentId:a,segmentPage:l,startIndex:e.startIndex,endIndex:e.endIndex});return}}else if(u!=null&&u.find(t=>t.startIndex<=e&&t.endIndex>=i-1))return}this._docHyperLinkService.hideInfoPopup(),this._docHyperLinkService.hideEditPopup()}}))}};Y=q([K(0,s),K(1,l),K(2,u(J))],Y);let X=class extends o{get _skeleton(){return this._docSkeletonManagerService.getSkeleton()}constructor(e,t,n,a,o,s){super(),this._context=e,this._docEventManagerService=t,this._commandService=n,this._hyperLinkPopupService=a,this._docSkeletonManagerService=o,this._docSelectionManagerService=s,!(this._context.unitId===i||this._context.unitId===r)&&(this._initHover(),this._initClick())}_hideInfoPopup(){this._hyperLinkPopupService.showing&&this._commandService.executeCommand(H.id)}_initHover(){this.disposeWithMe(this._docEventManagerService.hoverCustomRanges$.subscribe(e=>{var t;let r=e.find(e=>e.range.rangeType===n.HYPERLINK),i=this._docSelectionManagerService.getTextRanges(),a=i==null?void 0:i[0].segmentId;if(((t=r==null?void 0:r.segmentId)==null?``:t)!==a){this._hideInfoPopup();return}r?this._commandService.executeCommand(H.id,{unitId:this._context.unitId,linkId:r.range.rangeId,segmentId:r.segmentId,segmentPage:r.segmentPageIndex,rangeId:r.range.rangeId,startIndex:r.range.startIndex,endIndex:r.range.endIndex}):this._hideInfoPopup()}))}_initClick(){this.disposeWithMe(this._docEventManagerService.clickCustomRanges$.subscribe(e=>{let t=e.range;t&&this._commandService.executeCommand(Re.id,{unitId:this._context.unitId,linkId:t.rangeId,segmentId:e.segmentId})}))}};X=q([K(1,u(oe)),K(2,s),K(3,u(J)),K(4,u(ee)),K(5,u(C))],X);let Z=class extends o{constructor(e,t,n,r){super(),this._context=e,this._docInterceptorService=t,this._hyperLinkService=n,this._docRenderController=r,this._init(),this._initReRender()}_init(){this._docInterceptorService.intercept(x.CUSTOM_RANGE,{handler:(e,t,n)=>{if(!e)return n(e);let{unitId:r,index:i}=t,a=this._hyperLinkService.showing;if(!a)return n({...e,active:!1});let{linkId:o,unitId:s,startIndex:c,endIndex:l}=a,u=s===r&&e.rangeId===o&&i>=c&&i<=l;return n({...e,active:u})}})}_initReRender(){this.disposeWithMe(this._hyperLinkService.showingLink$.pipe(fe((e,t)=>(e==null?void 0:e.linkId)===(t==null?void 0:t.linkId)&&(e==null?void 0:e.unitId)===(t==null?void 0:t.unitId)&&(e==null?void 0:e.startIndex)===(t==null?void 0:t.startIndex)),pe()).subscribe(([e,t])=>{t?t.unitId===this._context.unitId&&this._docRenderController.reRender(t.unitId):e&&e.unitId===this._context.unitId&&this._docRenderController.reRender(e.unitId)}))}};Z=q([K(1,u(S)),K(2,u(J)),K(3,u(se))],Z);const Ve=`doc-hyper-link-icon`;function He(e){return{id:V.id,type:Se.BUTTON,icon:Ve,title:`docLink.menu.tooltip`,tooltip:`docLink.menu.tooltip`,hidden$:Te(e,h.UNIVER_DOC),disabled$:new ue(function(t){let n=e.get(C).textSelection$.pipe(de(16)).subscribe(()=>{t.next(Le(e))});return()=>{n.unsubscribe()}})}}const Ue={id:V.id,binding:Ce.CTRL_COMMAND|k.K,description:`docLink.menu.tooltip`,preconditions:ce},We={[we.MEDIA]:{[V.id]:{order:1,menuItemFactory:He}},[ve.MAIN_AREA]:{[_e.DATA]:{[V.id]:{order:0,menuItemFactory:He}}}};let Q=class extends o{constructor(e,t,n,r){super(),this._componentManager=e,this._commandService=t,this._menuManagerService=n,this._shortcutService=r,this._initComponents(),this._initCommands(),this._initMenus(),this._initShortcut()}_initComponents(){[[B.componentKey,B],[U.componentKey,U],[Ve,F]].forEach(([e,t])=>{this.disposeWithMe(this._componentManager.register(e,t))})}_initCommands(){[Me,R,Ie,V,H,Re].forEach(e=>{this._commandService.registerCommand(e)})}_initShortcut(){[Ue].forEach(e=>{this._shortcutService.registerShortcut(e)})}_initMenus(){this._menuManagerService.mergeMenu(We)}};Q=q([K(0,u(ge)),K(1,s),K(2,ye),K(3,xe)],Q);let $=class extends p{constructor(e=L,t,n,r){super(),this._config=e,this._injector=t,this._renderManagerSrv=n,this._configService=r;let{menu:i,...a}=v({},L,this._config);i&&this._configService.setConfig(`menu`,i,{merge:!0}),this._configService.setConfig(I,a)}onStarting(){[[J],[Q],[Y]].forEach(e=>{this._injector.add(e)}),this._injector.get(Q)}onReady(){this._injector.get(Y)}onRendered(){this._initRenderModule()}_initRenderModule(){[[Z],[X]].forEach(e=>{this._renderManagerSrv.registerRenderModule(h.UNIVER_DOC,e)})}};G($,`pluginName`,`DOC_HYPER_LINK_UI_PLUGIN`),G($,`packageName`,Ae),G($,`version`,je),G($,`type`,h.UNIVER_DOC),$=q([a(y),K(1,u(d)),K(2,b),K(3,c)],$);export{$ as UniverDocsHyperLinkUIPlugin};
+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, 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, whenDocAndEditorFocused } from "@univerjs/docs-ui";
+import { BehaviorSubject, Observable, debounceTime, distinctUntilChanged, pairwise } from "rxjs";
+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 { useEffect, useState } from "react";
+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.21.0";
+
+//#endregion
+//#region src/config/config.ts
+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/commands/commands/add-link.command.ts
+const AddDocHyperLinkCommand = {
+	type: CommandType.COMMAND,
+	id: "docs.command.add-hyper-link",
+	async handler(accessor, params) {
+		if (!params) return false;
+		const { payload, unitId, selections } = params;
+		const commandService = accessor.get(ICommandService);
+		const doMutation = addCustomRangeBySelectionFactory(accessor, {
+			rangeId: generateRandomId(),
+			rangeType: CustomRangeType.HYPERLINK,
+			properties: { url: payload },
+			unitId,
+			selections
+		});
+		if (doMutation) return commandService.syncExecuteCommand(doMutation.id, doMutation.params);
+		return false;
+	}
+};
+
+//#endregion
+//#region src/commands/commands/update-link.command.ts
+const UpdateDocHyperLinkCommand = {
+	id: "docs.command.update-hyper-link",
+	type: CommandType.COMMAND,
+	handler(accessor, params) {
+		var _oldBody$textRuns;
+		if (!params) return false;
+		const { unitId, payload, segmentId, linkId } = params;
+		const commandService = accessor.get(ICommandService);
+		const univerInstanceService = accessor.get(IUniverInstanceService);
+		const currentSelection = accessor.get(DocSelectionManagerService).getActiveTextRange();
+		const doc = univerInstanceService.getUnit(unitId, UniverInstanceType.UNIVER_DOC);
+		if (!currentSelection || !doc) return false;
+		const textRun = (_oldBody$textRuns = getBodySlice(doc.getSelfOrHeaderFooterModel(segmentId).getBody(), currentSelection.startOffset, currentSelection.endOffset).textRuns) === null || _oldBody$textRuns === void 0 ? void 0 : _oldBody$textRuns[0];
+		if (textRun) textRun.ed = params.label.length + 1;
+		const replaceSelection = replaceSelectionFactory(accessor, {
+			unitId,
+			body: {
+				dataStream: `${params.label}`,
+				customRanges: [{
+					rangeId: linkId,
+					rangeType: CustomRangeType.HYPERLINK,
+					startIndex: 0,
+					endIndex: params.label.length + 1,
+					properties: { url: payload }
+				}],
+				textRuns: textRun ? [textRun] : void 0
+			},
+			selection: {
+				startOffset: currentSelection.startOffset,
+				endOffset: currentSelection.endOffset,
+				collapsed: false,
+				segmentId
+			}
+		});
+		if (!replaceSelection) return false;
+		return commandService.syncExecuteCommand(replaceSelection.id, replaceSelection.params);
+	}
+};
+
+//#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.getCurrentUnitForType(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("docLink.edit.label"),
+			error: showError && isBlankInput(label) ? localeService.t("docLink.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("docLink.edit.address"),
+			error: showError && !isLegal ? localeService.t("docLink.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("docLink.edit.cancel")
+			}), /* @__PURE__ */ jsx(Button, {
+				variant: "primary",
+				disabled: isBlankInput(link),
+				onClick: handleConfirm,
+				children: localeService.t("docLink.edit.confirm")
+			})]
+		})]
+	});
+};
+DocHyperLinkEdit.componentKey = "docs-hyper-link-edit";
+
+//#endregion
+//#region src/commands/commands/delete-link.command.ts
+const DeleteDocHyperLinkCommand = {
+	type: CommandType.COMMAND,
+	id: "docs.command.delete-hyper-link",
+	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/operations/popup.operation.ts
+const shouldDisableAddLink = (accessor) => {
+	const textSelectionService = accessor.get(DocSelectionManagerService);
+	const univerInstanceService = accessor.get(IUniverInstanceService);
+	const textRanges = textSelectionService.getTextRanges();
+	if (!(textRanges === null || textRanges === void 0 ? void 0 : textRanges.length)) return true;
+	const activeRange = textRanges[0];
+	if (!univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_DOC) || !activeRange || activeRange.collapsed) return true;
+	return false;
+};
+const ShowDocHyperLinkEditPopupOperation = {
+	type: CommandType.OPERATION,
+	id: "doc.operation.show-hyper-link-edit-popup",
+	handler(accessor, params) {
+		var _univerInstanceServic;
+		const linkInfo = params === null || params === void 0 ? void 0 : params.link;
+		const univerInstanceService = accessor.get(IUniverInstanceService);
+		if (shouldDisableAddLink(accessor) && !linkInfo) return false;
+		const hyperLinkService = accessor.get(DocHyperLinkPopupService);
+		const unitId = (linkInfo === null || linkInfo === void 0 ? void 0 : linkInfo.unitId) || ((_univerInstanceServic = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_DOC)) === null || _univerInstanceServic === void 0 ? void 0 : _univerInstanceServic.getUnitId());
+		if (!unitId) return false;
+		hyperLinkService.showEditPopup(unitId, linkInfo);
+		return true;
+	}
+};
+const ToggleDocHyperLinkInfoPopupOperation = {
+	type: CommandType.OPERATION,
+	id: "doc.operation.toggle-hyper-link-info-popup",
+	handler(accessor, params) {
+		const hyperLinkService = accessor.get(DocHyperLinkPopupService);
+		if (!params) {
+			hyperLinkService.hideInfoPopup();
+			return true;
+		}
+		hyperLinkService.showInfoPopup(params);
+		return true;
+	}
+};
+const ClickDocHyperLinkOperation = {
+	type: CommandType.OPERATION,
+	id: "doc.operation.click-hyper-link",
+	handler(accessor, params) {
+		var _body$customRanges;
+		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 ? void 0 : doc.getSelfOrHeaderFooterModel(segmentId).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 (link) window.open(link, "_blank", "noopener noreferrer");
+		return true;
+	}
+};
+
+//#endregion
+//#region src/views/hyper-link-popup/index.tsx
+const DocLinkPopup = () => {
+	var _body$customRanges, _link$properties;
+	const hyperLinkService = useDependency(DocHyperLinkPopupService);
+	const commandService = useDependency(ICommandService);
+	const messageService = useDependency(IMessageService);
+	const localeService = useDependency(LocaleService);
+	const currentPopup = useObservable(hyperLinkService.showingLink$);
+	const univerInstanceService = useDependency(IUniverInstanceService);
+	if (!currentPopup) return null;
+	const { unitId, linkId, segmentId, startIndex, endIndex } = currentPopup;
+	const doc = univerInstanceService.getUnit(unitId, UniverInstanceType.UNIVER_DOC);
+	const body = doc === null || doc === void 0 ? void 0 : doc.getSelfOrHeaderFooterModel(segmentId).getBody();
+	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;
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("univer-box-border univer-flex univer-max-w-80 univer-items-center univer-justify-between univer-overflow-hidden univer-rounded-lg univer-bg-white univer-p-3 univer-shadow dark:!univer-bg-gray-900", borderClassName),
+		onClick: () => {
+			hyperLinkService.hideInfoPopup();
+		},
+		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"),
+			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-white",
+				children: /* @__PURE__ */ jsx(LinkIcon, {})
+			}), /* @__PURE__ */ jsx(Tooltip, {
+				showIfEllipsis: true,
+				title: url,
+				children: /* @__PURE__ */ jsx("span", {
+					className: "univer-flex-1 univer-truncate",
+					children: url
+				})
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "univer-flex univer-h-6 univer-flex-[0_0_auto] univer-items-center univer-justify-center",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "univer-ml-2 univer-flex univer-size-6 univer-cursor-pointer univer-items-center univer-justify-center univer-rounded univer-text-base",
+					onClick: () => {
+						navigator.clipboard.writeText(url);
+						messageService.show({
+							content: localeService.t("docLink.info.coped"),
+							type: MessageType.Info
+						});
+					},
+					children: /* @__PURE__ */ jsx(Tooltip, {
+						placement: "bottom",
+						title: localeService.t("docLink.info.copy"),
+						children: /* @__PURE__ */ jsx(CopyIcon, {})
+					})
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "univer-ml-2 univer-flex univer-size-6 univer-cursor-pointer univer-items-center univer-justify-center univer-rounded univer-text-base",
+					onClick: () => {
+						commandService.executeCommand(ShowDocHyperLinkEditPopupOperation.id, { link: currentPopup });
+					},
+					children: /* @__PURE__ */ jsx(Tooltip, {
+						placement: "bottom",
+						title: localeService.t("docLink.info.edit"),
+						children: /* @__PURE__ */ jsx(WriteIcon, {})
+					})
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "univer-ml-2 univer-flex univer-size-6 univer-cursor-pointer univer-items-center univer-justify-center univer-rounded univer-text-base",
+					onClick: () => {
+						commandService.executeCommand(DeleteDocHyperLinkCommand.id, {
+							unitId,
+							linkId: link.rangeId,
+							segmentId
+						});
+					},
+					children: /* @__PURE__ */ jsx(Tooltip, {
+						placement: "bottom",
+						title: localeService.t("docLink.info.cancel"),
+						children: /* @__PURE__ */ jsx(UnlinkIcon, {})
+					})
+				})
+			]
+		})]
+	});
+};
+DocLinkPopup.componentKey = "univer.doc.link-info-popup";
+
+//#endregion
+//#region \0@oxc-project+runtime@0.124.0/helpers/typeof.js
+function _typeof(o) {
+	"@babel/helpers - typeof";
+	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
+		return typeof o;
+	} : function(o) {
+		return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+	}, _typeof(o);
+}
+
+//#endregion
+//#region \0@oxc-project+runtime@0.124.0/helpers/toPrimitive.js
+function toPrimitive(t, r) {
+	if ("object" != _typeof(t) || !t) return t;
+	var e = t[Symbol.toPrimitive];
+	if (void 0 !== e) {
+		var i = e.call(t, r || "default");
+		if ("object" != _typeof(i)) return i;
+		throw new TypeError("@@toPrimitive must return a primitive value.");
+	}
+	return ("string" === r ? String : Number)(t);
+}
+
+//#endregion
+//#region \0@oxc-project+runtime@0.124.0/helpers/toPropertyKey.js
+function toPropertyKey(t) {
+	var i = toPrimitive(t, "string");
+	return "symbol" == _typeof(i) ? i : i + "";
+}
+
+//#endregion
+//#region \0@oxc-project+runtime@0.124.0/helpers/defineProperty.js
+function _defineProperty(e, r, t) {
+	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+		value: t,
+		enumerable: !0,
+		configurable: !0,
+		writable: !0
+	}) : e[r] = t, e;
+}
+
+//#endregion
+//#region \0@oxc-project+runtime@0.124.0/helpers/decorateParam.js
+function __decorateParam(paramIndex, decorator) {
+	return function(target, key) {
+		decorator(target, key, paramIndex);
+	};
+}
+
+//#endregion
+//#region \0@oxc-project+runtime@0.124.0/helpers/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);
+	else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+	return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+
+//#endregion
+//#region src/services/hyper-link-popup.service.ts
+let DocHyperLinkPopupService = class DocHyperLinkPopupService extends Disposable {
+	constructor(_docCanvasPopupManagerService, _textSelectionManagerService, _univerInstanceService) {
+		super();
+		this._docCanvasPopupManagerService = _docCanvasPopupManagerService;
+		this._textSelectionManagerService = _textSelectionManagerService;
+		this._univerInstanceService = _univerInstanceService;
+		_defineProperty(this, "_editingLink$", new BehaviorSubject(null));
+		_defineProperty(this, "_showingLink$", new BehaviorSubject(null));
+		_defineProperty(this, "editingLink$", this._editingLink$.asObservable());
+		_defineProperty(this, "showingLink$", this._showingLink$.asObservable());
+		_defineProperty(this, "_editPopup", null);
+		_defineProperty(this, "_infoPopup", null);
+		this.disposeWithMe(() => {
+			this._editingLink$.complete();
+			this._showingLink$.complete();
+		});
+	}
+	get editing() {
+		return this._editingLink$.value;
+	}
+	get showing() {
+		return this._showingLink$.value;
+	}
+	showEditPopup(unitId, linkInfo) {
+		if (this._editPopup) this._editPopup.dispose();
+		this._editingLink$.next(linkInfo);
+		const textRanges = this._textSelectionManagerService.getTextRanges({
+			unitId,
+			subUnitId: unitId
+		});
+		let activeRange = textRanges === null || textRanges === void 0 ? void 0 : textRanges[textRanges.length - 1];
+		if (linkInfo) {
+			const { segmentId, segmentPage, startIndex, endIndex } = linkInfo;
+			activeRange = {
+				collapsed: false,
+				startOffset: startIndex,
+				endOffset: endIndex + 1,
+				segmentId,
+				segmentPage
+			};
+			this._textSelectionManagerService.replaceDocRanges([{
+				startOffset: startIndex,
+				endOffset: endIndex + 1
+			}]);
+		}
+		if (activeRange) {
+			this._editPopup = this._docCanvasPopupManagerService.attachPopupToRange(activeRange, {
+				componentKey: DocHyperLinkEdit.componentKey,
+				direction: "bottom"
+			}, 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();
+	}
+	showInfoPopup(info) {
+		var _this$showing, _this$showing2, _this$showing3, _this$showing4, _this$showing5, _this$showing6;
+		const { linkId, unitId, segmentId, segmentPage, startIndex, endIndex } = info;
+		if (((_this$showing = this.showing) === null || _this$showing === void 0 ? void 0 : _this$showing.linkId) === linkId && ((_this$showing2 = this.showing) === null || _this$showing2 === void 0 ? void 0 : _this$showing2.unitId) === unitId && ((_this$showing3 = this.showing) === null || _this$showing3 === void 0 ? void 0 : _this$showing3.segmentId) === segmentId && ((_this$showing4 = this.showing) === null || _this$showing4 === void 0 ? void 0 : _this$showing4.segmentPage) === segmentPage && ((_this$showing5 = this.showing) === null || _this$showing5 === void 0 ? void 0 : _this$showing5.startIndex) === startIndex && ((_this$showing6 = this.showing) === null || _this$showing6 === void 0 ? void 0 : _this$showing6.endIndex) === endIndex) return;
+		if (this._infoPopup) this._infoPopup.dispose();
+		if (!this._univerInstanceService.getUnit(unitId, UniverInstanceType.UNIVER_DOC)) return;
+		this._showingLink$.next({
+			unitId,
+			linkId,
+			segmentId,
+			segmentPage,
+			startIndex,
+			endIndex
+		});
+		this._infoPopup = this._docCanvasPopupManagerService.attachPopupToRange({
+			collapsed: false,
+			startOffset: startIndex,
+			endOffset: endIndex + 1,
+			segmentId,
+			segmentPage
+		}, {
+			componentKey: DocLinkPopup.componentKey,
+			direction: "top-center",
+			multipleDirection: "top",
+			onClickOutside: () => {
+				this.hideInfoPopup();
+			}
+		}, unitId);
+		return this._infoPopup;
+	}
+	hideInfoPopup() {
+		var _this$_infoPopup;
+		this._showingLink$.next(null);
+		(_this$_infoPopup = this._infoPopup) === null || _this$_infoPopup === void 0 || _this$_infoPopup.dispose();
+	}
+};
+DocHyperLinkPopupService = __decorate([
+	__decorateParam(0, Inject(DocCanvasPopManagerService)),
+	__decorateParam(1, Inject(DocSelectionManagerService)),
+	__decorateParam(2, IUniverInstanceService)
+], DocHyperLinkPopupService);
+
+//#endregion
+//#region src/controllers/doc-hyper-link-selection.controller.ts
+let DocHyperLinkSelectionController = class DocHyperLinkSelectionController extends Disposable {
+	constructor(_commandService, _univerInstanceService, _docHyperLinkService) {
+		super();
+		this._commandService = _commandService;
+		this._univerInstanceService = _univerInstanceService;
+		this._docHyperLinkService = _docHyperLinkService;
+		this._initSelectionChange();
+	}
+	_initSelectionChange() {
+		this.disposeWithMe(this._commandService.onCommandExecuted((commandInfo) => {
+			if (commandInfo.id === SetTextSelectionsOperation.id) {
+				const { unitId, ranges, segmentId } = commandInfo.params;
+				const doc = this._univerInstanceService.getUnit(unitId, UniverInstanceType.UNIVER_DOC);
+				const primary = ranges[0];
+				if (primary && doc) {
+					var _doc$getSelfOrHeaderF;
+					const { startOffset, endOffset, collapsed, segmentPage } = primary;
+					const customRanges = (_doc$getSelfOrHeaderF = doc.getSelfOrHeaderFooterModel(segmentId)) === null || _doc$getSelfOrHeaderF === void 0 || (_doc$getSelfOrHeaderF = _doc$getSelfOrHeaderF.getBody()) === null || _doc$getSelfOrHeaderF === void 0 ? void 0 : _doc$getSelfOrHeaderF.customRanges;
+					if (collapsed) {
+						var _customRanges$findInd;
+						const index = (_customRanges$findInd = customRanges === null || customRanges === void 0 ? void 0 : customRanges.findIndex((value) => value.startIndex < startOffset && value.endIndex > endOffset - 1)) !== null && _customRanges$findInd !== void 0 ? _customRanges$findInd : -1;
+						if (index > -1) {
+							const customRange = customRanges[index];
+							this._docHyperLinkService.showInfoPopup({
+								unitId,
+								linkId: customRange.rangeId,
+								segmentId,
+								segmentPage,
+								startIndex: customRange.startIndex,
+								endIndex: customRange.endIndex
+							});
+							return;
+						}
+					} else if (customRanges === null || customRanges === void 0 ? void 0 : customRanges.find((value) => value.startIndex <= startOffset && value.endIndex >= endOffset - 1)) return;
+				}
+				this._docHyperLinkService.hideInfoPopup();
+				this._docHyperLinkService.hideEditPopup();
+			}
+		}));
+	}
+};
+DocHyperLinkSelectionController = __decorate([
+	__decorateParam(0, ICommandService),
+	__decorateParam(1, IUniverInstanceService),
+	__decorateParam(2, Inject(DocHyperLinkPopupService))
+], DocHyperLinkSelectionController);
+
+//#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_ZEN_EDITOR_UNIT_ID_KEY || this._context.unitId === DOCS_NORMAL_EDITOR_UNIT_ID_KEY) return;
+		this._initHover();
+		this._initClick();
+	}
+	_hideInfoPopup() {
+		if (this._hyperLinkPopupService.showing) this._commandService.executeCommand(ToggleDocHyperLinkInfoPopupOperation.id);
+	}
+	_initHover() {
+		this.disposeWithMe(this._docEventManagerService.hoverCustomRanges$.subscribe((ranges) => {
+			var _link$segmentId;
+			const link = ranges.find((range) => range.range.rangeType === CustomRangeType.HYPERLINK);
+			const activeRanges = this._docSelectionManagerService.getTextRanges();
+			const currentSegmentId = activeRanges === null || activeRanges === void 0 ? void 0 : activeRanges[0].segmentId;
+			if (((_link$segmentId = link === null || link === void 0 ? void 0 : link.segmentId) !== null && _link$segmentId !== void 0 ? _link$segmentId : "") !== currentSegmentId) {
+				this._hideInfoPopup();
+				return;
+			}
+			if (link) this._commandService.executeCommand(ToggleDocHyperLinkInfoPopupOperation.id, {
+				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
+			});
+			else this._hideInfoPopup();
+		}));
+	}
+	_initClick() {
+		this.disposeWithMe(this._docEventManagerService.clickCustomRanges$.subscribe((range) => {
+			const link = range.range;
+			if (link) 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/controllers/render-controllers/render.controller.ts
+let DocHyperLinkRenderController = class DocHyperLinkRenderController extends Disposable {
+	constructor(_context, _docInterceptorService, _hyperLinkService, _docRenderController) {
+		super();
+		this._context = _context;
+		this._docInterceptorService = _docInterceptorService;
+		this._hyperLinkService = _hyperLinkService;
+		this._docRenderController = _docRenderController;
+		this._init();
+		this._initReRender();
+	}
+	_init() {
+		this._docInterceptorService.intercept(DOC_INTERCEPTOR_POINT.CUSTOM_RANGE, { handler: (data, pos, next) => {
+			if (!data) return next(data);
+			const { unitId, index } = pos;
+			const activeLink = this._hyperLinkService.showing;
+			if (!activeLink) return next({
+				...data,
+				active: false
+			});
+			const { linkId, unitId: linkUnitId, startIndex, endIndex } = activeLink;
+			const isActive = linkUnitId === unitId && data.rangeId === linkId && index >= startIndex && index <= endIndex;
+			return next({
+				...data,
+				active: isActive
+			});
+		} });
+	}
+	_initReRender() {
+		this.disposeWithMe(this._hyperLinkService.showingLink$.pipe(distinctUntilChanged((prev, aft) => (prev === null || prev === void 0 ? void 0 : prev.linkId) === (aft === null || aft === void 0 ? void 0 : aft.linkId) && (prev === null || prev === void 0 ? void 0 : prev.unitId) === (aft === null || aft === void 0 ? void 0 : aft.unitId) && (prev === null || prev === void 0 ? void 0 : prev.startIndex) === (aft === null || aft === void 0 ? void 0 : aft.startIndex)), pairwise()).subscribe(([preLink, link]) => {
+			if (link) {
+				if (link.unitId === this._context.unitId) this._docRenderController.reRender(link.unitId);
+			} else if (preLink && preLink.unitId === this._context.unitId) this._docRenderController.reRender(preLink.unitId);
+		}));
+	}
+};
+DocHyperLinkRenderController = __decorate([
+	__decorateParam(1, Inject(DocInterceptorService)),
+	__decorateParam(2, Inject(DocHyperLinkPopupService)),
+	__decorateParam(3, Inject(DocRenderController))
+], DocHyperLinkRenderController);
+
+//#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,
+		title: "docLink.menu.tooltip",
+		tooltip: "docLink.menu.tooltip",
+		hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC),
+		disabled$: new Observable(function(subscribe) {
+			const observer = accessor.get(DocSelectionManagerService).textSelection$.pipe(debounceTime(16)).subscribe(() => {
+				subscribe.next(shouldDisableAddLink(accessor));
+			});
+			return () => {
+				observer.unsubscribe();
+			};
+		})
+	};
+}
+const addLinkShortcut = {
+	id: ShowDocHyperLinkEditPopupOperation.id,
+	binding: MetaKeys.CTRL_COMMAND | KeyCode.K,
+	description: "docLink.menu.tooltip",
+	preconditions: whenDocAndEditorFocused
+};
+
+//#endregion
+//#region src/menu/schema.ts
+const menuSchema = {
+	[RibbonInsertGroup.MEDIA]: { [ShowDocHyperLinkEditPopupOperation.id]: {
+		order: 1,
+		menuItemFactory: AddHyperLinkMenuItemFactory
+	} },
+	[ContextMenuPosition.MAIN_AREA]: { [ContextMenuGroup.DATA]: { [ShowDocHyperLinkEditPopupOperation.id]: {
+		order: 0,
+		menuItemFactory: AddHyperLinkMenuItemFactory
+	} } }
+};
+
+//#endregion
+//#region src/controllers/ui.controller.ts
+let DocHyperLinkUIController = class DocHyperLinkUIController extends Disposable {
+	constructor(_componentManager, _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,
+			UpdateDocHyperLinkCommand,
+			DeleteDocHyperLinkCommand,
+			ShowDocHyperLinkEditPopupOperation,
+			ToggleDocHyperLinkInfoPopupOperation,
+			ClickDocHyperLinkOperation
+		].forEach((command) => {
+			this._commandService.registerCommand(command);
+		});
+	}
+	_initShortcut() {
+		[addLinkShortcut].forEach((shortcut) => {
+			this._shortcutService.registerShortcut(shortcut);
+		});
+	}
+	_initMenus() {
+		this._menuManagerService.mergeMenu(menuSchema);
+	}
+};
+DocHyperLinkUIController = __decorate([
+	__decorateParam(0, Inject(ComponentManager)),
+	__decorateParam(1, ICommandService),
+	__decorateParam(2, IMenuManagerService),
+	__decorateParam(3, IShortcutService)
+], DocHyperLinkUIController);
+
+//#endregion
+//#region src/types/const/index.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 DOC_HYPER_LINK_UI_PLUGIN = "DOC_HYPER_LINK_UI_PLUGIN";
+
+//#endregion
+//#region src/plugin.ts
+let UniverDocsHyperLinkUIPlugin = class UniverDocsHyperLinkUIPlugin 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() {
+		[
+			[DocHyperLinkPopupService],
+			[DocHyperLinkUIController],
+			[DocHyperLinkSelectionController]
+		].forEach((dep) => {
+			this._injector.add(dep);
+		});
+		this._injector.get(DocHyperLinkUIController);
+	}
+	onReady() {
+		this._injector.get(DocHyperLinkSelectionController);
+	}
+	onRendered() {
+		this._initRenderModule();
+	}
+	_initRenderModule() {
+		[[DocHyperLinkRenderController], [DocHyperLinkEventRenderController]].forEach((dep) => {
+			this._renderManagerSrv.registerRenderModule(UniverInstanceType.UNIVER_DOC, dep);
+		});
+	}
+};
+_defineProperty(UniverDocsHyperLinkUIPlugin, "pluginName", DOC_HYPER_LINK_UI_PLUGIN);
+_defineProperty(UniverDocsHyperLinkUIPlugin, "packageName", name);
+_defineProperty(UniverDocsHyperLinkUIPlugin, "version", version);
+_defineProperty(UniverDocsHyperLinkUIPlugin, "type", UniverInstanceType.UNIVER_DOC);
+UniverDocsHyperLinkUIPlugin = __decorate([
+	DependentOn(UniverDocsHyperLinkPlugin),
+	__decorateParam(1, Inject(Injector)),
+	__decorateParam(2, IRenderManagerService),
+	__decorateParam(3, IConfigService)
+], UniverDocsHyperLinkUIPlugin);
+
+//#endregion
+export { UniverDocsHyperLinkUIPlugin };