@box/threaded-annotations 4.11.28 → 4.12.0

package/dist/chunks/text-message.module.js

@@ -1 +1 @@
-import '../styles/text-message2.css';var text_message_module_default={textMessage:`_textMessage_g9go2_29`,contentWrapper:`_contentWrapper_g9go2_38`,threadedIndicator:`_threadedIndicator_g9go2_43`,threadedIndicatorHidden:`_threadedIndicatorHidden_g9go2_59`,messageContent:`_messageContent_g9go2_62`,inlineEditSlot:`_inlineEditSlot_g9go2_99`,annotationBadgeWrapper:`_annotationBadgeWrapper_g9go2_102`,messageFooter:`_messageFooter_g9go2_111`,readableTimeWrapper:`_readableTimeWrapper_g9go2_119`,replyButton:`_replyButton_g9go2_123`,seeMoreButton:`_seeMoreButton_g9go2_138`,richTextList:`_richTextList_g9go2_142`};export{text_message_module_default as t};
+import '../styles/text-message2.css';var text_message_module_default={textMessage:`_textMessage_qsyra_29`,contentWrapper:`_contentWrapper_qsyra_38`,threadedIndicator:`_threadedIndicator_qsyra_43`,threadedIndicatorHidden:`_threadedIndicatorHidden_qsyra_59`,messageContent:`_messageContent_qsyra_62`,inlineEditSlot:`_inlineEditSlot_qsyra_100`,annotationBadgeWrapper:`_annotationBadgeWrapper_qsyra_103`,messageFooter:`_messageFooter_qsyra_111`,readableTimeWrapper:`_readableTimeWrapper_qsyra_117`,replyButton:`_replyButton_qsyra_121`,seeMoreButton:`_seeMoreButton_qsyra_136`,richTextList:`_richTextList_qsyra_140`};export{text_message_module_default as t};

package/dist/esm/lib/components/v2/message-editor/editor-extensions/custom-mention/useMentionState.js

@@ -1 +1 @@
-import{useCallback,useMemo,useState}from"react";var KeyEvents=function(KeyEvents){return KeyEvents.ARROW_DOWN=`ArrowDown`,KeyEvents.ARROW_UP=`ArrowUp`,KeyEvents.ENTER=`Enter`,KeyEvents}({}),useMentionState=userSelectorRef=>{let[isActive,setIsActive]=useState(!1),[query,setQuery]=useState(``),[command,setCommand]=useState(null),[clientRect,setClientRect]=useState(null);return{isActive,query,command,clientRect,suggestionCallbacks:useMemo(()=>({onSuggestionStart:startParams=>{setIsActive(!0),setQuery(startParams.query),setCommand(()=>startParams.command),setClientRect(()=>startParams.clientRect??null)},onSuggestionUpdate:updateParams=>{setIsActive(!0),setQuery(updateParams.query),setCommand(()=>updateParams.command),setClientRect(()=>updateParams.clientRect??null)},onSuggestionKeyDown:keyParams=>userSelectorRef.current?keyParams.event.key===`ArrowDown`?(userSelectorRef.current.selectNext(),!0):keyParams.event.key===`ArrowUp`?(userSelectorRef.current.selectPrevious(),!0):keyParams.event.key===`Enter`?(userSelectorRef.current.selectItem(),!0):!1:!1,onSuggestionExit:()=>{setIsActive(!1),setClientRect(null)}}),[userSelectorRef]),close:useCallback(()=>{setIsActive(!1),setQuery(``),setCommand(null),setClientRect(null)},[])}};export{KeyEvents,useMentionState};
+import{useCallback,useMemo,useState}from"react";var KeyEvents=function(KeyEvents){return KeyEvents.ARROW_DOWN=`ArrowDown`,KeyEvents.ARROW_UP=`ArrowUp`,KeyEvents.ENTER=`Enter`,KeyEvents}({}),useMentionState=userSelectorRef=>{let[isActive,setIsActive]=useState(!1),[query,setQuery]=useState(``),[command,setCommand]=useState(null),[clientRect,setClientRect]=useState(null);return{isActive,query,command,clientRect,suggestionCallbacks:useMemo(()=>({onSuggestionStart:startParams=>{setIsActive(!0),setQuery(startParams.query),setCommand(()=>startParams.command),setClientRect(()=>startParams.clientRect??null)},onSuggestionUpdate:updateParams=>{setIsActive(!0),setQuery(updateParams.query),setCommand(()=>updateParams.command),setClientRect(()=>updateParams.clientRect??null)},onSuggestionKeyDown:keyParams=>userSelectorRef.current?keyParams.event.key===`ArrowDown`?(userSelectorRef.current.selectNext(),!0):keyParams.event.key===`ArrowUp`?(userSelectorRef.current.selectPrevious(),!0):keyParams.event.key===`Enter`&&!keyParams.event.shiftKey?(userSelectorRef.current.selectItem(),!0):!1:!1,onSuggestionExit:()=>{setIsActive(!1),setClientRect(null)}}),[userSelectorRef]),close:useCallback(()=>{setIsActive(!1),setQuery(``),setCommand(null),setClientRect(null)},[])}};export{KeyEvents,useMentionState};

package/dist/esm/lib/components/v2/message-editor/message-editor.js

