fix(editor): render strikethrough on links (#15109)

**Issue**

Strikethrough on a link doesn't render. The toolbar button highlights
but no line
appears (#15106).

**Solution**

affine-link hardcoded text-decoration: none in the override it passes to
affineTextStyles, which clobbered the decoration computed from
strike/underline.
Removing it fixes the render; plain links still show no underline
because
affineTextStyles returns none by default.

**Result**

Strikethrough and underline render on links again. Added an e2e test: a
plain link
stays undecorated, a struck link renders line-through, red before the
fix and green
after.

fix #15106

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Bug Fixes**
* Fixed link text-decoration styling to properly support strikethrough
and other text formatting when applied to links.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
Juan Abimael Santos Castillo
2026-06-14 07:34:36 -04:00
committed by GitHub
parent 6a2b73e76f
commit ac3c93ccfa
2 changed files with 33 additions and 1 deletions
@@ -160,7 +160,6 @@ export class AffineLink extends WithDisposable(ShadowlessElement) {
const linkStyle = {
color: 'var(--affine-link-color)',
fill: 'var(--affine-link-color)',
'text-decoration': 'none',
cursor: 'pointer',
};
+33
View File
@@ -16,6 +16,7 @@ import {
selectAllByKeyboard,
setSelection,
SHORT_KEY,
strikethrough,
switchReadonly,
type,
waitNextFrame,
@@ -421,3 +422,35 @@ test('convert link to embed', async ({ page }, testInfo) => {
await waitNextFrame(page);
await expect(toolbar).toBeVisible();
});
test('strikethrough applies to a link', async ({ page }) => {
const linkText = 'linkText';
const link = 'http://example.com';
await enterPlaygroundRoom(page);
await initEmptyParagraphState(page);
await focusRichText(page);
await type(page, linkText);
// turn the selected text into a link
await dragBetweenIndices(page, [0, 0], [0, 8]);
await pressCreateLinkShortCut(page);
await page.mouse.move(0, 0);
const linkPopoverInput = page.locator('.affine-link-popover-input');
await expect(linkPopoverInput).toBeVisible();
await type(page, link);
await pressEnter(page);
const linkLocator = page.locator('affine-link a');
await expect(linkLocator).toHaveAttribute('href', link);
// a plain link keeps no text-decoration (preserve the default of no underline)
await expect(linkLocator).toHaveCSS('text-decoration-line', 'none');
// re-select the link text and strike it through
await dragBetweenIndices(page, [0, 0], [0, 8]);
await strikethrough(page);
await page.mouse.move(0, 0);
// regression for #15106: the strike must actually render on the link
await expect(linkLocator).toHaveCSS('text-decoration-line', 'line-through');
});