editor: allow download & preview of attachments in readonly mode (#2621)

Signed-off-by: Ramiro Pruis<ramapruis@gmail.com>

packages/editor/src/extensions/attachment/attachment.ts

@@ -112,7 +112,8 @@ export const AttachmentNode = Node.create<AttachmentOptions>({
     return createSelectionBasedNodeView(AttachmentComponent, {
       shouldUpdate: ({ attrs: prev }, { attrs: next }) => {
         return prev.progress !== next.progress;
-      }
+      },
+      forceEnableSelection: true
     });
   },
 

packages/editor/src/extensions/attachment/component.tsx

@@ -32,7 +32,7 @@ export function AttachmentComponent(
   const { editor, node, selected } = props;
   const { filename, size, progress } = node.attrs;
   const elementRef = useRef<HTMLSpanElement>();
-
+  
   return (
     <>
       <Box
@@ -87,11 +87,15 @@ export function AttachmentComponent(
           {selected && (
             <ToolbarGroup
               editor={editor}
-              tools={[
+              tools={ editor.isEditable ? [
                 "removeAttachment",
                 "downloadAttachment",
                 "previewAttachment"
-              ]}
+              ] : [
+                "downloadAttachment",
+                "previewAttachment"
+              ]
+            }
               sx={{
                 boxShadow: "menu",
                 borderRadius: "default",

packages/editor/src/extensions/react/selection-based-react-node-view.tsx

@@ -90,9 +90,7 @@ export class SelectionBasedNodeView<
     forwardRef?: ForwardRef
   ): React.ReactElement<unknown> | null {
     if (!this.options.component) return null;
-    const isSelected =
+    const isSelected =(this.options.forceEnableSelection || this.editor.isEditable) && this.isSelectedNode(this.editor.view.state.selection);
-      this.editor.isEditable &&
-      this.isSelectedNode(this.editor.view.state.selection);
 
     return (
       <ThemeProvider>

packages/editor/src/extensions/react/types.ts

@@ -62,4 +62,5 @@ export type ReactNodeViewOptions<P> = {
   shouldUpdate?: ShouldUpdate;
   contentDOMFactory?: (() => ContentDOM) | boolean;
   wrapperFactory?: () => HTMLElement;
+  forceEnableSelection?: boolean;
 };