fix: Comment should not appear in selection toolbar with view-only permissions. closes #6011

app/editor/components/SelectionToolbar.tsx

@@ -33,6 +33,7 @@ type Props = {
   isTemplate: boolean;
   readOnly?: boolean;
   canComment?: boolean;
+  canUpdate?: boolean;
   onOpen: () => void;
   onClose: () => void;
   onSearchLink?: (term: string) => Promise<SearchResult[]>;
@@ -197,12 +198,12 @@ export default function SelectionToolbar(props: Props) {
     );
   };
 
-  const { onCreateLink, isTemplate, rtl, canComment, ...rest } = props;
+  const { onCreateLink, isTemplate, rtl, canComment, canUpdate, ...rest } =
+    props;
   const { state } = view;
   const { selection } = state;
   const isDividerSelection = isNodeActive(state.schema.nodes.hr)(state);
 
-  // no toolbar in read-only without commenting or when dragging
   if ((readOnly && !canComment) || isDragging) {
     return null;
   }
@@ -231,7 +232,7 @@ export default function SelectionToolbar(props: Props) {
   } else if (isDividerSelection) {
     items = getDividerMenuItems(state, dictionary);
   } else if (readOnly) {
-    items = getReadOnlyMenuItems(state, dictionary);
+    items = getReadOnlyMenuItems(state, !!canUpdate, dictionary);
   } else {
     items = getFormattingMenuItems(state, isTemplate, isMobile, dictionary);
   }
@@ -244,6 +245,9 @@ export default function SelectionToolbar(props: Props) {
     if (item.name && !commands[item.name]) {
       return false;
     }
+    if (!item.visible) {
+      return false;
+    }
     return true;
   });
 

app/editor/index.tsx

@@ -742,6 +742,7 @@ export class Editor extends React.PureComponent<
               <SelectionToolbar
                 rtl={isRTL}
                 readOnly={readOnly}
+                canUpdate={this.props.canUpdate}
                 canComment={this.props.canComment}
                 isTemplate={this.props.template === true}
                 onOpen={this.handleOpenSelectionToolbar}

app/editor/menus/readOnly.tsx

@@ -7,12 +7,14 @@ import { Dictionary } from "~/hooks/useDictionary";
 
 export default function readOnlyMenuItems(
   state: EditorState,
+  canUpdate: boolean,
   dictionary: Dictionary
 ): MenuItem[] {
   const { schema } = state;
 
   return [
     {
+      visible: canUpdate,
       name: "comment",
       tooltip: dictionary.comment,
       label: dictionary.comment,