Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: duplication occurs when card view is switched to embed view #8407

Merged
merged 1 commit into from
Sep 20, 2024
Merged

fix: duplication occurs when card view is switched to embed view #8407

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 19 additions & 18 deletions packages/blocks/src/root-block/widgets/embed-card-toolbar/embed-card-toolbar.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,6 @@ import {
} from '@blocksuite/affine-shared/services';
import { getHostName } from '@blocksuite/affine-shared/utils';
import { WidgetComponent } from '@blocksuite/block-std';
import { assertExists } from '@blocksuite/global/utils';
import { type BlockModel, DocCollection } from '@blocksuite/store';
import { autoUpdate, computePosition, flip, offset } from '@floating-ui/dom';
import { html, nothing, type TemplateResult } from 'lit';
Expand Down Expand Up @@ -260,7 +259,8 @@ export class EmbedCardToolbar extends WidgetComponent<
return;
}

const { doc, url, style, caption } = this.focusModel;
const targetModel = this.focusModel;
const { doc, url, style, caption } = targetModel;

let targetFlavour = 'affine:bookmark',
targetStyle = style;
Expand All @@ -277,9 +277,9 @@ export class EmbedCardToolbar extends WidgetComponent<
)[0];
}

const parent = doc.getParent(this.focusModel);
assertExists(parent);
const index = parent.children.indexOf(this.focusModel);
const parent = doc.getParent(targetModel);
if (!parent) return;
const index = parent.children.indexOf(targetModel);

doc.addBlock(
targetFlavour as never,
Expand All @@ -288,7 +288,7 @@ export class EmbedCardToolbar extends WidgetComponent<
index
);
this.std.selection.setGroup('note', []);
doc.deleteBlock(this.focusModel);
doc.deleteBlock(targetModel);
}

private _convertToEmbedView() {
Expand All @@ -309,7 +309,8 @@ export class EmbedCardToolbar extends WidgetComponent<
return;
}

const { doc, url, style, caption } = this.focusModel;
const targetModel = this.focusModel;
const { doc, url, style, caption } = targetModel;

if (!this._embedOptions || this._embedOptions.viewType !== 'embed') {
return;
Expand All @@ -320,9 +321,9 @@ export class EmbedCardToolbar extends WidgetComponent<
? style
: styles.filter(style => style !== 'vertical' && style !== 'cube')[0];

const parent = doc.getParent(this.focusModel);
assertExists(parent);
const index = parent.children.indexOf(this.focusModel);
const parent = doc.getParent(targetModel);
if (!parent) return;
const index = parent.children.indexOf(targetModel);

doc.addBlock(
flavour as never,
Expand All @@ -332,7 +333,7 @@ export class EmbedCardToolbar extends WidgetComponent<
);

this.std.selection.setGroup('note', []);
doc.deleteBlock(this.focusModel);
doc.deleteBlock(targetModel);
}

private _copyUrl() {
Expand Down Expand Up @@ -478,15 +479,15 @@ export class EmbedCardToolbar extends WidgetComponent<
return;
}

const { doc } = this.focusModel;
const parent = doc.getParent(this.focusModel);
const index = parent?.children.indexOf(this.focusModel);
const targetModel = this.focusModel;
const { doc, title, caption, url } = targetModel;
const parent = doc.getParent(targetModel);
const index = parent?.children.indexOf(targetModel);

const yText = new DocCollection.Y.Text();
const insert =
this.focusModel.title || this.focusModel.caption || this.focusModel.url;
const insert = title || caption || url;
yText.insert(0, insert);
yText.format(0, insert.length, { link: this.focusModel.url });
yText.format(0, insert.length, { link: url });
const text = new doc.Text(yText);
doc.addBlock(
'affine:paragraph',
Expand All @@ -497,7 +498,7 @@ export class EmbedCardToolbar extends WidgetComponent<
index
);

doc.deleteBlock(this.focusModel);
doc.deleteBlock(targetModel);
}

