Rout 5 block on demand

CONTRIBUTION.md

@@ -0,0 +1,12 @@
+## Check in 
+eval `ssh-agent -s`
+ssh-add --apple-use-keychain ~/.ssh/id_ed25519
+
+## How to prepare locally?
+yarn install
+
+## How to run locally?
+yarn dev
+
+## How to build locally?
+NODE_OPTIONS="--max-old-space-size=4096" yarn workspace @blocksuite/playground build

package.json

@@ -25,7 +25,8 @@
     "ci:version:canary": "changeset version --snapshot canary && yarn install --no-frozen-lockfile",
     "ci:publish:canary": "yarn build:packages && yarn workspaces foreach -Ap --no-private npm publish --access public --tag canary",
     "postinstall": "husky",
-    "changeset": "changeset && node scripts/changelog.mjs"
+    "changeset": "changeset && node scripts/changelog.mjs",
+    "deploy": "aws s3 sync packages/playground/dist s3://block.docnosys.com --delete --profile Chen"
   },
   "lint-staged": {
     "!packages/**/*": [

packages/affine/blocks/attachment/package.json

@@ -25,9 +25,12 @@
     "@preact/signals-core": "^1.8.0",
     "@toeverything/theme": "^1.1.15",
     "file-type": "^21.0.0",
+    "jszip": "^3.10.1",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",
+    "quantant-storage": "^0.0.41",
     "rxjs": "^7.8.1",
+    "uuid": "^11.0.3",
     "zod": "^3.23.8"
   },
   "exports": {

packages/affine/blocks/attachment/src/attachment-block.ts

@@ -27,7 +27,6 @@ import {
   AttachmentIcon,
   ResetIcon,
   UpgradeIcon,
-  WarningIcon,
 } from '@blocksuite/icons/lit';
 import { BlockSelection } from '@blocksuite/std';
 import { nanoid, Slice } from '@blocksuite/store';
@@ -120,22 +119,30 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
     window.open(blobUrl, '_blank');
   };
 
-  // Refreshes data.
   refreshData = () => {
     refreshData(this).catch(console.error);
   };
 
   private readonly _refreshKey$ = signal<string | null>(null);
 
-  // Refreshes the embed component.
-  reload = () => {
-    if (this.model.props.embed) {
-      this._refreshKey$.value = nanoid();
-      return;
-    }
+reload = () => {
+  const isEmbedded = this.model.props.embed;
+  const hasBlobUrl = !!this.resourceController.blobUrl$.value;
 
-    this.refreshData();
-  };
+  if (isEmbedded && hasBlobUrl) {
+    // For embedded attachments with a loaded blob (likely local or cached), update refreshKey
+    this._refreshKey$.value = nanoid();
+    console.log('Embedded reload with blobUrl, updated refreshKey:', this._refreshKey$.value);
+    return;
+  }
+
+  // For non-embedded or cloud attachments (no blobUrl), perform full refresh
+  this.resourceController.updateState({ downloading: true });
+  this.refreshData();
+  this.resourceController.updateState({ downloading: false, state: 'none' });
+  this._refreshKey$.value = nanoid();
+  console.log('Full reload, updated refreshKey:', this._refreshKey$.value);
+};
 
   private _selectBlock() {
     const selectionManager = this.host.selection;
@@ -146,7 +153,6 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
   }
 
   private readonly _trackCitationDeleteEvent = () => {
-    // Check citation delete event
     this._disposables.add(
       this.std.store.slots.blockUpdated
         .pipe(
@@ -201,12 +207,10 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
   }
 
   override firstUpdated() {
-    // lazy bindings
     this.disposables.addFromEvent(this, 'click', this.onClick);
   }
 
   protected onClick(event: MouseEvent) {
-    // the peek view need handle shift + click
     if (event.defaultPrevented) return;
 
     event.stopPropagation();
@@ -230,67 +234,29 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
             event.stopPropagation();
             onOverFileSize?.();
 
-            {
-              const mode =
-                this.std.get(DocModeProvider).getEditorMode() ?? 'page';
-              const segment = mode === 'page' ? 'doc' : 'whiteboard';
-              this.std
-                .getOptional(TelemetryProvider)
-                ?.track('AttachmentUpgradedEvent', {
-                  segment,
-                  page: `${segment} editor`,
-                  module: 'attachment',
-                  control: 'upgrade',
-                  category: 'card',
-                  type: this.model.props.name.split('.').pop() ?? '',
-                });
-            }
-          }}
-        >
-          ${UpgradeIcon()} Upgrade
-        </button>
-      `
-    );
-  };
-
-  protected renderNormalButton = (needUpload: boolean) => {
-    const label = needUpload ? 'retry' : 'reload';
-    const run = async () => {
-      if (needUpload) {
-        await this.resourceController.upload();
-        return;
-      }
-
-      this.refreshData();
-    };
-
-    return html`
-      <button
-        class="affine-attachment-content-button"
-        @click=${(event: MouseEvent) => {
-          event.stopPropagation();
-          run().catch(console.error);
-
-          {
             const mode =
               this.std.get(DocModeProvider).getEditorMode() ?? 'page';
             const segment = mode === 'page' ? 'doc' : 'whiteboard';
             this.std
               .getOptional(TelemetryProvider)
-              ?.track('AttachmentReloadedEvent', {
+              ?.track('AttachmentUpgradedEvent', {
                 segment,
                 page: `${segment} editor`,
                 module: 'attachment',
-                control: label,
+                control: 'upgrade',
                 category: 'card',
-                type: this.filetype,
+                type: this.model.props.name.split('.').pop() ?? '',
               });
-          }
-        }}
-      >
-        ${ResetIcon()} ${label}
-      </button>
-    `;
+          }}
+        >
+          ${UpgradeIcon()} Upgrade
+        </button>
+      `
+    );
+  };
+
+  protected renderNormalButton = (needUpload: boolean) => {
+    return null;
   };
 
   protected renderWithHorizontal(
@@ -313,16 +279,6 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
               ${title}
             </div>
           </div>
-
-          <div class="affine-attachment-content-description">
-            <div class="affine-attachment-content-info truncate">
-              ${description}
-            </div>
-            ${choose(state, [
-              ['error', () => this.renderNormalButton(needUpload)],
-              ['error:oversize', this.renderUpgradeButton],
-            ])}
-          </div>
         </div>
 
         <div class="affine-attachment-banner">${kind}</div>
@@ -356,13 +312,7 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
           </div>
         </div>
 
-        <div class="affine-attachment-banner">
-          ${kind}
-          ${choose(state, [
-            ['error', () => this.renderNormalButton(needUpload)],
-            ['error:oversize', this.renderUpgradeButton],
-          ])}
-        </div>
+        <div class="affine-attachment-banner">${kind}</div>
       </div>
     `;
   }
@@ -374,7 +324,7 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
 
     const resolvedState = this.resourceController.resolveStateWith({
       loadingIcon: LoadingIcon(),
-      errorIcon: WarningIcon(),
+      errorIcon: null, // Suppress warning symbol
       icon: AttachmentIcon(),
       title: name,
       description: formatSize(size),
@@ -391,7 +341,6 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
       'affine-attachment-card': true,
       [cardStyle]: true,
       loading: resolvedState.loading,
-      error: resolvedState.error,
     };
 
     return when(
@@ -403,40 +352,30 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
 
   protected renderEmbedView = () => {
     const { model, blobUrl } = this;
-    if (!model.props.embed || !blobUrl) return null;
+    if (!model.props.embed || !blobUrl) {
+      console.log('renderEmbedView: Skipping due to missing embed or blobUrl', {
+        embed: model.props.embed,
+        blobUrl,
+        name: model.props.name,
+      });
+      return null;
+    }
 
     const { std, _maxFileSize } = this;
     const provider = std.get(AttachmentEmbedProvider);
 
     const render = provider.getRender(model, _maxFileSize);
-    if (!render) return null;
-
-    const enabled = provider.shouldShowStatus(model);
+    if (!render) {
+      console.log('renderEmbedView: No render function available', {
+        name: model.props.name,
+      });
+      return null;
+    }
 
     return html`
       <div class="affine-attachment-embed-container">
         ${guard([this._refreshKey$.value], () => render(model, blobUrl))}
       </div>
-      ${when(enabled, () => {
-        const resolvedState = this.resolvedState$.value;
-        if (resolvedState.state !== 'error') return null;
-        // It should be an error messge.
-        const message = resolvedState.description;
-        if (!message) return null;
-
-        const needUpload = resolvedState.needUpload;
-        const action = () =>
-          needUpload ? this.resourceController.upload() : this.reload();
-
-        return html`
-          <affine-resource-status
-            class="affine-attachment-embed-status"
-            .message=${message}
-            .needUpload=${needUpload}
-            .action=${action}
-          ></affine-resource-status>
-        `;
-      })}
     `;
   };
 
@@ -453,6 +392,7 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
   };
 
   override renderBlock() {
+    console.log('renderBlock called, flavour:', this.model.flavour, 'state:', this.resolvedState$.value.state);
     return html`
       <div
         class=${classMap({
@@ -479,4 +419,4 @@ declare global {
   interface HTMLElementTagNameMap {
     'affine-attachment': AttachmentBlockComponent;
   }
-}
+}