box-annotations 5.3.0 → 5.3.1-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "box-annotations",
-    "version": "5.3.0",
+    "version": "5.3.1-beta.1",
     "description": "Box Annotations",
     "author": "Box (https://www.box.com/)",
     "license": "SEE LICENSE IN LICENSE",
@@ -36,16 +36,17 @@
         "@box/blueprint-web-assets": "^5.5.12",
         "@box/collaboration-popover": "^2.1.32",
         "@box/combobox-with-api": "^1.42.22",
-        "@box/frontend": "^10.0.0",
+        "@box/frontend": "^11.0.1",
         "@box/item-icon": "^3.2.0",
         "@box/languages": "^1.1.0",
         "@box/readable-time": "^2.1.32",
-        "@box/threaded-annotations": "^4.11.0",
+        "@box/threaded-annotations": "^4.11.14",
         "@box/types": "^2.1.8",
         "@box/user-selector": "^2.1.35",
         "@cfaester/enzyme-adapter-react-18": "^0.8.0",
-        "@commitlint/cli": "^8.3.5",
-        "@commitlint/config-conventional": "^8.2.0",
+        "@commitlint/cli": "^19.8.0",
+        "@commitlint/config-conventional": "^19.8.0",
+        "@formatjs/cli": "^6.16.26",
         "@formatjs/intl-pluralrules": "^1.5.5",
         "@formatjs/intl-relativetimeformat": "^4.5.12",
         "@popperjs/core": "^2.4.0",
@@ -65,24 +66,22 @@
         "@typescript-eslint/eslint-plugin": "^7.3.1",
         "@typescript-eslint/parser": "^7.3.1",
         "autoprefixer": "^10.4.19",
-        "axios": "^0.24.0",
-        "babel-eslint": "^10.1.0",
+        "axios": "^0.33.0",
         "babel-jest": "^29.7.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",
-        "box-node-sdk": "^1.33.0",
         "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",
+        "conventional-changelog": "^8.1.3",
+        "conventional-changelog-conventionalcommits": "^10.3.0",
         "core-js": "^3.38.1",
         "css-loader": "^7.1.2",
-        "css-minimizer-webpack-plugin": "^7.0.4",
+        "css-minimizer-webpack-plugin": "^8.0.0",
         "cypress": "^15.20.1",
-        "draft-js": "0.10.5",
+        "draft-js": "^0.11.7",
         "enzyme": "^3.11.0",
         "enzyme-to-json": "^3.4.4",
         "eslint": "^8.57.0",
@@ -99,7 +98,7 @@
         "eslint-plugin-prettier": "^5.2.1",
         "eslint-plugin-react": "^7.34.3",
         "eslint-plugin-react-hooks": "^4.6.0",
-        "formik": "^2.1.4",
+        "formik": "^2.4.9",
         "husky": "^3.1.0",
         "jest": "^29.7.0",
         "jest-canvas-mock": "^2.5.2",
@@ -108,8 +107,9 @@
         "lodash": "^4.17.15",
         "mini-css-extract-plugin": "^2.10.1",
         "npm-run-all": "^4.1.5",
+        "postcss": "^8.5.18",
         "postcss-loader": "^8.1.1",
-        "prettier": "^1.19.1",
+        "prettier": "^3.2.5",
         "react": "18.3.1",
         "react-dom": "18.3.1",
         "react-intl": "6.4.2",
@@ -118,21 +118,21 @@
         "react-textarea-autosize": "^7.1.2",
         "redux": "^4.0.5",
         "regenerator-runtime": "^0.13.9",
-        "sass": "^1.64.1",
+        "sass": "1.77.6",
         "sass-loader": "^16.0.4",
         "scroll-into-view-if-needed": "^2.2.24",
         "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",
+        "stylelint": "^16.26.1",
+        "stylelint-config-standard": "^38.0.0",
+        "stylelint-config-standard-scss": "^14.0.0",
+        "stylelint-order": "^6.0.4",
         "tabbable": "^1.1.3",
