@formicoidea/labre-core 0.31.0 → 0.32.0

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

@@ -5,6 +5,12 @@ export declare class CalloutBlockComponent extends CaptionedBlockComponent<Callo
     static styles: import("lit").CSSResult;
     private _emojiMenuAbortController;
     private readonly _toggleEmojiMenu;
+    /**
+     * A callout with no children has no text to click into, so the click lands on
+     * the container and nothing happens — the block looks inert. Give it a
+     * paragraph and put the caret in it.
+     */
+    private readonly _handleBlockClick;
     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>;
     get embedChecker(): (delta: import("../store/index.js").DeltaInsert<import("../affine-shared/types/index.js").AffineTextAttributes>) => boolean;

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

@@ -36,6 +36,7 @@ import { CaptionedBlockComponent } from '../affine-components/caption/index.js';
 import { createLitPortal } from '../affine-components/portal/index.js';
 import { DefaultInlineManagerExtension } from '../affine-inline-preset/index.js';
 import {} from '../affine-model/index.js';
+import { focusTextModel } from '../affine-rich-text/index.js';
 import { EDGELESS_TOP_CONTENTEDITABLE_SELECTOR } from '../affine-shared/consts/index.js';
 import { DocModeProvider, ThemeProvider, } from '../affine-shared/services/index.js';
 import { unsafeCSSVarV2 } from '../affine-shared/theme/index.js';
@@ -43,6 +44,7 @@ import { flip, offset } from '@floating-ui/dom';
 import { css, html } from 'lit';
 import { query } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
