fix(editor): can not clear embed card alias description (#12794)
Close [BS-3600](https://linear.app/affine-design/issue/BS-3600/card-view下,编辑alias清空保存无效,无法实现清空) Close [BS-3599](https://linear.app/affine-design/issue/BS-3599/page-和canvas-mode下的note,对文本中的-embed-view-doc,隐藏掉-edit-按钮,避免误导,card) #### PR Dependency Tree * **PR #12794** 👈 This tree was auto-generated by [Charcoal](https://github.com/danerwilliams/charcoal) <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - The edit option has been removed from the toolbar for embedded synced documents. - **Bug Fixes** - The description field is now always included when editing embedded cards, even if left empty. - **Tests** - Removed tests related to editing and view switching of linked document embeds. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
@@ -195,8 +195,7 @@ export class EmbedCardEditModal extends SignalWatcher(
|
|||||||
|
|
||||||
const description = this.description$.value.trim();
|
const description = this.description$.value.trim();
|
||||||
|
|
||||||
const props: AliasInfo = { title };
|
const props: AliasInfo = { title, description };
|
||||||
if (description) props.description = description;
|
|
||||||
|
|
||||||
this.onSave?.(std, blockComponent, props);
|
this.onSave?.(std, blockComponent, props);
|
||||||
|
|
||||||
|
|||||||
@@ -24,10 +24,7 @@ import {
|
|||||||
} from '@blocksuite/affine/blocks/embed-doc';
|
} from '@blocksuite/affine/blocks/embed-doc';
|
||||||
import { SurfaceRefBlockComponent } from '@blocksuite/affine/blocks/surface-ref';
|
import { SurfaceRefBlockComponent } from '@blocksuite/affine/blocks/surface-ref';
|
||||||
import { toggleEmbedCardEditModal } from '@blocksuite/affine/components/embed-card-modal';
|
import { toggleEmbedCardEditModal } from '@blocksuite/affine/components/embed-card-modal';
|
||||||
import {
|
import { notifyLinkedDocClearedAliases } from '@blocksuite/affine/components/notification';
|
||||||
notifyLinkedDocClearedAliases,
|
|
||||||
notifyLinkedDocSwitchedToCard,
|
|
||||||
} from '@blocksuite/affine/components/notification';
|
|
||||||
import { isPeekable, peek } from '@blocksuite/affine/components/peek';
|
import { isPeekable, peek } from '@blocksuite/affine/components/peek';
|
||||||
import { toast } from '@blocksuite/affine/components/toast';
|
import { toast } from '@blocksuite/affine/components/toast';
|
||||||
import {
|
import {
|
||||||
@@ -862,44 +859,6 @@ const embedSyncedDocToolbarConfig = {
|
|||||||
});
|
});
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
|
||||||
id: 'edit',
|
|
||||||
tooltip: 'Edit',
|
|
||||||
icon: EditIcon(),
|
|
||||||
run(ctx) {
|
|
||||||
const block = ctx.getCurrentBlockByType(
|
|
||||||
EmbedSyncedDocBlockComponent
|
|
||||||
);
|
|
||||||
if (!block) return;
|
|
||||||
|
|
||||||
ctx.hide();
|
|
||||||
|
|
||||||
const model = block.model;
|
|
||||||
const doc = ctx.workspace.getDoc(model.props.pageId);
|
|
||||||
const abortController = new AbortController();
|
|
||||||
abortController.signal.onabort = () => ctx.show();
|
|
||||||
|
|
||||||
toggleEmbedCardEditModal(
|
|
||||||
ctx.host,
|
|
||||||
model,
|
|
||||||
'embed',
|
|
||||||
doc ? { title: doc.meta?.title } : undefined,
|
|
||||||
undefined,
|
|
||||||
(std, _component, props) => {
|
|
||||||
block.convertToCard(props);
|
|
||||||
|
|
||||||
notifyLinkedDocSwitchedToCard(std);
|
|
||||||
},
|
|
||||||
abortController
|
|
||||||
);
|
|
||||||
|
|
||||||
ctx.track('OpenedAliasPopup', {
|
|
||||||
category: 'linked doc',
|
|
||||||
type: 'embed view',
|
|
||||||
control: 'edit',
|
|
||||||
});
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
|||||||
@@ -814,153 +814,6 @@ test.describe('Customize linked doc title and description', () => {
|
|||||||
await expect(cardDescription).toBeHidden();
|
await expect(cardDescription).toBeHidden();
|
||||||
});
|
});
|
||||||
|
|
||||||
// Embed View
|
|
||||||
test('should automatically switch to card view and set a custom title and description', async ({
|
|
||||||
page,
|
|
||||||
}) => {
|
|
||||||
await page.keyboard.press('Enter');
|
|
||||||
await createLinkedPage(page, 'Test Page');
|
|
||||||
|
|
||||||
const { toolbar, switchViewBtn, inlineViewBtn, cardViewBtn, embedViewBtn } =
|
|
||||||
toolbarButtons(page);
|
|
||||||
|
|
||||||
const inlineLink = page.locator('affine-reference');
|
|
||||||
await inlineLink.hover();
|
|
||||||
|
|
||||||
// Copies link
|
|
||||||
await toolbar.getByRole('button', { name: 'Copy link' }).click();
|
|
||||||
const url0 = await (
|
|
||||||
await page.evaluateHandle(() => navigator.clipboard.readText())
|
|
||||||
).jsonValue();
|
|
||||||
|
|
||||||
await page.waitForTimeout(200);
|
|
||||||
|
|
||||||
await inlineLink.hover();
|
|
||||||
|
|
||||||
// Switches to card view
|
|
||||||
await switchViewBtn.click();
|
|
||||||
await cardViewBtn.click();
|
|
||||||
|
|
||||||
const cardLink = page.locator('affine-embed-linked-doc-block');
|
|
||||||
const cardTitle = cardLink.locator(
|
|
||||||
'.affine-embed-linked-doc-content-title-text'
|
|
||||||
);
|
|
||||||
const cardDescription = cardLink.locator(
|
|
||||||
'.affine-embed-linked-doc-content-note.alias'
|
|
||||||
);
|
|
||||||
|
|
||||||
await cardLink.click();
|
|
||||||
await cardLink.click();
|
|
||||||
|
|
||||||
// Copies link
|
|
||||||
await toolbar.getByRole('button', { name: 'Copy link' }).click();
|
|
||||||
const url1 = await (
|
|
||||||
await page.evaluateHandle(() => navigator.clipboard.readText())
|
|
||||||
).jsonValue();
|
|
||||||
|
|
||||||
// Switches to embed view
|
|
||||||
await switchViewBtn.click();
|
|
||||||
await embedViewBtn.click();
|
|
||||||
|
|
||||||
const embedLink = page.locator('affine-embed-synced-doc-block');
|
|
||||||
const embedTitle = embedLink.locator('.affine-embed-synced-doc-title');
|
|
||||||
|
|
||||||
// refocus the page
|
|
||||||
await embedLink.click();
|
|
||||||
await embedLink.click();
|
|
||||||
|
|
||||||
// Copies link
|
|
||||||
await toolbar.getByRole('button', { name: 'Copy link' }).click();
|
|
||||||
const url2 = await (
|
|
||||||
await page.evaluateHandle(() => navigator.clipboard.readText())
|
|
||||||
).jsonValue();
|
|
||||||
|
|
||||||
expect(url0).not.toBeNull();
|
|
||||||
expect(url1).not.toBeNull();
|
|
||||||
expect(url2).not.toBeNull();
|
|
||||||
expect(url0).toBe(url1);
|
|
||||||
expect(url1).toBe(url2);
|
|
||||||
|
|
||||||
// Edits title & description
|
|
||||||
await toolbar.getByRole('button', { name: 'Edit' }).click();
|
|
||||||
|
|
||||||
const embedEditPopup = page.locator('embed-card-edit-modal');
|
|
||||||
|
|
||||||
// Title alias
|
|
||||||
await page.keyboard.type('Test Page Alias Again');
|
|
||||||
await page.keyboard.press('Tab');
|
|
||||||
// Description alias
|
|
||||||
await page.keyboard.type('This is a new description');
|
|
||||||
|
|
||||||
// Cancels
|
|
||||||
await embedEditPopup.getByRole('button', { name: 'Cancel' }).click();
|
|
||||||
await expect(embedEditPopup).toBeHidden();
|
|
||||||
|
|
||||||
await embedLink.click();
|
|
||||||
|
|
||||||
// Edits title & description
|
|
||||||
await toolbar.getByRole('button', { name: 'Edit' }).click();
|
|
||||||
|
|
||||||
// Title alias
|
|
||||||
await page.keyboard.type('Test Page Alias');
|
|
||||||
await page.keyboard.press('Tab');
|
|
||||||
// Description alias
|
|
||||||
await page.keyboard.type('This is a new description');
|
|
||||||
|
|
||||||
// Saves aliases
|
|
||||||
await embedEditPopup.getByRole('button', { name: 'Save' }).click();
|
|
||||||
|
|
||||||
// Automatically switch to card view
|
|
||||||
await expect(embedLink).toBeHidden();
|
|
||||||
|
|
||||||
await expect(cardTitle).toHaveText('Test Page Alias');
|
|
||||||
await expect(cardDescription).toHaveText('This is a new description');
|
|
||||||
|
|
||||||
await cardLink.click();
|
|
||||||
|
|
||||||
const docTitle = toolbar.getByRole('button', { name: 'Doc title' });
|
|
||||||
await expect(docTitle).toHaveText('Test Page', { useInnerText: true });
|
|
||||||
await expect(cardTitle).toHaveText('Test Page Alias');
|
|
||||||
|
|
||||||
// Switches to embed view
|
|
||||||
await switchViewBtn.click();
|
|
||||||
await embedViewBtn.click();
|
|
||||||
|
|
||||||
await expect(embedTitle).toHaveText('Test Page');
|
|
||||||
|
|
||||||
await embedLink.click();
|
|
||||||
await embedLink.click();
|
|
||||||
|
|
||||||
// Switches to inline view
|
|
||||||
{
|
|
||||||
await switchViewBtn.click();
|
|
||||||
await inlineViewBtn.click();
|
|
||||||
|
|
||||||
// Focuses inline editor
|
|
||||||
const bounds = (await inlineLink.boundingBox())!;
|
|
||||||
await page.mouse.click(
|
|
||||||
bounds.x + bounds.width + 30,
|
|
||||||
bounds.y + bounds.height / 2
|
|
||||||
);
|
|
||||||
|
|
||||||
await inlineLink.hover();
|
|
||||||
|
|
||||||
const title = inlineLink.locator('.affine-reference-title');
|
|
||||||
await expect(title).toHaveText('Test Page');
|
|
||||||
|
|
||||||
// Switches to embed view
|
|
||||||
await switchViewBtn.click();
|
|
||||||
await embedViewBtn.click();
|
|
||||||
}
|
|
||||||
|
|
||||||
await embedLink.click();
|
|
||||||
|
|
||||||
await expect(embedTitle).toHaveText('Test Page');
|
|
||||||
await expect(
|
|
||||||
toolbar.getByRole('button', { name: 'Doc title' })
|
|
||||||
).toBeHidden();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('should show emoji doc icon in normal document', async ({ page }) => {
|
test('should show emoji doc icon in normal document', async ({ page }) => {
|
||||||
await enableEmojiDocIcon(page);
|
await enableEmojiDocIcon(page);
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user