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

package/i18n/ja-JP.js

@@ -1,2 +1,25 @@
 // THIS IS A GENERATED FILE. DO NOT EDIT MANUALLY OR YOUR CHANGES WILL BE OVERWRITTEN
-export default {};
+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": "コメントは1つのページに制限されています",
+    "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.1",
+    "version": "5.3.1-beta.2",
     "description": "Box Annotations",
     "author": "Box (https://www.box.com/)",
     "license": "SEE LICENSE IN LICENSE",
@@ -40,7 +40,7 @@
         "@box/item-icon": "^3.2.0",
         "@box/languages": "^1.1.0",
         "@box/readable-time": "^2.1.32",
-        "@box/threaded-annotations": "^4.11.14",
+        "@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",
@@ -71,7 +71,7 @@
         "babel-loader": "^9.2.1",
         "babel-plugin-istanbul": "^6.0.0",
         "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,7 +142,7 @@
         "@box/combobox-with-api": "^1.42.22",
         "@box/item-icon": "^3.2.0",
         "@box/readable-time": "^2.1.32",
-        "@box/threaded-annotations": "^4.11.14",
+        "@box/threaded-annotations": "^4.14.0",
         "@box/types": "^2.1.8",
         "@box/user-selector": "^2.1.35",
         "axios": "^0.33.0"

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/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/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,
         });

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');