-        "typescript": "4.9.5",
+        "typescript": "5.2.2",
         "uuid": "^8.3.1",
         "wait-on": "^9.0.5",
         "webpack": "^5.105.4",
         "webpack-cli": "^5.1.4",
-        "webpack-dev-server": "^5.2.3",
+        "webpack-dev-server": "^5.2.6",
         "worker-farm": "^1.7.0"
     },
     "peerDependencies": {
@@ -142,22 +142,23 @@
         "@box/combobox-with-api": "^1.42.22",
         "@box/item-icon": "^3.2.0",
         "@box/readable-time": "^2.1.32",
-        "@box/threaded-annotations": "^4.11.0",
+        "@box/threaded-annotations": "^4.11.14",
         "@box/types": "^2.1.8",
-        "@box/user-selector": "^2.1.35"
+        "@box/user-selector": "^2.1.35",
+        "axios": "^0.33.0"
     },
     "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",
         "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",
+        "clean": "rm -rf dist reports/* i18n/json",
+        "extract:i18n": "mkdir -p i18n/json && formatjs extract 'src/**/*.{js,ts,tsx}' --ignore='src/**/__tests__/**' --ignore='src/**/__mocks__/**' --out-file i18n/json/en-US.json",
         "cy:open": "yarn cy:wait; yarn cypress open",
         "cy:run": "yarn cy:wait; yarn cypress run --spec test/integration/**/*.test.js",
         "cy:wait": "wait-on http-get://127.0.0.1:8001",
         "lint": "npm-run-all lint:*",
         "lint:js": "eslint .",
-        "lint:scss": "stylelint \"src/**/*.scss\" --syntax scss",
+        "lint:scss": "stylelint \"src/**/*.scss\"",
         "lint:ts": "tsc && eslint --ext=.tsx,.ts --max-warnings=0 .",
         "release:cdn": "yarn setup; node ./scripts/prod.js",
         "release:custom": "scripts/release.sh -c",
@@ -165,7 +166,7 @@
         "release:minor": "scripts/release.sh -n",
         "release:patch": "scripts/release.sh -p",
         "release:pre": "scripts/release.sh -x",
-        "setup": "yarn install && yarn clean && yarn build:i18n",
+        "setup": "yarn install && yarn clean",
         "start": "yarn setup && yarn build:dev:dist --watch",
         "start:dev": "yarn setup && LANGUAGE=en-US BABEL_ENV=dev NODE_ENV=dev yarn webpack-dev-server --config scripts/webpack.config.js --mode development",
         "start:linked": "IS_LINKED=1 yarn start",
@@ -185,6 +186,6 @@
         "**/react-intl/**/@types/react": "^18.3.12",
         "**/@types/react": "^18.3.12",
         "**/@types/react-dom": "^18.2.0",
-        "acorn": "8.14.0"
+        "draft-js/immutable": "^3.8.3"
     }
 }

package/src/BoxAnnotations.ts

@@ -70,7 +70,7 @@ const ANNOTATORS: Annotator[] = [
         CONSTRUCTOR: MediaAnnotator,
         NAME: 'Media',
         TYPES: [Type.region],
-        VIEWERS: ['Dash','MP4'],
+        VIEWERS: ['Dash', 'MP4'],
     },
 ];
 

package/src/adapters/threadedAnnotationsAdapters.ts

@@ -1,4 +1,10 @@
-import type { DocumentNodeV2, MentionNodeV2, ParagraphNodeV2, TextMessageTypeV2, TextNodeV2 } from '@box/threaded-annotations';
+import type {
+    DocumentNodeV2,
+    MentionNodeV2,
+    ParagraphNodeV2,
+    TextMessageTypeV2,
+    TextNodeV2,
+} from '@box/threaded-annotations';
 import { parseMessageMarkdown } from '@box/threaded-annotations';
 
 import type { Annotation, Collaborator, Reply, UserMini } from '../@types';
