box-annotations 5.2.1-beta.1 → 5.2.1-beta.11

package/dist/annotations.js.LICENSE.txt

@@ -12,9 +12,9 @@ object-assign
 
 /*!
  * Box Annotations
- * 
+ *
  * Copyright 2016-present Box, Inc. All Rights Reserved.
- * 
+ *
  * This source code is licensed under the Box Software License Agreement found
  * in the LICENSE file in the root directory of this source tree. Additional
  * third party license disclosures can be found in the THIRD_PARTY_LICENSES
@@ -30,46 +30,6 @@ object-assign
  * Licensed under MIT License
  */
 
-/**
- * @license React
- * react-dom.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * @license React
- * react.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * @license React
- * scheduler.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * @license React
- * use-sync-external-store-with-selector.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
 /** @license React v0.18.0
  * scheduler.production.min.js
  *
@@ -79,7 +39,7 @@ object-assign
  * LICENSE file in the root directory of this source tree.
  */
 
-/** @license React v16.12.0
+/** @license React v16.13.1
  * react-is.production.min.js
  *
  * Copyright (c) Facebook, Inc. and its affiliates.

package/i18n/en-US.js

@@ -4,8 +4,12 @@ export default {
   "ba.annotationsLoadError": "We’re sorry, the annotations failed to load for this file.",
   "ba.annotationsPost": "Post",
   "ba.annotationsSave": "Save",
+  "ba.boundingBoxHighlight.viewNextReference": "View next reference",
+  "ba.boundingBoxHighlight.viewPrevReference": "View previous reference",
   "ba.popup.reply.comment": "Comment",
   "ba.popup.reply.field": "Type a comment",
+  "ba.popup.reply.mentionLoading": "Loading users...",
+  "ba.popup.reply.mentionSelector": "Mention a collaborator",
   "ba.popups.cancel": "Cancel",
   "ba.popups.drawing.addComment": "Add Comment",
   "ba.popups.drawing.delete": "Delete",

package/i18n/en-US.properties

@@ -8,10 +8,18 @@ ba.annotationsLoadError = We’re sorry, the annotations failed to load for this
 ba.annotationsPost = Post
 # Label for the save button
 ba.annotationsSave = Save
+# Aria label for the button to view the next reference
+ba.boundingBoxHighlight.viewNextReference = View next reference
+# Aria label for the button to view the previous reference
+ba.boundingBoxHighlight.viewPrevReference = View previous reference
 # Aria label description for reply popup
 ba.popup.reply.comment = Comment
 # Aria label description for annotation comment field
 ba.popup.reply.field = Type a comment
+# Aria label for mention selector loading state
+ba.popup.reply.mentionLoading = Loading users...
+# Aria role description for mention user selector
+ba.popup.reply.mentionSelector = Mention a collaborator
 # Button label for cancelling the creation of a description, comment, or reply
 ba.popups.cancel = Cancel
 # Button label for adding a comment in the drawing toolbar

package/i18n/json/src/components/BoundingBoxHighlight/messages.json

@@ -0,0 +1 @@
+[{"id":"ba.boundingBoxHighlight.viewNextReference","description":"Aria label for the button to view the next reference","defaultMessage":"View next reference"},{"id":"ba.boundingBoxHighlight.viewPrevReference","description":"Aria label for the button to view the previous reference","defaultMessage":"View previous reference"}]

package/i18n/json/src/components/Popups/messages.json

@@ -1 +1 @@
-[{"id":"ba.popup.reply.comment","description":"Aria label description for reply popup","defaultMessage":"Comment"},{"id":"ba.popup.reply.field","description":"Aria label description for annotation comment field","defaultMessage":"Type a comment"},{"id":"ba.popups.cancel","description":"Button label for cancelling the creation of a description, comment, or reply","defaultMessage":"Cancel"},{"id":"ba.popups.post","description":"Button label for creating a description, comment, or reply","defaultMessage":"Post"},{"id":"ba.popups.drawing.addComment","description":"Button label for adding a comment in the drawing toolbar","defaultMessage":"Add Comment"},{"id":"ba.popups.drawing.delete","description":"Button title for deleting a staged drawing","defaultMessage":"Delete"},{"id":"ba.popups.drawing.redo","description":"Button title for redoing a staged drawing","defaultMessage":"Redo"},{"id":"ba.popups.drawing.undo","description":"Button title for undoing a staged drawing","defaultMessage":"Undo"},{"id":"ba.popups.replyField.placeholder","description":"Placeholder for reply field editor","defaultMessage":"Type a comment..."},{"id":"ba.popups.popupHighlight.promoter","description":"Popup message for highlight promoter","defaultMessage":"Highlight and Comment"},{"id":"ba.popups.popupHighlight.restrictedPrompt","description":"Prompt message when selection crosses multiple pages","defaultMessage":"Comments restricted to single page"},{"id":"ba.popups.popupList.prompt","description":"Prompt message for empty popup list","defaultMessage":"Mention someone to notify them"},{"id":"ba.popups.popupCursor.regionPrompt","description":"Prompt message following cursor in region annotations mode","defaultMessage":"Draw a box to comment"}]
+[{"id":"ba.popup.reply.comment","description":"Aria label description for reply popup","defaultMessage":"Comment"},{"id":"ba.popup.reply.mentionLoading","description":"Aria label for mention selector loading state","defaultMessage":"Loading users..."},{"id":"ba.popup.reply.mentionSelector","description":"Aria role description for mention user selector","defaultMessage":"Mention a collaborator"},{"id":"ba.popup.reply.field","description":"Aria label description for annotation comment field","defaultMessage":"Type a comment"},{"id":"ba.popups.cancel","description":"Button label for cancelling the creation of a description, comment, or reply","defaultMessage":"Cancel"},{"id":"ba.popups.post","description":"Button label for creating a description, comment, or reply","defaultMessage":"Post"},{"id":"ba.popups.drawing.addComment","description":"Button label for adding a comment in the drawing toolbar","defaultMessage":"Add Comment"},{"id":"ba.popups.drawing.delete","description":"Button title for deleting a staged drawing","defaultMessage":"Delete"},{"id":"ba.popups.drawing.redo","description":"Button title for redoing a staged drawing","defaultMessage":"Redo"},{"id":"ba.popups.drawing.undo","description":"Button title for undoing a staged drawing","defaultMessage":"Undo"},{"id":"ba.popups.replyField.placeholder","description":"Placeholder for reply field editor","defaultMessage":"Type a comment..."},{"id":"ba.popups.popupHighlight.promoter","description":"Popup message for highlight promoter","defaultMessage":"Highlight and Comment"},{"id":"ba.popups.popupHighlight.restrictedPrompt","description":"Prompt message when selection crosses multiple pages","defaultMessage":"Comments restricted to single page"},{"id":"ba.popups.popupList.prompt","description":"Prompt message for empty popup list","defaultMessage":"Mention someone to notify them"},{"id":"ba.popups.popupCursor.regionPrompt","description":"Prompt message following cursor in region annotations mode","defaultMessage":"Draw a box to comment"}]

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "box-annotations",
-    "version": "5.2.1-beta.1",
+    "version": "5.2.1-beta.11",
     "description": "Box Annotations",
     "author": "Box (https://www.box.com/)",
     "license": "SEE LICENSE IN LICENSE",
@@ -28,7 +28,13 @@
         "@babel/preset-react": "^7.25.9",
         "@babel/preset-typescript": "^7.25.9",
         "@box/frontend": "^10.0.0",
+        "@box/blueprint-web": "^14.27.0",
+        "@box/blueprint-web-assets": "^4.116.6",
+        "@box/collaboration-popover": "^1.61.30",
         "@box/languages": "^1.1.0",
+        "@box/readable-time": "^1.40.30",
+        "@box/threaded-annotations": "^1.86.0",
+        "@box/user-selector": "^1.75.30",
         "@cfaester/enzyme-adapter-react-18": "^0.8.0",
         "@commitlint/cli": "^8.3.5",
         "@commitlint/config-conventional": "^8.2.0",
@@ -50,11 +56,11 @@
         "@types/uuid": "^8.3.0",
         "@typescript-eslint/eslint-plugin": "^7.3.1",
         "@typescript-eslint/parser": "^7.3.1",
-        "autoprefixer": "^9.7.6",
+        "autoprefixer": "^10.4.19",
         "axios": "^0.24.0",
         "babel-eslint": "^10.1.0",
         "babel-jest": "^24.9.0",
-        "babel-loader": "^8.3.0",
+        "babel-loader": "^9.2.1",
         "babel-plugin-istanbul": "^6.0.0",
         "babel-plugin-react-intl": "^7.5.1",
         "babel-plugin-transform-require-ignore": "^0.1.1",
@@ -62,9 +68,11 @@
         "box-ui-elements": "^20.0.0",
         "circular-dependency-plugin": "^5.2.0",
         "classnames": "^2.2.5",
+        "clsx": "^2.1.1",
         "conventional-github-releaser": "^3.1.3",
         "core-js": "^3.38.1",
-        "css-loader": "^3.5.2",
+        "css-loader": "^7.1.2",
+        "css-minimizer-webpack-plugin": "^7.0.4",
         "cypress": "^4.4.1",
         "draft-js": "0.10.5",
         "enzyme": "^3.11.0",
@@ -90,12 +98,10 @@
         "jest-environment-jsdom-sixteen": "^1.0.3",
         "lint-staged": "^9.5.0",
         "lodash": "^4.17.15",
-        "mini-css-extract-plugin": "^0.9.0",
+        "mini-css-extract-plugin": "^2.10.1",
         "npm-run-all": "^4.1.5",
-        "optimize-css-assets-webpack-plugin": "^5.0.3",
-        "postcss-loader": "^3.0.0",
+        "postcss-loader": "^8.1.1",
         "prettier": "^1.19.1",
-        "raw-loader": "^4.0.1",
         "react": "18.3.1",
         "react-dom": "18.3.1",
         "react-intl": "6.4.2",
@@ -105,27 +111,34 @@
         "redux": "^4.0.5",
         "regenerator-runtime": "^0.13.9",
         "sass": "^1.64.1",
-        "sass-loader": "^8.0.2",
+        "sass-loader": "^16.0.4",
         "scroll-into-view-if-needed": "^2.2.24",
-        "style-loader": "^1.1.4",
+        "style-loader": "^4.0.0",
         "stylelint": "^12.0.0",
         "stylelint-config-rational-order": "^0.1.2",
         "stylelint-config-standard": "^19.0.0",
         "stylelint-order": "^3.1.1",
         "tabbable": "^1.1.3",
-        "terser-webpack-plugin": "^4.2.3",
         "typescript": "4.9.5",
         "uuid": "^8.3.1",
         "wait-on": "^4.0.2",
-        "webpack": "^4.47.0",
-        "webpack-cli": "^3.3.11",
-        "webpack-dev-server": "^3.10.3",
+        "webpack": "^5.105.4",
+        "webpack-cli": "^5.1.4",
+        "webpack-dev-server": "^5.2.3",
         "worker-farm": "^1.7.0"
     },
+    "peerDependencies": {
+        "@box/blueprint-web": "^14.27.0",
+        "@box/blueprint-web-assets": "^4.116.6",
+        "@box/collaboration-popover": "^1.61.30",
+        "@box/readable-time": "^1.40.30",
+        "@box/threaded-annotations": "^1.86.0",
+        "@box/user-selector": "^1.75.30"
+    },
     "scripts": {
         "build": "yarn setup && yarn build:prod:dist",
         "build:i18n": "props2es",
-        "build:dev:dist": "LANGUAGE=en-US BABEL_ENV=dev NODE_ENV=dev webpack --config scripts/webpack.config.js --mode development --progress --colors",
+        "build:dev:dist": "LANGUAGE=en-US BABEL_ENV=dev NODE_ENV=dev webpack --config scripts/webpack.config.js --mode development --progress",
         "build:prod:dist": "LANGUAGE=en-US BABEL_ENV=production NODE_ENV=production webpack --config scripts/webpack.config.js --mode production",
         "clean": "rm -rf dist reports/* i18n/json i18n/*.js",
         "cy:open": "yarn cy:wait; yarn cypress open",

package/src/@types/events.ts

@@ -9,7 +9,11 @@ enum Event {
     ANNOTATIONS_INITIALIZED = 'annotations_initialized',
     ANNOTATIONS_MODE_CHANGE = 'annotations_mode_change',
     COLOR_SET = 'annotations_color_set',
+    BOUNDING_BOX_HIGHLIGHTS_SET = 'bounding_box_highlights_set',
+    BOUNDING_BOX_HIGHLIGHT_NAVIGATE = 'bounding_box_highlight_navigate',
+    BOUNDING_BOX_HIGHLIGHT_SELECT = 'bounding_box_highlight_select',
     VISIBLE_SET = 'annotations_visible_set',
+    VIEW_MODE_SET = 'view_mode_set',
 }
 
 // Existing legacy events, don't rename

package/src/@types/global.ts

@@ -1,12 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-namespace */
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-declare namespace NodeJS {
-    interface Global {
-        window: any;
-        BoxAnnotations: any;
-    }
-}
-
 declare module 'box-annotations-locale-data';
 declare module 'box-elements-messages';
 declare module 'box-ui-elements/es/*'; // TODO: Figure out why types don't register properly

