@box/threaded-annotations 4.11.27 → 4.11.29

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

@@ -1 +1 @@
-import '../styles/message-editor2.css';var message_editor_module_default={messageEditorWrapper:`_messageEditorWrapper_oercc_29`,editActionsColumn:`_editActionsColumn_oercc_34`,editActionsRow:`_editActionsRow_oercc_41`,characterLimitCounter:`_characterLimitCounter_oercc_47`,messageEditor:`_messageEditor_oercc_29`,editorEditMode:`_editorEditMode_oercc_65`,editorFirstAnnotation:`_editorFirstAnnotation_oercc_72`,editorError:`_editorError_oercc_72`,editorViewport:`_editorViewport_oercc_80`,editorContainer:`_editorContainer_oercc_86`,editor:`_editor_oercc_65`,editorFade:`_editorFade_oercc_176`,editorFadeHidden:`_editorFadeHidden_oercc_187`,editorFullWidth:`_editorFullWidth_oercc_190`,actionsWrapper:`_actionsWrapper_oercc_194`,actionsWrapperInner:`_actionsWrapperInner_oercc_204`,timestampToggle:`_timestampToggle_oercc_211`,errorMessage:`_errorMessage_oercc_214`,errorText:`_errorText_oercc_223`,editorHasScroll:`_editorHasScroll_oercc_232`,editorCharacterLimitExceeded:`_editorCharacterLimitExceeded_oercc_243`,characterLimitExceeded:`_characterLimitExceeded_oercc_265`,scrolledToBottom:`_scrolledToBottom_oercc_268`,anchorElement:`_anchorElement_oercc_272`,withTimestampToggle:`_withTimestampToggle_oercc_281`};export{message_editor_module_default as t};
+import '../styles/message-editor2.css';var message_editor_module_default={messageEditorWrapper:`_messageEditorWrapper_qphqj_29`,editActionsColumn:`_editActionsColumn_qphqj_34`,editActionsRow:`_editActionsRow_qphqj_41`,characterLimitCounter:`_characterLimitCounter_qphqj_47`,messageEditor:`_messageEditor_qphqj_29`,editorEditMode:`_editorEditMode_qphqj_65`,editorFirstAnnotation:`_editorFirstAnnotation_qphqj_72`,editorError:`_editorError_qphqj_72`,editorViewport:`_editorViewport_qphqj_80`,editorContainer:`_editorContainer_qphqj_86`,editor:`_editor_qphqj_65`,editorFade:`_editorFade_qphqj_176`,editorFadeHidden:`_editorFadeHidden_qphqj_187`,editorFullWidth:`_editorFullWidth_qphqj_190`,actionsWrapper:`_actionsWrapper_qphqj_194`,actionsWrapperInner:`_actionsWrapperInner_qphqj_204`,timestampToggle:`_timestampToggle_qphqj_211`,errorMessage:`_errorMessage_qphqj_214`,errorText:`_errorText_qphqj_223`,editorHasScroll:`_editorHasScroll_qphqj_232`,editorCharacterLimitExceeded:`_editorCharacterLimitExceeded_qphqj_243`,characterLimitExceeded:`_characterLimitExceeded_qphqj_265`,scrolledToBottom:`_scrolledToBottom_qphqj_268`,anchorElement:`_anchorElement_qphqj_272`,mentionListPopoverHidden:`_mentionListPopoverHidden_qphqj_277`,withTimestampToggle:`_withTimestampToggle_qphqj_284`};export{message_editor_module_default as t};

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/getMentionAnchorStyle.js