@@ -151,7 +157,9 @@ export const annotationToMessages = (annotation: Annotation, isRichTextEnabled =
 /**
  * Converts a box-annotations Collaborator to a @box/user-selector UserContactType.
  */
-export const collaboratorToUserContact = (collaborator: Collaborator): {
+export const collaboratorToUserContact = (
+    collaborator: Collaborator,
+): {
     email: string;
     id: number;
     name: string;

package/src/boundingBoxHighlight/BoundingBoxHighlightContainer.tsx

@@ -15,7 +15,10 @@ export type Props = {
     location: number;
 };
 
-const mapStateToProps = (state: AppState, { location }: Props): {
+const mapStateToProps = (
+    state: AppState,
+    { location }: Props,
+): {
     allBoundingBoxes: BoundingBox[];
     boundingBoxes: BoundingBox[];
     selectedId: string | null;

package/src/common/BaseAnnotator.scss

@@ -35,7 +35,7 @@
     pointer-events: none;
 
     .ba-Popup,
-    .ba-PopupV2 {
+    .ba-PopupAnnotation {
         z-index: 150;
         pointer-events: auto;
     }

package/src/common/BaseAnnotator.ts

@@ -45,6 +45,8 @@ export type Options = {
     intl: IntlOptions;
     locale?: string;
     onCopyLink?: (params: { annotationId: string; fileVersionId: string }) => void;
+    // When false, skip annotation create. Existing annotations still render.
+    showAnnotationsControls?: boolean;
     token: Token;
 };
 
@@ -339,6 +341,13 @@ export default class BaseAnnotator extends EventEmitter {
     };
 
     protected handleSetActive = (annotationId: string | null): void => {
+        const state = this.store.getState();
+
+        // Ignore ids this pane does not own. Clear locally so the host is not told to deselect.
+        if (annotationId && state?.annotations?.isInitialized && !store.getAnnotation(state, annotationId)) {
+            this.store.dispatch(store.clearActiveAnnotationIdAction());
+            return;
+        }
         this.setActiveId(annotationId);
     };
 

package/src/common/DeselectListener.tsx

@@ -8,7 +8,7 @@ export default function DeselectListener(): null {
     React.useEffect(() => {
         const handleMouseDown = (event: MouseEvent): void => {
             // Popup is portaled outside .ba-Layer; native mousedown still bubbles here.
-            if ((event.target as Element | null)?.closest?.('.ba-PopupV2, .ba-Popup')) return;
+            if ((event.target as Element | null)?.closest?.('.ba-PopupAnnotation, .ba-Popup')) return;
             dispatch(setActiveAnnotationIdAction(null));
         };
 

package/src/common/EventEmitter.ts

@@ -1,7 +1,12 @@
 import eventManager from './EventManager';
 
+type Listener = (...args: any[]) => void;
+
 export default class EventEmitter {
-    addListener(event: string | symbol, listener: (...args: any[]) => void): void {
+    private ownListeners: Array<{ event: string | symbol; listener: Listener }> = [];
+
+    addListener(event: string | symbol, listener: Listener): void {
+        this.ownListeners.push({ event, listener });
         eventManager.addListener(event, listener);
     }
 
@@ -10,10 +15,13 @@ export default class EventEmitter {
     }
 
     removeAllListeners(): void {
-        eventManager.removeAllListeners();
+        // Shared eventManager: remove only this instance's listeners.
+        this.ownListeners.forEach(({ event, listener }) => eventManager.removeListener(event, listener));
+        this.ownListeners = [];
     }
 
-    removeListener(event: string | symbol, listener: (...args: any[]) => void): void {
+    removeListener(event: string | symbol, listener: Listener): void {
+        this.ownListeners = this.ownListeners.filter(own => !(own.event === event && own.listener === listener));
         eventManager.removeListener(event, listener);
     }
 }

package/src/components/BoundingBoxHighlight/BoundingBoxHighlightNav.scss

@@ -1,5 +1,5 @@
 $ba-BoundingBoxHighlightNav-bg: #fff;
-$ba-BoundingBoxHighlightNav-shadow: 0 6px 20px rgba(0, 0, 0, .1);
+$ba-BoundingBoxHighlightNav-shadow: 0 6px 20px rgb(0 0 0 / 10%);
 $ba-BoundingBoxHighlightNav-arrow: #909090;
 $ba-BoundingBoxHighlightNav-border: #e8e8e8;
 $ba-BoundingBoxHighlightNav-counter: #222;
@@ -45,11 +45,11 @@ $ba-BoundingBoxHighlightNav-counter: #222;
     }
 
     &:hover:not(:disabled) {
-        background: rgba(0, 0, 0, .06);
+        background: rgb(0 0 0 / 6%);
     }
 
     &:active:not(:disabled) {
-        background: rgba(0, 0, 0, .12);
+        background: rgb(0 0 0 / 12%);
     }
 
     &:disabled {

package/src/components/BoundingBoxHighlight/BoundingBoxHighlightRect.scss

@@ -1,22 +1,27 @@
 $ba-BoundingBoxHighlight-color: #0061d5;
-$ba-BoundingBoxHighlight-bgColor--default: rgba($ba-BoundingBoxHighlight-color, .05);
-$ba-BoundingBoxHighlight-bgColor--hover: rgba($ba-BoundingBoxHighlight-color, .16);
-$ba-BoundingBoxHighlight-bgColor--selected: rgba($ba-BoundingBoxHighlight-color, .1);
+$ba-BoundingBoxHighlight-bgColor--default: rgba($ba-BoundingBoxHighlight-color, 0.05);
+$ba-BoundingBoxHighlight-bgColor--hover: rgba($ba-BoundingBoxHighlight-color, 0.16);
+$ba-BoundingBoxHighlight-bgColor--selected: rgba($ba-BoundingBoxHighlight-color, 0.1);
 
 .ba-BoundingBoxHighlightRect {
     position: absolute;
     box-sizing: border-box;
     background-color: $ba-BoundingBoxHighlight-bgColor--default;
-    border: 2px solid rgba($ba-BoundingBoxHighlight-color, .2);
+    border: 2px solid rgba($ba-BoundingBoxHighlight-color, 0.2);
     border-radius: 8px;
     outline: none;
     cursor: pointer;
-    transition: background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
+    transition:
+        background-color 200ms ease,
+        border-color 200ms ease,
+        box-shadow 200ms ease;
     pointer-events: auto;
 
     &.is-selected {
         background-color: $ba-BoundingBoxHighlight-bgColor--selected;
         border-color: $ba-BoundingBoxHighlight-color;
-        box-shadow: 0 0 0 2px rgba($ba-BoundingBoxHighlight-color, .3), 0 4px 12px rgba(0, 0, 0, .15);
+        box-shadow:
+            0 0 0 2px rgba($ba-BoundingBoxHighlight-color, 0.3),
+            0 4px 12px rgb(0 0 0 / 15%);
     }
 }

package/src/components/Popups/PopupBase.scss

@@ -25,7 +25,7 @@
         }
 
         .ba-ReplyForm {
-            opacity: .99; // Creates a new stacking context so that the collaborators list shows on top of the ba-Popup-footer
+            opacity: 0.99; // Creates a new stacking context so that the collaborators list shows on top of the ba-Popup-footer
         }
     }
 
@@ -34,7 +34,7 @@
         background-color: $popup-content-bg;
         border: 1px solid $popup-border-color;
         border-radius: 6px;
-        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .15);
+        box-shadow: 0 2px 12px 0 rgb(0 0 0 / 15%);
     }
 
     .ba-Popup-footer {

package/src/components/Popups/PopupDrawingToolbar.scss

@@ -13,7 +13,7 @@
     border-radius: $bdl-border-radius-size;
     outline: none;
     cursor: pointer;
-    opacity: .7;
+    opacity: 0.7;
     transition: opacity 200ms ease;
 
     &:focus,
@@ -23,7 +23,7 @@
 
     &[disabled] {
         cursor: default;
-        opacity: .2;
+        opacity: 0.2;
     }
 }
 
@@ -53,7 +53,7 @@
     .ba-Popup-content {
         gap: 4px;
         padding: 8px;
-        background-color: rgba(0, 0, 0, .8);
+        background-color: rgb(0 0 0 / 80%);
         border-radius: 46px;
     }
 }
@@ -75,7 +75,7 @@
 
 // Modernized border-left for adjacent groups
 .ba-PopupDrawingToolbar--modernized .ba-PopupDrawingToolbar-group + .ba-PopupDrawingToolbar-group {
-    border-left: 1px solid rgb(255, 255, 255, 8%);
+    border-left: 1px solid rgb(255 255 255 / 8%);
 }
 
 .ba-PopupDrawingToolbar-delete,

package/src/components/Popups/PopupList.scss

@@ -8,7 +8,7 @@
     .ba-Popup-content {
         border: solid 1px $bdl-gray-30;
         border-radius: $bdl-border-radius-size;
-        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
+        box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
     }
 
     .ba-PopupList-prompt {

package/src/components/Popups/PopupV2.scss

@@ -1,4 +1,4 @@
-.ba-PopupV2 {
+.ba-PopupAnnotation {
     position: absolute;
     top: 0;
     left: 0;
@@ -8,7 +8,7 @@
 
 // Specificity must beat .ba selectors from box-ui-elements globals
 // (forms, buttons, links) that cascade into threaded-annotations components.
-.ba .ba-PopupV2 {
+.ba .ba-PopupAnnotation {
     div[contenteditable='true'],
     div[contenteditable='true']:hover,
     div[contenteditable='true']:focus {

package/src/components/Popups/PopupV2.tsx

@@ -19,6 +19,7 @@ import FocusTrap from 'box-ui-elements/es/components/focus-trap/FocusTrap';
 
 import { annotationToMessages, collaboratorToUserContact } from '../../adapters/threadedAnnotationsAdapters';
 import AnnotationCallbacksContext from '../../common/AnnotationCallbacksContext';
+import useOutsideEvent from '../../common/useOutsideEvent';
 import {
     createReplyAction,
     deleteAnnotationAction,
@@ -41,6 +42,7 @@ import './PopupV2.scss';
 
 export type Props = {
     annotationId?: string;
+    onCancel?: () => void;
     onSubmit: (text: string) => void;
     popupPortalEl?: HTMLElement | null;
     reference: PopupReference;
@@ -70,6 +72,15 @@ const createDocumentNode = (content: JSONContent | null): DocumentNodeV2 => {
 const serializePopupMessage = (doc: DocumentNodeV2, isRichTextEnabled: boolean): string =>
     isRichTextEnabled ? serializeMessageToMarkdown(doc) : serializeMentionMarkup(doc).text;
 
+const isEmptyEditorContent = (content: JSONContent | null, isRichTextEnabled: boolean): boolean => {
+    if (!content) {
+        return true;
+    }
+
+    const text = serializePopupMessage(createDocumentNode(content), isRichTextEnabled);
+    return text.trim().length === 0;
+};
+
 const literalToString = (literal: TokenLiteral): string | null => {
     if (!literal) return null;
     if (typeof literal === 'string') return literal;
@@ -105,13 +116,14 @@ const fetchAvatarBlob = async (
     }
 };
 
-const PopupV2 = ({ annotationId, onSubmit, popupPortalEl, reference }: Props): JSX.Element | null => {
+const PopupV2 = ({ annotationId, onCancel, onSubmit, popupPortalEl, reference }: Props): JSX.Element | null => {
     const intl = useIntl();
     const dispatch = useDispatch<AppThunkDispatch>();
     const { onCopyLink: consumerOnCopyLink } = React.useContext(AnnotationCallbacksContext);
     const popupRef = React.useRef<HTMLDivElement>(null);
     const popperRef = React.useRef<Instance>();
     const optionsRef = React.useRef<Partial<Options>>(getPopupOptions());
+    const hasTextRef = React.useRef(false);
 
     const apiHost = useSelector(getApiHost);
     const fileId = useSelector(getFileId);
@@ -142,10 +154,7 @@ const PopupV2 = ({ annotationId, onSubmit, popupPortalEl, reference }: Props): J
             const capturedToken = token;
             const url = await fetchAvatarBlob(capturedApiHost, capturedToken, fileId, userId);
             if (!url) return null;
-            if (
-                credentialsRef.current.apiHost !== capturedApiHost ||
-                credentialsRef.current.token !== capturedToken
-            ) {
+            if (credentialsRef.current.apiHost !== capturedApiHost || credentialsRef.current.token !== capturedToken) {
                 URL.revokeObjectURL(url);
                 return null;
             }
@@ -188,6 +197,21 @@ const PopupV2 = ({ annotationId, onSubmit, popupPortalEl, reference }: Props): J
         event.stopPropagation();
     }, []);
 
+    const handleEditorChange = React.useCallback(
+        (content: JSONContent | null): void => {
+            hasTextRef.current = !isEmptyEditorContent(content, isRichTextEnabled);
+        },
+        [isRichTextEnabled],
+    );
+
+    const handleClickAway = React.useCallback((): void => {
+        if (!hasTextRef.current) {
+            onCancel?.();
+        }
+    }, [onCancel]);
+
+    useOutsideEvent('mousedown', popupRef, onCancel ? handleClickAway : undefined);
+
     React.useEffect(() => {
         if (!annotation) return undefined;
 
@@ -225,11 +249,9 @@ const PopupV2 = ({ annotationId, onSubmit, popupPortalEl, reference }: Props): J
 
     const isResolved = annotation?.status === 'resolved';
     const resolvedBy = isResolved
-        ? annotation?.resolution?.resolved_by?.name ?? annotation?.modified_by?.name
-        : undefined;
-    const resolvedAtSource = isResolved
-        ? annotation?.resolution?.resolved_at ?? annotation?.modified_at
+        ? (annotation?.resolution?.resolved_by?.name ?? annotation?.modified_by?.name)
         : undefined;
+    const resolvedAtSource = isResolved ? (annotation?.resolution?.resolved_at ?? annotation?.modified_at) : undefined;
     const resolvedAt = resolvedAtSource ? new Date(resolvedAtSource).getTime() : undefined;
 
     const userSelectorProps = React.useMemo(
@@ -288,14 +310,11 @@ const PopupV2 = ({ annotationId, onSubmit, popupPortalEl, reference }: Props): J
         [annotationId, dispatch, isRichTextEnabled],
     );
 
-    const handleThreadDelete = React.useCallback(
-        async (): Promise<void> => {
-            if (annotationId) {
-                await dispatch(deleteAnnotationAction(annotationId));
-            }
-        },
-        [annotationId, dispatch],
-    );
+    const handleThreadDelete = React.useCallback(async (): Promise<void> => {
+        if (annotationId) {
+            await dispatch(deleteAnnotationAction(annotationId));
+        }
+    }, [annotationId, dispatch]);
 
     const handleDelete = React.useCallback(
         async (id: string): Promise<void> => {
@@ -305,24 +324,21 @@ const PopupV2 = ({ annotationId, onSubmit, popupPortalEl, reference }: Props): J
         [annotationId, dispatch],
     );
 
-    const handleResolve = React.useCallback(
-        async (): Promise<void> => {
-            if (!annotationId) return;
-            const result = await dispatch(updateAnnotationAction({ annotationId, payload: { status: 'resolved' } }));
-            if (updateAnnotationAction.fulfilled.match(result)) {
-                dispatch(setActiveAnnotationIdAction(null));
-            }
-        },
-        [annotationId, dispatch],
-    );
+    const handleResolve = React.useCallback(async (): Promise<void> => {
+        if (!annotationId) return;
+        const result = await dispatch(updateAnnotationAction({ annotationId, payload: { status: 'resolved' } }));
+        if (updateAnnotationAction.fulfilled.match(result)) {
+            dispatch(setActiveAnnotationIdAction(null));
+        }
+    }, [annotationId, dispatch]);
 
-    const handleUnresolve = React.useCallback(
-        async (): Promise<void> => {
-            if (!annotationId) return;
-            await dispatch(updateAnnotationAction({ annotationId, payload: { status: 'open' } }));
-        },
-        [annotationId, dispatch],
-    );
+    const handleUnresolve = React.useCallback(async (): Promise<void> => {
+        if (!annotationId) return;
+        await dispatch(updateAnnotationAction({ annotationId, payload: { status: 'open' } }));
+    }, [annotationId, dispatch]);
+
+    // No messages means this pane does not own the thread; do not render an empty composer.
+    if (annotationId && !threadMessages.length) return null;
 
     if (!popupPortalEl) return null;
 
@@ -331,25 +347,26 @@ const PopupV2 = ({ annotationId, onSubmit, popupPortalEl, reference }: Props): J
             <div
                 ref={popupRef}
                 aria-label={intl.formatMessage(messages.ariaLabelComment)}
-                className="ba-PopupV2"
+                className="ba-PopupAnnotation"
                 data-resin-component={annotationId ? 'popupThreadV2' : 'popupReplyV2'}
-                onClick={handleEvent}
+                data-resin-feature="annotations"
                 onMouseDown={handleEvent}
                 onMouseMove={handleEvent}
-                onMouseUp={handleEvent}
                 onTouchMove={handleEvent}
                 onTouchStart={handleEvent}
                 role="presentation"
             >
                 <BlueprintModernizationProvider enableModernizedComponents>
                     <TooltipProvider>
-                        <MentionContextProvider value={{
-                            collaborationPopoverProps: {
-                                onSubmit: () => Promise.resolve(),
-                            },
-                            // Mentions are restricted to file collaborators; the invite popover is intentionally never shown.
-                            fetchCollaboratorState: async () => true,
-                        }}>
+                        <MentionContextProvider
+                            value={{
+                                collaborationPopoverProps: {
+                                    onSubmit: () => Promise.resolve(),
+                                },
+                                // Mentions are restricted to file collaborators; the invite popover is intentionally never shown.
+                                fetchCollaboratorState: async () => true,
+                            }}
+                        >
                             {annotationId ? (
                                 <ThreadedAnnotationsV2
                                     isAnnotations
@@ -372,6 +389,7 @@ const PopupV2 = ({ annotationId, onSubmit, popupPortalEl, reference }: Props): J
                                 <MessageEditorV2
                                     isFirstAnnotation
                                     isRichTextEnabled={isRichTextEnabled}
+                                    onChange={handleEditorChange}
                                     onPost={handlePost}
                                     userSelectorProps={userSelectorProps}
                                 />

package/src/components/ReplyForm/ReplyForm.tsx

@@ -70,14 +70,7 @@ const ReplyForm = (props: Props): JSX.Element => {
     }, [formRef]); // eslint-disable-line react-hooks/exhaustive-deps
 
     return (
-        <Form
-            ref={formRef}
-            className="ba-ReplyForm"
-            data-testid="ba-ReplyForm"
-            onPointerEnterCapture={undefined}
-            onPointerLeaveCapture={undefined}
-            placeholder={undefined}
-        >
+        <Form ref={formRef} className="ba-ReplyForm" data-testid="ba-ReplyForm">
             <div className="ba-Popup-main">
                 <ReplyField
                     className="ba-Popup-field"

package/src/constants.ts

@@ -9,14 +9,13 @@ export const MOUSE_PRIMARY = 1;
 
 /**
  * This is the default location index for video annotations.
- * Documents have locations that represent a page but that doesn't apply to 
+ * Documents have locations that represent a page but that doesn't apply to
  * videos as they have no pages. The annnotations managers take  locations as
- * parameters so we need to provide a default value that indicates that this is a 
+ * parameters so we need to provide a default value that indicates that this is a
  * video annotation.
  */
 export const MEDIA_LOCATION_INDEX = -1;
 
-
 export enum TARGET_TYPE {
     FRAME = 'frame',
     PAGE = 'page',