✨(frontend) add pdf block to the editor

CHANGELOG.md

@@ -19,6 +19,7 @@ and this project adheres to
   - #1244
   - #1270
   - #1282
+- ✨(frontend) add pdf block to the editor #1293
 
 ### Fixed
 

docker/files/etc/nginx/conf.d/default.conf

@@ -21,6 +21,9 @@ server {
         proxy_pass http://minio:9000/impress-media-storage/;
         proxy_set_header Host minio:9000;
 
+        proxy_hide_header Content-Disposition;
+        add_header Content-Disposition "inline";
+
         add_header Content-Security-Policy "default-src 'none'" always;
     }
 

docker/files/production/etc/nginx/conf.d/default.conf.template

@@ -96,6 +96,9 @@ server {
 
         proxy_ssl_name ${S3_HOST};
 
+        proxy_hide_header Content-Disposition;
+        add_header Content-Disposition "inline";
+
         add_header Content-Security-Policy "default-src 'none'" always;
     }
 

src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx

@@ -37,6 +37,7 @@ import {
   AccessibleImageBlock,
   CalloutBlock,
   DividerBlock,
+  PdfBlock,
 } from './custom-blocks';
 import {
   InterlinkingLinkInlineContent,
@@ -55,6 +56,7 @@ const baseBlockNoteSchema = withPageBreak(
       callout: CalloutBlock,
       divider: DividerBlock,
       image: AccessibleImageBlock,
+      pdf: PdfBlock,
     },
     inlineContentSpecs: {
       ...defaultInlineContentSpecs,

src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteSuggestionMenu.tsx

@@ -18,6 +18,7 @@ import {
 import {
   getCalloutReactSlashMenuItems,
   getDividerReactSlashMenuItems,
+  getPdfReactSlashMenuItems,
 } from './custom-blocks';
 import { useGetInterlinkingMenuItems } from './custom-inline-content';
 import XLMultiColumn from './xl-multi-column';
@@ -32,7 +33,10 @@ export const BlockNoteSuggestionMenu = () => {
     DocsStyleSchema
   >();
   const { t } = useTranslation();
-  const basicBlocksName = useDictionary().slash_menu.page_break.group;
+  const dictionaryDate = useDictionary();
+  const basicBlocksName = dictionaryDate.slash_menu.page_break.group;
+  const fileBlocksName = dictionaryDate.slash_menu.file.group;
+
   const getInterlinkingMenuItems = useGetInterlinkingMenuItems();
 
   const getSlashMenuItems = useMemo(() => {
@@ -56,11 +60,12 @@ export const BlockNoteSuggestionMenu = () => {
             getMultiColumnSlashMenuItems?.(editor) || [],
             getPageBreakReactSlashMenuItems(editor),
             getDividerReactSlashMenuItems(editor, t, basicBlocksName),
+            getPdfReactSlashMenuItems(editor, t, fileBlocksName),
           ),
           query,
         ),
       );
-  }, [basicBlocksName, editor, getInterlinkingMenuItems, t]);
+  }, [basicBlocksName, editor, getInterlinkingMenuItems, t, fileBlocksName]);
 
   return (
     <SuggestionMenuController

src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/PdfBlock.tsx

@@ -0,0 +1,158 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import { insertOrUpdateBlock } from '@blocknote/core';
+import {
+  AddFileButton,
+  FileBlockWrapper,
+  createReactBlockSpec,
+} from '@blocknote/react';
+import { TFunction } from 'i18next';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { Box, Icon } from '@/components';
+import { useResponsiveStore } from '@/stores';
+
+import { usePdfResizer } from '../../hook/usePdfResizer';
+import { DocsBlockNoteEditor } from '../../types';
+
+type FileBlockEditor = Parameters<typeof AddFileButton>[0]['editor'];
+
+export const PdfBlock = createReactBlockSpec(
+  {
+    type: 'pdf',
+    content: 'none',
+    propSchema: {
+      name: { default: '' as const },
+      url: { default: '' as const },
+      caption: { default: '' as const },
+      showPreview: { default: true },
+      previewWidth: { default: undefined, type: 'number' },
+    },
+    isFileBlock: true,
+    fileBlockAccept: ['application/pdf'],
+  },
+  {
+    render: ({ editor, block, contentRef }) => {
+      const pdfUrl = block.props.url;
+
+      const { t } = useTranslation();
+
+      const { isMobile } = useResponsiveStore();
+
+      const handleResizeEnd = useCallback(
+        (width: number) => {
+          editor.updateBlock(block, {
+            props: { previewWidth: width },
+          });
+        },
+        [editor, block],
+      );
+
+      const { wrapperRef, pdfWidth, handlePointerDown } = usePdfResizer(
+        block.props.previewWidth ?? 100,
+        handleResizeEnd,
+      );
+
+      return (
+        <div ref={contentRef} className="bn-file-block-content-wrapper">
+          {pdfUrl === '' ? (
+            <AddFileButton
+              block={block}
+              editor={editor as unknown as FileBlockEditor}
+              buttonText={t('Add PDF')}
+              buttonIcon={<Icon iconName="upload" />}
+            />
+          ) : (
+            <FileBlockWrapper
+              block={block}
+              editor={editor as unknown as FileBlockEditor}
+            >
+              {isMobile ? (
+                <Box
+                  $display="flex"
+                  $align="center"
+                  $justify="center"
+                  $direction="row"
+                  $gap="1rem"
+                >
+                  <Icon iconName="picture_as_pdf" $size="18px" />
+                  <Box
+                    as="p"
+                    $display="inline-block"
+                    style={{
+                      textOverflow: 'ellipsis',
+                      whiteSpace: 'nowrap',
+                      overflow: 'hidden',
+                      display: 'inline',
+                    }}
+                  >
+                    {block.props.name}
+                  </Box>
+                </Box>
+              ) : (
+                <Box ref={wrapperRef} $width="100%" $position="relative">
+                  <Box
+                    $width={`${pdfWidth}%`}
+                    $height="500px"
+                    $position="relative"
+                    $css={`
+                    border: 1px solid #ccc;
+                    margin: auto;
+                  `}
+                  >
+                    <embed
+                      src={pdfUrl}
+                      type="application/pdf"
+                      width="100%"
+                      height="100%"
+                      contentEditable={false}
+                      draggable={false}
+                      onClick={() => editor.setTextCursorPosition(block)}
+                    />
+                    {/* Right-edge drag handle */}
+                    <div
+                      role="separator"
+                      aria-orientation="vertical"
+                      style={{
+                        position: 'absolute',
+                        top: '50%',
+                        right: -4,
+                        width: 4,
+                        height: '7.5rem',
+                        borderRadius: '2px',
+                        background: 'gray',
+                        cursor: 'ew-resize',
+                        zIndex: 1,
+                        touchAction: 'none',
+                        transform: 'translateY(-50%)',
+                      }}
+                      onPointerDown={handlePointerDown}
+                      onDragStart={(e) => e.preventDefault()}
+                    />
+                  </Box>
+                </Box>
+              )}
+            </FileBlockWrapper>
+          )}
+        </div>
+      );
+    },
+  },
+);
+
+export const getPdfReactSlashMenuItems = (
+  editor: DocsBlockNoteEditor,
+  t: TFunction<'translation', undefined>,
+  group: string,
+) => [
+  {
+    title: t('PDF'),
+    onItemClick: () => {
+      insertOrUpdateBlock(editor, { type: 'pdf' });
+    },
+    aliases: ['pdf', 'document', 'embed', 'file'],
+    group,
+    icon: <Icon iconName="picture_as_pdf" $size="18px" />,
+    subtext: t('Embed a PDF file'),
+  },
+];

src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/index.ts

@@ -1,3 +1,4 @@
 export * from './AccessibleImageBlock';
 export * from './CalloutBlock';
 export * from './DividerBlock';
+export * from './PdfBlock';

src/frontend/apps/impress/src/features/docs/doc-editor/hook/usePdfResizer.tsx

@@ -0,0 +1,85 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+const MAX_WIDTH_PERCENTAGE = 100;
+const MIN_WIDTH_PERCENTAGE = 40;
+
+export const usePdfResizer = (
+  initialWidth: number = 100,
+  onResizeEnd: (width: number) => void,
+) => {
+  const dragOffsetRef = useRef(0);
+  const wrapperRef = useRef<HTMLDivElement>(null);
+
+  const [pdfWidth, setPdfWidth] = useState(initialWidth);
+  const [dragging, setDragging] = useState(false);
+
+  const clamp = (v: number) =>
+    Math.max(MIN_WIDTH_PERCENTAGE, Math.min(MAX_WIDTH_PERCENTAGE, v));
+
+  const onPointerMove = useCallback(
+    (e: PointerEvent) => {
+      if (!dragging || !wrapperRef.current) {
+        return;
+      }
+
+      const rect = wrapperRef.current.getBoundingClientRect();
+
+      const pct =
+        ((e.clientX - rect.left - dragOffsetRef.current) / rect.width) * 100;
+
+      setPdfWidth(clamp(pct));
+    },
+    [dragging],
+  );
+
+  const stopDragging = useCallback(() => {
+    onResizeEnd(pdfWidth);
+    setDragging(false);
+  }, [onResizeEnd, pdfWidth]);
+
+  useEffect(() => {
+    if (!dragging) {
+      return;
+    }
+
+    const prevUserSelect = document.body.style.userSelect;
+    document.body.style.userSelect = 'none';
+
+    window.addEventListener('pointermove', onPointerMove);
+    window.addEventListener('pointerup', stopDragging);
+    window.addEventListener('pointercancel', stopDragging);
+
+    return () => {
+      document.body.style.userSelect = prevUserSelect;
+      window.removeEventListener('pointermove', onPointerMove);
+      window.removeEventListener('pointerup', stopDragging);
+      window.removeEventListener('pointercancel', stopDragging);
+    };
+  }, [dragging, onPointerMove, stopDragging]);
+
+  const handlePointerDown = useCallback(
+    (e: React.PointerEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+
+      if (wrapperRef.current) {
+        const rect = wrapperRef.current.getBoundingClientRect();
+        const currentRight = rect.left + (pdfWidth / 100) * rect.width;
+
+        // capture grab offset
+        dragOffsetRef.current = e.clientX - currentRight;
+      }
+
+      (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+      setDragging(true);
+    },
+    [pdfWidth],
+  );
+
+  return {
+    pdfWidth,
+    wrapperRef,
+    dragging,
+    handlePointerDown,
+  } as const;
+};

src/frontend/apps/impress/src/features/docs/doc-export/blocks-mapping/index.ts

@@ -6,6 +6,8 @@ export * from './headingPDF';
 export * from './imageDocx';
 export * from './imagePDF';
 export * from './paragraphPDF';
+export * from './pdfDocx';
+export * from './pdfPDF';
 export * from './quoteDocx';
 export * from './quotePDF';
 export * from './tablePDF';

src/frontend/apps/impress/src/features/docs/doc-export/blocks-mapping/pdfDocx.tsx

@@ -0,0 +1,62 @@
+import { Paragraph, TextRun } from 'docx';
+
+import { DocsExporterDocx } from '../types';
+
+export const blockMappingPdfDocx: DocsExporterDocx['mappings']['blockMapping']['pdf'] =
+  (block) => {
+    const pdfName = block.props.name || 'PDF Document';
+    const pdfUrl = block.props.url;
+
+    const children: TextRun[] = [
+      new TextRun({
+        text: '📄 ',
+        size: 20,
+      }),
+      new TextRun({
+        text: pdfName,
+        bold: true,
+        size: 24,
+      }),
+    ];
+
+    if (pdfUrl) {
+      children.push(
+        new TextRun({
+          text: '\nSource: ',
+          size: 20,
+          color: '666666',
+        }),
+        new TextRun({
+          text: pdfUrl,
+          size: 20,
+          color: '666666',
+        }),
+      );
+    }
+
+    children.push(
+      new TextRun({
+        text: '\n[PDF content cannot be embedded in exported DOCX]',
+        size: 18,
+        color: '999999',
+        italics: true,
+      }),
+    );
+
+    return new Paragraph({
+      children,
+      spacing: {
+        before: 200,
+        after: 200,
+      },
+      border: {
+        top: { size: 1, color: 'CCCCCC', style: 'single' },
+        bottom: { size: 1, color: 'CCCCCC', style: 'single' },
+        left: { size: 1, color: 'CCCCCC', style: 'single' },
+        right: { size: 1, color: 'CCCCCC', style: 'single' },
+      },
+      shading: {
+        fill: 'F9F9F9',
+      },
+    });
+  };