UNPKG

@blocknote/react

Version:

A "Notion-style" block-based extensible text editor built on top of Prosemirror and Tiptap.

3 lines 11.1 kB
const e=require(`./defaultCommentEditorSchema-Cow33c_f.cjs`);let t=require(`react`);t=e.v(t,1);let n=require(`@blocknote/core/comments`),r=require(`@floating-ui/react`),i=require(`@blocknote/core`),a=require(`react/jsx-runtime`),o=require(`react-icons/ri`);var s;async function c(){return s||(s=(async()=>{let[e,t]=await Promise.all([import(`emoji-mart`),import(`@emoji-mart/data`)]),n=`default`in e?e.default:e,r=`default`in t?t.default:t;return await n.init({data:r}),{emojiMart:n,emojiData:r}})(),s)}function l(e){let n=(0,t.useRef)(null),r=(0,t.useRef)(null);return r.current&&r.current.update(e),(0,t.useEffect)(()=>((async()=>{let{emojiMart:t}=await c();r.current=new t.Picker({...e,ref:n})})(),()=>{r.current=null}),[]),t.default.createElement(`div`,{ref:n})}var u=n=>{let[r,i]=(0,t.useState)(!1),o=e.l(),s=e.g(),c=s.editor?.portalElement;if(!c)throw Error(`Portal root not found`);return(0,a.jsxs)(o.Generic.Popover.Root,{open:r,portalRoot:c,children:[(0,a.jsx)(o.Generic.Popover.Trigger,{children:(0,a.jsx)(`div`,{onClick:e=>{e.preventDefault(),e.stopPropagation(),i(!r),n.onOpenChange?.(!r)},style:{display:`flex`,justifyContent:`center`,alignItems:`center`},children:n.children})}),(0,a.jsx)(o.Generic.Popover.Content,{className:`bn-emoji-picker-popover`,variant:`panel-popover`,children:(0,a.jsx)(l,{perLine:7,onClickOutside:()=>{i(!1),n.onOpenChange?.(!1)},onEmojiSelect:e=>{n.onEmojiSelect(e),i(!1),n.onOpenChange?.(!1)},theme:s?.colorSchemePreference})})]})};function d(e){return f([e]).get(e)}function f(r){let i=e.f(n.CommentsExtension).userStore,a=(0,t.useCallback)(()=>{let e=new Map;for(let t of r){let n=i.getUser(t);n&&e.set(t,n)}return e},[i,r]),o=(0,t.useMemo)(()=>({current:a()}),[a]);return(0,t.useSyncExternalStore)((0,t.useCallback)(e=>{let t=i.subscribe(t=>{o.current=a(),e()});return i.loadUsers(r),t},[i,a,r,o]),()=>o.current)}var p=r=>{let o=e.l(),s=e.s(),c=e.f(n.CommentsExtension),l=r.comment.reactions.find(e=>e.emoji===r.emoji);if(!l)throw Error(`Trying to render reaction badge for non-existing reaction`);let[u,d]=(0,t.useState)([]),p=f(u);return(0,a.jsx)(o.Generic.Badge.Root,{className:(0,i.mergeCSSClasses)(`bn-badge`,`bn-comment-reaction`),text:l.userIds.length.toString(),icon:l.emoji,isSelected:c.threadStore.auth.canDeleteReaction(r.comment,l.emoji),onClick:()=>r.onReactionSelect(l.emoji),onMouseEnter:()=>d(l.userIds),mainTooltip:s.comments.reactions.reacted_by,secondaryTooltip:`${Array.from(p.values()).map(e=>e.username).join(` `)}`},l.emoji)},m=(0,t.memo)(({isEmpty:e,comment:t,isEditing:n,threadStore:r,onReactionSelect:s,onEditSubmit:c,onEditCancel:l,onEmojiPickerOpenChange:d,Components:f,dict:m})=>{let h=r.auth.canAddReaction(t);return(0,a.jsxs)(a.Fragment,{children:[t.reactions.length>0&&!n&&(0,a.jsxs)(f.Generic.Badge.Group,{className:(0,i.mergeCSSClasses)(`bn-badge-group`,`bn-comment-reactions`),children:[t.reactions.map(e=>(0,a.jsx)(p,{comment:t,emoji:e.emoji,onReactionSelect:s},e.emoji)),h&&(0,a.jsx)(u,{onEmojiSelect:e=>s(e.native),onOpenChange:d,children:(0,a.jsx)(f.Generic.Badge.Root,{className:(0,i.mergeCSSClasses)(`bn-badge`,`bn-comment-add-reaction`),text:`+`,icon:(0,a.jsx)(o.RiEmotionLine,{size:16}),mainTooltip:m.comments.actions.add_reaction})})]}),n&&(0,a.jsxs)(f.Generic.Toolbar.Root,{variant:`action-toolbar`,className:(0,i.mergeCSSClasses)(`bn-action-toolbar`,`bn-comment-actions`),children:[(0,a.jsx)(f.Generic.Toolbar.Button,{mainTooltip:m.comments.save_button_text,variant:`compact`,onClick:c,isDisabled:e,children:m.comments.save_button_text}),(0,a.jsx)(f.Generic.Toolbar.Button,{className:`bn-button`,mainTooltip:m.comments.cancel_button_text,variant:`compact`,onClick:l,children:m.comments.cancel_button_text})]})]})}),h=({comment:r,thread:s,showResolveButton:c})=>{let l=e.f(n.CommentsExtension),f=e.s(),p=e.r({initialContent:r.body,trailingBlock:!1,dictionary:{...f,placeholders:{emptyDocument:f.placeholders.edit_comment}},schema:l.commentEditorSchema||e.t}),h=e.l(),[g,_]=(0,t.useState)(!1),[v,y]=(0,t.useState)(!1),b=l.threadStore,x=(0,t.useCallback)(()=>{_(!0)},[]),S=(0,t.useCallback)(()=>{p.replaceBlocks(p.document,r.body),_(!1)},[p,r.body]),C=(0,t.useCallback)(async e=>{await b.updateComment({commentId:r.id,comment:{body:p.document},threadId:s.id}),_(!1)},[r,s.id,p,b]),w=(0,t.useCallback)(async()=>{await b.deleteComment({commentId:r.id,threadId:s.id})},[r,s.id,b]),T=(0,t.useCallback)(async e=>{b.auth.canAddReaction(r,e)?await b.addReaction({threadId:s.id,commentId:r.id,emoji:e}):b.auth.canDeleteReaction(r,e)&&await b.deleteReaction({threadId:s.id,commentId:r.id,emoji:e})},[b,r,s.id]),E=(0,t.useCallback)(async()=>{await b.resolveThread({threadId:s.id})},[s.id,b]),D=(0,t.useCallback)(async()=>{await b.unresolveThread({threadId:s.id})},[s.id,b]),O=d(r.userId);if(!r.body)return null;let k,A=b.auth.canAddReaction(r),j=b.auth.canDeleteComment(r),M=b.auth.canUpdateComment(r),N=c&&(s.resolved?b.auth.canUnresolveThread(s):b.auth.canResolveThread(s));g||(k=(0,a.jsxs)(h.Generic.Toolbar.Root,{className:(0,i.mergeCSSClasses)(`bn-action-toolbar`,`bn-comment-actions`),variant:`action-toolbar`,children:[A&&(0,a.jsx)(u,{onEmojiSelect:e=>T(e.native),onOpenChange:y,children:(0,a.jsx)(h.Generic.Toolbar.Button,{mainTooltip:f.comments.actions.add_reaction,variant:`compact`,children:(0,a.jsx)(o.RiEmotionLine,{size:16})},`add-reaction`)}),N&&(s.resolved?(0,a.jsx)(h.Generic.Toolbar.Button,{mainTooltip:f.comments.actions.reopen,variant:`compact`,onClick:D,children:(0,a.jsx)(o.RiArrowGoBackFill,{size:16})},`reopen`):(0,a.jsx)(h.Generic.Toolbar.Button,{mainTooltip:f.comments.actions.resolve,variant:`compact`,onClick:E,children:(0,a.jsx)(o.RiCheckFill,{size:16})},`resolve`)),(j||M)&&(0,a.jsxs)(h.Generic.Menu.Root,{position:`bottom-start`,children:[(0,a.jsx)(h.Generic.Menu.Trigger,{children:(0,a.jsx)(h.Generic.Toolbar.Button,{mainTooltip:f.comments.actions.more_actions,variant:`compact`,children:(0,a.jsx)(o.RiMoreFill,{size:16})},`more-actions`)}),(0,a.jsxs)(h.Generic.Menu.Dropdown,{className:`bn-menu-dropdown`,children:[M&&(0,a.jsx)(h.Generic.Menu.Item,{icon:(0,a.jsx)(o.RiEditFill,{}),onClick:x,children:f.comments.actions.edit_comment},`edit-comment`),j&&(0,a.jsx)(h.Generic.Menu.Item,{icon:(0,a.jsx)(o.RiDeleteBinFill,{}),onClick:w,children:f.comments.actions.delete_comment},`delete-comment`)]})]})]}));let P=r.createdAt.toLocaleDateString(void 0,{month:`short`,day:`numeric`});if(!r.body)throw Error(`soft deletes are not yet supported`);return(0,a.jsx)(h.Comments.Comment,{authorInfo:O??`loading`,timeString:P,edited:r.updatedAt.getTime()!==r.createdAt.getTime(),showActions:`hover`,actions:k,className:`bn-thread-comment`,emojiPickerOpen:v,children:(0,a.jsx)(e.n,{autoFocus:g,editor:p,editable:g,actions:r.reactions.length>0||g?({isFocused:e,isEmpty:t})=>(0,a.jsx)(m,{isFocused:e,isEmpty:t,comment:r,isEditing:g,threadStore:b,onReactionSelect:T,onEditSubmit:C,onEditCancel:S,onEmojiPickerOpenChange:y,Components:h,dict:f}):void 0})})},g=({thread:t,maxCommentsBeforeCollapse:n})=>{let r=e.l(),i=e.s(),o=f(t.resolvedBy?[t.resolvedBy]:[]),s=t.comments.map((e,n)=>(0,a.jsx)(h,{thread:t,comment:e,showResolveButton:n===0},e.id+JSON.stringify(e.body||`{}`)));if(t.resolved&&t.resolvedUpdatedAt&&t.resolvedBy){if(!o.get(t.resolvedBy))throw Error(`User ${t.resolvedBy} resolved thread ${t.id}, but their data could not be found.`);let e=t.comments.findLastIndex(e=>t.resolvedUpdatedAt.getTime()>e.createdAt.getTime())+1;s.splice(e,0,(0,a.jsx)(r.Comments.Comment,{className:`bn-thread-comment`,authorInfo:t.resolvedBy&&o.get(t.resolvedBy)||`loading`,timeString:t.resolvedUpdatedAt.toLocaleDateString(void 0,{month:`short`,day:`numeric`}),edited:!1,showActions:!1,children:(0,a.jsx)(`div`,{className:`bn-resolved-text`,children:i.comments.sidebar.marked_as_resolved})},`resolved-comment`))}return n&&s.length>n&&s.splice(1,s.length-2,(0,a.jsx)(r.Comments.ExpandSectionsPrompt,{className:`bn-thread-expand-prompt`,children:i.comments.sidebar.more_replies(t.comments.length-2)},`expand-prompt`)),s},_=(0,t.memo)(({isEmpty:e,onNewCommentSave:t,Components:n,dict:r})=>e?null:(0,a.jsx)(n.Generic.Toolbar.Root,{variant:`action-toolbar`,className:(0,i.mergeCSSClasses)(`bn-action-toolbar`,`bn-comment-actions`),children:(0,a.jsx)(n.Generic.Toolbar.Button,{mainTooltip:r.comments.save_button_text,variant:`compact`,isDisabled:e,onClick:t,children:r.comments.save_button_text})})),v=({thread:r,selected:o,orphaned:s,referenceText:c,maxCommentsBeforeCollapse:l,onFocus:u,onBlur:d,tabIndex:f})=>{let p=e.l(),m=e.s(),h=e.f(n.CommentsExtension),v=e.r({trailingBlock:!1,dictionary:{...m,placeholders:{emptyDocument:m.placeholders.comment_reply}},schema:h.commentEditorSchema||e.t}),y=(0,t.useCallback)(async()=>{await h.threadStore.addComment({comment:{body:v.document},threadId:r.id}),v.removeBlocks(v.document)},[h,v,r.id]);return(0,a.jsxs)(p.Comments.Card,{className:(0,i.mergeCSSClasses)(`bn-thread`,s&&`bn-thread-orphaned`),headerText:c,onFocus:u,onBlur:d,selected:o,tabIndex:f,children:[(0,a.jsx)(p.Comments.CardSection,{className:`bn-thread-comments`,children:(0,a.jsx)(g,{thread:r,maxCommentsBeforeCollapse:o?void 0:l||5})}),o&&(0,a.jsx)(p.Comments.CardSection,{className:`bn-thread-composer`,children:(0,a.jsx)(e.n,{autoFocus:!1,editable:!0,editor:v,actions:({isFocused:e,isEmpty:t})=>(0,a.jsx)(_,{isFocused:e,isEmpty:t,onNewCommentSave:y,Components:p,dict:m})})})]})};function y(){let r=e.f(n.CommentsExtension).threadStore,i=(0,t.useRef)(void 0);return i.current||=r.getThreads(),(0,t.useSyncExternalStore)((0,t.useCallback)(e=>r.subscribe(t=>{i.current=t,e()}),[r]),()=>i.current)}var b=e._({default:()=>x});function x(i){let o=e.m(),s=e.f(n.CommentsExtension),c=e.p(n.CommentsExtension,{editor:o,selector:e=>e.selectedThreadId?{id:e.selectedThreadId,position:e.threadPositions.get(e.selectedThreadId)}:void 0}),l=y(),u=(0,t.useMemo)(()=>c?l.get(c.id):void 0,[c,l]),d=(0,t.useMemo)(()=>({...i.floatingUIOptions,useFloatingOptions:{open:!!c,onOpenChange:(e,t,n)=>{n===`escape-key`&&o.focus(),e||s.selectThread(void 0)},placement:`bottom`,middleware:[(0,r.offset)(10),(0,r.shift)(),(0,r.flip)()],...i.floatingUIOptions?.useFloatingOptions},focusManagerProps:{disabled:!0,...i.floatingUIOptions?.focusManagerProps},elementProps:{style:{zIndex:30},...i.floatingUIOptions?.elementProps}}),[s,o,i.floatingUIOptions,c]),f=i.floatingThread||v;return(0,a.jsx)(e.i,{position:c?.position,portalElement:i.portalElement,...d,children:u&&(0,a.jsx)(f,{thread:u,selected:!0})})}Object.defineProperty(exports,`a`,{enumerable:!0,get:function(){return g}}),Object.defineProperty(exports,`c`,{enumerable:!0,get:function(){return f}}),Object.defineProperty(exports,`i`,{enumerable:!0,get:function(){return v}}),Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return b}}),Object.defineProperty(exports,`o`,{enumerable:!0,get:function(){return h}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return y}}),Object.defineProperty(exports,`s`,{enumerable:!0,get:function(){return d}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return x}}); //# sourceMappingURL=FloatingThreadController-BDiAihkl.cjs.map