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:
Abdul Rehman
2026-04-15 14:31:48 +05:00
committed by GitHub
parent c5b0057778
commit 1d66e7e8ca

View File

@@ -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',