@@ -1 +1 @@
-import{THREADED_ANNOTATIONS_PORTAL}from"../../../v2/constants.js";import{useMentionContext}from"../../mention-component/mention-context.js";import{getSubmitShortcutAriaKeyShortcuts,isSubmitShortcut}from"../../../utils/is-submit-shortcut.js";import{createSuggestionOptions}from"./editor-extensions/custom-mention/custom-mention-suggestions.js";import{MENTION_PLUGIN_KEY,normalizeMentionPastedText,normalizeMentionTextInput}from"./editor-extensions/custom-mention/mention-trigger-normalization.js";import{useMentionState}from"./editor-extensions/custom-mention/useMentionState.js";import{createMessageEditorExtensions}from"./editor-extensions/create-message-editor-extensions.js";import{useCharacterLimit}from"./hooks/useCharacterLimit.js";import{useEditorContainerState}from"./hooks/useEditorContainerState.js";import{useMentionAnchorStyle}from"./hooks/useMentionAnchorStyle.js";import{useMentionUserSelection}from"./hooks/useMentionUserSelection.js";import{MessageEditorProvider,useMessageEditorContext}from"./message-editor-context.js";import messages from"./messages.js";import{t as message_editor_module_default}from"../../../../../chunks/message-editor2.module.js";import{CharacterLimitCounter}from"./subcomponents/character-limit-counter.js";import{EditButtons}from"./subcomponents/edit-buttons.js";import{ErrorMessage}from"./subcomponents/error-message.js";import{t as MessageEditorBubbleMenu}from"../../../../../chunks/message-editor-bubble-menu.js";import{PostButton}from"./subcomponents/post-button.js";import{t as TimestampToggle}from"../../../../../chunks/timestamp-toggle.js";import{MessageEditorVariant}from"./message-editor.types.js";import{VisuallyHidden}from"@box/blueprint-web";import clsx from"clsx";import{useCallback,useEffect,useMemo,useRef}from"react";import{useIntl}from"react-intl";import{Fragment,jsx,jsxs}from"react/jsx-runtime";import{EditorContent,useEditor,useEditorState}from"@tiptap/react";import{UserSelectorHeadless}from"@box/user-selector";var IS_APPLE_DEVICE=typeof navigator<`u`&&/Mac|iP(hone|ad|od)/.test(navigator.platform),MESSAGE_EDITOR_FOCUS_CONTROL_SELECTOR=`button, a, input, textarea, label, [role="toolbar"], [role="checkbox"], [tabindex="0"]`,getShortcutFormat=event=>{if(!(IS_APPLE_DEVICE?event.metaKey:event.ctrlKey))return null;if(event.shiftKey)return event.code===`Digit8`?`bulletList`:event.code===`Digit7`?`orderedList`:null;switch(event.key.toLowerCase()){case`b`:return`bold`;case`i`:return`italic`;case`u`:return`underline`;default:return null}},MessageEditorContent=props=>{let{autoFocus=!0,disableComponent=!1,initialContent,isFirstAnnotation=!1,isReply=!1,isRichTextEnabled=!1,maxCharacterCount,onChange,onFormatToggle,userSelectorProps,videoTimestamp}=props,userSelectorRef=useRef(null),editorContainerRef=useRef(null),editorViewportRef=useRef(null),editorRef=useRef(null),editorInstanceRef=useRef(null),postButtonRef=useRef(null),onFormatToggleRef=useRef(onFormatToggle);onFormatToggleRef.current=onFormatToggle;let onChangeRef=useRef(onChange);onChangeRef.current=onChange;let intl=useIntl(),{errorMessage,isLoading}=useMessageEditorContext(),{close:closeMentionDropdown,isActive,query,command,clientRect,suggestionCallbacks}=useMentionState(userSelectorRef),{closeAllPopovers}=useMentionContext(),placeholderText=intl.formatMessage(isReply?messages.placeholderReply:messages.placeholderAddComment),isEditVariant=props.variant===MessageEditorVariant.EDIT_MESSAGE,editor=useEditor({extensions:createMessageEditorExtensions({isRichTextEnabled,mentionSuggestion:createSuggestionOptions(MENTION_PLUGIN_KEY,`@`,suggestionCallbacks),placeholder:placeholderText}),autofocus:autoFocus,content:initialContent,editorProps:{attributes:{"aria-keyshortcuts":getSubmitShortcutAriaKeyShortcuts(),class:message_editor_module_default.editor},handleKeyDown:(view,event)=>{if(!isEditVariant&&isSubmitShortcut(event)){let postButton=postButtonRef.current;return!postButton||postButton.disabled?!1:(postButton.click(),!0)}if(isRichTextEnabled){let format=getShortcutFormat(event),editorInstance=editorInstanceRef.current;if(format&&editorInstance?.isEditable){let wasActive=editorInstance.isActive(format);queueMicrotask(()=>{if(editorInstance.isDestroyed)return;let isFormatActive=editorInstance.isActive(format);isFormatActive!==wasActive&&onFormatToggleRef.current?.(format,isFormatActive)})}}return!1},handleTextInput:normalizeMentionTextInput,transformPastedText:normalizeMentionPastedText},onCreate:({editor:editorInstance})=>{editorInstanceRef.current=editorInstance,editorRef.current=editorInstance.view.dom,autoFocus&&editorInstance.commands.focus(`end`)},onUpdate:({editor:editorInstance})=>{onChangeRef.current?.(editorInstance.isEmpty?null:editorInstance.getJSON()),closeAllPopovers?.()}},[placeholderText,isRichTextEnabled,isEditVariant]),{onUserSelected}=useMentionUserSelection(useMemo(()=>command&&editor&&!editor.isDestroyed?{command,editor}:null,[command,editor])),{exceedsSingleLine,hasScroll,isAtBottom}=useEditorContainerState(editorContainerRef,editor),{isInView:isMentionInView,style:mentionAnchorStyle}=useMentionAnchorStyle(clientRect,isActive,editorContainerRef),characterLimitState=useCharacterLimit(editor,maxCharacterCount),isEditorEmpty=useEditorState({editor,selector:()=>({isEmpty:!editor||!editor.schema||editor.isEmpty})})?.isEmpty??!0,shouldApplyEditorFullWidth=isEditVariant||!isFirstAnnotation||isFirstAnnotation&&exceedsSingleLine,disableEditor=disableComponent||isLoading,isCharacterLimitExceeded=(characterLimitState?.excess??0)>0,isPostDisabled=isEditorEmpty||disableEditor||isCharacterLimitExceeded,showCharacterLimitCounter=characterLimitState&&characterLimitState.excess>0&&shouldApplyEditorFullWidth;useEffect(()=>{editor&&editor.setEditable(!disableEditor)},[editor,disableEditor]),useEffect(()=>{if(!isCharacterLimitExceeded||!editorContainerRef.current||!initialContent)return;let innerFrameId=0,outerFrameId=requestAnimationFrame(()=>{innerFrameId=requestAnimationFrame(()=>{editorContainerRef.current?.scrollTo({top:editorContainerRef.current.scrollHeight})})});return()=>{cancelAnimationFrame(outerFrameId),cancelAnimationFrame(innerFrameId)}},[isCharacterLimitExceeded]),useEffect(()=>{!editor||initialContent===void 0||queueMicrotask(()=>{editor.isDestroyed||(editor.chain().setMeta(`addToHistory`,!1).setContent(initialContent??``,{emitUpdate:!1}).run(),onChangeRef.current?.(editor.isEmpty?null:editor.getJSON()),autoFocus&&editor.commands.focus(`end`))})},[initialContent]),useEffect(()=>{if(!isActive)return;let portalSelector=`[${Object.keys(THREADED_ANNOTATIONS_PORTAL)[0]}]`,isInsideEditorOrPortal=target=>{if(editorContainerRef.current?.contains(target))return!0;let portals=document.querySelectorAll(portalSelector);for(let portal of portals)if(portal.contains(target))return!0;return!1},handleClose=e=>{let target=e.target;!target||isInsideEditorOrPortal(target)||closeMentionDropdown()},frameId=requestAnimationFrame(()=>{document.addEventListener(`mousedown`,handleClose),document.addEventListener(`focusin`,handleClose)});return()=>{cancelAnimationFrame(frameId),document.removeEventListener(`mousedown`,handleClose),document.removeEventListener(`focusin`,handleClose)}},[closeMentionDropdown,isActive]);let handleFormatToggle=useCallback((format,isFormatActive)=>onFormatToggleRef.current?.(format,isFormatActive),[]),handleMessageEditorMouseDown=useCallback(event=>{if(disableEditor||!editor||editor.isDestroyed)return;let{target}=event;target instanceof Element&&(editorContainerRef.current?.contains(target)||editor.view.dom.contains(target)||target.closest(MESSAGE_EDITOR_FOCUS_CONTROL_SELECTOR)||editor.isFocused||editor.commands.focus(`end`))},[disableEditor,editor]),anchorElement=jsx(`div`,{className:message_editor_module_default.anchorElement,style:mentionAnchorStyle});return jsx(`div`,{"data-no-expand":!0,className:message_editor_module_default.messageEditorWrapper,children:jsxs(`div`,{className:clsx(message_editor_module_default.messageEditor,{[message_editor_module_default.editorHasScroll]:hasScroll,[message_editor_module_default.editorEditMode]:isEditVariant,[message_editor_module_default.editorError]:errorMessage||isCharacterLimitExceeded,[message_editor_module_default.editorFirstAnnotation]:!isEditVariant&&isFirstAnnotation,[message_editor_module_default.editorCharacterLimitExceeded]:isCharacterLimitExceeded}),onMouseDown:handleMessageEditorMouseDown,children:[jsxs(`div`,{ref:editorViewportRef,className:clsx(message_editor_module_default.editorViewport,{[message_editor_module_default.editorFullWidth]:shouldApplyEditorFullWidth}),children:[isRichTextEnabled&&jsx(MessageEditorBubbleMenu,{editor,menuAnchorRef:editorViewportRef,onFormatToggle:handleFormatToggle}),jsxs(`div`,{ref:editorContainerRef,className:message_editor_module_default.editorContainer,"aria-label":intl.formatMessage(messages.scrollContainerAriaLabel),children:[jsx(EditorContent,{"aria-label":intl.formatMessage(messages.editorContentAriaLabel),editor}),jsx(UserSelectorHeadless,{ref:userSelectorRef,inputElementRef:editorRef,onSelectedUserChange:onUserSelected,open:isActive,rootElement:anchorElement,value:query,...userSelectorProps,popoverContentContainerProps:{...userSelectorProps.popoverContentContainerProps,...THREADED_ANNOTATIONS_PORTAL,avoidCollisions:isMentionInView,className:clsx(message_editor_module_default.mentionListPopover,!isMentionInView&&message_editor_module_default.mentionListPopoverHidden,userSelectorProps.popoverContentContainerProps?.className)}})]}),hasScroll&&jsx(`div`,{className:clsx(message_editor_module_default.editorFade,{[message_editor_module_default.editorFadeHidden]:isAtBottom}),"aria-hidden":`true`})]}),jsx(`div`,{className:clsx(message_editor_module_default.actionsWrapper,{[message_editor_module_default.withTimestampToggle]:!!videoTimestamp}),children:jsxs(`div`,{className:clsx(message_editor_module_default.actionsWrapperInner,{[message_editor_module_default.scrolledToBottom]:isAtBottom,[message_editor_module_default.characterLimitExceeded]:isCharacterLimitExceeded}),children:[errorMessage&&jsx(ErrorMessage,{errorMessage}),characterLimitState&&characterLimitState.excess>0&&!shouldApplyEditorFullWidth&&jsx(VisuallyHidden,{role:`alert`,children:intl.formatMessage(messages.characterLimitExceeded,{excess:characterLimitState.excess})}),videoTimestamp&&jsx(TimestampToggle,{className:message_editor_module_default.timestampToggle,disabled:disableEditor,formattedTimestamp:videoTimestamp.formattedTimestamp,isPressed:videoTimestamp.isPressed,onChange:videoTimestamp.onPressedChange}),isEditVariant?jsxs(`div`,{className:message_editor_module_default.editActionsColumn,children:[showCharacterLimitCounter&&jsx(CharacterLimitCounter,{count:characterLimitState.count,excess:characterLimitState.excess,maxCount:characterLimitState.maxCount}),jsx(`div`,{className:message_editor_module_default.editActionsRow,children:jsx(EditButtons,{disabled:isPostDisabled,getEditorJsonContent:()=>editor?.getJSON(),onCancel:props.onEditCancel,onEditSuccess:props.onEditSuccess,onSave:props.onSave,onSaveError:props.onSaveError})})]}):jsxs(Fragment,{children:[showCharacterLimitCounter&&jsx(CharacterLimitCounter,{count:characterLimitState.count,excess:characterLimitState.excess,maxCount:characterLimitState.maxCount}),jsx(PostButton,{buttonRef:postButtonRef,cleanEditor:()=>editor?.chain().setMeta(`addToHistory`,!1).setContent(``,{emitUpdate:!1}).run(),disabled:isPostDisabled,getEditorJsonContent:()=>editor?.getJSON(),onPost:props.onPost,onPostError:props.onPostError,onPostSuccess:props.onPostSuccess})]})]})})]})})},MessageEditor=props=>jsx(MessageEditorProvider,{children:jsx(MessageEditorContent,{...props})});export{MessageEditor,MessageEditorVariant};
+import{THREADED_ANNOTATIONS_PORTAL}from"../../../v2/constants.js";import{useMentionContext}from"../../mention-component/mention-context.js";import{getSubmitShortcutAriaKeyShortcuts,isSubmitShortcut}from"../../../utils/is-submit-shortcut.js";import{createSuggestionOptions}from"./editor-extensions/custom-mention/custom-mention-suggestions.js";import{MENTION_PLUGIN_KEY,normalizeMentionPastedText,normalizeMentionTextInput}from"./editor-extensions/custom-mention/mention-trigger-normalization.js";import{useMentionState}from"./editor-extensions/custom-mention/useMentionState.js";import{createMessageEditorExtensions}from"./editor-extensions/create-message-editor-extensions.js";import{useCharacterLimit}from"./hooks/useCharacterLimit.js";import{useEditorContainerState}from"./hooks/useEditorContainerState.js";import{useMentionAnchorStyle}from"./hooks/useMentionAnchorStyle.js";import{useMentionUserSelection}from"./hooks/useMentionUserSelection.js";import{MessageEditorProvider,useMessageEditorContext}from"./message-editor-context.js";import messages from"./messages.js";import{t as message_editor_module_default}from"../../../../../chunks/message-editor2.module.js";import{CharacterLimitCounter}from"./subcomponents/character-limit-counter.js";import{EditButtons}from"./subcomponents/edit-buttons.js";import{ErrorMessage}from"./subcomponents/error-message.js";import{t as MessageEditorBubbleMenu}from"../../../../../chunks/message-editor-bubble-menu.js";import{PostButton}from"./subcomponents/post-button.js";import{t as TimestampToggle}from"../../../../../chunks/timestamp-toggle.js";import{MessageEditorVariant}from"./message-editor.types.js";import{VisuallyHidden}from"@box/blueprint-web";import clsx from"clsx";import{useCallback,useEffect,useMemo,useRef}from"react";import{useIntl}from"react-intl";import{Fragment,jsx,jsxs}from"react/jsx-runtime";import{EditorContent,useEditor,useEditorState}from"@tiptap/react";import{UserSelectorHeadless}from"@box/user-selector";var IS_APPLE_DEVICE=typeof navigator<`u`&&/Mac|iP(hone|ad|od)/.test(navigator.platform),MESSAGE_EDITOR_FOCUS_CONTROL_SELECTOR=`button, a, input, textarea, label, [role="toolbar"], [role="checkbox"], [tabindex="0"]`,getShortcutFormat=event=>{if(!(IS_APPLE_DEVICE?event.metaKey:event.ctrlKey))return null;if(event.shiftKey)return event.code===`Digit8`?`bulletList`:event.code===`Digit7`?`orderedList`:null;switch(event.key.toLowerCase()){case`b`:return`bold`;case`i`:return`italic`;case`u`:return`underline`;default:return null}},MessageEditorContent=props=>{let{autoFocus=!0,disableComponent=!1,initialContent,isFirstAnnotation=!1,isReply=!1,isRichTextEnabled=!1,maxCharacterCount,onChange,onFormatToggle,userSelectorProps,videoTimestamp}=props,userSelectorRef=useRef(null),editorContainerRef=useRef(null),editorViewportRef=useRef(null),editorRef=useRef(null),editorInstanceRef=useRef(null),postButtonRef=useRef(null),onFormatToggleRef=useRef(onFormatToggle);onFormatToggleRef.current=onFormatToggle;let onChangeRef=useRef(onChange);onChangeRef.current=onChange;let intl=useIntl(),{errorMessage,isLoading}=useMessageEditorContext(),{close:closeMentionDropdown,isActive,query,command,clientRect,suggestionCallbacks}=useMentionState(userSelectorRef),{closeAllPopovers}=useMentionContext(),placeholderText=intl.formatMessage(isReply?messages.placeholderReply:messages.placeholderAddComment),isEditVariant=props.variant===MessageEditorVariant.EDIT_MESSAGE,editor=useEditor({extensions:createMessageEditorExtensions({isRichTextEnabled,mentionSuggestion:createSuggestionOptions(MENTION_PLUGIN_KEY,`@`,suggestionCallbacks),placeholder:placeholderText}),autofocus:autoFocus,content:initialContent,editorProps:{attributes:{"aria-keyshortcuts":getSubmitShortcutAriaKeyShortcuts(),class:message_editor_module_default.editor},handleKeyDown:(view,event)=>{if(event.key===`Enter`&&event.shiftKey&&!event.isComposing)return editorInstanceRef.current?.commands.splitBlock()??!1;if(!isEditVariant&&isSubmitShortcut(event)){let postButton=postButtonRef.current;return!postButton||postButton.disabled?!1:(postButton.click(),!0)}if(isRichTextEnabled){let format=getShortcutFormat(event),editorInstance=editorInstanceRef.current;if(format&&editorInstance?.isEditable){let wasActive=editorInstance.isActive(format);queueMicrotask(()=>{if(editorInstance.isDestroyed)return;let isFormatActive=editorInstance.isActive(format);isFormatActive!==wasActive&&onFormatToggleRef.current?.(format,isFormatActive)})}}return!1},handleTextInput:normalizeMentionTextInput,transformPastedText:normalizeMentionPastedText},onCreate:({editor:editorInstance})=>{editorInstanceRef.current=editorInstance,editorRef.current=editorInstance.view.dom,autoFocus&&editorInstance.commands.focus(`end`)},onUpdate:({editor:editorInstance})=>{onChangeRef.current?.(editorInstance.isEmpty?null:editorInstance.getJSON()),closeAllPopovers?.()}},[placeholderText,isRichTextEnabled,isEditVariant]),{onUserSelected}=useMentionUserSelection(useMemo(()=>command&&editor&&!editor.isDestroyed?{command,editor}:null,[command,editor])),{exceedsSingleLine,hasScroll,isAtBottom}=useEditorContainerState(editorContainerRef,editor),{isInView:isMentionInView,style:mentionAnchorStyle}=useMentionAnchorStyle(clientRect,isActive,editorContainerRef),characterLimitState=useCharacterLimit(editor,maxCharacterCount),isEditorEmpty=useEditorState({editor,selector:()=>({isEmpty:!editor||!editor.schema||editor.isEmpty})})?.isEmpty??!0,shouldApplyEditorFullWidth=isEditVariant||!isFirstAnnotation||isFirstAnnotation&&exceedsSingleLine,disableEditor=disableComponent||isLoading,isCharacterLimitExceeded=(characterLimitState?.excess??0)>0,isPostDisabled=isEditorEmpty||disableEditor||isCharacterLimitExceeded,showCharacterLimitCounter=characterLimitState&&characterLimitState.excess>0&&shouldApplyEditorFullWidth;useEffect(()=>{editor&&editor.setEditable(!disableEditor)},[editor,disableEditor]),useEffect(()=>{if(!isCharacterLimitExceeded||!editorContainerRef.current||!initialContent)return;let innerFrameId=0,outerFrameId=requestAnimationFrame(()=>{innerFrameId=requestAnimationFrame(()=>{editorContainerRef.current?.scrollTo({top:editorContainerRef.current.scrollHeight})})});return()=>{cancelAnimationFrame(outerFrameId),cancelAnimationFrame(innerFrameId)}},[isCharacterLimitExceeded]),useEffect(()=>{!editor||initialContent===void 0||queueMicrotask(()=>{editor.isDestroyed||(editor.chain().setMeta(`addToHistory`,!1).setContent(initialContent??``,{emitUpdate:!1}).run(),onChangeRef.current?.(editor.isEmpty?null:editor.getJSON()),autoFocus&&editor.commands.focus(`end`))})},[initialContent]),useEffect(()=>{if(!isActive)return;let portalSelector=`[${Object.keys(THREADED_ANNOTATIONS_PORTAL)[0]}]`,isInsideEditorOrPortal=target=>{if(editorContainerRef.current?.contains(target))return!0;let portals=document.querySelectorAll(portalSelector);for(let portal of portals)if(portal.contains(target))return!0;return!1},handleClose=e=>{let target=e.target;!target||isInsideEditorOrPortal(target)||closeMentionDropdown()},frameId=requestAnimationFrame(()=>{document.addEventListener(`mousedown`,handleClose),document.addEventListener(`focusin`,handleClose)});return()=>{cancelAnimationFrame(frameId),document.removeEventListener(`mousedown`,handleClose),document.removeEventListener(`focusin`,handleClose)}},[closeMentionDropdown,isActive]);let handleFormatToggle=useCallback((format,isFormatActive)=>onFormatToggleRef.current?.(format,isFormatActive),[]),handleMessageEditorMouseDown=useCallback(event=>{if(disableEditor||!editor||editor.isDestroyed)return;let{target}=event;target instanceof Element&&(editorContainerRef.current?.contains(target)||editor.view.dom.contains(target)||target.closest(MESSAGE_EDITOR_FOCUS_CONTROL_SELECTOR)||editor.isFocused||editor.commands.focus(`end`))},[disableEditor,editor]),anchorElement=jsx(`div`,{className:message_editor_module_default.anchorElement,style:mentionAnchorStyle});return jsx(`div`,{"data-no-expand":!0,className:message_editor_module_default.messageEditorWrapper,children:jsxs(`div`,{className:clsx(message_editor_module_default.messageEditor,{[message_editor_module_default.editorHasScroll]:hasScroll,[message_editor_module_default.editorEditMode]:isEditVariant,[message_editor_module_default.editorError]:errorMessage||isCharacterLimitExceeded,[message_editor_module_default.editorFirstAnnotation]:!isEditVariant&&isFirstAnnotation,[message_editor_module_default.editorCharacterLimitExceeded]:isCharacterLimitExceeded}),onMouseDown:handleMessageEditorMouseDown,children:[jsxs(`div`,{ref:editorViewportRef,className:clsx(message_editor_module_default.editorViewport,{[message_editor_module_default.editorFullWidth]:shouldApplyEditorFullWidth}),children:[isRichTextEnabled&&jsx(MessageEditorBubbleMenu,{editor,menuAnchorRef:editorViewportRef,onFormatToggle:handleFormatToggle}),jsxs(`div`,{ref:editorContainerRef,className:message_editor_module_default.editorContainer,"aria-label":intl.formatMessage(messages.scrollContainerAriaLabel),children:[jsx(EditorContent,{"aria-label":intl.formatMessage(messages.editorContentAriaLabel),editor}),jsx(UserSelectorHeadless,{ref:userSelectorRef,inputElementRef:editorRef,onSelectedUserChange:onUserSelected,open:isActive,rootElement:anchorElement,value:query,...userSelectorProps,popoverContentContainerProps:{...userSelectorProps.popoverContentContainerProps,...THREADED_ANNOTATIONS_PORTAL,avoidCollisions:isMentionInView,className:clsx(message_editor_module_default.mentionListPopover,!isMentionInView&&message_editor_module_default.mentionListPopoverHidden,userSelectorProps.popoverContentContainerProps?.className)}})]}),hasScroll&&jsx(`div`,{className:clsx(message_editor_module_default.editorFade,{[message_editor_module_default.editorFadeHidden]:isAtBottom}),"aria-hidden":`true`})]}),jsx(`div`,{className:clsx(message_editor_module_default.actionsWrapper,{[message_editor_module_default.withTimestampToggle]:!!videoTimestamp}),children:jsxs(`div`,{className:clsx(message_editor_module_default.actionsWrapperInner,{[message_editor_module_default.scrolledToBottom]:isAtBottom,[message_editor_module_default.characterLimitExceeded]:isCharacterLimitExceeded}),children:[errorMessage&&jsx(ErrorMessage,{errorMessage}),characterLimitState&&characterLimitState.excess>0&&!shouldApplyEditorFullWidth&&jsx(VisuallyHidden,{role:`alert`,children:intl.formatMessage(messages.characterLimitExceeded,{excess:characterLimitState.excess})}),videoTimestamp&&jsx(TimestampToggle,{className:message_editor_module_default.timestampToggle,disabled:disableEditor,formattedTimestamp:videoTimestamp.formattedTimestamp,isPressed:videoTimestamp.isPressed,onChange:videoTimestamp.onPressedChange}),isEditVariant?jsxs(`div`,{className:message_editor_module_default.editActionsColumn,children:[showCharacterLimitCounter&&jsx(CharacterLimitCounter,{count:characterLimitState.count,excess:characterLimitState.excess,maxCount:characterLimitState.maxCount}),jsx(`div`,{className:message_editor_module_default.editActionsRow,children:jsx(EditButtons,{disabled:isPostDisabled,getEditorJsonContent:()=>editor?.getJSON(),onCancel:props.onEditCancel,onEditSuccess:props.onEditSuccess,onSave:props.onSave,onSaveError:props.onSaveError})})]}):jsxs(Fragment,{children:[showCharacterLimitCounter&&jsx(CharacterLimitCounter,{count:characterLimitState.count,excess:characterLimitState.excess,maxCount:characterLimitState.maxCount}),jsx(PostButton,{buttonRef:postButtonRef,cleanEditor:()=>editor?.chain().setMeta(`addToHistory`,!1).setContent(``,{emitUpdate:!1}).run(),disabled:isPostDisabled,getEditorJsonContent:()=>editor?.getJSON(),onPost:props.onPost,onPostError:props.onPostError,onPostSuccess:props.onPostSuccess})]})]})})]})})},MessageEditor=props=>jsx(MessageEditorProvider,{children:jsx(MessageEditorContent,{...props})});export{MessageEditor,MessageEditorVariant};

