fix: export png error and rich text format confusion (toeverything#5945)

donteatfriedrice · Jan 9, 2024 · d54a817 · d54a817
1 parent a2678cd
commit d54a817
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 33 deletions.
diff --git a/packages/blocks/src/_common/export-manager/export-manager.ts b/packages/blocks/src/_common/export-manager/export-manager.ts
@@ -4,6 +4,7 @@ import type { EditorHost } from '@blocksuite/lit';
 import type { BlockModel, Page } from '@blocksuite/store';
 
 import {
+  blockElementGetter,
   getBlockComponentByModel,
   getEditorContainer,
   isInsideDocEditor,
@@ -180,10 +181,10 @@ export class ExportManager {
   public async edgelessToCanvas(
     surfaceRenderer: Renderer,
     bound: IBound,
+    blockElementGetter: (model: BlockModel) => Element | null = () => null,
     edgeless?: EdgelessPageBlockComponent,
     nodes?: TopLevelBlockModel[],
     surfaces?: SurfaceElement[],
-    blockElementGetter: (model: BlockModel) => Element | null = () => null,
     edgelessBackground?: {
       zoom: number;
     }
@@ -248,7 +249,10 @@ export class ExportManager {
           blockBound.h
         );
       }
-      const blockElement = blockElementGetter(block)?.parentElement;
+      let blockElement = blockElementGetter(block)?.parentElement;
+      if (matchFlavours(block, ['affine:note'])) {
+        blockElement = blockElement?.closest('.edgeless-block-portal-note');
+      }
 
       if (blockElement) {
         const blockBound = xywhArrayToObject(block);
@@ -268,7 +272,7 @@ export class ExportManager {
 
         for (let i = 0; i < blocksInsideFrame.length; i++) {
           const element = blocksInsideFrame[i];
-          const htmlElement = blockElementGetter(element)?.parentElement;
+          const htmlElement = blockElementGetter(element);
           const blockBound = xywhArrayToObject(element);
           const canvasData = await html2canvas(htmlElement as HTMLElement);
 
@@ -302,10 +306,9 @@ export class ExportManager {
     const pageMode = isInsideDocEditor(this.editorHost);
 
     const editorContainer = getEditorContainer(this.editorHost);
-    const pageContainer = editorContainer.querySelector(
-      '.affine-doc-page-block-container'
-    );
-    if (!pageContainer) return;
+    const docEditorContainer =
+      editorContainer.querySelector('affine-doc-editor');
+    if (!docEditorContainer) return;
 
     const replaceRichTextWithSvgElementFunc =
       this._replaceRichTextWithSvgElement.bind(this);
@@ -340,15 +343,15 @@ export class ExportManager {
     };
 
     const data = await html2canvas(
-      pageContainer as HTMLElement,
+      docEditorContainer as HTMLElement,
       html2canvasOption
     );
     this._checkCanContinueToCanvas(pathname, pageMode);
     return data;
   }
 
   private _replaceRichTextWithSvgElement = async (element: HTMLElement) => {
-    const richList = Array.from(element.querySelectorAll('rich-text'));
+    const richList = Array.from(element.querySelectorAll('.inline-editor'));
     await Promise.all(
       richList.map(async rich => {
         const svgEle = await this._elementToSvgElement(
@@ -413,6 +416,7 @@ export class ExportManager {
       return await this.edgelessToCanvas(
         edgeless.surface.viewport,
         bound,
+        (model: BlockModel) => blockElementGetter(model, this.editorHost.view),
         edgeless
       );
     }

diff --git a/packages/blocks/src/_common/utils/query.ts b/packages/blocks/src/_common/utils/query.ts
@@ -1,3 +1,4 @@
+import type { ViewStore } from '@blocksuite/block-std';
 import { assertExists } from '@blocksuite/global/utils';
 import type { InlineEditor } from '@blocksuite/inline';
 import { INLINE_ROOT_ATTR } from '@blocksuite/inline';
@@ -168,6 +169,24 @@ export function buildPath(model: BlockModel | null): string[] {
   return path;
 }
 
+export function blockElementGetter(model: BlockModel, view: ViewStore) {
+  if (matchFlavours(model, ['affine:image', 'affine:frame'])) {
+    let current: BlockModel | null = model;
+    const path: string[] = [];
+    while (current) {
+      // Top level image render under page block not surface block
+      if (!matchFlavours(current, ['affine:surface'])) {
+        path.unshift(current.id);
+      }
+      current = current.page.getParent(current);
+    }
+
+    return view.viewFromPath('block', path);
+  } else {
+    return view.viewFromPath('block', buildPath(model));
+  }
+}
+
 export function getPageByElement(element: Element): PageBlockComponent | null {
   const docPageElement = getDocPageByElement(element);
   if (docPageElement) return docPageElement;

diff --git a/packages/blocks/src/page-block/edgeless/controllers/clipboard.ts b/packages/blocks/src/page-block/edgeless/controllers/clipboard.ts
@@ -5,7 +5,6 @@ import type {
 } from '@blocksuite/block-std';
 import { assertExists, DisposableGroup } from '@blocksuite/global/utils';
 import type { EditorHost } from '@blocksuite/lit';
-import type { BlockModel } from '@blocksuite/store';
 import {
   type BlockSnapshot,
   fromJSON,
@@ -21,7 +20,7 @@ import type {
 import { matchFlavours } from '../../../_common/utils/index.js';
 import { groupBy } from '../../../_common/utils/iterable.js';
 import {
-  buildPath,
+  blockElementGetter,
   getEditorContainer,
   isInsideDocEditor,
 } from '../../../_common/utils/query.js';
@@ -128,24 +127,6 @@ export class EdgelessClipboardController extends PageClipboard {
     );
   };
 
-  private _blockElmentGetter(model: BlockModel) {
-    if (matchFlavours(model, ['affine:image', 'affine:frame'])) {
-      let current: BlockModel | null = model;
-      const path: string[] = [];
-      while (current) {
-        // Top level image render under page block not surface block
-        if (!matchFlavours(current, ['affine:surface'])) {
-          path.unshift(current.id);
-        }
-        current = current.page.getParent(current);
-      }
-
-      return this.std.view.viewFromPath('block', path);
-    } else {
-      return this.std.view.viewFromPath('block', buildPath(model));
-    }
-  }
-
   private _onCopy = async (
     _context: UIEventStateContext,
     surfaceSelection: SurfaceSelection[]
@@ -625,7 +606,7 @@ export class EdgelessClipboardController extends PageClipboard {
   }
 
   private async _replaceRichTextWithSvgElement(element: HTMLElement) {
-    const richList = Array.from(element.querySelectorAll('rich-text'));
+    const richList = Array.from(element.querySelectorAll('.inline-editor'));
     await Promise.all(
       richList.map(async rich => {
         const svgEle = await this._elementToSvgElement(
@@ -749,7 +730,8 @@ export class EdgelessClipboardController extends PageClipboard {
       block: TopLevelBlockModel,
       isInFrame = false
     ) => {
-      let blockElement = this._blockElmentGetter(block)?.parentElement;
+      let blockElement = blockElementGetter(block, this.std.view)
+        ?.parentElement;
       const blockPortalSelector = block.flavour.replace(
         'affine:',
         '.edgeless-block-portal-'

diff --git a/packages/blocks/src/page-block/widgets/surface-ref-toolbar/utils.ts b/packages/blocks/src/page-block/widgets/surface-ref-toolbar/utils.ts
@@ -27,10 +27,13 @@ export const edgelessToBlob = async (
     .edgelessToCanvas(
       options.surfaceRenderer,
       bound,
+      model =>
+        blockContainer.querySelector(
+          `[data-portal-reference-block-id="${model.id}"]`
+        ),
       undefined,
       isBlock ? [edgelessElement] : undefined,
       isBlock ? undefined : [edgelessElement],
-      id => blockContainer.querySelector(`[portal-reference-block-id="${id}"]`),
       { zoom: options.surfaceRenderer.zoom }
     )
     .then(canvas => {

diff --git a/packages/blocks/src/surface-ref-block/portal/image.ts b/packages/blocks/src/surface-ref-block/portal/image.ts
@@ -37,7 +37,12 @@ export class SurfaceRefImagePortal extends WithDisposable(ShadowlessElement) {
     };
 
     return html`
-      <div style=${styleMap(style)}>${this.renderModel(model)}</div>
+      <div
+        style=${styleMap(style)}
+        data-portal-reference-block-id="${model.id}"
+      >
+        ${this.renderModel(model)}
+      </div>
     `;
   }
 }

diff --git a/packages/blocks/src/surface-ref-block/portal/note.ts b/packages/blocks/src/surface-ref-block/portal/note.ts
@@ -86,6 +86,7 @@ export class SurfaceRefNotePortal extends WithDisposable(ShadowlessElement) {
         class="surface-ref-note-portal"
         style=${styleMap(style)}
         data-model-height="${modelH}"
+        data-portal-reference-block-id="${model.id}"
       >
         ${this.renderModel(model)}
       </div>