@box/threaded-annotations 4.2.2 → 4.3.1

package/dist/esm/lib/components/v2/text-message/subcomponents/message-renderer.js

@@ -1 +1 @@
-import{t as MentionComponent}from"../../../../../../chunks/mention-component.js";import messages from"../messages.js";import{t as text_message_module_default}from"../../../../../../chunks/text-message.module.js";import"../constants.js";import{splitTextIntoSegments}from"./url-segments.js";import{getDocumentLength,truncateDocument}from"./truncate-document.js";import{Link,Text,TextButton}from"@box/blueprint-web";import{useState}from"react";import{useIntl}from"react-intl";import{jsx,jsxs}from"react/jsx-runtime";var renderMentionNode=({node,index,paragraphIndex})=>{let key=`mention-${node.attrs.mentionedUserId}-${paragraphIndex}-${index}`;return jsx(MentionComponent,{authorId:node.attrs.authorId,mentionedUserEmail:node.attrs.mentionedUserEmail,mentionedUserId:node.attrs.mentionedUserId,mentionedUserName:node.attrs.mentionedUserName,mentionId:node.attrs.mentionId},key)},handleMessageLinkClick=event=>{event.currentTarget.closest(`[data-thread-expandable]`)&&event.preventDefault()},renderTextNode=({node,index,paragraphIndex,intl})=>{let key=`text-${node.text.substring(0,20)}-${paragraphIndex}-${index}`,segments=splitTextIntoSegments(node.text);return jsx(Text,{"aria-label":intl.formatMessage(messages.textMessageAriaLabel),as:`span`,color:`textOnLightDefault`,variant:`bodyDefault`,children:segments.map((segment,segmentIndex)=>segment.type===`url`?jsx(Link,{href:segment.value,inheritFont:!0,rel:`noopener noreferrer`,target:`_blank`,onClick:handleMessageLinkClick,children:segment.value},`${key}-segment-${segmentIndex}`):segment.value)},key)},renderParagraphContent=({content,paragraphIndex,intl})=>content.map((node,index)=>{switch(node.type){case`mention`:return renderMentionNode({node,index,paragraphIndex});case`text`:return renderTextNode({node,index,paragraphIndex,intl});default:return[]}}),renderParagraphNode=({paragraph,index,intl,inlineSuffix})=>{let content=paragraph.content||[],key=`paragraph-${index}`;return jsxs(Text,{as:`p`,variant:`bodyDefault`,children:[content.length>0?renderParagraphContent({content,paragraphIndex:index,intl}):jsx(`br`,{}),inlineSuffix]},key)},MessageRenderer=({messageObject})=>{let intl=useIntl(),[isExpanded,setIsExpanded]=useState(!1);if(!messageObject.content||messageObject.content.length===0)return null;let totalLength=getDocumentLength(messageObject),isTruncated=!isExpanded&&totalLength>450,documentToRender=isTruncated?truncateDocument(messageObject,450):messageObject,suffixAnchorIndex=documentToRender.content.length-1;for(let i=documentToRender.content.length-1;i>=0;--i)if((documentToRender.content[i].content?.length??0)>0){suffixAnchorIndex=i;break}let seeMoreButton=isTruncated?jsx(TextButton,{className:text_message_module_default.seeMoreButton,color:`textOnLightLink`,"data-no-expand":!0,onClick:()=>setIsExpanded(!0),variant:`bodyDefaultBold`,children:intl.formatMessage(messages.seeMore)}):null;return documentToRender.content.map((paragraph,index)=>renderParagraphNode({paragraph,index,intl,inlineSuffix:index===suffixAnchorIndex?seeMoreButton:null}))};export{MessageRenderer};
+import{t as MentionComponent}from"../../../../../../chunks/mention-component.js";import{isParagraphNode}from"../../../../v2/types/document-node-types.js";import messages from"../messages.js";import{t as text_message_module_default}from"../../../../../../chunks/text-message.module.js";import"../constants.js";import{splitTextIntoSegments}from"./url-segments.js";import{getDocumentLength,truncateDocument}from"./truncate-document.js";import{Link,Text,TextButton}from"@box/blueprint-web";import{useState}from"react";import{useIntl}from"react-intl";import{jsx,jsxs}from"react/jsx-runtime";var renderMentionNode=({node,index,paragraphIndex})=>{let key=`mention-${node.attrs.mentionedUserId}-${paragraphIndex}-${index}`;return jsx(MentionComponent,{authorId:node.attrs.authorId,mentionedUserEmail:node.attrs.mentionedUserEmail,mentionedUserId:node.attrs.mentionedUserId,mentionedUserName:node.attrs.mentionedUserName,mentionId:node.attrs.mentionId},key)},handleMessageLinkClick=event=>{event.currentTarget.closest(`[data-thread-expandable]`)&&event.preventDefault()},renderTextNode=({node,index,paragraphIndex,intl})=>{let key=`text-${node.text.substring(0,20)}-${paragraphIndex}-${index}`,segments=splitTextIntoSegments(node.text);return jsx(Text,{"aria-label":intl.formatMessage(messages.textMessageAriaLabel),as:`span`,color:`textOnLightDefault`,variant:`bodyDefault`,children:segments.map((segment,segmentIndex)=>segment.type===`url`?jsx(Link,{href:segment.value,inheritFont:!0,rel:`noopener noreferrer`,target:`_blank`,onClick:handleMessageLinkClick,children:segment.value},`${key}-segment-${segmentIndex}`):segment.value)},key)},renderParagraphContent=({content,paragraphIndex,intl})=>content.map((node,index)=>{switch(node.type){case`mention`:return renderMentionNode({node,index,paragraphIndex});case`text`:return renderTextNode({node,index,paragraphIndex,intl});default:return[]}}),renderParagraphNode=({paragraph,index,intl,inlineSuffix})=>{let content=paragraph.content||[],key=`paragraph-${index}`;return jsxs(Text,{as:`p`,variant:`bodyDefault`,children:[content.length>0?renderParagraphContent({content,paragraphIndex:index,intl}):jsx(`br`,{}),inlineSuffix]},key)},MessageRenderer=({messageObject})=>{let intl=useIntl(),[isExpanded,setIsExpanded]=useState(!1);if(!messageObject.content||messageObject.content.length===0)return null;let totalLength=getDocumentLength(messageObject),isTruncated=!isExpanded&&totalLength>450,paragraphsToRender=(isTruncated?truncateDocument(messageObject,450):messageObject).content.filter(isParagraphNode),suffixAnchorIndex=paragraphsToRender.length-1;for(let i=paragraphsToRender.length-1;i>=0;--i)if((paragraphsToRender[i].content?.length??0)>0){suffixAnchorIndex=i;break}let seeMoreButton=isTruncated?jsx(TextButton,{className:text_message_module_default.seeMoreButton,color:`textOnLightLink`,"data-no-expand":!0,onClick:()=>setIsExpanded(!0),variant:`bodyDefaultBold`,children:intl.formatMessage(messages.seeMore)}):null;return paragraphsToRender.map((paragraph,index)=>renderParagraphNode({paragraph,index,intl,inlineSuffix:index===suffixAnchorIndex?seeMoreButton:null}))};export{MessageRenderer};