+import { getCalloutEmojiMarginTop } from './emoji-margin.js';
 let CalloutBlockComponent = (() => {
     let _classSuper = CaptionedBlockComponent;
     let __emojiButton_decorators;
@@ -63,14 +65,13 @@ let CalloutBlockComponent = (() => {
 
     .affine-callout-block-container {
       display: flex;
+      align-items: flex-start;
       padding: 5px 10px;
       border-radius: 8px;
       background-color: ${unsafeCSSVarV2('block/callout/background/grey')};
     }
 
     .affine-callout-emoji-container {
-      margin-right: 10px;
-      margin-top: 14px;
       user-select: none;
       font-size: 1.2em;
       width: 24px;
@@ -78,6 +79,9 @@ let CalloutBlockComponent = (() => {
       display: flex;
       align-items: center;
       justify-content: center;
+      /* margin-top is set per render: it depends on the first child's type. */
+      margin-bottom: 10px;
+      flex-shrink: 0;
     }
     .affine-callout-emoji:hover {
       cursor: pointer;
@@ -114,13 +118,17 @@ let CalloutBlockComponent = (() => {
         renderBlock() {
             const emoji = this.model.props.emoji$.value;
             return html `
-      <div class="affine-callout-block-container">
+      <div
+        class="affine-callout-block-container"
+        @click=${this._handleBlockClick}
+      >
         <div
           @click=${this._toggleEmojiMenu}
           contenteditable="false"
           class="affine-callout-emoji-container"
           style=${styleMap({
                 display: emoji.length === 0 ? 'none' : undefined,
+                marginTop: getCalloutEmojiMarginTop(this.model),
             })}
         >
           <span class="affine-callout-emoji">${emoji}</span>
@@ -161,6 +169,20 @@ let CalloutBlockComponent = (() => {
                     closeOnClickAway: true,
                 });
             };
+            /**
+             * A callout with no children has no text to click into, so the click lands on
+             * the container and nothing happens — the block looks inert. Give it a
+             * paragraph and put the caret in it.
+             */
+            this._handleBlockClick = (event) => {
+                const target = event.target;
+                if (target.closest('.affine-callout-emoji-container'))
+                    return;
+                if (this.model.children.length > 0)
+                    return;
+                event.stopPropagation();
+                focusTextModel(this.std, this.store.addBlock('affine:paragraph', {}, this.model));
+            };
             this.#_emojiButton_accessor_storage = __runInitializers(this, __emojiButton_initializers, void 0);
             __runInitializers(this, __emojiButton_extraInitializers);
         }

package/dist/_pkgs/affine-block-callout/callout-keymap.js

@@ -1,29 +1,69 @@
-import { CalloutBlockModel } from '../affine-model/index.js';
+import { CalloutBlockModel, ParagraphBlockModel } from '../affine-model/index.js';
 import { matchModels } from '../affine-shared/utils/index.js';
-import { BlockSelection, KeymapExtension, TextSelection, } from '../std/index.js';
+import { BlockSelection, KeymapExtension, TextSelection } from '../std/index.js';
+import { calloutToParagraphCommand } from './commands/callout-to-paragraph.js';
+import { splitCalloutCommand } from './commands/split-callout.js';
 export const CalloutKeymapExtension = KeymapExtension(std => {
     return {
-        Backspace: ctx => {
+        Enter: ctx => {
             const text = std.selection.find(TextSelection);
-            if (text && text.isCollapsed() && text.from.index === 0) {
-                const event = ctx.get('defaultState').event;
-                event.preventDefault();
-                const block = std.store.getBlock(text.from.blockId);
-                if (!block)
-                    return false;
-                const parent = std.store.getParent(block.model);
-                if (!parent)
+            if (!text)
+                return false;
+            const currentBlock = std.store.getBlock(text.from.blockId);
+            if (!currentBlock)
+                return false;
+            // The caret is either on the callout itself (an empty one) or on one of
+            // its children.
+            let calloutId = currentBlock.model.id;
+            if (!matchModels(currentBlock.model, [CalloutBlockModel])) {
+                const parent = std.store.getParent(currentBlock.model);
+                if (!parent || !matchModels(parent, [CalloutBlockModel]))
                     return false;
-                if (!matchModels(parent, [CalloutBlockModel]))
-                    return false;
-                std.selection.setGroup('note', [
-                    std.selection.create(BlockSelection, {
-                        blockId: parent.id,
-                    }),
-                ]);
+                calloutId = parent.id;
+            }
+            ctx.get('keyboardState').raw.preventDefault();
+            std.command
+                .chain()
+                .pipe(splitCalloutCommand, {
+                calloutId,
+                currentBlockId: text.from.blockId,
+                inlineIndex: text.from.index,
+            })
+                .run();
+            return true;
+        },
+        Backspace: ctx => {
+            const text = std.selection.find(TextSelection);
+            if (!text || !text.isCollapsed() || text.from.index !== 0)
+                return false;
+            const block = std.store.getBlock(text.from.blockId);
+            if (!block)
+                return false;
+            const parent = std.store.getParent(block.model);
+            if (!parent)
+                return false;
+            if (!matchModels(parent, [CalloutBlockModel]))
+                return false;
+            // Nothing above was a callout, so nothing above was ours to swallow: the
+            // event is only default-prevented once the callout is what we are in.
+            const event = ctx.get('defaultState').event;
+            event.preventDefault();
+            // A paragraph merges into the previous paragraph of the same callout,
+            // the way it would anywhere else in the document.
+            if (matchModels(block.model, [ParagraphBlockModel])) {
+                std.command
+                    .chain()
+                    .pipe(calloutToParagraphCommand, { id: block.model.id })
+                    .run();
                 return true;
             }
-            return false;
+            // Anything else hands the user the callout itself.
+            std.selection.setGroup('note', [
+                std.selection.create(BlockSelection, {
+                    blockId: parent.id,
+                }),
+            ]);
+            return true;
         },
     };
 });

package/dist/_pkgs/affine-block-callout/commands/callout-to-paragraph.d.ts

@@ -0,0 +1,20 @@
+import type { Command } from '../../std/index.js';
+/**
+ * Backspace at the very start of a paragraph inside a callout.
+ *
+ * Outside a callout that keystroke merges the paragraph into the one above.
+ * Inside one it used to do nothing but select the whole callout, so a line
+ * broken by mistake could not be joined back — the text had to be cut and
+ * pasted by hand.
+ *
+ * The paragraph now merges into the previous paragraph of the SAME callout,
+ * keeping its formatting, and the caret lands at the seam. With no previous
+ * paragraph to merge into, the callout itself is selected — the old behaviour,
+ * and the way one deletes a callout without losing what it holds.
+ */
+export declare const calloutToParagraphCommand: Command<{
+    id: string;
+    stopCapturing?: boolean;
+}, {
+    success: boolean;
+}>;

package/dist/_pkgs/affine-block-callout/commands/callout-to-paragraph.js

@@ -0,0 +1,60 @@
+import { CalloutBlockModel, ParagraphBlockModel } from '../../affine-model/index.js';
+import { focusTextModel } from '../../affine-rich-text/index.js';
+import { matchModels } from '../../affine-shared/utils/index.js';
+import { BlockSelection } from '../../std/index.js';
+/**
+ * Backspace at the very start of a paragraph inside a callout.
+ *
+ * Outside a callout that keystroke merges the paragraph into the one above.
+ * Inside one it used to do nothing but select the whole callout, so a line
+ * broken by mistake could not be joined back — the text had to be cut and
+ * pasted by hand.
+ *
+ * The paragraph now merges into the previous paragraph of the SAME callout,
+ * keeping its formatting, and the caret lands at the seam. With no previous
+ * paragraph to merge into, the callout itself is selected — the old behaviour,
+ * and the way one deletes a callout without losing what it holds.
+ */
+export const calloutToParagraphCommand = (ctx, next) => {
+    const { id, stopCapturing = true } = ctx;
+    const std = ctx.std;
+    const doc = std.store;
+    const model = doc.getBlock(id)?.model;
+    if (!model || !matchModels(model, [ParagraphBlockModel]))
+        return;
+    const parent = doc.getParent(model);
+    if (!parent || !matchModels(parent, [CalloutBlockModel]))
+        return;
+    // The previous paragraph of this callout, skipping siblings that hold no
+    // text of their own.
+    const currentIndex = parent.children.indexOf(model);
+    let previous = null;
+    for (let i = currentIndex - 1; i >= 0; i--) {
+        const sibling = parent.children[i];
+        if (matchModels(sibling, [ParagraphBlockModel])) {
+            previous = sibling;
+            break;
+        }
+    }
+    if (!previous) {
+        // Nothing to merge into. Select the callout rather than delete anything:
+        // a second Backspace then removes it, text included, in one undo step.
+        std.selection.setGroup('note', [
+            std.selection.create(BlockSelection, {
+                blockId: parent.id,
+            }),
+        ]);
+        next({ success: true });
+        return;
+    }
+    if (stopCapturing)
+        doc.captureSync();
+    const previousText = previous.props.text;
+    // Read the seam BEFORE joining: that is where the caret must land.
+    const mergeIndex = previousText.length;
+    // `join` replays the deltas, so bold, links and the rest survive the merge.
+    previousText.join(model.props.text);
+    doc.deleteBlock(model, { deleteChildren: false });
+    focusTextModel(std, previous.id, mergeIndex);
+    next({ success: true });
+};

package/dist/_pkgs/affine-block-callout/commands/split-callout.d.ts

@@ -0,0 +1,17 @@
+import type { Command } from '../../std/index.js';
+/**
+ * Enter inside a callout: break the line WITHOUT leaving the callout.
+ *
+ * The paragraph keymap deliberately steps aside for a paragraph whose parent is
+ * a callout, so this command is the only thing standing between the user and a
+ * dead Enter key. The new paragraph is a sibling INSIDE the callout, never
+ * after it — leaving a callout is what the down arrow is for.
+ */
+export declare const splitCalloutCommand: Command<{
+    /** The callout the caret is in — the fallback target for an empty one. */
+    calloutId: string;
+    /** The block the caret is in; a paragraph in every ordinary case. */
+    currentBlockId: string;
+    /** Where the caret sits inside that block's text. */
+    inlineIndex: number;
+}>;

package/dist/_pkgs/affine-block-callout/commands/split-callout.js

@@ -0,0 +1,42 @@
+import { CalloutBlockModel, ParagraphBlockModel } from '../../affine-model/index.js';
+import { focusTextModel } from '../../affine-rich-text/index.js';
+import { matchModels } from '../../affine-shared/utils/index.js';
+/**
+ * Enter inside a callout: break the line WITHOUT leaving the callout.
+ *
+ * The paragraph keymap deliberately steps aside for a paragraph whose parent is
+ * a callout, so this command is the only thing standing between the user and a
+ * dead Enter key. The new paragraph is a sibling INSIDE the callout, never
+ * after it — leaving a callout is what the down arrow is for.
+ */
+export const splitCalloutCommand = (ctx, next) => {
+    const { calloutId, currentBlockId, inlineIndex, std } = ctx;
+    const store = std.store;
+    const callout = store.getBlock(calloutId)?.model;
+    if (!callout || !matchModels(callout, [CalloutBlockModel]))
+        return;
+    const current = store.getBlock(currentBlockId)?.model;
+    store.captureSync();
+    if (!current || !matchModels(current, [ParagraphBlockModel])) {
+        // No paragraph under the caret — an empty callout. Give it one.
+        focusTextModel(std, store.addBlock('affine:paragraph', {}, callout));
+        next();
+        return;
+    }
+    const parent = store.getParent(current);
+    if (!parent)
+        return;
+    const index = parent.children.indexOf(current);
+    if (index < 0)
+        return;
+    // `split` truncates the current text and hands back the tail.
+    const right = current.props.text.split(inlineIndex);
+    const newId = store.addBlock('affine:paragraph', {
+        text: right,
+        // Breaking a heading in two keeps two headings; pressing Enter at its end
+        // starts an ordinary line, as it does everywhere else in the editor.
+        type: right.length === 0 ? 'text' : current.props.type,
+    }, parent, index + 1);
+    focusTextModel(std, newId);
+    next();
+};

package/dist/_pkgs/affine-block-callout/configs/slash-menu.js

@@ -1,14 +1,14 @@
-import { CalloutBlockModel } from '../../affine-model/index.js';
 import { focusBlockEnd } from '../../affine-shared/commands/index.js';
 import { FeatureFlagService } from '../../affine-shared/services/index.js';
-import { findAncestorModel, isInsideBlockByFlavour, matchModels, } from '../../affine-shared/utils/index.js';
+import { isInsideBlockByFlavour } from '../../affine-shared/utils/index.js';
 import {} from '../../affine-widget-slash-menu/index.js';
 import { FontIcon } from '@blocksuite/icons/lit';
 import { calloutTooltip } from './tooltips.js';
+// No `disableWhen` here on purpose. The widget ORs every config's `disableWhen`
+// together and then refuses to open at all, so the callout's own guard used to
+// silence the WHOLE slash menu inside a callout — every block, every framework,
+// not just this one entry.
 export const calloutSlashMenuConfig = {
-    disableWhen: ({ model }) => {
-        return (findAncestorModel(model, ancestor => matchModels(ancestor, [CalloutBlockModel])) !== null);
-    },
     items: [
         {
             name: 'Callout',
@@ -22,7 +22,10 @@ export const calloutSlashMenuConfig = {
             group: '0_Basic@9',
             when: ({ std, model }) => {
                 return (std.get(FeatureFlagService).getFlag('enable_callout') &&
-                    !isInsideBlockByFlavour(model.store, model, 'affine:edgeless-text'));
+                    !isInsideBlockByFlavour(model.store, model, 'affine:edgeless-text') &&
+                    // The schema forbids a callout inside a callout, so offering the item
+                    // there would only produce a thrown insertion.
+                    !isInsideBlockByFlavour(model.store, model, 'affine:callout'));
             },
             action: ({ model, std }) => {
                 const { store } = model;

package/dist/_pkgs/affine-block-callout/emoji-margin.d.ts

@@ -0,0 +1,9 @@
+import { type CalloutBlockModel } from '../affine-model/index.js';
+/**
+ * The emoji's `margin-top` for a callout, read from its FIRST child — the only
+ * line the emoji is ever level with.
+ *
+ * Reading `type$` rather than `type` keeps the caller reactive: turning the
+ * first line into a heading re-renders the callout and moves the emoji with it.
+ */
+export declare function getCalloutEmojiMarginTop(model: CalloutBlockModel): string;

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

@@ -0,0 +1,36 @@
+import { ParagraphBlockModel, } from '../affine-model/index.js';
+import { matchModels } from '../affine-shared/utils/index.js';
+/**
+ * How far the emoji has to drop to sit on the first line's baseline.
+ *
+ * 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.
+ */
+const EMOJI_MARGIN_TOP_BY_TYPE = {
+    h1: '23px',
+    h2: '20px',
+    h3: '16px',
+    h4: '15px',
+    h5: '14px',
+    h6: '13px',
+};
+/** What a paragraph, a list, or an empty callout gets. */
+const DEFAULT_EMOJI_MARGIN_TOP = '10px';
+/**
+ * The emoji's `margin-top` for a callout, read from its FIRST child — the only
+ * line the emoji is ever level with.
+ *
+ * Reading `type$` rather than `type` keeps the caller reactive: turning the
+ * first line into a heading re-renders the callout and moves the emoji with it.
+ */
+export function getCalloutEmojiMarginTop(model) {
+    const first = model.children[0];
+    if (!first || !matchModels(first, [ParagraphBlockModel])) {
+        return DEFAULT_EMOJI_MARGIN_TOP;
+    }
+    return (EMOJI_MARGIN_TOP_BY_TYPE[first.props.type$.value] ??
+        DEFAULT_EMOJI_MARGIN_TOP);
+}

package/dist/_pkgs/affine-block-callout/emoji-menu.d.ts

@@ -1,8 +1,12 @@
 import { LitElement, type PropertyValues } from 'lit';
+/** The part of emoji-mart's selection payload a callout reads. */
+export type EmojiSelection = {
+    native: string;
+};
 declare const EmojiMenu_base: typeof LitElement & import("../global/utils/types.js").Constructor<import("../global/lit/with-disposable.js").DisposableClass>;
 export declare class EmojiMenu extends EmojiMenu_base {
     firstUpdated(props: PropertyValues): void;
-    accessor onEmojiSelect: (data: any) => void;
+    accessor onEmojiSelect: (emoji: EmojiSelection) => void;
     accessor theme: 'light' | 'dark';
     accessor emojiMenu: HTMLElement;
     render(): import("lit-html").TemplateResult<1>;

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

@@ -68,6 +68,11 @@ let EmojiMenu = (() => {
                 theme: this.theme,
             });
             this.emojiMenu.append(picker);
+            // The picker is built imperatively, outside Lit's template, so nothing in
+            // this component takes it down when the menu goes away. It holds a
+            // document click listener and a `prefers-color-scheme` listener until it
+            // is unmounted, so unmount it with the menu.
+            this.disposables.add(() => picker.remove());
             return result;
         }
         #onEmojiSelect_accessor_storage = __runInitializers(this, _onEmojiSelect_initializers, () => { });

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

@@ -10,6 +10,7 @@ export declare class CodeBlockComponent extends CaptionedBlockComponent<CodeBloc
     private _inlineRangeProvider;
     private readonly _localPreview$;
     preview$: Signal<boolean>;
+    collapsed$: Signal<boolean>;
     highlightTokens$: Signal<ThemedToken[][]>;
     languageName$: Signal<string>;
     get inlineEditor(): import("../std/inline/inline-editor.js").InlineEditor<{
@@ -25,14 +26,27 @@ export declare class CodeBlockComponent extends CaptionedBlockComponent<CodeBloc
     get readonly(): boolean;
     get langs(): import("shiki").BundledLanguageInfo[];
     get highlighter(): CodeBlockHighlighter;
+    /**
+     * Whether line numbers are currently shown for this block, accounting for the
+     * global setting and feature flags.
+     */
+    get showLineNumbers(): boolean;
     get topContenteditableElement(): BlockComponent<import("../store/index.js").BlockModel<object>, import("../std/index.js").BlockService, string> | null;
     private _updateHighlightTokens;
+    /**
+     * Stable signal: true when the global editor setting enables line numbers.
+     * Defaults to true. Updated reactively by an effect in connectedCallback.
+     * Using a writable signal (not reassigned to computed) keeps the reference
+     * stable so any downstream computed/effect that captures it stays correct.
+     */
+    private readonly _showLineNumbersGlobal$;
     connectedCallback(): void;
     copyCode(): void;
     get isCommentHighlighted(): boolean;
     getUpdateComplete(): Promise<boolean>;
     renderBlock(): TemplateResult<1>;
     setWrap(wrap: boolean): void;
+    setCollapsed(collapsed: boolean): void;
     private accessor _richTextElement;
     accessor blockContainerStyles: {
         margin: string;

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

@@ -35,7 +35,7 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
 import { CaptionedBlockComponent } from '../affine-components/caption/index.js';
 import { focusTextModel } from '../affine-rich-text/index.js';
 import { BRACKET_PAIRS, EDGELESS_TOP_CONTENTEDITABLE_SELECTOR, } from '../affine-shared/consts/index.js';
-import { BlockCommentManager, DocModeProvider, NotificationProvider, } from '../affine-shared/services/index.js';
+import { BlockCommentManager, DocModeProvider, EditorSettingProvider, NotificationProvider, } from '../affine-shared/services/index.js';
 import { getViewportElement } from '../affine-shared/utils/index.js';
 import { IS_MAC, IS_MOBILE } from '../global/env/index.js';
 import { noop } from '../global/utils/index.js';
@@ -52,6 +52,7 @@ import { CodeBlockConfigExtension } from './code-block-config.js';
 import { CodeBlockInlineManagerExtension } from './code-block-inline.js';
 import { CodeBlockHighlighter } from './code-block-service.js';
 import { CodeBlockPreviewIdentifier } from './code-preview-extension.js';
+import { readGlobalLineNumbers, resolveShowLineNumbers, } from './line-numbers.js';
 import { codeBlockStyles } from './styles.js';
 let CodeBlockComponent = (() => {
     let _classSuper = CaptionedBlockComponent;
@@ -70,6 +71,7 @@ let CodeBlockComponent = (() => {
                 }
                 return modelPreview;
             });
+            this.collapsed$ = computed(() => !!this.model.props.collapsed$.value);
             this.highlightTokens$ = signal([]);
             this.languageName$ = computed(() => {
                 const lang = this.model.props.language$.value;
@@ -79,6 +81,13 @@ let CodeBlockComponent = (() => {
                 const matchedInfo = this.langs.find(info => info.id === lang);
                 return matchedInfo ? matchedInfo.name : 'Plain Text';
             });
+            /**
+             * Stable signal: true when the global editor setting enables line numbers.
+             * Defaults to true. Updated reactively by an effect in connectedCallback.
+             * Using a writable signal (not reassigned to computed) keeps the reference
+             * stable so any downstream computed/effect that captures it stays correct.
+             */
+            this._showLineNumbersGlobal$ = signal(true);
             this.#_richTextElement_accessor_storage = __runInitializers(this, __richTextElement_initializers, null);
             this.#blockContainerStyles_accessor_storage = (__runInitializers(this, __richTextElement_extraInitializers), {
                 margin: '18px 0',
@@ -113,6 +122,20 @@ let CodeBlockComponent = (() => {
         get highlighter() {
             return this.std.get(CodeBlockHighlighter);
         }
+        /**
+         * Whether line numbers are currently shown for this block, accounting for the
+         * global setting and feature flags.
+         */
+        get showLineNumbers() {
+            return resolveShowLineNumbers({
+                // Feature flag: mobile (or any other consumer) can hard-disable via
+                // CodeBlockConfigExtension.
+                featureEnabled: this.std.getOptional(CodeBlockConfigExtension.identifier)
+                    ?.showLineNumbers ?? true,
+                blockOverride: this.model.props.lineNumber,
+                globalDefault: this._showLineNumbersGlobal$.value,
+            });
+        }
         get topContenteditableElement() {
             if (this.std.get(DocModeProvider).getEditorMode() === 'edgeless') {
                 return this.closest(EDGELESS_TOP_CONTENTEDITABLE_SELECTOR);
@@ -167,6 +190,16 @@ let CodeBlockComponent = (() => {
         }
         connectedCallback() {
             super.connectedCallback();
+            // Reactively sync the global line-number preference from EditorSettingProvider
+            // into the stable _showLineNumbersGlobal$ signal. The host owns the storage:
+            // the library only reads whatever the injected setting service exposes, the
+            // same seam as the telemetry adapter.
+            const editorSetting = this.std.getOptional(EditorSettingProvider);
+            if (editorSetting) {
+                this.disposables.add(effect(() => {
+                    this._showLineNumbersGlobal$.value = readGlobalLineNumbers(editorSetting.setting$.value);
+                }));
+            }
             // set highlight options getter used by "exportToHtml"
             this.disposables.add(effect(() => {
                 this._updateHighlightTokens();
@@ -371,13 +404,11 @@ let CodeBlockComponent = (() => {
             return result;
         }
         renderBlock() {
-            const showLineNumbers = (this.std.getOptional(CodeBlockConfigExtension.identifier)
-                ?.showLineNumbers ??
-                true) &&
-                (this.model.props.lineNumber ?? true);
+            const showLineNumbers = this.showLineNumbers;
             const preview = this.preview$.value;
             const previewContext = this.std.getOptional(CodeBlockPreviewIdentifier(this.model.props.language ?? ''));
             const shouldRenderPreview = preview && previewContext;
+            const collapsed = this.collapsed$.value;
             return html `
       <div
         class=${classMap({
@@ -386,6 +417,7 @@ let CodeBlockComponent = (() => {
                 mobile: IS_MOBILE,
                 wrap: this.model.props.wrap,
                 'disable-line-numbers': !showLineNumbers,
+                collapsed,
             })}
       >
         <rich-text
@@ -413,9 +445,12 @@ let CodeBlockComponent = (() => {
             }}
         >
         </rich-text>
+        ${collapsed
+                ? html `<div class="code-collapsed-fade" aria-hidden="true"></div>`
+                : nothing}
         <div
           style=${styleMap({
-                display: shouldRenderPreview ? undefined : 'none',
+                display: shouldRenderPreview && !collapsed ? undefined : 'none',
             })}
           contenteditable="false"
           class="affine-code-block-preview"
@@ -429,6 +464,9 @@ let CodeBlockComponent = (() => {
         setWrap(wrap) {
             this.store.updateBlock(this.model, { wrap });
         }
+        setCollapsed(collapsed) {
+            this.store.updateBlock(this.model, { collapsed });
+        }
         #_richTextElement_accessor_storage;
         get _richTextElement() { return this.#_richTextElement_accessor_storage; }
         set _richTextElement(value) { this.#_richTextElement_accessor_storage = value; }

package/dist/_pkgs/affine-block-code/code-toolbar/components/code-toolbar.d.ts

@@ -9,9 +9,11 @@ export declare class AffineCodeToolbar extends AffineCodeToolbar_base {
     closeCurrentMenu: () => void;
     private _toggleMoreMenu;
     disconnectedCallback(): void;
+    connectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;
     private accessor _moreButton;
     private accessor _moreMenuOpen;
+    private accessor _collapsed;
     accessor context: CodeBlockToolbarContext;
     accessor moreGroups: MenuItemGroup<CodeBlockToolbarContext>[];
     accessor onActiveStatusChange: (active: boolean) => void;