mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-08-11 05:58:56 +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);
|
font-weight: var(--edgeless-text-font-weight);
|
||||||
text-align: var(--edgeless-text-text-align);
|
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(() => {
|
private readonly _resizeObserver = new ResizeObserver(() => {
|
||||||
@@ -304,6 +309,7 @@ export class EdgelessTextBlockComponent extends GfxBlockComponent<EdgelessTextBl
|
|||||||
style=${styleMap(containerStyle)}
|
style=${styleMap(containerStyle)}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
|
class=${!editing && this.model.isLocked() ? 'locked-content' : ''}
|
||||||
style=${styleMap({
|
style=${styleMap({
|
||||||
pointerEvents: editing ? 'auto' : 'none',
|
pointerEvents: editing ? 'auto' : 'none',
|
||||||
userSelect: editing ? 'auto' : 'none',
|
userSelect: editing ? 'auto' : 'none',
|
||||||
|
|||||||
Reference in New Issue
Block a user