fix(editor): preserve expanded headings in readonly mode (#15549)

## Description

Closes #13579.

On readonly shared pages, selecting text under a heading persisted as
collapsed caused reactive selection handling to restore the persisted
collapsed value over the viewer-local expanded state. This closed the
heading again and prevented selecting or copying its revealed content.

This change:
- separates persisted collapsed-state synchronization from selection
cleanup;
- makes the readonly-local collapsed state reactive for both BlockSuite
effects and Lit rendering;
- preserves selection and copying while a readonly heading is locally
expanded;
- still clears hidden text selection when the heading is collapsed
again;
- adds a Playwright regression covering collapse → readonly → expand →
drag-select → copy → re-collapse.

## Checklist

- [x] I have signed the [AFFiNE Contributor License
Agreement](https://cla-assistant.io/toeverything/AFFiNE) — required
before merge; the `license/cla` check must be green ([how it
works](https://github.com/toeverything/AFFiNE/blob/canary/docs/BUILDING.md#sign-the-cla-first))
- [x] The PR targets the `canary` branch and its title follows
[Conventional Commits](https://www.conventionalcommits.org/)
- [x] Tests are added or updated where it makes sense
- [x] `yarn lint` and `yarn typecheck` pass locally

## Testing

- Focused Chromium regression: 1 passed
- Adjacent readonly paragraph scenarios: 3 passed
- Targeted `oxfmt --check`: passed
- Targeted `oxlint --deny-warnings`: passed
- `git diff --check`: passed

`yarn typecheck` could not be confirmed in this checkout because
required generated workspace declaration outputs are missing.


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

* **Bug Fixes**
  * Improved collapsed heading behavior in read-only mode.
* Preserved local heading expansion and text selection when copying
content and collapsing the heading.
* Ensured local expansion state resets correctly when switching out of
and back into read-only mode.

* **Tests**
* Added coverage for read-only heading expansion, keyboard copying,
clipboard access, mode switching, and text selection.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: eXtgmA

blocksuite/affine/blocks/paragraph/src/paragraph-block.ts

@@ -25,7 +25,7 @@ import {
 } from '@blocksuite/std/inline';
 import { computed, effect, signal } from '@preact/signals-core';
 import { html, nothing, type TemplateResult } from 'lit';
-import { query, state } from 'lit/decorators.js';
+import { query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { styleMap } from 'lit/directives/style-map.js';
@@ -48,6 +48,8 @@ export class ParagraphBlockComponent extends CaptionedBlockComponent<ParagraphBl
 
   private readonly _displayPlaceholder = signal(false);
 
+  private readonly _readonlyCollapsed = signal(false);
+
   private _inlineRangeProvider: InlineRangeProvider | null = null;
 
   private readonly _isInDatabase = () => {
@@ -67,6 +69,11 @@ export class ParagraphBlockComponent extends CaptionedBlockComponent<ParagraphBl
       ?.getPlaceholder(this.model);
   }
 
+  private _setReadonlyCollapsed(collapsed: boolean) {
+    this._readonlyCollapsed.value = collapsed;
+    this.requestUpdate();
+  }
+
   get citationService() {
     return this.std.get(CitationProvider);
   }
@@ -185,9 +192,17 @@ export class ParagraphBlockComponent extends CaptionedBlockComponent<ParagraphBl
 
     this.disposables.add(
       effect(() => {
-        const collapsed = this.model.props.collapsed$.value;
-        this._readonlyCollapsed = collapsed;
+        if (this.store.readonly$.value) {
+          this._setReadonlyCollapsed(this.model.props.collapsed$.value);
+        }
+      })
+    );
 
+    this.disposables.add(
+      effect(() => {
+        const collapsed = this.store.readonly
+          ? this._readonlyCollapsed.value
+          : this.model.props.collapsed$.value;
         // reset text selection when selected block is collapsed
         if (this.model.props.type$.value.startsWith('h') && collapsed) {
           const collapsedSiblings = this.collapsedSiblings;
@@ -244,7 +259,7 @@ export class ParagraphBlockComponent extends CaptionedBlockComponent<ParagraphBl
 
     const { type$ } = this.model.props;
     const collapsed = this.store.readonly
-      ? this._readonlyCollapsed
+      ? this._readonlyCollapsed.value
       : this.model.props.collapsed;
     const collapsedSiblings = this.collapsedSiblings;
 
@@ -324,7 +339,7 @@ export class ParagraphBlockComponent extends CaptionedBlockComponent<ParagraphBl
                     .controls=${childrenId}
                     .updateCollapsed=${(value: boolean) => {
                       if (this.store.readonly) {
-                        this._readonlyCollapsed = value;
+                        this._setReadonlyCollapsed(value);
                       } else {
                         this.store.captureSync();
                         this.store.updateBlock(this.model, {
@@ -380,9 +395,6 @@ export class ParagraphBlockComponent extends CaptionedBlockComponent<ParagraphBl
     `;
   }
 
-  @state()
-  private accessor _readonlyCollapsed = false;
-
   @query('rich-text')
   private accessor _richTextElement: RichText | null = null;
 

tests/blocksuite/e2e/paragraph.spec.ts

@@ -3,13 +3,15 @@ import { expect } from '@playwright/test';
 
 import {
   captureHistory,
+  copyByKeyboard,
   dragBetweenIndices,
   dragOverTitle,
   enterPlaygroundRoom,
   focusRichText,
   focusRichTextEnd,
   focusTitle,
   getBlockIds,
+  getClipboardText,
   getIndexCoordinate,
   getInlineSelectionIndex,
   getPageSnapshot,
@@ -35,6 +37,7 @@ import {
   setInlineRangeInInlineEditor,
   setSelection,
   SHORT_KEY,
+  switchEditorMode,
   switchReadonly,
   type,
   undoByClick,
@@ -56,6 +59,7 @@ import {
   assertDocTitleFocus,
   assertRichTextInlineRange,
   assertRichTexts,
+  assertTextSelection,
   assertTitle,
 } from './utils/asserts.js';
 import { test } from './utils/playwright.js';
@@ -1329,6 +1333,75 @@ test('select divider using delete keyboard from prev/next paragraph', async ({
 });
 
 test.describe('readonly mode', () => {
+  test('heading restores persisted collapse state after readonly mode is re-entered', async ({
+    page,
+  }) => {
+    // Given a persisted collapsed heading that a readonly viewer expands locally
+    await enterPlaygroundRoom(page);
+    await initEmptyEdgelessState(page);
+    await focusRichText(page);
+    await type(page, 'Heading');
+    await updateBlockType(page, 'affine:paragraph', 'h2');
+    await pressEnter(page);
+    await type(page, 'Shared content');
+
+    const content = page.locator('affine-paragraph').nth(1);
+    await page.getByRole('button', { name: 'Collapse content' }).click();
+    await switchReadonly(page);
+    await page.getByRole('button', { name: 'Expand content' }).click();
+    await expect(content).toBeVisible();
+
+    // When the document leaves and re-enters readonly mode
+    await switchReadonly(page, false);
+    await expect(content).not.toBeVisible();
+    await switchReadonly(page);
+
+    // Then the viewer-local state is reset from the persisted collapse state
+    await expect(content).not.toBeVisible();
+  });
+
+  test('expanded heading stays open after selecting shared content', async ({
+    page,
+  }) => {
+    // Given a heading persisted as collapsed before the document becomes readonly
+    await enterPlaygroundRoom(page);
+    await initEmptyEdgelessState(page);
+    await focusRichText(page);
+    await type(page, 'Heading');
+    await updateBlockType(page, 'affine:paragraph', 'h2');
+    await pressEnter(page);
+    await type(page, 'Shared content');
+
+    const content = page.locator('affine-paragraph').nth(1);
+    await page.getByRole('button', { name: 'Collapse content' }).click();
+    await expect(content).not.toBeVisible();
+
+    await switchReadonly(page);
+    await switchEditorMode(page);
+    await switchEditorMode(page);
+
+    // When a reader expands the heading and selects its revealed content
+    await page.getByRole('button', { name: 'Expand content' }).click();
+    await expect(content).toBeVisible();
+    await dragBetweenIndices(page, [1, 0], [1, 6]);
+
+    // Then the reader's local expansion and text selection remain intact
+    await expect(content).toBeVisible();
+    const contentId = await content.getAttribute('data-block-id');
+    expect(contentId).not.toBeNull();
+    await assertTextSelection(page, {
+      blockId: contentId ?? '',
+      index: 0,
+      length: 6,
+    });
+    await copyByKeyboard(page);
+    expect(await getClipboardText(page)).toBe('Shared');
+
+    await page.getByRole('button', { name: 'Collapse content' }).click();
+    await expect(content).not.toBeVisible();
+    await assertTextSelection(page);
+  });
+
   test('should placeholder not show at readonly mode', async ({ page }) => {
     await enterPlaygroundRoom(page);
     await initEmptyParagraphState(page);