private _viewMenuButton() {
Expand Down
137 changes: 127 additions & 10 deletions tests/bookmark.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,16 @@
import type { Page } from '@playwright/test';
import type { BlockSnapshot } from '@store/index.js';

import { expect } from '@playwright/test';
import { ignoreSnapshotId } from 'utils/ignore.js';
import { getEmbedCardToolbar } from 'utils/query.js';

import {
activeNoteInEdgeless,
copyByKeyboard,
dragBlockToPoint,
enterPlaygroundRoom,
expectConsoleMessage,
focusRichText,
getPageSnapshot,
initEmptyEdgelessState,
Expand Down Expand Up @@ -41,7 +44,11 @@
import './utils/declare-test-window.js';
import { scoped, test } from './utils/playwright.js';

const inputUrl = 'http://localhost';
const LOCAL_HOST_URL = 'http://localhost';

const YOUTUBE_URL = 'https://www.youtube.com/watch?v=fakeid';

const FIGMA_URL = 'https://www.figma.com/design/JuXs6uOAICwf4I4tps0xKZ123';

test.beforeEach(async ({ page }) => {
await page.route(
Expand All @@ -54,15 +61,18 @@
);
});

const createBookmarkBlockBySlashMenu = async (page: Page) => {
const createBookmarkBlockBySlashMenu = async (
page: Page,
url = LOCAL_HOST_URL
) => {
await enterPlaygroundRoom(page);
await initEmptyParagraphState(page);
await focusRichText(page);
await page.waitForTimeout(100);
await type(page, '/link', 100);
await pressEnter(page);
await page.waitForTimeout(100);
await type(page, inputUrl);
await type(page, url);
await pressEnter(page);
};

Expand Down Expand Up @@ -92,15 +102,15 @@
await initEmptyParagraphState(page);
await focusRichText(page);

await type(page, inputUrl);
await setInlineRangeInSelectedRichText(page, 0, inputUrl.length);
await type(page, LOCAL_HOST_URL);
await setInlineRangeInSelectedRichText(page, 0, LOCAL_HOST_URL.length);
await copyByKeyboard(page);
await focusRichText(page);
await type(page, '/link');
await pressEnter(page);
await page.keyboard.press(`${SHORT_KEY}+v`);
await pressEnter(page);
expect(await getPageSnapshot(page, true)).toMatchSnapshot(

Check failure on line 113 in tests/bookmark.spec.ts

View workflow job for this annotation

GitHub Actions / E2E Test (1)

bookmark.spec.ts:98:1 › copy url to create bookmark in page mode 

  2) bookmark.spec.ts:98:1 › copy url to create bookmark in page mode ──────────────────────────────
    Error: Snapshot comparison failed:

      {
        "type": "block",
        "id": "0",
        "flavour": "affine:page",
        "version": 2,
        "props": {
          "title": {
            "$blocksuite:internal:text$": true,
            "delta": []
          }
        },
        "children": [
          {
            "type": "block",
            "id": "1",
            "flavour": "affine:note",
            "version": 1,
            "props": {
              "xywh": "[0,0,800,95]",
              "background": "--affine-note-background-white",
              "index": "a0",
              "hidden": false,
              "displayMode": "both",
              "edgeless": {
                "style": {
                  "borderRadius": 8,
                  "borderSize": 4,
                  "borderStyle": "none",
                  "shadowType": "--affine-note-shadow-box"
                }
              }
            },
            "children": [
              {
                "type": "block",
                "id": "2",
                "flavour": "affine:paragraph",
                "version": 1,
                "props": {
                  "type": "text",
                  "text": {
                    "$blocksuite:internal:text$": true,
                    "delta": [
                      {
                        "insert": "http://localhost/link"
                      }
                    ]
                  }
                },
                "children": []
              },
              {
                "type": "block",
                "id": "3",
                "flavour": "affine:bookmark",
                "version": 1,
                "props": {
                  "style": "horizontal",
                  "url": "http://localhost",
                  "caption": null,
                  "description": null,
                  "icon": null,
                  "image": null,
                  "title": null,
                  "index": "a0",
                  "xywh": "[0,0,0,0]",
                  "rotate": 0
                },
                "children": []
              }
            ]
          }
        ]
      }

    Expected: /home/runner/work/blocksuite/blocksuite/tests/snapshots/bookmark.spec.ts/copy-url-to-create-bookmark-in-page-mode-final.json
    Received: /home/runner/work/blocksuite/blocksuite/tests/test-results/bookmark-copy-url-to-create-bookmark-in-page-mode/copy-url-to-create-bookmark-in-page-mode-final-actual.json


      111 |     await page.keyboard.press(`${SHORT_KEY}+v`);
      112 |     await pressEnter(page);
    > 113 |     expect(await getPageSnapshot(page, true)).toMatchSnapshot(
          |                                               ^
      114 |       `${testInfo.title}_final.json`
      115 |     );
      116 |   }

        at /home/runner/work/blocksuite/blocksuite/tests/bookmark.spec.ts:113:47
`${testInfo.title}_final.json`
);
}
Expand All @@ -112,7 +122,7 @@
await enterPlaygroundRoom(page);
const ids = await initEmptyEdgelessState(page);
await focusRichText(page);
await type(page, inputUrl);
await type(page, LOCAL_HOST_URL);