package/dist/esm/lib/components/v2/text-message/subcomponents/truncate-document.js

@@ -1 +1 @@
-import{splitTextIntoSegments}from"./url-segments.js";var TRUNCATION_ELLIPSIS=`…`,getMentionDisplayLength=node=>`@${node.attrs.mentionedUserName}`.length,getDocumentLength=document=>{let total=0;for(let paragraph of document.content)for(let node of paragraph.content||[])node.type===`text`?total+=node.text.length:node.type===`mention`&&(total+=getMentionDisplayLength(node));return total},flattenDocument=document=>{let atoms=[];return document.content.forEach((paragraph,paragraphIndex)=>{paragraphIndex>0&&atoms.push({kind:`paragraph-break`,sourceParagraph:paragraph});for(let node of paragraph.content||[])if(node.type===`mention`)atoms.push({kind:`mention`,node});else if(node.type===`text`)for(let segment of splitTextIntoSegments(node.text))atoms.push({kind:segment.type,value:segment.value,sourceNode:node})}),atoms},collectAtomsWithinThreshold=(atoms,threshold)=>{let collected=[],pendingBreaks=[],remaining=threshold,accept=atom=>{collected.push(...pendingBreaks,atom),pendingBreaks.length=0};for(let atom of atoms)if(atom.kind===`paragraph-break`)pendingBreaks.push(atom);else if(remaining<=0)return{collected,truncated:!0};else if(atom.kind===`mention`){let length=getMentionDisplayLength(atom.node);if(length>remaining)return{collected,truncated:!0};accept(atom),remaining-=length}else if(atom.kind===`url`){if(atom.value.length>remaining)return{collected,truncated:!0};accept(atom),remaining-=atom.value.length}else if(atom.value.length<=remaining)accept(atom),remaining-=atom.value.length;else return accept({...atom,value:atom.value.slice(0,remaining)}),{collected,truncated:!0};return{collected,truncated:!1}},reassembleParagraphs=(atoms,firstParagraph)=>{let paragraphs=[],currentNodes=[],currentSource=firstParagraph,lastTextSourceNode=null,flushParagraph=()=>{paragraphs.push({...currentSource,content:currentNodes}),currentNodes=[],lastTextSourceNode=null};for(let atom of atoms)if(atom.kind===`paragraph-break`)flushParagraph(),currentSource=atom.sourceParagraph;else if(atom.kind===`mention`)currentNodes.push(atom.node),lastTextSourceNode=null;else if(lastTextSourceNode===atom.sourceNode){let previousTextNode=currentNodes[currentNodes.length-1];currentNodes[currentNodes.length-1]={...previousTextNode,text:previousTextNode.text+atom.value}}else currentNodes.push({...atom.sourceNode,text:atom.value}),lastTextSourceNode=atom.sourceNode;return flushParagraph(),paragraphs},withTruncationEllipsis=paragraphs=>{let lastNonEmptyIndex=-1;for(let i=paragraphs.length-1;i>=0;--i)if((paragraphs[i].content?.length??0)>0){lastNonEmptyIndex=i;break}if(lastNonEmptyIndex===-1)return[...paragraphs,{type:`paragraph`,content:[{type:`text`,text:TRUNCATION_ELLIPSIS}]}];let targetContent=paragraphs[lastNonEmptyIndex].content||[],lastChild=targetContent[targetContent.length-1],updatedContent;if(lastChild?.type===`text`){if(lastChild.text.endsWith(TRUNCATION_ELLIPSIS))return paragraphs;updatedContent=[...targetContent.slice(0,-1),{...lastChild,text:`${lastChild.text}${TRUNCATION_ELLIPSIS}`}]}else updatedContent=[...targetContent,{type:`text`,text:TRUNCATION_ELLIPSIS}];return paragraphs.map((paragraph,index)=>index===lastNonEmptyIndex?{...paragraph,content:updatedContent}:paragraph)},truncateDocument=(document,threshold)=>{if(document.content.length===0)return document;let{collected,truncated}=collectAtomsWithinThreshold(flattenDocument(document),threshold),paragraphs=reassembleParagraphs(collected,document.content[0]),finalParagraphs=truncated?withTruncationEllipsis(paragraphs):paragraphs;return{...document,content:finalParagraphs}};export{getDocumentLength,truncateDocument};
+import{isParagraphNode}from"../../../../v2/types/document-node-types.js";import{splitTextIntoSegments}from"./url-segments.js";var TRUNCATION_ELLIPSIS=`…`,getMentionDisplayLength=node=>`@${node.attrs.mentionedUserName}`.length,getDocumentLength=document=>{let total=0;for(let paragraph of document.content.filter(isParagraphNode))for(let node of paragraph.content||[])node.type===`text`?total+=node.text.length:node.type===`mention`&&(total+=getMentionDisplayLength(node));return total},flattenDocument=paragraphs=>{let atoms=[];return paragraphs.forEach((paragraph,paragraphIndex)=>{paragraphIndex>0&&atoms.push({kind:`paragraph-break`,sourceParagraph:paragraph});for(let node of paragraph.content||[])if(node.type===`mention`)atoms.push({kind:`mention`,node});else if(node.type===`text`)for(let segment of splitTextIntoSegments(node.text))atoms.push({kind:segment.type,value:segment.value,sourceNode:node})}),atoms},collectAtomsWithinThreshold=(atoms,threshold)=>{let collected=[],pendingBreaks=[],remaining=threshold,accept=atom=>{collected.push(...pendingBreaks,atom),pendingBreaks.length=0};for(let atom of atoms)if(atom.kind===`paragraph-break`)pendingBreaks.push(atom);else if(remaining<=0)return{collected,truncated:!0};else if(atom.kind===`mention`){let length=getMentionDisplayLength(atom.node);if(length>remaining)return{collected,truncated:!0};accept(atom),remaining-=length}else if(atom.kind===`url`){if(atom.value.length>remaining)return{collected,truncated:!0};accept(atom),remaining-=atom.value.length}else if(atom.value.length<=remaining)accept(atom),remaining-=atom.value.length;else return accept({...atom,value:atom.value.slice(0,remaining)}),{collected,truncated:!0};return{collected,truncated:!1}},reassembleParagraphs=(atoms,firstParagraph)=>{let paragraphs=[],currentNodes=[],currentSource=firstParagraph,lastTextSourceNode=null,flushParagraph=()=>{paragraphs.push({...currentSource,content:currentNodes}),currentNodes=[],lastTextSourceNode=null};for(let atom of atoms)if(atom.kind===`paragraph-break`)flushParagraph(),currentSource=atom.sourceParagraph;else if(atom.kind===`mention`)currentNodes.push(atom.node),lastTextSourceNode=null;else if(lastTextSourceNode===atom.sourceNode){let previousTextNode=currentNodes[currentNodes.length-1];currentNodes[currentNodes.length-1]={...previousTextNode,text:previousTextNode.text+atom.value}}else currentNodes.push({...atom.sourceNode,text:atom.value}),lastTextSourceNode=atom.sourceNode;return flushParagraph(),paragraphs},withTruncationEllipsis=paragraphs=>{let lastNonEmptyIndex=-1;for(let i=paragraphs.length-1;i>=0;--i)if((paragraphs[i].content?.length??0)>0){lastNonEmptyIndex=i;break}if(lastNonEmptyIndex===-1)return[...paragraphs,{type:`paragraph`,content:[{type:`text`,text:TRUNCATION_ELLIPSIS}]}];let targetContent=paragraphs[lastNonEmptyIndex].content||[],lastChild=targetContent[targetContent.length-1],updatedContent;if(lastChild?.type===`text`){if(lastChild.text.endsWith(TRUNCATION_ELLIPSIS))return paragraphs;updatedContent=[...targetContent.slice(0,-1),{...lastChild,text:`${lastChild.text}${TRUNCATION_ELLIPSIS}`}]}else updatedContent=[...targetContent,{type:`text`,text:TRUNCATION_ELLIPSIS}];return paragraphs.map((paragraph,index)=>index===lastNonEmptyIndex?{...paragraph,content:updatedContent}:paragraph)},truncateDocument=(document,threshold)=>{let paragraphBlocks=document.content.filter(isParagraphNode);if(paragraphBlocks.length===0)return document;let{collected,truncated}=collectAtomsWithinThreshold(flattenDocument(paragraphBlocks),threshold),paragraphs=reassembleParagraphs(collected,paragraphBlocks[0]),finalParagraphs=truncated?withTruncationEllipsis(paragraphs):paragraphs;return{...document,content:finalParagraphs}};export{getDocumentLength,truncateDocument};

