feat(modules.board): Add extraction of presentation pages as images

packages/modules.board/package.json

@@ -41,7 +41,6 @@
     "@xipkg/textarea": "1.3.0",
     "@xipkg/tooltip": "^2.2.0",
     "@xipkg/utils": "^1.8.0",
-    "chart.js": "^4.5.1",
     "common.api": "workspace:*",
     "common.config": "workspace:*",
     "common.env": "workspace:*",
@@ -58,6 +57,7 @@
     "nanoid": "^5.1.5",
     "pdfjs-dist": "^4.10.38",
     "pica": "9.0.1",
+    "chart.js": "^4.5.1",
     "pptxviewjs": "1.1.9",
     "react-hook-form": "^7.73.1",
     "react-i18next": "15.4.1",

packages/modules.board/src/features/pickAndInsertPresentation.ts

@@ -2,27 +2,39 @@ import { nanoid } from 'nanoid';
 import { Editor, DrShapeId } from '@ibodr/draw';
 import { toast } from 'sonner';
 import { uploadFileRequest } from 'common.services';
-
 import { PresentationShape } from '../shapes/presentation';
 
+import i18n from 'i18next';
+
 const MAX_PRESENTATION_SIZE_BYTES = 5 * 1024 * 1024;
 const MAX_PRESENTATION_SHAPES = 20;
 