package/dist/styles/text-message2.css

@@ -1 +1 @@
-._textMessage_g9go2_29{flex-direction:column;flex:1;width:100%;height:100%;display:flex;position:relative;overflow:visible}._textMessage_g9go2_29 ._contentWrapper_g9go2_38{gap:var(--space-2);margin-top:.125rem;display:flex}._textMessage_g9go2_29 ._contentWrapper_g9go2_38 ._threadedIndicator_g9go2_43{width:var(--space-7);flex-shrink:0;position:relative}._textMessage_g9go2_29 ._contentWrapper_g9go2_38 ._threadedIndicator_g9go2_43:after{content:"";left:50%;top:var(--space-05);bottom:var(--space-05);width:var(--border-2);background-color:var(--border-divider-border);border-radius:var(--radius-1);position:absolute;transform:translate(-50%)}._textMessage_g9go2_29 ._contentWrapper_g9go2_38 ._threadedIndicatorHidden_g9go2_59:after{visibility:hidden}._textMessage_g9go2_29 ._contentWrapper_g9go2_38 ._messageContent_g9go2_62{overflow-wrap:break-word;flex-direction:column;flex:1;min-width:0;display:flex}._textMessage_g9go2_29 ._contentWrapper_g9go2_38 ._messageContent_g9go2_62 strong{font-weight:var(--bp-font-weight-bold);font-style:inherit}._textMessage_g9go2_29 ._contentWrapper_g9go2_38 ._messageContent_g9go2_62 em{font-style:italic;font-weight:inherit}._textMessage_g9go2_29 ._contentWrapper_g9go2_38 ._messageContent_g9go2_62 ul,._textMessage_g9go2_29 ._contentWrapper_g9go2_38 ._messageContent_g9go2_62 ol{margin:0;padding-inline-start:var(--bp-space-060)}._textMessage_g9go2_29 ._contentWrapper_g9go2_38 ._messageContent_g9go2_62 ul,._textMessage_g9go2_29 ._contentWrapper_g9go2_38 ._messageContent_g9go2_62 ul>li{list-style-type:disc}._textMessage_g9go2_29 ._contentWrapper_g9go2_38 ._messageContent_g9go2_62 ol,._textMessage_g9go2_29 ._contentWrapper_g9go2_38 ._messageContent_g9go2_62 ol>li{list-style-type:decimal}._textMessage_g9go2_29 ._contentWrapper_g9go2_38 ._messageContent_g9go2_62 ul ul,._textMessage_g9go2_29 ._contentWrapper_g9go2_38 ._messageContent_g9go2_62 ul ol,._textMessage_g9go2_29 ._contentWrapper_g9go2_38 ._messageContent_g9go2_62 ol ul,._textMessage_g9go2_29 ._contentWrapper_g9go2_38 ._messageContent_g9go2_62 ol ol{margin-block-start:var(--bp-space-005)}._textMessage_g9go2_29 ._contentWrapper_g9go2_38 ._messageContent_g9go2_62 li p{margin:0}._textMessage_g9go2_29 ._contentWrapper_g9go2_38 ._messageContent_g9go2_62 ._inlineEditSlot_g9go2_99{margin-top:var(--space-2)}._textMessage_g9go2_29 ._contentWrapper_g9go2_38 ._messageContent_g9go2_62 ._annotationBadgeWrapper_g9go2_102{min-width:0;max-width:100%;padding-bottom:var(--space-1);flex-direction:column;align-items:flex-start;display:flex;overflow:hidden}._textMessage_g9go2_29 ._contentWrapper_g9go2_38 ._messageFooter_g9go2_111{align-items:center;gap:var(--space-1);padding-bottom:var(--space-2);margin-top:var(--space-1);flex-direction:row;display:flex}._textMessage_g9go2_29 ._contentWrapper_g9go2_38 ._messageFooter_g9go2_111 ._readableTimeWrapper_g9go2_119{cursor:auto}._replyButton_g9go2_123{padding-top:var(--space-05);padding-bottom:var(--space-05);opacity:0;transition:opacity .1s}[data-message-wrapper]:hover ._replyButton_g9go2_123,[data-message-wrapper]:focus-within ._replyButton_g9go2_123{opacity:1}@media (pointer:coarse),(hover:none){._replyButton_g9go2_123{opacity:1}}._seeMoreButton_g9go2_138{margin-inline-start:var(--bp-space-010)}._richTextList_g9go2_142 li{margin:0;padding:0}._richTextList_g9go2_142 li+li{margin-block-start:var(--bp-space-005)}
+._textMessage_qsyra_29{flex-direction:column;flex:1;width:100%;height:100%;display:flex;position:relative;overflow:visible}._textMessage_qsyra_29 ._contentWrapper_qsyra_38{gap:var(--space-2);margin-top:.125rem;display:flex}._textMessage_qsyra_29 ._contentWrapper_qsyra_38 ._threadedIndicator_qsyra_43{width:var(--space-7);flex-shrink:0;position:relative}._textMessage_qsyra_29 ._contentWrapper_qsyra_38 ._threadedIndicator_qsyra_43:after{content:"";left:50%;top:var(--space-05);bottom:var(--space-05);width:var(--border-2);background-color:var(--border-divider-border);border-radius:var(--radius-1);position:absolute;transform:translate(-50%)}._textMessage_qsyra_29 ._contentWrapper_qsyra_38 ._threadedIndicatorHidden_qsyra_59:after{visibility:hidden}._textMessage_qsyra_29 ._contentWrapper_qsyra_38 ._messageContent_qsyra_62{overflow-wrap:break-word;row-gap:var(--bp-space-010);flex-direction:column;flex:1;min-width:0;display:flex}._textMessage_qsyra_29 ._contentWrapper_qsyra_38 ._messageContent_qsyra_62 strong{font-weight:var(--bp-font-weight-bold);font-style:inherit}._textMessage_qsyra_29 ._contentWrapper_qsyra_38 ._messageContent_qsyra_62 em{font-style:italic;font-weight:inherit}._textMessage_qsyra_29 ._contentWrapper_qsyra_38 ._messageContent_qsyra_62 ul,._textMessage_qsyra_29 ._contentWrapper_qsyra_38 ._messageContent_qsyra_62 ol{margin:0;padding-inline-start:var(--bp-space-060)}._textMessage_qsyra_29 ._contentWrapper_qsyra_38 ._messageContent_qsyra_62 ul,._textMessage_qsyra_29 ._contentWrapper_qsyra_38 ._messageContent_qsyra_62 ul>li{list-style-type:disc}._textMessage_qsyra_29 ._contentWrapper_qsyra_38 ._messageContent_qsyra_62 ol,._textMessage_qsyra_29 ._contentWrapper_qsyra_38 ._messageContent_qsyra_62 ol>li{list-style-type:decimal}._textMessage_qsyra_29 ._contentWrapper_qsyra_38 ._messageContent_qsyra_62 ul ul,._textMessage_qsyra_29 ._contentWrapper_qsyra_38 ._messageContent_qsyra_62 ul ol,._textMessage_qsyra_29 ._contentWrapper_qsyra_38 ._messageContent_qsyra_62 ol ul,._textMessage_qsyra_29 ._contentWrapper_qsyra_38 ._messageContent_qsyra_62 ol ol{margin-block-start:var(--bp-space-005)}._textMessage_qsyra_29 ._contentWrapper_qsyra_38 ._messageContent_qsyra_62 li p{margin:0}._textMessage_qsyra_29 ._contentWrapper_qsyra_38 ._messageContent_qsyra_62 ._inlineEditSlot_qsyra_100{margin-top:var(--space-2)}._textMessage_qsyra_29 ._contentWrapper_qsyra_38 ._messageContent_qsyra_62 ._annotationBadgeWrapper_qsyra_103{flex-direction:column;align-items:flex-start;min-width:0;max-width:100%;display:flex;overflow:hidden}._textMessage_qsyra_29 ._contentWrapper_qsyra_38 ._messageFooter_qsyra_111{align-items:center;gap:var(--space-1);flex-direction:row;display:flex}._textMessage_qsyra_29 ._contentWrapper_qsyra_38 ._messageFooter_qsyra_111 ._readableTimeWrapper_qsyra_117{cursor:auto}._replyButton_qsyra_121{padding-top:var(--space-05);padding-bottom:var(--space-05);opacity:0;transition:opacity .1s}[data-message-wrapper]:hover ._replyButton_qsyra_121,[data-message-wrapper]:focus-within ._replyButton_qsyra_121{opacity:1}@media (pointer:coarse),(hover:none){._replyButton_qsyra_121{opacity:1}}._seeMoreButton_qsyra_136{margin-inline-start:var(--bp-space-010)}._richTextList_qsyra_140 li{margin:0;padding:0}._richTextList_qsyra_140 li+li{margin-block-start:var(--bp-space-005)}

