box-annotations 5.3.1-beta.0 → 5.3.1-beta.2

package/i18n/zh-TW.js

@@ -1,24 +1,25 @@
+// THIS IS A GENERATED FILE. DO NOT EDIT MANUALLY OR YOUR CHANGES WILL BE OVERWRITTEN
 export default {
-  "ba.annotationsClose": "關閉",
-  "ba.annotationsCreateError": "很抱歉，無法建立註解。",
-  "ba.annotationsLoadError": "很抱歉，無法載入此檔案的註解。",
-  "ba.annotationsPost": "張貼",
-  "ba.annotationsSave": "儲存",
-  "ba.boundingBoxHighlight.viewNextReference": "檢視下一個參考項目",
-  "ba.boundingBoxHighlight.viewPrevReference": "檢視先前的參考項目",
-  "ba.popup.reply.comment": "留言",
-  "ba.popup.reply.field": "鍵入留言",
-  "ba.popup.reply.mentionLoading": "正在載入使用者…",
-  "ba.popup.reply.mentionSelector": "提及共同作業者",
-  "ba.popups.cancel": "取消",
-  "ba.popups.drawing.addComment": "新增留言",
-  "ba.popups.drawing.delete": "刪除",
-  "ba.popups.drawing.redo": "重做",
-  "ba.popups.drawing.undo": "復原",
-  "ba.popups.popupCursor.regionPrompt": "繪圖一個方塊以留言",
-  "ba.popups.popupHighlight.promoter": "醒目提示和留言",
-  "ba.popups.popupHighlight.restrictedPrompt": "留言限制在單一頁面",
-  "ba.popups.popupList.prompt": "提及某人來通知該名人員",
-  "ba.popups.post": "發佈",
-  "ba.popups.replyField.placeholder": "輸入留言..."
-}
+    "ba.annotationsClose": "關閉",
+    "ba.annotationsCreateError": "很抱歉，無法建立註解。",
+    "ba.annotationsLoadError": "很抱歉，無法載入此檔案的註解。",
+    "ba.annotationsPost": "張貼",
+    "ba.annotationsSave": "儲存",
+    "ba.boundingBoxHighlight.viewNextReference": "檢視下一個參考項目",
+    "ba.boundingBoxHighlight.viewPrevReference": "檢視先前的參考項目",
+    "ba.popup.reply.comment": "留言",
+    "ba.popup.reply.field": "鍵入留言",
+    "ba.popup.reply.mentionLoading": "正在載入使用者...",
+    "ba.popup.reply.mentionSelector": "提及共同作業者",
+    "ba.popups.cancel": "取消",
+    "ba.popups.drawing.addComment": "新增留言",
+    "ba.popups.drawing.delete": "刪除",
+    "ba.popups.drawing.redo": "重做",
+    "ba.popups.drawing.undo": "復原",
+    "ba.popups.popupCursor.regionPrompt": "繪圖一個方塊以留言",
+    "ba.popups.popupHighlight.promoter": "醒目提示和留言",
+    "ba.popups.popupHighlight.restrictedPrompt": "留言限制在單一頁面",
+    "ba.popups.popupList.prompt": "提及某人以進行通知",
+    "ba.popups.post": "張貼",
+    "ba.popups.replyField.placeholder": "輸入留言..."
+};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "box-annotations",
-    "version": "5.3.1-beta.0",
+    "version": "5.3.1-beta.2",
     "description": "Box Annotations",
     "author": "Box (https://www.box.com/)",
     "license": "SEE LICENSE IN LICENSE",
@@ -40,12 +40,13 @@
         "@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.14.0",
         "@box/types": "^2.1.8",
         "@box/user-selector": "^2.1.35",
         "@cfaester/enzyme-adapter-react-18": "^0.8.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",
@@ -69,9 +70,8 @@
         "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-ui-elements": "^20.0.0",
+        "box-ui-elements": "^28.0.0-beta.2",
         "circular-dependency-plugin": "^5.2.0",
         "classnames": "^2.2.5",
         "clsx": "^2.1.1",
@@ -142,17 +142,17 @@
         "@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.14.0",
         "@box/types": "^2.1.8",
         "@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",