@@ -0,0 +1 @@
+var MIN_MENTION_ANCHOR_SIZE_PX=1,isMentionRectInView=(rect,container)=>{let containerRect=container.getBoundingClientRect(),viewTop=Math.max(containerRect.top,0),viewBottom=Math.min(containerRect.bottom,window.innerHeight),viewLeft=Math.max(containerRect.left,0),viewRight=Math.min(containerRect.right,window.innerWidth);return viewBottom<=viewTop||viewRight<=viewLeft?!1:rect.top>=viewTop&&rect.bottom<=viewBottom&&rect.left>=viewLeft&&rect.right<=viewRight},getMentionAnchorStyle=(rect,container)=>{let containerRect=container.getBoundingClientRect();return{height:Math.max(rect.height,1),left:rect.left-containerRect.left+container.scrollLeft,top:rect.top-containerRect.top+container.scrollTop,width:Math.max(rect.width,1)}};export{MIN_MENTION_ANCHOR_SIZE_PX,getMentionAnchorStyle,isMentionRectInView};

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);return{isActive,query,command,suggestionCallbacks:useMemo(()=>({onSuggestionStart:startParams=>{setIsActive(!0),setQuery(startParams.query),setCommand(()=>startParams.command)},onSuggestionUpdate:updateParams=>{setIsActive(!0),setQuery(updateParams.query),setCommand(()=>updateParams.command)},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)}}),[userSelectorRef]),close:useCallback(()=>{setIsActive(!1),setQuery(``),setCommand(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`?(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/hooks/useMentionAnchorStyle.js

@@ -0,0 +1 @@
+import{THREADED_ANNOTATIONS_PORTAL}from"../../../../v2/constants.js";import{getMentionAnchorStyle,isMentionRectInView}from"../editor-extensions/custom-mention/getMentionAnchorStyle.js";import{useLayoutEffect,useState}from"react";var MENTION_LIST_PORTAL_SELECTOR=`[${Object.keys(THREADED_ANNOTATIONS_PORTAL)[0]}]`,getMentionListFloatingEl=()=>{let listbox=document.querySelector(`${MENTION_LIST_PORTAL_SELECTOR} [role="listbox"]`);if(!(listbox instanceof HTMLElement))return null;let wrapper=listbox.closest(`[data-radix-popper-content-wrapper]`),content=listbox.closest(MENTION_LIST_PORTAL_SELECTOR);return wrapper instanceof HTMLElement?wrapper:content instanceof HTMLElement?content:listbox},setMentionListHidden=hidden=>{let floatingEl=getMentionListFloatingEl();if(floatingEl){if(hidden){floatingEl.style.setProperty(`visibility`,`hidden`,`important`),floatingEl.style.setProperty(`pointer-events`,`none`),floatingEl.style.setProperty(`opacity`,`0`,`important`);return}floatingEl.style.removeProperty(`visibility`),floatingEl.style.removeProperty(`pointer-events`),floatingEl.style.removeProperty(`opacity`)}},useMentionAnchorStyle=(getClientRect,isActive,containerRef)=>{let[state,setState]=useState({isInView:!1,style:void 0});return useLayoutEffect(()=>{if(!isActive){setMentionListHidden(!1),setState({isInView:!1,style:void 0});return}let update=()=>{let container=containerRef.current,rect=getClientRect?.()??null;if(!container||!rect){setMentionListHidden(!0),setState({isInView:!1,style:void 0});return}if(!isMentionRectInView(rect,container)){setMentionListHidden(!0),setState(prev=>({...prev,isInView:!1}));return}setState({isInView:!0,style:getMentionAnchorStyle(rect,container)}),setMentionListHidden(!1)};update();let container=containerRef.current;if(!container)return;let contentEl=container.firstElementChild??container,observer=new ResizeObserver(update);return observer.observe(container),contentEl!==container&&observer.observe(contentEl),window.addEventListener(`scroll`,update,!0),window.addEventListener(`resize`,update),()=>{observer.disconnect(),window.removeEventListener(`scroll`,update,!0),window.removeEventListener(`resize`,update)}},[containerRef,getClientRect,isActive]),state};export{useMentionAnchorStyle};

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{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,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),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});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:!0}})]}),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(!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/message-editor2.css

@@ -1 +1 @@
-._messageEditorWrapper_oercc_29{cursor:auto;width:100%}._editActionsColumn_oercc_34{align-items:flex-end;gap:var(--bp-space-010);flex-direction:column;display:flex}._editActionsRow_oercc_41{align-items:center;gap:var(--bp-space-020);display:flex}._characterLimitCounter_oercc_47{white-space:nowrap}._messageEditor_oercc_29{--gradient-fade-height:var(--bp-size-040);box-sizing:border-box;padding:.625rem var(--bp-space-005) .625rem var(--bp-space-040);background-color:var(--surface-surface);outline:var(--bp-border-01) solid var(--border-divider-border);border-radius:var(--bp-radius-10);gap:var(--bp-space-020) var(--bp-space-010);cursor:auto;flex-wrap:wrap;width:100%;display:flex;position:relative}._messageEditor_oercc_29._editorEditMode_oercc_65{--gradient-fade-height:var(--bp-size-050)}._messageEditor_oercc_29:focus-within{outline-width:var(--bp-border-02);outline-color:var(--border-input-border-focus)}._messageEditor_oercc_29._editorFirstAnnotation_oercc_72:not(._editorError_oercc_72):focus-within{outline-width:var(--bp-border-01);outline-color:var(--border-divider-border)}._messageEditor_oercc_29._editorError_oercc_72{outline-color:var(--bp-border-message-border-error);outline-width:var(--bp-border-02)}._messageEditor_oercc_29 ._editorViewport_oercc_80{width:fit-content;min-width:calc(100% - 2.875rem);margin:auto 0;position:relative}._messageEditor_oercc_29 ._editorViewport_oercc_80 ._editorContainer_oercc_86{box-sizing:border-box;scrollbar-width:thin;scrollbar-color:var(--black-opacity-50) transparent;position:relative;overflow-y:scroll}@supports not (scrollbar-color:gray transparent){._messageEditor_oercc_29 ._editorViewport_oercc_80 ._editorContainer_oercc_86{scrollbar-width:initial}._messageEditor_oercc_29 ._editorViewport_oercc_80 ._editorContainer_oercc_86::-webkit-scrollbar{width:var(--size-2);background-color:#0000}._messageEditor_oercc_29 ._editorViewport_oercc_80 ._editorContainer_oercc_86::-webkit-scrollbar-thumb{background:var(--black-opacity-50);border-radius:var(--radius-2)}._messageEditor_oercc_29 ._editorViewport_oercc_80 ._editorContainer_oercc_86::-webkit-scrollbar-thumb:hover{background:var(--black-opacity-50)}}._messageEditor_oercc_29 ._editorViewport_oercc_80 ._editorContainer_oercc_86{max-height:10rem;padding:.375rem .625rem .375rem 0}._messageEditor_oercc_29 ._editorViewport_oercc_80 ._editorContainer_oercc_86 ._editor_oercc_65{outline:none;width:100%}._messageEditor_oercc_29 ._editorViewport_oercc_80 ._editorContainer_oercc_86 ._editor_oercc_65 strong{font-weight:var(--bp-font-weight-bold);font-style:inherit}._messageEditor_oercc_29 ._editorViewport_oercc_80 ._editorContainer_oercc_86 ._editor_oercc_65 em{font-style:italic;font-weight:inherit}._messageEditor_oercc_29 ._editorViewport_oercc_80 ._editorContainer_oercc_86 ._editor_oercc_65 ul,._messageEditor_oercc_29 ._editorViewport_oercc_80 ._editorContainer_oercc_86 ._editor_oercc_65 ol{margin:0;padding-inline-start:var(--bp-space-060)}._messageEditor_oercc_29 ._editorViewport_oercc_80 ._editorContainer_oercc_86 ._editor_oercc_65 ul,._messageEditor_oercc_29 ._editorViewport_oercc_80 ._editorContainer_oercc_86 ._editor_oercc_65 ul>li{list-style-type:disc}._messageEditor_oercc_29 ._editorViewport_oercc_80 ._editorContainer_oercc_86 ._editor_oercc_65 ol,._messageEditor_oercc_29 ._editorViewport_oercc_80 ._editorContainer_oercc_86 ._editor_oercc_65 ol>li{list-style-type:decimal}._messageEditor_oercc_29 ._editorViewport_oercc_80 ._editorContainer_oercc_86 ._editor_oercc_65 ul ul,._messageEditor_oercc_29 ._editorViewport_oercc_80 ._editorContainer_oercc_86 ._editor_oercc_65 ul ol,._messageEditor_oercc_29 ._editorViewport_oercc_80 ._editorContainer_oercc_86 ._editor_oercc_65 ol ul,._messageEditor_oercc_29 ._editorViewport_oercc_80 ._editorContainer_oercc_86 ._editor_oercc_65 ol ol{margin-block-start:var(--bp-space-005)}._messageEditor_oercc_29 ._editorViewport_oercc_80 ._editorContainer_oercc_86 ._editor_oercc_65 li p{margin:0}._messageEditor_oercc_29 ._editorViewport_oercc_80 ._editorContainer_oercc_86 ._editor_oercc_65 [data-placeholder]:first-child:before{font-weight:var(--bp-font-weight-regular);font-size:var(--bp-font-size-05);font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;font-style:normal;line-height:var(--bp-font-line-height-04);letter-spacing:var(--bp-font-letter-spacing-01)}:where(body.is-inter-font) ._messageEditor_oercc_29 ._editorViewport_oercc_80 ._editorContainer_oercc_86 ._editor_oercc_65 [data-placeholder]:first-child:before{letter-spacing:.00625rem;text-transform:none;font-family:Inter Variable,-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;font-size:.875rem;font-style:normal;font-weight:450;line-height:1.375rem;text-decoration:none}._messageEditor_oercc_29 ._editorViewport_oercc_80 ._editorContainer_oercc_86 ._editor_oercc_65 [data-placeholder]:first-child:before{color:var(--text-text-on-light-tertiary);content:attr(data-placeholder);float:left;pointer-events:none;height:0}._messageEditor_oercc_29 ._editorViewport_oercc_80 ._editorFade_oercc_176{height:var(--bp-size-060);background:linear-gradient(to bottom, transparent, var(--bp-canvas-background,var(--surface-surface)));pointer-events:none;opacity:1;transition:opacity .15s ease-out;position:absolute;bottom:0;left:0;right:0}._messageEditor_oercc_29 ._editorViewport_oercc_80 ._editorFade_oercc_176._editorFadeHidden_oercc_187{opacity:0}._messageEditor_oercc_29 ._editorFullWidth_oercc_190{width:100%;min-width:100%}._messageEditor_oercc_29 ._actionsWrapper_oercc_194{min-height:var(--bp-size-080);width:fit-content;padding-right:var(--bp-space-020);flex:1;justify-content:flex-end;align-items:center;display:flex;position:relative}._messageEditor_oercc_29 ._actionsWrapper_oercc_194 ._actionsWrapperInner_oercc_204{align-items:center;gap:var(--bp-space-020);width:fit-content;display:flex;position:relative}._messageEditor_oercc_29 ._timestampToggle_oercc_211{margin-right:auto}._messageEditor_oercc_29 ._errorMessage_oercc_214{gap:var(--bp-space-010);align-items:center;min-width:0;display:flex}._messageEditor_oercc_29 ._errorMessage_oercc_214>:first-child{flex-shrink:0}._messageEditor_oercc_29 ._errorMessage_oercc_214 ._errorText_oercc_223{color:var(--bp-text-text-destructive-on-light);-webkit-line-clamp:1;-webkit-box-orient:vertical;min-width:0;display:-webkit-box;overflow:hidden}._editorHasScroll_oercc_232{gap:unset;padding-bottom:0}._editorHasScroll_oercc_232 ._editorViewport_oercc_80 ._editorContainer_oercc_86{padding-bottom:var(--bp-space-040);scroll-padding-bottom:var(--bp-space-040)}._editorHasScroll_oercc_232 ._editorViewport_oercc_80 ._editorFade_oercc_176{display:none}._editorHasScroll_oercc_232._editorCharacterLimitExceeded_oercc_243 ._editorViewport_oercc_80 ._editorContainer_oercc_86{padding-bottom:calc(var(--gradient-fade-height,var(--bp-size-040)) + var(--bp-space-040));scroll-padding-bottom:calc(var(--gradient-fade-height,var(--bp-size-040)) + var(--bp-space-040))}._editorHasScroll_oercc_232 ._actionsWrapper_oercc_194{min-width:100%;height:1.875rem;padding-right:0}._editorHasScroll_oercc_232 ._actionsWrapper_oercc_194 ._actionsWrapperInner_oercc_204{bottom:.625rem;left:0;right:var(--bp-space-020);pointer-events:none;background:linear-gradient(to bottom, #fff0 10%, #ffffffbf 18%, #fffffff7 28%, var(--bp-canvas-background,var(--surface-surface)) 71%);justify-content:flex-end;width:auto;position:absolute}._editorHasScroll_oercc_232 ._actionsWrapper_oercc_194 ._actionsWrapperInner_oercc_204>*{pointer-events:auto}._editorHasScroll_oercc_232 ._actionsWrapper_oercc_194 ._actionsWrapperInner_oercc_204._characterLimitExceeded_oercc_265{padding-top:var(--gradient-fade-height,var(--bp-size-040))}._editorHasScroll_oercc_232 ._actionsWrapper_oercc_194 ._actionsWrapperInner_oercc_204._scrolledToBottom_oercc_268{background:0 0}._anchorElement_oercc_272{pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}._messageEditor_oercc_29 ._actionsWrapper_oercc_194._withTimestampToggle_oercc_281,._messageEditor_oercc_29 ._actionsWrapper_oercc_194._withTimestampToggle_oercc_281 ._actionsWrapperInner_oercc_204{width:100%}
+._messageEditorWrapper_qphqj_29{cursor:auto;width:100%}._editActionsColumn_qphqj_34{align-items:flex-end;gap:var(--bp-space-010);flex-direction:column;display:flex}._editActionsRow_qphqj_41{align-items:center;gap:var(--bp-space-020);display:flex}._characterLimitCounter_qphqj_47{white-space:nowrap}._messageEditor_qphqj_29{--gradient-fade-height:var(--bp-size-040);box-sizing:border-box;padding:.625rem var(--bp-space-005) .625rem var(--bp-space-040);background-color:var(--surface-surface);outline:var(--bp-border-01) solid var(--border-divider-border);border-radius:var(--bp-radius-10);gap:var(--bp-space-020) var(--bp-space-010);cursor:auto;flex-wrap:wrap;width:100%;display:flex;position:relative}._messageEditor_qphqj_29._editorEditMode_qphqj_65{--gradient-fade-height:var(--bp-size-050)}._messageEditor_qphqj_29:focus-within{outline-width:var(--bp-border-02);outline-color:var(--border-input-border-focus)}._messageEditor_qphqj_29._editorFirstAnnotation_qphqj_72:not(._editorError_qphqj_72):focus-within{outline-width:var(--bp-border-01);outline-color:var(--border-divider-border)}._messageEditor_qphqj_29._editorError_qphqj_72{outline-color:var(--bp-border-message-border-error);outline-width:var(--bp-border-02)}._messageEditor_qphqj_29 ._editorViewport_qphqj_80{width:fit-content;min-width:calc(100% - 2.875rem);margin:auto 0;position:relative}._messageEditor_qphqj_29 ._editorViewport_qphqj_80 ._editorContainer_qphqj_86{box-sizing:border-box;scrollbar-width:thin;scrollbar-color:var(--black-opacity-50) transparent;position:relative;overflow-y:scroll}@supports not (scrollbar-color:gray transparent){._messageEditor_qphqj_29 ._editorViewport_qphqj_80 ._editorContainer_qphqj_86{scrollbar-width:initial}._messageEditor_qphqj_29 ._editorViewport_qphqj_80 ._editorContainer_qphqj_86::-webkit-scrollbar{width:var(--size-2);background-color:#0000}._messageEditor_qphqj_29 ._editorViewport_qphqj_80 ._editorContainer_qphqj_86::-webkit-scrollbar-thumb{background:var(--black-opacity-50);border-radius:var(--radius-2)}._messageEditor_qphqj_29 ._editorViewport_qphqj_80 ._editorContainer_qphqj_86::-webkit-scrollbar-thumb:hover{background:var(--black-opacity-50)}}._messageEditor_qphqj_29 ._editorViewport_qphqj_80 ._editorContainer_qphqj_86{max-height:10rem;padding:.375rem .625rem .375rem 0}._messageEditor_qphqj_29 ._editorViewport_qphqj_80 ._editorContainer_qphqj_86 ._editor_qphqj_65{outline:none;width:100%}._messageEditor_qphqj_29 ._editorViewport_qphqj_80 ._editorContainer_qphqj_86 ._editor_qphqj_65 strong{font-weight:var(--bp-font-weight-bold);font-style:inherit}._messageEditor_qphqj_29 ._editorViewport_qphqj_80 ._editorContainer_qphqj_86 ._editor_qphqj_65 em{font-style:italic;font-weight:inherit}._messageEditor_qphqj_29 ._editorViewport_qphqj_80 ._editorContainer_qphqj_86 ._editor_qphqj_65 ul,._messageEditor_qphqj_29 ._editorViewport_qphqj_80 ._editorContainer_qphqj_86 ._editor_qphqj_65 ol{margin:0;padding-inline-start:var(--bp-space-060)}._messageEditor_qphqj_29 ._editorViewport_qphqj_80 ._editorContainer_qphqj_86 ._editor_qphqj_65 ul,._messageEditor_qphqj_29 ._editorViewport_qphqj_80 ._editorContainer_qphqj_86 ._editor_qphqj_65 ul>li{list-style-type:disc}._messageEditor_qphqj_29 ._editorViewport_qphqj_80 ._editorContainer_qphqj_86 ._editor_qphqj_65 ol,._messageEditor_qphqj_29 ._editorViewport_qphqj_80 ._editorContainer_qphqj_86 ._editor_qphqj_65 ol>li{list-style-type:decimal}._messageEditor_qphqj_29 ._editorViewport_qphqj_80 ._editorContainer_qphqj_86 ._editor_qphqj_65 ul ul,._messageEditor_qphqj_29 ._editorViewport_qphqj_80 ._editorContainer_qphqj_86 ._editor_qphqj_65 ul ol,._messageEditor_qphqj_29 ._editorViewport_qphqj_80 ._editorContainer_qphqj_86 ._editor_qphqj_65 ol ul,._messageEditor_qphqj_29 ._editorViewport_qphqj_80 ._editorContainer_qphqj_86 ._editor_qphqj_65 ol ol{margin-block-start:var(--bp-space-005)}._messageEditor_qphqj_29 ._editorViewport_qphqj_80 ._editorContainer_qphqj_86 ._editor_qphqj_65 li p{margin:0}._messageEditor_qphqj_29 ._editorViewport_qphqj_80 ._editorContainer_qphqj_86 ._editor_qphqj_65 [data-placeholder]:first-child:before{font-weight:var(--bp-font-weight-regular);font-size:var(--bp-font-size-05);font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;font-style:normal;line-height:var(--bp-font-line-height-04);letter-spacing:var(--bp-font-letter-spacing-01)}:where(body.is-inter-font) ._messageEditor_qphqj_29 ._editorViewport_qphqj_80 ._editorContainer_qphqj_86 ._editor_qphqj_65 [data-placeholder]:first-child:before{letter-spacing:.00625rem;text-transform:none;font-family:Inter Variable,-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;font-size:.875rem;font-style:normal;font-weight:450;line-height:1.375rem;text-decoration:none}._messageEditor_qphqj_29 ._editorViewport_qphqj_80 ._editorContainer_qphqj_86 ._editor_qphqj_65 [data-placeholder]:first-child:before{color:var(--text-text-on-light-tertiary);content:attr(data-placeholder);float:left;pointer-events:none;height:0}._messageEditor_qphqj_29 ._editorViewport_qphqj_80 ._editorFade_qphqj_176{height:var(--bp-size-060);background:linear-gradient(to bottom, transparent, var(--bp-canvas-background,var(--surface-surface)));pointer-events:none;opacity:1;transition:opacity .15s ease-out;position:absolute;bottom:0;left:0;right:0}._messageEditor_qphqj_29 ._editorViewport_qphqj_80 ._editorFade_qphqj_176._editorFadeHidden_qphqj_187{opacity:0}._messageEditor_qphqj_29 ._editorFullWidth_qphqj_190{width:100%;min-width:100%}._messageEditor_qphqj_29 ._actionsWrapper_qphqj_194{min-height:var(--bp-size-080);width:fit-content;padding-right:var(--bp-space-020);flex:1;justify-content:flex-end;align-items:center;display:flex;position:relative}._messageEditor_qphqj_29 ._actionsWrapper_qphqj_194 ._actionsWrapperInner_qphqj_204{align-items:center;gap:var(--bp-space-020);width:fit-content;display:flex;position:relative}._messageEditor_qphqj_29 ._timestampToggle_qphqj_211{margin-right:auto}._messageEditor_qphqj_29 ._errorMessage_qphqj_214{gap:var(--bp-space-010);align-items:center;min-width:0;display:flex}._messageEditor_qphqj_29 ._errorMessage_qphqj_214>:first-child{flex-shrink:0}._messageEditor_qphqj_29 ._errorMessage_qphqj_214 ._errorText_qphqj_223{color:var(--bp-text-text-destructive-on-light);-webkit-line-clamp:1;-webkit-box-orient:vertical;min-width:0;display:-webkit-box;overflow:hidden}._editorHasScroll_qphqj_232{gap:unset;padding-bottom:0}._editorHasScroll_qphqj_232 ._editorViewport_qphqj_80 ._editorContainer_qphqj_86{padding-bottom:var(--bp-space-040);scroll-padding-bottom:var(--bp-space-040)}._editorHasScroll_qphqj_232 ._editorViewport_qphqj_80 ._editorFade_qphqj_176{display:none}._editorHasScroll_qphqj_232._editorCharacterLimitExceeded_qphqj_243 ._editorViewport_qphqj_80 ._editorContainer_qphqj_86{padding-bottom:calc(var(--gradient-fade-height,var(--bp-size-040)) + var(--bp-space-040));scroll-padding-bottom:calc(var(--gradient-fade-height,var(--bp-size-040)) + var(--bp-space-040))}._editorHasScroll_qphqj_232 ._actionsWrapper_qphqj_194{min-width:100%;height:1.875rem;padding-right:0}._editorHasScroll_qphqj_232 ._actionsWrapper_qphqj_194 ._actionsWrapperInner_qphqj_204{bottom:.625rem;left:0;right:var(--bp-space-020);pointer-events:none;background:linear-gradient(to bottom, #fff0 10%, #ffffffbf 18%, #fffffff7 28%, var(--bp-canvas-background,var(--surface-surface)) 71%);justify-content:flex-end;width:auto;position:absolute}._editorHasScroll_qphqj_232 ._actionsWrapper_qphqj_194 ._actionsWrapperInner_qphqj_204>*{pointer-events:auto}._editorHasScroll_qphqj_232 ._actionsWrapper_qphqj_194 ._actionsWrapperInner_qphqj_204._characterLimitExceeded_qphqj_265{padding-top:var(--gradient-fade-height,var(--bp-size-040))}._editorHasScroll_qphqj_232 ._actionsWrapper_qphqj_194 ._actionsWrapperInner_qphqj_204._scrolledToBottom_qphqj_268{background:0 0}._anchorElement_qphqj_272{pointer-events:none;position:absolute}._mentionListPopoverHidden_qphqj_277{opacity:0;pointer-events:none;visibility:hidden;animation:none}._messageEditor_qphqj_29 ._actionsWrapper_qphqj_194._withTimestampToggle_qphqj_284,._messageEditor_qphqj_29 ._actionsWrapper_qphqj_194._withTimestampToggle_qphqj_284 ._actionsWrapperInner_qphqj_204{width:100%}

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/editor-extensions/custom-mention/getMentionAnchorStyle.d.ts

@@ -0,0 +1,15 @@
+import { CSSProperties } from 'react';
+export declare const MIN_MENTION_ANCHOR_SIZE_PX = 1;
+export type MentionClientRect = (() => DOMRect | null) | null;
+/**
+ * True while the `@` decoration is fully inside the editor's visible box and
+ * the window. Hide as soon as it starts to clip so Radix cannot collision-flip
+ * the list into the viewport.
+ */
+export declare const isMentionRectInView: (rect: DOMRect, container: HTMLElement) => boolean;
+/**
+ * Converts a viewport `DOMRect` (TipTap suggestion `clientRect`) into
+ * `position: absolute` offsets inside a scrollable editor container so the
+ * mention popover stays on the `@` trigger while that trigger is on screen.
+ */
+export declare const getMentionAnchorStyle: (rect: DOMRect, container: HTMLElement) => CSSProperties;

package/dist/types/lib/components/v2/message-editor/editor-extensions/custom-mention/useMentionState.d.ts

@@ -11,6 +11,7 @@ export declare const useMentionState: (userSelectorRef: MutableRefObject<Headles
     isActive: boolean;
     query: string;
     command: (props: EditorMentionAttributes) => void;
+    clientRect: () => DOMRect | null;
     suggestionCallbacks: SuggestionCallbacks;
     close: () => void;
 };

package/dist/types/lib/components/v2/message-editor/hooks/useMentionAnchorStyle.d.ts

@@ -0,0 +1,13 @@
+import { CSSProperties, RefObject } from 'react';
+import { MentionClientRect } from '../editor-extensions/custom-mention/getMentionAnchorStyle';
+export type MentionAnchorStyleState = {
+    isInView: boolean;
+    style: CSSProperties | undefined;
+};
+/**
+ * Keeps the mention popover anchor on the live `@` decoration while that
+ * decoration is fully visible. Hides the list (without closing the popover)
+ * once the `@` starts to clip, so the close animation cannot flash it
+ * elsewhere on screen.
+ */
+export declare const useMentionAnchorStyle: (getClientRect: MentionClientRect, isActive: boolean, containerRef: RefObject<HTMLElement | null>) => MentionAnchorStyleState;

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

@@ -1,11 +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">;
-/** Document exercising every rich text format: the three marks plus both list types. */
-export declare const RICH_TEXT_INITIAL_CONTENT: JSONContent;
+/** Long enough to scroll inside the 10rem editor. */
+export declare const LONG_MULTI_PARAGRAPH_COMMENT: 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.27",
+    "version": "4.11.29",
     "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"