package/dist/esm/lib/v2/types/document-node-types.js

@@ -0,0 +1 @@
+var isParagraphNode=node=>node.type===`paragraph`;export{isParagraphNode};

package/dist/esm/lib/v2/types/index.js

@@ -1 +1 @@
-import{AnnotationBadgeType}from"./annotation-badge-types.js";export{AnnotationBadgeType};
+import{AnnotationBadgeType}from"./annotation-badge-types.js";import{isParagraphNode}from"./document-node-types.js";export{AnnotationBadgeType,isParagraphNode};

package/dist/types/lib/v2/types/document-node-types.d.ts

@@ -25,8 +25,31 @@ export type ParagraphNode = {
     content?: (MentionNode | TextNode)[];
     attrs?: Record<string, unknown>;
 };
+export type ListItemNode = {
+    type: 'listItem';
+    content?: (BulletListNode | OrderedListNode | ParagraphNode)[];
+    attrs?: Record<string, unknown>;
+};
+export type BulletListNode = {
+    type: 'bulletList';
+    content?: ListItemNode[];
+    attrs?: Record<string, unknown>;
+};
+export type OrderedListNode = {
+    type: 'orderedList';
+    content?: ListItemNode[];
+    attrs?: Record<string, unknown>;
+};
 export type DocumentNode = {
     type: 'doc';
-    content: ParagraphNode[];
+    content: (BulletListNode | OrderedListNode | ParagraphNode)[];
     attrs?: Record<string, unknown>;
 };