package/dist/types/lib/components/v2/message-editor/stories/shared.d.ts

@@ -1,13 +1,12 @@
 import { UserContactType } from '@box/user-selector';
 import { JSONContent } from '@tiptap/react';
+import { RICH_TEXT_INITIAL_CONTENT } from '../../../../v2/test-utils';
 import { MessageEditorProps } from '../message-editor';
+export { RICH_TEXT_INITIAL_CONTENT };
 export declare const defaultUserSelectorProps: Omit<import('@box/user-selector').HeadlessUserSelectorProps, "open" | "value" | "rootElement" | "onSelectedUserChange" | "inputElementRef">;
 /** Long enough to scroll inside the 10rem editor. */
 export declare const LONG_MULTI_PARAGRAPH_COMMENT: JSONContent;
-/** Document exercising every rich text format: the three marks plus both list types. */
-export declare const RICH_TEXT_INITIAL_CONTENT: JSONContent;
 type DefaultMessageEditorProps = MessageEditorProps & {
     fetchCollaboratorState?: (user: UserContactType) => Promise<boolean>;
 };
 export declare const DefaultMessageEditor: ({ fetchCollaboratorState, videoTimestamp, ...props }: DefaultMessageEditorProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/types/lib/v2/stories/shared.d.ts

@@ -1,3 +1,4 @@
+import { JSONContent } from '@tiptap/core';
 import { CollaborationPopoverProps } from '@box/collaboration-popover';
 import { MentionContextData } from '../../components/mention-component/mention-context';
 import { ThreadedAnnotationsProps } from '../threaded-annotations';
@@ -11,8 +12,11 @@ interface InteractiveModuleBaseProps {
     isEditDisabled?: boolean;
     isHighlighted?: boolean;
     isReplyDisabled?: boolean;
+    isRichTextEnabled?: boolean;
     maxCharacterCount?: number;
     onCopyLink?: (id: string) => void;
+    onEditSpy?: (id: string, content: JSONContent | null) => void;
+    onPostSpy?: (content: JSONContent | null) => void;
 }
 type InteractiveModuleProps = (InteractiveModuleBaseProps & {
     isAnnotations: true;

package/dist/types/lib/v2/test-utils/index.d.ts

@@ -1,6 +1,7 @@
 export * from './button-utils';
 export * from './default-user-selector-props';
 export * from './interaction-utils';
+export * from './rich-text-initial-content';
 export * from './test-selectors';
 export * from './text-utils';
 export * from './verify-mention-elements';

package/dist/types/lib/v2/test-utils/interaction-utils.d.ts

@@ -8,4 +8,6 @@ export declare const clickReplyOnMessage: (user: ReturnType<typeof userEvent.set
 export declare const clickThreadBackground: (canvas: ReturnType<typeof within>) => void;
 export declare const clickMessageText: (canvas: ReturnType<typeof within>) => void;
 export declare const clickAuthorName: (canvas: ReturnType<typeof within>, authorName: string) => void;
+export declare const waitForContentEditable: (canvasElement: HTMLElement, timeout?: number) => Promise<HTMLElement>;
+export declare const expandThreadAndWaitForEditor: (canvas: ReturnType<typeof within>, canvasElement: HTMLElement) => Promise<void>;
 export declare const selectUserByEmail: (user: ReturnType<typeof userEvent.setup>, identifier: string) => Promise<void>;

package/dist/types/lib/v2/test-utils/rich-text-initial-content.d.ts

@@ -0,0 +1,3 @@
+import { DocumentNode } from '../types';
+/** Screenshot document: three marks plus both list types. */
+export declare const RICH_TEXT_INITIAL_CONTENT: DocumentNode;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/threaded-annotations",
-    "version": "4.11.28",
+    "version": "4.12.0",
     "license": "SEE LICENSE IN LICENSE",
     "dependencies": {
         "@floating-ui/dom": "^1.6.0",
@@ -22,23 +22,23 @@
         "uuid": "^9.0.1"
     },
     "peerDependencies": {
-        "@box/blueprint-web": "^17.15.3",
-        "@box/blueprint-web-assets": "^5.10.25",
-        "@box/collaboration-popover": "^2.2.69",
-        "@box/readable-time": "^2.2.69",
-        "@box/user-selector": "^3.0.49",
+        "@box/blueprint-web": "^17.15.4",
+        "@box/blueprint-web-assets": "^5.10.26",
+        "@box/collaboration-popover": "^2.2.70",
+        "@box/readable-time": "^2.2.70",
+        "@box/user-selector": "^3.0.50",
         "clsx": "^1.2.1",
         "react": "^18.0.0",
         "react-dom": "^18.0.0",
         "react-intl": "^6.4.2"
     },
     "devDependencies": {
-        "@box/blueprint-web": "^17.15.3",
-        "@box/blueprint-web-assets": "^5.10.25",
-        "@box/eslint-plugin-blueprint": "2.2.23",
-        "@box/readable-time": "^2.2.69",
-        "@box/storybook-utils": "^1.2.69",
-        "@box/user-selector": "^3.0.49",
+        "@box/blueprint-web": "^17.15.4",
+        "@box/blueprint-web-assets": "^5.10.26",
+        "@box/eslint-plugin-blueprint": "2.2.24",
+        "@box/readable-time": "^2.2.70",
+        "@box/storybook-utils": "^1.2.70",
+        "@box/user-selector": "^3.0.50",
         "@types/markdown-it": "^14.1.2",
         "react": "^18.0.0",
         "react-dom": "^18.0.0"