feat: add pdf style to attachment

toeverything · Nov 15, 2024 · 0124d65 · 0124d65
1 parent 17a4d7c
commit 0124d65
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 25 deletions.
diff --git a/packages/affine/model/src/blocks/attachment/attachment-model.ts b/packages/affine/model/src/blocks/attachment/attachment-model.ts
@@ -27,6 +27,7 @@ type BackwardCompatibleUndefined = undefined;
 export const AttachmentBlockStyles: EmbedCardStyle[] = [
   'cubeThick',
   'horizontalThin',
+  'pdf',
 ] as const;
 
 export interface AttachmentBlockEdgelessProps {

diff --git a/packages/affine/model/src/utils/types.ts b/packages/affine/model/src/utils/types.ts
@@ -8,7 +8,8 @@ export type EmbedCardStyle =
   | 'video'
   | 'figma'
   | 'html'
-  | 'syncedDoc';
+  | 'syncedDoc'
+  | 'pdf';
 
 export type LinkPreviewData = {
   description: string | null;

diff --git a/packages/affine/shared/src/consts/index.ts b/packages/affine/shared/src/consts/index.ts
@@ -21,6 +21,7 @@ export const EMBED_CARD_WIDTH: Record<EmbedCardStyle, number> = {
   figma: 752,
   html: 752,
   syncedDoc: 752,
+  pdf: 537 + 24 + 2,
 };
 
 export const EMBED_CARD_HEIGHT: Record<EmbedCardStyle, number> = {
@@ -34,6 +35,7 @@ export const EMBED_CARD_HEIGHT: Record<EmbedCardStyle, number> = {
   figma: 544,
   html: 544,
   syncedDoc: 455,
+  pdf: 759 + 46 + 24 + 2,
 };
 
 export const EMBED_BLOCK_FLAVOUR_LIST = [

diff --git a/packages/blocks/src/attachment-block/components/options.ts b/packages/blocks/src/attachment-block/components/options.ts
@@ -1,5 +1,3 @@
-import type { AttachmentBlockModel } from '@blocksuite/affine-model';
-
 import {
   CaptionIcon,
   DownloadIcon,
@@ -13,6 +11,15 @@ import {
   renderGroups,
   renderToolbarSeparator,
 } from '@blocksuite/affine-components/toolbar';
+import {
+  type AttachmentBlockModel,
+  defaultAttachmentProps,
+} from '@blocksuite/affine-model';
+import {
+  EMBED_CARD_HEIGHT,
+  EMBED_CARD_WIDTH,
+} from '@blocksuite/affine-shared/consts';
+import { Bound } from '@blocksuite/global/utils';
 import { flip, offset } from '@floating-ui/dom';
 import { html, nothing } from 'lit';
 import { join } from 'lit/directives/join.js';
@@ -43,7 +50,17 @@ export function attachmentViewToggleMenu({
       label: 'Card view',
       disabled: readonly || !embedded,
       action: () => {
-        model.doc.updateBlock(model, { embed: false });
+        const style = defaultAttachmentProps.style!;
+        const width = EMBED_CARD_WIDTH[style];
+        const height = EMBED_CARD_HEIGHT[style];
+        const bound = Bound.deserialize(model.xywh);
+        bound.w = width;
+        bound.h = height;
+        model.doc.updateBlock(model, {
+          style,
+          embed: false,
+          xywh: bound.serialize(),
+        });
         callback?.();
       },
     },

diff --git a/packages/blocks/src/root-block/widgets/element-toolbar/change-attachment-button.ts b/packages/blocks/src/root-block/widgets/element-toolbar/change-attachment-button.ts
@@ -90,26 +90,28 @@ export class EdgelessChangeAttachmentButton extends WithDisposable(LitElement) {
   override render() {
     return join(
       [
-        html`
-          <editor-menu-button
-            .contentPadding=${'8px'}
-            .button=${html`
-              <editor-icon-button
-                aria-label="Card style"
-                .tooltip=${'Card style'}
+        this.model.style === 'pdf'
+          ? null
+          : html`
+              <editor-menu-button
+                .contentPadding=${'8px'}
+                .button=${html`
+                  <editor-icon-button
+                    aria-label="Card style"
+                    .tooltip=${'Card style'}
+                  >
+                    ${PaletteIcon}
+                  </editor-icon-button>
+                `}
               >
-                ${PaletteIcon}
-              </editor-icon-button>
-            `}
-          >
-            <card-style-panel
-              .value=${this.model.style}
-              .options=${this._getCardStyleOptions}
-              .onSelect=${this._setCardStyle}
-            >
-            </card-style-panel>
-          </editor-menu-button>
-        `,
+                <card-style-panel
+                  .value=${this.model.style}
+                  .options=${this._getCardStyleOptions}
+                  .onSelect=${this._setCardStyle}
+                >
+                </card-style-panel>
+              </editor-menu-button>
+            `,
         this.viewToggleMenu,
         html`
           <editor-icon-button

diff --git a/packages/blocks/src/root-block/widgets/element-toolbar/change-embed-card-button.ts b/packages/blocks/src/root-block/widgets/element-toolbar/change-embed-card-button.ts
@@ -490,7 +490,7 @@ export class EdgelessChangeEmbedCardButton extends WithDisposable(LitElement) {
     this._blockComponent?.captionEditor?.show();
   }
 
-  private _viewMenuButton() {
+  private _viewToggleMenu() {
     if (this._canConvertToEmbedView || this._isEmbedView) {
       const buttons = [
         {
@@ -600,7 +600,7 @@ export class EdgelessChangeEmbedCardButton extends WithDisposable(LitElement) {
 
       this._openMenuButton(),
 
-      this._viewMenuButton(),
+      this._viewToggleMenu(),
 
       'style' in model && this._canShowCardStylePanel
         ? html`