-const DEFAULT_WIDTH = 800;
+const DEFAULT_WIDTH = 720;
 
 export async function insertPresentation(editor: Editor, file: File, token: string) {
   if (!file.name.toLowerCase().endsWith('.pptx')) {
-    toast.error('Неподдерживаемый формат', {
-      description: 'Выберите файл PPTX',
+    toast.error(i18n.t('toast.unsupportedFormat', { ns: 'board' }), {
+      description: i18n.t('toast.presentationFormatDesc', { ns: 'board' }),
+      duration: 5000,
     });
 
     return;
   }
 
   if (file.size > MAX_PRESENTATION_SIZE_BYTES) {
-    toast.error('Файл слишком большой', {
-      description: 'Размер презентации не должен превышать 5 MiB',
-    });
+    toast.error(
+      i18n.t('toast.presentationSizeDesc', {
+        ns: 'board',
+        size: (file.size / (1024 * 1024)).toFixed(2),
+      }),
+      {
+        description: i18n.t('toast.presentationLimitDesc', {
+          ns: 'board',
+          max: MAX_PRESENTATION_SHAPES,
+        }),
+        duration: 5000,
+      },
+    );
 
     return;
   }
@@ -32,8 +44,12 @@ export async function insertPresentation(editor: Editor, file: File, token: stri
     .filter((shape) => shape.type === 'presentation').length;
 
   if (count >= MAX_PRESENTATION_SHAPES) {
-    toast.error('Лимит презентаций', {
-      description: `На доске может быть не более ${MAX_PRESENTATION_SHAPES} презентаций`,
+    toast.error(i18n.t('toast.presentationLimitTitle', { ns: 'board' }), {
+      description: i18n.t('toast.presentationLimitDesc', {
+        ns: 'board',
+        max: MAX_PRESENTATION_SHAPES,
+      }),
+      duration: 5000,
     });
 
     return;
@@ -80,7 +96,7 @@ export async function insertPresentation(editor: Editor, file: File, token: stri
   } catch (err) {
     console.error('[insertPresentation] upload failed', err);
 
-    toast.error('Ошибка загрузки презентации');
+    toast.error(i18n.t('toast.presentationUploadFailed', { ns: 'board' }));
 
     editor.deleteShapes([shapeId]);
   }

packages/modules.board/src/locales/en.json

@@ -207,7 +207,8 @@
     "loading": "Loading..."
   },
   "presentation": {
-    "loading": "Loading..."
+    "loading": "Loading...",
+    "extractPage": "Extract slide as image"
   },
   "audio": {
     "label": "Audio",
@@ -282,6 +283,12 @@
     "pdfLimitDesc": "The board can have at most {{max}} PDF objects.",
     "pdfUploadFailed": "Failed to upload PDF",
     "pdfUploadError": "PDF upload error",
+    "presentationFormatDesc": "Choose a presentation file (PPT, PPTX).",
+    "presentationSizeDesc": "Presentation size must not exceed 5 MiB (currently {{size}} MiB).",
+    "presentationLimitTitle": "Presentation limit",
+    "presentationLimitDesc": "The board can have at most {{max}} presentations.",
+    "presentationUploadFailed": "Failed to upload presentation",
+    "presentationUploadError": "Presentation upload error",
     "audioFormatDesc": "Choose an audio file (MP3, OGG, WAV, AAC, FLAC, etc.).",
     "audioInvalidFormat": "Invalid file format",
     "audioInvalidFormatDesc": "File contents do not match the declared audio type.",

packages/modules.board/src/locales/ru.json

@@ -207,7 +207,8 @@
     "loading": "Загрузка..."
   },
   "presentation": {
-    "loading": "Загрузка..."
+    "loading": "Загрузка...",
+    "extractPage": "Извлечь слайд как изображение"
   },
   "audio": {
     "label": "Аудио",
@@ -282,6 +283,12 @@
     "pdfLimitDesc": "На доске может быть не более {{max}} PDF-объектов.",
     "pdfUploadFailed": "Не удалось загрузить PDF",
     "pdfUploadError": "Ошибка загрузки PDF",
+    "presentationFormatDesc": "Выберите файл в формате презентации (PPT, PPTX).",
+    "presentationSizeDesc": "Размер презентации не должен превышать 5 MiB (сейчас {{size}} MiB).",
+    "presentationLimitTitle": "Лимит презентаций",
+    "presentationLimitDesc": "На доске может быть не более {{max}} презентаций.",
+    "presentationUploadFailed": "Не удалось загрузить презентацию",
+    "presentationUploadError": "Ошибка загрузки презентации",
     "audioFormatDesc": "Выберите аудиофайл (MP3, OGG, WAV, AAC, FLAC и др.).",
     "audioInvalidFormat": "Неверный формат файла",
     "audioInvalidFormatDesc": "Содержимое файла не соответствует заявленному типу аудио.",

packages/modules.board/src/shapes/presentation/PresentationControls.tsx

@@ -1,7 +1,8 @@
 import { useCallback } from 'react';
 import { Button } from '@xipkg/button';
-import { ArrowLeft, ArrowRight } from '@xipkg/icons';
+import { ArrowLeft, ArrowRight, Image } from '@xipkg/icons';
 import { CONTROLS_HEIGHT } from './consts';
+import { useTranslation } from 'react-i18next';
 
 type PdfPageControlsProps = {
   fileName: string;
@@ -11,6 +12,7 @@ type PdfPageControlsProps = {
   onPageChange: (page: number) => void;
   pagesVisible?: number;
   onPagesVisibleChange?: (n: number) => void;
+  onExtractPage?: () => void;
 };
 
 export const PresentationControls = ({
@@ -19,7 +21,10 @@ export const PresentationControls = ({
   totalPages,
   disabled,
   onPageChange,
+  onExtractPage,
 }: PdfPageControlsProps) => {
+  const { t } = useTranslation('board');
+
   const goPrev = useCallback(
     (e: React.PointerEvent) => {
       e.stopPropagation();
@@ -73,6 +78,20 @@ export const PresentationControls = ({
           </Button>
         </>
       )}
+      {onExtractPage && (
+        <Button
+          variant="none"
+          size="s"
+          className="hover:bg-status-info-background h-6 w-6 shrink-0 rounded-lg p-0"
+          onPointerDown={(e) => {
+            e.stopPropagation();
+            onExtractPage();
+          }}
+          title={t('pdf.extractPage')}
+        >
+          <Image className="h-4 w-4" />
+        </Button>
+      )}
     </div>
   );
 };

packages/modules.board/src/shapes/presentation/PresentationViewer.tsx

@@ -8,11 +8,15 @@ import { resolveAssetUrl } from '../../utils/resolveAssetUrl';
 
 import type { PresentationShape } from './PresentationShape';
 import { PresentationControls } from './PresentationControls';
+import { insertImage } from '../../features/pickAndInsertImage';
+import { useEditor } from '@ibodr/draw';
 
 export const PresentationViewer = ({ shape }: { shape: PresentationShape }) => {
   const { token } = useYjsContext();
   const { t } = useTranslation('board');
 
+  const editor = useEditor();
+
   const containerRef = useRef<HTMLDivElement | null>(null);
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
   const viewerRef = useRef<PPTXViewer | null>(null);
@@ -143,6 +147,37 @@ export const PresentationViewer = ({ shape }: { shape: PresentationShape }) => {
     setCurrentSlide(page);
   };
 
+  const handleExtractPage = useCallback(async () => {
+    if (isLoading || !token) return;
+
+    const bounds = editor.getShapePageBounds(shape.id);
+    if (!bounds) return;
+
+    const canvas = canvasRef.current;
+    if (!canvas || canvas.width === 0 || canvas.height === 0) return;
+
+    const blob = await new Promise<Blob | null>((resolve) => {
+      canvas.toBlob(resolve, 'image/png');
+    });
+    if (!blob) return;
+
+    const baseName = shape.props.fileName?.replace(/\.pptx?$/i, '') || 'presentation';
+    const file = new File([blob], `${baseName}_slide${currentSlide}.png`, {
+      type: 'image/png',
+    });
+
+    const imageH = bounds.h;
+    const imageW = (canvas.width / canvas.height) * imageH;
+    const gap = 24;
+
+    await insertImage(editor, file, token, {
+      x: bounds.maxX + gap,
+      y: bounds.y,
+      w: imageW,
+      h: imageH,
+    });
+  }, [isLoading, token, shape.id, shape.props.fileName, currentSlide, editor]);
+
   if (error) {
     return <div className="flex h-full items-center justify-center">{String(error)}</div>;
   }
@@ -172,6 +207,7 @@ export const PresentationViewer = ({ shape }: { shape: PresentationShape }) => {
           totalPages={totalSlides}
           disabled={isLoading}
           onPageChange={handlePageChange}
+          onExtractPage={handleExtractPage}
         />
       )}
     </div>