mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-05-08 22:07:32 +08:00
fix(editor): allow hyperlink clicks in locked edgeless text blocks (#14829)
Fixes #14673 ## Summary When an edgeless text block is locked, `pointer-events: none` on the inner content div (`edgeless-text-block.ts:308`) blocks all mouse interaction — including clicking hyperlinks. Locking is intended to prevent accidental edits, not to block navigation, so links should remain clickable. ## Fix Apply a `locked-content` class on the inner div when the block is locked and not being edited, and add a targeted CSS rule restoring `pointer-events: auto` on anchor elements within locked content. ## Context Re-implements the fix from PR #14692 (authored by @moktamd, reverted per @darkskygit's comment on #14673 because the original contributor had not signed the CLA). The CLA is signed for this PR. ## Test plan - [ ] On edgeless canvas, create a text block with a hyperlink (e.g. `[link](https://affine.pro)`) - [ ] Lock the block via the shape toolbar - [ ] Hover the link → cursor shows pointer - [ ] Click the link → navigation occurs - [ ] Unlock and confirm editing still works as before <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Bug Fixes** * Links within locked text blocks are now interactive and clickable with proper visual cursor feedback. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
@@ -43,6 +43,11 @@ export class EdgelessTextBlockComponent extends GfxBlockComponent<EdgelessTextBl
|
||||
font-weight: var(--edgeless-text-font-weight);
|
||||
text-align: var(--edgeless-text-text-align);
|
||||
}
|
||||
|
||||
.edgeless-text-block-container .locked-content a[href] {
|
||||
pointer-events: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
`;
|
||||
|
||||
private readonly _resizeObserver = new ResizeObserver(() => {
|
||||
@@ -304,6 +309,7 @@ export class EdgelessTextBlockComponent extends GfxBlockComponent<EdgelessTextBl
|
||||
style=${styleMap(containerStyle)}
|
||||
>
|
||||
<div
|
||||
class=${!editing && this.model.isLocked() ? 'locked-content' : ''}
|
||||
style=${styleMap({
|
||||
pointerEvents: editing ? 'auto' : 'none',
|
||||
userSelect: editing ? 'auto' : 'none',
|
||||
|
||||
Reference in New Issue
Block a user