mirror of
https://github.com/makeplane/plane.git
synced 2026-01-31 11:06:30 -06:00
fix: pdf export (#8564)
* feat: pdf export * fix: tests * fix: tests --------- Co-authored-by: sriram veeraghanta <veeraghanta.sriram@gmail.com>
This commit is contained in:
M. Palanikannan
@@ -15,6 +15,9 @@
|
||||
"build": "tsc --noEmit && tsdown",
|
||||
"dev": "tsdown --watch --onSuccess \"node --env-file=.env .\"",
|
||||
"start": "node --env-file=.env .",
|
||||
"test": "vitest run",
|
||||
"test:watch": "vitest",
|
||||
"test:coverage": "vitest run --coverage",
|
||||
"check:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --max-warnings=160",
|
||||
"check:types": "tsc --noEmit",
|
||||
"check:format": "prettier . --cache --check",
|
||||
@@ -25,6 +28,9 @@
|
||||
"author": "Plane Software Inc.",
|
||||
"dependencies": {
|
||||
"@dotenvx/dotenvx": "catalog:",
|
||||
"@effect/platform": "^0.94.0",
|
||||
"@effect/platform-node": "^0.104.0",
|
||||
"@fontsource/inter": "5.2.8",
|
||||
"@hocuspocus/extension-database": "2.15.2",
|
||||
"@hocuspocus/extension-logger": "2.15.2",
|
||||
"@hocuspocus/extension-redis": "2.15.2",
|
||||
@@ -34,6 +40,8 @@
|
||||
"@plane/editor": "workspace:*",
|
||||
"@plane/logger": "workspace:*",
|
||||
"@plane/types": "workspace:*",
|
||||
"@react-pdf/renderer": "^4.3.0",
|
||||
"@react-pdf/types": "^2.9.2",
|
||||
"@sentry/node": "catalog:",
|
||||
"@sentry/profiling-node": "catalog:",
|
||||
"@tiptap/core": "catalog:",
|
||||
@@ -41,10 +49,13 @@
|
||||
"axios": "catalog:",
|
||||
"compression": "1.8.1",
|
||||
"cors": "^2.8.5",
|
||||
"effect": "^3.16.3",
|
||||
"express": "catalog:",
|
||||
"express-ws": "^5.0.2",
|
||||
"helmet": "^7.1.0",
|
||||
"ioredis": "5.7.0",
|
||||
"react": "catalog:",
|
||||
"sharp": "^0.34.3",
|
||||
"uuid": "catalog:",
|
||||
"ws": "^8.18.3",
|
||||
"y-prosemirror": "^1.3.7",
|
||||
@@ -59,8 +70,13 @@
|
||||
"@types/express": "4.17.23",
|
||||
"@types/express-ws": "^3.0.5",
|
||||
"@types/node": "catalog:",
|
||||
"@types/pdf-parse": "^1.1.5",
|
||||
"@types/react": "catalog:",
|
||||
"@types/ws": "^8.18.1",
|
||||
"@vitest/coverage-v8": "^4.0.8",
|
||||
"pdf-parse": "^2.4.5",
|
||||
"tsdown": "catalog:",
|
||||
"typescript": "catalog:"
|
||||
"typescript": "catalog:",
|
||||
"vitest": "^4.0.8"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { CollaborationController } from "./collaboration.controller";
|
||||
import { DocumentController } from "./document.controller";
|
||||
import { HealthController } from "./health.controller";
|
||||
import { PdfExportController } from "./pdf-export.controller";
|
||||
|
||||
export const CONTROLLERS = [CollaborationController, DocumentController, HealthController];
|
||||
export const CONTROLLERS = [CollaborationController, DocumentController, HealthController, PdfExportController];
|
||||
|
||||
136
apps/live/src/controllers/pdf-export.controller.ts
Normal file
136
apps/live/src/controllers/pdf-export.controller.ts
Normal file
@@ -0,0 +1,136 @@
|
||||
import type { Request, Response } from "express";
|
||||
import { Effect, Schema, Cause } from "effect";
|
||||
import { Controller, Post } from "@plane/decorators";
|
||||
import { logger } from "@plane/logger";
|
||||
import { AppError } from "@/lib/errors";
|
||||
import { PdfExportRequestBody, PdfValidationError, PdfAuthenticationError } from "@/schema/pdf-export";
|
||||
import { PdfExportService, exportToPdf } from "@/services/pdf-export";
|
||||
import type { PdfExportInput } from "@/services/pdf-export";
|
||||
|
||||
@Controller("/pdf-export")
|
||||
export class PdfExportController {
|
||||
/**
|
||||
* Parses and validates the request, returning a typed input object
|
||||
*/
|
||||
private parseRequest(
|
||||
req: Request,
|
||||
requestId: string
|
||||
): Effect.Effect<PdfExportInput, PdfValidationError | PdfAuthenticationError> {
|
||||
return Effect.gen(function* () {
|
||||
const cookie = req.headers.cookie || "";
|
||||
if (!cookie) {
|
||||
return yield* Effect.fail(
|
||||
new PdfAuthenticationError({
|
||||
message: "Authentication required",
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
const body = yield* Schema.decodeUnknown(PdfExportRequestBody)(req.body).pipe(
|
||||
Effect.mapError(
|
||||
(cause) =>
|
||||
new PdfValidationError({
|
||||
message: "Invalid request body",
|
||||
cause,
|
||||
})
|
||||
)
|
||||
);
|
||||
|
||||
return {
|
||||
pageId: body.pageId,
|
||||
workspaceSlug: body.workspaceSlug,
|
||||
projectId: body.projectId,
|
||||
title: body.title,
|
||||
author: body.author,
|
||||
subject: body.subject,
|
||||
pageSize: body.pageSize,
|
||||
pageOrientation: body.pageOrientation,
|
||||
fileName: body.fileName,
|
||||
noAssets: body.noAssets,
|
||||
cookie,
|
||||
requestId,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Maps domain errors to HTTP responses
|
||||
*/
|
||||
private mapErrorToHttpResponse(error: unknown): { status: number; error: string } {
|
||||
if (error && typeof error === "object" && "_tag" in error) {
|
||||
const tag = (error as { _tag: string })._tag;
|
||||
const message = (error as { message?: string }).message || "Unknown error";
|
||||
|
||||
switch (tag) {
|
||||
case "PdfValidationError":
|
||||
return { status: 400, error: message };
|
||||
case "PdfAuthenticationError":
|
||||
return { status: 401, error: message };
|
||||
case "PdfContentFetchError":
|
||||
return {
|
||||
status: message.includes("not found") ? 404 : 502,
|
||||
error: message,
|
||||
};
|
||||
case "PdfTimeoutError":
|
||||
return { status: 504, error: message };
|
||||
case "PdfGenerationError":
|
||||
return { status: 500, error: message };
|
||||
case "PdfMetadataFetchError":
|
||||
case "PdfImageProcessingError":
|
||||
return { status: 502, error: message };
|
||||
default:
|
||||
return { status: 500, error: message };
|
||||
}
|
||||
}
|
||||
return { status: 500, error: "Failed to generate PDF" };
|
||||
}
|
||||
|
||||
@Post("/")
|
||||
async exportToPdf(req: Request, res: Response) {
|
||||
const requestId = crypto.randomUUID();
|
||||
|
||||
const effect = Effect.gen(this, function* () {
|
||||
// Parse request
|
||||
const input = yield* this.parseRequest(req, requestId);
|
||||
|
||||
// Delegate to service
|
||||
return yield* exportToPdf(input);
|
||||
}).pipe(
|
||||
// Log errors before catching them
|
||||
Effect.tapError((error) => Effect.logError("PDF_EXPORT: Export failed", { requestId, error })),
|
||||
// Map all tagged errors to HTTP responses
|
||||
Effect.catchAll((error) => Effect.succeed(this.mapErrorToHttpResponse(error))),
|
||||
// Handle unexpected defects
|
||||
Effect.catchAllDefect((defect) => {
|
||||
const appError = new AppError(Cause.pretty(Cause.die(defect)), {
|
||||
context: { requestId, operation: "exportToPdf" },
|
||||
});
|
||||
logger.error("PDF_EXPORT: Unexpected failure", appError);
|
||||
return Effect.succeed({ status: 500, error: "Failed to generate PDF" });
|
||||
})
|
||||
);
|
||||
|
||||
const result = await Effect.runPromise(Effect.provide(effect, PdfExportService.Default));
|
||||
|
||||
// Check if result is an error response
|
||||
if ("error" in result && "status" in result) {
|
||||
return res.status(result.status).json({ message: result.error });
|
||||
}
|
||||
|
||||
// Success - send PDF
|
||||
const { pdfBuffer, outputFileName } = result;
|
||||
|
||||
// Sanitize filename for Content-Disposition header to prevent header injection
|
||||
const sanitizedFileName = outputFileName
|
||||
.replace(/["\\\r\n]/g, "") // Remove quotes, backslashes, and CRLF
|
||||
.replace(/[^\x20-\x7E]/g, "_"); // Replace non-ASCII with underscore
|
||||
|
||||
res.setHeader("Content-Type", "application/pdf");
|
||||
res.setHeader(
|
||||
"Content-Disposition",
|
||||
`attachment; filename="${sanitizedFileName}"; filename*=UTF-8''${encodeURIComponent(outputFileName)}`
|
||||
);
|
||||
res.setHeader("Content-Length", pdfBuffer.length);
|
||||
return res.send(pdfBuffer);
|
||||
}
|
||||
}
|
||||
225
apps/live/src/lib/pdf/colors.ts
Normal file
225
apps/live/src/lib/pdf/colors.ts
Normal file
@@ -0,0 +1,225 @@
|
||||
/**
|
||||
* PDF Export Color Constants
|
||||
*
|
||||
* These colors are mapped from the editor CSS variables and tailwind-config tokens
|
||||
* to ensure PDF exports match the editor's appearance.
|
||||
*
|
||||
* Source mappings:
|
||||
* - Editor colors: packages/editor/src/styles/variables.css
|
||||
* - Tailwind tokens: packages/tailwind-config/variables.css
|
||||
*/
|
||||
|
||||
// Editor text colors (from variables.css :root)
|
||||
export const EDITOR_TEXT_COLORS = {
|
||||
gray: "#5c5e63",
|
||||
peach: "#ff5b59",
|
||||
pink: "#f65385",
|
||||
orange: "#fd9038",
|
||||
green: "#0fc27b",
|
||||
"light-blue": "#17bee9",
|
||||
"dark-blue": "#266df0",
|
||||
purple: "#9162f9",
|
||||
} as const;
|
||||
|
||||
// Editor background colors - Light theme (from variables.css [data-theme*="light"])
|
||||
export const EDITOR_BACKGROUND_COLORS_LIGHT = {
|
||||
gray: "#d6d6d8",
|
||||
peach: "#ffd5d7",
|
||||
pink: "#fdd4e3",
|
||||
orange: "#ffe3cd",
|
||||
green: "#c3f0de",
|
||||
"light-blue": "#c5eff9",
|
||||
"dark-blue": "#c9dafb",
|
||||
purple: "#e3d8fd",
|
||||
} as const;
|
||||
|
||||
// Editor background colors - Dark theme (from variables.css [data-theme*="dark"])
|
||||
export const EDITOR_BACKGROUND_COLORS_DARK = {
|
||||
gray: "#404144",
|
||||
peach: "#593032",
|
||||
pink: "#562e3d",
|
||||
orange: "#583e2a",
|
||||
green: "#1d4a3b",
|
||||
"light-blue": "#1f495c",
|
||||
"dark-blue": "#223558",
|
||||
purple: "#3d325a",
|
||||
} as const;
|
||||
|
||||
// Use light theme colors by default for PDF exports
|
||||
export const EDITOR_BACKGROUND_COLORS = EDITOR_BACKGROUND_COLORS_LIGHT;
|
||||
|
||||
// Color key type
|
||||
export type EditorColorKey = keyof typeof EDITOR_TEXT_COLORS;
|
||||
|
||||
/**
|
||||
* Maps a color key to its text color hex value
|
||||
*/
|
||||
export const getTextColorHex = (colorKey: string): string | null => {
|
||||
if (colorKey in EDITOR_TEXT_COLORS) {
|
||||
return EDITOR_TEXT_COLORS[colorKey as EditorColorKey];
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
/**
|
||||
* Maps a color key to its background color hex value
|
||||
*/
|
||||
export const getBackgroundColorHex = (colorKey: string): string | null => {
|
||||
if (colorKey in EDITOR_BACKGROUND_COLORS) {
|
||||
return EDITOR_BACKGROUND_COLORS[colorKey as EditorColorKey];
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
/**
|
||||
* Checks if a value is a CSS variable reference (e.g., "var(--editor-colors-gray-text)")
|
||||
*/
|
||||
export const isCssVariable = (value: string): boolean => {
|
||||
return value.startsWith("var(");
|
||||
};
|
||||
|
||||
/**
|
||||
* Extracts the color key from a CSS variable reference
|
||||
* e.g., "var(--editor-colors-gray-text)" -> "gray"
|
||||
* e.g., "var(--editor-colors-light-blue-background)" -> "light-blue"
|
||||
*/
|
||||
export const extractColorKeyFromCssVariable = (cssVar: string): string | null => {
|
||||
// Match patterns like: var(--editor-colors-{color}-text) or var(--editor-colors-{color}-background)
|
||||
const match = cssVar.match(/var\(--editor-colors-([\w-]+)-(text|background)\)/);
|
||||
if (match) {
|
||||
return match[1];
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
/**
|
||||
* Resolves a color value to a hex color for PDF rendering
|
||||
* Handles both direct hex values and CSS variable references
|
||||
*/
|
||||
export const resolveColorForPdf = (value: string | null | undefined, type: "text" | "background"): string | null => {
|
||||
if (!value) return null;
|
||||
|
||||
// If it's already a hex color, return it
|
||||
if (value.startsWith("#")) {
|
||||
return value;
|
||||
}
|
||||
|
||||
// If it's a CSS variable, extract the key and get the hex value
|
||||
if (isCssVariable(value)) {
|
||||
const colorKey = extractColorKeyFromCssVariable(value);
|
||||
if (colorKey) {
|
||||
return type === "text" ? getTextColorHex(colorKey) : getBackgroundColorHex(colorKey);
|
||||
}
|
||||
}
|
||||
|
||||
// If it's just a color key (e.g., "gray", "peach"), get the hex value
|
||||
if (type === "text") {
|
||||
return getTextColorHex(value);
|
||||
}
|
||||
return getBackgroundColorHex(value);
|
||||
};
|
||||
|
||||
// Semantic colors from tailwind-config (light theme)
|
||||
// These are derived from the CSS variables in packages/tailwind-config/variables.css
|
||||
|
||||
// Neutral colors (light theme)
|
||||
export const NEUTRAL_COLORS = {
|
||||
white: "#ffffff",
|
||||
100: "#fafafa", // oklch(0.9848 0.0003 230.66) ≈ #fafafa
|
||||
200: "#f5f5f5", // oklch(0.9696 0.0007 230.67) ≈ #f5f5f5
|
||||
300: "#f0f0f0", // oklch(0.9543 0.001 230.67) ≈ #f0f0f0
|
||||
400: "#ebebeb", // oklch(0.9389 0.0014 230.68) ≈ #ebebeb
|
||||
500: "#e5e5e5", // oklch(0.9235 0.001733 230.6853) ≈ #e5e5e5
|
||||
600: "#d9d9d9", // oklch(0.8925 0.0024 230.7) ≈ #d9d9d9
|
||||
700: "#cccccc", // oklch(0.8612 0.0032 230.71) ≈ #cccccc
|
||||
800: "#8c8c8c", // oklch(0.6668 0.0079 230.82) ≈ #8c8c8c
|
||||
900: "#7a7a7a", // oklch(0.6161 0.009153 230.867) ≈ #7a7a7a
|
||||
1000: "#636363", // oklch(0.5288 0.0083 230.88) ≈ #636363
|
||||
1100: "#4d4d4d", // oklch(0.4377 0.0066 230.87) ≈ #4d4d4d
|
||||
1200: "#1f1f1f", // oklch(0.2378 0.0029 230.83) ≈ #1f1f1f
|
||||
black: "#0f0f0f", // oklch(0.1472 0.0034 230.83) ≈ #0f0f0f
|
||||
} as const;
|
||||
|
||||
// Brand colors (light theme accent)
|
||||
export const BRAND_COLORS = {
|
||||
default: "#3f76ff", // oklch(0.4799 0.1158 242.91) - primary accent blue
|
||||
100: "#f5f8ff",
|
||||
200: "#e8f0ff",
|
||||
300: "#d1e1ff",
|
||||
400: "#b3d0ff",
|
||||
500: "#8ab8ff",
|
||||
600: "#5c9aff",
|
||||
700: "#3f76ff",
|
||||
900: "#2952b3",
|
||||
1000: "#1e3d80",
|
||||
1100: "#142b5c",
|
||||
1200: "#0d1f40",
|
||||
} as const;
|
||||
|
||||
// Semantic text colors
|
||||
export const TEXT_COLORS = {
|
||||
primary: NEUTRAL_COLORS[1200], // --txt-primary
|
||||
secondary: NEUTRAL_COLORS[1100], // --txt-secondary
|
||||
tertiary: NEUTRAL_COLORS[1000], // --txt-tertiary
|
||||
placeholder: NEUTRAL_COLORS[900], // --txt-placeholder
|
||||
disabled: NEUTRAL_COLORS[800], // --txt-disabled
|
||||
accentPrimary: BRAND_COLORS.default, // --txt-accent-primary
|
||||
linkPrimary: BRAND_COLORS.default, // --txt-link-primary
|
||||
} as const;
|
||||
|
||||
// Semantic background colors
|
||||
export const BACKGROUND_COLORS = {
|
||||
canvas: NEUTRAL_COLORS[300], // --bg-canvas
|
||||
surface1: NEUTRAL_COLORS.white, // --bg-surface-1
|
||||
surface2: NEUTRAL_COLORS[100], // --bg-surface-2
|
||||
layer1: NEUTRAL_COLORS[200], // --bg-layer-1
|
||||
layer2: NEUTRAL_COLORS.white, // --bg-layer-2
|
||||
layer3: NEUTRAL_COLORS[300], // --bg-layer-3
|
||||
accentSubtle: "#f5f8ff", // --bg-accent-subtle (brand-100)
|
||||
} as const;
|
||||
|
||||
// Semantic border colors
|
||||
export const BORDER_COLORS = {
|
||||
subtle: NEUTRAL_COLORS[400], // --border-subtle
|
||||
subtle1: NEUTRAL_COLORS[500], // --border-subtle-1
|
||||
strong: NEUTRAL_COLORS[600], // --border-strong
|
||||
strong1: NEUTRAL_COLORS[700], // --border-strong-1
|
||||
accentStrong: BRAND_COLORS.default, // --border-accent-strong
|
||||
} as const;
|
||||
|
||||
// Code/inline code colors
|
||||
export const CODE_COLORS = {
|
||||
background: NEUTRAL_COLORS[200], // Similar to bg-layer-1
|
||||
text: "#dc2626", // Red for inline code text (matches editor)
|
||||
blockText: NEUTRAL_COLORS[1200], // Regular text for code blocks
|
||||
} as const;
|
||||
|
||||
// Link colors
|
||||
export const LINK_COLORS = {
|
||||
primary: BRAND_COLORS.default,
|
||||
hover: BRAND_COLORS[900],
|
||||
} as const;
|
||||
|
||||
// Mention colors (from pi-chat-editor mention styles: bg-accent-primary/20 text-accent-primary)
|
||||
export const MENTION_COLORS = {
|
||||
background: "#e0e9ff", // accent-primary with ~20% opacity on white
|
||||
text: BRAND_COLORS.default,
|
||||
} as const;
|
||||
|
||||
// Success/Green colors
|
||||
export const SUCCESS_COLORS = {
|
||||
primary: "#10b981",
|
||||
subtle: "#d1fae5",
|
||||
} as const;
|
||||
|
||||
// Warning/Amber colors
|
||||
export const WARNING_COLORS = {
|
||||
primary: "#f59e0b",
|
||||
subtle: "#fef3c7",
|
||||
} as const;
|
||||
|
||||
// Danger/Red colors
|
||||
export const DANGER_COLORS = {
|
||||
primary: "#ef4444",
|
||||
subtle: "#fee2e2",
|
||||
} as const;
|
||||
226
apps/live/src/lib/pdf/icons.tsx
Normal file
226
apps/live/src/lib/pdf/icons.tsx
Normal file
@@ -0,0 +1,226 @@
|
||||
import { Circle, Path, Rect, Svg } from "@react-pdf/renderer";
|
||||
|
||||
type IconProps = {
|
||||
size?: number;
|
||||
color?: string;
|
||||
};
|
||||
|
||||
// Lightbulb icon for callouts (default)
|
||||
export const LightbulbIcon = ({ size = 16, color = "#ffffff" }: IconProps) => (
|
||||
<Svg width={size} height={size} viewBox="0 0 24 24">
|
||||
<Path
|
||||
d="M9 21h6M12 3a6 6 0 0 0-6 6c0 2.22 1.21 4.16 3 5.19V17a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1v-2.81c1.79-1.03 3-2.97 3-5.19a6 6 0 0 0-6-6z"
|
||||
fill="none"
|
||||
stroke={color}
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</Svg>
|
||||
);
|
||||
|
||||
// Document/file icon for page embeds
|
||||
export const DocumentIcon = ({ size = 12, color = "#1e40af" }: IconProps) => (
|
||||
<Svg width={size} height={size} viewBox="0 0 24 24">
|
||||
<Path
|
||||
d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"
|
||||
fill="none"
|
||||
stroke={color}
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<Path d="M14 2v6h6" fill="none" stroke={color} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
|
||||
<Path d="M16 13H8M16 17H8M10 9H8" fill="none" stroke={color} strokeWidth={2} strokeLinecap="round" />
|
||||
</Svg>
|
||||
);
|
||||
|
||||
// Link icon for page links and external links
|
||||
export const LinkIcon = ({ size = 12, color = "#2563eb" }: IconProps) => (
|
||||
<Svg width={size} height={size} viewBox="0 0 24 24">
|
||||
<Path
|
||||
d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"
|
||||
fill="none"
|
||||
stroke={color}
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<Path
|
||||
d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"
|
||||
fill="none"
|
||||
stroke={color}
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</Svg>
|
||||
);
|
||||
|
||||
// Paperclip icon for attachments (default)
|
||||
export const PaperclipIcon = ({ size = 16, color = "#374151" }: IconProps) => (
|
||||
<Svg width={size} height={size} viewBox="0 0 24 24">
|
||||
<Path
|
||||
d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"
|
||||
fill="none"
|
||||
stroke={color}
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</Svg>
|
||||
);
|
||||
|
||||
// Image icon for image attachments
|
||||
export const ImageIcon = ({ size = 16, color = "#374151" }: IconProps) => (
|
||||
<Svg width={size} height={size} viewBox="0 0 24 24">
|
||||
<Rect x={3} y={3} width={18} height={18} rx={2} ry={2} fill="none" stroke={color} strokeWidth={2} />
|
||||
<Circle cx={8.5} cy={8.5} r={1.5} fill={color} />
|
||||
<Path d="M21 15l-5-5L5 21" fill="none" stroke={color} strokeWidth={2} strokeLinecap="round" />
|
||||
</Svg>
|
||||
);
|
||||
|
||||
// Video icon for video attachments
|
||||
export const VideoIcon = ({ size = 16, color = "#374151" }: IconProps) => (
|
||||
<Svg width={size} height={size} viewBox="0 0 24 24">
|
||||
<Rect x={2} y={4} width={15} height={16} rx={2} ry={2} fill="none" stroke={color} strokeWidth={2} />
|
||||
<Path d="M17 10l5-3v10l-5-3z" fill="none" stroke={color} strokeWidth={2} strokeLinecap="round" />
|
||||
</Svg>
|
||||
);
|
||||
|
||||
// Music/audio icon
|
||||
export const MusicIcon = ({ size = 16, color = "#374151" }: IconProps) => (
|
||||
<Svg width={size} height={size} viewBox="0 0 24 24">
|
||||
<Path d="M9 18V5l12-2v13" fill="none" stroke={color} strokeWidth={2} strokeLinecap="round" />
|
||||
<Circle cx={6} cy={18} r={3} fill="none" stroke={color} strokeWidth={2} />
|
||||
<Circle cx={18} cy={16} r={3} fill="none" stroke={color} strokeWidth={2} />
|
||||
</Svg>
|
||||
);
|
||||
|
||||
// File-text icon for PDFs and documents
|
||||
export const FileTextIcon = ({ size = 16, color = "#374151" }: IconProps) => (
|
||||
<Svg width={size} height={size} viewBox="0 0 24 24">
|
||||
<Path
|
||||
d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"
|
||||
fill="none"
|
||||
stroke={color}
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<Path d="M14 2v6h6M16 13H8M16 17H8M10 9H8" fill="none" stroke={color} strokeWidth={2} strokeLinecap="round" />
|
||||
</Svg>
|
||||
);
|
||||
|
||||
// Table/spreadsheet icon
|
||||
export const TableIcon = ({ size = 16, color = "#374151" }: IconProps) => (
|
||||
<Svg width={size} height={size} viewBox="0 0 24 24">
|
||||
<Rect x={3} y={3} width={18} height={18} rx={2} fill="none" stroke={color} strokeWidth={2} />
|
||||
<Path d="M3 9h18M3 15h18M9 3v18M15 3v18" fill="none" stroke={color} strokeWidth={2} />
|
||||
</Svg>
|
||||
);
|
||||
|
||||
// Presentation icon
|
||||
export const PresentationIcon = ({ size = 16, color = "#374151" }: IconProps) => (
|
||||
<Svg width={size} height={size} viewBox="0 0 24 24">
|
||||
<Rect x={2} y={3} width={20} height={14} rx={2} fill="none" stroke={color} strokeWidth={2} />
|
||||
<Path d="M8 21l4-4 4 4M12 17v-4" fill="none" stroke={color} strokeWidth={2} strokeLinecap="round" />
|
||||
</Svg>
|
||||
);
|
||||
|
||||
// Archive/zip icon
|
||||
export const ArchiveIcon = ({ size = 16, color = "#374151" }: IconProps) => (
|
||||
<Svg width={size} height={size} viewBox="0 0 24 24">
|
||||
<Path
|
||||
d="M21 8v13a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V8"
|
||||
fill="none"
|
||||
stroke={color}
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<Path
|
||||
d="M23 3H1v5h22V3zM10 12h4"
|
||||
fill="none"
|
||||
stroke={color}
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</Svg>
|
||||
);
|
||||
|
||||
// Globe icon for external embeds (rich cards)
|
||||
export const GlobeIcon = ({ size = 12, color = "#374151" }: IconProps) => (
|
||||
<Svg width={size} height={size} viewBox="0 0 24 24">
|
||||
<Circle cx={12} cy={12} r={10} fill="none" stroke={color} strokeWidth={2} />
|
||||
<Path
|
||||
d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"
|
||||
fill="none"
|
||||
stroke={color}
|
||||
strokeWidth={2}
|
||||
/>
|
||||
</Svg>
|
||||
);
|
||||
|
||||
// Clipboard icon for whiteboards
|
||||
export const ClipboardIcon = ({ size = 12, color = "#6b7280" }: IconProps) => (
|
||||
<Svg width={size} height={size} viewBox="0 0 24 24">
|
||||
<Path
|
||||
d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"
|
||||
fill="none"
|
||||
stroke={color}
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<Rect x={8} y={2} width={8} height={4} rx={1} fill="none" stroke={color} strokeWidth={2} />
|
||||
</Svg>
|
||||
);
|
||||
|
||||
// Ruler/diagram icon for diagrams
|
||||
export const DiagramIcon = ({ size = 12, color = "#6b7280" }: IconProps) => (
|
||||
<Svg width={size} height={size} viewBox="0 0 24 24">
|
||||
<Path
|
||||
d="M14 3v4a1 1 0 0 0 1 1h4"
|
||||
fill="none"
|
||||
stroke={color}
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<Path
|
||||
d="M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2z"
|
||||
fill="none"
|
||||
stroke={color}
|
||||
strokeWidth={2}
|
||||
/>
|
||||
<Path d="M9 9h1M9 13h6M9 17h6" fill="none" stroke={color} strokeWidth={2} strokeLinecap="round" />
|
||||
</Svg>
|
||||
);
|
||||
|
||||
// Work item / task icon
|
||||
export const TaskIcon = ({ size = 14, color = "#374151" }: IconProps) => (
|
||||
<Svg width={size} height={size} viewBox="0 0 24 24">
|
||||
<Rect x={3} y={3} width={18} height={18} rx={2} fill="none" stroke={color} strokeWidth={2} />
|
||||
<Path d="M9 12l2 2 4-4" fill="none" stroke={color} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
|
||||
</Svg>
|
||||
);
|
||||
|
||||
// Checkmark icon for checked task items
|
||||
export const CheckIcon = ({ size = 10, color = "#ffffff" }: IconProps) => (
|
||||
<Svg width={size} height={size} viewBox="0 0 24 24">
|
||||
<Path d="M20 6L9 17l-5-5" fill="none" stroke={color} strokeWidth={3} strokeLinecap="round" strokeLinejoin="round" />
|
||||
</Svg>
|
||||
);
|
||||
|
||||
// Helper to get file icon component based on file type
|
||||
export const getFileIcon = (fileType: string, size = 16, color = "#374151") => {
|
||||
if (fileType.startsWith("image/")) return <ImageIcon size={size} color={color} />;
|
||||
if (fileType.startsWith("video/")) return <VideoIcon size={size} color={color} />;
|
||||
if (fileType.startsWith("audio/")) return <MusicIcon size={size} color={color} />;
|
||||
if (fileType.includes("pdf")) return <FileTextIcon size={size} color="#dc2626" />;
|
||||
if (fileType.includes("spreadsheet") || fileType.includes("excel")) return <TableIcon size={size} color="#16a34a" />;
|
||||
if (fileType.includes("document") || fileType.includes("word")) return <FileTextIcon size={size} color="#2563eb" />;
|
||||
if (fileType.includes("presentation") || fileType.includes("powerpoint"))
|
||||
return <PresentationIcon size={size} color="#ea580c" />;
|
||||
if (fileType.includes("zip") || fileType.includes("archive")) return <ArchiveIcon size={size} color={color} />;
|
||||
return <PaperclipIcon size={size} color={color} />;
|
||||
};
|
||||
18
apps/live/src/lib/pdf/index.ts
Normal file
18
apps/live/src/lib/pdf/index.ts
Normal file
@@ -0,0 +1,18 @@
|
||||
export { createPdfDocument, renderPlaneDocToPdfBlob, renderPlaneDocToPdfBuffer } from "./plane-pdf-exporter";
|
||||
export { createKeyGenerator, nodeRenderers, renderNode } from "./node-renderers";
|
||||
export { markRenderers, applyMarks } from "./mark-renderers";
|
||||
export { pdfStyles } from "./styles";
|
||||
export type {
|
||||
KeyGenerator,
|
||||
MarkRendererRegistry,
|
||||
NodeRendererRegistry,
|
||||
PDFExportMetadata,
|
||||
PDFExportOptions,
|
||||
PDFMarkRenderer,
|
||||
PDFNodeRenderer,
|
||||
PDFRenderContext,
|
||||
PDFUserMention,
|
||||
TipTapDocument,
|
||||
TipTapMark,
|
||||
TipTapNode,
|
||||
} from "./types";
|
||||
138
apps/live/src/lib/pdf/mark-renderers.ts
Normal file
138
apps/live/src/lib/pdf/mark-renderers.ts
Normal file
@@ -0,0 +1,138 @@
|
||||
import type { Style } from "@react-pdf/types";
|
||||
import {
|
||||
BACKGROUND_COLORS,
|
||||
CODE_COLORS,
|
||||
EDITOR_BACKGROUND_COLORS,
|
||||
EDITOR_TEXT_COLORS,
|
||||
LINK_COLORS,
|
||||
resolveColorForPdf,
|
||||
} from "./colors";
|
||||
import type { MarkRendererRegistry, TipTapMark } from "./types";
|
||||
|
||||
export const markRenderers: MarkRendererRegistry = {
|
||||
bold: (_mark: TipTapMark, style: Style): Style => ({
|
||||
...style,
|
||||
fontWeight: "bold",
|
||||
}),
|
||||
|
||||
italic: (_mark: TipTapMark, style: Style): Style => ({
|
||||
...style,
|
||||
fontStyle: "italic",
|
||||
}),
|
||||
|
||||
underline: (_mark: TipTapMark, style: Style): Style => ({
|
||||
...style,
|
||||
textDecoration: "underline",
|
||||
}),
|
||||
|
||||
strike: (_mark: TipTapMark, style: Style): Style => ({
|
||||
...style,
|
||||
textDecoration: "line-through",
|
||||
}),
|
||||
|
||||
code: (_mark: TipTapMark, style: Style): Style => ({
|
||||
...style,
|
||||
fontFamily: "Courier",
|
||||
fontSize: 10,
|
||||
backgroundColor: BACKGROUND_COLORS.layer1,
|
||||
color: CODE_COLORS.text,
|
||||
}),
|
||||
|
||||
link: (_mark: TipTapMark, style: Style): Style => ({
|
||||
...style,
|
||||
color: LINK_COLORS.primary,
|
||||
textDecoration: "underline",
|
||||
}),
|
||||
|
||||
textStyle: (mark: TipTapMark, style: Style): Style => {
|
||||
const attrs = mark.attrs || {};
|
||||
const newStyle: Style = { ...style };
|
||||
|
||||
if (attrs.color && typeof attrs.color === "string") {
|
||||
newStyle.color = attrs.color;
|
||||
}
|
||||
|
||||
if (attrs.backgroundColor && typeof attrs.backgroundColor === "string") {
|
||||
newStyle.backgroundColor = attrs.backgroundColor;
|
||||
}
|
||||
|
||||
return newStyle;
|
||||
},
|
||||
|
||||
highlight: (mark: TipTapMark, style: Style): Style => {
|
||||
const attrs = mark.attrs || {};
|
||||
return {
|
||||
...style,
|
||||
backgroundColor: (attrs.color as string) || EDITOR_BACKGROUND_COLORS.purple,
|
||||
};
|
||||
},
|
||||
|
||||
subscript: (_mark: TipTapMark, style: Style): Style => ({
|
||||
...style,
|
||||
fontSize: 8,
|
||||
}),
|
||||
|
||||
superscript: (_mark: TipTapMark, style: Style): Style => ({
|
||||
...style,
|
||||
fontSize: 8,
|
||||
}),
|
||||
|
||||
/**
|
||||
* Custom color mark handler
|
||||
* Handles the customColor extension which stores colors as data-text-color and data-background-color attributes
|
||||
* The colors can be either:
|
||||
* 1. Color keys like "gray", "peach", "pink", etc. (from COLORS_LIST)
|
||||
* 2. Direct hex values for custom colors
|
||||
* 3. CSS variable references like "var(--editor-colors-gray-text)"
|
||||
*/
|
||||
customColor: (mark: TipTapMark, style: Style): Style => {
|
||||
const attrs = mark.attrs || {};
|
||||
const newStyle: Style = { ...style };
|
||||
|
||||
// Handle text color (stored in 'color' attribute)
|
||||
const textColor = attrs.color as string | undefined;
|
||||
if (textColor) {
|
||||
const resolvedColor = resolveColorForPdf(textColor, "text");
|
||||
if (resolvedColor) {
|
||||
newStyle.color = resolvedColor;
|
||||
} else if (textColor.startsWith("#") || textColor.startsWith("rgb")) {
|
||||
// Direct color value
|
||||
newStyle.color = textColor;
|
||||
} else if (textColor in EDITOR_TEXT_COLORS) {
|
||||
// Color key lookup
|
||||
newStyle.color = EDITOR_TEXT_COLORS[textColor as keyof typeof EDITOR_TEXT_COLORS];
|
||||
}
|
||||
}
|
||||
|
||||
// Handle background color (stored in 'backgroundColor' attribute)
|
||||
const backgroundColor = attrs.backgroundColor as string | undefined;
|
||||
if (backgroundColor) {
|
||||
const resolvedColor = resolveColorForPdf(backgroundColor, "background");
|
||||
if (resolvedColor) {
|
||||
newStyle.backgroundColor = resolvedColor;
|
||||
} else if (backgroundColor.startsWith("#") || backgroundColor.startsWith("rgb")) {
|
||||
// Direct color value
|
||||
newStyle.backgroundColor = backgroundColor;
|
||||
} else if (backgroundColor in EDITOR_BACKGROUND_COLORS) {
|
||||
// Color key lookup
|
||||
newStyle.backgroundColor = EDITOR_BACKGROUND_COLORS[backgroundColor as keyof typeof EDITOR_BACKGROUND_COLORS];
|
||||
}
|
||||
}
|
||||
|
||||
return newStyle;
|
||||
},
|
||||
};
|
||||
|
||||
export const applyMarks = (marks: TipTapMark[] | undefined, baseStyle: Style = {}): Style => {
|
||||
if (!marks || marks.length === 0) {
|
||||
return baseStyle;
|
||||
}
|
||||
|
||||
return marks.reduce((style, mark) => {
|
||||
const renderer = markRenderers[mark.type];
|
||||
if (renderer) {
|
||||
return renderer(mark, style);
|
||||
}
|
||||
return style;
|
||||
}, baseStyle);
|
||||
};
|
||||
439
apps/live/src/lib/pdf/node-renderers.tsx
Normal file
439
apps/live/src/lib/pdf/node-renderers.tsx
Normal file
@@ -0,0 +1,439 @@
|
||||
import { Image, Link, Text, View } from "@react-pdf/renderer";
|
||||
import type { Style } from "@react-pdf/types";
|
||||
import type { ReactElement } from "react";
|
||||
import { CORE_EXTENSIONS } from "@plane/editor";
|
||||
import { BACKGROUND_COLORS, EDITOR_BACKGROUND_COLORS, resolveColorForPdf, TEXT_COLORS } from "./colors";
|
||||
import { CheckIcon, ClipboardIcon, DocumentIcon, GlobeIcon, LightbulbIcon, LinkIcon } from "./icons";
|
||||
import { applyMarks } from "./mark-renderers";
|
||||
import { pdfStyles } from "./styles";
|
||||
import type { KeyGenerator, NodeRendererRegistry, PDFExportMetadata, PDFRenderContext, TipTapNode } from "./types";
|
||||
|
||||
const getCalloutIcon = (node: TipTapNode, color: string): ReactElement => {
|
||||
const logoInUse = node.attrs?.["data-logo-in-use"] as string | undefined;
|
||||
const iconName = node.attrs?.["data-icon-name"] as string | undefined;
|
||||
const iconColor = (node.attrs?.["data-icon-color"] as string) || color;
|
||||
|
||||
if (logoInUse === "emoji") {
|
||||
const emojiUnicode = node.attrs?.["data-emoji-unicode"] as string | undefined;
|
||||
if (emojiUnicode) {
|
||||
return <Text style={{ fontSize: 14 }}>{emojiUnicode}</Text>;
|
||||
}
|
||||
}
|
||||
|
||||
if (iconName) {
|
||||
switch (iconName) {
|
||||
case "FileText":
|
||||
case "File":
|
||||
return <DocumentIcon size={16} color={iconColor} />;
|
||||
case "Link":
|
||||
return <LinkIcon size={16} color={iconColor} />;
|
||||
case "Globe":
|
||||
return <GlobeIcon size={16} color={iconColor} />;
|
||||
case "Clipboard":
|
||||
return <ClipboardIcon size={16} color={iconColor} />;
|
||||
case "CheckSquare":
|
||||
case "Check":
|
||||
return <CheckIcon size={16} color={iconColor} />;
|
||||
case "Lightbulb":
|
||||
default:
|
||||
return <LightbulbIcon size={16} color={iconColor} />;
|
||||
}
|
||||
}
|
||||
|
||||
return <LightbulbIcon size={16} color={color} />;
|
||||
};
|
||||
|
||||
export const createKeyGenerator = (): KeyGenerator => {
|
||||
let counter = 0;
|
||||
return () => `node-${counter++}`;
|
||||
};
|
||||
|
||||
const renderTextWithMarks = (node: TipTapNode, getKey: KeyGenerator): ReactElement => {
|
||||
const style = applyMarks(node.marks, {});
|
||||
const hasLink = node.marks?.find((m) => m.type === "link");
|
||||
|
||||
if (hasLink) {
|
||||
const href = (hasLink.attrs?.href as string) || "#";
|
||||
return (
|
||||
<Link key={getKey()} src={href} style={{ ...pdfStyles.link, ...style }}>
|
||||
{node.text || ""}
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Text key={getKey()} style={style}>
|
||||
{node.text || ""}
|
||||
</Text>
|
||||
);
|
||||
};
|
||||
|
||||
const getTextAlignStyle = (textAlign: string | null | undefined): Style => {
|
||||
if (!textAlign) return {};
|
||||
return {
|
||||
textAlign: textAlign as "left" | "right" | "center" | "justify",
|
||||
};
|
||||
};
|
||||
|
||||
const getFlexAlignStyle = (textAlign: string | null | undefined): Style => {
|
||||
if (!textAlign) return {};
|
||||
if (textAlign === "right") return { alignItems: "flex-end" };
|
||||
if (textAlign === "center") return { alignItems: "center" };
|
||||
return {};
|
||||
};
|
||||
|
||||
export const nodeRenderers: NodeRendererRegistry = {
|
||||
doc: (_node: TipTapNode, children: ReactElement[], ctx: PDFRenderContext): ReactElement => (
|
||||
<View key={ctx.getKey()}>{children}</View>
|
||||
),
|
||||
|
||||
text: (node: TipTapNode, _children: ReactElement[], ctx: PDFRenderContext): ReactElement =>
|
||||
renderTextWithMarks(node, ctx.getKey),
|
||||
|
||||
paragraph: (node: TipTapNode, children: ReactElement[], ctx: PDFRenderContext): ReactElement => {
|
||||
const textAlign = node.attrs?.textAlign as string | null;
|
||||
const background = node.attrs?.backgroundColor as string | undefined;
|
||||
const alignStyle = getTextAlignStyle(textAlign);
|
||||
const flexStyle = getFlexAlignStyle(textAlign);
|
||||
const resolvedBgColor =
|
||||
background && background !== "default" ? resolveColorForPdf(background, "background") : null;
|
||||
const bgStyle = resolvedBgColor ? { backgroundColor: resolvedBgColor } : {};
|
||||
|
||||
return (
|
||||
<View key={ctx.getKey()} style={[pdfStyles.paragraphWrapper, flexStyle, bgStyle]}>
|
||||
<Text style={[pdfStyles.paragraph, alignStyle, bgStyle]}>{children}</Text>
|
||||
</View>
|
||||
);
|
||||
},
|
||||
|
||||
heading: (node: TipTapNode, children: ReactElement[], ctx: PDFRenderContext): ReactElement => {
|
||||
const level = (node.attrs?.level as number) || 1;
|
||||
const styleKey = `heading${level}` as keyof typeof pdfStyles;
|
||||
const style = pdfStyles[styleKey] || pdfStyles.heading1;
|
||||
const textAlign = node.attrs?.textAlign as string | null;
|
||||
const alignStyle = getTextAlignStyle(textAlign);
|
||||
const flexStyle = getFlexAlignStyle(textAlign);
|
||||
|
||||
return (
|
||||
<View key={ctx.getKey()} style={flexStyle}>
|
||||
<Text style={[style, alignStyle]}>{children}</Text>
|
||||
</View>
|
||||
);
|
||||
},
|
||||
|
||||
blockquote: (_node: TipTapNode, children: ReactElement[], ctx: PDFRenderContext): ReactElement => (
|
||||
<View key={ctx.getKey()} style={pdfStyles.blockquote} wrap={false}>
|
||||
{children}
|
||||
</View>
|
||||
),
|
||||
|
||||
codeBlock: (node: TipTapNode, _children: ReactElement[], ctx: PDFRenderContext): ReactElement => {
|
||||
const codeContent = node.content?.map((c) => c.text || "").join("") || "";
|
||||
return (
|
||||
<View key={ctx.getKey()} style={pdfStyles.codeBlock} wrap={false}>
|
||||
<Text>{codeContent}</Text>
|
||||
</View>
|
||||
);
|
||||
},
|
||||
|
||||
bulletList: (node: TipTapNode, children: ReactElement[], ctx: PDFRenderContext): ReactElement => {
|
||||
const nestingLevel = (node.attrs?._nestingLevel as number) || 0;
|
||||
const indentStyle = nestingLevel > 0 ? { marginLeft: 18 } : {};
|
||||
return (
|
||||
<View key={ctx.getKey()} style={[pdfStyles.bulletList, indentStyle]}>
|
||||
{children}
|
||||
</View>
|
||||
);
|
||||
},
|
||||
|
||||
orderedList: (node: TipTapNode, children: ReactElement[], ctx: PDFRenderContext): ReactElement => {
|
||||
const nestingLevel = (node.attrs?._nestingLevel as number) || 0;
|
||||
const indentStyle = nestingLevel > 0 ? { marginLeft: 18 } : {};
|
||||
return (
|
||||
<View key={ctx.getKey()} style={[pdfStyles.orderedList, indentStyle]}>
|
||||
{children}
|
||||
</View>
|
||||
);
|
||||
},
|
||||
|
||||
listItem: (node: TipTapNode, children: ReactElement[], ctx: PDFRenderContext): ReactElement => {
|
||||
const isOrdered = node.attrs?._parentType === "orderedList";
|
||||
const index = (node.attrs?._listItemIndex as number) || 0;
|
||||
|
||||
const bullet = isOrdered ? `${index}.` : "•";
|
||||
|
||||
const textAlign = node.attrs?._textAlign as string | null;
|
||||
const flexStyle = getFlexAlignStyle(textAlign);
|
||||
|
||||
return (
|
||||
<View key={ctx.getKey()} style={[pdfStyles.listItem, flexStyle]} wrap={false}>
|
||||
<View style={pdfStyles.listItemBullet}>
|
||||
<Text>{bullet}</Text>
|
||||
</View>
|
||||
<View style={pdfStyles.listItemContent}>{children}</View>
|
||||
</View>
|
||||
);
|
||||
},
|
||||
|
||||
taskList: (_node: TipTapNode, children: ReactElement[], ctx: PDFRenderContext): ReactElement => (
|
||||
<View key={ctx.getKey()} style={pdfStyles.taskList}>
|
||||
{children}
|
||||
</View>
|
||||
),
|
||||
|
||||
taskItem: (node: TipTapNode, children: ReactElement[], ctx: PDFRenderContext): ReactElement => {
|
||||
const checked = node.attrs?.checked === true;
|
||||
return (
|
||||
<View key={ctx.getKey()} style={pdfStyles.taskItem} wrap={false}>
|
||||
<View style={checked ? [pdfStyles.taskCheckbox, pdfStyles.taskCheckboxChecked] : pdfStyles.taskCheckbox}>
|
||||
{checked && <CheckIcon size={8} color="#ffffff" />}
|
||||
</View>
|
||||
<View style={pdfStyles.listItemContent}>{children}</View>
|
||||
</View>
|
||||
);
|
||||
},
|
||||
|
||||
table: (_node: TipTapNode, children: ReactElement[], ctx: PDFRenderContext): ReactElement => (
|
||||
<View key={ctx.getKey()} style={pdfStyles.table}>
|
||||
{children}
|
||||
</View>
|
||||
),
|
||||
|
||||
tableRow: (node: TipTapNode, children: ReactElement[], ctx: PDFRenderContext): ReactElement => {
|
||||
const isHeader = node.attrs?._isHeader === true;
|
||||
return (
|
||||
<View key={ctx.getKey()} style={isHeader ? pdfStyles.tableHeaderRow : pdfStyles.tableRow} wrap={false}>
|
||||
{children}
|
||||
</View>
|
||||
);
|
||||
},
|
||||
|
||||
tableHeader: (node: TipTapNode, children: ReactElement[], ctx: PDFRenderContext): ReactElement => {
|
||||
const colwidth = node.attrs?.colwidth as number[] | undefined;
|
||||
const background = node.attrs?.background as string | undefined;
|
||||
const width = colwidth?.[0];
|
||||
const widthStyle = width ? { width, flex: undefined } : {};
|
||||
const resolvedBgColor = background ? resolveColorForPdf(background, "background") : null;
|
||||
const bgStyle = resolvedBgColor ? { backgroundColor: resolvedBgColor } : {};
|
||||
|
||||
return (
|
||||
<View key={ctx.getKey()} style={[pdfStyles.tableHeaderCell, widthStyle, bgStyle]}>
|
||||
{children}
|
||||
</View>
|
||||
);
|
||||
},
|
||||
|
||||
tableCell: (node: TipTapNode, children: ReactElement[], ctx: PDFRenderContext): ReactElement => {
|
||||
const colwidth = node.attrs?.colwidth as number[] | undefined;
|
||||
const background = node.attrs?.background as string | undefined;
|
||||
const width = colwidth?.[0];
|
||||
const widthStyle = width ? { width, flex: undefined } : {};
|
||||
const resolvedBgColor = background ? resolveColorForPdf(background, "background") : null;
|
||||
const bgStyle = resolvedBgColor ? { backgroundColor: resolvedBgColor } : {};
|
||||
|
||||
return (
|
||||
<View key={ctx.getKey()} style={[pdfStyles.tableCell, widthStyle, bgStyle]}>
|
||||
{children}
|
||||
</View>
|
||||
);
|
||||
},
|
||||
|
||||
horizontalRule: (_node: TipTapNode, _children: ReactElement[], ctx: PDFRenderContext): ReactElement => (
|
||||
<View key={ctx.getKey()} style={pdfStyles.horizontalRule} />
|
||||
),
|
||||
|
||||
hardBreak: (_node: TipTapNode, _children: ReactElement[], ctx: PDFRenderContext): ReactElement => (
|
||||
<Text key={ctx.getKey()}>{"\n"}</Text>
|
||||
),
|
||||
|
||||
image: (node: TipTapNode, _children: ReactElement[], ctx: PDFRenderContext): ReactElement => {
|
||||
if (ctx.metadata?.noAssets) {
|
||||
return <View key={ctx.getKey()} />;
|
||||
}
|
||||
|
||||
const src = (node.attrs?.src as string) || "";
|
||||
const width = node.attrs?.width as number | undefined;
|
||||
const alignment = (node.attrs?.alignment as string) || "left";
|
||||
|
||||
if (!src) {
|
||||
return <View key={ctx.getKey()} />;
|
||||
}
|
||||
|
||||
const alignmentStyle =
|
||||
alignment === "center"
|
||||
? { alignItems: "center" as const }
|
||||
: alignment === "right"
|
||||
? { alignItems: "flex-end" as const }
|
||||
: { alignItems: "flex-start" as const };
|
||||
|
||||
return (
|
||||
<View key={ctx.getKey()} style={[{ width: "100%" }, alignmentStyle]}>
|
||||
<Image
|
||||
src={src}
|
||||
style={[pdfStyles.image, width ? { width, maxHeight: 500 } : { maxWidth: 400, maxHeight: 500 }]}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
},
|
||||
|
||||
imageComponent: (node: TipTapNode, _children: ReactElement[], ctx: PDFRenderContext): ReactElement => {
|
||||
if (ctx.metadata?.noAssets) {
|
||||
return <View key={ctx.getKey()} />;
|
||||
}
|
||||
|
||||
const assetId = (node.attrs?.src as string) || "";
|
||||
const rawWidth = node.attrs?.width;
|
||||
const width = typeof rawWidth === "string" ? parseInt(rawWidth, 10) : (rawWidth as number | undefined);
|
||||
const alignment = (node.attrs?.alignment as string) || "left";
|
||||
|
||||
if (!assetId) {
|
||||
return <View key={ctx.getKey()} />;
|
||||
}
|
||||
|
||||
let resolvedSrc = assetId;
|
||||
if (ctx.metadata?.resolvedImageUrls && ctx.metadata.resolvedImageUrls[assetId]) {
|
||||
resolvedSrc = ctx.metadata.resolvedImageUrls[assetId];
|
||||
}
|
||||
|
||||
const alignmentStyle =
|
||||
alignment === "center"
|
||||
? { alignItems: "center" as const }
|
||||
: alignment === "right"
|
||||
? { alignItems: "flex-end" as const }
|
||||
: { alignItems: "flex-start" as const };
|
||||
|
||||
if (!resolvedSrc.startsWith("http") && !resolvedSrc.startsWith("data:")) {
|
||||
return (
|
||||
<View key={ctx.getKey()} style={[pdfStyles.imagePlaceholder, alignmentStyle]}>
|
||||
<Text style={pdfStyles.imagePlaceholderText}>[Image: {assetId.slice(0, 8)}...]</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const imageStyle = width && !isNaN(width) ? { width, maxHeight: 500 } : { maxWidth: 400, maxHeight: 500 };
|
||||
|
||||
return (
|
||||
<View key={ctx.getKey()} style={[{ width: "100%" }, alignmentStyle]}>
|
||||
<Image src={resolvedSrc} style={[pdfStyles.image, imageStyle]} />
|
||||
</View>
|
||||
);
|
||||
},
|
||||
|
||||
calloutComponent: (node: TipTapNode, children: ReactElement[], ctx: PDFRenderContext): ReactElement => {
|
||||
const backgroundKey = (node.attrs?.["data-background"] as string) || "gray";
|
||||
const backgroundColor =
|
||||
EDITOR_BACKGROUND_COLORS[backgroundKey as keyof typeof EDITOR_BACKGROUND_COLORS] || BACKGROUND_COLORS.layer3;
|
||||
|
||||
return (
|
||||
<View key={ctx.getKey()} style={[pdfStyles.callout, { backgroundColor }]}>
|
||||
<View style={pdfStyles.calloutIconContainer}>{getCalloutIcon(node, TEXT_COLORS.primary)}</View>
|
||||
<View style={[pdfStyles.calloutContent, { color: TEXT_COLORS.primary }]}>{children}</View>
|
||||
</View>
|
||||
);
|
||||
},
|
||||
|
||||
mention: (node: TipTapNode, _children: ReactElement[], ctx: PDFRenderContext): ReactElement => {
|
||||
const id = (node.attrs?.id as string) || "";
|
||||
const entityIdentifier = (node.attrs?.entity_identifier as string) || "";
|
||||
const entityName = (node.attrs?.entity_name as string) || "";
|
||||
|
||||
let displayText = entityName || id || entityIdentifier;
|
||||
|
||||
if (ctx.metadata && (entityName === "user_mention" || entityName === "user")) {
|
||||
const userMention = ctx.metadata.userMentions?.find((u) => u.id === entityIdentifier || u.id === id);
|
||||
if (userMention) {
|
||||
displayText = userMention.display_name;
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Text key={ctx.getKey()} style={pdfStyles.mention}>
|
||||
@{displayText}
|
||||
</Text>
|
||||
);
|
||||
},
|
||||
|
||||
};
|
||||
|
||||
type InternalRenderContext = {
|
||||
parentType?: string;
|
||||
nestingLevel: number;
|
||||
listItemIndex: number;
|
||||
textAlign?: string | null;
|
||||
pdfContext: PDFRenderContext;
|
||||
};
|
||||
|
||||
const renderNodeWithContext = (node: TipTapNode, context: InternalRenderContext): ReactElement => {
|
||||
const { parentType, nestingLevel, listItemIndex, textAlign, pdfContext } = context;
|
||||
|
||||
const isListContainer = node.type === CORE_EXTENSIONS.BULLET_LIST || node.type === CORE_EXTENSIONS.ORDERED_LIST;
|
||||
|
||||
let childTextAlign = textAlign;
|
||||
if (node.type === CORE_EXTENSIONS.PARAGRAPH && node.attrs?.textAlign) {
|
||||
childTextAlign = node.attrs.textAlign as string;
|
||||
}
|
||||
|
||||
const nodeWithContext = {
|
||||
...node,
|
||||
attrs: {
|
||||
...node.attrs,
|
||||
_parentType: parentType,
|
||||
_nestingLevel: nestingLevel,
|
||||
_listItemIndex: listItemIndex,
|
||||
_textAlign: childTextAlign,
|
||||
_isHeader: node.content?.some((child) => child.type === CORE_EXTENSIONS.TABLE_HEADER),
|
||||
},
|
||||
};
|
||||
|
||||
let childNestingLevel = nestingLevel;
|
||||
if (isListContainer && parentType === CORE_EXTENSIONS.LIST_ITEM) {
|
||||
childNestingLevel = nestingLevel + 1;
|
||||
}
|
||||
|
||||
let currentListItemIndex = 0;
|
||||
const children: ReactElement[] =
|
||||
node.content?.map((child) => {
|
||||
const childContext: InternalRenderContext = {
|
||||
parentType: node.type,
|
||||
nestingLevel: childNestingLevel,
|
||||
listItemIndex: 0,
|
||||
textAlign: childTextAlign,
|
||||
pdfContext,
|
||||
};
|
||||
|
||||
if (isListContainer && child.type === CORE_EXTENSIONS.LIST_ITEM) {
|
||||
currentListItemIndex++;
|
||||
childContext.listItemIndex = currentListItemIndex;
|
||||
}
|
||||
|
||||
return renderNodeWithContext(child, childContext);
|
||||
}) || [];
|
||||
|
||||
const renderer = nodeRenderers[node.type];
|
||||
if (renderer) {
|
||||
return renderer(nodeWithContext, children, pdfContext);
|
||||
}
|
||||
|
||||
if (children.length > 0) {
|
||||
return <View key={pdfContext.getKey()}>{children}</View>;
|
||||
}
|
||||
|
||||
return <View key={pdfContext.getKey()} />;
|
||||
};
|
||||
|
||||
export const renderNode = (
|
||||
node: TipTapNode,
|
||||
parentType?: string,
|
||||
_index?: number,
|
||||
metadata?: PDFExportMetadata,
|
||||
getKey?: KeyGenerator
|
||||
): ReactElement => {
|
||||
const keyGen = getKey ?? createKeyGenerator();
|
||||
|
||||
return renderNodeWithContext(node, {
|
||||
parentType,
|
||||
nestingLevel: 0,
|
||||
listItemIndex: 0,
|
||||
pdfContext: { getKey: keyGen, metadata },
|
||||
});
|
||||
};
|
||||
82
apps/live/src/lib/pdf/plane-pdf-exporter.tsx
Normal file
82
apps/live/src/lib/pdf/plane-pdf-exporter.tsx
Normal file
@@ -0,0 +1,82 @@
|
||||
import { createRequire } from "module";
|
||||
import path from "path";
|
||||
import { Document, Font, Page, pdf, Text } from "@react-pdf/renderer";
|
||||
import { createKeyGenerator, renderNode } from "./node-renderers";
|
||||
import { pdfStyles } from "./styles";
|
||||
import type { PDFExportOptions, TipTapDocument } from "./types";
|
||||
|
||||
// Use createRequire for ESM compatibility to resolve font file paths
|
||||
const require = createRequire(import.meta.url);
|
||||
|
||||
// Resolve local font file paths from @fontsource/inter package
|
||||
const interFontDir = path.dirname(require.resolve("@fontsource/inter/package.json"));
|
||||
|
||||
Font.register({
|
||||
family: "Inter",
|
||||
fonts: [
|
||||
{
|
||||
src: path.join(interFontDir, "files/inter-latin-400-normal.woff"),
|
||||
fontWeight: 400,
|
||||
},
|
||||
{
|
||||
src: path.join(interFontDir, "files/inter-latin-400-italic.woff"),
|
||||
fontWeight: 400,
|
||||
fontStyle: "italic",
|
||||
},
|
||||
{
|
||||
src: path.join(interFontDir, "files/inter-latin-600-normal.woff"),
|
||||
fontWeight: 600,
|
||||
},
|
||||
{
|
||||
src: path.join(interFontDir, "files/inter-latin-600-italic.woff"),
|
||||
fontWeight: 600,
|
||||
fontStyle: "italic",
|
||||
},
|
||||
{
|
||||
src: path.join(interFontDir, "files/inter-latin-700-normal.woff"),
|
||||
fontWeight: 700,
|
||||
},
|
||||
{
|
||||
src: path.join(interFontDir, "files/inter-latin-700-italic.woff"),
|
||||
fontWeight: 700,
|
||||
fontStyle: "italic",
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
export const createPdfDocument = (doc: TipTapDocument, options: PDFExportOptions = {}) => {
|
||||
const { title, author, subject, pageSize = "A4", pageOrientation = "portrait", metadata, noAssets } = options;
|
||||
|
||||
// Merge noAssets into metadata for use in node renderers
|
||||
const mergedMetadata = { ...metadata, noAssets };
|
||||
|
||||
const content = doc.content || [];
|
||||
const getKey = createKeyGenerator();
|
||||
const renderedContent = content.map((node, index) => renderNode(node, "doc", index, mergedMetadata, getKey));
|
||||
|
||||
return (
|
||||
<Document title={title} author={author} subject={subject}>
|
||||
<Page size={pageSize} orientation={pageOrientation} style={pdfStyles.page}>
|
||||
{title && <Text style={pdfStyles.title}>{title}</Text>}
|
||||
{renderedContent}
|
||||
</Page>
|
||||
</Document>
|
||||
);
|
||||
};
|
||||
|
||||
export const renderPlaneDocToPdfBuffer = async (
|
||||
doc: TipTapDocument,
|
||||
options: PDFExportOptions = {}
|
||||
): Promise<Buffer> => {
|
||||
const pdfDocument = createPdfDocument(doc, options);
|
||||
const pdfInstance = pdf(pdfDocument);
|
||||
const blob = await pdfInstance.toBlob();
|
||||
const arrayBuffer = await blob.arrayBuffer();
|
||||
return Buffer.from(arrayBuffer);
|
||||
};
|
||||
|
||||
export const renderPlaneDocToPdfBlob = async (doc: TipTapDocument, options: PDFExportOptions = {}): Promise<Blob> => {
|
||||
const pdfDocument = createPdfDocument(doc, options);
|
||||
const pdfInstance = pdf(pdfDocument);
|
||||
return await pdfInstance.toBlob();
|
||||
};
|
||||
245
apps/live/src/lib/pdf/styles.ts
Normal file
245
apps/live/src/lib/pdf/styles.ts
Normal file
@@ -0,0 +1,245 @@
|
||||
import { StyleSheet } from "@react-pdf/renderer";
|
||||
import {
|
||||
BACKGROUND_COLORS,
|
||||
BORDER_COLORS,
|
||||
BRAND_COLORS,
|
||||
CODE_COLORS,
|
||||
LINK_COLORS,
|
||||
MENTION_COLORS,
|
||||
NEUTRAL_COLORS,
|
||||
TEXT_COLORS,
|
||||
} from "./colors";
|
||||
|
||||
export const pdfStyles = StyleSheet.create({
|
||||
page: {
|
||||
padding: 40,
|
||||
fontFamily: "Inter",
|
||||
fontSize: 11,
|
||||
lineHeight: 1.6,
|
||||
color: TEXT_COLORS.primary,
|
||||
},
|
||||
title: {
|
||||
fontSize: 24,
|
||||
fontWeight: 600,
|
||||
marginBottom: 20,
|
||||
color: TEXT_COLORS.primary,
|
||||
},
|
||||
heading1: {
|
||||
fontSize: 20,
|
||||
fontWeight: 600,
|
||||
marginTop: 16,
|
||||
marginBottom: 8,
|
||||
color: TEXT_COLORS.primary,
|
||||
},
|
||||
heading2: {
|
||||
fontSize: 16,
|
||||
fontWeight: 600,
|
||||
marginTop: 14,
|
||||
marginBottom: 6,
|
||||
color: TEXT_COLORS.primary,
|
||||
},
|
||||
heading3: {
|
||||
fontSize: 14,
|
||||
fontWeight: 600,
|
||||
marginTop: 12,
|
||||
marginBottom: 4,
|
||||
color: TEXT_COLORS.primary,
|
||||
},
|
||||
heading4: {
|
||||
fontSize: 12,
|
||||
fontWeight: 600,
|
||||
marginTop: 10,
|
||||
marginBottom: 4,
|
||||
color: TEXT_COLORS.secondary,
|
||||
},
|
||||
heading5: {
|
||||
fontSize: 11,
|
||||
fontWeight: 600,
|
||||
marginTop: 8,
|
||||
marginBottom: 4,
|
||||
color: TEXT_COLORS.secondary,
|
||||
},
|
||||
heading6: {
|
||||
fontSize: 10,
|
||||
fontWeight: 600,
|
||||
marginTop: 6,
|
||||
marginBottom: 4,
|
||||
color: TEXT_COLORS.tertiary,
|
||||
},
|
||||
paragraph: {
|
||||
marginBottom: 0,
|
||||
},
|
||||
paragraphWrapper: {
|
||||
marginBottom: 8,
|
||||
},
|
||||
blockquote: {
|
||||
borderLeftWidth: 3,
|
||||
borderLeftColor: BORDER_COLORS.strong, // Matches .ProseMirror blockquote border-strong
|
||||
paddingLeft: 12,
|
||||
marginLeft: 0,
|
||||
marginVertical: 8,
|
||||
fontStyle: "normal", // Matches editor: font-style: normal
|
||||
fontWeight: 400, // Matches editor: font-weight: 400
|
||||
color: TEXT_COLORS.primary,
|
||||
breakInside: "avoid",
|
||||
},
|
||||
codeBlock: {
|
||||
backgroundColor: BACKGROUND_COLORS.layer1, // bg-layer-1 equivalent
|
||||
padding: 12,
|
||||
borderRadius: 4,
|
||||
fontFamily: "Courier",
|
||||
fontSize: 10,
|
||||
marginVertical: 8,
|
||||
color: TEXT_COLORS.primary,
|
||||
breakInside: "avoid",
|
||||
},
|
||||
codeInline: {
|
||||
backgroundColor: BACKGROUND_COLORS.layer1,
|
||||
padding: 2,
|
||||
paddingHorizontal: 4,
|
||||
borderRadius: 2,
|
||||
fontFamily: "Courier",
|
||||
fontSize: 10,
|
||||
color: CODE_COLORS.text, // Red for inline code
|
||||
},
|
||||
bulletList: {
|
||||
marginVertical: 8,
|
||||
paddingLeft: 0,
|
||||
},
|
||||
orderedList: {
|
||||
marginVertical: 8,
|
||||
paddingLeft: 0,
|
||||
},
|
||||
listItem: {
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
gap: 6,
|
||||
marginBottom: 4,
|
||||
paddingRight: 10,
|
||||
breakInside: "avoid",
|
||||
},
|
||||
listItemBullet: {},
|
||||
listItemContent: {
|
||||
flex: 1,
|
||||
},
|
||||
taskList: {
|
||||
marginVertical: 8,
|
||||
},
|
||||
taskItem: {
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
gap: 6,
|
||||
marginBottom: 4,
|
||||
alignItems: "flex-start",
|
||||
paddingRight: 10,
|
||||
breakInside: "avoid",
|
||||
},
|
||||
taskCheckbox: {
|
||||
width: 12,
|
||||
height: 12,
|
||||
borderWidth: 1,
|
||||
borderColor: BORDER_COLORS.strong, // Matches editor: border-strong
|
||||
borderRadius: 2,
|
||||
marginTop: 2,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
},
|
||||
taskCheckboxChecked: {
|
||||
backgroundColor: BRAND_COLORS.default, // --background-color-accent-primary
|
||||
borderColor: BRAND_COLORS.default, // --border-color-accent-strong
|
||||
},
|
||||
table: {
|
||||
marginVertical: 8,
|
||||
borderWidth: 1,
|
||||
borderColor: BORDER_COLORS.subtle1, // border-subtle-1
|
||||
},
|
||||
tableRow: {
|
||||
flexDirection: "row",
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: BORDER_COLORS.subtle1,
|
||||
breakInside: "avoid",
|
||||
},
|
||||
tableHeaderRow: {
|
||||
backgroundColor: BACKGROUND_COLORS.surface2, // Slightly different from white
|
||||
flexDirection: "row",
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: BORDER_COLORS.subtle1,
|
||||
},
|
||||
tableCell: {
|
||||
padding: 8,
|
||||
borderRightWidth: 1,
|
||||
borderRightColor: BORDER_COLORS.subtle1,
|
||||
flex: 1,
|
||||
},
|
||||
tableHeaderCell: {
|
||||
padding: 8,
|
||||
borderRightWidth: 1,
|
||||
borderRightColor: BORDER_COLORS.subtle1,
|
||||
flex: 1,
|
||||
fontWeight: "bold",
|
||||
},
|
||||
horizontalRule: {
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: BORDER_COLORS.subtle1, // Matches div[data-type="horizontalRule"] border-subtle-1
|
||||
marginVertical: 16,
|
||||
},
|
||||
image: {
|
||||
maxWidth: "100%",
|
||||
marginVertical: 8,
|
||||
},
|
||||
imagePlaceholder: {
|
||||
backgroundColor: BACKGROUND_COLORS.layer1,
|
||||
padding: 16,
|
||||
borderRadius: 4,
|
||||
marginVertical: 8,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
borderWidth: 1,
|
||||
borderColor: BORDER_COLORS.subtle,
|
||||
borderStyle: "dashed",
|
||||
},
|
||||
imagePlaceholderText: {
|
||||
color: TEXT_COLORS.tertiary,
|
||||
fontSize: 10,
|
||||
},
|
||||
callout: {
|
||||
backgroundColor: BACKGROUND_COLORS.layer3, // bg-layer-3 (default callout background)
|
||||
padding: 12,
|
||||
borderRadius: 6,
|
||||
marginVertical: 8,
|
||||
flexDirection: "row",
|
||||
alignItems: "flex-start",
|
||||
breakInside: "avoid",
|
||||
},
|
||||
calloutIconContainer: {
|
||||
marginRight: 10,
|
||||
marginTop: 2,
|
||||
},
|
||||
calloutContent: {
|
||||
flex: 1,
|
||||
color: TEXT_COLORS.primary, // text-primary
|
||||
},
|
||||
mention: {
|
||||
backgroundColor: MENTION_COLORS.background, // bg-accent-primary/20 equivalent
|
||||
color: MENTION_COLORS.text, // text-accent-primary
|
||||
padding: 2,
|
||||
paddingHorizontal: 4,
|
||||
borderRadius: 2,
|
||||
},
|
||||
link: {
|
||||
color: LINK_COLORS.primary, // --txt-link-primary
|
||||
textDecoration: "underline",
|
||||
},
|
||||
bold: {
|
||||
fontWeight: "bold",
|
||||
},
|
||||
italic: {
|
||||
fontStyle: "italic",
|
||||
},
|
||||
underline: {
|
||||
textDecoration: "underline",
|
||||
},
|
||||
strike: {
|
||||
textDecoration: "line-through",
|
||||
},
|
||||
});
|
||||
67
apps/live/src/lib/pdf/types.ts
Normal file
67
apps/live/src/lib/pdf/types.ts
Normal file
@@ -0,0 +1,67 @@
|
||||
import type { Style } from "@react-pdf/types";
|
||||
|
||||
export type TipTapMark = {
|
||||
type: string;
|
||||
attrs?: Record<string, unknown>;
|
||||
};
|
||||
|
||||
export type TipTapNode = {
|
||||
type: string;
|
||||
attrs?: Record<string, unknown>;
|
||||
content?: TipTapNode[];
|
||||
text?: string;
|
||||
marks?: TipTapMark[];
|
||||
};
|
||||
|
||||
export type TipTapDocument = {
|
||||
type: "doc";
|
||||
content?: TipTapNode[];
|
||||
};
|
||||
|
||||
export type KeyGenerator = () => string;
|
||||
|
||||
export type PDFRenderContext = {
|
||||
getKey: KeyGenerator;
|
||||
metadata?: PDFExportMetadata;
|
||||
};
|
||||
|
||||
export type PDFNodeRenderer = (
|
||||
node: TipTapNode,
|
||||
children: React.ReactElement[],
|
||||
context: PDFRenderContext
|
||||
) => React.ReactElement;
|
||||
|
||||
export type PDFMarkRenderer = (mark: TipTapMark, currentStyle: Style) => Style;
|
||||
|
||||
export type NodeRendererRegistry = Record<string, PDFNodeRenderer>;
|
||||
|
||||
export type MarkRendererRegistry = Record<string, PDFMarkRenderer>;
|
||||
|
||||
export type PDFExportOptions = {
|
||||
title?: string;
|
||||
author?: string;
|
||||
subject?: string;
|
||||
pageSize?: "A4" | "A3" | "A2" | "LETTER" | "LEGAL" | "TABLOID";
|
||||
pageOrientation?: "portrait" | "landscape";
|
||||
metadata?: PDFExportMetadata;
|
||||
/** When true, images and other assets are excluded from the PDF */
|
||||
noAssets?: boolean;
|
||||
};
|
||||
|
||||
/**
|
||||
* Metadata for resolving entity references in PDF export
|
||||
*/
|
||||
export type PDFExportMetadata = {
|
||||
/** User mentions (user_mention in mention node) */
|
||||
userMentions?: PDFUserMention[];
|
||||
/** Resolved image URLs: Map of asset ID to presigned URL */
|
||||
resolvedImageUrls?: Record<string, string>;
|
||||
/** When true, images and other assets are excluded from the PDF */
|
||||
noAssets?: boolean;
|
||||
};
|
||||
|
||||
export type PDFUserMention = {
|
||||
id: string;
|
||||
display_name: string;
|
||||
avatar_url?: string;
|
||||
};
|
||||
61
apps/live/src/schema/pdf-export.ts
Normal file
61
apps/live/src/schema/pdf-export.ts
Normal file
@@ -0,0 +1,61 @@
|
||||
import { Schema } from "effect";
|
||||
|
||||
export const PdfExportRequestBody = Schema.Struct({
|
||||
pageId: Schema.NonEmptyTrimmedString,
|
||||
workspaceSlug: Schema.NonEmptyTrimmedString,
|
||||
projectId: Schema.optional(Schema.NonEmptyTrimmedString),
|
||||
title: Schema.optional(Schema.String),
|
||||
author: Schema.optional(Schema.String),
|
||||
subject: Schema.optional(Schema.String),
|
||||
pageSize: Schema.optional(Schema.Literal("A4", "A3", "A2", "LETTER", "LEGAL", "TABLOID")),
|
||||
pageOrientation: Schema.optional(Schema.Literal("portrait", "landscape")),
|
||||
fileName: Schema.optional(Schema.String),
|
||||
noAssets: Schema.optional(Schema.Boolean),
|
||||
});
|
||||
|
||||
export type TPdfExportRequestBody = Schema.Schema.Type<typeof PdfExportRequestBody>;
|
||||
|
||||
export class PdfValidationError extends Schema.TaggedError<PdfValidationError>()("PdfValidationError", {
|
||||
message: Schema.NonEmptyTrimmedString,
|
||||
cause: Schema.optional(Schema.Unknown),
|
||||
}) {}
|
||||
|
||||
export class PdfAuthenticationError extends Schema.TaggedError<PdfAuthenticationError>()("PdfAuthenticationError", {
|
||||
message: Schema.NonEmptyTrimmedString,
|
||||
}) {}
|
||||
|
||||
export class PdfContentFetchError extends Schema.TaggedError<PdfContentFetchError>()("PdfContentFetchError", {
|
||||
message: Schema.NonEmptyTrimmedString,
|
||||
cause: Schema.optional(Schema.Unknown),
|
||||
}) {}
|
||||
|
||||
export class PdfMetadataFetchError extends Schema.TaggedError<PdfMetadataFetchError>()("PdfMetadataFetchError", {
|
||||
message: Schema.NonEmptyTrimmedString,
|
||||
source: Schema.Literal("user-mentions"),
|
||||
cause: Schema.optional(Schema.Unknown),
|
||||
}) {}
|
||||
|
||||
export class PdfImageProcessingError extends Schema.TaggedError<PdfImageProcessingError>()("PdfImageProcessingError", {
|
||||
message: Schema.NonEmptyTrimmedString,
|
||||
assetId: Schema.NonEmptyTrimmedString,
|
||||
cause: Schema.optional(Schema.Unknown),
|
||||
}) {}
|
||||
|
||||
export class PdfGenerationError extends Schema.TaggedError<PdfGenerationError>()("PdfGenerationError", {
|
||||
message: Schema.NonEmptyTrimmedString,
|
||||
cause: Schema.optional(Schema.Unknown),
|
||||
}) {}
|
||||
|
||||
export class PdfTimeoutError extends Schema.TaggedError<PdfTimeoutError>()("PdfTimeoutError", {
|
||||
message: Schema.NonEmptyTrimmedString,
|
||||
operation: Schema.NonEmptyTrimmedString,
|
||||
}) {}
|
||||
|
||||
export type PdfExportError =
|
||||
| PdfValidationError
|
||||
| PdfAuthenticationError
|
||||
| PdfContentFetchError
|
||||
| PdfMetadataFetchError
|
||||
| PdfImageProcessingError
|
||||
| PdfGenerationError
|
||||
| PdfTimeoutError;
|
||||
@@ -1,9 +1,21 @@
|
||||
import { logger } from "@plane/logger";
|
||||
import type { TDocumentPayload, TPage } from "@plane/types";
|
||||
import type { TPage } from "@plane/types";
|
||||
// services
|
||||
import { AppError } from "@/lib/errors";
|
||||
import { APIService } from "../api.service";
|
||||
|
||||
export type TPageDescriptionPayload = {
|
||||
description_binary: string;
|
||||
description_html: string;
|
||||
description: object;
|
||||
};
|
||||
|
||||
export type TUserMention = {
|
||||
id: string;
|
||||
display_name: string;
|
||||
avatar_url?: string;
|
||||
};
|
||||
|
||||
export abstract class PageCoreService extends APIService {
|
||||
protected abstract basePath: string;
|
||||
|
||||
@@ -12,35 +24,41 @@ export abstract class PageCoreService extends APIService {
|
||||
}
|
||||
|
||||
async fetchDetails(pageId: string): Promise<TPage> {
|
||||
return this.get(`${this.basePath}/pages/${pageId}/`, {
|
||||
headers: this.getHeader(),
|
||||
})
|
||||
.then((response) => response?.data)
|
||||
.catch((error) => {
|
||||
const appError = new AppError(error, {
|
||||
context: { operation: "fetchDetails", pageId },
|
||||
});
|
||||
logger.error("Failed to fetch page details", appError);
|
||||
throw appError;
|
||||
try {
|
||||
const response = await this.get(`${this.basePath}/pages/${pageId}/`, {
|
||||
headers: this.getHeader(),
|
||||
});
|
||||
return response?.data as TPage;
|
||||
} catch (error) {
|
||||
const appError = new AppError(error, {
|
||||
context: { operation: "fetchDetails", pageId },
|
||||
});
|
||||
logger.error("Failed to fetch page details", appError);
|
||||
throw appError;
|
||||
}
|
||||
}
|
||||
|
||||
async fetchDescriptionBinary(pageId: string): Promise<any> {
|
||||
return this.get(`${this.basePath}/pages/${pageId}/description/`, {
|
||||
headers: {
|
||||
...this.getHeader(),
|
||||
"Content-Type": "application/octet-stream",
|
||||
},
|
||||
responseType: "arraybuffer",
|
||||
})
|
||||
.then((response) => response?.data)
|
||||
.catch((error) => {
|
||||
const appError = new AppError(error, {
|
||||
context: { operation: "fetchDescriptionBinary", pageId },
|
||||
});
|
||||
logger.error("Failed to fetch page description binary", appError);
|
||||
throw appError;
|
||||
async fetchDescriptionBinary(pageId: string): Promise<Buffer> {
|
||||
try {
|
||||
const response = await this.get(`${this.basePath}/pages/${pageId}/description/`, {
|
||||
headers: {
|
||||
...this.getHeader(),
|
||||
"Content-Type": "application/octet-stream",
|
||||
},
|
||||
responseType: "arraybuffer",
|
||||
});
|
||||
const data = response?.data;
|
||||
if (!Buffer.isBuffer(data)) {
|
||||
throw new Error("Expected response to be a Buffer");
|
||||
}
|
||||
return data;
|
||||
} catch (error) {
|
||||
const appError = new AppError(error, {
|
||||
context: { operation: "fetchDescriptionBinary", pageId },
|
||||
});
|
||||
logger.error("Failed to fetch page description binary", appError);
|
||||
throw appError;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -97,17 +115,113 @@ export abstract class PageCoreService extends APIService {
|
||||
}
|
||||
}
|
||||
|
||||
async updateDescriptionBinary(pageId: string, data: TDocumentPayload): Promise<any> {
|
||||
return this.patch(`${this.basePath}/pages/${pageId}/description/`, data, {
|
||||
headers: this.getHeader(),
|
||||
})
|
||||
.then((response) => response?.data)
|
||||
.catch((error) => {
|
||||
const appError = new AppError(error, {
|
||||
context: { operation: "updateDescriptionBinary", pageId },
|
||||
});
|
||||
logger.error("Failed to update page description binary", appError);
|
||||
throw appError;
|
||||
async updateDescriptionBinary(pageId: string, data: TPageDescriptionPayload): Promise<any> {
|
||||
try {
|
||||
const response = await this.patch(`${this.basePath}/pages/${pageId}/description/`, data, {
|
||||
headers: this.getHeader(),
|
||||
});
|
||||
return response?.data as unknown;
|
||||
} catch (error) {
|
||||
const appError = new AppError(error, {
|
||||
context: { operation: "updateDescriptionBinary", pageId },
|
||||
});
|
||||
logger.error("Failed to update page description binary", appError);
|
||||
throw appError;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetches user mentions for a page
|
||||
* @param pageId - The page ID
|
||||
* @returns Array of user mentions
|
||||
*/
|
||||
async fetchUserMentions(pageId: string): Promise<TUserMention[]> {
|
||||
try {
|
||||
const response = await this.get(`${this.basePath}/pages/${pageId}/mentions/`, {
|
||||
headers: this.getHeader(),
|
||||
params: {
|
||||
mention_type: "user_mention",
|
||||
},
|
||||
});
|
||||
return (response?.data as TUserMention[]) ?? [];
|
||||
} catch (error) {
|
||||
const appError = new AppError(error, {
|
||||
context: { operation: "fetchUserMentions", pageId },
|
||||
});
|
||||
logger.error("Failed to fetch user mentions", appError);
|
||||
throw appError;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Resolves an image asset ID to its actual URL by following the 302 redirect
|
||||
* @param workspaceSlug - The workspace slug
|
||||
* @param assetId - The asset UUID
|
||||
* @param projectId - Optional project ID for project-specific assets
|
||||
* @returns The resolved image URL (presigned S3 URL)
|
||||
*/
|
||||
async resolveImageAssetUrl(
|
||||
workspaceSlug: string,
|
||||
assetId: string,
|
||||
projectId?: string | null
|
||||
): Promise<string | null> {
|
||||
const path = projectId
|
||||
? `/api/assets/v2/workspaces/${workspaceSlug}/projects/${projectId}/${assetId}/?disposition=inline`
|
||||
: `/api/assets/v2/workspaces/${workspaceSlug}/${assetId}/?disposition=inline`;
|
||||
|
||||
try {
|
||||
const response = await this.get(path, {
|
||||
headers: this.getHeader(),
|
||||
maxRedirects: 0,
|
||||
validateStatus: (status: number) => status >= 200 && status < 400,
|
||||
});
|
||||
// If we get a 302, the Location header contains the presigned URL
|
||||
if (response.status === 302 || response.status === 301) {
|
||||
return response.headers?.location || null;
|
||||
}
|
||||
return null;
|
||||
} catch (error) {
|
||||
// Axios throws on 3xx when maxRedirects is 0, so we need to handle the redirect from the error
|
||||
if ((error as any).response?.status === 302 || (error as any).response?.status === 301) {
|
||||
return (error as any).response.headers?.location || null;
|
||||
}
|
||||
logger.error("Failed to resolve image asset URL", {
|
||||
assetId,
|
||||
workspaceSlug,
|
||||
error: (error as any).message,
|
||||
});
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Resolves multiple image asset IDs to their actual URLs
|
||||
* @param workspaceSlug - The workspace slug
|
||||
* @param assetIds - Array of asset UUIDs
|
||||
* @param projectId - Optional project ID for project-specific assets
|
||||
* @returns Map of assetId to resolved URL
|
||||
*/
|
||||
async resolveImageAssetUrls(
|
||||
workspaceSlug: string,
|
||||
assetIds: string[],
|
||||
projectId?: string | null
|
||||
): Promise<Map<string, string>> {
|
||||
const urlMap = new Map<string, string>();
|
||||
|
||||
// Resolve all asset URLs in parallel
|
||||
const results = await Promise.allSettled(
|
||||
assetIds.map(async (assetId) => {
|
||||
const url = await this.resolveImageAssetUrl(workspaceSlug, assetId, projectId);
|
||||
return { assetId, url };
|
||||
})
|
||||
);
|
||||
|
||||
for (const result of results) {
|
||||
if (result.status === "fulfilled" && result.value.url) {
|
||||
urlMap.set(result.value.assetId, result.value.url);
|
||||
}
|
||||
}
|
||||
|
||||
return urlMap;
|
||||
}
|
||||
}
|
||||
|
||||
50
apps/live/src/services/pdf-export/effect-utils.ts
Normal file
50
apps/live/src/services/pdf-export/effect-utils.ts
Normal file
@@ -0,0 +1,50 @@
|
||||
import { Effect, Duration, Schedule, pipe } from "effect";
|
||||
import { PdfTimeoutError } from "@/schema/pdf-export";
|
||||
|
||||
/**
|
||||
* Wraps an effect with timeout and exponential backoff retry logic.
|
||||
* Preserves the environment type R for proper dependency injection.
|
||||
*/
|
||||
export const withTimeoutAndRetry =
|
||||
(operation: string, { timeoutMs = 5000, maxRetries = 2 }: { timeoutMs?: number; maxRetries?: number } = {}) =>
|
||||
<A, E, R>(effect: Effect.Effect<A, E, R>): Effect.Effect<A, E | PdfTimeoutError, R> =>
|
||||
effect.pipe(
|
||||
Effect.timeoutFail({
|
||||
duration: Duration.millis(timeoutMs),
|
||||
onTimeout: () =>
|
||||
new PdfTimeoutError({
|
||||
message: `Operation "${operation}" timed out after ${timeoutMs}ms`,
|
||||
operation,
|
||||
}),
|
||||
}),
|
||||
Effect.retry(
|
||||
pipe(
|
||||
Schedule.exponential(Duration.millis(200)),
|
||||
Schedule.compose(Schedule.recurs(maxRetries)),
|
||||
Schedule.tapInput((error: E | PdfTimeoutError) =>
|
||||
Effect.logWarning("PDF_EXPORT: Retrying operation", { operation, error })
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
|
||||
/**
|
||||
* Recovers from any error with a default fallback value.
|
||||
* Logs the error before recovering.
|
||||
*/
|
||||
export const recoverWithDefault =
|
||||
<A>(fallback: A) =>
|
||||
<E, R>(effect: Effect.Effect<A, E, R>): Effect.Effect<A, never, R> =>
|
||||
effect.pipe(
|
||||
Effect.tapError((error) => Effect.logWarning("PDF_EXPORT: Operation failed, using fallback", { error })),
|
||||
Effect.catchAll(() => Effect.succeed(fallback))
|
||||
);
|
||||
|
||||
/**
|
||||
* Wraps a promise-returning function with proper Effect error handling
|
||||
*/
|
||||
export const tryAsync = <A, E>(fn: () => Promise<A>, onError: (cause: unknown) => E): Effect.Effect<A, E> =>
|
||||
Effect.tryPromise({
|
||||
try: fn,
|
||||
catch: onError,
|
||||
});
|
||||
3
apps/live/src/services/pdf-export/index.ts
Normal file
3
apps/live/src/services/pdf-export/index.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
export { PdfExportService, exportToPdf } from "./pdf-export.service";
|
||||
export * from "./effect-utils";
|
||||
export * from "./types";
|
||||
373
apps/live/src/services/pdf-export/pdf-export.service.ts
Normal file
373
apps/live/src/services/pdf-export/pdf-export.service.ts
Normal file
@@ -0,0 +1,373 @@
|
||||
import { Effect } from "effect";
|
||||
import sharp from "sharp";
|
||||
import { getAllDocumentFormatsFromDocumentEditorBinaryData } from "@plane/editor/lib";
|
||||
import type { PDFExportMetadata, TipTapDocument } from "@/lib/pdf";
|
||||
import { renderPlaneDocToPdfBuffer } from "@/lib/pdf";
|
||||
import { getPageService } from "@/services/page/handler";
|
||||
import type { TDocumentTypes } from "@/types";
|
||||
import {
|
||||
PdfContentFetchError,
|
||||
PdfGenerationError,
|
||||
PdfImageProcessingError,
|
||||
PdfTimeoutError,
|
||||
} from "@/schema/pdf-export";
|
||||
import { withTimeoutAndRetry, recoverWithDefault, tryAsync } from "./effect-utils";
|
||||
import type { PdfExportInput, PdfExportResult, PageContent, MetadataResult } from "./types";
|
||||
|
||||
const IMAGE_CONCURRENCY = 4;
|
||||
const IMAGE_TIMEOUT_MS = 8000;
|
||||
const CONTENT_FETCH_TIMEOUT_MS = 7000;
|
||||
const PDF_RENDER_TIMEOUT_MS = 15000;
|
||||
const IMAGE_MAX_DIMENSION = 1200;
|
||||
|
||||
type TipTapNode = {
|
||||
type: string;
|
||||
attrs?: Record<string, unknown>;
|
||||
content?: TipTapNode[];
|
||||
};
|
||||
|
||||
/**
|
||||
* PDF Export Service
|
||||
*/
|
||||
export class PdfExportService extends Effect.Service<PdfExportService>()("PdfExportService", {
|
||||
sync: () => ({
|
||||
/**
|
||||
* Determines document type
|
||||
*/
|
||||
getDocumentType: (_input: PdfExportInput): TDocumentTypes => {
|
||||
return "project_page";
|
||||
},
|
||||
|
||||
/**
|
||||
* Extracts image asset IDs from document content
|
||||
*/
|
||||
extractImageAssetIds: (doc: TipTapNode): string[] => {
|
||||
const assetIds: string[] = [];
|
||||
|
||||
const traverse = (node: TipTapNode) => {
|
||||
if ((node.type === "imageComponent" || node.type === "image") && node.attrs?.src) {
|
||||
const src = node.attrs.src as string;
|
||||
if (src && !src.startsWith("http") && !src.startsWith("data:")) {
|
||||
assetIds.push(src);
|
||||
}
|
||||
}
|
||||
if (node.content) {
|
||||
for (const child of node.content) {
|
||||
traverse(child);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
traverse(doc);
|
||||
return [...new Set(assetIds)];
|
||||
},
|
||||
|
||||
/**
|
||||
* Fetches page content (description binary) and parses it
|
||||
*/
|
||||
fetchPageContent: (
|
||||
pageService: ReturnType<typeof getPageService>,
|
||||
pageId: string,
|
||||
requestId: string
|
||||
): Effect.Effect<PageContent, PdfContentFetchError | PdfTimeoutError> =>
|
||||
Effect.gen(function* () {
|
||||
yield* Effect.logDebug("PDF_EXPORT: Fetching page content", { requestId, pageId });
|
||||
|
||||
const descriptionBinary = yield* tryAsync(
|
||||
() => pageService.fetchDescriptionBinary(pageId),
|
||||
(cause) =>
|
||||
new PdfContentFetchError({
|
||||
message: "Failed to fetch page content",
|
||||
cause,
|
||||
})
|
||||
).pipe(
|
||||
withTimeoutAndRetry("fetch page content", {
|
||||
timeoutMs: CONTENT_FETCH_TIMEOUT_MS,
|
||||
maxRetries: 3,
|
||||
})
|
||||
);
|
||||
|
||||
if (!descriptionBinary) {
|
||||
return yield* Effect.fail(
|
||||
new PdfContentFetchError({
|
||||
message: "Page content not found",
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
const binaryData = new Uint8Array(descriptionBinary);
|
||||
const { contentJSON, titleHTML } = getAllDocumentFormatsFromDocumentEditorBinaryData(binaryData, true);
|
||||
|
||||
return {
|
||||
contentJSON: contentJSON as TipTapDocument,
|
||||
titleHTML: titleHTML || null,
|
||||
descriptionBinary,
|
||||
};
|
||||
}),
|
||||
|
||||
/**
|
||||
* Fetches user mentions for the page
|
||||
*/
|
||||
fetchUserMentions: (
|
||||
pageService: ReturnType<typeof getPageService>,
|
||||
pageId: string,
|
||||
requestId: string
|
||||
): Effect.Effect<MetadataResult> =>
|
||||
Effect.gen(function* () {
|
||||
yield* Effect.logDebug("PDF_EXPORT: Fetching user mentions", { requestId });
|
||||
|
||||
const userMentionsRaw = yield* tryAsync(
|
||||
async () => {
|
||||
if (pageService.fetchUserMentions) {
|
||||
return await pageService.fetchUserMentions(pageId);
|
||||
}
|
||||
return [];
|
||||
},
|
||||
() => []
|
||||
).pipe(recoverWithDefault([] as Array<{ id: string; display_name: string; avatar_url?: string }>));
|
||||
|
||||
return {
|
||||
userMentions: userMentionsRaw.map((u) => ({
|
||||
id: u.id,
|
||||
display_name: u.display_name,
|
||||
avatar_url: u.avatar_url,
|
||||
})),
|
||||
};
|
||||
}),
|
||||
|
||||
/**
|
||||
* Resolves and processes images for PDF embedding
|
||||
*/
|
||||
processImages: (
|
||||
pageService: ReturnType<typeof getPageService>,
|
||||
workspaceSlug: string,
|
||||
projectId: string | undefined,
|
||||
assetIds: string[],
|
||||
requestId: string
|
||||
): Effect.Effect<Record<string, string>> =>
|
||||
Effect.gen(function* () {
|
||||
if (assetIds.length === 0) {
|
||||
return {};
|
||||
}
|
||||
|
||||
yield* Effect.logDebug("PDF_EXPORT: Processing images", {
|
||||
requestId,
|
||||
count: assetIds.length,
|
||||
});
|
||||
|
||||
// Resolve URLs first
|
||||
const resolvedUrlMap = yield* tryAsync(
|
||||
async () => {
|
||||
const urlMap = new Map<string, string>();
|
||||
for (const assetId of assetIds) {
|
||||
const url = await pageService.resolveImageAssetUrl?.(workspaceSlug, assetId, projectId);
|
||||
if (url) urlMap.set(assetId, url);
|
||||
}
|
||||
return urlMap;
|
||||
},
|
||||
() => new Map<string, string>()
|
||||
).pipe(recoverWithDefault(new Map<string, string>()));
|
||||
|
||||
if (resolvedUrlMap.size === 0) {
|
||||
return {};
|
||||
}
|
||||
|
||||
// Process each image
|
||||
const processSingleImage = ([assetId, url]: [string, string]) =>
|
||||
Effect.gen(function* () {
|
||||
const response = yield* tryAsync(
|
||||
() => fetch(url),
|
||||
(cause) =>
|
||||
new PdfImageProcessingError({
|
||||
message: "Failed to fetch image",
|
||||
assetId,
|
||||
cause,
|
||||
})
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
return yield* Effect.fail(
|
||||
new PdfImageProcessingError({
|
||||
message: `Image fetch returned ${response.status}`,
|
||||
assetId,
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
const arrayBuffer = yield* tryAsync(
|
||||
() => response.arrayBuffer(),
|
||||
(cause) =>
|
||||
new PdfImageProcessingError({
|
||||
message: "Failed to read image body",
|
||||
assetId,
|
||||
cause,
|
||||
})
|
||||
);
|
||||
|
||||
const processedBuffer = yield* tryAsync(
|
||||
() =>
|
||||
sharp(Buffer.from(arrayBuffer))
|
||||
.rotate()
|
||||
.flatten({ background: { r: 255, g: 255, b: 255 } })
|
||||
.resize(IMAGE_MAX_DIMENSION, IMAGE_MAX_DIMENSION, { fit: "inside", withoutEnlargement: true })
|
||||
.jpeg({ quality: 85 })
|
||||
.toBuffer(),
|
||||
(cause) =>
|
||||
new PdfImageProcessingError({
|
||||
message: "Failed to process image",
|
||||
assetId,
|
||||
cause,
|
||||
})
|
||||
);
|
||||
|
||||
const base64 = processedBuffer.toString("base64");
|
||||
return [assetId, `data:image/jpeg;base64,${base64}`] as const;
|
||||
}).pipe(
|
||||
withTimeoutAndRetry(`process image ${assetId}`, {
|
||||
timeoutMs: IMAGE_TIMEOUT_MS,
|
||||
maxRetries: 1,
|
||||
}),
|
||||
Effect.tapError((error) =>
|
||||
Effect.logWarning("PDF_EXPORT: Image processing failed", {
|
||||
requestId,
|
||||
assetId,
|
||||
error,
|
||||
})
|
||||
),
|
||||
Effect.catchAll(() => Effect.succeed(null as readonly [string, string] | null))
|
||||
);
|
||||
|
||||
const entries = Array.from(resolvedUrlMap.entries());
|
||||
const pairs = yield* Effect.forEach(entries, processSingleImage, {
|
||||
concurrency: IMAGE_CONCURRENCY,
|
||||
});
|
||||
|
||||
const filtered = pairs.filter((p): p is readonly [string, string] => p !== null);
|
||||
return Object.fromEntries(filtered);
|
||||
}),
|
||||
|
||||
/**
|
||||
* Renders document to PDF buffer
|
||||
*/
|
||||
renderPdf: (
|
||||
contentJSON: TipTapDocument,
|
||||
metadata: PDFExportMetadata,
|
||||
options: {
|
||||
title?: string;
|
||||
author?: string;
|
||||
subject?: string;
|
||||
pageSize?: "A4" | "A3" | "A2" | "LETTER" | "LEGAL" | "TABLOID";
|
||||
pageOrientation?: "portrait" | "landscape";
|
||||
noAssets?: boolean;
|
||||
},
|
||||
requestId: string
|
||||
): Effect.Effect<Buffer, PdfGenerationError | PdfTimeoutError> =>
|
||||
Effect.gen(function* () {
|
||||
yield* Effect.logDebug("PDF_EXPORT: Rendering PDF", { requestId });
|
||||
|
||||
const pdfBuffer = yield* tryAsync(
|
||||
() =>
|
||||
renderPlaneDocToPdfBuffer(contentJSON, {
|
||||
title: options.title,
|
||||
author: options.author,
|
||||
subject: options.subject,
|
||||
pageSize: options.pageSize,
|
||||
pageOrientation: options.pageOrientation,
|
||||
metadata,
|
||||
noAssets: options.noAssets,
|
||||
}),
|
||||
(cause) =>
|
||||
new PdfGenerationError({
|
||||
message: "Failed to render PDF",
|
||||
cause,
|
||||
})
|
||||
).pipe(withTimeoutAndRetry("render PDF", { timeoutMs: PDF_RENDER_TIMEOUT_MS, maxRetries: 0 }));
|
||||
|
||||
yield* Effect.logInfo("PDF_EXPORT: PDF rendered successfully", {
|
||||
requestId,
|
||||
size: pdfBuffer.length,
|
||||
});
|
||||
|
||||
return pdfBuffer;
|
||||
}),
|
||||
}),
|
||||
}) {}
|
||||
|
||||
/**
|
||||
* Main export pipeline - orchestrates the entire PDF export process
|
||||
* Separate function to avoid circular dependency in service definition
|
||||
*/
|
||||
export const exportToPdf = (
|
||||
input: PdfExportInput
|
||||
): Effect.Effect<PdfExportResult, PdfContentFetchError | PdfGenerationError | PdfTimeoutError, PdfExportService> =>
|
||||
Effect.gen(function* () {
|
||||
const service = yield* PdfExportService;
|
||||
const { requestId, pageId, workspaceSlug, projectId, noAssets } = input;
|
||||
|
||||
yield* Effect.logInfo("PDF_EXPORT: Starting export", { requestId, pageId, workspaceSlug });
|
||||
|
||||
// Create page service
|
||||
const documentType = service.getDocumentType(input);
|
||||
const pageService = getPageService(documentType, {
|
||||
workspaceSlug,
|
||||
projectId: projectId || null,
|
||||
cookie: input.cookie,
|
||||
documentType,
|
||||
userId: "",
|
||||
});
|
||||
|
||||
// Fetch content
|
||||
const content = yield* service.fetchPageContent(pageService, pageId, requestId);
|
||||
|
||||
// Extract image asset IDs
|
||||
const imageAssetIds = service.extractImageAssetIds(content.contentJSON as TipTapNode);
|
||||
|
||||
// Fetch user mentions
|
||||
let metadata = yield* service.fetchUserMentions(pageService, pageId, requestId);
|
||||
|
||||
// Process images if needed
|
||||
if (!noAssets && imageAssetIds.length > 0) {
|
||||
const resolvedImages = yield* service.processImages(
|
||||
pageService,
|
||||
workspaceSlug,
|
||||
projectId,
|
||||
imageAssetIds,
|
||||
requestId
|
||||
);
|
||||
metadata = { ...metadata, resolvedImageUrls: resolvedImages };
|
||||
}
|
||||
|
||||
yield* Effect.logDebug("PDF_EXPORT: Metadata prepared", {
|
||||
requestId,
|
||||
userMentions: metadata.userMentions?.length ?? 0,
|
||||
resolvedImages: Object.keys(metadata.resolvedImageUrls ?? {}).length,
|
||||
});
|
||||
|
||||
// Render PDF
|
||||
const documentTitle = input.title || content.titleHTML || undefined;
|
||||
const pdfBuffer = yield* service.renderPdf(
|
||||
content.contentJSON,
|
||||
metadata,
|
||||
{
|
||||
title: documentTitle,
|
||||
author: input.author,
|
||||
subject: input.subject,
|
||||
pageSize: input.pageSize,
|
||||
pageOrientation: input.pageOrientation,
|
||||
noAssets,
|
||||
},
|
||||
requestId
|
||||
);
|
||||
|
||||
yield* Effect.logInfo("PDF_EXPORT: Export complete", {
|
||||
requestId,
|
||||
pageId,
|
||||
size: pdfBuffer.length,
|
||||
});
|
||||
|
||||
return {
|
||||
pdfBuffer,
|
||||
outputFileName: input.fileName || `page-${pageId}.pdf`,
|
||||
pageId,
|
||||
};
|
||||
});
|
||||
36
apps/live/src/services/pdf-export/types.ts
Normal file
36
apps/live/src/services/pdf-export/types.ts
Normal file
@@ -0,0 +1,36 @@
|
||||
import type { TipTapDocument, PDFUserMention } from "@/lib/pdf";
|
||||
|
||||
export interface PdfExportInput {
|
||||
readonly pageId: string;
|
||||
readonly workspaceSlug: string;
|
||||
readonly projectId?: string;
|
||||
readonly title?: string;
|
||||
readonly author?: string;
|
||||
readonly subject?: string;
|
||||
readonly pageSize?: "A4" | "A3" | "A2" | "LETTER" | "LEGAL" | "TABLOID";
|
||||
readonly pageOrientation?: "portrait" | "landscape";
|
||||
readonly fileName?: string;
|
||||
readonly noAssets?: boolean;
|
||||
readonly cookie: string;
|
||||
readonly requestId: string;
|
||||
}
|
||||
|
||||
export interface PdfExportResult {
|
||||
readonly pdfBuffer: Buffer;
|
||||
readonly outputFileName: string;
|
||||
readonly pageId: string;
|
||||
}
|
||||
|
||||
export interface PageContent {
|
||||
readonly contentJSON: TipTapDocument;
|
||||
readonly titleHTML: string | null;
|
||||
readonly descriptionBinary: Buffer;
|
||||
}
|
||||
|
||||
/**
|
||||
* Metadata - includes user mentions
|
||||
*/
|
||||
export interface MetadataResult {
|
||||
readonly userMentions: PDFUserMention[];
|
||||
readonly resolvedImageUrls?: Record<string, string>;
|
||||
}
|
||||
727
apps/live/tests/lib/pdf/pdf-rendering.test.ts
Normal file
727
apps/live/tests/lib/pdf/pdf-rendering.test.ts
Normal file
@@ -0,0 +1,727 @@
|
||||
import { describe, it, expect } from "vitest";
|
||||
import { PDFParse } from "pdf-parse";
|
||||
import { renderPlaneDocToPdfBuffer } from "@/lib/pdf";
|
||||
import type { TipTapDocument, PDFExportMetadata } from "@/lib/pdf";
|
||||
|
||||
const PDF_HEADER = "%PDF-";
|
||||
|
||||
/**
|
||||
* Helper to extract text content from a PDF buffer
|
||||
*/
|
||||
async function extractPdfText(buffer: Buffer): Promise<string> {
|
||||
const uint8 = new Uint8Array(buffer);
|
||||
const parser = new PDFParse(uint8);
|
||||
const result = await parser.getText();
|
||||
return result.pages.map((p) => p.text).join("\n");
|
||||
}
|
||||
|
||||
describe("PDF Rendering Integration", () => {
|
||||
describe("renderPlaneDocToPdfBuffer", () => {
|
||||
it("should render empty document to valid PDF", async () => {
|
||||
const doc: TipTapDocument = {
|
||||
type: "doc",
|
||||
content: [],
|
||||
};
|
||||
|
||||
const buffer = await renderPlaneDocToPdfBuffer(doc);
|
||||
|
||||
expect(buffer).toBeInstanceOf(Buffer);
|
||||
expect(buffer.length).toBeGreaterThan(0);
|
||||
expect(buffer.toString("ascii", 0, 5)).toBe(PDF_HEADER);
|
||||
});
|
||||
|
||||
it("should render document with title and verify content", async () => {
|
||||
const doc: TipTapDocument = {
|
||||
type: "doc",
|
||||
content: [
|
||||
{
|
||||
type: "paragraph",
|
||||
content: [{ type: "text", text: "Hello World" }],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const buffer = await renderPlaneDocToPdfBuffer(doc, {
|
||||
title: "Test Document",
|
||||
});
|
||||
|
||||
expect(buffer).toBeInstanceOf(Buffer);
|
||||
expect(buffer.toString("ascii", 0, 5)).toBe(PDF_HEADER);
|
||||
|
||||
const text = await extractPdfText(buffer);
|
||||
expect(text).toContain("Hello World");
|
||||
// Title is rendered in PDF content when provided
|
||||
expect(text).toContain("Test Document");
|
||||
});
|
||||
|
||||
it("should render heading nodes and verify text", async () => {
|
||||
const doc: TipTapDocument = {
|
||||
type: "doc",
|
||||
content: [
|
||||
{
|
||||
type: "heading",
|
||||
attrs: { level: 1 },
|
||||
content: [{ type: "text", text: "Main Heading" }],
|
||||
},
|
||||
{
|
||||
type: "heading",
|
||||
attrs: { level: 2 },
|
||||
content: [{ type: "text", text: "Subheading" }],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const buffer = await renderPlaneDocToPdfBuffer(doc);
|
||||
const text = await extractPdfText(buffer);
|
||||
|
||||
expect(text).toContain("Main Heading");
|
||||
expect(text).toContain("Subheading");
|
||||
});
|
||||
|
||||
it("should render paragraph with text and verify content", async () => {
|
||||
const doc: TipTapDocument = {
|
||||
type: "doc",
|
||||
content: [
|
||||
{
|
||||
type: "paragraph",
|
||||
content: [{ type: "text", text: "This is a test paragraph with some content." }],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const buffer = await renderPlaneDocToPdfBuffer(doc);
|
||||
const text = await extractPdfText(buffer);
|
||||
|
||||
expect(text).toContain("This is a test paragraph with some content.");
|
||||
});
|
||||
|
||||
it("should render bullet list with all items", async () => {
|
||||
const doc: TipTapDocument = {
|
||||
type: "doc",
|
||||
content: [
|
||||
{
|
||||
type: "bulletList",
|
||||
content: [
|
||||
{
|
||||
type: "listItem",
|
||||
content: [
|
||||
{
|
||||
type: "paragraph",
|
||||
content: [{ type: "text", text: "First item" }],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "listItem",
|
||||
content: [
|
||||
{
|
||||
type: "paragraph",
|
||||
content: [{ type: "text", text: "Second item" }],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "listItem",
|
||||
content: [
|
||||
{
|
||||
type: "paragraph",
|
||||
content: [{ type: "text", text: "Third item" }],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const buffer = await renderPlaneDocToPdfBuffer(doc);
|
||||
const text = await extractPdfText(buffer);
|
||||
|
||||
expect(text).toContain("First item");
|
||||
expect(text).toContain("Second item");
|
||||
expect(text).toContain("Third item");
|
||||
// Bullet points should be present
|
||||
expect(text).toContain("•");
|
||||
});
|
||||
|
||||
it("should render ordered list with numbers", async () => {
|
||||
const doc: TipTapDocument = {
|
||||
type: "doc",
|
||||
content: [
|
||||
{
|
||||
type: "orderedList",
|
||||
content: [
|
||||
{
|
||||
type: "listItem",
|
||||
content: [
|
||||
{
|
||||
type: "paragraph",
|
||||
content: [{ type: "text", text: "Step one" }],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "listItem",
|
||||
content: [
|
||||
{
|
||||
type: "paragraph",
|
||||
content: [{ type: "text", text: "Step two" }],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const buffer = await renderPlaneDocToPdfBuffer(doc);
|
||||
const text = await extractPdfText(buffer);
|
||||
|
||||
expect(text).toContain("Step one");
|
||||
expect(text).toContain("Step two");
|
||||
// Numbers should be present
|
||||
expect(text).toMatch(/1\./);
|
||||
expect(text).toMatch(/2\./);
|
||||
});
|
||||
|
||||
it("should render task list with task text", async () => {
|
||||
const doc: TipTapDocument = {
|
||||
type: "doc",
|
||||
content: [
|
||||
{
|
||||
type: "taskList",
|
||||
content: [
|
||||
{
|
||||
type: "taskItem",
|
||||
attrs: { checked: true },
|
||||
content: [
|
||||
{
|
||||
type: "paragraph",
|
||||
content: [{ type: "text", text: "Completed task" }],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "taskItem",
|
||||
attrs: { checked: false },
|
||||
content: [
|
||||
{
|
||||
type: "paragraph",
|
||||
content: [{ type: "text", text: "Pending task" }],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const buffer = await renderPlaneDocToPdfBuffer(doc);
|
||||
const text = await extractPdfText(buffer);
|
||||
|
||||
expect(text).toContain("Completed task");
|
||||
expect(text).toContain("Pending task");
|
||||
});
|
||||
|
||||
it("should render code block with code content", async () => {
|
||||
const doc: TipTapDocument = {
|
||||
type: "doc",
|
||||
content: [
|
||||
{
|
||||
type: "codeBlock",
|
||||
content: [
|
||||
{ type: "text", text: "const greeting = 'Hello';\n" },
|
||||
{ type: "text", text: "console.log(greeting);" },
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const buffer = await renderPlaneDocToPdfBuffer(doc);
|
||||
const text = await extractPdfText(buffer);
|
||||
|
||||
expect(text).toContain("const greeting");
|
||||
expect(text).toContain("console.log");
|
||||
});
|
||||
|
||||
it("should render blockquote with quoted text", async () => {
|
||||
const doc: TipTapDocument = {
|
||||
type: "doc",
|
||||
content: [
|
||||
{
|
||||
type: "blockquote",
|
||||
content: [
|
||||
{
|
||||
type: "paragraph",
|
||||
content: [{ type: "text", text: "This is a quoted text." }],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const buffer = await renderPlaneDocToPdfBuffer(doc);
|
||||
const text = await extractPdfText(buffer);
|
||||
|
||||
expect(text).toContain("This is a quoted text.");
|
||||
});
|
||||
|
||||
it("should render table with all cell content", async () => {
|
||||
const doc: TipTapDocument = {
|
||||
type: "doc",
|
||||
content: [
|
||||
{
|
||||
type: "table",
|
||||
content: [
|
||||
{
|
||||
type: "tableRow",
|
||||
content: [
|
||||
{
|
||||
type: "tableHeader",
|
||||
content: [
|
||||
{
|
||||
type: "paragraph",
|
||||
content: [{ type: "text", text: "Header 1" }],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "tableHeader",
|
||||
content: [
|
||||
{
|
||||
type: "paragraph",
|
||||
content: [{ type: "text", text: "Header 2" }],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "tableRow",
|
||||
content: [
|
||||
{
|
||||
type: "tableCell",
|
||||
content: [
|
||||
{
|
||||
type: "paragraph",
|
||||
content: [{ type: "text", text: "Cell 1" }],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "tableCell",
|
||||
content: [
|
||||
{
|
||||
type: "paragraph",
|
||||
content: [{ type: "text", text: "Cell 2" }],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const buffer = await renderPlaneDocToPdfBuffer(doc);
|
||||
const text = await extractPdfText(buffer);
|
||||
|
||||
expect(text).toContain("Header 1");
|
||||
expect(text).toContain("Header 2");
|
||||
expect(text).toContain("Cell 1");
|
||||
expect(text).toContain("Cell 2");
|
||||
});
|
||||
|
||||
it("should render horizontal rule with surrounding text", async () => {
|
||||
const doc: TipTapDocument = {
|
||||
type: "doc",
|
||||
content: [
|
||||
{
|
||||
type: "paragraph",
|
||||
content: [{ type: "text", text: "Before rule" }],
|
||||
},
|
||||
{ type: "horizontalRule" },
|
||||
{
|
||||
type: "paragraph",
|
||||
content: [{ type: "text", text: "After rule" }],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const buffer = await renderPlaneDocToPdfBuffer(doc);
|
||||
const text = await extractPdfText(buffer);
|
||||
|
||||
expect(text).toContain("Before rule");
|
||||
expect(text).toContain("After rule");
|
||||
});
|
||||
|
||||
it("should render text with marks (bold, italic) preserving content", async () => {
|
||||
const doc: TipTapDocument = {
|
||||
type: "doc",
|
||||
content: [
|
||||
{
|
||||
type: "paragraph",
|
||||
content: [
|
||||
{ type: "text", text: "Normal " },
|
||||
{
|
||||
type: "text",
|
||||
text: "bold",
|
||||
marks: [{ type: "bold" }],
|
||||
},
|
||||
{ type: "text", text: " and " },
|
||||
{
|
||||
type: "text",
|
||||
text: "italic",
|
||||
marks: [{ type: "italic" }],
|
||||
},
|
||||
{ type: "text", text: " text." },
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const buffer = await renderPlaneDocToPdfBuffer(doc);
|
||||
const text = await extractPdfText(buffer);
|
||||
|
||||
expect(text).toContain("Normal");
|
||||
expect(text).toContain("bold");
|
||||
expect(text).toContain("italic");
|
||||
expect(text).toContain("text.");
|
||||
});
|
||||
|
||||
it("should render link marks with link text", async () => {
|
||||
const doc: TipTapDocument = {
|
||||
type: "doc",
|
||||
content: [
|
||||
{
|
||||
type: "paragraph",
|
||||
content: [
|
||||
{ type: "text", text: "Click " },
|
||||
{
|
||||
type: "text",
|
||||
text: "here",
|
||||
marks: [{ type: "link", attrs: { href: "https://example.com" } }],
|
||||
},
|
||||
{ type: "text", text: " to visit." },
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const buffer = await renderPlaneDocToPdfBuffer(doc);
|
||||
const text = await extractPdfText(buffer);
|
||||
|
||||
expect(text).toContain("Click");
|
||||
expect(text).toContain("here");
|
||||
expect(text).toContain("to visit");
|
||||
});
|
||||
});
|
||||
|
||||
describe("page options", () => {
|
||||
it("should support different page sizes and verify content renders", async () => {
|
||||
const doc: TipTapDocument = {
|
||||
type: "doc",
|
||||
content: [
|
||||
{
|
||||
type: "paragraph",
|
||||
content: [{ type: "text", text: "Page size test content" }],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const a4Buffer = await renderPlaneDocToPdfBuffer(doc, { pageSize: "A4" });
|
||||
const letterBuffer = await renderPlaneDocToPdfBuffer(doc, { pageSize: "LETTER" });
|
||||
|
||||
const a4Text = await extractPdfText(a4Buffer);
|
||||
const letterText = await extractPdfText(letterBuffer);
|
||||
|
||||
expect(a4Text).toContain("Page size test content");
|
||||
expect(letterText).toContain("Page size test content");
|
||||
// Different page sizes should produce different PDF sizes
|
||||
expect(a4Buffer.length).not.toBe(letterBuffer.length);
|
||||
});
|
||||
|
||||
it("should support landscape orientation and verify content", async () => {
|
||||
const doc: TipTapDocument = {
|
||||
type: "doc",
|
||||
content: [
|
||||
{
|
||||
type: "paragraph",
|
||||
content: [{ type: "text", text: "Landscape content here" }],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const portraitBuffer = await renderPlaneDocToPdfBuffer(doc, { pageOrientation: "portrait" });
|
||||
const landscapeBuffer = await renderPlaneDocToPdfBuffer(doc, { pageOrientation: "landscape" });
|
||||
|
||||
const portraitText = await extractPdfText(portraitBuffer);
|
||||
const landscapeText = await extractPdfText(landscapeBuffer);
|
||||
|
||||
expect(portraitText).toContain("Landscape content here");
|
||||
expect(landscapeText).toContain("Landscape content here");
|
||||
expect(portraitBuffer.length).not.toBe(landscapeBuffer.length);
|
||||
});
|
||||
|
||||
it("should include author metadata in PDF", async () => {
|
||||
const doc: TipTapDocument = {
|
||||
type: "doc",
|
||||
content: [
|
||||
{
|
||||
type: "paragraph",
|
||||
content: [{ type: "text", text: "Document content" }],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const buffer = await renderPlaneDocToPdfBuffer(doc, {
|
||||
author: "Test Author",
|
||||
});
|
||||
|
||||
// Verify PDF is valid and contains content
|
||||
expect(buffer).toBeInstanceOf(Buffer);
|
||||
expect(buffer.toString("ascii", 0, 5)).toBe(PDF_HEADER);
|
||||
// Author metadata is embedded in PDF info dict (checked via raw bytes)
|
||||
const pdfString = buffer.toString("latin1");
|
||||
expect(pdfString).toContain("/Author");
|
||||
});
|
||||
|
||||
it("should include subject metadata in PDF", async () => {
|
||||
const doc: TipTapDocument = {
|
||||
type: "doc",
|
||||
content: [
|
||||
{
|
||||
type: "paragraph",
|
||||
content: [{ type: "text", text: "Document content" }],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const buffer = await renderPlaneDocToPdfBuffer(doc, {
|
||||
subject: "Technical Documentation",
|
||||
});
|
||||
|
||||
// Verify PDF is valid
|
||||
expect(buffer).toBeInstanceOf(Buffer);
|
||||
expect(buffer.toString("ascii", 0, 5)).toBe(PDF_HEADER);
|
||||
// Subject metadata is embedded in PDF info dict
|
||||
const pdfString = buffer.toString("latin1");
|
||||
expect(pdfString).toContain("/Subject");
|
||||
});
|
||||
});
|
||||
|
||||
describe("metadata rendering", () => {
|
||||
it("should render user mentions with resolved display name", async () => {
|
||||
const metadata: PDFExportMetadata = {
|
||||
userMentions: [{ id: "user-123", display_name: "John Doe" }],
|
||||
};
|
||||
|
||||
const doc: TipTapDocument = {
|
||||
type: "doc",
|
||||
content: [
|
||||
{
|
||||
type: "paragraph",
|
||||
content: [
|
||||
{ type: "text", text: "Hello " },
|
||||
{
|
||||
type: "mention",
|
||||
attrs: {
|
||||
entity_name: "user_mention",
|
||||
entity_identifier: "user-123",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const buffer = await renderPlaneDocToPdfBuffer(doc, { metadata });
|
||||
const text = await extractPdfText(buffer);
|
||||
|
||||
expect(text).toContain("Hello");
|
||||
expect(text).toContain("John Doe");
|
||||
});
|
||||
});
|
||||
|
||||
describe("complex documents", () => {
|
||||
it("should render a full document with mixed content and verify all sections", async () => {
|
||||
const doc: TipTapDocument = {
|
||||
type: "doc",
|
||||
content: [
|
||||
{
|
||||
type: "heading",
|
||||
attrs: { level: 1 },
|
||||
content: [{ type: "text", text: "Project Overview" }],
|
||||
},
|
||||
{
|
||||
type: "paragraph",
|
||||
content: [
|
||||
{ type: "text", text: "This document describes the " },
|
||||
{ type: "text", text: "key features", marks: [{ type: "bold" }] },
|
||||
{ type: "text", text: " of the project." },
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "heading",
|
||||
attrs: { level: 2 },
|
||||
content: [{ type: "text", text: "Features" }],
|
||||
},
|
||||
{
|
||||
type: "bulletList",
|
||||
content: [
|
||||
{
|
||||
type: "listItem",
|
||||
content: [
|
||||
{
|
||||
type: "paragraph",
|
||||
content: [{ type: "text", text: "Feature A - Core functionality" }],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "listItem",
|
||||
content: [
|
||||
{
|
||||
type: "paragraph",
|
||||
content: [{ type: "text", text: "Feature B - Advanced options" }],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "heading",
|
||||
attrs: { level: 2 },
|
||||
content: [{ type: "text", text: "Code Example" }],
|
||||
},
|
||||
{
|
||||
type: "codeBlock",
|
||||
content: [{ type: "text", text: "function hello() {\n return 'world';\n}" }],
|
||||
},
|
||||
{
|
||||
type: "blockquote",
|
||||
content: [
|
||||
{
|
||||
type: "paragraph",
|
||||
content: [{ type: "text", text: "Important: Review before deployment." }],
|
||||
},
|
||||
],
|
||||
},
|
||||
{ type: "horizontalRule" },
|
||||
{
|
||||
type: "paragraph",
|
||||
content: [{ type: "text", text: "End of document." }],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const buffer = await renderPlaneDocToPdfBuffer(doc, {
|
||||
title: "Project Overview",
|
||||
author: "Development Team",
|
||||
subject: "Technical Documentation",
|
||||
});
|
||||
|
||||
const text = await extractPdfText(buffer);
|
||||
|
||||
// Verify metadata is embedded in PDF
|
||||
const pdfString = buffer.toString("latin1");
|
||||
expect(pdfString).toContain("/Title");
|
||||
expect(pdfString).toContain("/Author");
|
||||
expect(pdfString).toContain("/Subject");
|
||||
|
||||
// Verify all content sections are present
|
||||
expect(text).toContain("Project Overview");
|
||||
expect(text).toContain("This document describes the");
|
||||
expect(text).toContain("key features");
|
||||
expect(text).toContain("Features");
|
||||
expect(text).toContain("Feature A - Core functionality");
|
||||
expect(text).toContain("Feature B - Advanced options");
|
||||
expect(text).toContain("Code Example");
|
||||
expect(text).toContain("function hello");
|
||||
expect(text).toContain("Important: Review before deployment");
|
||||
expect(text).toContain("End of document");
|
||||
});
|
||||
|
||||
it("should render deeply nested lists with all levels", async () => {
|
||||
const doc: TipTapDocument = {
|
||||
type: "doc",
|
||||
content: [
|
||||
{
|
||||
type: "bulletList",
|
||||
content: [
|
||||
{
|
||||
type: "listItem",
|
||||
content: [
|
||||
{
|
||||
type: "paragraph",
|
||||
content: [{ type: "text", text: "Level 1" }],
|
||||
},
|
||||
{
|
||||
type: "bulletList",
|
||||
content: [
|
||||
{
|
||||
type: "listItem",
|
||||
content: [
|
||||
{
|
||||
type: "paragraph",
|
||||
content: [{ type: "text", text: "Level 2" }],
|
||||
},
|
||||
{
|
||||
type: "bulletList",
|
||||
content: [
|
||||
{
|
||||
type: "listItem",
|
||||
content: [
|
||||
{
|
||||
type: "paragraph",
|
||||
content: [{ type: "text", text: "Level 3" }],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const buffer = await renderPlaneDocToPdfBuffer(doc);
|
||||
const text = await extractPdfText(buffer);
|
||||
|
||||
expect(text).toContain("Level 1");
|
||||
expect(text).toContain("Level 2");
|
||||
expect(text).toContain("Level 3");
|
||||
});
|
||||
});
|
||||
|
||||
describe("noAssets option", () => {
|
||||
it("should render text but skip images when noAssets is true", async () => {
|
||||
const doc: TipTapDocument = {
|
||||
type: "doc",
|
||||
content: [
|
||||
{
|
||||
type: "image",
|
||||
attrs: { src: "https://example.com/image.png" },
|
||||
},
|
||||
{
|
||||
type: "paragraph",
|
||||
content: [{ type: "text", text: "Text after image" }],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const buffer = await renderPlaneDocToPdfBuffer(doc, { noAssets: true });
|
||||
const text = await extractPdfText(buffer);
|
||||
|
||||
expect(text).toContain("Text after image");
|
||||
});
|
||||
|
||||
});
|
||||
});
|
||||
149
apps/live/tests/services/pdf-export/effect-utils.test.ts
Normal file
149
apps/live/tests/services/pdf-export/effect-utils.test.ts
Normal file
@@ -0,0 +1,149 @@
|
||||
import { describe, it, expect, assert } from "vitest";
|
||||
import { Effect, Duration, Either } from "effect";
|
||||
import { withTimeoutAndRetry, recoverWithDefault, tryAsync } from "@/services/pdf-export/effect-utils";
|
||||
import { PdfTimeoutError } from "@/schema/pdf-export";
|
||||
|
||||
describe("effect-utils", () => {
|
||||
describe("withTimeoutAndRetry", () => {
|
||||
it("should succeed when effect completes within timeout", async () => {
|
||||
const effect = Effect.succeed("success");
|
||||
const wrapped = withTimeoutAndRetry("test-operation")(effect);
|
||||
|
||||
const result = await Effect.runPromise(wrapped);
|
||||
expect(result).toBe("success");
|
||||
});
|
||||
|
||||
it("should fail with PdfTimeoutError when effect exceeds timeout", async () => {
|
||||
const slowEffect = Effect.gen(function* () {
|
||||
yield* Effect.sleep(Duration.millis(500));
|
||||
return "success";
|
||||
});
|
||||
|
||||
const wrapped = withTimeoutAndRetry("test-operation", {
|
||||
timeoutMs: 50,
|
||||
maxRetries: 0,
|
||||
})(slowEffect);
|
||||
|
||||
const result = await Effect.runPromise(Effect.either(wrapped));
|
||||
|
||||
assert(Either.isLeft(result), "Expected Left but got Right");
|
||||
expect(result.left).toBeInstanceOf(PdfTimeoutError);
|
||||
expect((result.left as PdfTimeoutError).operation).toBe("test-operation");
|
||||
});
|
||||
|
||||
it("should retry on failure up to maxRetries times", async () => {
|
||||
const attemptCounter = { count: 0 };
|
||||
|
||||
const flakyEffect = Effect.gen(function* () {
|
||||
attemptCounter.count++;
|
||||
if (attemptCounter.count < 3) {
|
||||
return yield* Effect.fail(new Error("transient failure"));
|
||||
}
|
||||
return "success";
|
||||
});
|
||||
|
||||
const wrapped = withTimeoutAndRetry("test-operation", {
|
||||
timeoutMs: 5000,
|
||||
maxRetries: 3,
|
||||
})(flakyEffect);
|
||||
|
||||
const result = await Effect.runPromise(wrapped);
|
||||
|
||||
expect(result).toBe("success");
|
||||
expect(attemptCounter.count).toBe(3);
|
||||
});
|
||||
|
||||
it("should fail after exhausting retries", async () => {
|
||||
const effect = Effect.fail(new Error("permanent failure"));
|
||||
|
||||
const wrapped = withTimeoutAndRetry("test-operation", {
|
||||
timeoutMs: 5000,
|
||||
maxRetries: 2,
|
||||
})(effect);
|
||||
|
||||
const result = await Effect.runPromise(Effect.either(wrapped));
|
||||
|
||||
expect(result._tag).toBe("Left");
|
||||
});
|
||||
});
|
||||
|
||||
describe("recoverWithDefault", () => {
|
||||
it("should return success value when effect succeeds", async () => {
|
||||
const effect = Effect.succeed("success");
|
||||
const wrapped = recoverWithDefault("fallback")(effect);
|
||||
|
||||
const result = await Effect.runPromise(wrapped);
|
||||
expect(result).toBe("success");
|
||||
});
|
||||
|
||||
it("should return fallback value when effect fails", async () => {
|
||||
const effect = Effect.fail(new Error("failure"));
|
||||
const wrapped = recoverWithDefault("fallback")(effect);
|
||||
|
||||
const result = await Effect.runPromise(wrapped);
|
||||
expect(result).toBe("fallback");
|
||||
});
|
||||
|
||||
it("should log warning when recovering from error", async () => {
|
||||
const logs: string[] = [];
|
||||
|
||||
const effect = Effect.fail(new Error("test error")).pipe(
|
||||
recoverWithDefault("fallback"),
|
||||
Effect.tap(() => Effect.sync(() => logs.push("after recovery")))
|
||||
);
|
||||
|
||||
const result = await Effect.runPromise(effect);
|
||||
|
||||
expect(result).toBe("fallback");
|
||||
expect(logs).toContain("after recovery");
|
||||
});
|
||||
|
||||
it("should work with complex fallback objects", async () => {
|
||||
const fallback = { items: [], count: 0, metadata: { version: 1 } };
|
||||
|
||||
const effect = Effect.fail(new Error("failure"));
|
||||
const wrapped = recoverWithDefault(fallback)(effect);
|
||||
|
||||
const result = await Effect.runPromise(wrapped);
|
||||
expect(result).toEqual(fallback);
|
||||
});
|
||||
});
|
||||
|
||||
describe("tryAsync", () => {
|
||||
it("should wrap successful promise", async () => {
|
||||
const effect = tryAsync(
|
||||
() => Promise.resolve("success"),
|
||||
(err) => new Error(`wrapped: ${err}`)
|
||||
);
|
||||
|
||||
const result = await Effect.runPromise(effect);
|
||||
expect(result).toBe("success");
|
||||
});
|
||||
|
||||
it("should wrap rejected promise with custom error", async () => {
|
||||
const effect = tryAsync(
|
||||
() => Promise.reject(new Error("original")),
|
||||
(err) => new Error(`wrapped: ${(err as Error).message}`)
|
||||
);
|
||||
|
||||
const result = await Effect.runPromise(Effect.either(effect));
|
||||
|
||||
assert(Either.isLeft(result), "Expected Left but got Right");
|
||||
expect(result.left.message).toBe("wrapped: original");
|
||||
});
|
||||
|
||||
it("should handle synchronous throws", async () => {
|
||||
const effect = tryAsync(
|
||||
() => {
|
||||
throw new Error("sync error");
|
||||
},
|
||||
(err) => new Error(`caught: ${(err as Error).message}`)
|
||||
);
|
||||
|
||||
const result = await Effect.runPromise(Effect.either(effect));
|
||||
|
||||
assert(Either.isLeft(result), "Expected Left but got Right");
|
||||
expect(result.left.message).toBe("caught: sync error");
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -6,6 +6,7 @@
|
||||
"noImplicitOverride": false,
|
||||
"noImplicitReturns": false,
|
||||
"noUnusedLocals": false,
|
||||
"jsx": "react-jsx",
|
||||
|
||||
"paths": {
|
||||
"@/*": ["./src/*"],
|
||||
@@ -14,6 +15,6 @@
|
||||
"experimentalDecorators": true,
|
||||
"emitDecoratorMetadata": true
|
||||
},
|
||||
"include": ["src"],
|
||||
"include": ["src", "tests"],
|
||||
"exclude": ["node_modules", "dist"]
|
||||
}
|
||||
|
||||
21
apps/live/vitest.config.ts
Normal file
21
apps/live/vitest.config.ts
Normal file
@@ -0,0 +1,21 @@
|
||||
import { defineConfig } from "vitest/config";
|
||||
import path from "path";
|
||||
|
||||
export default defineConfig({
|
||||
test: {
|
||||
environment: "node",
|
||||
globals: true,
|
||||
include: ["tests/**/*.test.ts", "tests/**/*.spec.ts"],
|
||||
coverage: {
|
||||
provider: "v8",
|
||||
reporter: ["text", "json", "html"],
|
||||
include: ["src/**/*.ts"],
|
||||
exclude: ["src/**/*.d.ts", "src/**/types.ts"],
|
||||
},
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
"@": path.resolve(__dirname, "./src"),
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -200,6 +200,7 @@ export const DescriptionInput = observer(function DescriptionInput(props: Props)
|
||||
control={control}
|
||||
render={({ field: { onChange } }) => (
|
||||
<RichTextEditor
|
||||
key={entityId}
|
||||
editable={!disabled}
|
||||
ref={editorRef}
|
||||
id={entityId}
|
||||
|
||||
1140
pnpm-lock.yaml
generated
1140
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user