@formicoidea/labre-core 0.39.1 → 0.40.0

package/dist/_pkgs/affine-block-callout/emoji-margin.js

@@ -1,22 +1,30 @@
 import { ParagraphBlockModel, } from '../affine-model/index.js';
+import { HEADING_LEVELS, HEADING_SCALE, headingLineBox, } from '../affine-shared/consts/index.js';
 import { matchModels } from '../affine-shared/utils/index.js';
+/** The emoji's box, px (`.affine-callout-emoji-container` in callout-block.ts). */
+const EMOJI_BOX_PX = 24;
 /**
- * How far the emoji has to drop to sit on the first line's baseline.
+ * H1's bold caps read as sitting low when the emoji is centred on the line
+ * box mathematically; lifting the emoji by 1px levels it optically.
+ */
+const H1_OPTICAL_LIFT_PX = 1;
+/**
+ * How far the emoji has to drop to sit level with the first line.
  *
  * The emoji is a fixed 24px box next to a column whose first line can be
  * anything from an H1 to an ordinary paragraph. A single margin therefore
  * cannot be right twice: level with a paragraph it floats above an H1, level
- * with an H1 it sinks below a paragraph. These are the drops measured per
- * heading level.
+ * with an H1 it sinks below a paragraph. Per heading level, the drop centres
+ * the emoji on the heading's first line box, below its margin-top:
+ * `marginTop + lineBox / 2 - emojiBox / 2`.
  */
-const EMOJI_MARGIN_TOP_BY_TYPE = {
-    h1: '23px',
-    h2: '20px',
-    h3: '16px',
-    h4: '15px',
-    h5: '14px',
-    h6: '13px',
-};
+const EMOJI_MARGIN_TOP_BY_TYPE = Object.fromEntries(HEADING_LEVELS.map(level => {
+    const centred = HEADING_SCALE[level].marginTop +
+        headingLineBox(level) / 2 -
+        EMOJI_BOX_PX / 2;
+    const drop = level === 'h1' ? centred - H1_OPTICAL_LIFT_PX : centred;
+    return [level, `${drop}px`];
+}));
 /** What a paragraph, a list, or an empty callout gets. */
 const DEFAULT_EMOJI_MARGIN_TOP = '10px';
 /**

package/dist/_pkgs/affine-block-list/list-block.d.ts

@@ -6,6 +6,14 @@ import { type TemplateResult } from 'lit';
 export declare class ListBlockComponent extends CaptionedBlockComponent<ListBlockModel> {
     static styles: import("lit").CSSResult;
     private _inlineRangeProvider;
+    /**
+     * The collapse state a READER holds locally. Same contract as
+     * `affine-paragraph`: a readonly document is never written, so the toggle
+     * carries the reader's own expansion here instead of in the model. A signal
+     * rather than a Lit `@state()`, so BlockSuite effects can depend on it.
+     */
+    private readonly _readonlyCollapsed;
+    private _setReadonlyCollapsed;
     private readonly _onClickIcon;
     get attributeRenderer(): import("../std/inline/types.js").AttributeRenderer<import("../affine-shared/types/index.js").AffineTextAttributes>;
     get attributesSchema(): import("zod").ZodType<any, import("zod").ZodTypeDef, any>;
@@ -16,7 +24,6 @@ export declare class ListBlockComponent extends CaptionedBlockComponent<ListBloc
     connectedCallback(): void;
     getUpdateComplete(): Promise<boolean>;
     renderBlock(): TemplateResult<1>;
