@univerjs/thread-comment-ui 0.20.0 → 0.20.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/cjs/index.js +1 -1
- package/lib/es/index.js +1 -1
- package/lib/index.js +1 -1
- package/lib/umd/index.js +1 -1
- package/package.json +7 -7
package/lib/cjs/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require(`@univerjs/core`),t=require(`@univerjs/ui`),n=require(`rxjs`),r=require(`@univerjs/thread-comment`),i=require(`@univerjs/design`),a=require(`@univerjs/icons`),o=require(`react`),s=require(`@univerjs/docs-ui`),c=require(`react/jsx-runtime`);function l(e){"@babel/helpers - typeof";return l=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},l(e)}function u(e,t){if(l(e)!=`object`||!e)return e;var n=e[Symbol.toPrimitive];if(n!==void 0){var r=n.call(e,t||`default`);if(l(r)!=`object`)return r;throw TypeError(`@@toPrimitive must return a primitive value.`)}return(t===`string`?String:Number)(e)}function d(e){var t=u(e,`string`);return l(t)==`symbol`?t:t+``}function f(e,t,n){return(t=d(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function p(e,t){return function(n,r){t(n,r,e)}}function m(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 h=class extends e.Disposable{constructor(e,t){super(),this._sidebarService=e,this._univerInstanceService=t,f(this,`_panelVisible`,!1),f(this,`_panelVisible$`,new n.BehaviorSubject(!1)),f(this,`_activeCommentId`,void 0),f(this,`_activeCommentId$`,new n.BehaviorSubject(void 0)),f(this,`panelVisible$`,this._panelVisible$.asObservable()),f(this,`activeCommentId$`,this._activeCommentId$.asObservable()),this._init(),this.disposeWithMe(()=>{this._activeCommentId$.complete(),this._panelVisible$.complete()})}_init(){this.disposeWithMe(this._sidebarService.sidebarOptions$.subscribe(e=>{e.visible||this.setPanelVisible(!1)})),this.disposeWithMe(this._univerInstanceService.getCurrentTypeOfUnit$(e.UniverInstanceType.UNIVER_SHEET).pipe((0,n.filter)(e=>!e)).subscribe(()=>{this._sidebarService.close()}))}get panelVisible(){return this._panelVisible}get activeCommentId(){return this._activeCommentId}setPanelVisible(e){this._panelVisible=e,this._panelVisible$.next(e)}setActiveComment(e){this._activeCommentId=e,this._activeCommentId$.next(e)}};h=m([p(0,(0,e.Inject)(t.ISidebarService)),p(1,e.IUniverInstanceService)],h);const g={id:`thread-comment-ui.operation.set-active-comment`,type:e.CommandType.OPERATION,handler(e,t){return e.get(h).setActiveComment(t),!0}};var _=`@univerjs/thread-comment-ui`,v=`0.20.
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require(`@univerjs/core`),t=require(`@univerjs/ui`),n=require(`rxjs`),r=require(`@univerjs/thread-comment`),i=require(`@univerjs/design`),a=require(`@univerjs/icons`),o=require(`react`),s=require(`@univerjs/docs-ui`),c=require(`react/jsx-runtime`);function l(e){"@babel/helpers - typeof";return l=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},l(e)}function u(e,t){if(l(e)!=`object`||!e)return e;var n=e[Symbol.toPrimitive];if(n!==void 0){var r=n.call(e,t||`default`);if(l(r)!=`object`)return r;throw TypeError(`@@toPrimitive must return a primitive value.`)}return(t===`string`?String:Number)(e)}function d(e){var t=u(e,`string`);return l(t)==`symbol`?t:t+``}function f(e,t,n){return(t=d(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function p(e,t){return function(n,r){t(n,r,e)}}function m(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 h=class extends e.Disposable{constructor(e,t){super(),this._sidebarService=e,this._univerInstanceService=t,f(this,`_panelVisible`,!1),f(this,`_panelVisible$`,new n.BehaviorSubject(!1)),f(this,`_activeCommentId`,void 0),f(this,`_activeCommentId$`,new n.BehaviorSubject(void 0)),f(this,`panelVisible$`,this._panelVisible$.asObservable()),f(this,`activeCommentId$`,this._activeCommentId$.asObservable()),this._init(),this.disposeWithMe(()=>{this._activeCommentId$.complete(),this._panelVisible$.complete()})}_init(){this.disposeWithMe(this._sidebarService.sidebarOptions$.subscribe(e=>{e.visible||this.setPanelVisible(!1)})),this.disposeWithMe(this._univerInstanceService.getCurrentTypeOfUnit$(e.UniverInstanceType.UNIVER_SHEET).pipe((0,n.filter)(e=>!e)).subscribe(()=>{this._sidebarService.close()}))}get panelVisible(){return this._panelVisible}get activeCommentId(){return this._activeCommentId}setPanelVisible(e){this._panelVisible=e,this._panelVisible$.next(e)}setActiveComment(e){this._activeCommentId=e,this._activeCommentId$.next(e)}};h=m([p(0,(0,e.Inject)(t.ISidebarService)),p(1,e.IUniverInstanceService)],h);const g={id:`thread-comment-ui.operation.set-active-comment`,type:e.CommandType.OPERATION,handler(e,t){return e.get(h).setActiveComment(t),!0}};var _=`@univerjs/thread-comment-ui`,v=`0.20.1`;const y=`thread-comment-ui.config`;Symbol(y);const b={};let x=class extends e.Plugin{constructor(t=b,n,r,i){super(),this._config=t,this._injector=n,this._commandService=r,this._configService=i;let{menu:a,...o}=(0,e.merge)({},b,this._config);a&&this._configService.setConfig(`menu`,a,{merge:!0}),this._configService.setConfig(y,o)}onStarting(){var t;(0,e.mergeOverrideWithDependencies)([[h]],(t=this._config)==null?void 0:t.overrides).forEach(e=>{this._injector.add(e)}),[g].forEach(e=>{this._commandService.registerCommand(e)})}};f(x,`pluginName`,`UNIVER_THREAD_COMMENT_UI_PLUGIN`),f(x,`packageName`,_),f(x,`version`,v),f(x,`type`,e.UniverInstanceType.UNIVER_UNKNOWN),x=m([(0,e.DependentOn)(r.UniverThreadCommentPlugin),p(1,(0,e.Inject)(e.Injector)),p(2,e.ICommandService),p(3,e.IConfigService)],x);function S(e){return{id:`d`,body:e,documentStyle:{}}}const C=(0,o.forwardRef)((n,r)=>{var a;let{comment:l,onSave:u,id:d,onCancel:f,autoFocus:p,unitId:m,type:h,editorId:_}=n,v=(0,t.useDependency)(e.ICommandService),y=(0,t.useDependency)(e.LocaleService),[b,x]=(0,o.useState)(!1),C=(0,t.useDependency)(s.IEditorService),w=(0,o.useRef)(null),T=h===e.UniverInstanceType.UNIVER_DOC?e.DOCS_NORMAL_EDITOR_UNIT_ID_KEY:m,[E,D]=(0,o.useState)(()=>{var t,n;return e.BuildTextUtils.transform.getPlainText((t=(n=w.current)==null||(n=n.getDocumentData().body)==null?void 0:n.dataStream)==null?``:t)});(0,o.useEffect)(()=>{var t,n,r;D(e.BuildTextUtils.transform.getPlainText((t=(n=w.current)==null||(n=n.getDocumentData().body)==null?void 0:n.dataStream)==null?``:t));let i=(r=w.current)==null?void 0:r.selectionChange$.subscribe(()=>{var t,n;D(e.BuildTextUtils.transform.getPlainText((t=(n=w.current)==null||(n=n.getDocumentData().body)==null?void 0:n.dataStream)==null?``:t))});return()=>i==null?void 0:i.unsubscribe()},[(a=w.current)==null?void 0:a.selectionChange$]);let O=(0,o.useMemo)(()=>({keyCodes:[{keyCode:t.KeyCode.ENTER}],handler:e=>{e===t.KeyCode.ENTER&&v.executeCommand(s.BreakLineCommand.id)}}),[v]);return(0,o.useImperativeHandle)(r,()=>({reply(e){var t,n;if(!w.current)return;C.focus((t=w.current.getEditorId())==null?``:t);let r=S(e);(n=w.current)==null||n.setDocumentData(r,[{startOffset:r.body.dataStream.length-2,endOffset:r.body.dataStream.length-2,collapsed:!0}])}})),(0,c.jsxs)(`div`,{onClick:e=>e.preventDefault(),children:[(0,c.jsx)(s.RichTextEditor,{className:`univer-w-full`,editorRef:w,editorId:_,autoFocus:p,keyboardEventConfig:O,placeholder:y.t(`threadCommentUI.editor.placeholder`),initialValue:(l==null?void 0:l.text)&&S(l.text),onFocusChange:e=>e&&x(e),isSingle:!1,maxHeight:64,onClickOutside:()=>{setTimeout(()=>{C.focus(T)},30)}}),b?(0,c.jsxs)(`div`,{className:`univer-mt-3 univer-flex univer-flex-row univer-justify-end univer-gap-2`,children:[(0,c.jsx)(i.Button,{onClick:()=>{var e;f==null||f(),x(!1),(e=w.current)==null||e.replaceText(``,!0),v.executeCommand(g.id)},children:y.t(`threadCommentUI.editor.cancel`)}),(0,c.jsx)(i.Button,{variant:`primary`,disabled:!E,onClick:()=>{if(w.current){let t=e.Tools.deepClone(w.current.getDocumentData().body);x(!1),u==null||u({...l,text:t}),w.current.replaceText(``),setTimeout(()=>{var e,t;(e=w.current)==null||e.setSelectionRanges([]),(t=w.current)==null||t.blur()},10)}},children:y.t(d?`threadCommentUI.editor.save`:`threadCommentUI.editor.reply`)})]}):null]})}),w=e=>{let{dataStream:t,customRanges:n}=e,r=t.endsWith(`\r
|
|
2
2
|
`)?t.length-2:t.length,i=[],a=0;return n==null||n.forEach(e=>{a<e.startIndex&&i.push({type:`text`,content:t.slice(a,e.startIndex)}),i.push({type:`mention`,content:{label:t.slice(e.startIndex,e.endIndex+1),id:e.rangeId}}),a=e.endIndex+1}),i.push({type:`text`,content:t.slice(a,r)}),i},T=t=>{if(!t)return[];let{paragraphs:n=[]}=t;return n.map((r,i)=>w((0,e.getBodySlice)(t,i===0?0:n[i-1].startIndex+1,r.startIndex)))},E=t=>{let n=``,r=[];return t.forEach(t=>{switch(t.type){case`text`:n+=t.content;break;case`mention`:{let i=n.length;n+=t.content.label;let a=n.length-1;r.push({rangeId:t.content.id,rangeType:e.CustomRangeType.MENTION,startIndex:i,endIndex:a,properties:{},wholeEntity:!0});break}default:break}}),n+=`\r
|
|
3
3
|
`,{textRuns:[],paragraphs:[{startIndex:n.length-2,paragraphStyle:{}}],sectionBreaks:[{startIndex:n.length-1}],dataStream:n,customRanges:r}};let D=function(e){return e.CELL=`CELL`,e.PANEL=`PANEL`,e}({});const O=`__mock__`,k=n=>{let{item:s,unitId:l,subUnitId:u,editing:d,onEditingChange:f,onReply:p,resolved:m,isRoot:h,onClose:g,onDeleteComment:_,type:v,threadCommentEditorId:y}=n,b=(0,t.useDependency)(e.ICommandService),x=(0,t.useDependency)(e.LocaleService),S=(0,t.useDependency)(e.UserManagerService),w=S.getUser(s.personId),E=(0,t.useObservable)(S.currentUser$),D=(E==null?void 0:E.userID)===s.personId,k=s.id===O,[A,j]=(0,o.useState)(!1),M=(0,t.useConfigValue)(t.UI_PLUGIN_CONFIG_KEY),N=M==null?void 0:M.avatarFallback;return(0,c.jsxs)(`div`,{className:`univer-relative univer-mb-3 univer-pl-[30px]`,onMouseLeave:()=>j(!1),onMouseEnter:()=>j(!0),children:[(0,c.jsx)(`div`,{className:`univer-absolute univer-left-0 univer-top-0 univer-size-6 univer-rounded-full univer-bg-cover univer-bg-center univer-bg-no-repeat`,style:{backgroundImage:`url(${(w==null?void 0:w.avatar)||N})`}}),w?(0,c.jsxs)(`div`,{className:`univer-mb-1 univer-flex univer-h-6 univer-items-center univer-justify-between`,children:[(0,c.jsx)(`div`,{className:`univer-text-sm univer-font-medium univer-leading-5`,children:(w==null?void 0:w.name)||` `}),(0,c.jsxs)(`div`,{children:[k||m?null:A&&w?(0,c.jsx)(`div`,{className:`univer-ml-1 univer-inline-flex univer-size-6 univer-cursor-pointer univer-items-center univer-justify-center univer-rounded-sm univer-text-base hover:univer-bg-gray-50`,onClick:()=>p(w),children:(0,c.jsx)(a.ReplyToCommentIcon,{})}):null,D&&!k&&!m?(0,c.jsx)(i.Dropdown,{overlay:(0,c.jsx)(`div`,{className:`univer-rounded-lg`,children:(0,c.jsxs)(`ul`,{className:`univer-m-0 univer-box-border univer-grid univer-list-none univer-p-1.5 univer-text-sm [&_a]:univer-block [&_a]:univer-cursor-pointer [&_a]:univer-rounded [&_a]:univer-px-2 [&_a]:univer-py-1.5 [&_a]:univer-transition-colors`,children:[(0,c.jsx)(`li`,{children:(0,c.jsx)(`a`,{className:`hover:univer-bg-gray-200`,onClick:()=>f==null?void 0:f(!0),children:x.t(`threadCommentUI.item.edit`)})}),(0,c.jsx)(`li`,{children:(0,c.jsx)(`a`,{className:`hover:univer-bg-gray-200`,onClick:()=>{(_==null?void 0:_(s))!==!1&&(b.executeCommand(h?r.DeleteCommentTreeCommand.id:r.DeleteCommentCommand.id,{unitId:l,subUnitId:u,commentId:s.id}),h&&(g==null||g()))},children:x.t(`threadCommentUI.item.delete`)})})]})}),children:(0,c.jsx)(`div`,{className:`univer-ml-1 univer-inline-flex univer-size-6 univer-cursor-pointer univer-items-center univer-justify-center univer-rounded-sm univer-text-base hover:univer-bg-gray-50`,children:(0,c.jsx)(a.MoreHorizontalIcon,{})})}):null]})]}):null,(0,c.jsx)(`time`,{className:`univer-mb-1 univer-text-xs/normal univer-text-gray-600 dark:!univer-text-gray-200`,children:s.dT}),d?(0,c.jsx)(C,{type:v,id:s.id,comment:s,onCancel:()=>f==null?void 0:f(!1),autoFocus:!0,unitId:l,subUnitId:u,editorId:y,onSave:({text:e,attachments:t})=>{f==null||f(!1),b.executeCommand(r.UpdateCommentCommand.id,{unitId:l,subUnitId:u,payload:{commentId:s.id,text:e,attachments:t}})}}):(0,c.jsx)(`div`,{className:`univer-text-sm univer-text-gray-900 dark:!univer-text-white`,children:T(s.text).map((e,t)=>(0,c.jsx)(`div`,{className:`univer-break-words`,children:e.map((e,t)=>{switch(e.type){case`mention`:return(0,c.jsxs)(`a`,{className:`univer-text-primary-600`,children:[e.content.label,` `]},t);default:return e.content}})},t))})]})},A=s=>{var l,u,d;let{id:f,unitId:p,subUnitId:m,refStr:h,showEdit:_=!0,onClick:v,showHighlight:y,onClose:b,getSubUnitName:x,location:S,autoFocus:w,onMouseEnter:T,onMouseLeave:A,onAddComment:j,onDeleteComment:M,onResolve:N,type:P,style:F,full:I}=s,L=(0,t.useDependency)(r.ThreadCommentModel),[R,z]=(0,o.useState)(!1),[B,V]=(0,o.useState)(``);(0,t.useObservable)((0,o.useMemo)(()=>L.commentUpdate$.pipe((0,n.debounceTime)(16)),[L]));let H=f?L.getCommentWithChildren(p,m,f):null,U=(0,t.useDependency)(e.ICommandService),W=(0,t.useDependency)(e.UserManagerService),G=H==null?void 0:H.root.resolved,K=(0,t.useObservable)(W.currentUser$),q=(0,o.useRef)(null),J=[...H?[H.root]:[{id:O,text:{dataStream:`
|
|
4
4
|
\r`},personId:(l=K==null?void 0:K.userID)==null?``:l,ref:h==null?``:h,dT:``,unitId:p,subUnitId:m,threadId:``}],...(u=H==null?void 0:H.children)==null?[]:u],Y=(0,o.useRef)(null),X=e=>{e.stopPropagation(),G?U.executeCommand(g.id,{unitId:p,subUnitId:m,commentId:f}):U.executeCommand(g.id),U.executeCommand(r.ResolveCommentCommand.id,{unitId:p,subUnitId:m,commentId:f,resolved:!G}),N==null||N(!G)},ee=e=>{e.stopPropagation(),U.executeCommand(g.id),!(H!=null&&H.root&&(M==null?void 0:M(H.root))===!1)&&(U.executeCommand(r.DeleteCommentTreeCommand.id,{unitId:p,subUnitId:m,commentId:f}),b==null||b())};(0,o.useEffect)(()=>A==null?void 0:A(),[]);let Z=x((d=H==null?void 0:H.root.subUnitId)==null?m:d),te=_&&!B&&!G,Q=`${h||(H==null?void 0:H.root.ref)||``}${Z?` · `:``}${Z}`,$=`${e.DOCS_COMMENT_EDITOR_UNIT_ID_KEY}_${S}`;return(0,c.jsxs)(`div`,{id:`${S}-${p}-${m}-${f}`,className:(0,i.clsx)(`univer-relative univer-box-border univer-rounded-md univer-bg-white univer-p-4 dark:!univer-bg-gray-900 dark:!univer-text-white`,i.borderClassName,{"univer-w-[278px]":!I,"univer-w-full":I,"univer-shadow":!G&&(y||R||S===D.CELL)}),style:F,onClick:v,onMouseEnter:()=>{T==null||T(),z(!0)},onMouseLeave:()=>{A==null||A(),z(!1)},children:[!G&&y&&(0,c.jsx)(`div`,{className:`univer-absolute univer-left-0 univer-right-0 univer-top-0 univer-h-1.5 univer-rounded-t-md univer-bg-yellow-400`}),(0,c.jsxs)(`div`,{className:`univer-mb-4 univer-flex univer-flex-row univer-items-center univer-justify-between univer-text-sm univer-leading-5`,children:[(0,c.jsxs)(`div`,{className:`univer-flex univer-flex-1 univer-flex-row univer-items-center univer-overflow-hidden`,children:[(0,c.jsx)(`div`,{className:`univer-mr-2 univer-h-3.5 univer-w-[3px] univer-flex-shrink-0 univer-flex-grow-0 univer-rounded-sm univer-bg-yellow-500`}),(0,c.jsx)(i.Tooltip,{showIfEllipsis:!0,title:Q,children:(0,c.jsx)(`span`,{className:`univer-flex-1 univer-truncate`,children:Q})})]}),!!H&&(0,c.jsxs)(`div`,{className:`univer-flex univer-flex-shrink-0 univer-flex-grow-0 univer-flex-row`,children:[(0,c.jsx)(`div`,{className:(0,i.clsx)(`univer-ml-1 univer-inline-flex univer-size-6 univer-cursor-pointer univer-items-center univer-justify-center univer-rounded-[3px] univer-text-base hover:univer-bg-gray-50 dark:hover:!univer-bg-gray-800`,{"univer-text-green-500":G}),onClick:X,children:G?(0,c.jsx)(a.ResolvedIcon,{}):(0,c.jsx)(a.SolveIcon,{})}),(K==null?void 0:K.userID)===H.root.personId?(0,c.jsx)(`div`,{className:`univer-ml-1 univer-inline-flex univer-size-6 univer-cursor-pointer univer-items-center univer-justify-center univer-rounded-[3px] univer-text-base hover:univer-bg-gray-50 dark:hover:!univer-bg-gray-800`,onClick:ee,children:(0,c.jsx)(a.DeleteIcon,{})}):null]})]}),(0,c.jsx)(`div`,{ref:Y,className:(0,i.clsx)(`univer-max-h-80 univer-overflow-y-auto univer-overflow-x-hidden`,i.scrollbarClassName),children:J.map(e=>(0,c.jsx)(k,{unitId:p,subUnitId:m,item:e,isRoot:e.id===(H==null?void 0:H.root.id),editing:B===e.id,resolved:H==null?void 0:H.root.resolved,type:P,threadCommentEditorId:$,onClose:b,onEditingChange:t=>{V(t?e.id:``)},onReply:e=>{e&&requestAnimationFrame(()=>{var t;(t=q.current)==null||t.reply(E([{type:`mention`,content:{id:e.userID,label:`@${e.name}`}},{type:`text`,content:` `}]))})},onAddComment:j,onDeleteComment:M},e.id))}),te&&(0,c.jsx)(`div`,{children:(0,c.jsx)(C,{ref:q,type:P,unitId:p,subUnitId:m,editorId:$,onSave:async({text:t,attachments:n})=>{var i,a;let o={text:t,attachments:n,dT:(0,r.getDT)(),id:(0,e.generateRandomId)(),ref:h,personId:(i=K==null?void 0:K.userID)==null?``:i,parentId:H==null?void 0:H.root.id,unitId:p,subUnitId:m,threadId:(a=H==null?void 0:H.root.threadId)==null?``:a};(j==null?void 0:j(o))!==!1&&(await U.executeCommand(r.AddCommentCommand.id,{unitId:p,subUnitId:m,comment:o}),Y.current&&(Y.current.scrollTop=Y.current.scrollHeight))},autoFocus:w||!H,onCancel:()=>{H||b==null||b()}},`${w}`)})]})},j=n=>{let{unitId:s,subUnitId$:l,type:u,onAdd:d,getSubUnitName:f,onResolve:p,sortComments:m,onItemLeave:_,onItemEnter:v,disableAdd:y,tempComment:b,onAddComment:x,onDeleteComment:S,showComments:C}=n,[w,T]=(0,o.useState)(`all`),[E,O]=(0,o.useState)(`all`),k=(0,t.useDependency)(e.LocaleService),j=(0,t.useDependency)(e.UserManagerService),M=(0,t.useDependency)(r.ThreadCommentModel),[N,P]=(0,o.useState)(()=>M.getUnit(s)),F=(0,t.useObservable)((0,t.useDependency)(h).activeCommentId$),I=(0,t.useObservable)(M.commentUpdate$),L=(0,t.useDependency)(e.ICommandService),R=(0,t.useObservable)(l),z=(0,o.useRef)(!0),B=D.PANEL,V=(0,t.useObservable)(j.currentUser$),H=(0,o.useMemo)(()=>{var e;let t=w===`all`?N:(e=N.filter(e=>e.subUnitId===R))==null?[]:e,n=m==null?(e=>e):m,r=t.map(e=>{var t;return{...e.root,children:(t=e.children)==null?[]:t,users:e.relativeUsers}});if(C){let e=new Map;return r.forEach(t=>{e.set(t.id,t)}),[...C,``].map(t=>e.get(t)).filter(Boolean)}else return n(r)},[C,w,N,m,R]),U=(0,o.useMemo)(()=>[...H.filter(e=>!e.resolved),...H.filter(e=>e.resolved)],[H]),W=(0,o.useMemo)(()=>E===`resolved`?U.filter(e=>e.resolved):E===`unsolved`?U.filter(e=>!e.resolved):E===`concern_me`&&V!=null&&V.userID?U.filter(e=>e==null?void 0:e.users.has(V.userID)):U,[U,V==null?void 0:V.userID,E]),G=b?[b,...W]:W,K=G.filter(e=>!e.resolved),q=G.filter(e=>e.resolved),J=E!==`all`||w!==`all`,Y=()=>{O(`all`),T(`all`)};(0,o.useEffect)(()=>{s&&P(M.getUnit(s))},[s,M,I]),(0,o.useEffect)(()=>{var e;if(!F)return;if(!z.current){z.current=!0;return}let{unitId:t,subUnitId:n,commentId:r}=F,i=`${B}-${t}-${n}-${r}`;(e=document.getElementById(i))==null||e.scrollIntoView({block:`center`})},[F]);let X=e=>(0,c.jsx)(A,{location:B,getSubUnitName:f,id:e.id,unitId:e.unitId,subUnitId:e.subUnitId,refStr:e.ref,type:u,showEdit:(F==null?void 0:F.commentId)===e.id,showHighlight:(F==null?void 0:F.commentId)===e.id,onClick:()=>{z.current=!1,e.resolved?L.executeCommand(g.id):L.executeCommand(g.id,{unitId:e.unitId,subUnitId:e.subUnitId,commentId:e.id,temp:!1})},onMouseEnter:()=>v==null?void 0:v(e),onMouseLeave:()=>_==null?void 0:_(e),onAddComment:x,onDeleteComment:S,onResolve:t=>p==null?void 0:p(e.id,t)},e.id);return(0,c.jsxs)(`div`,{className:`univer-flex univer-min-h-full univer-flex-col univer-pb-3`,children:[(0,c.jsxs)(`div`,{className:`univer-mt-3 univer-flex univer-flex-row univer-justify-between`,children:[u===e.UniverInstanceType.UNIVER_SHEET?(0,c.jsx)(i.Select,{borderless:!0,value:w,options:[{value:`current`,label:k.t(`threadCommentUI.filter.sheet.current`)},{value:`all`,label:k.t(`threadCommentUI.filter.sheet.all`)}],onChange:T}):null,(0,c.jsx)(i.Select,{borderless:!0,value:E,options:[{value:`all`,label:k.t(`threadCommentUI.filter.status.all`)},{value:`resolved`,label:k.t(`threadCommentUI.filter.status.resolved`)},{value:`unsolved`,label:k.t(`threadCommentUI.filter.status.unsolved`)},{value:`concern_me`,label:k.t(`threadCommentUI.filter.status.concernMe`)}],onChange:O})]}),G.length===0?(0,c.jsxs)(`div`,{className:`univer-flex univer-flex-1 univer-flex-col univer-items-center univer-justify-center univer-text-sm univer-text-gray-600 dark:!univer-text-gray-200`,children:[k.t(`threadCommentUI.panel.empty`),J?(0,c.jsx)(`div`,{className:`univer-mt-2 univer-flex univer-flex-row`,children:(0,c.jsx)(i.Button,{onClick:Y,children:k.t(`threadCommentUI.panel.reset`)})}):y?null:(0,c.jsx)(`div`,{className:`univer-mt-2 univer-flex univer-flex-row`,children:(0,c.jsxs)(i.Button,{onClick:d,children:[(0,c.jsx)(a.IncreaseIcon,{className:`univer-mr-1.5`}),k.t(`threadCommentUI.panel.addComment`)]})})]}):(0,c.jsxs)(`div`,{className:`univer-mt-3 univer-flex univer-flex-col univer-gap-3`,children:[K.map(X),q.length>0&&(0,c.jsx)(`div`,{className:`univer-text-xs`,children:k.t(`threadCommentUI.panel.solved`)}),q.map(X)]})]})};exports.SetActiveCommentOperation=g,exports.ThreadCommentPanel=j,Object.defineProperty(exports,`ThreadCommentPanelService`,{enumerable:!0,get:function(){return h}}),exports.ThreadCommentTree=A,exports.ThreadCommentTreeLocation=D,Object.defineProperty(exports,`UniverThreadCommentUIPlugin`,{enumerable:!0,get:function(){return x}});
|
package/lib/es/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{BuildTextUtils as e,CommandType as t,CustomRangeType as n,DOCS_COMMENT_EDITOR_UNIT_ID_KEY as r,DOCS_NORMAL_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,UserManagerService as g,generateRandomId as _,getBodySlice as v,merge as y,mergeOverrideWithDependencies as b}from"@univerjs/core";import{ISidebarService as x,KeyCode as S,UI_PLUGIN_CONFIG_KEY as C,useConfigValue as w,useDependency as T,useObservable as E}from"@univerjs/ui";import{BehaviorSubject as D,debounceTime as O,filter as k}from"rxjs";import{AddCommentCommand as A,DeleteCommentCommand as j,DeleteCommentTreeCommand as ee,ResolveCommentCommand as te,ThreadCommentModel as ne,UniverThreadCommentPlugin as M,UpdateCommentCommand as N,getDT as P}from"@univerjs/thread-comment";import{Button as F,Dropdown as I,Select as L,Tooltip as R,borderClassName as re,clsx as z,scrollbarClassName as ie}from"@univerjs/design";import{DeleteIcon as ae,IncreaseIcon as B,MoreHorizontalIcon as oe,ReplyToCommentIcon as V,ResolvedIcon as se,SolveIcon as ce}from"@univerjs/icons";import{forwardRef as H,useEffect as le,useImperativeHandle as ue,useMemo as U,useRef as de,useState as W}from"react";import{BreakLineCommand as fe,IEditorService as G,RichTextEditor as pe}from"@univerjs/docs-ui";import{jsx as K,jsxs as q}from"react/jsx-runtime";function J(e){"@babel/helpers - typeof";return J=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},J(e)}function me(e,t){if(J(e)!=`object`||!e)return e;var n=e[Symbol.toPrimitive];if(n!==void 0){var r=n.call(e,t||`default`);if(J(r)!=`object`)return r;throw TypeError(`@@toPrimitive must return a primitive value.`)}return(t===`string`?String:Number)(e)}function he(e){var t=me(e,`string`);return J(t)==`symbol`?t:t+``}function Y(e,t,n){return(t=he(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function X(e,t){return function(n,r){t(n,r,e)}}function ge(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 Z=class extends o{constructor(e,t){super(),this._sidebarService=e,this._univerInstanceService=t,Y(this,`_panelVisible`,!1),Y(this,`_panelVisible$`,new D(!1)),Y(this,`_activeCommentId`,void 0),Y(this,`_activeCommentId$`,new D(void 0)),Y(this,`panelVisible$`,this._panelVisible$.asObservable()),Y(this,`activeCommentId$`,this._activeCommentId$.asObservable()),this._init(),this.disposeWithMe(()=>{this._activeCommentId$.complete(),this._panelVisible$.complete()})}_init(){this.disposeWithMe(this._sidebarService.sidebarOptions$.subscribe(e=>{e.visible||this.setPanelVisible(!1)})),this.disposeWithMe(this._univerInstanceService.getCurrentTypeOfUnit$(h.UNIVER_SHEET).pipe(k(e=>!e)).subscribe(()=>{this._sidebarService.close()}))}get panelVisible(){return this._panelVisible}get activeCommentId(){return this._activeCommentId}setPanelVisible(e){this._panelVisible=e,this._panelVisible$.next(e)}setActiveComment(e){this._activeCommentId=e,this._activeCommentId$.next(e)}};Z=ge([X(0,u(x)),X(1,l)],Z);const Q={id:`thread-comment-ui.operation.set-active-comment`,type:t.OPERATION,handler(e,t){return e.get(Z).setActiveComment(t),!0}};var _e=`@univerjs/thread-comment-ui`,ve=`0.20.
|
|
1
|
+
import{BuildTextUtils as e,CommandType as t,CustomRangeType as n,DOCS_COMMENT_EDITOR_UNIT_ID_KEY as r,DOCS_NORMAL_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,UserManagerService as g,generateRandomId as _,getBodySlice as v,merge as y,mergeOverrideWithDependencies as b}from"@univerjs/core";import{ISidebarService as x,KeyCode as S,UI_PLUGIN_CONFIG_KEY as C,useConfigValue as w,useDependency as T,useObservable as E}from"@univerjs/ui";import{BehaviorSubject as D,debounceTime as O,filter as k}from"rxjs";import{AddCommentCommand as A,DeleteCommentCommand as j,DeleteCommentTreeCommand as ee,ResolveCommentCommand as te,ThreadCommentModel as ne,UniverThreadCommentPlugin as M,UpdateCommentCommand as N,getDT as P}from"@univerjs/thread-comment";import{Button as F,Dropdown as I,Select as L,Tooltip as R,borderClassName as re,clsx as z,scrollbarClassName as ie}from"@univerjs/design";import{DeleteIcon as ae,IncreaseIcon as B,MoreHorizontalIcon as oe,ReplyToCommentIcon as V,ResolvedIcon as se,SolveIcon as ce}from"@univerjs/icons";import{forwardRef as H,useEffect as le,useImperativeHandle as ue,useMemo as U,useRef as de,useState as W}from"react";import{BreakLineCommand as fe,IEditorService as G,RichTextEditor as pe}from"@univerjs/docs-ui";import{jsx as K,jsxs as q}from"react/jsx-runtime";function J(e){"@babel/helpers - typeof";return J=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},J(e)}function me(e,t){if(J(e)!=`object`||!e)return e;var n=e[Symbol.toPrimitive];if(n!==void 0){var r=n.call(e,t||`default`);if(J(r)!=`object`)return r;throw TypeError(`@@toPrimitive must return a primitive value.`)}return(t===`string`?String:Number)(e)}function he(e){var t=me(e,`string`);return J(t)==`symbol`?t:t+``}function Y(e,t,n){return(t=he(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function X(e,t){return function(n,r){t(n,r,e)}}function ge(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 Z=class extends o{constructor(e,t){super(),this._sidebarService=e,this._univerInstanceService=t,Y(this,`_panelVisible`,!1),Y(this,`_panelVisible$`,new D(!1)),Y(this,`_activeCommentId`,void 0),Y(this,`_activeCommentId$`,new D(void 0)),Y(this,`panelVisible$`,this._panelVisible$.asObservable()),Y(this,`activeCommentId$`,this._activeCommentId$.asObservable()),this._init(),this.disposeWithMe(()=>{this._activeCommentId$.complete(),this._panelVisible$.complete()})}_init(){this.disposeWithMe(this._sidebarService.sidebarOptions$.subscribe(e=>{e.visible||this.setPanelVisible(!1)})),this.disposeWithMe(this._univerInstanceService.getCurrentTypeOfUnit$(h.UNIVER_SHEET).pipe(k(e=>!e)).subscribe(()=>{this._sidebarService.close()}))}get panelVisible(){return this._panelVisible}get activeCommentId(){return this._activeCommentId}setPanelVisible(e){this._panelVisible=e,this._panelVisible$.next(e)}setActiveComment(e){this._activeCommentId=e,this._activeCommentId$.next(e)}};Z=ge([X(0,u(x)),X(1,l)],Z);const Q={id:`thread-comment-ui.operation.set-active-comment`,type:t.OPERATION,handler(e,t){return e.get(Z).setActiveComment(t),!0}};var _e=`@univerjs/thread-comment-ui`,ve=`0.20.1`;const ye=`thread-comment-ui.config`;Symbol(ye);const be={};let $=class extends p{constructor(e=be,t,n,r){super(),this._config=e,this._injector=t,this._commandService=n,this._configService=r;let{menu:i,...a}=y({},be,this._config);i&&this._configService.setConfig(`menu`,i,{merge:!0}),this._configService.setConfig(ye,a)}onStarting(){var e;b([[Z]],(e=this._config)==null?void 0:e.overrides).forEach(e=>{this._injector.add(e)}),[Q].forEach(e=>{this._commandService.registerCommand(e)})}};Y($,`pluginName`,`UNIVER_THREAD_COMMENT_UI_PLUGIN`),Y($,`packageName`,_e),Y($,`version`,ve),Y($,`type`,h.UNIVER_UNKNOWN),$=ge([a(M),X(1,u(d)),X(2,s),X(3,c)],$);function xe(e){return{id:`d`,body:e,documentStyle:{}}}const Se=H((t,n)=>{var r;let{comment:a,onSave:o,id:c,onCancel:l,autoFocus:u,unitId:d,type:p,editorId:g}=t,_=T(s),v=T(f),[y,b]=W(!1),x=T(G),C=de(null),w=p===h.UNIVER_DOC?i:d,[E,D]=W(()=>{var t,n;return e.transform.getPlainText((t=(n=C.current)==null||(n=n.getDocumentData().body)==null?void 0:n.dataStream)==null?``:t)});le(()=>{var t,n,r;D(e.transform.getPlainText((t=(n=C.current)==null||(n=n.getDocumentData().body)==null?void 0:n.dataStream)==null?``:t));let i=(r=C.current)==null?void 0:r.selectionChange$.subscribe(()=>{var t,n;D(e.transform.getPlainText((t=(n=C.current)==null||(n=n.getDocumentData().body)==null?void 0:n.dataStream)==null?``:t))});return()=>i==null?void 0:i.unsubscribe()},[(r=C.current)==null?void 0:r.selectionChange$]);let O=U(()=>({keyCodes:[{keyCode:S.ENTER}],handler:e=>{e===S.ENTER&&_.executeCommand(fe.id)}}),[_]);return ue(n,()=>({reply(e){var t,n;if(!C.current)return;x.focus((t=C.current.getEditorId())==null?``:t);let r=xe(e);(n=C.current)==null||n.setDocumentData(r,[{startOffset:r.body.dataStream.length-2,endOffset:r.body.dataStream.length-2,collapsed:!0}])}})),q(`div`,{onClick:e=>e.preventDefault(),children:[K(pe,{className:`univer-w-full`,editorRef:C,editorId:g,autoFocus:u,keyboardEventConfig:O,placeholder:v.t(`threadCommentUI.editor.placeholder`),initialValue:(a==null?void 0:a.text)&&xe(a.text),onFocusChange:e=>e&&b(e),isSingle:!1,maxHeight:64,onClickOutside:()=>{setTimeout(()=>{x.focus(w)},30)}}),y?q(`div`,{className:`univer-mt-3 univer-flex univer-flex-row univer-justify-end univer-gap-2`,children:[K(F,{onClick:()=>{var e;l==null||l(),b(!1),(e=C.current)==null||e.replaceText(``,!0),_.executeCommand(Q.id)},children:v.t(`threadCommentUI.editor.cancel`)}),K(F,{variant:`primary`,disabled:!E,onClick:()=>{if(C.current){let e=m.deepClone(C.current.getDocumentData().body);b(!1),o==null||o({...a,text:e}),C.current.replaceText(``),setTimeout(()=>{var e,t;(e=C.current)==null||e.setSelectionRanges([]),(t=C.current)==null||t.blur()},10)}},children:v.t(c?`threadCommentUI.editor.save`:`threadCommentUI.editor.reply`)})]}):null]})}),Ce=e=>{let{dataStream:t,customRanges:n}=e,r=t.endsWith(`\r
|
|
2
2
|
`)?t.length-2:t.length,i=[],a=0;return n==null||n.forEach(e=>{a<e.startIndex&&i.push({type:`text`,content:t.slice(a,e.startIndex)}),i.push({type:`mention`,content:{label:t.slice(e.startIndex,e.endIndex+1),id:e.rangeId}}),a=e.endIndex+1}),i.push({type:`text`,content:t.slice(a,r)}),i},we=e=>{if(!e)return[];let{paragraphs:t=[]}=e;return t.map((n,r)=>Ce(v(e,r===0?0:t[r-1].startIndex+1,n.startIndex)))},Te=e=>{let t=``,r=[];return e.forEach(e=>{switch(e.type){case`text`:t+=e.content;break;case`mention`:{let i=t.length;t+=e.content.label;let a=t.length-1;r.push({rangeId:e.content.id,rangeType:n.MENTION,startIndex:i,endIndex:a,properties:{},wholeEntity:!0});break}default:break}}),t+=`\r
|
|
3
3
|
`,{textRuns:[],paragraphs:[{startIndex:t.length-2,paragraphStyle:{}}],sectionBreaks:[{startIndex:t.length-1}],dataStream:t,customRanges:r}};let Ee=function(e){return e.CELL=`CELL`,e.PANEL=`PANEL`,e}({});const De=`__mock__`,Oe=e=>{let{item:t,unitId:n,subUnitId:r,editing:i,onEditingChange:a,onReply:o,resolved:c,isRoot:l,onClose:u,onDeleteComment:d,type:p,threadCommentEditorId:m}=e,h=T(s),_=T(f),v=T(g),y=v.getUser(t.personId),b=E(v.currentUser$),x=(b==null?void 0:b.userID)===t.personId,S=t.id===De,[D,O]=W(!1),k=w(C),A=k==null?void 0:k.avatarFallback;return q(`div`,{className:`univer-relative univer-mb-3 univer-pl-[30px]`,onMouseLeave:()=>O(!1),onMouseEnter:()=>O(!0),children:[K(`div`,{className:`univer-absolute univer-left-0 univer-top-0 univer-size-6 univer-rounded-full univer-bg-cover univer-bg-center univer-bg-no-repeat`,style:{backgroundImage:`url(${(y==null?void 0:y.avatar)||A})`}}),y?q(`div`,{className:`univer-mb-1 univer-flex univer-h-6 univer-items-center univer-justify-between`,children:[K(`div`,{className:`univer-text-sm univer-font-medium univer-leading-5`,children:(y==null?void 0:y.name)||` `}),q(`div`,{children:[S||c?null:D&&y?K(`div`,{className:`univer-ml-1 univer-inline-flex univer-size-6 univer-cursor-pointer univer-items-center univer-justify-center univer-rounded-sm univer-text-base hover:univer-bg-gray-50`,onClick:()=>o(y),children:K(V,{})}):null,x&&!S&&!c?K(I,{overlay:K(`div`,{className:`univer-rounded-lg`,children:q(`ul`,{className:`univer-m-0 univer-box-border univer-grid univer-list-none univer-p-1.5 univer-text-sm [&_a]:univer-block [&_a]:univer-cursor-pointer [&_a]:univer-rounded [&_a]:univer-px-2 [&_a]:univer-py-1.5 [&_a]:univer-transition-colors`,children:[K(`li`,{children:K(`a`,{className:`hover:univer-bg-gray-200`,onClick:()=>a==null?void 0:a(!0),children:_.t(`threadCommentUI.item.edit`)})}),K(`li`,{children:K(`a`,{className:`hover:univer-bg-gray-200`,onClick:()=>{(d==null?void 0:d(t))!==!1&&(h.executeCommand(l?ee.id:j.id,{unitId:n,subUnitId:r,commentId:t.id}),l&&(u==null||u()))},children:_.t(`threadCommentUI.item.delete`)})})]})}),children:K(`div`,{className:`univer-ml-1 univer-inline-flex univer-size-6 univer-cursor-pointer univer-items-center univer-justify-center univer-rounded-sm univer-text-base hover:univer-bg-gray-50`,children:K(oe,{})})}):null]})]}):null,K(`time`,{className:`univer-mb-1 univer-text-xs/normal univer-text-gray-600 dark:!univer-text-gray-200`,children:t.dT}),i?K(Se,{type:p,id:t.id,comment:t,onCancel:()=>a==null?void 0:a(!1),autoFocus:!0,unitId:n,subUnitId:r,editorId:m,onSave:({text:e,attachments:i})=>{a==null||a(!1),h.executeCommand(N.id,{unitId:n,subUnitId:r,payload:{commentId:t.id,text:e,attachments:i}})}}):K(`div`,{className:`univer-text-sm univer-text-gray-900 dark:!univer-text-white`,children:we(t.text).map((e,t)=>K(`div`,{className:`univer-break-words`,children:e.map((e,t)=>{switch(e.type){case`mention`:return q(`a`,{className:`univer-text-primary-600`,children:[e.content.label,` `]},t);default:return e.content}})},t))})]})},ke=e=>{var t,n,i;let{id:a,unitId:o,subUnitId:c,refStr:l,showEdit:u=!0,onClick:d,showHighlight:f,onClose:p,getSubUnitName:m,location:h,autoFocus:v,onMouseEnter:y,onMouseLeave:b,onAddComment:x,onDeleteComment:S,onResolve:C,type:w,style:D,full:k}=e,j=T(ne),[M,N]=W(!1),[F,I]=W(``);E(U(()=>j.commentUpdate$.pipe(O(16)),[j]));let L=a?j.getCommentWithChildren(o,c,a):null,B=T(s),oe=T(g),V=L==null?void 0:L.root.resolved,H=E(oe.currentUser$),ue=de(null),fe=[...L?[L.root]:[{id:De,text:{dataStream:`
|
|
4
4
|
\r`},personId:(t=H==null?void 0:H.userID)==null?``:t,ref:l==null?``:l,dT:``,unitId:o,subUnitId:c,threadId:``}],...(n=L==null?void 0:L.children)==null?[]:n],G=de(null),pe=e=>{e.stopPropagation(),V?B.executeCommand(Q.id,{unitId:o,subUnitId:c,commentId:a}):B.executeCommand(Q.id),B.executeCommand(te.id,{unitId:o,subUnitId:c,commentId:a,resolved:!V}),C==null||C(!V)},J=e=>{e.stopPropagation(),B.executeCommand(Q.id),!(L!=null&&L.root&&(S==null?void 0:S(L.root))===!1)&&(B.executeCommand(ee.id,{unitId:o,subUnitId:c,commentId:a}),p==null||p())};le(()=>b==null?void 0:b(),[]);let me=m((i=L==null?void 0:L.root.subUnitId)==null?c:i),he=u&&!F&&!V,Y=`${l||(L==null?void 0:L.root.ref)||``}${me?` · `:``}${me}`,X=`${r}_${h}`;return q(`div`,{id:`${h}-${o}-${c}-${a}`,className:z(`univer-relative univer-box-border univer-rounded-md univer-bg-white univer-p-4 dark:!univer-bg-gray-900 dark:!univer-text-white`,re,{"univer-w-[278px]":!k,"univer-w-full":k,"univer-shadow":!V&&(f||M||h===Ee.CELL)}),style:D,onClick:d,onMouseEnter:()=>{y==null||y(),N(!0)},onMouseLeave:()=>{b==null||b(),N(!1)},children:[!V&&f&&K(`div`,{className:`univer-absolute univer-left-0 univer-right-0 univer-top-0 univer-h-1.5 univer-rounded-t-md univer-bg-yellow-400`}),q(`div`,{className:`univer-mb-4 univer-flex univer-flex-row univer-items-center univer-justify-between univer-text-sm univer-leading-5`,children:[q(`div`,{className:`univer-flex univer-flex-1 univer-flex-row univer-items-center univer-overflow-hidden`,children:[K(`div`,{className:`univer-mr-2 univer-h-3.5 univer-w-[3px] univer-flex-shrink-0 univer-flex-grow-0 univer-rounded-sm univer-bg-yellow-500`}),K(R,{showIfEllipsis:!0,title:Y,children:K(`span`,{className:`univer-flex-1 univer-truncate`,children:Y})})]}),!!L&&q(`div`,{className:`univer-flex univer-flex-shrink-0 univer-flex-grow-0 univer-flex-row`,children:[K(`div`,{className:z(`univer-ml-1 univer-inline-flex univer-size-6 univer-cursor-pointer univer-items-center univer-justify-center univer-rounded-[3px] univer-text-base hover:univer-bg-gray-50 dark:hover:!univer-bg-gray-800`,{"univer-text-green-500":V}),onClick:pe,children:K(V?se:ce,{})}),(H==null?void 0:H.userID)===L.root.personId?K(`div`,{className:`univer-ml-1 univer-inline-flex univer-size-6 univer-cursor-pointer univer-items-center univer-justify-center univer-rounded-[3px] univer-text-base hover:univer-bg-gray-50 dark:hover:!univer-bg-gray-800`,onClick:J,children:K(ae,{})}):null]})]}),K(`div`,{ref:G,className:z(`univer-max-h-80 univer-overflow-y-auto univer-overflow-x-hidden`,ie),children:fe.map(e=>K(Oe,{unitId:o,subUnitId:c,item:e,isRoot:e.id===(L==null?void 0:L.root.id),editing:F===e.id,resolved:L==null?void 0:L.root.resolved,type:w,threadCommentEditorId:X,onClose:p,onEditingChange:t=>{I(t?e.id:``)},onReply:e=>{e&&requestAnimationFrame(()=>{var t;(t=ue.current)==null||t.reply(Te([{type:`mention`,content:{id:e.userID,label:`@${e.name}`}},{type:`text`,content:` `}]))})},onAddComment:x,onDeleteComment:S},e.id))}),he&&K(`div`,{children:K(Se,{ref:ue,type:w,unitId:o,subUnitId:c,editorId:X,onSave:async({text:e,attachments:t})=>{var n,r;let i={text:e,attachments:t,dT:P(),id:_(),ref:l,personId:(n=H==null?void 0:H.userID)==null?``:n,parentId:L==null?void 0:L.root.id,unitId:o,subUnitId:c,threadId:(r=L==null?void 0:L.root.threadId)==null?``:r};(x==null?void 0:x(i))!==!1&&(await B.executeCommand(A.id,{unitId:o,subUnitId:c,comment:i}),G.current&&(G.current.scrollTop=G.current.scrollHeight))},autoFocus:v||!L,onCancel:()=>{L||p==null||p()}},`${v}`)})]})},Ae=e=>{let{unitId:t,subUnitId$:n,type:r,onAdd:i,getSubUnitName:a,onResolve:o,sortComments:c,onItemLeave:l,onItemEnter:u,disableAdd:d,tempComment:p,onAddComment:m,onDeleteComment:_,showComments:v}=e,[y,b]=W(`all`),[x,S]=W(`all`),C=T(f),w=T(g),D=T(ne),[O,k]=W(()=>D.getUnit(t)),A=E(T(Z).activeCommentId$),j=E(D.commentUpdate$),ee=T(s),te=E(n),M=de(!0),N=Ee.PANEL,P=E(w.currentUser$),I=U(()=>{var e;let t=y===`all`?O:(e=O.filter(e=>e.subUnitId===te))==null?[]:e,n=c==null?(e=>e):c,r=t.map(e=>{var t;return{...e.root,children:(t=e.children)==null?[]:t,users:e.relativeUsers}});if(v){let e=new Map;return r.forEach(t=>{e.set(t.id,t)}),[...v,``].map(t=>e.get(t)).filter(Boolean)}else return n(r)},[v,y,O,c,te]),R=U(()=>[...I.filter(e=>!e.resolved),...I.filter(e=>e.resolved)],[I]),re=U(()=>x===`resolved`?R.filter(e=>e.resolved):x===`unsolved`?R.filter(e=>!e.resolved):x===`concern_me`&&P!=null&&P.userID?R.filter(e=>e==null?void 0:e.users.has(P.userID)):R,[R,P==null?void 0:P.userID,x]),z=p?[p,...re]:re,ie=z.filter(e=>!e.resolved),ae=z.filter(e=>e.resolved),oe=x!==`all`||y!==`all`,V=()=>{S(`all`),b(`all`)};le(()=>{t&&k(D.getUnit(t))},[t,D,j]),le(()=>{var e;if(!A)return;if(!M.current){M.current=!0;return}let{unitId:t,subUnitId:n,commentId:r}=A,i=`${N}-${t}-${n}-${r}`;(e=document.getElementById(i))==null||e.scrollIntoView({block:`center`})},[A]);let se=e=>K(ke,{location:N,getSubUnitName:a,id:e.id,unitId:e.unitId,subUnitId:e.subUnitId,refStr:e.ref,type:r,showEdit:(A==null?void 0:A.commentId)===e.id,showHighlight:(A==null?void 0:A.commentId)===e.id,onClick:()=>{M.current=!1,e.resolved?ee.executeCommand(Q.id):ee.executeCommand(Q.id,{unitId:e.unitId,subUnitId:e.subUnitId,commentId:e.id,temp:!1})},onMouseEnter:()=>u==null?void 0:u(e),onMouseLeave:()=>l==null?void 0:l(e),onAddComment:m,onDeleteComment:_,onResolve:t=>o==null?void 0:o(e.id,t)},e.id);return q(`div`,{className:`univer-flex univer-min-h-full univer-flex-col univer-pb-3`,children:[q(`div`,{className:`univer-mt-3 univer-flex univer-flex-row univer-justify-between`,children:[r===h.UNIVER_SHEET?K(L,{borderless:!0,value:y,options:[{value:`current`,label:C.t(`threadCommentUI.filter.sheet.current`)},{value:`all`,label:C.t(`threadCommentUI.filter.sheet.all`)}],onChange:b}):null,K(L,{borderless:!0,value:x,options:[{value:`all`,label:C.t(`threadCommentUI.filter.status.all`)},{value:`resolved`,label:C.t(`threadCommentUI.filter.status.resolved`)},{value:`unsolved`,label:C.t(`threadCommentUI.filter.status.unsolved`)},{value:`concern_me`,label:C.t(`threadCommentUI.filter.status.concernMe`)}],onChange:S})]}),z.length===0?q(`div`,{className:`univer-flex univer-flex-1 univer-flex-col univer-items-center univer-justify-center univer-text-sm univer-text-gray-600 dark:!univer-text-gray-200`,children:[C.t(`threadCommentUI.panel.empty`),oe?K(`div`,{className:`univer-mt-2 univer-flex univer-flex-row`,children:K(F,{onClick:V,children:C.t(`threadCommentUI.panel.reset`)})}):d?null:K(`div`,{className:`univer-mt-2 univer-flex univer-flex-row`,children:q(F,{onClick:i,children:[K(B,{className:`univer-mr-1.5`}),C.t(`threadCommentUI.panel.addComment`)]})})]}):q(`div`,{className:`univer-mt-3 univer-flex univer-flex-col univer-gap-3`,children:[ie.map(se),ae.length>0&&K(`div`,{className:`univer-text-xs`,children:C.t(`threadCommentUI.panel.solved`)}),ae.map(se)]})]})};export{Q as SetActiveCommentOperation,Ae as ThreadCommentPanel,Z as ThreadCommentPanelService,ke as ThreadCommentTree,Ee as ThreadCommentTreeLocation,$ as UniverThreadCommentUIPlugin};
|
package/lib/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{BuildTextUtils as e,CommandType as t,CustomRangeType as n,DOCS_COMMENT_EDITOR_UNIT_ID_KEY as r,DOCS_NORMAL_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,UserManagerService as g,generateRandomId as _,getBodySlice as v,merge as y,mergeOverrideWithDependencies as b}from"@univerjs/core";import{ISidebarService as x,KeyCode as S,UI_PLUGIN_CONFIG_KEY as C,useConfigValue as w,useDependency as T,useObservable as E}from"@univerjs/ui";import{BehaviorSubject as D,debounceTime as O,filter as k}from"rxjs";import{AddCommentCommand as A,DeleteCommentCommand as j,DeleteCommentTreeCommand as ee,ResolveCommentCommand as te,ThreadCommentModel as ne,UniverThreadCommentPlugin as M,UpdateCommentCommand as N,getDT as P}from"@univerjs/thread-comment";import{Button as F,Dropdown as I,Select as L,Tooltip as R,borderClassName as re,clsx as z,scrollbarClassName as ie}from"@univerjs/design";import{DeleteIcon as ae,IncreaseIcon as B,MoreHorizontalIcon as oe,ReplyToCommentIcon as V,ResolvedIcon as se,SolveIcon as ce}from"@univerjs/icons";import{forwardRef as H,useEffect as le,useImperativeHandle as ue,useMemo as U,useRef as de,useState as W}from"react";import{BreakLineCommand as fe,IEditorService as G,RichTextEditor as pe}from"@univerjs/docs-ui";import{jsx as K,jsxs as q}from"react/jsx-runtime";function J(e){"@babel/helpers - typeof";return J=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},J(e)}function me(e,t){if(J(e)!=`object`||!e)return e;var n=e[Symbol.toPrimitive];if(n!==void 0){var r=n.call(e,t||`default`);if(J(r)!=`object`)return r;throw TypeError(`@@toPrimitive must return a primitive value.`)}return(t===`string`?String:Number)(e)}function he(e){var t=me(e,`string`);return J(t)==`symbol`?t:t+``}function Y(e,t,n){return(t=he(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function X(e,t){return function(n,r){t(n,r,e)}}function ge(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 Z=class extends o{constructor(e,t){super(),this._sidebarService=e,this._univerInstanceService=t,Y(this,`_panelVisible`,!1),Y(this,`_panelVisible$`,new D(!1)),Y(this,`_activeCommentId`,void 0),Y(this,`_activeCommentId$`,new D(void 0)),Y(this,`panelVisible$`,this._panelVisible$.asObservable()),Y(this,`activeCommentId$`,this._activeCommentId$.asObservable()),this._init(),this.disposeWithMe(()=>{this._activeCommentId$.complete(),this._panelVisible$.complete()})}_init(){this.disposeWithMe(this._sidebarService.sidebarOptions$.subscribe(e=>{e.visible||this.setPanelVisible(!1)})),this.disposeWithMe(this._univerInstanceService.getCurrentTypeOfUnit$(h.UNIVER_SHEET).pipe(k(e=>!e)).subscribe(()=>{this._sidebarService.close()}))}get panelVisible(){return this._panelVisible}get activeCommentId(){return this._activeCommentId}setPanelVisible(e){this._panelVisible=e,this._panelVisible$.next(e)}setActiveComment(e){this._activeCommentId=e,this._activeCommentId$.next(e)}};Z=ge([X(0,u(x)),X(1,l)],Z);const Q={id:`thread-comment-ui.operation.set-active-comment`,type:t.OPERATION,handler(e,t){return e.get(Z).setActiveComment(t),!0}};var _e=`@univerjs/thread-comment-ui`,ve=`0.20.
|
|
1
|
+
import{BuildTextUtils as e,CommandType as t,CustomRangeType as n,DOCS_COMMENT_EDITOR_UNIT_ID_KEY as r,DOCS_NORMAL_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,UserManagerService as g,generateRandomId as _,getBodySlice as v,merge as y,mergeOverrideWithDependencies as b}from"@univerjs/core";import{ISidebarService as x,KeyCode as S,UI_PLUGIN_CONFIG_KEY as C,useConfigValue as w,useDependency as T,useObservable as E}from"@univerjs/ui";import{BehaviorSubject as D,debounceTime as O,filter as k}from"rxjs";import{AddCommentCommand as A,DeleteCommentCommand as j,DeleteCommentTreeCommand as ee,ResolveCommentCommand as te,ThreadCommentModel as ne,UniverThreadCommentPlugin as M,UpdateCommentCommand as N,getDT as P}from"@univerjs/thread-comment";import{Button as F,Dropdown as I,Select as L,Tooltip as R,borderClassName as re,clsx as z,scrollbarClassName as ie}from"@univerjs/design";import{DeleteIcon as ae,IncreaseIcon as B,MoreHorizontalIcon as oe,ReplyToCommentIcon as V,ResolvedIcon as se,SolveIcon as ce}from"@univerjs/icons";import{forwardRef as H,useEffect as le,useImperativeHandle as ue,useMemo as U,useRef as de,useState as W}from"react";import{BreakLineCommand as fe,IEditorService as G,RichTextEditor as pe}from"@univerjs/docs-ui";import{jsx as K,jsxs as q}from"react/jsx-runtime";function J(e){"@babel/helpers - typeof";return J=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},J(e)}function me(e,t){if(J(e)!=`object`||!e)return e;var n=e[Symbol.toPrimitive];if(n!==void 0){var r=n.call(e,t||`default`);if(J(r)!=`object`)return r;throw TypeError(`@@toPrimitive must return a primitive value.`)}return(t===`string`?String:Number)(e)}function he(e){var t=me(e,`string`);return J(t)==`symbol`?t:t+``}function Y(e,t,n){return(t=he(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function X(e,t){return function(n,r){t(n,r,e)}}function ge(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 Z=class extends o{constructor(e,t){super(),this._sidebarService=e,this._univerInstanceService=t,Y(this,`_panelVisible`,!1),Y(this,`_panelVisible$`,new D(!1)),Y(this,`_activeCommentId`,void 0),Y(this,`_activeCommentId$`,new D(void 0)),Y(this,`panelVisible$`,this._panelVisible$.asObservable()),Y(this,`activeCommentId$`,this._activeCommentId$.asObservable()),this._init(),this.disposeWithMe(()=>{this._activeCommentId$.complete(),this._panelVisible$.complete()})}_init(){this.disposeWithMe(this._sidebarService.sidebarOptions$.subscribe(e=>{e.visible||this.setPanelVisible(!1)})),this.disposeWithMe(this._univerInstanceService.getCurrentTypeOfUnit$(h.UNIVER_SHEET).pipe(k(e=>!e)).subscribe(()=>{this._sidebarService.close()}))}get panelVisible(){return this._panelVisible}get activeCommentId(){return this._activeCommentId}setPanelVisible(e){this._panelVisible=e,this._panelVisible$.next(e)}setActiveComment(e){this._activeCommentId=e,this._activeCommentId$.next(e)}};Z=ge([X(0,u(x)),X(1,l)],Z);const Q={id:`thread-comment-ui.operation.set-active-comment`,type:t.OPERATION,handler(e,t){return e.get(Z).setActiveComment(t),!0}};var _e=`@univerjs/thread-comment-ui`,ve=`0.20.1`;const ye=`thread-comment-ui.config`;Symbol(ye);const be={};let $=class extends p{constructor(e=be,t,n,r){super(),this._config=e,this._injector=t,this._commandService=n,this._configService=r;let{menu:i,...a}=y({},be,this._config);i&&this._configService.setConfig(`menu`,i,{merge:!0}),this._configService.setConfig(ye,a)}onStarting(){var e;b([[Z]],(e=this._config)==null?void 0:e.overrides).forEach(e=>{this._injector.add(e)}),[Q].forEach(e=>{this._commandService.registerCommand(e)})}};Y($,`pluginName`,`UNIVER_THREAD_COMMENT_UI_PLUGIN`),Y($,`packageName`,_e),Y($,`version`,ve),Y($,`type`,h.UNIVER_UNKNOWN),$=ge([a(M),X(1,u(d)),X(2,s),X(3,c)],$);function xe(e){return{id:`d`,body:e,documentStyle:{}}}const Se=H((t,n)=>{var r;let{comment:a,onSave:o,id:c,onCancel:l,autoFocus:u,unitId:d,type:p,editorId:g}=t,_=T(s),v=T(f),[y,b]=W(!1),x=T(G),C=de(null),w=p===h.UNIVER_DOC?i:d,[E,D]=W(()=>{var t,n;return e.transform.getPlainText((t=(n=C.current)==null||(n=n.getDocumentData().body)==null?void 0:n.dataStream)==null?``:t)});le(()=>{var t,n,r;D(e.transform.getPlainText((t=(n=C.current)==null||(n=n.getDocumentData().body)==null?void 0:n.dataStream)==null?``:t));let i=(r=C.current)==null?void 0:r.selectionChange$.subscribe(()=>{var t,n;D(e.transform.getPlainText((t=(n=C.current)==null||(n=n.getDocumentData().body)==null?void 0:n.dataStream)==null?``:t))});return()=>i==null?void 0:i.unsubscribe()},[(r=C.current)==null?void 0:r.selectionChange$]);let O=U(()=>({keyCodes:[{keyCode:S.ENTER}],handler:e=>{e===S.ENTER&&_.executeCommand(fe.id)}}),[_]);return ue(n,()=>({reply(e){var t,n;if(!C.current)return;x.focus((t=C.current.getEditorId())==null?``:t);let r=xe(e);(n=C.current)==null||n.setDocumentData(r,[{startOffset:r.body.dataStream.length-2,endOffset:r.body.dataStream.length-2,collapsed:!0}])}})),q(`div`,{onClick:e=>e.preventDefault(),children:[K(pe,{className:`univer-w-full`,editorRef:C,editorId:g,autoFocus:u,keyboardEventConfig:O,placeholder:v.t(`threadCommentUI.editor.placeholder`),initialValue:(a==null?void 0:a.text)&&xe(a.text),onFocusChange:e=>e&&b(e),isSingle:!1,maxHeight:64,onClickOutside:()=>{setTimeout(()=>{x.focus(w)},30)}}),y?q(`div`,{className:`univer-mt-3 univer-flex univer-flex-row univer-justify-end univer-gap-2`,children:[K(F,{onClick:()=>{var e;l==null||l(),b(!1),(e=C.current)==null||e.replaceText(``,!0),_.executeCommand(Q.id)},children:v.t(`threadCommentUI.editor.cancel`)}),K(F,{variant:`primary`,disabled:!E,onClick:()=>{if(C.current){let e=m.deepClone(C.current.getDocumentData().body);b(!1),o==null||o({...a,text:e}),C.current.replaceText(``),setTimeout(()=>{var e,t;(e=C.current)==null||e.setSelectionRanges([]),(t=C.current)==null||t.blur()},10)}},children:v.t(c?`threadCommentUI.editor.save`:`threadCommentUI.editor.reply`)})]}):null]})}),Ce=e=>{let{dataStream:t,customRanges:n}=e,r=t.endsWith(`\r
|
|
2
2
|
`)?t.length-2:t.length,i=[],a=0;return n==null||n.forEach(e=>{a<e.startIndex&&i.push({type:`text`,content:t.slice(a,e.startIndex)}),i.push({type:`mention`,content:{label:t.slice(e.startIndex,e.endIndex+1),id:e.rangeId}}),a=e.endIndex+1}),i.push({type:`text`,content:t.slice(a,r)}),i},we=e=>{if(!e)return[];let{paragraphs:t=[]}=e;return t.map((n,r)=>Ce(v(e,r===0?0:t[r-1].startIndex+1,n.startIndex)))},Te=e=>{let t=``,r=[];return e.forEach(e=>{switch(e.type){case`text`:t+=e.content;break;case`mention`:{let i=t.length;t+=e.content.label;let a=t.length-1;r.push({rangeId:e.content.id,rangeType:n.MENTION,startIndex:i,endIndex:a,properties:{},wholeEntity:!0});break}default:break}}),t+=`\r
|
|
3
3
|
`,{textRuns:[],paragraphs:[{startIndex:t.length-2,paragraphStyle:{}}],sectionBreaks:[{startIndex:t.length-1}],dataStream:t,customRanges:r}};let Ee=function(e){return e.CELL=`CELL`,e.PANEL=`PANEL`,e}({});const De=`__mock__`,Oe=e=>{let{item:t,unitId:n,subUnitId:r,editing:i,onEditingChange:a,onReply:o,resolved:c,isRoot:l,onClose:u,onDeleteComment:d,type:p,threadCommentEditorId:m}=e,h=T(s),_=T(f),v=T(g),y=v.getUser(t.personId),b=E(v.currentUser$),x=(b==null?void 0:b.userID)===t.personId,S=t.id===De,[D,O]=W(!1),k=w(C),A=k==null?void 0:k.avatarFallback;return q(`div`,{className:`univer-relative univer-mb-3 univer-pl-[30px]`,onMouseLeave:()=>O(!1),onMouseEnter:()=>O(!0),children:[K(`div`,{className:`univer-absolute univer-left-0 univer-top-0 univer-size-6 univer-rounded-full univer-bg-cover univer-bg-center univer-bg-no-repeat`,style:{backgroundImage:`url(${(y==null?void 0:y.avatar)||A})`}}),y?q(`div`,{className:`univer-mb-1 univer-flex univer-h-6 univer-items-center univer-justify-between`,children:[K(`div`,{className:`univer-text-sm univer-font-medium univer-leading-5`,children:(y==null?void 0:y.name)||` `}),q(`div`,{children:[S||c?null:D&&y?K(`div`,{className:`univer-ml-1 univer-inline-flex univer-size-6 univer-cursor-pointer univer-items-center univer-justify-center univer-rounded-sm univer-text-base hover:univer-bg-gray-50`,onClick:()=>o(y),children:K(V,{})}):null,x&&!S&&!c?K(I,{overlay:K(`div`,{className:`univer-rounded-lg`,children:q(`ul`,{className:`univer-m-0 univer-box-border univer-grid univer-list-none univer-p-1.5 univer-text-sm [&_a]:univer-block [&_a]:univer-cursor-pointer [&_a]:univer-rounded [&_a]:univer-px-2 [&_a]:univer-py-1.5 [&_a]:univer-transition-colors`,children:[K(`li`,{children:K(`a`,{className:`hover:univer-bg-gray-200`,onClick:()=>a==null?void 0:a(!0),children:_.t(`threadCommentUI.item.edit`)})}),K(`li`,{children:K(`a`,{className:`hover:univer-bg-gray-200`,onClick:()=>{(d==null?void 0:d(t))!==!1&&(h.executeCommand(l?ee.id:j.id,{unitId:n,subUnitId:r,commentId:t.id}),l&&(u==null||u()))},children:_.t(`threadCommentUI.item.delete`)})})]})}),children:K(`div`,{className:`univer-ml-1 univer-inline-flex univer-size-6 univer-cursor-pointer univer-items-center univer-justify-center univer-rounded-sm univer-text-base hover:univer-bg-gray-50`,children:K(oe,{})})}):null]})]}):null,K(`time`,{className:`univer-mb-1 univer-text-xs/normal univer-text-gray-600 dark:!univer-text-gray-200`,children:t.dT}),i?K(Se,{type:p,id:t.id,comment:t,onCancel:()=>a==null?void 0:a(!1),autoFocus:!0,unitId:n,subUnitId:r,editorId:m,onSave:({text:e,attachments:i})=>{a==null||a(!1),h.executeCommand(N.id,{unitId:n,subUnitId:r,payload:{commentId:t.id,text:e,attachments:i}})}}):K(`div`,{className:`univer-text-sm univer-text-gray-900 dark:!univer-text-white`,children:we(t.text).map((e,t)=>K(`div`,{className:`univer-break-words`,children:e.map((e,t)=>{switch(e.type){case`mention`:return q(`a`,{className:`univer-text-primary-600`,children:[e.content.label,` `]},t);default:return e.content}})},t))})]})},ke=e=>{var t,n,i;let{id:a,unitId:o,subUnitId:c,refStr:l,showEdit:u=!0,onClick:d,showHighlight:f,onClose:p,getSubUnitName:m,location:h,autoFocus:v,onMouseEnter:y,onMouseLeave:b,onAddComment:x,onDeleteComment:S,onResolve:C,type:w,style:D,full:k}=e,j=T(ne),[M,N]=W(!1),[F,I]=W(``);E(U(()=>j.commentUpdate$.pipe(O(16)),[j]));let L=a?j.getCommentWithChildren(o,c,a):null,B=T(s),oe=T(g),V=L==null?void 0:L.root.resolved,H=E(oe.currentUser$),ue=de(null),fe=[...L?[L.root]:[{id:De,text:{dataStream:`
|
|
4
4
|
\r`},personId:(t=H==null?void 0:H.userID)==null?``:t,ref:l==null?``:l,dT:``,unitId:o,subUnitId:c,threadId:``}],...(n=L==null?void 0:L.children)==null?[]:n],G=de(null),pe=e=>{e.stopPropagation(),V?B.executeCommand(Q.id,{unitId:o,subUnitId:c,commentId:a}):B.executeCommand(Q.id),B.executeCommand(te.id,{unitId:o,subUnitId:c,commentId:a,resolved:!V}),C==null||C(!V)},J=e=>{e.stopPropagation(),B.executeCommand(Q.id),!(L!=null&&L.root&&(S==null?void 0:S(L.root))===!1)&&(B.executeCommand(ee.id,{unitId:o,subUnitId:c,commentId:a}),p==null||p())};le(()=>b==null?void 0:b(),[]);let me=m((i=L==null?void 0:L.root.subUnitId)==null?c:i),he=u&&!F&&!V,Y=`${l||(L==null?void 0:L.root.ref)||``}${me?` · `:``}${me}`,X=`${r}_${h}`;return q(`div`,{id:`${h}-${o}-${c}-${a}`,className:z(`univer-relative univer-box-border univer-rounded-md univer-bg-white univer-p-4 dark:!univer-bg-gray-900 dark:!univer-text-white`,re,{"univer-w-[278px]":!k,"univer-w-full":k,"univer-shadow":!V&&(f||M||h===Ee.CELL)}),style:D,onClick:d,onMouseEnter:()=>{y==null||y(),N(!0)},onMouseLeave:()=>{b==null||b(),N(!1)},children:[!V&&f&&K(`div`,{className:`univer-absolute univer-left-0 univer-right-0 univer-top-0 univer-h-1.5 univer-rounded-t-md univer-bg-yellow-400`}),q(`div`,{className:`univer-mb-4 univer-flex univer-flex-row univer-items-center univer-justify-between univer-text-sm univer-leading-5`,children:[q(`div`,{className:`univer-flex univer-flex-1 univer-flex-row univer-items-center univer-overflow-hidden`,children:[K(`div`,{className:`univer-mr-2 univer-h-3.5 univer-w-[3px] univer-flex-shrink-0 univer-flex-grow-0 univer-rounded-sm univer-bg-yellow-500`}),K(R,{showIfEllipsis:!0,title:Y,children:K(`span`,{className:`univer-flex-1 univer-truncate`,children:Y})})]}),!!L&&q(`div`,{className:`univer-flex univer-flex-shrink-0 univer-flex-grow-0 univer-flex-row`,children:[K(`div`,{className:z(`univer-ml-1 univer-inline-flex univer-size-6 univer-cursor-pointer univer-items-center univer-justify-center univer-rounded-[3px] univer-text-base hover:univer-bg-gray-50 dark:hover:!univer-bg-gray-800`,{"univer-text-green-500":V}),onClick:pe,children:K(V?se:ce,{})}),(H==null?void 0:H.userID)===L.root.personId?K(`div`,{className:`univer-ml-1 univer-inline-flex univer-size-6 univer-cursor-pointer univer-items-center univer-justify-center univer-rounded-[3px] univer-text-base hover:univer-bg-gray-50 dark:hover:!univer-bg-gray-800`,onClick:J,children:K(ae,{})}):null]})]}),K(`div`,{ref:G,className:z(`univer-max-h-80 univer-overflow-y-auto univer-overflow-x-hidden`,ie),children:fe.map(e=>K(Oe,{unitId:o,subUnitId:c,item:e,isRoot:e.id===(L==null?void 0:L.root.id),editing:F===e.id,resolved:L==null?void 0:L.root.resolved,type:w,threadCommentEditorId:X,onClose:p,onEditingChange:t=>{I(t?e.id:``)},onReply:e=>{e&&requestAnimationFrame(()=>{var t;(t=ue.current)==null||t.reply(Te([{type:`mention`,content:{id:e.userID,label:`@${e.name}`}},{type:`text`,content:` `}]))})},onAddComment:x,onDeleteComment:S},e.id))}),he&&K(`div`,{children:K(Se,{ref:ue,type:w,unitId:o,subUnitId:c,editorId:X,onSave:async({text:e,attachments:t})=>{var n,r;let i={text:e,attachments:t,dT:P(),id:_(),ref:l,personId:(n=H==null?void 0:H.userID)==null?``:n,parentId:L==null?void 0:L.root.id,unitId:o,subUnitId:c,threadId:(r=L==null?void 0:L.root.threadId)==null?``:r};(x==null?void 0:x(i))!==!1&&(await B.executeCommand(A.id,{unitId:o,subUnitId:c,comment:i}),G.current&&(G.current.scrollTop=G.current.scrollHeight))},autoFocus:v||!L,onCancel:()=>{L||p==null||p()}},`${v}`)})]})},Ae=e=>{let{unitId:t,subUnitId$:n,type:r,onAdd:i,getSubUnitName:a,onResolve:o,sortComments:c,onItemLeave:l,onItemEnter:u,disableAdd:d,tempComment:p,onAddComment:m,onDeleteComment:_,showComments:v}=e,[y,b]=W(`all`),[x,S]=W(`all`),C=T(f),w=T(g),D=T(ne),[O,k]=W(()=>D.getUnit(t)),A=E(T(Z).activeCommentId$),j=E(D.commentUpdate$),ee=T(s),te=E(n),M=de(!0),N=Ee.PANEL,P=E(w.currentUser$),I=U(()=>{var e;let t=y===`all`?O:(e=O.filter(e=>e.subUnitId===te))==null?[]:e,n=c==null?(e=>e):c,r=t.map(e=>{var t;return{...e.root,children:(t=e.children)==null?[]:t,users:e.relativeUsers}});if(v){let e=new Map;return r.forEach(t=>{e.set(t.id,t)}),[...v,``].map(t=>e.get(t)).filter(Boolean)}else return n(r)},[v,y,O,c,te]),R=U(()=>[...I.filter(e=>!e.resolved),...I.filter(e=>e.resolved)],[I]),re=U(()=>x===`resolved`?R.filter(e=>e.resolved):x===`unsolved`?R.filter(e=>!e.resolved):x===`concern_me`&&P!=null&&P.userID?R.filter(e=>e==null?void 0:e.users.has(P.userID)):R,[R,P==null?void 0:P.userID,x]),z=p?[p,...re]:re,ie=z.filter(e=>!e.resolved),ae=z.filter(e=>e.resolved),oe=x!==`all`||y!==`all`,V=()=>{S(`all`),b(`all`)};le(()=>{t&&k(D.getUnit(t))},[t,D,j]),le(()=>{var e;if(!A)return;if(!M.current){M.current=!0;return}let{unitId:t,subUnitId:n,commentId:r}=A,i=`${N}-${t}-${n}-${r}`;(e=document.getElementById(i))==null||e.scrollIntoView({block:`center`})},[A]);let se=e=>K(ke,{location:N,getSubUnitName:a,id:e.id,unitId:e.unitId,subUnitId:e.subUnitId,refStr:e.ref,type:r,showEdit:(A==null?void 0:A.commentId)===e.id,showHighlight:(A==null?void 0:A.commentId)===e.id,onClick:()=>{M.current=!1,e.resolved?ee.executeCommand(Q.id):ee.executeCommand(Q.id,{unitId:e.unitId,subUnitId:e.subUnitId,commentId:e.id,temp:!1})},onMouseEnter:()=>u==null?void 0:u(e),onMouseLeave:()=>l==null?void 0:l(e),onAddComment:m,onDeleteComment:_,onResolve:t=>o==null?void 0:o(e.id,t)},e.id);return q(`div`,{className:`univer-flex univer-min-h-full univer-flex-col univer-pb-3`,children:[q(`div`,{className:`univer-mt-3 univer-flex univer-flex-row univer-justify-between`,children:[r===h.UNIVER_SHEET?K(L,{borderless:!0,value:y,options:[{value:`current`,label:C.t(`threadCommentUI.filter.sheet.current`)},{value:`all`,label:C.t(`threadCommentUI.filter.sheet.all`)}],onChange:b}):null,K(L,{borderless:!0,value:x,options:[{value:`all`,label:C.t(`threadCommentUI.filter.status.all`)},{value:`resolved`,label:C.t(`threadCommentUI.filter.status.resolved`)},{value:`unsolved`,label:C.t(`threadCommentUI.filter.status.unsolved`)},{value:`concern_me`,label:C.t(`threadCommentUI.filter.status.concernMe`)}],onChange:S})]}),z.length===0?q(`div`,{className:`univer-flex univer-flex-1 univer-flex-col univer-items-center univer-justify-center univer-text-sm univer-text-gray-600 dark:!univer-text-gray-200`,children:[C.t(`threadCommentUI.panel.empty`),oe?K(`div`,{className:`univer-mt-2 univer-flex univer-flex-row`,children:K(F,{onClick:V,children:C.t(`threadCommentUI.panel.reset`)})}):d?null:K(`div`,{className:`univer-mt-2 univer-flex univer-flex-row`,children:q(F,{onClick:i,children:[K(B,{className:`univer-mr-1.5`}),C.t(`threadCommentUI.panel.addComment`)]})})]}):q(`div`,{className:`univer-mt-3 univer-flex univer-flex-col univer-gap-3`,children:[ie.map(se),ae.length>0&&K(`div`,{className:`univer-text-xs`,children:C.t(`threadCommentUI.panel.solved`)}),ae.map(se)]})]})};export{Q as SetActiveCommentOperation,Ae as ThreadCommentPanel,Z as ThreadCommentPanelService,ke as ThreadCommentTree,Ee as ThreadCommentTreeLocation,$ as UniverThreadCommentUIPlugin};
|
package/lib/umd/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`@univerjs/core`),require(`@univerjs/ui`),require(`rxjs`),require(`@univerjs/thread-comment`),require(`@univerjs/design`),require(`react`),require(`@univerjs/docs-ui`),require(`react/jsx-runtime`)):typeof define==`function`&&define.amd?define([`exports`,`@univerjs/core`,`@univerjs/ui`,`rxjs`,`@univerjs/thread-comment`,`@univerjs/design`,`react`,`@univerjs/docs-ui`,`react/jsx-runtime`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.UniverThreadCommentUi={},e.UniverCore,e.UniverUi,e.rxjs,e.UniverThreadComment,e.UniverDesign,e.React,e.UniverDocsUi,e.React))})(this,function(e,t,n,r,i,a,o,s,c){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});function l(e){"@babel/helpers - typeof";return l=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},l(e)}function u(e,t){if(l(e)!=`object`||!e)return e;var n=e[Symbol.toPrimitive];if(n!==void 0){var r=n.call(e,t||`default`);if(l(r)!=`object`)return r;throw TypeError(`@@toPrimitive must return a primitive value.`)}return(t===`string`?String:Number)(e)}function d(e){var t=u(e,`string`);return l(t)==`symbol`?t:t+``}function f(e,t,n){return(t=d(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function p(e,t){return function(n,r){t(n,r,e)}}function m(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 h=class extends t.Disposable{constructor(e,t){super(),this._sidebarService=e,this._univerInstanceService=t,f(this,`_panelVisible`,!1),f(this,`_panelVisible$`,new r.BehaviorSubject(!1)),f(this,`_activeCommentId`,void 0),f(this,`_activeCommentId$`,new r.BehaviorSubject(void 0)),f(this,`panelVisible$`,this._panelVisible$.asObservable()),f(this,`activeCommentId$`,this._activeCommentId$.asObservable()),this._init(),this.disposeWithMe(()=>{this._activeCommentId$.complete(),this._panelVisible$.complete()})}_init(){this.disposeWithMe(this._sidebarService.sidebarOptions$.subscribe(e=>{e.visible||this.setPanelVisible(!1)})),this.disposeWithMe(this._univerInstanceService.getCurrentTypeOfUnit$(t.UniverInstanceType.UNIVER_SHEET).pipe((0,r.filter)(e=>!e)).subscribe(()=>{this._sidebarService.close()}))}get panelVisible(){return this._panelVisible}get activeCommentId(){return this._activeCommentId}setPanelVisible(e){this._panelVisible=e,this._panelVisible$.next(e)}setActiveComment(e){this._activeCommentId=e,this._activeCommentId$.next(e)}};h=m([p(0,(0,t.Inject)(n.ISidebarService)),p(1,t.IUniverInstanceService)],h);let g={id:`thread-comment-ui.operation.set-active-comment`,type:t.CommandType.OPERATION,handler(e,t){return e.get(h).setActiveComment(t),!0}};var _=`@univerjs/thread-comment-ui`,v=`0.20.0`;let y=`thread-comment-ui.config`;Symbol(y);let b={},x=class extends t.Plugin{constructor(e=b,n,r,i){super(),this._config=e,this._injector=n,this._commandService=r,this._configService=i;let{menu:a,...o}=(0,t.merge)({},b,this._config);a&&this._configService.setConfig(`menu`,a,{merge:!0}),this._configService.setConfig(y,o)}onStarting(){var e;(0,t.mergeOverrideWithDependencies)([[h]],(e=this._config)==null?void 0:e.overrides).forEach(e=>{this._injector.add(e)}),[g].forEach(e=>{this._commandService.registerCommand(e)})}};f(x,`pluginName`,`UNIVER_THREAD_COMMENT_UI_PLUGIN`),f(x,`packageName`,_),f(x,`version`,v),f(x,`type`,t.UniverInstanceType.UNIVER_UNKNOWN),x=m([(0,t.DependentOn)(i.UniverThreadCommentPlugin),p(1,(0,t.Inject)(t.Injector)),p(2,t.ICommandService),p(3,t.IConfigService)],x);function S({ref:e,...t}){let{icon:n,id:r,className:i,extend:a,...s}=t,c=`univerjs-icon univerjs-icon-${r} ${i||``}`.trim(),l=(0,o.useRef)(`_${E()}`);return C(n,`${r}`,{defIds:n.defIds,idSuffix:l.current},{ref:e,className:c,...s},a)}function C(e,t,n,r,i){return(0,o.createElement)(e.tag,{key:t,...w(e,n,i),...r},(T(e,n).children||[]).map((r,a)=>C(r,`${t}-${e.tag}-${a}`,n,void 0,i)))}function w(e,t,n){let r={...e.attrs};n!=null&&n.colorChannel1&&r.fill===`colorChannel1`&&(r.fill=n.colorChannel1),e.tag===`mask`&&r.id&&(r.id+=t.idSuffix),Object.entries(r).forEach(([e,n])=>{e===`mask`&&typeof n==`string`&&(r[e]=n.replace(/url\(#(.*)\)/,`url(#$1${t.idSuffix})`))});let{defIds:i}=t;return!i||i.length===0?r:(e.tag===`use`&&r[`xlink:href`]&&(r[`xlink:href`]+=t.idSuffix),Object.entries(r).forEach(([e,n])=>{typeof n==`string`&&(r[e]=n.replace(/url\(#(.*)\)/,`url(#$1${t.idSuffix})`))}),r)}function T(e,t){var n;let{defIds:r}=t;return!r||r.length===0?e:e.tag===`defs`&&(n=e.children)!=null&&n.length?{...e,children:e.children.map(e=>typeof e.attrs.id==`string`&&r&&r.includes(e.attrs.id)?{...e,attrs:{...e.attrs,id:e.attrs.id+t.idSuffix}}:e)}:e}function E(){return Math.random().toString(36).substring(2,8)}S.displayName=`UniverIcon`;let D={tag:`svg`,attrs:{xmlns:`http://www.w3.org/2000/svg`,fill:`none`,viewBox:`0 0 16 16`,width:`1em`,height:`1em`},children:[{tag:`path`,attrs:{fill:`currentColor`,d:`M5.3313 1.4667C5.3313 1.13533 5.59993 0.866699 5.9313 0.866699H10.069C10.4004 0.866699 10.669 1.13533 10.669 1.4667C10.669 1.79807 10.4004 2.0667 10.069 2.0667H5.9313C5.59993 2.0667 5.3313 1.79807 5.3313 1.4667Z`}},{tag:`path`,attrs:{fill:`currentColor`,d:`M1.09985 3.64443C1.09985 3.31306 1.36848 3.04443 1.69985 3.04443H14.2999C14.6312 3.04443 14.8999 3.31306 14.8999 3.64443C14.8999 3.9758 14.6312 4.24443 14.2999 4.24443H1.69985C1.36848 4.24443 1.09985 3.9758 1.09985 3.64443Z`}},{tag:`path`,attrs:{fill:`currentColor`,d:`M6.12398 8.30171C6.35829 8.0674 6.73819 8.0674 6.97251 8.30171L8.00007 9.32928L9.02764 8.30171C9.26195 8.0674 9.64185 8.0674 9.87617 8.30171C10.1105 8.53603 10.1105 8.91593 9.87617 9.15024L8.8486 10.1778L9.87617 11.2054C10.1105 11.4397 10.1105 11.8196 9.87617 12.0539C9.64185 12.2882 9.26195 12.2882 9.02764 12.0539L8.00007 11.0263L6.97251 12.0539C6.73819 12.2882 6.35829 12.2882 6.12398 12.0539C5.88966 11.8196 5.88966 11.4397 6.12398 11.2054L7.15154 10.1778L6.12398 9.15024C5.88966 8.91593 5.88966 8.53603 6.12398 8.30171Z`}},{tag:`path`,attrs:{fill:`currentColor`,d:`M4.75332 5.22217C3.86966 5.22217 3.15332 5.93851 3.15332 6.82217V12.5331C3.15332 13.9691 4.31738 15.1332 5.75332 15.1332H10.2465C11.6825 15.1332 12.8465 13.9691 12.8465 12.5331V6.82217C12.8465 5.93851 12.1302 5.22217 11.2465 5.22217H4.75332ZM4.35332 6.82217C4.35332 6.60125 4.53241 6.42217 4.75332 6.42217H11.2465C11.4674 6.42217 11.6465 6.60125 11.6465 6.82217V12.5331C11.6465 13.3063 11.0197 13.9332 10.2465 13.9332H5.75332C4.98012 13.9332 4.35332 13.3063 4.35332 12.5331V6.82217Z`,fillRule:`evenodd`,clipRule:`evenodd`}}]},O=(0,o.forwardRef)(function(e,t){return(0,o.createElement)(S,Object.assign({},e,{id:`delete-icon`,ref:t,icon:D}))});O.displayName=`DeleteIcon`;let k={tag:`svg`,attrs:{xmlns:`http://www.w3.org/2000/svg`,fill:`none`,viewBox:`0 0 16 16`,width:`1em`,height:`1em`},children:[{tag:`path`,attrs:{fill:`currentColor`,d:`M8.6 1.99991C8.60001 1.66854 8.33138 1.39991 8.00001 1.3999C7.66864 1.3999 7.40001 1.66853 7.4 1.9999L7.39996 7.3999H1.9999C1.66853 7.3999 1.3999 7.66853 1.3999 7.9999C1.3999 8.33127 1.66853 8.5999 1.9999 8.5999H7.39995L7.3999 13.9999C7.3999 14.3313 7.66853 14.5999 7.9999 14.5999C8.33127 14.5999 8.5999 14.3313 8.5999 13.9999L8.59995 8.5999H13.9999C14.3313 8.5999 14.5999 8.33127 14.5999 7.9999C14.5999 7.66853 14.3313 7.3999 13.9999 7.3999H8.59996L8.6 1.99991Z`}}]},A=(0,o.forwardRef)(function(e,t){return(0,o.createElement)(S,Object.assign({},e,{id:`increase-icon`,ref:t,icon:k}))});A.displayName=`IncreaseIcon`;let j={tag:`svg`,attrs:{xmlns:`http://www.w3.org/2000/svg`,fill:`none`,viewBox:`0 0 16 16`,width:`1em`,height:`1em`},children:[{tag:`path`,attrs:{fill:`currentColor`,d:`M3 9C3.55228 9 4 8.55228 4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8C2 8.55228 2.44772 9 3 9Z`}},{tag:`path`,attrs:{fill:`currentColor`,d:`M8 9C8.55228 9 9 8.55228 9 8C9 7.44772 8.55228 7 8 7C7.44772 7 7 7.44772 7 8C7 8.55228 7.44772 9 8 9Z`}},{tag:`path`,attrs:{fill:`currentColor`,d:`M13 9C13.5523 9 14 8.55228 14 8C14 7.44772 13.5523 7 13 7C12.4477 7 12 7.44772 12 8C12 8.55228 12.4477 9 13 9Z`}}]},M=(0,o.forwardRef)(function(e,t){return(0,o.createElement)(S,Object.assign({},e,{id:`more-horizontal-icon`,ref:t,icon:j}))});M.displayName=`MoreHorizontalIcon`;let N={tag:`svg`,attrs:{xmlns:`http://www.w3.org/2000/svg`,fill:`none`,viewBox:`0 0 16 16`,width:`1em`,height:`1em`},children:[{tag:`path`,attrs:{stroke:`currentColor`,d:`M7.48389 10.3267V12.1905C7.48389 12.7428 7.9316 13.1905 8.48389 13.1905H11.2216L12.2955 14.2644L13.3695 13.1905H14.1593C14.7116 13.1905 15.1593 12.7428 15.1593 12.1905V8.46289C15.1593 7.91061 14.7116 7.46289 14.1593 7.46289H12.2955`,strokeLinecap:`round`,strokeLinejoin:`round`,strokeWidth:1.2}},{tag:`path`,attrs:{stroke:`currentColor`,d:`M0.840332 3.73535C0.840332 2.63078 1.73576 1.73535 2.84033 1.73535H10.2955C11.4001 1.73535 12.2955 2.63078 12.2955 3.73535V8.32676C12.2955 9.43132 11.4001 10.3268 10.2955 10.3268H5.6014L4.1695 11.7587L3.05978 10.3268H2.84033C1.73576 10.3268 0.840332 9.43133 0.840332 8.32676V3.73535Z`,strokeLinecap:`round`,strokeLinejoin:`round`,strokeWidth:1.2}},{tag:`path`,attrs:{stroke:`currentColor`,d:`M6.41016 6.1311H6.76813`,strokeLinecap:`round`,strokeWidth:1.2}},{tag:`path`,attrs:{stroke:`currentColor`,d:`M8.91626 6.1311H9.27424`,strokeLinecap:`round`,strokeWidth:1.2}},{tag:`path`,attrs:{stroke:`currentColor`,d:`M3.90454 6.1311H4.26252`,strokeLinecap:`round`,strokeWidth:1.2}}]},P=(0,o.forwardRef)(function(e,t){return(0,o.createElement)(S,Object.assign({},e,{id:`reply-to-comment-icon`,ref:t,icon:N}))});P.displayName=`ReplyToCommentIcon`;let F={tag:`svg`,attrs:{xmlns:`http://www.w3.org/2000/svg`,fill:`none`,viewBox:`0 0 17 17`,width:`1em`,height:`1em`},children:[{tag:`path`,attrs:{fill:`currentColor`,d:`M8.6106 15.4036C12.4766 15.4036 15.6106 12.2696 15.6106 8.40356C15.6106 4.53757 12.4766 1.40356 8.6106 1.40356C4.7446 1.40356 1.6106 4.53757 1.6106 8.40356C1.6106 12.2696 4.7446 15.4036 8.6106 15.4036ZM12.3351 6.82773C12.5694 6.59342 12.5694 6.21352 12.3351 5.9792C12.1007 5.74489 11.7208 5.74489 11.4865 5.9792L7.91079 9.55494L6.33506 7.9792C6.10074 7.74489 5.72084 7.74489 5.48653 7.9792C5.25221 8.21352 5.25221 8.59342 5.48653 8.82773L7.48653 10.8277C7.72084 11.062 8.10074 11.062 8.33506 10.8277L12.3351 6.82773Z`,fillRule:`evenodd`,clipRule:`evenodd`}}]},I=(0,o.forwardRef)(function(e,t){return(0,o.createElement)(S,Object.assign({},e,{id:`resolved-icon`,ref:t,icon:F}))});I.displayName=`ResolvedIcon`;let L={tag:`svg`,attrs:{xmlns:`http://www.w3.org/2000/svg`,fill:`none`,viewBox:`0 0 17 17`,width:`1em`,height:`1em`},children:[{tag:`circle`,attrs:{cx:8.73,cy:8.4,r:6.4,stroke:`currentColor`,strokeWidth:1.2}},{tag:`path`,attrs:{stroke:`currentColor`,d:`M6.02637 8.40356L8.02637 10.4036L12.0264 6.40356`,strokeLinecap:`round`,strokeLinejoin:`round`,strokeWidth:1.2}}]},R=(0,o.forwardRef)(function(e,t){return(0,o.createElement)(S,Object.assign({},e,{id:`solve-icon`,ref:t,icon:L}))});R.displayName=`SolveIcon`;function z(e){return{id:`d`,body:e,documentStyle:{}}}let B=(0,o.forwardRef)((e,r)=>{var i;let{comment:l,onSave:u,id:d,onCancel:f,autoFocus:p,unitId:m,type:h,editorId:_}=e,v=(0,n.useDependency)(t.ICommandService),y=(0,n.useDependency)(t.LocaleService),[b,x]=(0,o.useState)(!1),S=(0,n.useDependency)(s.IEditorService),C=(0,o.useRef)(null),w=h===t.UniverInstanceType.UNIVER_DOC?t.DOCS_NORMAL_EDITOR_UNIT_ID_KEY:m,[T,E]=(0,o.useState)(()=>{var e,n;return t.BuildTextUtils.transform.getPlainText((e=(n=C.current)==null||(n=n.getDocumentData().body)==null?void 0:n.dataStream)==null?``:e)});(0,o.useEffect)(()=>{var e,n,r;E(t.BuildTextUtils.transform.getPlainText((e=(n=C.current)==null||(n=n.getDocumentData().body)==null?void 0:n.dataStream)==null?``:e));let i=(r=C.current)==null?void 0:r.selectionChange$.subscribe(()=>{var e,n;E(t.BuildTextUtils.transform.getPlainText((e=(n=C.current)==null||(n=n.getDocumentData().body)==null?void 0:n.dataStream)==null?``:e))});return()=>i==null?void 0:i.unsubscribe()},[(i=C.current)==null?void 0:i.selectionChange$]);let D=(0,o.useMemo)(()=>({keyCodes:[{keyCode:n.KeyCode.ENTER}],handler:e=>{e===n.KeyCode.ENTER&&v.executeCommand(s.BreakLineCommand.id)}}),[v]);return(0,o.useImperativeHandle)(r,()=>({reply(e){var t,n;if(!C.current)return;S.focus((t=C.current.getEditorId())==null?``:t);let r=z(e);(n=C.current)==null||n.setDocumentData(r,[{startOffset:r.body.dataStream.length-2,endOffset:r.body.dataStream.length-2,collapsed:!0}])}})),(0,c.jsxs)(`div`,{onClick:e=>e.preventDefault(),children:[(0,c.jsx)(s.RichTextEditor,{className:`univer-w-full`,editorRef:C,editorId:_,autoFocus:p,keyboardEventConfig:D,placeholder:y.t(`threadCommentUI.editor.placeholder`),initialValue:(l==null?void 0:l.text)&&z(l.text),onFocusChange:e=>e&&x(e),isSingle:!1,maxHeight:64,onClickOutside:()=>{setTimeout(()=>{S.focus(w)},30)}}),b?(0,c.jsxs)(`div`,{className:`univer-mt-3 univer-flex univer-flex-row univer-justify-end univer-gap-2`,children:[(0,c.jsx)(a.Button,{onClick:()=>{var e;f==null||f(),x(!1),(e=C.current)==null||e.replaceText(``,!0),v.executeCommand(g.id)},children:y.t(`threadCommentUI.editor.cancel`)}),(0,c.jsx)(a.Button,{variant:`primary`,disabled:!T,onClick:()=>{if(C.current){let e=t.Tools.deepClone(C.current.getDocumentData().body);x(!1),u==null||u({...l,text:e}),C.current.replaceText(``),setTimeout(()=>{var e,t;(e=C.current)==null||e.setSelectionRanges([]),(t=C.current)==null||t.blur()},10)}},children:y.t(d?`threadCommentUI.editor.save`:`threadCommentUI.editor.reply`)})]}):null]})}),V=e=>{let{dataStream:t,customRanges:n}=e,r=t.endsWith(`\r
|
|
1
|
+
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`@univerjs/core`),require(`@univerjs/ui`),require(`rxjs`),require(`@univerjs/thread-comment`),require(`@univerjs/design`),require(`react`),require(`@univerjs/docs-ui`),require(`react/jsx-runtime`)):typeof define==`function`&&define.amd?define([`exports`,`@univerjs/core`,`@univerjs/ui`,`rxjs`,`@univerjs/thread-comment`,`@univerjs/design`,`react`,`@univerjs/docs-ui`,`react/jsx-runtime`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.UniverThreadCommentUi={},e.UniverCore,e.UniverUi,e.rxjs,e.UniverThreadComment,e.UniverDesign,e.React,e.UniverDocsUi,e.React))})(this,function(e,t,n,r,i,a,o,s,c){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});function l(e){"@babel/helpers - typeof";return l=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},l(e)}function u(e,t){if(l(e)!=`object`||!e)return e;var n=e[Symbol.toPrimitive];if(n!==void 0){var r=n.call(e,t||`default`);if(l(r)!=`object`)return r;throw TypeError(`@@toPrimitive must return a primitive value.`)}return(t===`string`?String:Number)(e)}function d(e){var t=u(e,`string`);return l(t)==`symbol`?t:t+``}function f(e,t,n){return(t=d(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function p(e,t){return function(n,r){t(n,r,e)}}function m(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 h=class extends t.Disposable{constructor(e,t){super(),this._sidebarService=e,this._univerInstanceService=t,f(this,`_panelVisible`,!1),f(this,`_panelVisible$`,new r.BehaviorSubject(!1)),f(this,`_activeCommentId`,void 0),f(this,`_activeCommentId$`,new r.BehaviorSubject(void 0)),f(this,`panelVisible$`,this._panelVisible$.asObservable()),f(this,`activeCommentId$`,this._activeCommentId$.asObservable()),this._init(),this.disposeWithMe(()=>{this._activeCommentId$.complete(),this._panelVisible$.complete()})}_init(){this.disposeWithMe(this._sidebarService.sidebarOptions$.subscribe(e=>{e.visible||this.setPanelVisible(!1)})),this.disposeWithMe(this._univerInstanceService.getCurrentTypeOfUnit$(t.UniverInstanceType.UNIVER_SHEET).pipe((0,r.filter)(e=>!e)).subscribe(()=>{this._sidebarService.close()}))}get panelVisible(){return this._panelVisible}get activeCommentId(){return this._activeCommentId}setPanelVisible(e){this._panelVisible=e,this._panelVisible$.next(e)}setActiveComment(e){this._activeCommentId=e,this._activeCommentId$.next(e)}};h=m([p(0,(0,t.Inject)(n.ISidebarService)),p(1,t.IUniverInstanceService)],h);let g={id:`thread-comment-ui.operation.set-active-comment`,type:t.CommandType.OPERATION,handler(e,t){return e.get(h).setActiveComment(t),!0}};var _=`@univerjs/thread-comment-ui`,v=`0.20.1`;let y=`thread-comment-ui.config`;Symbol(y);let b={},x=class extends t.Plugin{constructor(e=b,n,r,i){super(),this._config=e,this._injector=n,this._commandService=r,this._configService=i;let{menu:a,...o}=(0,t.merge)({},b,this._config);a&&this._configService.setConfig(`menu`,a,{merge:!0}),this._configService.setConfig(y,o)}onStarting(){var e;(0,t.mergeOverrideWithDependencies)([[h]],(e=this._config)==null?void 0:e.overrides).forEach(e=>{this._injector.add(e)}),[g].forEach(e=>{this._commandService.registerCommand(e)})}};f(x,`pluginName`,`UNIVER_THREAD_COMMENT_UI_PLUGIN`),f(x,`packageName`,_),f(x,`version`,v),f(x,`type`,t.UniverInstanceType.UNIVER_UNKNOWN),x=m([(0,t.DependentOn)(i.UniverThreadCommentPlugin),p(1,(0,t.Inject)(t.Injector)),p(2,t.ICommandService),p(3,t.IConfigService)],x);function S({ref:e,...t}){let{icon:n,id:r,className:i,extend:a,...s}=t,c=`univerjs-icon univerjs-icon-${r} ${i||``}`.trim(),l=(0,o.useRef)(`_${E()}`);return C(n,`${r}`,{defIds:n.defIds,idSuffix:l.current},{ref:e,className:c,...s},a)}function C(e,t,n,r,i){return(0,o.createElement)(e.tag,{key:t,...w(e,n,i),...r},(T(e,n).children||[]).map((r,a)=>C(r,`${t}-${e.tag}-${a}`,n,void 0,i)))}function w(e,t,n){let r={...e.attrs};n!=null&&n.colorChannel1&&r.fill===`colorChannel1`&&(r.fill=n.colorChannel1),e.tag===`mask`&&r.id&&(r.id+=t.idSuffix),Object.entries(r).forEach(([e,n])=>{e===`mask`&&typeof n==`string`&&(r[e]=n.replace(/url\(#(.*)\)/,`url(#$1${t.idSuffix})`))});let{defIds:i}=t;return!i||i.length===0?r:(e.tag===`use`&&r[`xlink:href`]&&(r[`xlink:href`]+=t.idSuffix),Object.entries(r).forEach(([e,n])=>{typeof n==`string`&&(r[e]=n.replace(/url\(#(.*)\)/,`url(#$1${t.idSuffix})`))}),r)}function T(e,t){var n;let{defIds:r}=t;return!r||r.length===0?e:e.tag===`defs`&&(n=e.children)!=null&&n.length?{...e,children:e.children.map(e=>typeof e.attrs.id==`string`&&r&&r.includes(e.attrs.id)?{...e,attrs:{...e.attrs,id:e.attrs.id+t.idSuffix}}:e)}:e}function E(){return Math.random().toString(36).substring(2,8)}S.displayName=`UniverIcon`;let D={tag:`svg`,attrs:{xmlns:`http://www.w3.org/2000/svg`,fill:`none`,viewBox:`0 0 16 16`,width:`1em`,height:`1em`},children:[{tag:`path`,attrs:{fill:`currentColor`,d:`M5.3313 1.4667C5.3313 1.13533 5.59993 0.866699 5.9313 0.866699H10.069C10.4004 0.866699 10.669 1.13533 10.669 1.4667C10.669 1.79807 10.4004 2.0667 10.069 2.0667H5.9313C5.59993 2.0667 5.3313 1.79807 5.3313 1.4667Z`}},{tag:`path`,attrs:{fill:`currentColor`,d:`M1.09985 3.64443C1.09985 3.31306 1.36848 3.04443 1.69985 3.04443H14.2999C14.6312 3.04443 14.8999 3.31306 14.8999 3.64443C14.8999 3.9758 14.6312 4.24443 14.2999 4.24443H1.69985C1.36848 4.24443 1.09985 3.9758 1.09985 3.64443Z`}},{tag:`path`,attrs:{fill:`currentColor`,d:`M6.12398 8.30171C6.35829 8.0674 6.73819 8.0674 6.97251 8.30171L8.00007 9.32928L9.02764 8.30171C9.26195 8.0674 9.64185 8.0674 9.87617 8.30171C10.1105 8.53603 10.1105 8.91593 9.87617 9.15024L8.8486 10.1778L9.87617 11.2054C10.1105 11.4397 10.1105 11.8196 9.87617 12.0539C9.64185 12.2882 9.26195 12.2882 9.02764 12.0539L8.00007 11.0263L6.97251 12.0539C6.73819 12.2882 6.35829 12.2882 6.12398 12.0539C5.88966 11.8196 5.88966 11.4397 6.12398 11.2054L7.15154 10.1778L6.12398 9.15024C5.88966 8.91593 5.88966 8.53603 6.12398 8.30171Z`}},{tag:`path`,attrs:{fill:`currentColor`,d:`M4.75332 5.22217C3.86966 5.22217 3.15332 5.93851 3.15332 6.82217V12.5331C3.15332 13.9691 4.31738 15.1332 5.75332 15.1332H10.2465C11.6825 15.1332 12.8465 13.9691 12.8465 12.5331V6.82217C12.8465 5.93851 12.1302 5.22217 11.2465 5.22217H4.75332ZM4.35332 6.82217C4.35332 6.60125 4.53241 6.42217 4.75332 6.42217H11.2465C11.4674 6.42217 11.6465 6.60125 11.6465 6.82217V12.5331C11.6465 13.3063 11.0197 13.9332 10.2465 13.9332H5.75332C4.98012 13.9332 4.35332 13.3063 4.35332 12.5331V6.82217Z`,fillRule:`evenodd`,clipRule:`evenodd`}}]},O=(0,o.forwardRef)(function(e,t){return(0,o.createElement)(S,Object.assign({},e,{id:`delete-icon`,ref:t,icon:D}))});O.displayName=`DeleteIcon`;let k={tag:`svg`,attrs:{xmlns:`http://www.w3.org/2000/svg`,fill:`none`,viewBox:`0 0 16 16`,width:`1em`,height:`1em`},children:[{tag:`path`,attrs:{fill:`currentColor`,d:`M8.6 1.99991C8.60001 1.66854 8.33138 1.39991 8.00001 1.3999C7.66864 1.3999 7.40001 1.66853 7.4 1.9999L7.39996 7.3999H1.9999C1.66853 7.3999 1.3999 7.66853 1.3999 7.9999C1.3999 8.33127 1.66853 8.5999 1.9999 8.5999H7.39995L7.3999 13.9999C7.3999 14.3313 7.66853 14.5999 7.9999 14.5999C8.33127 14.5999 8.5999 14.3313 8.5999 13.9999L8.59995 8.5999H13.9999C14.3313 8.5999 14.5999 8.33127 14.5999 7.9999C14.5999 7.66853 14.3313 7.3999 13.9999 7.3999H8.59996L8.6 1.99991Z`}}]},A=(0,o.forwardRef)(function(e,t){return(0,o.createElement)(S,Object.assign({},e,{id:`increase-icon`,ref:t,icon:k}))});A.displayName=`IncreaseIcon`;let j={tag:`svg`,attrs:{xmlns:`http://www.w3.org/2000/svg`,fill:`none`,viewBox:`0 0 16 16`,width:`1em`,height:`1em`},children:[{tag:`path`,attrs:{fill:`currentColor`,d:`M3 9C3.55228 9 4 8.55228 4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8C2 8.55228 2.44772 9 3 9Z`}},{tag:`path`,attrs:{fill:`currentColor`,d:`M8 9C8.55228 9 9 8.55228 9 8C9 7.44772 8.55228 7 8 7C7.44772 7 7 7.44772 7 8C7 8.55228 7.44772 9 8 9Z`}},{tag:`path`,attrs:{fill:`currentColor`,d:`M13 9C13.5523 9 14 8.55228 14 8C14 7.44772 13.5523 7 13 7C12.4477 7 12 7.44772 12 8C12 8.55228 12.4477 9 13 9Z`}}]},M=(0,o.forwardRef)(function(e,t){return(0,o.createElement)(S,Object.assign({},e,{id:`more-horizontal-icon`,ref:t,icon:j}))});M.displayName=`MoreHorizontalIcon`;let N={tag:`svg`,attrs:{xmlns:`http://www.w3.org/2000/svg`,fill:`none`,viewBox:`0 0 16 16`,width:`1em`,height:`1em`},children:[{tag:`path`,attrs:{stroke:`currentColor`,d:`M7.48389 10.3267V12.1905C7.48389 12.7428 7.9316 13.1905 8.48389 13.1905H11.2216L12.2955 14.2644L13.3695 13.1905H14.1593C14.7116 13.1905 15.1593 12.7428 15.1593 12.1905V8.46289C15.1593 7.91061 14.7116 7.46289 14.1593 7.46289H12.2955`,strokeLinecap:`round`,strokeLinejoin:`round`,strokeWidth:1.2}},{tag:`path`,attrs:{stroke:`currentColor`,d:`M0.840332 3.73535C0.840332 2.63078 1.73576 1.73535 2.84033 1.73535H10.2955C11.4001 1.73535 12.2955 2.63078 12.2955 3.73535V8.32676C12.2955 9.43132 11.4001 10.3268 10.2955 10.3268H5.6014L4.1695 11.7587L3.05978 10.3268H2.84033C1.73576 10.3268 0.840332 9.43133 0.840332 8.32676V3.73535Z`,strokeLinecap:`round`,strokeLinejoin:`round`,strokeWidth:1.2}},{tag:`path`,attrs:{stroke:`currentColor`,d:`M6.41016 6.1311H6.76813`,strokeLinecap:`round`,strokeWidth:1.2}},{tag:`path`,attrs:{stroke:`currentColor`,d:`M8.91626 6.1311H9.27424`,strokeLinecap:`round`,strokeWidth:1.2}},{tag:`path`,attrs:{stroke:`currentColor`,d:`M3.90454 6.1311H4.26252`,strokeLinecap:`round`,strokeWidth:1.2}}]},P=(0,o.forwardRef)(function(e,t){return(0,o.createElement)(S,Object.assign({},e,{id:`reply-to-comment-icon`,ref:t,icon:N}))});P.displayName=`ReplyToCommentIcon`;let F={tag:`svg`,attrs:{xmlns:`http://www.w3.org/2000/svg`,fill:`none`,viewBox:`0 0 17 17`,width:`1em`,height:`1em`},children:[{tag:`path`,attrs:{fill:`currentColor`,d:`M8.6106 15.4036C12.4766 15.4036 15.6106 12.2696 15.6106 8.40356C15.6106 4.53757 12.4766 1.40356 8.6106 1.40356C4.7446 1.40356 1.6106 4.53757 1.6106 8.40356C1.6106 12.2696 4.7446 15.4036 8.6106 15.4036ZM12.3351 6.82773C12.5694 6.59342 12.5694 6.21352 12.3351 5.9792C12.1007 5.74489 11.7208 5.74489 11.4865 5.9792L7.91079 9.55494L6.33506 7.9792C6.10074 7.74489 5.72084 7.74489 5.48653 7.9792C5.25221 8.21352 5.25221 8.59342 5.48653 8.82773L7.48653 10.8277C7.72084 11.062 8.10074 11.062 8.33506 10.8277L12.3351 6.82773Z`,fillRule:`evenodd`,clipRule:`evenodd`}}]},I=(0,o.forwardRef)(function(e,t){return(0,o.createElement)(S,Object.assign({},e,{id:`resolved-icon`,ref:t,icon:F}))});I.displayName=`ResolvedIcon`;let L={tag:`svg`,attrs:{xmlns:`http://www.w3.org/2000/svg`,fill:`none`,viewBox:`0 0 17 17`,width:`1em`,height:`1em`},children:[{tag:`circle`,attrs:{cx:8.73,cy:8.4,r:6.4,stroke:`currentColor`,strokeWidth:1.2}},{tag:`path`,attrs:{stroke:`currentColor`,d:`M6.02637 8.40356L8.02637 10.4036L12.0264 6.40356`,strokeLinecap:`round`,strokeLinejoin:`round`,strokeWidth:1.2}}]},R=(0,o.forwardRef)(function(e,t){return(0,o.createElement)(S,Object.assign({},e,{id:`solve-icon`,ref:t,icon:L}))});R.displayName=`SolveIcon`;function z(e){return{id:`d`,body:e,documentStyle:{}}}let B=(0,o.forwardRef)((e,r)=>{var i;let{comment:l,onSave:u,id:d,onCancel:f,autoFocus:p,unitId:m,type:h,editorId:_}=e,v=(0,n.useDependency)(t.ICommandService),y=(0,n.useDependency)(t.LocaleService),[b,x]=(0,o.useState)(!1),S=(0,n.useDependency)(s.IEditorService),C=(0,o.useRef)(null),w=h===t.UniverInstanceType.UNIVER_DOC?t.DOCS_NORMAL_EDITOR_UNIT_ID_KEY:m,[T,E]=(0,o.useState)(()=>{var e,n;return t.BuildTextUtils.transform.getPlainText((e=(n=C.current)==null||(n=n.getDocumentData().body)==null?void 0:n.dataStream)==null?``:e)});(0,o.useEffect)(()=>{var e,n,r;E(t.BuildTextUtils.transform.getPlainText((e=(n=C.current)==null||(n=n.getDocumentData().body)==null?void 0:n.dataStream)==null?``:e));let i=(r=C.current)==null?void 0:r.selectionChange$.subscribe(()=>{var e,n;E(t.BuildTextUtils.transform.getPlainText((e=(n=C.current)==null||(n=n.getDocumentData().body)==null?void 0:n.dataStream)==null?``:e))});return()=>i==null?void 0:i.unsubscribe()},[(i=C.current)==null?void 0:i.selectionChange$]);let D=(0,o.useMemo)(()=>({keyCodes:[{keyCode:n.KeyCode.ENTER}],handler:e=>{e===n.KeyCode.ENTER&&v.executeCommand(s.BreakLineCommand.id)}}),[v]);return(0,o.useImperativeHandle)(r,()=>({reply(e){var t,n;if(!C.current)return;S.focus((t=C.current.getEditorId())==null?``:t);let r=z(e);(n=C.current)==null||n.setDocumentData(r,[{startOffset:r.body.dataStream.length-2,endOffset:r.body.dataStream.length-2,collapsed:!0}])}})),(0,c.jsxs)(`div`,{onClick:e=>e.preventDefault(),children:[(0,c.jsx)(s.RichTextEditor,{className:`univer-w-full`,editorRef:C,editorId:_,autoFocus:p,keyboardEventConfig:D,placeholder:y.t(`threadCommentUI.editor.placeholder`),initialValue:(l==null?void 0:l.text)&&z(l.text),onFocusChange:e=>e&&x(e),isSingle:!1,maxHeight:64,onClickOutside:()=>{setTimeout(()=>{S.focus(w)},30)}}),b?(0,c.jsxs)(`div`,{className:`univer-mt-3 univer-flex univer-flex-row univer-justify-end univer-gap-2`,children:[(0,c.jsx)(a.Button,{onClick:()=>{var e;f==null||f(),x(!1),(e=C.current)==null||e.replaceText(``,!0),v.executeCommand(g.id)},children:y.t(`threadCommentUI.editor.cancel`)}),(0,c.jsx)(a.Button,{variant:`primary`,disabled:!T,onClick:()=>{if(C.current){let e=t.Tools.deepClone(C.current.getDocumentData().body);x(!1),u==null||u({...l,text:e}),C.current.replaceText(``),setTimeout(()=>{var e,t;(e=C.current)==null||e.setSelectionRanges([]),(t=C.current)==null||t.blur()},10)}},children:y.t(d?`threadCommentUI.editor.save`:`threadCommentUI.editor.reply`)})]}):null]})}),V=e=>{let{dataStream:t,customRanges:n}=e,r=t.endsWith(`\r
|
|
2
2
|
`)?t.length-2:t.length,i=[],a=0;return n==null||n.forEach(e=>{a<e.startIndex&&i.push({type:`text`,content:t.slice(a,e.startIndex)}),i.push({type:`mention`,content:{label:t.slice(e.startIndex,e.endIndex+1),id:e.rangeId}}),a=e.endIndex+1}),i.push({type:`text`,content:t.slice(a,r)}),i},H=e=>{if(!e)return[];let{paragraphs:n=[]}=e;return n.map((r,i)=>V((0,t.getBodySlice)(e,i===0?0:n[i-1].startIndex+1,r.startIndex)))},U=e=>{let n=``,r=[];return e.forEach(e=>{switch(e.type){case`text`:n+=e.content;break;case`mention`:{let i=n.length;n+=e.content.label;let a=n.length-1;r.push({rangeId:e.content.id,rangeType:t.CustomRangeType.MENTION,startIndex:i,endIndex:a,properties:{},wholeEntity:!0});break}default:break}}),n+=`\r
|
|
3
3
|
`,{textRuns:[],paragraphs:[{startIndex:n.length-2,paragraphStyle:{}}],sectionBreaks:[{startIndex:n.length-1}],dataStream:n,customRanges:r}},W=function(e){return e.CELL=`CELL`,e.PANEL=`PANEL`,e}({}),G=`__mock__`,K=e=>{let{item:r,unitId:s,subUnitId:l,editing:u,onEditingChange:d,onReply:f,resolved:p,isRoot:m,onClose:h,onDeleteComment:g,type:_,threadCommentEditorId:v}=e,y=(0,n.useDependency)(t.ICommandService),b=(0,n.useDependency)(t.LocaleService),x=(0,n.useDependency)(t.UserManagerService),S=x.getUser(r.personId),C=(0,n.useObservable)(x.currentUser$),w=(C==null?void 0:C.userID)===r.personId,T=r.id===G,[E,D]=(0,o.useState)(!1),O=(0,n.useConfigValue)(n.UI_PLUGIN_CONFIG_KEY),k=O==null?void 0:O.avatarFallback;return(0,c.jsxs)(`div`,{className:`univer-relative univer-mb-3 univer-pl-[30px]`,onMouseLeave:()=>D(!1),onMouseEnter:()=>D(!0),children:[(0,c.jsx)(`div`,{className:`univer-absolute univer-left-0 univer-top-0 univer-size-6 univer-rounded-full univer-bg-cover univer-bg-center univer-bg-no-repeat`,style:{backgroundImage:`url(${(S==null?void 0:S.avatar)||k})`}}),S?(0,c.jsxs)(`div`,{className:`univer-mb-1 univer-flex univer-h-6 univer-items-center univer-justify-between`,children:[(0,c.jsx)(`div`,{className:`univer-text-sm univer-font-medium univer-leading-5`,children:(S==null?void 0:S.name)||` `}),(0,c.jsxs)(`div`,{children:[T||p?null:E&&S?(0,c.jsx)(`div`,{className:`univer-ml-1 univer-inline-flex univer-size-6 univer-cursor-pointer univer-items-center univer-justify-center univer-rounded-sm univer-text-base hover:univer-bg-gray-50`,onClick:()=>f(S),children:(0,c.jsx)(P,{})}):null,w&&!T&&!p?(0,c.jsx)(a.Dropdown,{overlay:(0,c.jsx)(`div`,{className:`univer-rounded-lg`,children:(0,c.jsxs)(`ul`,{className:`univer-m-0 univer-box-border univer-grid univer-list-none univer-p-1.5 univer-text-sm [&_a]:univer-block [&_a]:univer-cursor-pointer [&_a]:univer-rounded [&_a]:univer-px-2 [&_a]:univer-py-1.5 [&_a]:univer-transition-colors`,children:[(0,c.jsx)(`li`,{children:(0,c.jsx)(`a`,{className:`hover:univer-bg-gray-200`,onClick:()=>d==null?void 0:d(!0),children:b.t(`threadCommentUI.item.edit`)})}),(0,c.jsx)(`li`,{children:(0,c.jsx)(`a`,{className:`hover:univer-bg-gray-200`,onClick:()=>{(g==null?void 0:g(r))!==!1&&(y.executeCommand(m?i.DeleteCommentTreeCommand.id:i.DeleteCommentCommand.id,{unitId:s,subUnitId:l,commentId:r.id}),m&&(h==null||h()))},children:b.t(`threadCommentUI.item.delete`)})})]})}),children:(0,c.jsx)(`div`,{className:`univer-ml-1 univer-inline-flex univer-size-6 univer-cursor-pointer univer-items-center univer-justify-center univer-rounded-sm univer-text-base hover:univer-bg-gray-50`,children:(0,c.jsx)(M,{})})}):null]})]}):null,(0,c.jsx)(`time`,{className:`univer-mb-1 univer-text-xs/normal univer-text-gray-600 dark:!univer-text-gray-200`,children:r.dT}),u?(0,c.jsx)(B,{type:_,id:r.id,comment:r,onCancel:()=>d==null?void 0:d(!1),autoFocus:!0,unitId:s,subUnitId:l,editorId:v,onSave:({text:e,attachments:t})=>{d==null||d(!1),y.executeCommand(i.UpdateCommentCommand.id,{unitId:s,subUnitId:l,payload:{commentId:r.id,text:e,attachments:t}})}}):(0,c.jsx)(`div`,{className:`univer-text-sm univer-text-gray-900 dark:!univer-text-white`,children:H(r.text).map((e,t)=>(0,c.jsx)(`div`,{className:`univer-break-words`,children:e.map((e,t)=>{switch(e.type){case`mention`:return(0,c.jsxs)(`a`,{className:`univer-text-primary-600`,children:[e.content.label,` `]},t);default:return e.content}})},t))})]})},q=e=>{var s,l,u;let{id:d,unitId:f,subUnitId:p,refStr:m,showEdit:h=!0,onClick:_,showHighlight:v,onClose:y,getSubUnitName:b,location:x,autoFocus:S,onMouseEnter:C,onMouseLeave:w,onAddComment:T,onDeleteComment:E,onResolve:D,type:k,style:A,full:j}=e,M=(0,n.useDependency)(i.ThreadCommentModel),[N,P]=(0,o.useState)(!1),[F,L]=(0,o.useState)(``);(0,n.useObservable)((0,o.useMemo)(()=>M.commentUpdate$.pipe((0,r.debounceTime)(16)),[M]));let z=d?M.getCommentWithChildren(f,p,d):null,V=(0,n.useDependency)(t.ICommandService),H=(0,n.useDependency)(t.UserManagerService),q=z==null?void 0:z.root.resolved,J=(0,n.useObservable)(H.currentUser$),Y=(0,o.useRef)(null),X=[...z?[z.root]:[{id:G,text:{dataStream:`
|
|
4
4
|
\r`},personId:(s=J==null?void 0:J.userID)==null?``:s,ref:m==null?``:m,dT:``,unitId:f,subUnitId:p,threadId:``}],...(l=z==null?void 0:z.children)==null?[]:l],Z=(0,o.useRef)(null),ee=e=>{e.stopPropagation(),q?V.executeCommand(g.id,{unitId:f,subUnitId:p,commentId:d}):V.executeCommand(g.id),V.executeCommand(i.ResolveCommentCommand.id,{unitId:f,subUnitId:p,commentId:d,resolved:!q}),D==null||D(!q)},te=e=>{e.stopPropagation(),V.executeCommand(g.id),!(z!=null&&z.root&&(E==null?void 0:E(z.root))===!1)&&(V.executeCommand(i.DeleteCommentTreeCommand.id,{unitId:f,subUnitId:p,commentId:d}),y==null||y())};(0,o.useEffect)(()=>w==null?void 0:w(),[]);let Q=b((u=z==null?void 0:z.root.subUnitId)==null?p:u),ne=h&&!F&&!q,$=`${m||(z==null?void 0:z.root.ref)||``}${Q?` · `:``}${Q}`,re=`${t.DOCS_COMMENT_EDITOR_UNIT_ID_KEY}_${x}`;return(0,c.jsxs)(`div`,{id:`${x}-${f}-${p}-${d}`,className:(0,a.clsx)(`univer-relative univer-box-border univer-rounded-md univer-bg-white univer-p-4 dark:!univer-bg-gray-900 dark:!univer-text-white`,a.borderClassName,{"univer-w-[278px]":!j,"univer-w-full":j,"univer-shadow":!q&&(v||N||x===W.CELL)}),style:A,onClick:_,onMouseEnter:()=>{C==null||C(),P(!0)},onMouseLeave:()=>{w==null||w(),P(!1)},children:[!q&&v&&(0,c.jsx)(`div`,{className:`univer-absolute univer-left-0 univer-right-0 univer-top-0 univer-h-1.5 univer-rounded-t-md univer-bg-yellow-400`}),(0,c.jsxs)(`div`,{className:`univer-mb-4 univer-flex univer-flex-row univer-items-center univer-justify-between univer-text-sm univer-leading-5`,children:[(0,c.jsxs)(`div`,{className:`univer-flex univer-flex-1 univer-flex-row univer-items-center univer-overflow-hidden`,children:[(0,c.jsx)(`div`,{className:`univer-mr-2 univer-h-3.5 univer-w-[3px] univer-flex-shrink-0 univer-flex-grow-0 univer-rounded-sm univer-bg-yellow-500`}),(0,c.jsx)(a.Tooltip,{showIfEllipsis:!0,title:$,children:(0,c.jsx)(`span`,{className:`univer-flex-1 univer-truncate`,children:$})})]}),!!z&&(0,c.jsxs)(`div`,{className:`univer-flex univer-flex-shrink-0 univer-flex-grow-0 univer-flex-row`,children:[(0,c.jsx)(`div`,{className:(0,a.clsx)(`univer-ml-1 univer-inline-flex univer-size-6 univer-cursor-pointer univer-items-center univer-justify-center univer-rounded-[3px] univer-text-base hover:univer-bg-gray-50 dark:hover:!univer-bg-gray-800`,{"univer-text-green-500":q}),onClick:ee,children:q?(0,c.jsx)(I,{}):(0,c.jsx)(R,{})}),(J==null?void 0:J.userID)===z.root.personId?(0,c.jsx)(`div`,{className:`univer-ml-1 univer-inline-flex univer-size-6 univer-cursor-pointer univer-items-center univer-justify-center univer-rounded-[3px] univer-text-base hover:univer-bg-gray-50 dark:hover:!univer-bg-gray-800`,onClick:te,children:(0,c.jsx)(O,{})}):null]})]}),(0,c.jsx)(`div`,{ref:Z,className:(0,a.clsx)(`univer-max-h-80 univer-overflow-y-auto univer-overflow-x-hidden`,a.scrollbarClassName),children:X.map(e=>(0,c.jsx)(K,{unitId:f,subUnitId:p,item:e,isRoot:e.id===(z==null?void 0:z.root.id),editing:F===e.id,resolved:z==null?void 0:z.root.resolved,type:k,threadCommentEditorId:re,onClose:y,onEditingChange:t=>{L(t?e.id:``)},onReply:e=>{e&&requestAnimationFrame(()=>{var t;(t=Y.current)==null||t.reply(U([{type:`mention`,content:{id:e.userID,label:`@${e.name}`}},{type:`text`,content:` `}]))})},onAddComment:T,onDeleteComment:E},e.id))}),ne&&(0,c.jsx)(`div`,{children:(0,c.jsx)(B,{ref:Y,type:k,unitId:f,subUnitId:p,editorId:re,onSave:async({text:e,attachments:n})=>{var r,a;let o={text:e,attachments:n,dT:(0,i.getDT)(),id:(0,t.generateRandomId)(),ref:m,personId:(r=J==null?void 0:J.userID)==null?``:r,parentId:z==null?void 0:z.root.id,unitId:f,subUnitId:p,threadId:(a=z==null?void 0:z.root.threadId)==null?``:a};(T==null?void 0:T(o))!==!1&&(await V.executeCommand(i.AddCommentCommand.id,{unitId:f,subUnitId:p,comment:o}),Z.current&&(Z.current.scrollTop=Z.current.scrollHeight))},autoFocus:S||!z,onCancel:()=>{z||y==null||y()}},`${S}`)})]})};e.SetActiveCommentOperation=g,e.ThreadCommentPanel=e=>{let{unitId:r,subUnitId$:s,type:l,onAdd:u,getSubUnitName:d,onResolve:f,sortComments:p,onItemLeave:m,onItemEnter:_,disableAdd:v,tempComment:y,onAddComment:b,onDeleteComment:x,showComments:S}=e,[C,w]=(0,o.useState)(`all`),[T,E]=(0,o.useState)(`all`),D=(0,n.useDependency)(t.LocaleService),O=(0,n.useDependency)(t.UserManagerService),k=(0,n.useDependency)(i.ThreadCommentModel),[j,M]=(0,o.useState)(()=>k.getUnit(r)),N=(0,n.useObservable)((0,n.useDependency)(h).activeCommentId$),P=(0,n.useObservable)(k.commentUpdate$),F=(0,n.useDependency)(t.ICommandService),I=(0,n.useObservable)(s),L=(0,o.useRef)(!0),R=W.PANEL,z=(0,n.useObservable)(O.currentUser$),B=(0,o.useMemo)(()=>{var e;let t=C===`all`?j:(e=j.filter(e=>e.subUnitId===I))==null?[]:e,n=p==null?(e=>e):p,r=t.map(e=>{var t;return{...e.root,children:(t=e.children)==null?[]:t,users:e.relativeUsers}});if(S){let e=new Map;return r.forEach(t=>{e.set(t.id,t)}),[...S,``].map(t=>e.get(t)).filter(Boolean)}else return n(r)},[S,C,j,p,I]),V=(0,o.useMemo)(()=>[...B.filter(e=>!e.resolved),...B.filter(e=>e.resolved)],[B]),H=(0,o.useMemo)(()=>T===`resolved`?V.filter(e=>e.resolved):T===`unsolved`?V.filter(e=>!e.resolved):T===`concern_me`&&z!=null&&z.userID?V.filter(e=>e==null?void 0:e.users.has(z.userID)):V,[V,z==null?void 0:z.userID,T]),U=y?[y,...H]:H,G=U.filter(e=>!e.resolved),K=U.filter(e=>e.resolved),J=T!==`all`||C!==`all`,Y=()=>{E(`all`),w(`all`)};(0,o.useEffect)(()=>{r&&M(k.getUnit(r))},[r,k,P]),(0,o.useEffect)(()=>{var e;if(!N)return;if(!L.current){L.current=!0;return}let{unitId:t,subUnitId:n,commentId:r}=N,i=`${R}-${t}-${n}-${r}`;(e=document.getElementById(i))==null||e.scrollIntoView({block:`center`})},[N]);let X=e=>(0,c.jsx)(q,{location:R,getSubUnitName:d,id:e.id,unitId:e.unitId,subUnitId:e.subUnitId,refStr:e.ref,type:l,showEdit:(N==null?void 0:N.commentId)===e.id,showHighlight:(N==null?void 0:N.commentId)===e.id,onClick:()=>{L.current=!1,e.resolved?F.executeCommand(g.id):F.executeCommand(g.id,{unitId:e.unitId,subUnitId:e.subUnitId,commentId:e.id,temp:!1})},onMouseEnter:()=>_==null?void 0:_(e),onMouseLeave:()=>m==null?void 0:m(e),onAddComment:b,onDeleteComment:x,onResolve:t=>f==null?void 0:f(e.id,t)},e.id);return(0,c.jsxs)(`div`,{className:`univer-flex univer-min-h-full univer-flex-col univer-pb-3`,children:[(0,c.jsxs)(`div`,{className:`univer-mt-3 univer-flex univer-flex-row univer-justify-between`,children:[l===t.UniverInstanceType.UNIVER_SHEET?(0,c.jsx)(a.Select,{borderless:!0,value:C,options:[{value:`current`,label:D.t(`threadCommentUI.filter.sheet.current`)},{value:`all`,label:D.t(`threadCommentUI.filter.sheet.all`)}],onChange:w}):null,(0,c.jsx)(a.Select,{borderless:!0,value:T,options:[{value:`all`,label:D.t(`threadCommentUI.filter.status.all`)},{value:`resolved`,label:D.t(`threadCommentUI.filter.status.resolved`)},{value:`unsolved`,label:D.t(`threadCommentUI.filter.status.unsolved`)},{value:`concern_me`,label:D.t(`threadCommentUI.filter.status.concernMe`)}],onChange:E})]}),U.length===0?(0,c.jsxs)(`div`,{className:`univer-flex univer-flex-1 univer-flex-col univer-items-center univer-justify-center univer-text-sm univer-text-gray-600 dark:!univer-text-gray-200`,children:[D.t(`threadCommentUI.panel.empty`),J?(0,c.jsx)(`div`,{className:`univer-mt-2 univer-flex univer-flex-row`,children:(0,c.jsx)(a.Button,{onClick:Y,children:D.t(`threadCommentUI.panel.reset`)})}):v?null:(0,c.jsx)(`div`,{className:`univer-mt-2 univer-flex univer-flex-row`,children:(0,c.jsxs)(a.Button,{onClick:u,children:[(0,c.jsx)(A,{className:`univer-mr-1.5`}),D.t(`threadCommentUI.panel.addComment`)]})})]}):(0,c.jsxs)(`div`,{className:`univer-mt-3 univer-flex univer-flex-col univer-gap-3`,children:[G.map(X),K.length>0&&(0,c.jsx)(`div`,{className:`univer-text-xs`,children:D.t(`threadCommentUI.panel.solved`)}),K.map(X)]})]})},Object.defineProperty(e,`ThreadCommentPanelService`,{enumerable:!0,get:function(){return h}}),e.ThreadCommentTree=q,e.ThreadCommentTreeLocation=W,Object.defineProperty(e,`UniverThreadCommentUIPlugin`,{enumerable:!0,get:function(){return x}})});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@univerjs/thread-comment-ui",
|
|
3
|
-
"version": "0.20.
|
|
3
|
+
"version": "0.20.1",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "Univer common thread comment UI plugin",
|
|
6
6
|
"author": "DreamNum <developer@univer.ai>",
|
|
@@ -53,11 +53,11 @@
|
|
|
53
53
|
},
|
|
54
54
|
"dependencies": {
|
|
55
55
|
"@univerjs/icons": "^1.1.1",
|
|
56
|
-
"@univerjs/
|
|
57
|
-
"@univerjs/
|
|
58
|
-
"@univerjs/
|
|
59
|
-
"@univerjs/thread-comment": "0.20.
|
|
60
|
-
"@univerjs/ui": "0.20.
|
|
56
|
+
"@univerjs/design": "0.20.1",
|
|
57
|
+
"@univerjs/docs-ui": "0.20.1",
|
|
58
|
+
"@univerjs/core": "0.20.1",
|
|
59
|
+
"@univerjs/thread-comment": "0.20.1",
|
|
60
|
+
"@univerjs/ui": "0.20.1"
|
|
61
61
|
},
|
|
62
62
|
"devDependencies": {
|
|
63
63
|
"postcss": "^8.5.8",
|
|
@@ -66,7 +66,7 @@
|
|
|
66
66
|
"tailwindcss": "3.4.18",
|
|
67
67
|
"typescript": "^6.0.2",
|
|
68
68
|
"vitest": "^4.1.1",
|
|
69
|
-
"@univerjs-infra/shared": "0.20.
|
|
69
|
+
"@univerjs-infra/shared": "0.20.1"
|
|
70
70
|
},
|
|
71
71
|
"scripts": {
|
|
72
72
|
"test": "vitest run",
|