+/** Formats toggleable from the rich text formatting bar (or their keyboard shortcuts). */
+export type RichTextFormat = 'bold' | 'italic' | 'underline' | 'bulletList' | 'orderedList';
+/**
+ * Narrows a top-level document block to a paragraph. Consumers that only
+ * support paragraph blocks (renderer, truncation — dedicated list support
+ * lands separately) use this to skip list blocks.
+ */
+export declare const isParagraphNode: (node: DocumentNode["content"][number]) => node is ParagraphNode;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/threaded-annotations",
-    "version": "4.2.2",
+    "version": "4.3.1",
     "license": "SEE LICENSE IN LICENSE",
     "dependencies": {
         "@floating-ui/dom": "^1.6.0",
@@ -17,23 +17,23 @@
         "uuid": "^9.0.1"
     },
     "peerDependencies": {
-        "@box/blueprint-web": "^16.14.2",
-        "@box/blueprint-web-assets": "^5.6.2",
-        "@box/collaboration-popover": "^2.2.2",
-        "@box/readable-time": "^2.2.2",
-        "@box/user-selector": "^2.2.2",
+        "@box/blueprint-web": "^16.15.0",
+        "@box/blueprint-web-assets": "^5.6.3",
+        "@box/collaboration-popover": "^2.2.3",
+        "@box/readable-time": "^2.2.3",
+        "@box/user-selector": "^2.2.3",
         "clsx": "^1.2.1",
         "react": "^18.0.0",
         "react-dom": "^18.0.0",
         "react-intl": "^6.4.2"
     },
     "devDependencies": {
-        "@box/blueprint-web": "^16.14.2",
-        "@box/blueprint-web-assets": "^5.6.2",
+        "@box/blueprint-web": "^16.15.0",
+        "@box/blueprint-web-assets": "^5.6.3",
         "@box/eslint-plugin-blueprint": "2.2.0",
-        "@box/readable-time": "^2.2.2",
-        "@box/storybook-utils": "^1.2.2",
-        "@box/user-selector": "^2.2.2",
+        "@box/readable-time": "^2.2.3",
+        "@box/storybook-utils": "^1.2.3",
+        "@box/user-selector": "^2.2.3",
         "react": "^18.0.0",
         "react-dom": "^18.0.0"
     },