@@ -166,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",

package/src/api/types.ts

@@ -31,6 +31,7 @@ export interface AnnotationsAPI {
         permissions: Permissions,
         successCallback: (result: Annotation) => void,
         errorCallback: (error: APIError) => void,
+        shouldEnableRichText?: boolean,
     ): Promise<void>;
 
     createAnnotationReply(
@@ -40,6 +41,7 @@ export interface AnnotationsAPI {
         message: string,
         successCallback: (result: Reply) => void,
         errorCallback: (error: APIError) => void,
+        shouldEnableRichText?: boolean,
     ): Promise<void>;
 
     deleteAnnotation(
@@ -59,6 +61,7 @@ export interface AnnotationsAPI {
         limit?: number,
         shouldFetchAll?: boolean,
         shouldFetchReplies?: boolean,
+        shouldEnableRichText?: boolean,
     ): Promise<void>;
 
     updateAnnotation(
@@ -68,6 +71,7 @@ export interface AnnotationsAPI {
         payload: { message?: string; status?: string },
         successCallback: (result: Annotation) => void,
         errorCallback: (error: APIError) => void,
+        shouldEnableRichText?: boolean,
     ): Promise<void>;
 
     destroy(): void;
@@ -88,6 +92,7 @@ export interface ThreadedCommentsAPI {
         fileId: string | null;
         message?: string;
         permissions: ReplyPermissions;
+        shouldEnableRichText?: boolean;
         status?: string;
         successCallback: (reply: Reply) => void;
     }): void;

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/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/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);
@@ -185,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;
 
@@ -310,6 +337,9 @@ const PopupV2 = ({ annotationId, onSubmit, popupPortalEl, reference }: Props): J
         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;
 
     return ReactDOM.createPortal(
@@ -359,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/ReplyFormContainer.tsx

@@ -1,4 +1,4 @@
-import createMentionSelectorState from 'box-ui-elements/es/components/form-elements/draft-js-mention-selector/createMentionSelectorState';
+import createMentionTimestampSelectorState from 'box-ui-elements/es/components/form-elements/draft-js-mention-selector/createMentionTimestampSelectorState';
 import { getFormattedCommentText } from 'box-ui-elements/es/components/form-elements/draft-js-mention-selector/utils';
 import { EditorState, SelectionState } from 'draft-js';
 import { FormikBag, withFormik } from 'formik';
@@ -30,13 +30,16 @@ export const mapStateToProps = (state: AppState): PropsFromState => ({
 export const mapPropsToErrors = (): FormErrors => ({ editorState: 'initial' });
 
 export const mapPropsToValues = ({ cursorPosition: prevCursorPosition, value = '' }: Props): FormValues => {
-    const mentionState = withMentionDecorator(createMentionSelectorState(value));
-    const cursorPosition = value ? prevCursorPosition : 0;
+    const mentionState = withMentionDecorator(createMentionTimestampSelectorState(value));
+    const selection = mentionState.getSelection();
+    const blockLength = mentionState.getCurrentContent().getBlockForKey(selection.getAnchorKey()).getLength();
+    // The saved message is trimmed, so the saved cursor can sit past the end of the rebuilt text
+    const cursorPosition = value ? Math.min(prevCursorPosition, blockLength) : 0;
 
     return {
         editorState: EditorState.forceSelection(
             mentionState,
-            mentionState.getSelection().merge({
+            selection.merge({
                 anchorOffset: cursorPosition,
                 focusOffset: cursorPosition,
                 hasFocus: true,

package/src/document/DocumentAnnotator.ts

@@ -32,6 +32,8 @@ export default class DocumentAnnotator extends BaseAnnotator {
 
     highlightListener?: HighlightListener;
 
+    private readonly canCreate: boolean;
+
     managers: Map<number, Set<Manager>> = new Map();
 
     /** Tracks which view mode the current managers were created for. Used to destroy/recreate when switching. */
@@ -40,11 +42,24 @@ export default class DocumentAnnotator extends BaseAnnotator {
     constructor(options: Options) {
         super(options);
 
-        this.highlightListener = new HighlightListener({ getSelection, store: this.store });
+        // Controls off: skip create; existing annotations still render.
+        this.canCreate = options.showAnnotationsControls !== false;
+        if (this.canCreate) {
+            this.highlightListener = new HighlightListener({
+                getSelection: this.getDocumentSelection,
+                store: this.store,
+            });
+        }
 
         this.addListener(Event.ANNOTATIONS_MODE_CHANGE, this.handleChangeMode);
     }
 
+    // Resolve .bp-doc at event time; it may not exist in the constructor.
+    getDocumentSelection = (): ReturnType<typeof getSelection> => {
+        const rootEl = this.annotatedEl ?? this.getAnnotatedElement();
+        return rootEl ? getSelection(rootEl) : null;
+    };
+
     destroy(): void {
         this.removeListener(Event.ANNOTATIONS_MODE_CHANGE, this.handleChangeMode);
 
@@ -123,10 +138,10 @@ export default class DocumentAnnotator extends BaseAnnotator {
 
             const textLayer = pageEl.querySelector('.textLayer') as HTMLElement;
 
-            if (textLayer) {
+            if (this.canCreate && textLayer) {
                 managers.add(
                     new HighlightCreatorManager({
-                        getSelection,
+                        getSelection: this.getDocumentSelection,
                         referenceEl: textLayer,
                         selectionChangeDelay: TEXT_LAYER_ENHANCEMENT,
                         store: this.store,
@@ -144,15 +159,17 @@ export default class DocumentAnnotator extends BaseAnnotator {
             );
             managers.add(new RegionManager({ location: pageNumber, referenceEl: pageReferenceEl, resinTags }));
 
-            const canvasLayerEl = pageEl.querySelector<HTMLElement>('.canvasWrapper');
+            if (this.canCreate) {
+                const canvasLayerEl = pageEl.querySelector<HTMLElement>('.canvasWrapper');
 
-            managers.add(
-                new RegionCreationManager({
-                    location: pageNumber,
-                    referenceEl: canvasLayerEl || pageReferenceEl,
-                    resinTags,
-                }),
-            );
+                managers.add(
+                    new RegionCreationManager({
+                        location: pageNumber,
+                        referenceEl: canvasLayerEl || pageReferenceEl,
+                        resinTags,
+                    }),
+                );
+            }
         }
 
         return managers;

package/src/document/docUtil.ts

@@ -29,13 +29,17 @@ export function getPageNumber(element: Element | null): number | undefined {
     return pageNumber ? parseInt(pageNumber, 10) : undefined;
 }
 
-export function getSelection(): Selection | null {
+export function getSelection(rootEl?: HTMLElement | null): Selection | null {
     const selection = window.getSelection();
 
     if (!selection || selection.isCollapsed || !selection.rangeCount || !selection.focusNode) {
         return null;
     }
 
+    if (rootEl && !rootEl.contains(selection.focusNode)) {
+        return null;
+    }
+
     // Firefox allows to select multiple ranges in the document by using Ctrl/Cmd+click
     // We only care about the last range
     let range = selection.getRangeAt(selection.rangeCount - 1);

package/src/popup/PopupLayer.tsx

@@ -140,7 +140,12 @@ const PopupLayer = (props: Props): JSX.Element | null => {
     if (showCreator && isThreadedAnnotation) {
         return (
             <div className="ba-PopupLayer-popup">
-                <PopupV2 onSubmit={handleSubmit} popupPortalEl={popupPortalEl} reference={reference} />
+                <PopupV2
+                    onCancel={handleCancel}
+                    onSubmit={handleSubmit}
+                    popupPortalEl={popupPortalEl}
+                    reference={reference}
+                />
             </div>
         );
     }

package/src/region/RegionCreation.tsx

@@ -8,6 +8,7 @@ import { TARGET_TYPE } from '../constants';
 import { getVideoCurrentTimeInMilliseconds } from '../utils/useVideoTiming';
 
 type Props = {
+    hasStagedItem?: boolean;
     isCreating: boolean;
     location: number;
     resetCreator: () => void;
@@ -33,10 +34,10 @@ export default class RegionCreation extends React.PureComponent<Props, State> {
     state: State = {};
 
     handleAbort = (): void => {
-        const { resetCreator, staged } = this.props;
+        const { hasStagedItem, resetCreator, staged } = this.props;
 
-        // Click-away (a click too small to start a new region) must not discard an in-progress comment/annotation
-        if (staged) {
+        // Click-away must not discard any in-progress comment/annotation
+        if (staged || hasStagedItem) {
             return;
         }
 

package/src/region/RegionCreationContainer.tsx

@@ -4,6 +4,7 @@ import {
     CreatorItemRegion,
     CreatorStatus,
     getAnnotationMode,
+    getCreatorStaged,
     getCreatorStagedForLocation,
     getCreatorStatus,
     getRotation,
@@ -18,6 +19,7 @@ import RegionCreation from './RegionCreation';
 import withProviders from '../common/withProviders';
 
 export type Props = {
+    hasStagedItem: boolean;
     isCreating: boolean;
     rotation: number;
     staged: CreatorItemRegion | null;
@@ -27,6 +29,7 @@ export const mapStateToProps = (state: AppState, { location }: { location: numbe
     const staged = getCreatorStagedForLocation(state, location);
 
     return {
+        hasStagedItem: Boolean(getCreatorStaged(state)),
         isCreating: getAnnotationMode(state) === Mode.REGION && getCreatorStatus(state) !== CreatorStatus.pending,
         rotation: getRotation(state),
         staged: isCreatorStagedRegion(staged) ? staged : null,

package/src/store/annotations/actions.ts

@@ -3,7 +3,7 @@ import { Annotation, NewAnnotation, Reply } from '../../@types';
 import { APICollection } from '../../api';
 import { AppThunkAPI } from '../types';
 import { getAnnotation } from './selectors';
-import { getFileId, getFileVersionId, getPermissions, isFeatureEnabled } from '../options';
+import { getFileId, getFileVersionId, getIsRichTextEnabled, getPermissions, isFeatureEnabled } from '../options';
 
 export const createAnnotationAction = createAsyncThunk<Annotation, NewAnnotation, AppThunkAPI>(
     'CREATE_ANNOTATION',
@@ -14,13 +14,22 @@ export const createAnnotationAction = createAsyncThunk<Annotation, NewAnnotation
         const fileId = getFileId(state);
         const fileVersionId = getFileVersionId(state);
         const permissions = getPermissions(state);
+        const shouldEnableRichText = getIsRichTextEnabled(state);
 
         signal.addEventListener('abort', () => {
             client.destroy();
         });
 
         return new Promise<Annotation>((resolve, reject) => {
-            client.createAnnotation(fileId, fileVersionId, newAnnotation, permissions, resolve, reject);
+            client.createAnnotation(
+                fileId,
+                fileVersionId,
+                newAnnotation,
+                permissions,
+                resolve,
+                reject,
+                shouldEnableRichText,
+            );
         });
     },
 );
@@ -40,11 +49,22 @@ export const fetchAnnotationsAction = createAsyncThunk<APICollection<Annotation>
             client.destroy();
         });
 
-        const shouldFetchReplies = isFeatureEnabled({ options: getState().options }, 'isThreadedAnnotation');
+        const shouldFetchReplies = isFeatureEnabled(state, 'isThreadedAnnotation');
+        const shouldEnableRichText = getIsRichTextEnabled(state);
 
         // Wrap the client request in a promise to allow it to be returned and cancelled
         return new Promise<APICollection<Annotation>>((resolve, reject) => {
-            client.getAnnotations(fileId, fileVersionId, permissions, resolve, reject, 1000, false, shouldFetchReplies);
+            client.getAnnotations(
+                fileId,
+                fileVersionId,
+                permissions,
+                resolve,
+                reject,
+                1000,
+                false,
+                shouldFetchReplies,
+                shouldEnableRichText,
+            );
         });
     },
 );
@@ -60,13 +80,14 @@ export const createReplyAction = createAsyncThunk<
     const filePermissions = getPermissions(state);
     const annotation = getAnnotation(state, annotationId);
     const permissions = { ...filePermissions, ...annotation?.permissions };
+    const shouldEnableRichText = getIsRichTextEnabled(state);
 
     signal.addEventListener('abort', () => {
         client.destroy();
     });
 
     const reply = await new Promise<Reply>((resolve, reject) => {
-        client.createAnnotationReply(fileId, annotationId, permissions, message, resolve, reject);
+        client.createAnnotationReply(fileId, annotationId, permissions, message, resolve, reject, shouldEnableRichText);
     });
 
     return { annotationId, reply };
@@ -105,13 +126,14 @@ export const updateAnnotationAction = createAsyncThunk<
     const filePermissions = getPermissions(state);
     const existingAnnotation = getAnnotation(state, annotationId);
     const permissions = { ...filePermissions, ...existingAnnotation?.permissions };
+    const shouldEnableRichText = getIsRichTextEnabled(state);
 
     signal.addEventListener('abort', () => {
         client.destroy();
     });
 
     return new Promise<Annotation>((resolve, reject) => {
-        client.updateAnnotation(fileId, annotationId, permissions, payload, resolve, reject);
+        client.updateAnnotation(fileId, annotationId, permissions, payload, resolve, reject, shouldEnableRichText);
     });
 });
 
@@ -125,6 +147,7 @@ export const updateReplyAction = createAsyncThunk<
     const fileId = getFileId(state);
     const annotation = getAnnotation(state, annotationId);
     const reply = annotation?.replies?.find(r => r.id === replyId);
+    const shouldEnableRichText = getIsRichTextEnabled(state);
 
     if (!reply) {
         throw new Error(`updateReplyAction: reply ${replyId} not found on annotation ${annotationId}`);
@@ -141,6 +164,7 @@ export const updateReplyAction = createAsyncThunk<
             fileId,
             message: payload.message,
             permissions: reply.permissions ?? {},
+            shouldEnableRichText,
             status: payload.status,
             successCallback: resolve,
         });
@@ -194,4 +218,6 @@ export const applySidebarReplyUpdateAction = createAction<SidebarReplyMutationPa
 
 export const removeAnnotationAction = createAction<string>('REMOVE_ANNOTATION');
 export const setActiveAnnotationIdAction = createAction<string | null>('SET_ACTIVE_ANNOTATION_ID');
+// Clears activeId without emitting ACTIVE_CHANGE.
+export const clearActiveAnnotationIdAction = createAction('CLEAR_ACTIVE_ANNOTATION_ID');
 export const setIsInitialized = createAction('SET_IS_INITIALIZED');

package/src/store/annotations/reducer.ts

@@ -6,6 +6,7 @@ import {
     applySidebarReplyCreateAction,
     applySidebarReplyDeleteAction,
     applySidebarReplyUpdateAction,
+    clearActiveAnnotationIdAction,
     createAnnotationAction,
     createReplyAction,
     deleteAnnotationAction,
@@ -22,6 +23,7 @@ import { setViewModeAction } from '../options/actions';
 const activeAnnotationId = createReducer<AnnotationsState['activeId']>(null, builder =>
     builder
         /* Preview will set the active ID with a an event which will trigger the url change */
+        .addCase(clearActiveAnnotationIdAction, () => null)
         .addCase(createAnnotationAction.fulfilled, () => null)
         .addCase(deleteAnnotationAction.fulfilled, (state, { payload: id }) => (state === id ? null : state))
         .addCase(removeAnnotationAction, (state, { payload: id }) => (state === id ? null : state))

package/src/store/options/selectors.ts

@@ -18,3 +18,8 @@ export const getScale = (state: State): number => state.options.scale;
 export const getToken = (state: State): Token => state.options.token;
 export const isFeatureEnabled = (state: State, featurename: string): boolean =>
     getProp(getFeatures(state), featurename, false);
+
+// Rich text is only rendered and authored in the threaded popup (PopupV2). The legacy popup editor
+// is plain text, so the flag only applies when threaded annotations are on.
+export const getIsRichTextEnabled = (state: State): boolean =>
+    isFeatureEnabled(state, 'isThreadedAnnotation') && isFeatureEnabled(state, 'isRichTextEnabled');