package/src/@types/model.ts

@@ -12,6 +12,11 @@ export interface Annotation {
     modified_by: User;
     permissions: Permissions;
     replies?: Array<Reply>;
+    resolution?: {
+        resolved_at: string;
+        resolved_by: User;
+    } | null;
+    status?: 'open' | 'resolved';
     target: Target;
     type: 'annotation';
 }

package/src/BoxAnnotations.ts

@@ -43,6 +43,8 @@ type ViewerOption = {
 
 type ViewerOptions = Record<string, ViewerOption>;
 
+type GlobalWithBoxAnnotations = typeof globalThis & { BoxAnnotations: typeof BoxAnnotations };
+
 /**
  * NAME: The name of the annotator.
  * CONSTRUCTOR: Constructor for the annotator.
@@ -145,5 +147,5 @@ class BoxAnnotations {
     }
 }
 
-global.BoxAnnotations = BoxAnnotations;
+(globalThis as GlobalWithBoxAnnotations).BoxAnnotations = BoxAnnotations;
 export default BoxAnnotations;

package/src/adapters/threadedAnnotationsAdapters.ts

@@ -0,0 +1,155 @@
+import type { DocumentNodeV2, MentionNodeV2, ParagraphNodeV2, TextMessageTypeV2, TextNodeV2 } from '@box/threaded-annotations';
+
+import type { Annotation, Collaborator, Reply, UserMini } from '../@types';
+
+const MENTION_REGEX = /@\[(\d+):([^\]]+)\]/g;
+
+/**
+ * Parses a plain-text line into paragraph content nodes.
+ * Recognizes @[userId:userName] mention markup and converts to MentionNode / TextNode.
+ */
+const parseLine = (line: string): (MentionNodeV2 | TextNodeV2)[] => {
+    const nodes: (MentionNodeV2 | TextNodeV2)[] = [];
+    let lastIndex = 0;
+
+    // Reset regex state since it's global
+    MENTION_REGEX.lastIndex = 0;
+
+    let match = MENTION_REGEX.exec(line);
+    while (match !== null) {
+        const [fullMatch, userId, userName] = match;
+        const { index } = match;
+
+        if (index > lastIndex) {
+            nodes.push({ type: 'text', text: line.slice(lastIndex, index) });
+        }
+
+        nodes.push({
+            type: 'mention',
+            attrs: {
+                authorId: '',
+                mentionId: userId,
+                mentionedUserId: userId,
+                mentionedUserName: userName,
+            },
+        });
+
+        lastIndex = index + fullMatch.length;
+        match = MENTION_REGEX.exec(line);
+    }
+
+    if (lastIndex < line.length) {
+        nodes.push({ type: 'text', text: line.slice(lastIndex) });
+    }
+
+    return nodes;
+};
+
+/**
+ * Deserializes plain text with @[userId:userName] mention markup into a TipTap DocumentNode.
+ * This is the reverse of serializeMentionMarkup from @box/threaded-annotations.
+ *
+ * Newlines are treated as paragraph breaks.
+ */
+export const deserializeMentionMarkup = (text: string): DocumentNodeV2 => {
+    if (!text) {
+        return { type: 'doc', content: [] };
+    }
+
+    const lines = text.split('\n');
+    const content: ParagraphNodeV2[] = lines.map(line => {
+        const nodes = parseLine(line);
+
+        return {
+            type: 'paragraph',
+            ...(nodes.length > 0 ? { content: nodes } : {}),
+        };
+    });
+
+    return { type: 'doc', content };
+};
+
+/**
+ * Converts a box-annotations Reply to a threaded-annotations TextMessageType.
+ */
+export const replyToTextMessage = (reply: Reply): TextMessageTypeV2 => ({
+    author: {
+        email: reply.created_by?.login ?? '',
+        id: parseInt(reply.created_by?.id ?? '0', 10),
+        name: reply.created_by?.name ?? '',
+    },
+    createdAt: new Date(reply.created_at).getTime(),
+    id: reply.id,
+    message: deserializeMentionMarkup(reply.message),
+    permissions: {
+        canDelete: false,
+        canEdit: false,
+        canReply: true,
+        canResolve: false,
+    },
+});
+
+/**
+ * Converts an Annotation's description (root message) to a TextMessageType.
+ * The root message gets resolve permission from the annotation's permissions.
+ * Falls back to annotation-level fields when the description object is sparse
+ * (the list endpoint returns description with only { message }).
+ */
+const descriptionToTextMessage = (
+    annotation: Annotation,
+    reply: Reply,
+): TextMessageTypeV2 => ({
+    author: {
+        email: (reply.created_by ?? annotation.created_by)?.login ?? '',
+        id: parseInt((reply.created_by ?? annotation.created_by)?.id ?? '0', 10),
+        name: (reply.created_by ?? annotation.created_by)?.name ?? '',
+    },
+    createdAt: new Date(reply.created_at ?? annotation.created_at).getTime(),
+    id: reply.id ?? annotation.id,
+    message: deserializeMentionMarkup(reply.message),
+    permissions: {
+        canDelete: annotation.permissions?.can_delete ?? false,
+        canEdit: annotation.permissions?.can_edit ?? false,
+        canReply: true,
+        canResolve: annotation.permissions?.can_resolve ?? false,
+    },
+});
+
+/**
+ * Maps a full Annotation (description + replies) to an array of TextMessageType
+ * suitable for ThreadedAnnotationsV2.
+ */
+export const annotationToMessages = (annotation: Annotation): TextMessageTypeV2[] => {
+    const messages: TextMessageTypeV2[] = [];
+
+    if (annotation.description) {
+        messages.push(descriptionToTextMessage(annotation, annotation.description));
+    }
+
+    if (annotation.replies) {
+        annotation.replies.forEach(reply => {
+            messages.push(replyToTextMessage(reply));
+        });
+    }
+
+    return messages;
+};
+
+/**
+ * Converts a box-annotations Collaborator to a @box/user-selector UserContactType.
+ */
+export const collaboratorToUserContact = (collaborator: Collaborator): {
+    email: string;
+    id: number;
+    name: string;
+    value: string;
+} => {
+    const item = collaborator.item as UserMini | undefined;
+
+    return {
+        email: item?.email ?? item?.login ?? '',
+        id: parseInt(item?.id ?? collaborator.id, 10),
+        name: item?.name ?? collaborator.name,
+        value: collaborator.id,
+    };
+};

package/src/api/types.ts

@@ -1,4 +1,4 @@
-import { Annotation, Collaborator, NewAnnotation, Permissions, Token } from '../@types';
+import { Annotation, Collaborator, NewAnnotation, Permissions, Reply, Token } from '../@types';
 
 export type APICollection<R> = {
     entries: R[];
@@ -33,6 +33,23 @@ export interface AnnotationsAPI {
         errorCallback: (error: APIError) => void,
     ): Promise<void>;
 
+    createAnnotationReply(
+        fileId: string | null,
+        annotationId: string,
+        permissions: Permissions,
+        message: string,
+        successCallback: (result: Reply) => void,
+        errorCallback: (error: APIError) => void,
+    ): Promise<void>;
+
+    deleteAnnotation(
+        fileId: string | null,
+        annotationId: string,
+        permissions: Permissions,
+        successCallback: () => void,
+        errorCallback: (error: APIError) => void,
+    ): Promise<void>;
+
     getAnnotations(
         fileId: string | null,
         fileVersionId: string | null,
@@ -41,6 +58,16 @@ export interface AnnotationsAPI {
         errorCallback: (error: APIError) => void,
         limit?: number,
         shouldFetchAll?: boolean,
+        shouldFetchReplies?: boolean,
+    ): Promise<void>;
+
+    updateAnnotation(
+        fileId: string | null,
+        annotationId: string,
+        permissions: Permissions,
+        payload: { message?: string; status?: string },
+        successCallback: (result: Annotation) => void,
+        errorCallback: (error: APIError) => void,
     ): Promise<void>;
 
     destroy(): void;

package/src/boundingBoxHighlight/BoundingBoxHighlightContainer.tsx

@@ -0,0 +1,33 @@
+import { connect } from 'react-redux';
+import { BoundingBoxHighlightList } from '../components/BoundingBoxHighlight';
+import withProviders from '../common/withProviders';
+import {
+    AppState,
+    BoundingBox,
+    getBoundingBoxHighlights,
+    getBoundingBoxHighlightsForPage,
+    getSelectedBoundingBoxHighlightId,
+    navigateBoundingBoxHighlightAction,
+    setSelectedBoundingBoxHighlightAction,
+} from '../store';
+
+export type Props = {
+    location: number;
+};
+
+const mapStateToProps = (state: AppState, { location }: Props): {
+    allBoundingBoxes: BoundingBox[];
+    boundingBoxes: BoundingBox[];
+    selectedId: string | null;
+} => ({
+    allBoundingBoxes: getBoundingBoxHighlights(state),
+    boundingBoxes: getBoundingBoxHighlightsForPage(state, location),
+    selectedId: getSelectedBoundingBoxHighlightId(state),
+});
+
+const mapDispatchToProps = {
+    onNavigate: navigateBoundingBoxHighlightAction,
+    onSelect: setSelectedBoundingBoxHighlightAction,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(withProviders(BoundingBoxHighlightList));

package/src/boundingBoxHighlight/BoundingBoxHighlightManager.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import BaseManager, { Props } from '../common/BaseManager';
+import BoundingBoxHighlightContainer from './BoundingBoxHighlightContainer';
+
+export default class BoundingBoxHighlightManager extends BaseManager {
+    decorate(): void {
+        this.reactEl.classList.add('ba-Layer--boundingBoxHighlight');
+        this.reactEl.dataset.testid = 'ba-Layer--boundingBoxHighlight';
+    }
+
+    render(props: Props): void {
+        if (!this.root) {
+            this.root = ReactDOM.createRoot(this.reactEl);
+        }
+
+        this.root.render(<BoundingBoxHighlightContainer location={this.location} {...props} />);
+    }
+}

package/src/boundingBoxHighlight/index.ts

@@ -0,0 +1 @@
+export { default as BoundingBoxHighlightManager } from './BoundingBoxHighlightManager';

package/src/common/BaseAnnotator.scss

@@ -7,7 +7,8 @@
     @import '~box-ui-elements/es/styles/common/buttons';
 
     &.is-hidden {
-        .ba-Layer {
+        .ba-Layer,
+        .ba-PopupPortal {
             display: none;
         }
     }