-    private accessor _readonlyCollapsed;
     private accessor _richTextElement;
     accessor blockContainerStyles: {
         margin: string;

package/dist/_pkgs/affine-block-list/list-block.js

@@ -42,9 +42,9 @@ import { DocModeProvider } from '../affine-shared/services/index.js';
 import { getViewportElement } from '../affine-shared/utils/index.js';
 import { BlockSelection, TextSelection } from '../std/index.js';
 import { getInlineRangeProvider, } from '../std/inline/index.js';
-import { effect } from '@preact/signals-core';
+import { effect, signal } from '@preact/signals-core';
 import { html, nothing } from 'lit';
-import { query, state } from 'lit/decorators.js';
+import { query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { correctNumberedListsOrderToPrev } from './commands/utils.js';
@@ -52,9 +52,6 @@ import { listBlockStyles } from './styles.js';
 import { getListIcon } from './utils/get-list-icon.js';
 let ListBlockComponent = (() => {
     let _classSuper = CaptionedBlockComponent;
-    let __readonlyCollapsed_decorators;
-    let __readonlyCollapsed_initializers = [];
-    let __readonlyCollapsed_extraInitializers = [];
     let __richTextElement_decorators;
     let __richTextElement_initializers = [];
     let __richTextElement_extraInitializers = [];
@@ -62,12 +59,19 @@ let ListBlockComponent = (() => {
         constructor() {
             super(...arguments);
             this._inlineRangeProvider = null;
+            /**
+             * The collapse state a READER holds locally. Same contract as
+             * `affine-paragraph`: a readonly document is never written, so the toggle
+             * carries the reader's own expansion here instead of in the model. A signal
+             * rather than a Lit `@state()`, so BlockSuite effects can depend on it.
+             */
+            this._readonlyCollapsed = signal(false);
             this._onClickIcon = (e) => {
                 e.stopPropagation();
                 e.preventDefault();
                 if (this.model.props.type === 'toggle') {
                     if (this.store.readonly) {
-                        this._readonlyCollapsed = !this._readonlyCollapsed;
+                        this._setReadonlyCollapsed(!this._readonlyCollapsed.value);
                     }
                     else {
                         this.store.captureSync();
@@ -93,21 +97,22 @@ let ListBlockComponent = (() => {
                 }
                 this._select();
             };
-            this.#_readonlyCollapsed_accessor_storage = __runInitializers(this, __readonlyCollapsed_initializers, false);
-            this.#_richTextElement_accessor_storage = (__runInitializers(this, __readonlyCollapsed_extraInitializers), __runInitializers(this, __richTextElement_initializers, null));
+            this.#_richTextElement_accessor_storage = __runInitializers(this, __richTextElement_initializers, null);
             this.#blockContainerStyles_accessor_storage = (__runInitializers(this, __richTextElement_extraInitializers), {
                 margin: 'var(--affine-list-margin, 10px 0)',
             });
         }
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-            __readonlyCollapsed_decorators = [state()];
             __richTextElement_decorators = [query('rich-text')];
-            __esDecorate(this, null, __readonlyCollapsed_decorators, { kind: "accessor", name: "_readonlyCollapsed", static: false, private: false, access: { has: obj => "_readonlyCollapsed" in obj, get: obj => obj._readonlyCollapsed, set: (obj, value) => { obj._readonlyCollapsed = value; } }, metadata: _metadata }, __readonlyCollapsed_initializers, __readonlyCollapsed_extraInitializers);
             __esDecorate(this, null, __richTextElement_decorators, { kind: "accessor", name: "_richTextElement", static: false, private: false, access: { has: obj => "_richTextElement" in obj, get: obj => obj._richTextElement, set: (obj, value) => { obj._richTextElement = value; } }, metadata: _metadata }, __richTextElement_initializers, __richTextElement_extraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
         static { this.styles = listBlockStyles; }
+        _setReadonlyCollapsed(collapsed) {
+            this._readonlyCollapsed.value = collapsed;
+            this.requestUpdate();
+        }
         get attributeRenderer() {
             return this.inlineManager.getRenderer();
         }
@@ -137,9 +142,14 @@ let ListBlockComponent = (() => {
         connectedCallback() {
             super.connectedCallback();
             this._inlineRangeProvider = getInlineRangeProvider(this);
+            // Only ENTERING readonly mode (or a later change of the persisted value)
+            // seeds the reader's local state; while readonly holds, the reader's own
+            // expansion is never overwritten. Aligned on `affine-paragraph`, where the
+            // unguarded version was a real defect (#262).
             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 type = this.model.props.type$.value;
@@ -162,10 +172,12 @@ let ListBlockComponent = (() => {
         renderBlock() {
             const { model, _onClickIcon } = this;
             const collapsed = this.store.readonly
-                ? this._readonlyCollapsed
+                ? this._readonlyCollapsed.value
                 : model.props.collapsed;
             const listIcon = getListIcon(model, !collapsed, _onClickIcon);
+            const childrenId = `list-children-${this.model.id}`;
             const children = html `<div
+      id=${childrenId}
       class="affine-block-children-container"
       style=${styleMap({
                 paddingLeft: `${BLOCK_CHILDREN_CONTAINER_PADDING_LEFT}px`,
@@ -187,9 +199,10 @@ let ListBlockComponent = (() => {
                 ? html `
                 <blocksuite-toggle-button
                   .collapsed=${collapsed}
+                  .controls=${childrenId}
                   .updateCollapsed=${(value) => {
                     if (this.store.readonly) {
-                        this._readonlyCollapsed = value;
+                        this._setReadonlyCollapsed(value);
                     }
                     else {
                         this.store.captureSync();
@@ -222,9 +235,6 @@ let ListBlockComponent = (() => {
       </div>
     `;
         }
-        #_readonlyCollapsed_accessor_storage;
-        get _readonlyCollapsed() { return this.#_readonlyCollapsed_accessor_storage; }
-        set _readonlyCollapsed(value) { this.#_readonlyCollapsed_accessor_storage = value; }
         #_richTextElement_accessor_storage;
         get _richTextElement() { return this.#_richTextElement_accessor_storage; }
         set _richTextElement(value) { this.#_richTextElement_accessor_storage = value; }

package/dist/_pkgs/affine-block-note/configs/tooltips.d.ts

@@ -1,4 +1,20 @@
+import { type HeadingLevel } from '../../affine-shared/consts/index.js';
 import type { SlashMenuTooltip } from '../../affine-widget-slash-menu/index.js';
+/**
+ * The body lines of a heading preview that fit ENTIRELY in the frame, with the
+ * baseline each is set on.
+ *
+ * The body starts right under the heading's line box, so how many of its lines
+ * the card can show depends on the level: derived here from the geometry (line
+ * boxes, frame height, bottom padding) rather than tuned per level. At 10px on
+ * a 12px line, Inter's descenders end within a twentieth of a pixel of the line
+ * box's bottom edge, which the bottom padding covers: a line whose box fits is
+ * never clipped.
+ */
+export declare function headingPreviewBodyLines(level: HeadingLevel): {
+    y: number;
+    text: string;
+}[];
 export declare const BoldTextTooltip: import("lit-html").TemplateResult<1>;
 export declare const ItalicTooltip: import("lit-html").TemplateResult<1>;
 export declare const StrikethroughTooltip: import("lit-html").TemplateResult<1>;

package/dist/_pkgs/affine-block-note/configs/tooltips.js

@@ -1,4 +1,5 @@
-import { html } from 'lit';
+import { HEADING_SCALE, headingLineBox, } from '../../affine-shared/consts/index.js';
+import { html, svg } from 'lit';
 // prettier-ignore
 const TextTooltip = html `<svg width="170" height="68" viewBox="0 0 170 68" fill="none" xmlns="http://www.w3.org/2000/svg">
 <rect width="170" height="68" rx="2" fill="white"/>
@@ -10,78 +11,110 @@ const TextTooltip = html `<svg width="170" height="68" viewBox="0 0 170 68" fill
 </g>
 </svg>
 `;
+/** The preview frame: every slash-menu figure is a 170×68 card. */
+const PREVIEW_HEIGHT = 68;
+/** Space above the first line of a preview, px. */
+const PREVIEW_PADDING_TOP = 6;
+/**
+ * Space a preview keeps free under its last line, px. A body line is drawn only
+ * if its whole line box ends above it, so no line is ever cut by the frame.
+ */
+const PREVIEW_PADDING_BOTTOM = 2;
+/** The body text under a heading preview, shrunk to 10px on a 12px line. */
+const BODY_FONT_SIZE = 10;
+const BODY_LINE_HEIGHT = 12;
+/** Extra space between two paragraphs of the body, px. */
+const BODY_PARAGRAPH_GAP = 4;
+/**
+ * The body, as the lines it is set in (the `text` preview's own wording). A
+ * paragraph ends with a newline, as the Figma export wrote it.
+ */
+const BODY_PARAGRAPHS = [
+    [
+        'In a decentralized system, we can have a kaleidoscopic ',
+        'complexity to our data.\n',
+    ],
+    [
+        'Any user may have a different perspective on what data they ',
+        'either have, choose to share, or accept.\n',
+    ],
+    [
+        'For example, one user\u2019s edits to a document might be on ',
+        'their laptop on an airplane; when the plane lands and the ',
+        'computer reconnects, those changes are distributed to ',
+        'other users.\n',
+    ],
+    [
+        'Other users might choose to accept all, some, or none of ',
+        'those changes to their version of the document.',
+    ],
+];
+/**
+ * Where Figma sets an Inter baseline in a line box: 4/11 em below the box's
+ * centre (half of Inter's ascent minus descent).
+ */
+function interBaseline(top, lineHeight, fontSize) {
+    return Number((top + lineHeight / 2 + (fontSize * 4) / 11).toFixed(4));
+}
+/**
+ * The body lines of a heading preview that fit ENTIRELY in the frame, with the
+ * baseline each is set on.
+ *
+ * The body starts right under the heading's line box, so how many of its lines
+ * the card can show depends on the level: derived here from the geometry (line
+ * boxes, frame height, bottom padding) rather than tuned per level. At 10px on
+ * a 12px line, Inter's descenders end within a twentieth of a pixel of the line
+ * box's bottom edge, which the bottom padding covers: a line whose box fits is
+ * never clipped.
+ */
+export function headingPreviewBodyLines(level) {
+    const limit = PREVIEW_HEIGHT - PREVIEW_PADDING_BOTTOM;
+    const lines = [];
+    let top = PREVIEW_PADDING_TOP + headingLineBox(level);
+    for (const [index, paragraph] of BODY_PARAGRAPHS.entries()) {
+        if (index > 0)
+            top += BODY_PARAGRAPH_GAP;
+        for (const text of paragraph) {
+            if (top + BODY_LINE_HEIGHT > limit)
+                return lines;
+            lines.push({
+                y: interBaseline(top, BODY_LINE_HEIGHT, BODY_FONT_SIZE),
+                text,
+            });
+            top += BODY_LINE_HEIGHT;
+        }
+    }
+    return lines;
+}
+/**
+ * A heading preview drawn at the heading's real size, weight and line box
+ * (from `HEADING_SCALE`), above as many lines of body text as the card shows
+ * whole (`headingPreviewBodyLines`).
+ */
 // prettier-ignore
-const Heading1Tooltip = html `<svg width="170" height="68" viewBox="0 0 170 68" fill="none" xmlns="http://www.w3.org/2000/svg">
+function headingTooltip(level) {
+    const { fontSize, fontWeight, letterSpacing } = HEADING_SCALE[level];
+    const lineBox = headingLineBox(level);
+    const maskId = `mask_heading_tooltip_${level}`;
+    const body = headingPreviewBodyLines(level).map(line => svg `<tspan x="8" y=${line.y}>${line.text}</tspan>`);
+    return html `<svg width="170" height="68" viewBox="0 0 170 68" fill="none" xmlns="http://www.w3.org/2000/svg">
 <rect width="170" height="68" rx="2" fill="white"/>
-<mask id="mask0_16460_873" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="170" height="68">
+<mask id=${maskId} style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="170" height="68">
 <rect width="170" height="68" rx="2" fill="white"/>
 </mask>
-<g mask="url(#mask0_16460_873)">
-<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="28" font-weight="bold" letter-spacing="-0.24px"><tspan x="8" y="34.1818">Heading 1</tspan></text>
-<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="8" y="51.6364">In a decentralized system, we can have a kaleidoscopic </tspan><tspan x="8" y="63.6364">complexity to our data.&#10;</tspan><tspan x="8" y="79.6364">Any user may have a different perspective on what data they </tspan><tspan x="8" y="91.6364">either have, choose to share, or accept.&#10;</tspan><tspan x="8" y="107.636">For example, one user&#x2019;s edits to a document might be on </tspan><tspan x="8" y="119.636">their laptop on an airplane; when the plane lands and the </tspan><tspan x="8" y="131.636">computer reconnects, those changes are distributed to </tspan><tspan x="8" y="143.636">other users.&#10;</tspan><tspan x="8" y="159.636">Other users might choose to accept all, some, or none of </tspan><tspan x="8" y="171.636">those changes to their version of the document.</tspan></text>
-</g>
-</svg>
-`;
-// prettier-ignore
-const Heading2Tooltip = html `<svg width="170" height="68" viewBox="0 0 170 68" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="170" height="68" rx="2" fill="white"/>
-<mask id="mask0_16460_880" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="170" height="68">
-<rect width="170" height="68" rx="2" fill="white"/>
-</mask>
-<g mask="url(#mask0_16460_880)">
-<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="26" font-weight="600" letter-spacing="-0.24px"><tspan x="8" y="33.4545">Heading 2</tspan></text>
-<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="8" y="51.6364">In a decentralized system, we can have a kaleidoscopic </tspan><tspan x="8" y="63.6364">complexity to our data.&#10;</tspan><tspan x="8" y="79.6364">Any user may have a different perspective on what data they </tspan><tspan x="8" y="91.6364">either have, choose to share, or accept.&#10;</tspan><tspan x="8" y="107.636">For example, one user&#x2019;s edits to a document might be on </tspan><tspan x="8" y="119.636">their laptop on an airplane; when the plane lands and the </tspan><tspan x="8" y="131.636">computer reconnects, those changes are distributed to </tspan><tspan x="8" y="143.636">other users.&#10;</tspan><tspan x="8" y="159.636">Other users might choose to accept all, some, or none of </tspan><tspan x="8" y="171.636">those changes to their version of the document.</tspan></text>
-</g>
-</svg>
-`;
-// prettier-ignore
-const Heading3Tooltip = html `<svg width="170" height="68" viewBox="0 0 170 68" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="170" height="68" rx="2" fill="white"/>
-<mask id="mask0_16460_887" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="170" height="68">
-<rect width="170" height="68" rx="2" fill="white"/>
-</mask>
-<g mask="url(#mask0_16460_887)">
-<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="24" font-weight="600" letter-spacing="-0.24px"><tspan x="8" y="30.7273">Heading 3</tspan></text>
-<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="8" y="47.6364">In a decentralized system, we can have a kaleidoscopic </tspan><tspan x="8" y="59.6364">complexity to our data.&#10;</tspan><tspan x="8" y="75.6364">Any user may have a different perspective on what data they </tspan><tspan x="8" y="87.6364">either have, choose to share, or accept.&#10;</tspan><tspan x="8" y="103.636">For example, one user&#x2019;s edits to a document might be on </tspan><tspan x="8" y="115.636">their laptop on an airplane; when the plane lands and the </tspan><tspan x="8" y="127.636">computer reconnects, those changes are distributed to </tspan><tspan x="8" y="139.636">other users.&#10;</tspan><tspan x="8" y="155.636">Other users might choose to accept all, some, or none of </tspan><tspan x="8" y="167.636">those changes to their version of the document.</tspan></text>
-</g>
-</svg>
-`;
-// prettier-ignore
-const Heading4Tooltip = html `<svg width="170" height="68" viewBox="0 0 170 68" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="170" height="68" rx="2" fill="white"/>
-<mask id="mask0_16460_894" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="170" height="68">
-<rect width="170" height="68" rx="2" fill="white"/>
-</mask>
-<g mask="url(#mask0_16460_894)">
-<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="22" font-weight="600" letter-spacing="0.24px"><tspan x="8" y="29">Heading 4</tspan></text>
-<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="8" y="45.6364">In a decentralized system, we can have a kaleidoscopic </tspan><tspan x="8" y="57.6364">complexity to our data.&#10;</tspan><tspan x="8" y="73.6364">Any user may have a different perspective on what data they </tspan><tspan x="8" y="85.6364">either have, choose to share, or accept.&#10;</tspan><tspan x="8" y="101.636">For example, one user&#x2019;s edits to a document might be on </tspan><tspan x="8" y="113.636">their laptop on an airplane; when the plane lands and the </tspan><tspan x="8" y="125.636">computer reconnects, those changes are distributed to </tspan><tspan x="8" y="137.636">other users.&#10;</tspan><tspan x="8" y="153.636">Other users might choose to accept all, some, or none of </tspan><tspan x="8" y="165.636">those changes to their version of the document.</tspan></text>
-</g>
-</svg>
-`;
-// prettier-ignore
-const Heading5Tooltip = html `<svg width="170" height="68" viewBox="0 0 170 68" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="170" height="68" rx="2" fill="white"/>
-<mask id="mask0_16460_901" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="170" height="68">
-<rect width="170" height="68" rx="2" fill="white"/>
-</mask>
-<g mask="url(#mask0_16460_901)">
-<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="20" font-weight="600" letter-spacing="0.24px"><tspan x="8" y="27.2727">Heading 5</tspan></text>
-<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="8" y="43.6364">In a decentralized system, we can have a kaleidoscopic </tspan><tspan x="8" y="55.6364">complexity to our data.&#10;</tspan><tspan x="8" y="71.6364">Any user may have a different perspective on what data they </tspan><tspan x="8" y="83.6364">either have, choose to share, or accept.&#10;</tspan><tspan x="8" y="99.6364">For example, one user&#x2019;s edits to a document might be on </tspan><tspan x="8" y="111.636">their laptop on an airplane; when the plane lands and the </tspan><tspan x="8" y="123.636">computer reconnects, those changes are distributed to </tspan><tspan x="8" y="135.636">other users.&#10;</tspan><tspan x="8" y="151.636">Other users might choose to accept all, some, or none of </tspan><tspan x="8" y="163.636">those changes to their version of the document.</tspan></text>
-</g>
-</svg>
-`;
-// prettier-ignore
-const Heading6Tooltip = html `<svg width="170" height="68" viewBox="0 0 170 68" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="170" height="68" rx="2" fill="white"/>
-<mask id="mask0_16460_908" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="170" height="68">
-<rect width="170" height="68" rx="2" fill="white"/>
-</mask>
-<g mask="url(#mask0_16460_908)">
-<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="18" font-weight="600" letter-spacing="0.24px"><tspan x="8" y="25.5455">Heading 6</tspan></text>
-<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="8" y="41.6364">In a decentralized system, we can have a kaleidoscopic </tspan><tspan x="8" y="53.6364">complexity to our data.&#10;</tspan><tspan x="8" y="69.6364">Any user may have a different perspective on what data they </tspan><tspan x="8" y="81.6364">either have, choose to share, or accept.&#10;</tspan><tspan x="8" y="97.6364">For example, one user&#x2019;s edits to a document might be on </tspan><tspan x="8" y="109.636">their laptop on an airplane; when the plane lands and the </tspan><tspan x="8" y="121.636">computer reconnects, those changes are distributed to </tspan><tspan x="8" y="133.636">other users.&#10;</tspan><tspan x="8" y="149.636">Other users might choose to accept all, some, or none of </tspan><tspan x="8" y="161.636">those changes to their version of the document.</tspan></text>
+<g mask="url(#${maskId})">
+<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size=${fontSize} font-weight=${fontWeight} letter-spacing="${letterSpacing}em"><tspan x="8" y=${interBaseline(PREVIEW_PADDING_TOP, lineBox, fontSize)}>Heading ${level.slice(1)}</tspan></text>
+<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size=${BODY_FONT_SIZE} letter-spacing="0px">${body}</text>
 </g>
 </svg>
 `;
+}
+const Heading1Tooltip = headingTooltip('h1');
+const Heading2Tooltip = headingTooltip('h2');
+const Heading3Tooltip = headingTooltip('h3');
+const Heading4Tooltip = headingTooltip('h4');
+const Heading5Tooltip = headingTooltip('h5');
+const Heading6Tooltip = headingTooltip('h6');
 // prettier-ignore
 const CodeBlockTooltip = html `<svg width="170" height="68" viewBox="0 0 170 68" fill="none" xmlns="http://www.w3.org/2000/svg">
 <rect width="170" height="68" rx="2" fill="white"/>

package/dist/_pkgs/affine-block-paragraph/paragraph-block.d.ts

@@ -7,9 +7,17 @@ export declare class ParagraphBlockComponent extends CaptionedBlockComponent<Par
     focused$: import("@preact/signals-core").ReadonlySignal<boolean>;
     private readonly _composing;
     private readonly _displayPlaceholder;
+    /**
+     * The collapse state a READER holds locally. A readonly document must never
+     * be written, so the chevron cannot touch `model.props.collapsed`; this
+     * signal carries the reader's own expansion instead. It is a signal rather
+     * than a Lit `@state()` so BlockSuite effects can depend on it as well.
+     */
+    private readonly _readonlyCollapsed;
     private _inlineRangeProvider;
     private readonly _isInDatabase;
     private get _placeholder();
+    private _setReadonlyCollapsed;
     get citationService(): import("../affine-shared/services/index.js").CitationViewService;
     get attributeRenderer(): import("../std/inline/types.js").AttributeRenderer<import("../affine-shared/types/index.js").AffineTextAttributes>;
     get attributesSchema(): import("zod").ZodType<any, import("zod").ZodTypeDef, any>;
@@ -24,7 +32,6 @@ export declare class ParagraphBlockComponent extends CaptionedBlockComponent<Par
     connectedCallback(): void;
     getUpdateComplete(): Promise<boolean>;
     renderBlock(): TemplateResult<1>;
-    private accessor _readonlyCollapsed;
     private accessor _richTextElement;
     accessor blockContainerStyles: {
         margin: string;

package/dist/_pkgs/affine-block-paragraph/paragraph-block.js

@@ -42,7 +42,7 @@ import { TextSelection } from '../std/index.js';
 import { getInlineRangeProvider, } from '../std/inline/index.js';
 import { computed, effect, signal } from '@preact/signals-core';
 import { html, nothing } from 'lit';
-import { query, state } from 'lit/decorators.js';
+import { query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
@@ -50,9 +50,6 @@ import { ParagraphBlockConfigExtension } from './paragraph-block-config.js';
 import { paragraphBlockStyles } from './styles.js';
 let ParagraphBlockComponent = (() => {
     let _classSuper = CaptionedBlockComponent;
-    let __readonlyCollapsed_decorators;
-    let __readonlyCollapsed_initializers = [];
-    let __readonlyCollapsed_extraInitializers = [];
     let __richTextElement_decorators;
     let __richTextElement_initializers = [];
     let __richTextElement_extraInitializers = [];
@@ -67,6 +64,13 @@ let ParagraphBlockComponent = (() => {
             });
             this._composing = signal(false);
             this._displayPlaceholder = signal(false);
+            /**
+             * The collapse state a READER holds locally. A readonly document must never
+             * be written, so the chevron cannot touch `model.props.collapsed`; this
+             * signal carries the reader's own expansion instead. It is a signal rather
+             * than a Lit `@state()` so BlockSuite effects can depend on it as well.
+             */
+            this._readonlyCollapsed = signal(false);
             this._inlineRangeProvider = null;
             this._isInDatabase = () => {
                 let parent = this.parentElement;
@@ -78,17 +82,14 @@ let ParagraphBlockComponent = (() => {
                 }
                 return false;
             };
-            this.#_readonlyCollapsed_accessor_storage = __runInitializers(this, __readonlyCollapsed_initializers, false);
-            this.#_richTextElement_accessor_storage = (__runInitializers(this, __readonlyCollapsed_extraInitializers), __runInitializers(this, __richTextElement_initializers, null));
+            this.#_richTextElement_accessor_storage = __runInitializers(this, __richTextElement_initializers, null);
             this.#blockContainerStyles_accessor_storage = (__runInitializers(this, __richTextElement_extraInitializers), {
                 margin: 'var(--affine-paragraph-margin, 10px 0)',
             });
         }
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-            __readonlyCollapsed_decorators = [state()];
             __richTextElement_decorators = [query('rich-text')];
-            __esDecorate(this, null, __readonlyCollapsed_decorators, { kind: "accessor", name: "_readonlyCollapsed", static: false, private: false, access: { has: obj => "_readonlyCollapsed" in obj, get: obj => obj._readonlyCollapsed, set: (obj, value) => { obj._readonlyCollapsed = value; } }, metadata: _metadata }, __readonlyCollapsed_initializers, __readonlyCollapsed_extraInitializers);
             __esDecorate(this, null, __richTextElement_decorators, { kind: "accessor", name: "_richTextElement", static: false, private: false, access: { has: obj => "_richTextElement" in obj, get: obj => obj._richTextElement, set: (obj, value) => { obj._richTextElement = value; } }, metadata: _metadata }, __richTextElement_initializers, __richTextElement_extraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
@@ -98,6 +99,10 @@ let ParagraphBlockComponent = (() => {
                 .get(ParagraphBlockConfigExtension.identifier)
                 ?.getPlaceholder(this.model);
         }
+        _setReadonlyCollapsed(collapsed) {
+            this._readonlyCollapsed.value = collapsed;
+            this.requestUpdate();
+        }
         get citationService() {
             return this.std.get(CitationProvider);
         }
@@ -176,9 +181,19 @@ let ParagraphBlockComponent = (() => {
                     this.model.props.collapsed = false;
                 }
             }));
+            // Entering readonly mode (and any later change of the persisted value)
+            // seeds the reader's local state. Deliberately NOT re-run on every
+            // selection change: this effect must not depend on the selection, or the
+            // reader's own expansion would be overwritten mid-drag.
+            this.disposables.add(effect(() => {
+                if (this.store.readonly$.value) {
+                    this._setReadonlyCollapsed(this.model.props.collapsed$.value);
+                }
+            }));
             this.disposables.add(effect(() => {
-                const collapsed = this.model.props.collapsed$.value;
-                this._readonlyCollapsed = collapsed;
+                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;
@@ -216,7 +231,7 @@ let ParagraphBlockComponent = (() => {
         renderBlock() {
             const { type$ } = this.model.props;
             const collapsed = this.store.readonly
-                ? this._readonlyCollapsed
+                ? this._readonlyCollapsed.value
                 : this.model.props.collapsed;
             const collapsedSiblings = this.collapsedSiblings;
             let style = html ``;
@@ -231,7 +246,9 @@ let ParagraphBlockComponent = (() => {
         </style>
       `;
             }
+            const childrenId = `heading-children-${this.model.id}`;
             const children = html `<div
+      id=${childrenId}
       class="affine-block-children-container"
       style=${styleMap({
                 paddingLeft: `${BLOCK_CHILDREN_CONTAINER_PADDING_LEFT}px`,
@@ -275,9 +292,10 @@ let ParagraphBlockComponent = (() => {
                 ? html `
                 <blocksuite-toggle-button
                   .collapsed=${collapsed}
+                  .controls=${childrenId}
                   .updateCollapsed=${(value) => {
                     if (this.store.readonly) {
-                        this._readonlyCollapsed = value;
+                        this._setReadonlyCollapsed(value);
                     }
                     else {
                         this.store.captureSync();
@@ -328,9 +346,6 @@ let ParagraphBlockComponent = (() => {
       </div>
     `;
         }
-        #_readonlyCollapsed_accessor_storage;
-        get _readonlyCollapsed() { return this.#_readonlyCollapsed_accessor_storage; }
-        set _readonlyCollapsed(value) { this.#_readonlyCollapsed_accessor_storage = value; }
         #_richTextElement_accessor_storage;
         get _richTextElement() { return this.#_richTextElement_accessor_storage; }
         set _richTextElement(value) { this.#_richTextElement_accessor_storage = value; }