fix: Hide drag handles, empty captions, and selected outlines when printing (#6550)

shared/editor/components/Caption.tsx

@@ -79,6 +79,10 @@ const Content = styled.p<{ $isSelected: boolean }>`
     color: ${s("placeholder")};
     content: attr(data-caption);
     pointer-events: none;
+
+    @media print {
+      display: none;
+    }
   }
 `;
 

shared/editor/components/ResizeHandle.tsx

@@ -26,6 +26,10 @@ export const ResizeLeft = styled.div<{ $dragging: boolean }>`
     box-shadow: 0 0 0 1px ${s("textSecondary")};
     opacity: 0.75;
   }
+
+  @media print {
+    display: none;
+  }
 `;
 
 export const ResizeRight = styled(ResizeLeft)`

shared/editor/components/Styles.ts

@@ -544,6 +544,10 @@ iframe.embed {
 .ProseMirror-selectednode {
   outline: 2px solid
     ${props.readOnly ? "transparent" : props.theme.selected};
+
+  @media print {
+    outline: none;
+  }
 }
 
 /* Make sure li selections wrap around markers */