await switchEditorMode(page);

Expand Down Expand Up @@ -203,7 +213,7 @@
await type(page, '/link');
await pressEnter(page);
await page.waitForTimeout(100);
await type(page, inputUrl);
await type(page, LOCAL_HOST_URL);
await pressEnter(page);

await focusRichText(page);
Expand Down Expand Up @@ -273,7 +283,7 @@
await pressEnter(page);
await type(page, '/link', 100);
await pressEnter(page);
await type(page, inputUrl);
await type(page, LOCAL_HOST_URL);
await pressEnter(page);

await assertBlockChildrenIds(page, '1', ['2', '4']);
Expand Down Expand Up @@ -301,7 +311,7 @@
await pressEnter(page);
await type(page, '/link', 100);
await pressEnter(page);
await type(page, inputUrl);
await type(page, LOCAL_HOST_URL);
await pressEnter(page);

await assertBlockChildrenIds(page, '1', ['3', '5']);
Expand Down Expand Up @@ -330,7 +340,7 @@
await type(page, '/link', 100);
await pressEnter(page);
await page.waitForTimeout(100);
await type(page, inputUrl);
await type(page, LOCAL_HOST_URL);
await pressEnter(page);

await switchEditorMode(page);
Expand All @@ -341,3 +351,110 @@
await waitNextFrame(page);
await assertParentBlockFlavour(page, '5', 'affine:surface');
});

test.describe('embed youtube card', () => {
test(scoped`create youtube card by slash menu`, async ({ page }) => {
expectConsoleMessage(page, /Unrecognized feature/, 'warning');
expectConsoleMessage(page, /Failed to load resource/);
await createBookmarkBlockBySlashMenu(page, YOUTUBE_URL);
const snapshot = (await getPageSnapshot(page)) as BlockSnapshot;
expect(ignoreSnapshotId(snapshot)).toMatchSnapshot('embed-youtube.json');
});

test(scoped`change youtube card style`, async ({ page }) => {
expectConsoleMessage(page, /Unrecognized feature/, 'warning');
expectConsoleMessage(page, /Failed to load resource/);

await createBookmarkBlockBySlashMenu(page, YOUTUBE_URL);
const youtube = page.locator('affine-embed-youtube-block');
await youtube.click();
await page.waitForTimeout(100);

// change to card view
const embedToolbar = page.locator('affine-embed-card-toolbar');
await expect(embedToolbar).toBeVisible();
const embedView = page.locator('editor-menu-button', {
hasText: 'embed view',
});
await expect(embedView).toBeVisible();
await embedView.click();
const cardView = page.locator('editor-menu-action', {
hasText: 'card view',
});
await expect(cardView).toBeVisible();
await cardView.click();
const snapshot = (await getPageSnapshot(page)) as BlockSnapshot;
expect(ignoreSnapshotId(snapshot)).toMatchSnapshot(
'horizontal-youtube.json'
);

// change to embed view
const bookmark = page.locator('affine-bookmark');
await bookmark.click();
await page.waitForTimeout(100);
const cardView2 = page.locator('editor-icon-button', {
hasText: 'card view',
});
await expect(cardView2).toBeVisible();
await cardView2.click();
const embedView2 = page.locator('editor-menu-action', {
hasText: 'embed view',
});
await expect(embedView2).toBeVisible();
await embedView2.click();
const snapshot2 = (await getPageSnapshot(page)) as BlockSnapshot;
expect(ignoreSnapshotId(snapshot2)).toMatchSnapshot('embed-youtube.json');
});
});

