@univerjs/docs-quick-insert-ui 0.20.1 → 0.21.0-insiders.20260422-d7fcb4d

package/lib/cjs/index.js

@@ -1 +1,1083 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require(`@univerjs/core`),t=require(`@univerjs/docs`),n=require(`@univerjs/docs-ui`),r=require(`@univerjs/ui`),i=require(`@univerjs/engine-render`),a=require(`rxjs`),o=require(`react`),s=require(`react/jsx-runtime`),c=require(`@univerjs/design`),l=require(`@univerjs/docs-drawing-ui`),u=require(`@univerjs/icons`),d=require(`@univerjs/docs-drawing`),f=require(`@univerjs/drawing`),p=require(`@univerjs/drawing-ui`);const m={id:`doc.command.delete-search-key`,type:e.CommandType.COMMAND,handler:(t,r)=>{let i=t.get(e.ICommandService),{start:a,end:o}=r;return i.syncExecuteCommand(n.CutContentCommand.id,{segmentId:``,textRanges:[{startOffset:a,endOffset:a,collapsed:!0}],selections:[{startOffset:a,endOffset:o,collapsed:!1,direction:e.RANGE_DIRECTION.FORWARD}]})}},h=`docs.quick.insert.keyword-input-placeholder`;function g(e,t){if(typeof document>`u`)return e.length*11;let n=document.createElement(`canvas`).getContext(`2d`);return n?(n.font=t,Math.ceil(n.measureText(e).width)):e.length*11}const _=({popup:t})=>{var n,a,c,l,u,d,f,p,m,h,_;let v=(0,r.useDependency)(e.LocaleService).t(`docQuickInsert.keywordInputPlaceholder`),y=(0,i.ptToPixel)((n=(a=t.extraProps)==null?void 0:a.fontSize)==null?11:n),b=(c=(l=t.extraProps)==null?void 0:l.fontString)==null?`${y}px sans-serif`:c,x=(u=(d=t.extraProps)==null?void 0:d.ascent)==null?y:u,S=Math.max((f=(p=t.extraProps)==null?void 0:p.contentHeight)==null?y:f,y),C=(0,o.useMemo)(()=>g(v,b),[b,v]);return(0,s.jsx)(`div`,{className:`univer-select-none univer-font-normal univer-text-gray-500 univer-transition-colors dark:!univer-text-gray-400`,children:(0,s.jsx)(`svg`,{width:C,height:S,viewBox:`0 0 ${C} ${S}`,style:{overflow:`visible`,display:`block`},children:(0,s.jsx)(`text`,{x:0,y:x,fill:`currentColor`,style:{font:b,fontFamily:(m=t.extraProps)==null?void 0:m.fontFamily,fontStyle:(h=t.extraProps)==null?void 0:h.fontStyle,fontWeight:(_=t.extraProps)==null?void 0:_.fontWeight},children:v})})})};_.componentKey=h;function v(e){return`children`in e}function y(e){return e.flatMap(e=>v(e)?y(e.children):e)}function b(e){return y(e).length}function x(e){let{menus:t,focusedMenuIndex:n,focusedMenuRef:r,menuNodeMapRef:i,componentManager:a,onFocusedMenuIndexChange:l,onSelect:u}=e,d=(0,o.useMemo)(()=>y(t),[t]);(0,o.useEffect)(()=>{var e,t;let a=Number.isNaN(n)||(e=d[n])==null?null:e;r.current=a,a&&((t=i.current.get(a.id))==null||t.scrollIntoView({block:`nearest`}))},[d,n,r,i]);let f=(0,o.useRef)(0);f.current=0;function p(e){return e.map((t,r)=>{let o=t.icon,d=o?a.get(o):null;if(v(t))return(0,s.jsxs)(`div`,{className:(0,c.clsx)(`univer-grid univer-gap-1 univer-py-1`,r!==e.length-1&&c.borderBottomClassName),children:[(0,s.jsxs)(`div`,{className:`univer-box-border univer-inline-flex univer-items-center univer-gap-2 univer-px-2 univer-text-xs univer-font-semibold univer-text-gray-600 dark:!univer-text-gray-300`,children:[d&&(0,s.jsx)(`span`,{className:`univer-inline-flex univer-text-base`,children:(0,s.jsx)(d,{})}),(0,s.jsx)(`span`,{children:t.title})]}),(0,s.jsx)(`div`,{className:`univer-grid univer-gap-1`,children:p(t.children)})]},t.id);let m=f.current,h=n===m;return f.current+=1,(0,s.jsx)(`div`,{ref:e=>{if(e){i.current.set(t.id,e);return}i.current.delete(t.id)},role:`button`,tabIndex:-1,className:(0,c.clsx)(`univer-relative univer-box-border univer-flex univer-min-h-8 univer-w-full univer-cursor-pointer univer-items-center univer-justify-between univer-gap-3 univer-rounded-md univer-border-none univer-bg-transparent univer-px-2 univer-text-left univer-text-sm univer-text-gray-900 univer-outline-none hover:univer-bg-gray-50 dark:!univer-text-white dark:hover:!univer-bg-gray-600`,{"hover:univer-bg-transparent":!h,"univer-bg-gray-50 dark:!univer-bg-gray-600":h}),onMouseEnter:()=>l(m),onMouseLeave:()=>l(NaN),onClick:()=>u(t),children:(0,s.jsxs)(`div`,{className:`univer-inline-flex univer-w-full univer-items-center univer-gap-2`,children:[d&&(0,s.jsx)(`span`,{className:`univer-inline-flex univer-text-base`,children:(0,s.jsx)(d,{})}),(0,s.jsx)(c.Tooltip,{showIfEllipsis:!0,title:t.title,placement:`right`,children:(0,s.jsx)(`span`,{className:`univer-truncate`,children:t.title})})]})},t.id)})}return(0,s.jsx)(`div`,{className:(0,c.clsx)(`univer-box-border univer-grid univer-max-h-[360px] univer-gap-1 univer-overflow-y-auto univer-overflow-x-hidden univer-overscroll-contain univer-rounded-md univer-bg-white univer-px-2 univer-py-1 univer-text-sm univer-text-gray-900 univer-shadow-md dark:!univer-bg-gray-700 dark:!univer-text-white`,c.borderClassName,c.scrollbarClassName),onWheel:e=>e.stopPropagation(),children:p(t)})}const S=`docs.quick.insert.placeholder`,C=()=>(0,s.jsx)(`div`,{className:`univer-flex univer-h-full univer-items-center univer-justify-center univer-rounded-lg univer-bg-white univer-px-12 univer-py-6 univer-text-gray-400 univer-shadow-lg`,children:(0,s.jsx)(`span`,{children:(0,r.useDependency)(e.LocaleService).t(`docQuickInsert.placeholder`)})});C.componentKey=S;function w(e,t){return e.map(e=>({...e})).filter(e=>{if(`children`in e)return e.children=w(e.children,t),e.children.length>0;let n=e.keywords;return n?n.some(e=>e.includes(t)):e.title.toLowerCase().includes(t)})}function T(e,t){return e.map(e=>{let n={...e};return`children`in n&&(n.children=T(n.children,t)),n.title=t.t(n.title),`keywords`in n&&(n.keywords=n.keywords.concat(n.title).map(e=>e.toLowerCase())),n})}const E=[r.KeyCode.ARROW_UP,r.KeyCode.ARROW_DOWN,r.KeyCode.ENTER],D=()=>{let t=(0,r.useDependency)(e.LocaleService),n=(0,r.useDependency)(F),i=(0,r.useDependency)(r.ComponentManager),a=(0,r.useDependency)(r.IShortcutService),c=(0,r.useDependency)(e.ICommandService),l=(0,o.useMemo)(()=>(0,e.generateRandomId)(),[]),[u,d]=(0,o.useState)(0),f=(0,o.useRef)(null),p=(0,r.useObservable)(n.filterKeyword$,``),m=(0,r.useObservable)(n.editPopup$),h=(0,r.useObservable)(m==null?void 0:m.popup.menus$,[]),g=(0,o.useMemo)(()=>T(h,t),[h]),[_,v]=(0,o.useState)(()=>w(g,p.toLowerCase())),y=(0,o.useMemo)(()=>b(_),[_]),S=(0,o.useRef)(y);(0,o.useEffect)(()=>{S.current=y},[y]),(0,o.useEffect)(()=>{let e=requestIdleCallback(()=>{v(w(g,p.toLowerCase()))});return()=>{cancelIdleCallback(e)}},[g,p]);let D=e=>{n.emitMenuSelected(e),c.executeCommand(L.id)};(0,o.useEffect)(()=>{let t=new e.DisposableCollection;a.getAllShortcuts().filter(e=>e.binding&&E.includes(e.binding)).forEach(n=>{let r=n.preconditions;n.preconditions=()=>!1,t.add((0,e.toDisposable)(()=>{n.preconditions=r}))});let n={id:`quick.insert.popup.enter.${l}`,type:e.CommandType.OPERATION,handler:()=>{let e=f.current;e&&D(e)}},i={id:`quick.insert.popup.move.cursor.up.${l}`,type:e.CommandType.OPERATION,handler:()=>{d(e=>{if(S.current<=0)return 0;let t=e-1;return t>=0?t:S.current-1})}},o={id:`quick.insert.popup.move.cursor.down.${l}`,type:e.CommandType.OPERATION,handler:()=>{d(e=>{if(S.current<=0)return 0;let t=e+1;return t<=S.current-1?t:0})}};return t.add(c.registerCommand(i)),t.add(c.registerCommand(o)),t.add(c.registerCommand(n)),t.add(a.registerShortcut({priority:1e3,id:i.id,binding:r.KeyCode.ARROW_UP,preconditions:()=>!0,staticParameters:{direction:e.Direction.UP}})),t.add(a.registerShortcut({priority:1e3,id:o.id,binding:r.KeyCode.ARROW_DOWN,preconditions:()=>!0,staticParameters:{direction:e.Direction.DOWN}})),t.add(a.registerShortcut({priority:1e3,id:n.id,binding:r.KeyCode.ENTER,preconditions:()=>!0})),()=>{t.dispose()}},[c,l,a]),(0,o.useEffect)(()=>{d(0)},[_]);let O=(0,o.useRef)(new Map);(0,o.useEffect)(()=>()=>{O.current.clear()},[]);let k=_.length>0,A=(m==null?void 0:m.popup.Placeholder)||i.get(C.componentKey);return(0,s.jsx)(`div`,{className:`univer-mt-2`,children:k?(0,s.jsx)(x,{menus:_,focusedMenuIndex:u,focusedMenuRef:f,menuNodeMapRef:O,componentManager:i,onFocusedMenuIndexChange:d,onSelect:D}):A&&(0,s.jsx)(A,{})})};D.componentKey=`docs.quick.insert.popup`;function O(e){"@babel/helpers - typeof";return O=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},O(e)}function k(e,t){if(O(e)!=`object`||!e)return e;var n=e[Symbol.toPrimitive];if(n!==void 0){var r=n.call(e,t||`default`);if(O(r)!=`object`)return r;throw TypeError(`@@toPrimitive must return a primitive value.`)}return(t===`string`?String:Number)(e)}function A(e){var t=k(e,`string`);return O(t)==`symbol`?t:t+``}function j(e,t,n){return(t=A(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function M(e,t){return function(n,r){t(n,r,e)}}function N(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}const P={dispose:()=>{}};let F=class extends e.Disposable{get popups(){return Array.from(this._popups)}get editPopup(){return this._editPopup$.value}get isComposing(){return this._isComposing$.value}setIsComposing(e){this._isComposing$.next(e)}get inputOffset(){return this._inputOffset$.value}setInputOffset(e){this._inputOffset$.next(e)}getDocEventManagerService(e){var t;return(t=this._renderManagerService.getRenderById(e))==null?void 0:t.with(n.DocEventManagerService)}constructor(t,n,r,i,o){super(),this._docCanvasPopupManagerService=t,this._univerInstanceService=n,this._commandService=r,this._renderManagerService=i,this._docSelectionManagerService=o,j(this,`_popups`,new Set),j(this,`_editPopup$`,new a.BehaviorSubject(void 0)),j(this,`editPopup$`,this._editPopup$.asObservable()),j(this,`_isComposing$`,new a.BehaviorSubject(!1)),j(this,`isComposing$`,this._isComposing$.asObservable()),j(this,`_inputOffset$`,new a.BehaviorSubject({start:0,end:0})),j(this,`inputOffset$`,this._inputOffset$.asObservable()),j(this,`filterKeyword$`,void 0),j(this,`_menuSelectedCallbacks`,new Set),j(this,`_inputPlaceholderRenderRoot`,null),this.disposeWithMe(this._editPopup$);let s=(t,n)=>{var r;return(r=this._univerInstanceService.getCurrentUnitOfType(e.UniverInstanceType.UNIVER_DOC))==null||(r=r.getBody())==null?void 0:r.dataStream.slice(t,n)},c=``;this.filterKeyword$=this._inputOffset$.pipe((0,a.map)(e=>{var t;let n=s(e.start,e.end);return(t=n==null?void 0:n.slice(1))==null?``:t}),(0,a.distinctUntilChanged)(),(0,a.tap)(e=>{c=e})),this.disposeWithMe((0,a.combineLatest)([this.filterKeyword$.pipe((0,a.tap)(e=>{if(e.length>0){var t;(t=this._inputPlaceholderRenderRoot)==null||(t=t.unmount)==null||t.dispose()}else{var n;(n=this._inputPlaceholderRenderRoot)==null||n.mount()}})),this.isComposing$.pipe((0,a.tap)(e=>{if(e){var t;(t=this._inputPlaceholderRenderRoot)==null||(t=t.unmount)==null||t.dispose()}else{var n;c.length<=0&&((n=this._inputPlaceholderRenderRoot)==null||n.mount())}})),this.editPopup$.pipe((0,a.tap)(e=>{if(!e){var t;(t=this._inputPlaceholderRenderRoot)==null||(t=t.unmount)==null||t.dispose(),this._inputPlaceholderRenderRoot=null}}))]).subscribe())}resolvePopup(e){return Array.from(this._popups).find(t=>t.keyword===e)}registerPopup(e){return this._popups.add(e),()=>{this._popups.delete(e)}}_createInputPlaceholderRenderRoot(e){return{isMounted:!1,mount(){if(this.isMounted)return;this.isMounted=!0;let t=e();this.unmount={dispose:()=>{t.dispose(),this.isMounted=!1}}}}}_getParagraphBound(e,t){var n,r;let i=this._univerInstanceService.getUnit(e),a=i==null||(n=i.getBody())==null||(n=n.paragraphs)==null?void 0:n.find(e=>e.startIndex>t);if(!a)return null;let o=this.getDocEventManagerService(e);return(r=o==null?void 0:o.findParagraphBoundByIndex(a.startIndex))==null?null:r}_getKeywordPlaceholderAnchorRect(e,t,r,i){let a=t.findNodePositionByCharIndex(r.startOffset,!0,r.segmentId,r.segmentPage);if(!a)return i;let o=e.getOffsetConfig(),{contentBoxPointGroup:s}=new n.NodePositionConvertToCursor(o,t).getRangePointData(a,a);if(s.length===0)return i;let c=(0,n.getAnchorBounding)(s),l=c.left+o.docsLeft,u=c.top+o.docsTop;return{left:l,right:l,top:u,bottom:u+c.height}}_getKeywordPlaceholderExtraProps(e){var t,n,r,i,a,o,s,c,l,u,d,f,p;return{fontSize:(t=e.ts)==null?void 0:t.fs,fontString:(n=e.fontStyle)==null?void 0:n.fontString,fontFamily:(r=(i=(a=e.fontStyle)==null?void 0:a.fontFamily)==null?(o=e.ts)==null?void 0:o.ff:i)==null?void 0:r,fontStyle:(s=e.ts)!=null&&s.it?`italic`:`normal`,fontWeight:(c=e.ts)!=null&&c.bl?`bold`:`normal`,ascent:(l=e.bBox)==null?void 0:l.ba,contentHeight:((u=(d=e.bBox)==null?void 0:d.ba)==null?0:u)+((f=(p=e.bBox)==null?void 0:p.bd)==null?0:f)||void 0}}_mountInputPlaceholder(e,n){let r=this._renderManagerService.getRenderById(e),i=r==null?void 0:r.with(t.DocSkeletonManagerService),a=this._docSelectionManagerService.getActiveTextRange();if(!r||!i||!a)return P;let o=i.getSkeleton(),s=o.findNodeByCharIndex(a.startOffset,a.segmentId,a.segmentPage);if((s==null?void 0:s.content)!==`\r`||!s)return P;let c=r.mainComponent,l=this._getKeywordPlaceholderAnchorRect(c,o,a,n),u=this._getKeywordPlaceholderExtraProps(s),d=this._docCanvasPopupManagerService.attachPopupToRect(l,{componentKey:_.componentKey,extraProps:u,onClickOutside:()=>{d.dispose()},direction:`horizontal`},e);return d}showPopup(e){let{popup:t,index:n,unitId:r}=e;this.closePopup();let i=this._getParagraphBound(r,n);if(!i)return;this._inputPlaceholderRenderRoot=this._createInputPlaceholderRenderRoot(()=>this._mountInputPlaceholder(r,i.firstLine)),this._inputPlaceholderRenderRoot.mount();let a=this._docCanvasPopupManagerService.attachPopupToRect(i.firstLine,{componentKey:D.componentKey,onClickOutside:()=>{this.closePopup()},direction:`bottom`},r);this._editPopup$.next({disposable:a,popup:t,anchor:n,unitId:r})}closePopup(){this.editPopup&&(this.editPopup.disposable.dispose(),this._editPopup$.next(null))}onMenuSelected(e){return this._menuSelectedCallbacks.add(e),()=>{this._menuSelectedCallbacks.delete(e)}}emitMenuSelected(e){let{start:t,end:n}=this.inputOffset;this._commandService.syncExecuteCommand(m.id,{start:t,end:n}),setTimeout(()=>{this._menuSelectedCallbacks.forEach(t=>t(e))},0)}};F=N([M(0,(0,e.Inject)(n.DocCanvasPopManagerService)),M(1,(0,e.Inject)(e.IUniverInstanceService)),M(2,(0,e.Inject)(e.ICommandService)),M(3,(0,e.Inject)(i.IRenderManagerService)),M(4,(0,e.Inject)(t.DocSelectionManagerService))],F);const I={type:e.CommandType.OPERATION,id:`doc.operation.show-quick-insert-popup`,handler(e,t){let n=e.get(F);return t?(n.showPopup(t),!0):!1}},L={type:e.CommandType.OPERATION,id:`doc.operation.close-quick-insert-popup`,handler(e){return e.get(F).closePopup(),!0}};let ee=function(e){return e.Basic=`quick.insert.group.basic`,e.Media=`quick.insert.group.media`,e}({});const R={id:`quick-insert.text.menu`,title:`docQuickInsert.menu.text`,icon:`TextIcon`,keywords:[`text`]},z={id:n.OrderListCommand.id,title:`docQuickInsert.menu.numberedList`,icon:`OrderIcon`,keywords:[`numbered`,`list`,`ordered`]},B={id:n.BulletListCommand.id,title:`docQuickInsert.menu.bulletedList`,icon:`UnorderIcon`,keywords:[`bulleted`,`list`,`unordered`]},V={id:n.HorizontalLineCommand.id,title:`docQuickInsert.menu.divider`,icon:`DividerIcon`,keywords:[`divider`,`line`,`separate`]},H={id:n.DocCreateTableOperation.id,title:`docQuickInsert.menu.table`,icon:`GridIcon`,keywords:[`table`,`grid`,`spreadsheet`]},U={id:l.InsertDocImageCommand.id,title:`docQuickInsert.menu.image`,icon:`AdditionAndSubtractionIcon`,keywords:[`image`,`picture`,`photo`]},W=[{title:`docQuickInsert.group.basics`,id:ee.Basic,children:[R,z,B,V,H,U]}],G=new Set([z.id,B.id,V.id,H.id,U.id]);let K=class extends e.Disposable{constructor(e,t,n,i,a){super(),this._commandService=e,this._textSelectionManagerService=t,this._docQuickInsertPopupService=n,this._shortcutService=i,this._univerInstanceService=a,this.disposeWithMe(this._shortcutService.registerShortcut({id:L.id,binding:r.KeyCode.ESC,preconditions:()=>!!this._docQuickInsertPopupService.editPopup,priority:1e3})),this._initTrigger(),this._initMenuHandler()}_initTrigger(){this.disposeWithMe(this._commandService.onCommandExecuted(r=>{let{_docQuickInsertPopupService:i,_textSelectionManagerService:a,_commandService:o}=this,s=this._univerInstanceService.getCurrentUnitOfType(e.UniverInstanceType.UNIVER_DOC);if(!(s!=null&&s.getDisabled())){if(r.id===n.InsertCommand.id){let e=r.params;if(i.editPopup){i.setInputOffset({start:i.inputOffset.start,end:e.range.endOffset+1});return}let t=a.getActiveTextRange();if(!t)return;let n=i.resolvePopup(e.body.dataStream);if(!n||!(!n.preconditions||n.preconditions(e)))return;i.setInputOffset({start:t.startOffset-1,end:t.startOffset}),setTimeout(()=>{o.executeCommand(I.id,{index:t.startOffset-1,unitId:e.unitId,popup:n})},100)}if(r.id===n.IMEInputCommand.id){let e=r.params;!i.isComposing&&e.isCompositionStart&&i.setIsComposing(!0),i.isComposing&&e.isCompositionEnd&&i.setIsComposing(!1)}if(r.id===t.RichTextEditingMutation.id){let e=r.params;if(e.isCompositionEnd){var c;let t=(c=e.textRanges)==null||(c=c[0])==null?void 0:c.endOffset;t&&i.setInputOffset({start:i.inputOffset.start,end:t})}}if(r.id===n.DeleteCommand.id){let t=r.params;if(i.editPopup&&t.direction===e.DeleteDirection.LEFT){var l;let e=(l=t.len)==null?0:l;i.setInputOffset({start:i.inputOffset.start,end:t.range.endOffset-e})}}if(r.id===n.MoveCursorOperation.id){let t=r.params;(t.direction===e.Direction.LEFT||t.direction===e.Direction.RIGHT)&&i.editPopup&&o.executeCommand(L.id)}if(r.id===n.DeleteLeftCommand.id){let e=a.getActiveTextRange();if(!i.editPopup||!e)return;e.endOffset<=i.editPopup.anchor&&o.executeCommand(L.id)}}}))}_initMenuHandler(){this.disposeWithMe(this._docQuickInsertPopupService.onMenuSelected(e=>{e.id!==R.id&&G.has(e.id)&&this._commandService.executeCommand(e.id)}))}};K=N([M(0,e.ICommandService),M(1,(0,e.Inject)(t.DocSelectionManagerService)),M(2,(0,e.Inject)(F)),M(3,(0,e.Inject)(r.IShortcutService)),M(4,(0,e.Inject)(e.IUniverInstanceService))],K);let q=class extends e.Disposable{get popup(){return this._popup$.value}constructor(e,t,n,r){super(),this._context=e,this._docEventManagerService=t,this._docQuickInsertPopupService=n,this._docCanvasPopManagerService=r,j(this,`_popup$`,new a.BehaviorSubject(null)),j(this,`popup$`,this._popup$.asObservable()),this._init()}_init(){this.disposeWithMe((0,a.combineLatest)([this._docEventManagerService.hoverParagraphLeftRealTime$,this._docEventManagerService.hoverParagraphRealTime$]).subscribe(([e,t])=>{let n=e==null?t:e,r=this._context.unit.getDisabled();if(!n||r){this._hideMenu(!0);return}if(n.paragraphStart===n.paragraphEnd){var i;if(this._docQuickInsertPopupService.editPopup||n.startIndex===((i=this.popup)==null?void 0:i.startIndex))return;this._hideMenu(!0);let e=this._docCanvasPopManagerService.attachPopupToRect(n.firstLine,{componentKey:J,direction:`left-center`},this._context.unit.getUnitId());this._popup$.next({startIndex:n.startIndex,disposable:e})}else this._hideMenu(!0)}))}_hideMenu(e){this._docQuickInsertPopupService.editPopup||this.popup&&(e||this.popup.disposable.canDispose())&&(this.popup.disposable.dispose(),this._popup$.next(null))}};q=N([M(1,(0,e.Inject)(n.DocEventManagerService)),M(2,(0,e.Inject)(F)),M(3,(0,e.Inject)(n.DocCanvasPopManagerService))],q);const J=`doc.quick-insert.button`,Y=({className:n=``})=>{let l=(0,r.useDependency)(F),d=(0,r.useDependency)(e.IUniverInstanceService),f=(0,r.useDependency)(i.IRenderManagerService),p=(0,r.useObservable)((0,o.useMemo)(()=>d.getCurrentTypeOfUnit$(e.UniverInstanceType.UNIVER_DOC),[d])),m=p&&f.getRenderById(p.getUnitId()),h=m==null?void 0:m.with(q),g=(0,r.useDependency)(r.ILayoutService),_=(0,r.useDependency)(t.DocSelectionManagerService),v=(0,r.useObservable)(l.editPopup$),y=(0,r.useEvent)(()=>{var e;let t=h==null?void 0:h.popup;if(!t)return;let n=l.popups,r={keyword:``,menus$:(0,a.combineLatest)(n.map(e=>e.menus$)).pipe((0,a.map)(e=>e.flat()))};_.replaceDocRanges([{startOffset:t.startIndex,endOffset:t.startIndex}]),l.setInputOffset({start:t.startIndex-1,end:t.startIndex-1}),l.showPopup({popup:r,index:t.startIndex-1,unitId:(e=p==null?void 0:p.getUnitId())==null?``:e}),setTimeout(()=>{g.focus()})});return(0,s.jsx)(`div`,{className:(0,c.clsx)(`univer-mr-1 univer-flex univer-cursor-pointer univer-items-center univer-gap-2.5 univer-rounded-full univer-p-1.5 univer-shadow-sm hover:univer-bg-gray-100 dark:!univer-text-gray-200 dark:hover:!univer-bg-gray-700`,c.borderClassName,{"univer-bg-gray-100 dark:!univer-bg-gray-700":v,"univer-bg-white dark:!univer-bg-gray-900":!v},n),role:`button`,tabIndex:0,onClick:y,children:(0,s.jsx)(u.IncreaseIcon,{className:`univer-text-gray-800 dark:!univer-text-gray-200`})})};Y.componentKey=J;let X=class extends e.Disposable{constructor(e,t,n){super(),this._commandService=e,this._docQuickInsertPopupService=t,this._componentManager=n,this._initCommands(),this._initComponents(),this._initMenus()}_initCommands(){[m,I,L].forEach(e=>{this.disposeWithMe(this._commandService.registerCommand(e))})}_initComponents(){[[D.componentKey,D],[_.componentKey,_],[C.componentKey,C],[u.DividerIcon.displayName,u.DividerIcon],[u.TextIcon.displayName,u.TextIcon],[Y.componentKey,Y]].forEach(([e,t])=>{e&&this.disposeWithMe(this._componentManager.register(e,t))}),[{keyword:`/`,menus$:(0,a.of)(W),preconditions:e=>{var t;return((t=e.range.startNodePosition)==null?void 0:t.glyph)===0}}].forEach(e=>{this.disposeWithMe(this._docQuickInsertPopupService.registerPopup(e))})}_initMenus(){}};X=N([M(0,e.ICommandService),M(1,(0,e.Inject)(F)),M(2,(0,e.Inject)(r.ComponentManager))],X);var te=`@univerjs/docs-quick-insert-ui`,ne=`0.20.1`;const Z=`docs-quick-insert-ui.config`;Symbol(Z);const Q={};let $=class extends e.Plugin{constructor(t=Q,n,r,i){super(),this._config=t,this._injector=n,this._renderManagerSrv=r,this._configService=i;let{menu:a,...o}=(0,e.merge)({},Q,this._config);a&&this._configService.setConfig(`menu`,a,{merge:!0}),this._configService.setConfig(Z,o)}onStarting(){[[X],[K],[F]].forEach(e=>this._injector.add(e)),this._injector.get(X)}onRendered(){this._injector.get(K),this._injector.get(F),[[q]].forEach(t=>{this._renderManagerSrv.registerRenderModule(e.UniverInstanceType.UNIVER_DOC,t)})}};j($,`type`,e.UniverInstanceType.UNIVER_DOC),j($,`pluginName`,`DOC_QUICK_INSERT_UI_PLUGIN`),j($,`packageName`,te),j($,`version`,ne),$=N([(0,e.DependentOn)(p.UniverDrawingUIPlugin,f.UniverDrawingPlugin,l.UniverDocsDrawingUIPlugin,d.UniverDocsDrawingPlugin,r.UniverUIPlugin),M(1,(0,e.Inject)(e.Injector)),M(2,(0,e.Inject)(i.IRenderManagerService)),M(3,e.IConfigService)],$),Object.defineProperty(exports,`DocQuickInsertPopupService`,{enumerable:!0,get:function(){return F}}),Object.defineProperty(exports,`DocQuickInsertTriggerController`,{enumerable:!0,get:function(){return K}}),Object.defineProperty(exports,`DocQuickInsertUIController`,{enumerable:!0,get:function(){return X}}),exports.KeywordInputPlaceholderComponentKey=h,exports.QuickInsertPlaceholderComponentKey=S,Object.defineProperty(exports,`UniverDocsQuickInsertUIPlugin`,{enumerable:!0,get:function(){return $}});
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+let _univerjs_core = require("@univerjs/core");
+let _univerjs_docs = require("@univerjs/docs");
+let _univerjs_docs_ui = require("@univerjs/docs-ui");
+let _univerjs_ui = require("@univerjs/ui");
+let _univerjs_engine_render = require("@univerjs/engine-render");
+let rxjs = require("rxjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _univerjs_design = require("@univerjs/design");
+let _univerjs_docs_drawing_ui = require("@univerjs/docs-drawing-ui");
+let _univerjs_icons = require("@univerjs/icons");
+let _univerjs_docs_drawing = require("@univerjs/docs-drawing");
+let _univerjs_drawing = require("@univerjs/drawing");
+let _univerjs_drawing_ui = require("@univerjs/drawing-ui");
+
+//#region src/commands/commands/doc-quick-insert.command.ts
+const DeleteSearchKeyCommand = {
+	id: "doc.command.delete-search-key",
+	type: _univerjs_core.CommandType.COMMAND,
+	handler: (accessor, params) => {
+		const commandService = accessor.get(_univerjs_core.ICommandService);
+		const { start, end } = params;
+		return commandService.syncExecuteCommand(_univerjs_docs_ui.CutContentCommand.id, {
+			segmentId: "",
+			textRanges: [{
+				startOffset: start,
+				endOffset: start,
+				collapsed: true
+			}],
+			selections: [{
+				startOffset: start,
+				endOffset: end,
+				collapsed: false,
+				direction: _univerjs_core.RANGE_DIRECTION.FORWARD
+			}]
+		});
+	}
+};
+
+//#endregion
+//#region src/views/KeywordInputPlaceholder.tsx
+const KeywordInputPlaceholderComponentKey = "docs.quick.insert.keyword-input-placeholder";
+const DEFAULT_FONT_SIZE = 11;
+function measureTextWidth(text, font) {
+	if (typeof document === "undefined") return text.length * DEFAULT_FONT_SIZE;
+	const context = document.createElement("canvas").getContext("2d");
+	if (!context) return text.length * DEFAULT_FONT_SIZE;
+	context.font = font;
+	return Math.ceil(context.measureText(text).width);
+}
+const KeywordInputPlaceholder = ({ popup }) => {
+	var _popup$extraProps$fon, _popup$extraProps, _popup$extraProps$fon2, _popup$extraProps2, _popup$extraProps$asc, _popup$extraProps3, _popup$extraProps$con, _popup$extraProps4, _popup$extraProps5, _popup$extraProps6, _popup$extraProps7;
+	const placeholder = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService).t("docQuickInsert.keywordInputPlaceholder");
+	const fontSizePx = (0, _univerjs_engine_render.ptToPixel)((_popup$extraProps$fon = (_popup$extraProps = popup.extraProps) === null || _popup$extraProps === void 0 ? void 0 : _popup$extraProps.fontSize) !== null && _popup$extraProps$fon !== void 0 ? _popup$extraProps$fon : DEFAULT_FONT_SIZE);
+	const fontString = (_popup$extraProps$fon2 = (_popup$extraProps2 = popup.extraProps) === null || _popup$extraProps2 === void 0 ? void 0 : _popup$extraProps2.fontString) !== null && _popup$extraProps$fon2 !== void 0 ? _popup$extraProps$fon2 : `${fontSizePx}px sans-serif`;
+	const ascent = (_popup$extraProps$asc = (_popup$extraProps3 = popup.extraProps) === null || _popup$extraProps3 === void 0 ? void 0 : _popup$extraProps3.ascent) !== null && _popup$extraProps$asc !== void 0 ? _popup$extraProps$asc : fontSizePx;
+	const contentHeight = Math.max((_popup$extraProps$con = (_popup$extraProps4 = popup.extraProps) === null || _popup$extraProps4 === void 0 ? void 0 : _popup$extraProps4.contentHeight) !== null && _popup$extraProps$con !== void 0 ? _popup$extraProps$con : fontSizePx, fontSizePx);
+	const textWidth = (0, react.useMemo)(() => measureTextWidth(placeholder, fontString), [fontString, placeholder]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "univer-select-none univer-font-normal univer-text-gray-500 univer-transition-colors dark:!univer-text-gray-400",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+			width: textWidth,
+			height: contentHeight,
+			viewBox: `0 0 ${textWidth} ${contentHeight}`,
+			style: {
+				overflow: "visible",
+				display: "block"
+			},
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("text", {
+				x: 0,
+				y: ascent,
+				fill: "currentColor",
+				style: {
+					font: fontString,
+					fontFamily: (_popup$extraProps5 = popup.extraProps) === null || _popup$extraProps5 === void 0 ? void 0 : _popup$extraProps5.fontFamily,
+					fontStyle: (_popup$extraProps6 = popup.extraProps) === null || _popup$extraProps6 === void 0 ? void 0 : _popup$extraProps6.fontStyle,
+					fontWeight: (_popup$extraProps7 = popup.extraProps) === null || _popup$extraProps7 === void 0 ? void 0 : _popup$extraProps7.fontWeight
+				},
+				children: placeholder
+			})
+		})
+	});
+};
+KeywordInputPlaceholder.componentKey = KeywordInputPlaceholderComponentKey;
+
+//#endregion
+//#region src/views/QuickInsertMenu.tsx
+function isMenuGroup(menu) {
+	return "children" in menu;
+}
+function flattenMenuItems(menus) {
+	return menus.flatMap((menu) => {
+		if (isMenuGroup(menu)) return flattenMenuItems(menu.children);
+		return menu;
+	});
+}
+function getQuickInsertMenuLeafCount(menus) {
+	return flattenMenuItems(menus).length;
+}
+function QuickInsertMenu(props) {
+	const { menus, focusedMenuIndex, focusedMenuRef, menuNodeMapRef, componentManager, onFocusedMenuIndexChange, onSelect } = props;
+	const flatMenus = (0, react.useMemo)(() => flattenMenuItems(menus), [menus]);
+	(0, react.useEffect)(() => {
+		var _flatMenus$focusedMen, _menuNodeMapRef$curre;
+		const focusedMenu = Number.isNaN(focusedMenuIndex) ? null : (_flatMenus$focusedMen = flatMenus[focusedMenuIndex]) !== null && _flatMenus$focusedMen !== void 0 ? _flatMenus$focusedMen : null;
+		focusedMenuRef.current = focusedMenu;
+		if (!focusedMenu) return;
+		(_menuNodeMapRef$curre = menuNodeMapRef.current.get(focusedMenu.id)) === null || _menuNodeMapRef$curre === void 0 || _menuNodeMapRef$curre.scrollIntoView({ block: "nearest" });
+	}, [
+		flatMenus,
+		focusedMenuIndex,
+		focusedMenuRef,
+		menuNodeMapRef
+	]);
+	const itemIndexRef = (0, react.useRef)(0);
+	itemIndexRef.current = 0;
+	function renderMenus(currentMenus) {
+		return currentMenus.map((menu, index) => {
+			const iconKey = menu.icon;
+			const Icon = iconKey ? componentManager.get(iconKey) : null;
+			if (isMenuGroup(menu)) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: (0, _univerjs_design.clsx)("univer-grid univer-gap-1 univer-py-1", index !== currentMenus.length - 1 && _univerjs_design.borderBottomClassName),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "univer-box-border univer-inline-flex univer-items-center univer-gap-2 univer-px-2 univer-text-xs univer-font-semibold univer-text-gray-600 dark:!univer-text-gray-300",
+					children: [Icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "univer-inline-flex univer-text-base",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {})
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: menu.title })]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "univer-grid univer-gap-1",
+					children: renderMenus(menu.children)
+				})]
+			}, menu.id);
+			const currentMenuIndex = itemIndexRef.current;
+			const isFocused = focusedMenuIndex === currentMenuIndex;
+			itemIndexRef.current += 1;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				ref: (node) => {
+					if (node) {
+						menuNodeMapRef.current.set(menu.id, node);
+						return;
+					}
+					menuNodeMapRef.current.delete(menu.id);
+				},
+				role: "button",
+				tabIndex: -1,
+				className: (0, _univerjs_design.clsx)("univer-relative univer-box-border univer-flex univer-min-h-8 univer-w-full univer-cursor-pointer univer-items-center univer-justify-between univer-gap-3 univer-rounded-md univer-border-none univer-bg-transparent univer-px-2 univer-text-left univer-text-sm univer-text-gray-900 univer-outline-none hover:univer-bg-gray-50 dark:!univer-text-white dark:hover:!univer-bg-gray-600", {
+					"hover:univer-bg-transparent": !isFocused,
+					"univer-bg-gray-50 dark:!univer-bg-gray-600": isFocused
+				}),
+				onMouseEnter: () => onFocusedMenuIndexChange(currentMenuIndex),
+				onMouseLeave: () => onFocusedMenuIndexChange(NaN),
+				onClick: () => onSelect(menu),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "univer-inline-flex univer-w-full univer-items-center univer-gap-2",
+					children: [Icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "univer-inline-flex univer-text-base",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {})
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Tooltip, {
+						showIfEllipsis: true,
+						title: menu.title,
+						placement: "right",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "univer-truncate",
+							children: menu.title
+						})
+					})]
+				})
+			}, menu.id);
+		});
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, _univerjs_design.clsx)("univer-box-border univer-grid univer-max-h-[360px] univer-gap-1 univer-overflow-y-auto univer-overflow-x-hidden univer-overscroll-contain univer-rounded-md univer-bg-white univer-px-2 univer-py-1 univer-text-sm univer-text-gray-900 univer-shadow-md dark:!univer-bg-gray-700 dark:!univer-text-white", _univerjs_design.borderClassName, _univerjs_design.scrollbarClassName),
+		onWheel: (event) => event.stopPropagation(),
+		children: renderMenus(menus)
+	});
+}
+
+//#endregion
+//#region src/views/QuickInsertPlaceholder.tsx
+/**
+* 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 QuickInsertPlaceholderComponentKey = "docs.quick.insert.placeholder";
+const QuickInsertPlaceholder = () => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "univer-flex univer-h-full univer-items-center univer-justify-center univer-rounded-lg univer-bg-white univer-px-12 univer-py-6 univer-text-gray-400 univer-shadow-lg",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService).t("docQuickInsert.placeholder") })
+	});
+};
+QuickInsertPlaceholder.componentKey = QuickInsertPlaceholderComponentKey;
+
+//#endregion
+//#region src/views/QuickInsertPopup.tsx
+function filterMenusByKeyword(menus, keyword) {
+	return menus.map((menu) => ({ ...menu })).filter((menu) => {
+		if ("children" in menu) {
+			menu.children = filterMenusByKeyword(menu.children, keyword);
+			return menu.children.length > 0;
+		}
+		const keywords = menu.keywords;
+		if (keywords) return keywords.some((word) => word.includes(keyword));
+		return menu.title.toLowerCase().includes(keyword);
+	});
+}
+function translateMenus(menus, localeService) {
+	return menus.map((_menu) => {
+		const menu = { ..._menu };
+		if ("children" in menu) menu.children = translateMenus(menu.children, localeService);
+		menu.title = localeService.t(menu.title);
+		if ("keywords" in menu) menu.keywords = menu.keywords.concat(menu.title).map((word) => word.toLowerCase());
+		return menu;
+	});
+}
+const interceptKeys = [
+	_univerjs_ui.KeyCode.ARROW_UP,
+	_univerjs_ui.KeyCode.ARROW_DOWN,
+	_univerjs_ui.KeyCode.ENTER
+];
+const QuickInsertPopup = () => {
+	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
+	const docQuickInsertPopupService = (0, _univerjs_ui.useDependency)(DocQuickInsertPopupService);
+	const componentManager = (0, _univerjs_ui.useDependency)(_univerjs_ui.ComponentManager);
+	const shortcutService = (0, _univerjs_ui.useDependency)(_univerjs_ui.IShortcutService);
+	const commandService = (0, _univerjs_ui.useDependency)(_univerjs_core.ICommandService);
+	const id = (0, react.useMemo)(() => (0, _univerjs_core.generateRandomId)(), []);
+	const [focusedMenuIndex, setFocusedMenuIndex] = (0, react.useState)(0);
+	const focusedMenuRef = (0, react.useRef)(null);
+	const filterKeyword = (0, _univerjs_ui.useObservable)(docQuickInsertPopupService.filterKeyword$, "");
+	const currentPopup = (0, _univerjs_ui.useObservable)(docQuickInsertPopupService.editPopup$);
+	const menus = (0, _univerjs_ui.useObservable)(currentPopup === null || currentPopup === void 0 ? void 0 : currentPopup.popup.menus$, []);
+	const translatedMenus = (0, react.useMemo)(() => {
+		return translateMenus(menus, localeService);
+	}, [menus]);
+	const [filteredMenus, setFilteredMenus] = (0, react.useState)(() => {
+		return filterMenusByKeyword(translatedMenus, filterKeyword.toLowerCase());
+	});
+	const filteredMenuCount = (0, react.useMemo)(() => getQuickInsertMenuLeafCount(filteredMenus), [filteredMenus]);
+	const filteredMenuCountRef = (0, react.useRef)(filteredMenuCount);
+	(0, react.useEffect)(() => {
+		filteredMenuCountRef.current = filteredMenuCount;
+	}, [filteredMenuCount]);
+	(0, react.useEffect)(() => {
+		const id = requestIdleCallback(() => {
+			setFilteredMenus(filterMenusByKeyword(translatedMenus, filterKeyword.toLowerCase()));
+		});
+		return () => {
+			cancelIdleCallback(id);
+		};
+	}, [translatedMenus, filterKeyword]);
+	const handleMenuSelect = (menu) => {
+		docQuickInsertPopupService.emitMenuSelected(menu);
+		commandService.executeCommand(CloseQuickInsertPopupOperation.id);
+	};
+	(0, react.useEffect)(() => {
+		/** Use up or down to navigate the focused menu instead of moving the cursor in documents. */
+		const disposableCollection = new _univerjs_core.DisposableCollection();
+		shortcutService.getAllShortcuts().filter((item) => item.binding && interceptKeys.includes(item.binding)).forEach((item) => {
+			const rawPreconditions = item.preconditions;
+			item.preconditions = () => false;
+			disposableCollection.add((0, _univerjs_core.toDisposable)(() => {
+				item.preconditions = rawPreconditions;
+			}));
+		});
+		const enterCommand = {
+			id: `quick.insert.popup.enter.${id}`,
+			type: _univerjs_core.CommandType.OPERATION,
+			handler: () => {
+				const menu = focusedMenuRef.current;
+				if (menu) handleMenuSelect(menu);
+			}
+		};
+		const moveCursorUpCommand = {
+			id: `quick.insert.popup.move.cursor.up.${id}`,
+			type: _univerjs_core.CommandType.OPERATION,
+			handler: () => {
+				setFocusedMenuIndex((index) => {
+					if (filteredMenuCountRef.current <= 0) return 0;
+					const nextIndex = index - 1;
+					return nextIndex >= 0 ? nextIndex : filteredMenuCountRef.current - 1;
+				});
+			}
+		};
+		const moveCursorDownCommand = {
+			id: `quick.insert.popup.move.cursor.down.${id}`,
+			type: _univerjs_core.CommandType.OPERATION,
+			handler: () => {
+				setFocusedMenuIndex((index) => {
+					if (filteredMenuCountRef.current <= 0) return 0;
+					const nextIndex = index + 1;
+					return nextIndex <= filteredMenuCountRef.current - 1 ? nextIndex : 0;
+				});
+			}
+		};
+		disposableCollection.add(commandService.registerCommand(moveCursorUpCommand));
+		disposableCollection.add(commandService.registerCommand(moveCursorDownCommand));
+		disposableCollection.add(commandService.registerCommand(enterCommand));
+		disposableCollection.add(shortcutService.registerShortcut({
+			priority: 1e3,
+			id: moveCursorUpCommand.id,
+			binding: _univerjs_ui.KeyCode.ARROW_UP,
+			preconditions: () => true,
+			staticParameters: { direction: _univerjs_core.Direction.UP }
+		}));
+		disposableCollection.add(shortcutService.registerShortcut({
+			priority: 1e3,
+			id: moveCursorDownCommand.id,
+			binding: _univerjs_ui.KeyCode.ARROW_DOWN,
+			preconditions: () => true,
+			staticParameters: { direction: _univerjs_core.Direction.DOWN }
+		}));
+		disposableCollection.add(shortcutService.registerShortcut({
+			priority: 1e3,
+			id: enterCommand.id,
+			binding: _univerjs_ui.KeyCode.ENTER,
+			preconditions: () => true
+		}));
+		return () => {
+			disposableCollection.dispose();
+		};
+	}, [
+		commandService,
+		id,
+		shortcutService
+	]);
+	(0, react.useEffect)(() => {
+		setFocusedMenuIndex(0);
+	}, [filteredMenus]);
+	const menuNodeMapRef = (0, react.useRef)(/* @__PURE__ */ new Map());
+	(0, react.useEffect)(() => {
+		return () => {
+			menuNodeMapRef.current.clear();
+		};
+	}, []);
+	const hasMenus = filteredMenus.length > 0;
+	const Placeholder = (currentPopup === null || currentPopup === void 0 ? void 0 : currentPopup.popup.Placeholder) || componentManager.get(QuickInsertPlaceholder.componentKey);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "univer-mt-2",
+		children: hasMenus ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(QuickInsertMenu, {
+			menus: filteredMenus,
+			focusedMenuIndex,
+			focusedMenuRef,
+			menuNodeMapRef,
+			componentManager,
+			onFocusedMenuIndexChange: setFocusedMenuIndex,
+			onSelect: handleMenuSelect
+		}) : Placeholder && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Placeholder, {})
+	});
+};
+QuickInsertPopup.componentKey = "docs.quick.insert.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/doc-quick-insert-popup.service.ts
+const noopDisposable = { dispose: () => {} };
+let DocQuickInsertPopupService = class DocQuickInsertPopupService extends _univerjs_core.Disposable {
+	get popups() {
+		return Array.from(this._popups);
+	}
+	get editPopup() {
+		return this._editPopup$.value;
+	}
+	get isComposing() {
+		return this._isComposing$.value;
+	}
+	setIsComposing(isComposing) {
+		this._isComposing$.next(isComposing);
+	}
+	get inputOffset() {
+		return this._inputOffset$.value;
+	}
+	setInputOffset(offset) {
+		this._inputOffset$.next(offset);
+	}
+	getDocEventManagerService(unitId) {
+		var _this$_renderManagerS;
+		return (_this$_renderManagerS = this._renderManagerService.getRenderById(unitId)) === null || _this$_renderManagerS === void 0 ? void 0 : _this$_renderManagerS.with(_univerjs_docs_ui.DocEventManagerService);
+	}
+	constructor(_docCanvasPopupManagerService, _univerInstanceService, _commandService, _renderManagerService, _docSelectionManagerService) {
+		super();
+		this._docCanvasPopupManagerService = _docCanvasPopupManagerService;
+		this._univerInstanceService = _univerInstanceService;
+		this._commandService = _commandService;
+		this._renderManagerService = _renderManagerService;
+		this._docSelectionManagerService = _docSelectionManagerService;
+		_defineProperty(this, "_popups", /* @__PURE__ */ new Set());
+		_defineProperty(this, "_editPopup$", new rxjs.BehaviorSubject(void 0));
+		_defineProperty(this, "editPopup$", this._editPopup$.asObservable());
+		_defineProperty(this, "_isComposing$", new rxjs.BehaviorSubject(false));
+		_defineProperty(this, "isComposing$", this._isComposing$.asObservable());
+		_defineProperty(this, "_inputOffset$", new rxjs.BehaviorSubject({
+			start: 0,
+			end: 0
+		}));
+		_defineProperty(this, "inputOffset$", this._inputOffset$.asObservable());
+		_defineProperty(this, "filterKeyword$", void 0);
+		_defineProperty(this, "_menuSelectedCallbacks", /* @__PURE__ */ new Set());
+		_defineProperty(this, "_inputPlaceholderRenderRoot", null);
+		this.disposeWithMe(this._editPopup$);
+		const getBodySlice = (start, end) => {
+			var _this$_univerInstance;
+			return (_this$_univerInstance = this._univerInstanceService.getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_DOC)) === null || _this$_univerInstance === void 0 || (_this$_univerInstance = _this$_univerInstance.getBody()) === null || _this$_univerInstance === void 0 ? void 0 : _this$_univerInstance.dataStream.slice(start, end);
+		};
+		let lastFilterKeyword = "";
+		this.filterKeyword$ = this._inputOffset$.pipe((0, rxjs.map)((offset) => {
+			var _slice$slice;
+			const slice = getBodySlice(offset.start, offset.end);
+			return (_slice$slice = slice === null || slice === void 0 ? void 0 : slice.slice(1)) !== null && _slice$slice !== void 0 ? _slice$slice : "";
+		}), (0, rxjs.distinctUntilChanged)(), (0, rxjs.tap)((filterKeyword) => {
+			lastFilterKeyword = filterKeyword;
+		}));
+		this.disposeWithMe((0, rxjs.combineLatest)([
+			this.filterKeyword$.pipe((0, rxjs.tap)((filterKeyword) => {
+				if (filterKeyword.length > 0) {
+					var _this$_inputPlacehold;
+					(_this$_inputPlacehold = this._inputPlaceholderRenderRoot) === null || _this$_inputPlacehold === void 0 || (_this$_inputPlacehold = _this$_inputPlacehold.unmount) === null || _this$_inputPlacehold === void 0 || _this$_inputPlacehold.dispose();
+				} else {
+					var _this$_inputPlacehold2;
+					(_this$_inputPlacehold2 = this._inputPlaceholderRenderRoot) === null || _this$_inputPlacehold2 === void 0 || _this$_inputPlacehold2.mount();
+				}
+			})),
+			this.isComposing$.pipe((0, rxjs.tap)((isComposing) => {
+				if (isComposing) {
+					var _this$_inputPlacehold3;
+					(_this$_inputPlacehold3 = this._inputPlaceholderRenderRoot) === null || _this$_inputPlacehold3 === void 0 || (_this$_inputPlacehold3 = _this$_inputPlacehold3.unmount) === null || _this$_inputPlacehold3 === void 0 || _this$_inputPlacehold3.dispose();
+				} else {
+					var _this$_inputPlacehold4;
+					lastFilterKeyword.length <= 0 && ((_this$_inputPlacehold4 = this._inputPlaceholderRenderRoot) === null || _this$_inputPlacehold4 === void 0 || _this$_inputPlacehold4.mount());
+				}
+			})),
+			this.editPopup$.pipe((0, rxjs.tap)((popup) => {
+				if (!popup) {
+					var _this$_inputPlacehold5;
+					(_this$_inputPlacehold5 = this._inputPlaceholderRenderRoot) === null || _this$_inputPlacehold5 === void 0 || (_this$_inputPlacehold5 = _this$_inputPlacehold5.unmount) === null || _this$_inputPlacehold5 === void 0 || _this$_inputPlacehold5.dispose();
+					this._inputPlaceholderRenderRoot = null;
+				}
+			}))
+		]).subscribe());
+	}
+	resolvePopup(keyword) {
+		return Array.from(this._popups).find((popup) => popup.keyword === keyword);
+	}
+	registerPopup(popup) {
+		this._popups.add(popup);
+		return () => {
+			this._popups.delete(popup);
+		};
+	}
+	_createInputPlaceholderRenderRoot(mount) {
+		return {
+			isMounted: false,
+			mount() {
+				if (this.isMounted) return;
+				this.isMounted = true;
+				const unmount = mount();
+				this.unmount = { dispose: () => {
+					unmount.dispose();
+					this.isMounted = false;
+				} };
+			}
+		};
+	}
+	_getParagraphBound(unitId, index) {
+		var _currentDoc$getBody, _docEventManagerServi;
+		const currentDoc = this._univerInstanceService.getUnit(unitId);
+		const paragraph = currentDoc === null || currentDoc === void 0 || (_currentDoc$getBody = currentDoc.getBody()) === null || _currentDoc$getBody === void 0 || (_currentDoc$getBody = _currentDoc$getBody.paragraphs) === null || _currentDoc$getBody === void 0 ? void 0 : _currentDoc$getBody.find((p) => p.startIndex > index);
+		if (!paragraph) return null;
+		const docEventManagerService = this.getDocEventManagerService(unitId);
+		return (_docEventManagerServi = docEventManagerService === null || docEventManagerService === void 0 ? void 0 : docEventManagerService.findParagraphBoundByIndex(paragraph.startIndex)) !== null && _docEventManagerServi !== void 0 ? _docEventManagerServi : null;
+	}
+	_getKeywordPlaceholderAnchorRect(document, skeleton, activeRange, fallbackRect) {
+		const startPosition = skeleton.findNodePositionByCharIndex(activeRange.startOffset, true, activeRange.segmentId, activeRange.segmentPage);
+		if (!startPosition) return fallbackRect;
+		const documentOffsetConfig = document.getOffsetConfig();
+		const { contentBoxPointGroup } = new _univerjs_docs_ui.NodePositionConvertToCursor(documentOffsetConfig, skeleton).getRangePointData(startPosition, startPosition);
+		if (contentBoxPointGroup.length === 0) return fallbackRect;
+		const anchor = (0, _univerjs_docs_ui.getAnchorBounding)(contentBoxPointGroup);
+		const left = anchor.left + documentOffsetConfig.docsLeft;
+		const top = anchor.top + documentOffsetConfig.docsTop;
+		return {
+			left,
+			right: left,
+			top,
+			bottom: top + anchor.height
+		};
+	}
+	_getKeywordPlaceholderExtraProps(curGlyph) {
+		var _curGlyph$ts, _curGlyph$fontStyle, _ref, _curGlyph$fontStyle$f, _curGlyph$fontStyle2, _curGlyph$ts2, _curGlyph$ts3, _curGlyph$ts4, _curGlyph$bBox, _curGlyph$bBox$ba, _curGlyph$bBox2, _curGlyph$bBox$bd, _curGlyph$bBox3;
+		return {
+			fontSize: (_curGlyph$ts = curGlyph.ts) === null || _curGlyph$ts === void 0 ? void 0 : _curGlyph$ts.fs,
+			fontString: (_curGlyph$fontStyle = curGlyph.fontStyle) === null || _curGlyph$fontStyle === void 0 ? void 0 : _curGlyph$fontStyle.fontString,
+			fontFamily: (_ref = (_curGlyph$fontStyle$f = (_curGlyph$fontStyle2 = curGlyph.fontStyle) === null || _curGlyph$fontStyle2 === void 0 ? void 0 : _curGlyph$fontStyle2.fontFamily) !== null && _curGlyph$fontStyle$f !== void 0 ? _curGlyph$fontStyle$f : (_curGlyph$ts2 = curGlyph.ts) === null || _curGlyph$ts2 === void 0 ? void 0 : _curGlyph$ts2.ff) !== null && _ref !== void 0 ? _ref : void 0,
+			fontStyle: ((_curGlyph$ts3 = curGlyph.ts) === null || _curGlyph$ts3 === void 0 ? void 0 : _curGlyph$ts3.it) ? "italic" : "normal",
+			fontWeight: ((_curGlyph$ts4 = curGlyph.ts) === null || _curGlyph$ts4 === void 0 ? void 0 : _curGlyph$ts4.bl) ? "bold" : "normal",
+			ascent: (_curGlyph$bBox = curGlyph.bBox) === null || _curGlyph$bBox === void 0 ? void 0 : _curGlyph$bBox.ba,
+			contentHeight: ((_curGlyph$bBox$ba = (_curGlyph$bBox2 = curGlyph.bBox) === null || _curGlyph$bBox2 === void 0 ? void 0 : _curGlyph$bBox2.ba) !== null && _curGlyph$bBox$ba !== void 0 ? _curGlyph$bBox$ba : 0) + ((_curGlyph$bBox$bd = (_curGlyph$bBox3 = curGlyph.bBox) === null || _curGlyph$bBox3 === void 0 ? void 0 : _curGlyph$bBox3.bd) !== null && _curGlyph$bBox$bd !== void 0 ? _curGlyph$bBox$bd : 0) || void 0
+		};
+	}
+	_mountInputPlaceholder(unitId, fallbackRect) {
+		const currentRender = this._renderManagerService.getRenderById(unitId);
+		const docSkeletonManagerService = currentRender === null || currentRender === void 0 ? void 0 : currentRender.with(_univerjs_docs.DocSkeletonManagerService);
+		const activeRange = this._docSelectionManagerService.getActiveTextRange();
+		if (!currentRender || !docSkeletonManagerService || !activeRange) return noopDisposable;
+		const skeleton = docSkeletonManagerService.getSkeleton();
+		const curGlyph = skeleton.findNodeByCharIndex(activeRange.startOffset, activeRange.segmentId, activeRange.segmentPage);
+		if (!((curGlyph === null || curGlyph === void 0 ? void 0 : curGlyph.content) === "\r") || !curGlyph) return noopDisposable;
+		const document = currentRender.mainComponent;
+		const placeholderAnchorRect = this._getKeywordPlaceholderAnchorRect(document, skeleton, activeRange, fallbackRect);
+		const extraProps = this._getKeywordPlaceholderExtraProps(curGlyph);
+		const disposable = this._docCanvasPopupManagerService.attachPopupToRect(placeholderAnchorRect, {
+			componentKey: KeywordInputPlaceholder.componentKey,
+			extraProps,
+			onClickOutside: () => {
+				disposable.dispose();
+			},
+			direction: "horizontal"
+		}, unitId);
+		return disposable;
+	}
+	showPopup(options) {
+		const { popup, index, unitId } = options;
+		this.closePopup();
+		const paragraphBound = this._getParagraphBound(unitId, index);
+		if (!paragraphBound) return;
+		this._inputPlaceholderRenderRoot = this._createInputPlaceholderRenderRoot(() => this._mountInputPlaceholder(unitId, paragraphBound.firstLine));
+		this._inputPlaceholderRenderRoot.mount();
+		const disposable = this._docCanvasPopupManagerService.attachPopupToRect(paragraphBound.firstLine, {
+			componentKey: QuickInsertPopup.componentKey,
+			onClickOutside: () => {
+				this.closePopup();
+			},
+			direction: "bottom"
+		}, unitId);
+		this._editPopup$.next({
+			disposable,
+			popup,
+			anchor: index,
+			unitId
+		});
+	}
+	closePopup() {
+		if (this.editPopup) {
+			this.editPopup.disposable.dispose();
+			this._editPopup$.next(null);
+		}
+	}
+	onMenuSelected(callback) {
+		this._menuSelectedCallbacks.add(callback);
+		return () => {
+			this._menuSelectedCallbacks.delete(callback);
+		};
+	}
+	emitMenuSelected(menu) {
+		const { start, end } = this.inputOffset;
+		this._commandService.syncExecuteCommand(DeleteSearchKeyCommand.id, {
+			start,
+			end
+		});
+		setTimeout(() => {
+			this._menuSelectedCallbacks.forEach((callback) => callback(menu));
+		}, 0);
+	}
+};
+DocQuickInsertPopupService = __decorate([
+	__decorateParam(0, (0, _univerjs_core.Inject)(_univerjs_docs_ui.DocCanvasPopManagerService)),
+	__decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_core.IUniverInstanceService)),
+	__decorateParam(2, (0, _univerjs_core.Inject)(_univerjs_core.ICommandService)),
+	__decorateParam(3, (0, _univerjs_core.Inject)(_univerjs_engine_render.IRenderManagerService)),
+	__decorateParam(4, (0, _univerjs_core.Inject)(_univerjs_docs.DocSelectionManagerService))
+], DocQuickInsertPopupService);
+
+//#endregion
+//#region src/commands/operations/quick-insert-popup.operation.ts
+const ShowQuickInsertPopupOperation = {
+	type: _univerjs_core.CommandType.OPERATION,
+	id: "doc.operation.show-quick-insert-popup",
+	handler(accessor, params) {
+		const docQuickInsertPopupService = accessor.get(DocQuickInsertPopupService);
+		if (!params) return false;
+		docQuickInsertPopupService.showPopup(params);
+		return true;
+	}
+};
+const CloseQuickInsertPopupOperation = {
+	type: _univerjs_core.CommandType.OPERATION,
+	id: "doc.operation.close-quick-insert-popup",
+	handler(accessor) {
+		accessor.get(DocQuickInsertPopupService).closePopup();
+		return true;
+	}
+};
+
+//#endregion
+//#region src/menu/menu.ts
+let QuickInsertMenuGroup = /* @__PURE__ */ function(QuickInsertMenuGroup) {
+	QuickInsertMenuGroup["Basic"] = "quick.insert.group.basic";
+	QuickInsertMenuGroup["Media"] = "quick.insert.group.media";
+	return QuickInsertMenuGroup;
+}({});
+const textMenu = {
+	id: "quick-insert.text.menu",
+	title: "docQuickInsert.menu.text",
+	icon: "TextIcon",
+	keywords: ["text"]
+};
+const numberedListMenu = {
+	id: _univerjs_docs_ui.OrderListCommand.id,
+	title: "docQuickInsert.menu.numberedList",
+	icon: "OrderIcon",
+	keywords: [
+		"numbered",
+		"list",
+		"ordered"
+	]
+};
+const bulletedListMenu = {
+	id: _univerjs_docs_ui.BulletListCommand.id,
+	title: "docQuickInsert.menu.bulletedList",
+	icon: "UnorderIcon",
+	keywords: [
+		"bulleted",
+		"list",
+		"unordered"
+	]
+};
+const dividerMenu = {
+	id: _univerjs_docs_ui.HorizontalLineCommand.id,
+	title: "docQuickInsert.menu.divider",
+	icon: "DividerIcon",
+	keywords: [
+		"divider",
+		"line",
+		"separate"
+	]
+};
+const tableMenu = {
+	id: _univerjs_docs_ui.DocCreateTableOperation.id,
+	title: "docQuickInsert.menu.table",
+	icon: "GridIcon",
+	keywords: [
+		"table",
+		"grid",
+		"spreadsheet"
+	]
+};
+const imageMenu = {
+	id: _univerjs_docs_drawing_ui.InsertDocImageCommand.id,
+	title: "docQuickInsert.menu.image",
+	icon: "AdditionAndSubtractionIcon",
+	keywords: [
+		"image",
+		"picture",
+		"photo"
+	]
+};
+const builtInMenus = [{
+	title: "docQuickInsert.group.basics",
+	id: QuickInsertMenuGroup.Basic,
+	children: [
+		textMenu,
+		numberedListMenu,
+		bulletedListMenu,
+		dividerMenu,
+		tableMenu,
+		imageMenu
+	]
+}];
+const builtInMenuCommandIds = new Set([
+	numberedListMenu.id,
+	bulletedListMenu.id,
+	dividerMenu.id,
+	tableMenu.id,
+	imageMenu.id
+]);
+
+//#endregion
+//#region src/controllers/doc-quick-insert-trigger.controller.ts
+let DocQuickInsertTriggerController = class DocQuickInsertTriggerController extends _univerjs_core.Disposable {
+	constructor(_commandService, _textSelectionManagerService, _docQuickInsertPopupService, _shortcutService, _univerInstanceService) {
+		super();
+		this._commandService = _commandService;
+		this._textSelectionManagerService = _textSelectionManagerService;
+		this._docQuickInsertPopupService = _docQuickInsertPopupService;
+		this._shortcutService = _shortcutService;
+		this._univerInstanceService = _univerInstanceService;
+		this.disposeWithMe(this._shortcutService.registerShortcut({
+			id: CloseQuickInsertPopupOperation.id,
+			binding: _univerjs_ui.KeyCode.ESC,
+			preconditions: () => Boolean(this._docQuickInsertPopupService.editPopup),
+			priority: 1e3
+		}));
+		this._initTrigger();
+		this._initMenuHandler();
+	}
+	_initTrigger() {
+		this.disposeWithMe(this._commandService.onCommandExecuted((commandInfo) => {
+			const { _docQuickInsertPopupService, _textSelectionManagerService, _commandService } = this;
+			const documentDataModel = this._univerInstanceService.getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_DOC);
+			if (documentDataModel === null || documentDataModel === void 0 ? void 0 : documentDataModel.getDisabled()) return;
+			if (commandInfo.id === _univerjs_docs_ui.InsertCommand.id) {
+				const params = commandInfo.params;
+				if (_docQuickInsertPopupService.editPopup) {
+					_docQuickInsertPopupService.setInputOffset({
+						start: _docQuickInsertPopupService.inputOffset.start,
+						end: params.range.endOffset + 1
+					});
+					return;
+				}
+				const activeRange = _textSelectionManagerService.getActiveTextRange();
+				if (!activeRange) return;
+				const popup = _docQuickInsertPopupService.resolvePopup(params.body.dataStream);
+				if (!popup) return;
+				if (!(popup.preconditions ? popup.preconditions(params) : true)) return;
+				_docQuickInsertPopupService.setInputOffset({
+					start: activeRange.startOffset - 1,
+					end: activeRange.startOffset
+				});
+				setTimeout(() => {
+					_commandService.executeCommand(ShowQuickInsertPopupOperation.id, {
+						index: activeRange.startOffset - 1,
+						unitId: params.unitId,
+						popup
+					});
+				}, 100);
+			}
+			if (commandInfo.id === _univerjs_docs_ui.IMEInputCommand.id) {
+				const params = commandInfo.params;
+				if (!_docQuickInsertPopupService.isComposing && params.isCompositionStart) _docQuickInsertPopupService.setIsComposing(true);
+				if (_docQuickInsertPopupService.isComposing && params.isCompositionEnd) _docQuickInsertPopupService.setIsComposing(false);
+			}
+			if (commandInfo.id === _univerjs_docs.RichTextEditingMutation.id) {
+				const params = commandInfo.params;
+				if (params.isCompositionEnd) {
+					var _params$textRanges;
+					const endOffset = (_params$textRanges = params.textRanges) === null || _params$textRanges === void 0 || (_params$textRanges = _params$textRanges[0]) === null || _params$textRanges === void 0 ? void 0 : _params$textRanges.endOffset;
+					if (endOffset) _docQuickInsertPopupService.setInputOffset({
+						start: _docQuickInsertPopupService.inputOffset.start,
+						end: endOffset
+					});
+				}
+			}
+			if (commandInfo.id === _univerjs_docs_ui.DeleteCommand.id) {
+				const params = commandInfo.params;
+				if (_docQuickInsertPopupService.editPopup && params.direction === _univerjs_core.DeleteDirection.LEFT) {
+					var _params$len;
+					const len = (_params$len = params.len) !== null && _params$len !== void 0 ? _params$len : 0;
+					_docQuickInsertPopupService.setInputOffset({
+						start: _docQuickInsertPopupService.inputOffset.start,
+						end: params.range.endOffset - len
+					});
+				}
+			}
+			if (commandInfo.id === _univerjs_docs_ui.MoveCursorOperation.id) {
+				const params = commandInfo.params;
+				if (params.direction === _univerjs_core.Direction.LEFT || params.direction === _univerjs_core.Direction.RIGHT) _docQuickInsertPopupService.editPopup && _commandService.executeCommand(CloseQuickInsertPopupOperation.id);
+			}
+			if (commandInfo.id === _univerjs_docs_ui.DeleteLeftCommand.id) {
+				const activeRange = _textSelectionManagerService.getActiveTextRange();
+				if (!_docQuickInsertPopupService.editPopup || !activeRange) return;
+				if (activeRange.endOffset <= _docQuickInsertPopupService.editPopup.anchor) _commandService.executeCommand(CloseQuickInsertPopupOperation.id);
+			}
+		}));
+	}
+	_initMenuHandler() {
+		this.disposeWithMe(this._docQuickInsertPopupService.onMenuSelected((menu) => {
+			if (menu.id === textMenu.id) return;
+			if (builtInMenuCommandIds.has(menu.id)) this._commandService.executeCommand(menu.id);
+		}));
+	}
+};
+DocQuickInsertTriggerController = __decorate([
+	__decorateParam(0, _univerjs_core.ICommandService),
+	__decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_docs.DocSelectionManagerService)),
+	__decorateParam(2, (0, _univerjs_core.Inject)(DocQuickInsertPopupService)),
+	__decorateParam(3, (0, _univerjs_core.Inject)(_univerjs_ui.IShortcutService)),
+	__decorateParam(4, (0, _univerjs_core.Inject)(_univerjs_core.IUniverInstanceService))
+], DocQuickInsertTriggerController);
+
+//#endregion
+//#region src/menu/doc-quick-insert-menu.controller.ts
+let DocQuickInsertMenuController = class DocQuickInsertMenuController extends _univerjs_core.Disposable {
+	get popup() {
+		return this._popup$.value;
+	}
+	constructor(_context, _docEventManagerService, _docQuickInsertPopupService, _docCanvasPopManagerService) {
+		super();
+		this._context = _context;
+		this._docEventManagerService = _docEventManagerService;
+		this._docQuickInsertPopupService = _docQuickInsertPopupService;
+		this._docCanvasPopManagerService = _docCanvasPopManagerService;
+		_defineProperty(this, "_popup$", new rxjs.BehaviorSubject(null));
+		_defineProperty(this, "popup$", this._popup$.asObservable());
+		this._init();
+	}
+	_init() {
+		this.disposeWithMe((0, rxjs.combineLatest)([this._docEventManagerService.hoverParagraphLeftRealTime$, this._docEventManagerService.hoverParagraphRealTime$]).subscribe(([left, paragraph]) => {
+			const p = left !== null && left !== void 0 ? left : paragraph;
+			const isDisabled = this._context.unit.getDisabled();
+			if (!p || isDisabled) {
+				this._hideMenu(true);
+				return;
+			}
+			if (p.paragraphStart === p.paragraphEnd) {
+				var _this$popup;
+				if (this._docQuickInsertPopupService.editPopup || p.startIndex === ((_this$popup = this.popup) === null || _this$popup === void 0 ? void 0 : _this$popup.startIndex)) return;
+				this._hideMenu(true);
+				const disposable = this._docCanvasPopManagerService.attachPopupToRect(p.firstLine, {
+					componentKey: QuickInsertButtonComponentKey,
+					direction: "left-center"
+				}, this._context.unit.getUnitId());
+				this._popup$.next({
+					startIndex: p.startIndex,
+					disposable
+				});
+			} else this._hideMenu(true);
+		}));
+	}
+	_hideMenu(force) {
+		if (this._docQuickInsertPopupService.editPopup) return;
+		if (this.popup && (force || this.popup.disposable.canDispose())) {
+			this.popup.disposable.dispose();
+			this._popup$.next(null);
+		}
+	}
+};
+DocQuickInsertMenuController = __decorate([
+	__decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_docs_ui.DocEventManagerService)),
+	__decorateParam(2, (0, _univerjs_core.Inject)(DocQuickInsertPopupService)),
+	__decorateParam(3, (0, _univerjs_core.Inject)(_univerjs_docs_ui.DocCanvasPopManagerService))
+], DocQuickInsertMenuController);
+
+//#endregion
+//#region src/views/QuickInsertButton.tsx
+const QuickInsertButtonComponentKey = "doc.quick-insert.button";
+const QuickInsertButton = ({ className = "" }) => {
+	const docQuickInsertPopupService = (0, _univerjs_ui.useDependency)(DocQuickInsertPopupService);
+	const univerInstanceService = (0, _univerjs_ui.useDependency)(_univerjs_core.IUniverInstanceService);
+	const renderManagerService = (0, _univerjs_ui.useDependency)(_univerjs_engine_render.IRenderManagerService);
+	const currentDoc = (0, _univerjs_ui.useObservable)((0, react.useMemo)(() => univerInstanceService.getCurrentTypeOfUnit$(_univerjs_core.UniverInstanceType.UNIVER_DOC), [univerInstanceService]));
+	const currentUnit = currentDoc && renderManagerService.getRenderById(currentDoc.getUnitId());
+	const docQuickInsertMenuController = currentUnit === null || currentUnit === void 0 ? void 0 : currentUnit.with(DocQuickInsertMenuController);
+	const layoutService = (0, _univerjs_ui.useDependency)(_univerjs_ui.ILayoutService);
+	const docSelectionManagerService = (0, _univerjs_ui.useDependency)(_univerjs_docs.DocSelectionManagerService);
+	const editPopup = (0, _univerjs_ui.useObservable)(docQuickInsertPopupService.editPopup$);
+	const onClick = (0, _univerjs_ui.useEvent)(() => {
+		var _currentDoc$getUnitId;
+		const p = docQuickInsertMenuController === null || docQuickInsertMenuController === void 0 ? void 0 : docQuickInsertMenuController.popup;
+		if (!p) return;
+		const allPopups = docQuickInsertPopupService.popups;
+		const popup = {
+			keyword: "",
+			menus$: (0, rxjs.combineLatest)(allPopups.map((p) => p.menus$)).pipe((0, rxjs.map)((menusCollection) => menusCollection.flat()))
+		};
+		docSelectionManagerService.replaceDocRanges([{
+			startOffset: p.startIndex,
+			endOffset: p.startIndex
+		}]);
+		docQuickInsertPopupService.setInputOffset({
+			start: p.startIndex - 1,
+			end: p.startIndex - 1
+		});
+		docQuickInsertPopupService.showPopup({
+			popup,
+			index: p.startIndex - 1,
+			unitId: (_currentDoc$getUnitId = currentDoc === null || currentDoc === void 0 ? void 0 : currentDoc.getUnitId()) !== null && _currentDoc$getUnitId !== void 0 ? _currentDoc$getUnitId : ""
+		});
+		setTimeout(() => {
+			layoutService.focus();
+		});
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, _univerjs_design.clsx)("univer-mr-1 univer-flex univer-cursor-pointer univer-items-center univer-gap-2.5 univer-rounded-full univer-p-1.5 univer-shadow-sm hover:univer-bg-gray-100 dark:!univer-text-gray-200 dark:hover:!univer-bg-gray-700", _univerjs_design.borderClassName, {
+			"univer-bg-gray-100 dark:!univer-bg-gray-700": editPopup,
+			"univer-bg-white dark:!univer-bg-gray-900": !editPopup
+		}, className),
+		role: "button",
+		tabIndex: 0,
+		onClick,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.IncreaseIcon, { className: "univer-text-gray-800 dark:!univer-text-gray-200" })
+	});
+};
+QuickInsertButton.componentKey = QuickInsertButtonComponentKey;
+
+//#endregion
+//#region src/controllers/doc-quick-insert-ui.controller.ts
+let DocQuickInsertUIController = class DocQuickInsertUIController extends _univerjs_core.Disposable {
+	constructor(_commandService, _docQuickInsertPopupService, _componentManager) {
+		super();
+		this._commandService = _commandService;
+		this._docQuickInsertPopupService = _docQuickInsertPopupService;
+		this._componentManager = _componentManager;
+		this._initCommands();
+		this._initComponents();
+		this._initMenus();
+	}
+	_initCommands() {
+		[
+			DeleteSearchKeyCommand,
+			ShowQuickInsertPopupOperation,
+			CloseQuickInsertPopupOperation
+		].forEach((operation) => {
+			this.disposeWithMe(this._commandService.registerCommand(operation));
+		});
+	}
+	_initComponents() {
+		[
+			[QuickInsertPopup.componentKey, QuickInsertPopup],
+			[KeywordInputPlaceholder.componentKey, KeywordInputPlaceholder],
+			[QuickInsertPlaceholder.componentKey, QuickInsertPlaceholder],
+			[_univerjs_icons.DividerIcon.displayName, _univerjs_icons.DividerIcon],
+			[_univerjs_icons.TextIcon.displayName, _univerjs_icons.TextIcon],
+			[QuickInsertButton.componentKey, QuickInsertButton]
+		].forEach(([key, comp]) => {
+			if (key) this.disposeWithMe(this._componentManager.register(key, comp));
+		});
+		[{
+			keyword: "/",
+			menus$: (0, rxjs.of)(builtInMenus),
+			preconditions: (params) => {
+				var _startNodePosition;
+				return ((_startNodePosition = params.range.startNodePosition) === null || _startNodePosition === void 0 ? void 0 : _startNodePosition.glyph) === 0;
+			}
+		}].forEach((popup) => {
+			this.disposeWithMe(this._docQuickInsertPopupService.registerPopup(popup));
+		});
+	}
+	_initMenus() {}
+};
+DocQuickInsertUIController = __decorate([
+	__decorateParam(0, _univerjs_core.ICommandService),
+	__decorateParam(1, (0, _univerjs_core.Inject)(DocQuickInsertPopupService)),
+	__decorateParam(2, (0, _univerjs_core.Inject)(_univerjs_ui.ComponentManager))
+], DocQuickInsertUIController);
+
+//#endregion
+//#region package.json
+var name = "@univerjs/docs-quick-insert-ui";
+var version = "0.21.0-insiders.20260422-d7fcb4d";
+
+//#endregion
+//#region src/config/config.ts
+const DOCS_QUICK_INSERT_UI_PLUGIN_CONFIG_KEY = "docs-quick-insert-ui.config";
+const configSymbol = Symbol(DOCS_QUICK_INSERT_UI_PLUGIN_CONFIG_KEY);
+const defaultPluginConfig = {};
+
+//#endregion
+//#region src/plugin.ts
+let UniverDocsQuickInsertUIPlugin = class UniverDocsQuickInsertUIPlugin extends _univerjs_core.Plugin {
+	constructor(_config = defaultPluginConfig, _injector, _renderManagerSrv, _configService) {
+		super();
+		this._config = _config;
+		this._injector = _injector;
+		this._renderManagerSrv = _renderManagerSrv;
+		this._configService = _configService;
+		const { menu, ...rest } = (0, _univerjs_core.merge)({}, defaultPluginConfig, this._config);
+		if (menu) this._configService.setConfig("menu", menu, { merge: true });
+		this._configService.setConfig(DOCS_QUICK_INSERT_UI_PLUGIN_CONFIG_KEY, rest);
+	}
+	onStarting() {
+		[
+			[DocQuickInsertUIController],
+			[DocQuickInsertTriggerController],
+			[DocQuickInsertPopupService]
+		].forEach((dependency) => this._injector.add(dependency));
+		this._injector.get(DocQuickInsertUIController);
+	}
+	onRendered() {
+		this._injector.get(DocQuickInsertTriggerController);
+		this._injector.get(DocQuickInsertPopupService);
+		[[DocQuickInsertMenuController]].forEach((m) => {
+			this._renderManagerSrv.registerRenderModule(_univerjs_core.UniverInstanceType.UNIVER_DOC, m);
+		});
+	}
+};
+_defineProperty(UniverDocsQuickInsertUIPlugin, "type", _univerjs_core.UniverInstanceType.UNIVER_DOC);
+_defineProperty(UniverDocsQuickInsertUIPlugin, "pluginName", "DOC_QUICK_INSERT_UI_PLUGIN");
+_defineProperty(UniverDocsQuickInsertUIPlugin, "packageName", name);
+_defineProperty(UniverDocsQuickInsertUIPlugin, "version", version);
+UniverDocsQuickInsertUIPlugin = __decorate([
+	(0, _univerjs_core.DependentOn)(_univerjs_drawing_ui.UniverDrawingUIPlugin, _univerjs_drawing.UniverDrawingPlugin, _univerjs_docs_drawing_ui.UniverDocsDrawingUIPlugin, _univerjs_docs_drawing.UniverDocsDrawingPlugin, _univerjs_ui.UniverUIPlugin),
+	__decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_core.Injector)),
+	__decorateParam(2, (0, _univerjs_core.Inject)(_univerjs_engine_render.IRenderManagerService)),
+	__decorateParam(3, _univerjs_core.IConfigService)
+], UniverDocsQuickInsertUIPlugin);
+
+//#endregion
+Object.defineProperty(exports, 'DocQuickInsertPopupService', {
+  enumerable: true,
+  get: function () {
+    return DocQuickInsertPopupService;
+  }
+});
+Object.defineProperty(exports, 'DocQuickInsertTriggerController', {
+  enumerable: true,
+  get: function () {
+    return DocQuickInsertTriggerController;
+  }
+});
+Object.defineProperty(exports, 'DocQuickInsertUIController', {
+  enumerable: true,
+  get: function () {
+    return DocQuickInsertUIController;
+  }
+});
+exports.KeywordInputPlaceholderComponentKey = KeywordInputPlaceholderComponentKey;
+exports.QuickInsertPlaceholderComponentKey = QuickInsertPlaceholderComponentKey;
+Object.defineProperty(exports, 'UniverDocsQuickInsertUIPlugin', {
+  enumerable: true,
+  get: function () {
+    return UniverDocsQuickInsertUIPlugin;
+  }
+});