feat: print support with export menu integration and keyboard shortcut (#420)

Yecats · Copilot · backnotprop · web-flow · commit a0a6edd323af · 2026-03-29T11:04:32.000-07:00
* feat: add print stylesheet for white paper output - Create packages/ui/styles/print.css with @media print rules - White background and black text for paper output - Monochrome code blocks for readability on white paper - Hide UI chrome (annotations, toolbars, sidebars) during print - Proper typography for headers, code, tables, lists, blockquotes - Page break rules to avoid orphaned content - Support for diagrams (Mermaid, Graphviz) in print - Import print.css in packages/ui/theme.css Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> * feat: add Print button to toolbar - Add Print button next to Export button in plan editor toolbar - Triggers window.print() for native browser print dialog - Shows printer icon + 'Print' label (icon-only on mobile) - Tooltip: 'Print plan (Ctrl+P)' - Uses muted button styling consistent with other toolbar buttons Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> * fix: rewrite print.css selectors to match real DOM structure Code review found the original selectors used class names that don't exist in the actual component tree. Fixed: - Target header.sticky / header.h-12 (not generic 'header') - Target aside elements directly (SidebarContainer + AnnotationPanel) - Target .annotation-toolbar (portalled floating toolbar) - Target .fixed overlays (modals, export dialog) - Target article element (Viewer renders <article>, not <main>) - Target .bg-grid for background pattern removal - Flatten .h-screen height for print flow - Simplified hljs monochrome rule to [class*='hljs'] Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> * fix: print stylesheet — hide all toolbar UI, fix code block colors Issues fixed from user testing: - Header toolbar (Export/Print/Settings) now hidden via 'header' selector - AnnotationToolstrip (Select/Markup) hidden via '.flex-wrap' - Action buttons (Images/Comment/Copy) hidden via '.float-right' - Code block copy buttons hidden via '.group > button.absolute' - Fenced code blocks: override github-dark.css hljs theme to monochrome with light background (#f5f5f5) and dark text (#1a1a1a) - Inline code: solid light gray background with visible border - All text forced to solid black (override theme muted/foreground vars) - hljs span elements explicitly overridden for print Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> * fix: aggressive code block print overrides for dark theme - Override CSS custom properties (--muted, --foreground, etc.) in print - Use both background AND background-color on pre/code elements - Target pre[class], code[class], code.hljs with higher specificity - Explicitly list every hljs- class for monochrome override - Ensures github-dark.css hljs theme is fully overridden in print Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> * fix: use JS beforeprint/afterprint class for code block print styling Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> * fix: add visibilitychange fallback for Firefox print cleanup Firefox may not fire afterprint when print preview is closed without printing, leaving the .plannotator-print class stuck on <html>. This adds a visibilitychange listener that removes the class when the user returns to the page, plus cleanup on unmount. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> * refactor: extract usePrintMode hook, replace brittle CSS selectors with data attributes - Extract print event listeners from App.tsx into packages/ui/hooks/usePrintMode.ts - Add data-print-region attributes to layout elements (root, content, document, article) - Add data-print-hide attribute to Viewer action buttons - Replace .h-screen, .flex-1.flex.overflow-hidden, .bg-card, .bg-grid, .float-right, .flex-wrap selectors with stable data-attribute and semantic element selectors - Follows existing hook patterns (useIsMobile, useDismissOnOutsideAndEscape, etc.) Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> * fix: hide annotation toolstrip and repo badges in print output Added data-print-hide to the AnnotationToolstrip wrapper and the repo/branch badges div inside the article. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> * fix: collapse top whitespace gap in print output Zero out article padding, add margin/padding reset to data-print-hide elements, and collapse first h1 top margin for a tight print layout. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> * feat: move print button into export menu and add Ctrl/Cmd+P shortcut * chore: remove accidentally introduced annotate command files Remove apps/hook/commands/annotate.md and apps/opencode-plugin/commands/annotate.md that were unintentionally added in the print-styling PR. For provenance purposes, this commit was AI assisted. --------- Co-authored-by: Yecats <Yecats@users.noreply.github.com> Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> Co-authored-by: Michael Ramos <mdramos8@gmail.com>
diff --git a/packages/editor/App.tsx b/packages/editor/App.tsx
@@ -30,6 +30,8 @@ import { getUIPreferences, type UIPreferences, type PlanWidth } from '@plannotat
 import { getEditorMode, saveEditorMode } from '@plannotator/ui/utils/editorMode';
 import { getInputMethod, saveInputMethod } from '@plannotator/ui/utils/inputMethod';
 import { useInputMethodSwitch } from '@plannotator/ui/hooks/useInputMethodSwitch';
+import { usePrintMode } from '@plannotator/ui/hooks/usePrintMode';
+import { modKey } from '@plannotator/ui/utils/platform';
 import { useResizablePanel } from '@plannotator/ui/hooks/useResizablePanel';
 import { ResizeHandle } from '@plannotator/ui/components/ResizeHandle';
 import { MobileMenu } from '@plannotator/ui/components/MobileMenu';
@@ -124,6 +126,8 @@ const App: React.FC = () => {
   const viewerRef = useRef<ViewerHandle>(null);
   const containerRef = useRef<HTMLElement>(null);
 
+  usePrintMode();
+
   // Resizable panels
   const panelResize = useResizablePanel({ storageKey: 'plannotator-panel-width' });
   const tocResize = useResizablePanel({
@@ -995,6 +999,30 @@ const App: React.FC = () => {
     submitted, isApiMode, markdown, annotationsOutput,
   ]);
 
+  // Cmd/Ctrl+P keyboard shortcut — print plan
+  useEffect(() => {
+    const handlePrintShortcut = (e: KeyboardEvent) => {
+      if (e.key !== 'p' || !(e.metaKey || e.ctrlKey)) return;
+
+      const tag = (e.target as HTMLElement)?.tagName;
+      if (tag === 'INPUT' || tag === 'TEXTAREA') return;
+
+      if (showExport || showFeedbackPrompt || showClaudeCodeWarning ||
+          showAgentWarning || showPermissionModeSetup || pendingPasteImage) return;
+
+      if (submitted) return;
+
+      e.preventDefault();
+      window.print();
+    };
+
+    window.addEventListener('keydown', handlePrintShortcut);
+    return () => window.removeEventListener('keydown', handlePrintShortcut);
+  }, [
+    showExport, showFeedbackPrompt, showClaudeCodeWarning, showAgentWarning,
+    showPermissionModeSetup, pendingPasteImage, submitted,
+  ]);
+
   // Close export dropdown on click outside
   useEffect(() => {
     if (!showExportDropdown) return;
@@ -1018,7 +1046,7 @@ const App: React.FC = () => {
 
   return (
     <ThemeProvider defaultTheme="dark">
-      <div className="h-screen flex flex-col bg-background overflow-hidden">
+      <div data-print-region="root" className="h-screen flex flex-col bg-background overflow-hidden">
         {/* Minimal Header */}
         <header className="h-12 flex items-center justify-between px-2 md:px-4 border-b border-border/50 bg-card/50 backdrop-blur-xl sticky top-0 z-[50]">
           <div className="flex items-center gap-2 md:gap-3">
@@ -1213,6 +1241,17 @@ const App: React.FC = () => {
                       </svg>
                       Download Annotations
                     </button>
+                    <button
+                      onClick={() => { setShowExportDropdown(false); window.print(); }}
+                      className="w-full text-left px-3 py-1.5 text-xs hover:bg-muted transition-colors flex items-center gap-2"
+                    >
+                      <svg className="w-3.5 h-3.5 text-muted-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                        <path strokeLinecap="round" strokeLinejoin="round" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z" />
+                      </svg>
+                      Print Plan
+                      <span className="ml-auto text-[10px] text-muted-foreground/60">{modKey}+P</span>
+                    </button>
+                    <div className="my-1 border-t border-border" />
                     {isApiMode && isObsidianConfigured() && (
                       <button
                         onClick={() => handleQuickSaveToNotes('obsidian')}
@@ -1292,6 +1331,7 @@ const App: React.FC = () => {
                 setTimeout(() => setNoteSaveToast(null), 3000);
               }}
               onOpenImport={() => setShowImport(true)}
+              onPrint={() => window.print()}
               sharingEnabled={sharingEnabled}
             />
           </div>
@@ -1311,7 +1351,7 @@ const App: React.FC = () => {
         )}
 
         {/* Main Content */}
-        <div className={`flex-1 flex overflow-hidden relative z-0 ${isResizing ? 'select-none' : ''}`}>
+        <div data-print-region="content" className={`flex-1 flex overflow-hidden relative z-0 ${isResizing ? 'select-none' : ''}`}>
           {/* Tater sprites — inside content wrapper so z-0 stacking context applies */}
           {taterMode && <TaterSpriteRunning />}
           {/* Left Sidebar: collapsed tab flags (when sidebar is closed) */}
@@ -1374,7 +1414,7 @@ const App: React.FC = () => {
           )}
 
           {/* Document Area */}
-          <main ref={containerRef} className="flex-1 min-w-0 overflow-y-auto bg-grid">
+          <main data-print-region="document" ref={containerRef} className="flex-1 min-w-0 overflow-y-auto bg-grid">
             <ConfirmDialog
               isOpen={!!draftBanner}
               onClose={dismissDraft}
@@ -1388,7 +1428,7 @@ const App: React.FC = () => {
             <div className="min-h-full flex flex-col items-center px-2 py-3 md:px-10 md:py-8 xl:px-16 relative z-10">
               {/* Annotation Toolstrip (hidden during plan diff and archive mode) */}
               {!isPlanDiffActive && !archive.archiveMode && (
-                <div className="w-full mb-3 md:mb-4 flex items-center justify-start" style={{ maxWidth: planMaxWidth }}>
+                <div data-print-hide className="w-full mb-3 md:mb-4 flex items-center justify-start" style={{ maxWidth: planMaxWidth }}>
                   <AnnotationToolstrip
                     inputMethod={inputMethod}
                     onInputMethodChange={handleInputMethodChange}
diff --git a/packages/ui/components/KeyboardShortcuts.tsx b/packages/ui/components/KeyboardShortcuts.tsx
@@ -76,6 +76,7 @@ const planShortcuts: ShortcutSection[] = [
     shortcuts: [
       { keys: [modKey, enter], desc: 'Submit / Approve' },
       { keys: [modKey, 'S'], desc: 'Save to notes app' },
+      { keys: [modKey, 'P'], desc: 'Print plan' },
       { keys: ['Esc'], desc: 'Close dialog' },
     ],
   },
diff --git a/packages/ui/components/MobileMenu.tsx b/packages/ui/components/MobileMenu.tsx
@@ -10,6 +10,7 @@ interface MobileMenuProps {
   onDownloadAnnotations: () => void;
   onCopyShareLink: () => void;
   onOpenImport: () => void;
+  onPrint: () => void;
   shareUrl?: string;
   sharingEnabled: boolean;
   className?: string;
@@ -24,6 +25,7 @@ export const MobileMenu: React.FC<MobileMenuProps> = ({
   onDownloadAnnotations,
   onCopyShareLink,
   onOpenImport,
+  onPrint,
   sharingEnabled,
   className,
 }) => {
@@ -120,6 +122,13 @@ export const MobileMenu: React.FC<MobileMenuProps> = ({
             label="Download Annotations"
           />
 
+          {/* Print */}
+          <MenuItem
+            onClick={() => handleAction(onPrint)}
+            icon={<PrintIcon />}
+            label="Print Plan"
+          />
+
           {/* Share link */}
           {sharingEnabled && (
             <MenuItem
@@ -203,3 +212,9 @@ const ImportIcon = () => (
     <path strokeLinecap="round" strokeLinejoin="round" d="M15 3h4a2 2 0 012 2v14a2 2 0 01-2 2h-4M10 17l5-5-5-5M15 12H3" />
   </svg>
 );
+
+const PrintIcon = () => (
+  <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z" />
+  </svg>
+);
diff --git a/packages/ui/components/Viewer.tsx b/packages/ui/components/Viewer.tsx
@@ -433,14 +433,15 @@ export const Viewer = forwardRef<ViewerHandle, ViewerProps>(({
       {taterMode && <TaterSpriteSitting />}
       <article
         ref={containerRef}
+        data-print-region="article"
         className={`w-full bg-card rounded-xl shadow-xl p-5 md:p-8 lg:p-10 xl:p-12 relative ${
           linkedDocInfo ? 'border border-primary/40' : 'border border-border/50'
         } ${inputMethod === 'pinpoint' ? 'cursor-crosshair' : ''}`}
         style={{ WebkitTouchCallout: 'none' } as React.CSSProperties}
       >
         {/* Repo info + plan diff badge + demo badge + linked doc badge + archive badge - top left */}
         {(repoInfo || hasPreviousVersion || showDemoBadge || linkedDocInfo || archiveInfo) && (
-          <div className="absolute top-3 left-3 md:top-4 md:left-5 flex flex-col items-start gap-1 text-[9px] text-muted-foreground/50 font-mono">
+          <div data-print-hide className="absolute top-3 left-3 md:top-4 md:left-5 flex flex-col items-start gap-1 text-[9px] text-muted-foreground/50 font-mono">
             {repoInfo && !linkedDocInfo && (
               <div className="flex items-center gap-1.5">
                 <span className="px-1.5 py-0.5 bg-muted/50 rounded truncate max-w-[140px]" title={repoInfo.display}>
@@ -518,7 +519,7 @@ export const Viewer = forwardRef<ViewerHandle, ViewerProps>(({
         {stickyActions && <div ref={stickySentinelRef} className="h-0 w-0 float-right" aria-hidden="true" />}
 
         {/* Header buttons - top right */}
-        <div className={`${stickyActions ? 'sticky top-3' : ''} z-30 float-right flex items-start gap-1 md:gap-2 rounded-lg p-1 md:p-2 transition-colors duration-150 ${isStuck ? 'bg-card/95 backdrop-blur-sm shadow-sm' : ''} -mr-3 mt-6 md:-mr-5 md:-mt-5 lg:-mr-7 lg:-mt-7 xl:-mr-9 xl:-mt-9`}>
+        <div data-print-hide className={`${stickyActions ? 'sticky top-3' : ''} z-30 float-right flex items-start gap-1 md:gap-2 rounded-lg p-1 md:p-2 transition-colors duration-150 ${isStuck ? 'bg-card/95 backdrop-blur-sm shadow-sm' : ''} -mr-3 mt-6 md:-mr-5 md:-mt-5 lg:-mr-7 lg:-mt-7 xl:-mr-9 xl:-mt-9`}>
           {/* Attachments button */}
           {onAddGlobalAttachment && onRemoveGlobalAttachment && (
             <AttachmentsButton
diff --git a/packages/ui/hooks/usePrintMode.ts b/packages/ui/hooks/usePrintMode.ts
@@ -0,0 +1,27 @@
+import { useEffect } from 'react';
+
+/**
+ * Manages print mode by toggling 'plannotator-print' class on <html>.
+ * Includes visibilitychange fallback for Firefox, which may not fire
+ * afterprint when print preview is closed without printing.
+ */
+export function usePrintMode() {
+  useEffect(() => {
+    const onBeforePrint = () => document.documentElement.classList.add('plannotator-print');
+    const onAfterPrint = () => document.documentElement.classList.remove('plannotator-print');
+    const onVisibilityChange = () => {
+      if (!document.hidden && document.documentElement.classList.contains('plannotator-print')) {
+        document.documentElement.classList.remove('plannotator-print');
+      }
+    };
+    window.addEventListener('beforeprint', onBeforePrint);
+    window.addEventListener('afterprint', onAfterPrint);
+    document.addEventListener('visibilitychange', onVisibilityChange);
+    return () => {
+      window.removeEventListener('beforeprint', onBeforePrint);
+      window.removeEventListener('afterprint', onAfterPrint);
+      document.removeEventListener('visibilitychange', onVisibilityChange);
+      document.documentElement.classList.remove('plannotator-print');
+    };
+  }, []);
+}
diff --git a/packages/ui/print.css b/packages/ui/print.css
diff --git a/packages/ui/theme.css b/packages/ui/theme.css