test.describe('embed figma card', () => {
test(scoped`create figma card by slash menu`, async ({ page }) => {
expectConsoleMessage(page, /Failed to load resource/);
expectConsoleMessage(page, /Refused to frame/);
await createBookmarkBlockBySlashMenu(page, FIGMA_URL);
const snapshot = (await getPageSnapshot(page)) as BlockSnapshot;
expect(ignoreSnapshotId(snapshot)).toMatchSnapshot('embed-figma.json');
});

test(scoped`change figma card style`, async ({ page }) => {
expectConsoleMessage(page, /Failed to load resource/);
expectConsoleMessage(page, /Refused to frame/);
await createBookmarkBlockBySlashMenu(page, FIGMA_URL);
const youtube = page.locator('affine-embed-figma-block');
await youtube.click();
await page.waitForTimeout(100);

// change to card view
const embedToolbar = page.locator('affine-embed-card-toolbar');
await expect(embedToolbar).toBeVisible();
const embedView = page.locator('editor-menu-button', {
hasText: 'embed view',
});
await expect(embedView).toBeVisible();
await embedView.click();
const cardView = page.locator('editor-menu-action', {
hasText: 'card view',
});
await expect(cardView).toBeVisible();
await cardView.click();
const snapshot = (await getPageSnapshot(page)) as BlockSnapshot;
expect(ignoreSnapshotId(snapshot)).toMatchSnapshot('horizontal-figma.json');

// change to embed view
const bookmark = page.locator('affine-bookmark');
await bookmark.click();
await page.waitForTimeout(100);
const cardView2 = page.locator('editor-icon-button', {
hasText: 'card view',
});
await expect(cardView2).toBeVisible();
await cardView2.click();
const embedView2 = page.locator('editor-menu-action', {
hasText: 'embed view',
});
await expect(embedView2).toBeVisible();
await embedView2.click();
const snapshot2 = (await getPageSnapshot(page)) as BlockSnapshot;
expect(ignoreSnapshotId(snapshot2)).toMatchSnapshot('embed-figma.json');
});
});
54 changes: 54 additions & 0 deletions tests/snapshots/bookmark.spec.ts/embed-figma.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
{
"type": "block",
"id": "*",
"flavour": "affine:page",
"version": 2,
"props": {
"title": {
"$blocksuite:internal:text$": true,
"delta": []
}
},
"children": [
{
"type": "block",
"id": "*",
"flavour": "affine:note",
"version": 1,
"props": {
"xywh": "[0,0,800,95]",
"background": "--affine-note-background-white",
"index": "a0",
"hidden": false,
"displayMode": "both",
"edgeless": {
"style": {
"borderRadius": 8,
"borderSize": 4,
"borderStyle": "none",
"shadowType": "--affine-note-shadow-box"
}
}
},
"children": [
{
"type": "block",
"id": "*",
"flavour": "affine:embed-figma",
"version": 1,
"props": {
"index": "a0",
"xywh": "[0,0,0,0]",
"rotate": 0,
"style": "figma",
"url": "https://www.figma.com/design/JuXs6uOAICwf4I4tps0xKZ123",
"caption": null,
"title": "Figma",
"description": "https://www.figma.com/design/JuXs6uOAICwf4I4tps0xKZ123"
},
"children": []
}
]
}
]
}
Loading
Loading