feat(presets): copilot panel with self-provided tokens (#5510)

Co-authored-by: Mirone <Saul-Mirone@outlook.com>

packages/blocks/src/_common/utils/filesys.ts

@@ -216,9 +216,12 @@ export async function uploadImageFromLocal(storage: BlobManager) {
     multiple: true,
   });
   if (!imageFiles) return [];
+  return loadImages(imageFiles, storage);
+}
+export async function loadImages(images: File[], storage: BlobManager) {
   const res: { file: File; sourceId: string }[] = [];
-  for (let i = 0; i < imageFiles.length; i++) {
-    const file = imageFiles[i];
+  for (let i = 0; i < images.length; i++) {
+    const file = images[i];
     const sourceId = await storage.set(file);
     res.push({ file, sourceId });
   }

packages/blocks/src/_common/utils/model.ts

@@ -1,5 +1,4 @@
-import type { BaseBlockModel } from '@blocksuite/store';
-import type { Page } from '@blocksuite/store';
+import type { BaseBlockModel, Page } from '@blocksuite/store';
 
 import type {
   AttachmentBlockModel,

packages/blocks/src/_legacy/clipboard/edgeless-clipboard.ts

@@ -23,10 +23,10 @@ import {
 } from '../../page-block/edgeless/utils/query.js';
 import { getSelectedContentModels } from '../../page-block/utils/selection.js';
 import { EdgelessBlockType } from '../../surface-block/edgeless-types.js';
-import { CanvasElementType } from '../../surface-block/index.js';
 import {
   Bound,
   type CanvasElement,
+  CanvasElementType,
   type Connection,
   ConnectorElement,
   deserializeXYWH,
@@ -227,7 +227,10 @@ export class EdgelessClipboard implements Clipboard {
       if (files.length === 0) {
         return;
       }
-      const res: { file: File; sourceId: string }[] = [];
+      const res: {
+        file: File;
+        sourceId: string;
+      }[] = [];
       for (let i = 0; i < files.length; i++) {
         const file = files[i];
         if (file.type.startsWith('image')) {
@@ -475,7 +478,9 @@ export class EdgelessClipboard implements Clipboard {
       frames: SerializedBlock[];
       notes?: SerializedBlock[];
       images?: SerializedBlock[];
-      elements?: { type: CanvasElement['type'] }[];
+      elements?: {
+        type: CanvasElement['type'];
+      }[];
     };
 
     // map old id to new id to rebuild connector's source and target
@@ -555,7 +560,7 @@ export class EdgelessClipboard implements Clipboard {
     );
   }
 
-  async copyAsPng(blocks: TopLevelBlockModel[], shapes: CanvasElement[]) {
+  async toCanvas(blocks: TopLevelBlockModel[], shapes: CanvasElement[]) {
     const blocksLen = blocks.length;
     const shapesLen = shapes.length;
 
@@ -587,6 +592,14 @@ export class EdgelessClipboard implements Clipboard {
 
     assertExists(canvas);
 
+    return canvas;
+  }
+
+  async copyAsPng(blocks: TopLevelBlockModel[], shapes: CanvasElement[]) {
+    const canvas = await this.toCanvas(blocks, shapes);
+    if (!canvas) {
+      return;
+    }
     // @ts-ignore
     if (window.apis?.clipboard?.copyAsImageFromString) {
       // @ts-ignore

packages/blocks/src/_legacy/content-parser/index.ts

@@ -59,6 +59,7 @@ export class ContentParser {
   private _notionHtmlParser: NotionHtmlParser;
   private urlPattern =
     /(?<=\s|^)https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_+.~#?&/=]*)(?=\s|$)/g;
+
   constructor(
     page: Page,
     options: {
@@ -183,7 +184,7 @@ export class ContentParser {
       gridColor: string;
     }
   ) {
-    const svgImg = `<svg width="${ctx.canvas.width}px" height="${ctx.canvas.height}px" xmlns="http://www.w3.org/2000/svg" style="background-size:${size}px ${size}px;background-color:${backgroundColor}; background-image: radial-gradient(${gridColor} 1px, ${backgroundColor} 1px)"></svg>`;
+    const svgImg = `<svg width='${ctx.canvas.width}px' height='${ctx.canvas.height}px' xmlns='http://www.w3.org/2000/svg' style='background-size:${size}px ${size}px;background-color:${backgroundColor}; background-image: radial-gradient(${gridColor} 1px, ${backgroundColor} 1px)'></svg>`;
     const img = new Image();
     const cleanup = () => {
       img.onload = null;
@@ -274,7 +275,9 @@ export class ContentParser {
     nodes?: TopLevelBlockModel[],
     surfaces?: SurfaceElement[],
     blockElementGetter: (model: BaseBlockModel) => Element | null = () => null,
-    edgelessBackground?: { zoom: number }
+    edgelessBackground?: {
+      zoom: number;
+    }
   ): Promise<HTMLCanvasElement | undefined> {
     const root = this._page.root;
     if (!root) return;
@@ -314,6 +317,27 @@ export class ContentParser {
     // TODO: refactor of this part
     const blocks = nodes ?? edgeless?.getSortedElementsByBound(bound) ?? [];
     for (const block of blocks) {
+      if (block.flavour === 'affine:image') {
+        const blob = await block.page.blob.get(block.sourceId);
+        if (!blob) {
+          return;
+        }
+        const blobToImage = (blob: Blob) =>
+          new Promise<HTMLImageElement>((resolve, reject) => {
+            const img = new Image();
+            img.onload = () => resolve(img);
+            img.onerror = reject;
+            img.src = URL.createObjectURL(blob);
+          });
+        const blockBound = xywhArrayToObject(block);
+        ctx.drawImage(
+          await blobToImage(blob),
+          blockBound.x - bound.x,
+          blockBound.y - bound.y,
+          blockBound.w,
+          blockBound.h
+        );
+      }
       const blockElement = blockElementGetter(block)?.parentElement;
 
       if (blockElement) {
@@ -918,13 +942,13 @@ export class ContentParser {
         return;
       },
       renderer(token: marked.Tokens.Generic) {
-        return `<div class="page-meta-data">
-          <div class="value">
-            <div class="tags">
+        return `<div class='page-meta-data'>
+          <div class='value'>
+            <div class='tags'>
               ${(token.text as string)
                 .split(',')
                 .map(tag => {
-                  return `<div class="tag">${tag}</div>`;
+                  return `<div class='tag'>${tag}</div>`;
                 })
                 .join('')}
             </div>

packages/blocks/src/_specs/index.ts

@@ -19,6 +19,7 @@ import { DatabaseBlockSchema } from '../database-block/database-model.js';
 import { DatabaseService } from '../database-block/database-service.js';
 import { DividerBlockSchema } from '../divider-block/divider-model.js';
 import { EmbedGithubBlockSpec } from '../embed-github-block/index.js';
+import { EmbedHtmlBlockSpec } from '../embed-html-block/embed-html-spec.js';
 import { FrameBlockSchema } from '../frame-block/index.js';
 import { ImageBlockSchema } from '../image-block/image-model.js';
 import { ImageService } from '../image-block/index.js';
@@ -189,6 +190,7 @@ const CommonFirstPartyBlockSpecs: BlockSpec[] = [
     },
   },
   EmbedGithubBlockSpec,
+  EmbedHtmlBlockSpec,
 ];
 
 export const DocEditorBlockSpecs: BlockSpec[] = [

packages/blocks/src/embed-html-block/embed-html-block.ts

@@ -0,0 +1,57 @@
+import { css, html, type PropertyValues } from 'lit';
+import { customElement, query } from 'lit/decorators.js';
+
+import { EmbedBlockElement } from '../_common/embed-block-helper/index.js';
+import type { EmbedHtmlBlockModel } from './embed-html-model.js';
+
+@customElement('affine-embed-html-block')
+export class EmbedHtmlBlock extends EmbedBlockElement<EmbedHtmlBlockModel> {
+  static override styles = css`
+    //affine-html {
+    //  display: block;
+    //}
+    //
+    .embed-html-block-iframe {
+      border: none;
+      width: 100%;
+    }
+  `;
+  @query('.embed-html-block-iframe')
+  iframe!: HTMLIFrameElement;
+
+  updateWH = () => {
+    const [, , w, h] = JSON.parse(this.model.xywh);
+    this.iframe.style.width = `${w}px`;
+    this.iframe.style.height = `${h}px`;
+  };
+
+  public override connectedCallback() {
+    super.connectedCallback();
+    this.disposables.add(this.model.propsUpdated.on(this.updateWH));
+  }
+
+  protected override firstUpdated(_changedProperties: PropertyValues) {
+    super.firstUpdated(_changedProperties);
+    this.updateWH();
+  }
+
+  override render(): unknown {
+    return this.renderEmbed(() => {
+      if (!this.model.html) {
+        return html` <div class="affine-html-empty">Empty</div>`;
+      }
+      return html`<iframe
+        class="embed-html-block-iframe"
+        sandbox="allow-scripts"
+        scrolling="false"
+        .srcdoc="${this.model.html}"
+      ></iframe>`;
+    });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'affine-embed-html-block': EmbedHtmlBlock;
+  }
+}

packages/blocks/src/embed-html-block/embed-html-model.ts

@@ -0,0 +1,10 @@
+import { EmbedBlockModel } from '../_common/embed-block-helper/index.js';
+import { EdgelessSelectableMixin } from '../surface-block/elements/selectable.js';
+
+export type EmbedHtmlBlockProps = {
+  html?: string;
+  design?: string;
+};
+
+@EdgelessSelectableMixin
+export class EmbedHtmlBlockModel extends EmbedBlockModel<EmbedHtmlBlockProps> {}

packages/blocks/src/embed-html-block/embed-html-service.ts

@@ -0,0 +1,5 @@
+import { BlockService } from '@blocksuite/block-std';
+
+import type { EmbedHtmlBlockModel } from './embed-html-model.js';
+
+export class EmbedHtmlService extends BlockService<EmbedHtmlBlockModel> {}

packages/blocks/src/embed-html-block/embed-html-spec.ts

@@ -0,0 +1,16 @@
+import { literal } from 'lit/static-html.js';
+
+import { createEmbedBlock } from '../_common/embed-block-helper/index.js';
+import { EmbedHtmlBlockModel } from './embed-html-model.js';
+
+export const EmbedHtmlBlockSpec = createEmbedBlock({
+  schema: {
+    name: 'html',
+    version: 1,
+    toModel: () => new EmbedHtmlBlockModel(),
+    props: () => ({}),
+  },
+  view: {
+    component: literal`affine-embed-html-block`,
+  },
+});

packages/blocks/src/index.ts

@@ -12,6 +12,9 @@ import './surface-block/index.js';
 import './database-block/index.js';
 import './surface-ref-block/index.js';
 
+import { matchFlavours } from './_common/utils/index.js';
+import { splitElements } from './page-block/edgeless/utils/clipboard-utils.js';
+
 export * from './_common/adapters/index.js';
 export * from './_common/components/index.js';
 export * from './_common/consts.js';
@@ -37,6 +40,10 @@ export * from './code-block/index.js';
 export * from './data-view-block/index.js';
 export * from './database-block/index.js';
 export * from './divider-block/index.js';
+export * from './embed-html-block/embed-html-block.js';
+export * from './embed-html-block/embed-html-model.js';
+export * from './embed-html-block/embed-html-service.js';
+export * from './embed-html-block/embed-html-spec.js';
 export * from './frame-block/index.js';
 export * from './image-block/index.js';
 export * from './list-block/index.js';
@@ -49,7 +56,10 @@ export * from './surface-block/surface-block.js';
 export * from './surface-block/surface-model.js';
 export * from './surface-block/surface-service.js';
 export * from './surface-ref-block/index.js';
-
+export const BlocksUtils = {
+  splitElements,
+  matchFlavours,
+};
 const env: Record<string, unknown> =
   typeof globalThis !== 'undefined'
     ? globalThis

packages/blocks/src/models.ts

@@ -21,6 +21,7 @@ import { DatabaseBlockSchema } from './database-block/database-model.js';
 import type { DividerBlockModel } from './divider-block/divider-model.js';
 import { DividerBlockSchema } from './divider-block/divider-model.js';
 import { EmbedGithubBlockSpec } from './embed-github-block/index.js';
+import { EmbedHtmlBlockSpec } from './embed-html-block/embed-html-spec.js';
 import type { FrameBlockModel } from './frame-block/frame-model.js';
 import { FrameBlockSchema } from './frame-block/frame-model.js';
 import type { ImageBlockModel } from './image-block/image-model.js';
@@ -74,6 +75,7 @@ export const __unstableSchemas = [
   DataViewBlockSchema,
   AttachmentBlockSchema,
   EmbedGithubBlockSpec.schema,
+  EmbedHtmlBlockSpec.schema,
 ] satisfies z.infer<typeof BlockSchema>[];
 
 // TODO support dynamic register

packages/blocks/src/page-block/edgeless/components/component-toolbar/more-button.ts

@@ -21,17 +21,11 @@ import {
   SendToBackIcon,
 } from '../../../../_common/icons/index.js';
 import { type ReorderingType } from '../../../../_common/utils/index.js';
-import { groupBy } from '../../../../_common/utils/iterable.js';
-import type { FrameBlockModel } from '../../../../frame-block/index.js';
-import type { ImageBlockModel } from '../../../../models.js';
-import type { NoteBlockModel } from '../../../../note-block/index.js';
-import { type CanvasElement } from '../../../../surface-block/index.js';
-import { getElementsWithoutGroup } from '../../../../surface-block/managers/group-manager.js';
 import type { EdgelessPageBlockComponent } from '../../edgeless-page-block.js';
 import { removeContainedFrames } from '../../frame-manager.js';
-import { duplicate } from '../../utils/clipboard-utils.js';
+import { duplicate, splitElements } from '../../utils/clipboard-utils.js';
 import { deleteElements } from '../../utils/crud.js';
-import { isFrameBlock, isImageBlock, isNoteBlock } from '../../utils/query.js';
+import { isFrameBlock } from '../../utils/query.js';
 import { createButtonPopper } from '../utils.js';
 
 type Action =
@@ -191,35 +185,6 @@ export class EdgelessMoreButton extends WithDisposable(LitElement) {
   get surface() {
     return this.edgeless.surface;
   }
-
-  private _splitElements() {
-    const { notes, frames, shapes, images } = groupBy(
-      getElementsWithoutGroup(this.selection.elements),
-      element => {
-        if (isNoteBlock(element)) {
-          return 'notes';
-        } else if (isFrameBlock(element)) {
-          return 'frames';
-        } else if (isImageBlock(element)) {
-          return 'images';
-        }
-        return 'shapes';
-      }
-    ) as {
-      notes: NoteBlockModel[];
-      shapes: CanvasElement[];
-      frames: FrameBlockModel[];
-      images: ImageBlockModel[];
-    };
-
-    return {
-      notes: notes ?? [],
-      shapes: shapes ?? [],
-      frames: frames ?? [],
-      images: images ?? [],
-    };
-  }
-
   private _delete() {
     this.page.captureSync();
     deleteElements(this.surface, this.selection.elements);
@@ -246,8 +211,9 @@ export class EdgelessMoreButton extends WithDisposable(LitElement) {
         break;
       }
       case 'copy-as-png': {
-        const { notes, frames, shapes, images } = this._splitElements();
-
+        const { notes, frames, shapes, images } = splitElements(
+          this.selection.elements
+        );
         this.slots.copyAsPng.emit({
           blocks: [...notes, ...removeContainedFrames(frames), ...images],
           shapes,

packages/blocks/src/page-block/edgeless/edgeless-page-block.ts

@@ -859,7 +859,10 @@ export class EdgelessPageBlockComponent extends BlockElement<
   private _initElementSlot() {
     this._disposables.add(
       this.page.slots.blockUpdated.on(event => {
-        if (![IMAGE, NOTE, FRAME].includes(event.flavour as EdgelessBlockType))
+        if (
+          ![IMAGE, NOTE, FRAME].includes(event.flavour as EdgelessBlockType) &&
+          !/affine:embed-*/.test(event.flavour)
+        )
           return;
 
         if (event.flavour === IMAGE) {