@formicoidea/labre-core 0.31.0 → 0.32.0

package/dist/_pkgs/affine-gfx-shape/text/edgeless-shape-text-editor.js

@@ -35,13 +35,13 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
 import { DefaultTool, EdgelessCRUDIdentifier, TextUtils, } from '../../affine-block-surface/index.js';
 import { MindmapElementModel, ShapeElementModel, TextFitMode, TextResizing, } from '../../affine-model/index.js';
 import { ThemeProvider } from '../../affine-shared/services/index.js';
-import { getSelectedRect } from '../../affine-shared/utils/index.js';
+import { getSelectedRect, overlayScale, toOverlayCoord, } from '../../affine-shared/utils/index.js';
 import { BlockSuiteError, ErrorCode } from '../../global/exceptions/index.js';
 import { Bound, toRadian, Vec } from '../../global/gfx/index.js';
 import { WithDisposable } from '../../global/lit/index.js';
 import { ShadowlessElement, stdContext, } from '../../std/index.js';
 import { GfxControllerIdentifier } from '../../std/gfx/index.js';
-import { RANGE_SYNC_EXCLUDE_ATTR } from '../../std/inline/index.js';
+import { InlineEditor, RANGE_SYNC_EXCLUDE_ATTR } from '../../std/inline/index.js';
 import { consume } from '@lit/context';
 import { html, nothing } from 'lit';
 import { property, query } from 'lit/decorators.js';
@@ -160,6 +160,7 @@ let EdgelessShapeTextEditor = (() => {
             });
         }
         _unmount() {
+            this._cancelScheduledElementWHUpdate();
             this._resizeObserver?.disconnect();
             this._resizeObserver = null;
             if (this.element.text) {
@@ -180,6 +181,90 @@ let EdgelessShapeTextEditor = (() => {
                 editing: false,
             });
         }
+        _cancelScheduledElementWHUpdate() {
+            if (this._compositionUpdateRaf !== null) {
+                cancelAnimationFrame(this._compositionUpdateRaf);
+                this._compositionUpdateRaf = null;
+            }
+        }
+        /**
+         * While an IME composition is in progress the text is only in the DOM, not
+         * yet in the model, so `renderComplete` never fires and the shape keeps the
+         * size it had before the user started composing — the preedit string spills
+         * out of it. Remeasure once per frame instead, and once more when the
+         * composition ends.
+         */
+        _scheduleElementWHUpdate(flush = false) {
+            if (flush) {
+                this._cancelScheduledElementWHUpdate();
+                this._updateElementWH();
+                return;
+            }
+            if (this._compositionUpdateRaf !== null) {
+                return;
+            }
+            this._compositionUpdateRaf = requestAnimationFrame(() => {
+                this._compositionUpdateRaf = null;
+                this._updateElementWH();
+            });
+        }
+        _getInlineEditorContentRect() {
+            if (!this.inlineEditorContainer) {
+                return null;
+            }
+            const textNodes = InlineEditor.getTextNodesFromElement(this.inlineEditorContainer);
+            const firstText = textNodes[0];
+            const lastText = textNodes.at(-1);
+            if (!firstText || !lastText) {
+                return null;
+            }
+            const range = this.ownerDocument.createRange();
+            range.setStart(firstText, 0);
+            range.setEnd(lastText, lastText.length);
+            const rect = range.getBoundingClientRect();
+            return rect.width > 0 || rect.height > 0 ? rect : null;
+        }
+        /**
+         * The size the shape should take, measured on the editor DOM.
+         *
+         * Without a numeric `maxWidth` the editor box *is* the text box, so its own
+         * offset size is the whole measure. Every framework shape (Wardley, EDGY,
+         * DDD, Cynefin) is in that case, and takes exactly the path it took before
+         * mind map nodes gained a maximum width.
+         *
+         * With a numeric `maxWidth` the box is capped by CSS and wraps, so
+         * `offsetWidth` alone no longer describes the text: a preedit string the
+         * browser has not reflowed yet extends past the box it is painted in. Take
+         * the widest measure available, then clamp it back to `maxWidth` so the
+         * shape never grows past the cap.
+         */
+        _measureEditorSize(textResizing) {
+            const containerWidth = this.richText.offsetWidth;
+            const containerHeight = this.richText.offsetHeight;
+            const maxWidth = this.element.maxWidth;
+            if (typeof maxWidth !== 'number' ||
+                textResizing !== TextResizing.AUTO_WIDTH_AND_HEIGHT) {
+                return { containerWidth, containerHeight };
+            }
+            const [verticalPadding, horizontalPadding] = this.element.padding;
+            const bcr = this.richText.getBoundingClientRect();
+            const contentRect = this._getInlineEditorContentRect();
+            const rangeRect = this.inlineEditor
+                ?.getNativeRange()
+                ?.getBoundingClientRect();
+            const contentRectWidth = contentRect != null ? contentRect.width + horizontalPadding * 2 : 0;
+            const contentRectHeight = contentRect != null ? contentRect.height + verticalPadding * 2 : 0;
+            const rangeWidth = rangeRect != null
+                ? Math.max(0, rangeRect.right - bcr.left + horizontalPadding)
+                : 0;
+            const rangeHeight = rangeRect != null
+                ? Math.max(0, rangeRect.bottom - bcr.top + verticalPadding)
+                : 0;
+            return {
+                containerWidth: Math.min(Math.max(containerWidth, contentRectWidth, rangeWidth), maxWidth),
+                containerHeight: Math.max(containerHeight, contentRectHeight, rangeHeight),
+            };
+        }
         _updateElementWH() {
             if (this.element.textFitMode !== TextFitMode.Grow) {
                 // Fixed shape bounds: typing never resizes the shape. Contained mode
@@ -194,9 +279,8 @@ let EdgelessShapeTextEditor = (() => {
                 return;
             }
             const bcr = this.richText.getBoundingClientRect();
-            const containerHeight = this.richText.offsetHeight;
-            const containerWidth = this.richText.offsetWidth;
             const textResizing = this.element.textResizing;
+            const { containerWidth, containerHeight } = this._measureEditorSize(textResizing);
             if ((containerHeight !== this.element.h &&
                 textResizing === TextResizing.AUTO_HEIGHT) ||
                 (textResizing === TextResizing.AUTO_WIDTH_AND_HEIGHT &&
@@ -214,7 +298,11 @@ let EdgelessShapeTextEditor = (() => {
                 }
                 if (this.isMindMapNode) {
                     const mindmap = this.element.group;
-                    mindmap.layout();
+                    // Re-place the nodes, but without re-applying the style: that would
+                    // fit the node back to the text the *model* holds and undo the size
+                    // just measured from the editor. The full layout runs again when the
+                    // editor is unmounted.
+                    mindmap.layout(mindmap.tree, { applyStyle: false });
                 }
                 this.richText.style.minHeight = `${containerHeight}px`;
             }
@@ -264,6 +352,12 @@ let EdgelessShapeTextEditor = (() => {
                         return;
                     this._unmount();
                 });
+                this.disposables.addFromEvent(this.inlineEditorContainer, 'compositionupdate', () => {
+                    this._scheduleElementWHUpdate();
+                });
+                this.disposables.addFromEvent(this.inlineEditorContainer, 'compositionend', () => {
+                    this._scheduleElementWHUpdate(true);
+                });
             })
                 .catch(console.error);
             this.disposables.addFromEvent(this, 'keydown', evt => {
@@ -293,13 +387,19 @@ let EdgelessShapeTextEditor = (() => {
             const [verticalPadding, horiPadding] = this.element.padding;
             const textResizing = this.element.textResizing;
             const viewport = this.gfx.viewport;
-            const zoom = viewport.zoom;
+            // The editor is mounted inside the container the host may have scaled, so
+            // it is placed and scaled the way a gfx block is, not in screen pixels.
+            const scale = overlayScale(viewport);
             const rect = getSelectedRect([this.element]);
             const rotate = this.element.rotate;
             const [leftTopX, leftTopY] = Vec.rotWith([rect.left, rect.top], [rect.left + rect.width / 2, rect.top + rect.height / 2], toRadian(rotate));
-            const [x, y] = this.gfx.viewport.toViewCoord(leftTopX, leftTopY);
+            const [x, y] = toOverlayCoord(viewport, leftTopX, leftTopY);
             const fixedBounds = this.element.textFitMode !== TextFitMode.Grow;
             const autoWidth = !fixedBounds && textResizing === TextResizing.AUTO_WIDTH_AND_HEIGHT;
+            // A shape that grows up to a maximum width wraps instead of running off:
+            // `max-content` keeps the intrinsic width the box wants, `max-width` caps
+            // it, and the wrapping rules below break the overflowing line.
+            const constrainedAutoWidth = autoWidth && typeof this.element.maxWidth === 'number';
             const color = this.std
                 .get(ThemeProvider)
                 .generateColorProperty(this.element.color, '#000000');
@@ -307,11 +407,15 @@ let EdgelessShapeTextEditor = (() => {
                 position: 'absolute',
                 left: x + 'px',
                 top: y + 'px',
-                width: autoWidth ? 'fit-content' : rect.width + 'px',
+                width: constrainedAutoWidth
+                    ? 'max-content'
+                    : autoWidth
+                        ? 'fit-content'
+                        : rect.width + 'px',
                 // override rich-text style (height: 100%)
                 height: 'initial',
                 minHeight: autoWidth ? '1em' : `${rect.height}px`,
-                maxWidth: autoWidth && this.element.maxWidth
+                maxWidth: constrainedAutoWidth
                     ? `${this.element.maxWidth}px`
                     : undefined,
                 boxSizing: 'border-box',
@@ -320,7 +424,7 @@ let EdgelessShapeTextEditor = (() => {
                 fontWeight: this.element.fontWeight,
                 lineHeight: 'normal',
                 outline: 'none',
-                transform: `scale(${zoom}, ${zoom}) rotate(${rotate}deg)`,
+                transform: `scale(${scale}, ${scale}) rotate(${rotate}deg)`,
                 transformOrigin: 'top left',
                 color,
                 padding: `${verticalPadding}px ${horiPadding}px`,
@@ -339,9 +443,15 @@ let EdgelessShapeTextEditor = (() => {
             this._lastXYWH = this.element.xywh;
             return html ` <style>
         edgeless-shape-text-editor v-text [data-v-text] {
-          overflow-wrap: ${autoWidth ? 'normal' : 'anywhere'};
-          word-break: ${autoWidth ? 'normal' : 'break-word'} !important;
-          white-space: ${autoWidth ? 'pre' : 'pre-wrap'} !important;
+          overflow-wrap: ${autoWidth && !constrainedAutoWidth
+                ? 'normal'
+                : 'anywhere'};
+          word-break: ${autoWidth && !constrainedAutoWidth
+                ? 'normal'
+                : 'break-word'} !important;
+          white-space: ${autoWidth && !constrainedAutoWidth
+                ? 'pre'
+                : 'pre-wrap'} !important;
         }
 
         edgeless-shape-text-editor .inline-editor {
@@ -369,6 +479,7 @@ let EdgelessShapeTextEditor = (() => {
         set richText(value) { this.#richText_accessor_storage = value; }
         constructor() {
             super(...arguments);
+            this._compositionUpdateRaf = null;
             this._keeping = false;
             this._lastXYWH = '';
             this._resizeObserver = null;

package/dist/_pkgs/affine-gfx-shape/view.js

@@ -1,7 +1,7 @@
 import { ViewExtensionProvider, } from '../affine-ext-loader/index.js';
-import { ShortcutExtension } from '../std/index.js';
+import { CommandExtension } from '../std/index.js';
+import { shapeCommands } from './commands.js';
 import { effects } from './effects.js';
-import { shapeShortcuts } from './shortcuts.js';
 import { HighlighterElementRendererExtension, ShapeElementRendererExtension, } from './element-renderer/index.js';
 import { ShapeDomRendererExtension } from './element-renderer/shape-dom.js';
 import { ShapeElementView, ShapeViewInteraction } from './element-view.js';
@@ -30,7 +30,7 @@ export class ShapeViewExtension extends ViewExtensionProvider {
             context.register(shapeToolbarExtension);
             context.register(ShapeViewInteraction);
             // Edgeless-scoped, enumerable/rebindable (installer: root view.ts).
-            context.register(ShortcutExtension(shapeShortcuts));
+            context.register(CommandExtension(shapeCommands));
         }
     }
 }

package/dist/_pkgs/affine-gfx-template/toolbar/template-tool-button.d.ts

@@ -4,10 +4,12 @@ declare const EdgelessTemplateButton_base: typeof LitElement & import("../../glo
 export declare class EdgelessTemplateButton extends EdgelessTemplateButton_base {
     static styles: import("lit").CSSResult;
     private _cleanup;
+    private _autoUpdateCleanup;
     private _prevTool;
     enableActiveBackground: boolean;
     type: typeof TemplateTool;
     get cards(): import("lit-html").TemplateResult<2>[];
+    connectedCallback(): void;
     private _closePanel;
     private _togglePanel;
     render(): import("lit-html").TemplateResult<1>;

package/dist/_pkgs/affine-gfx-template/toolbar/template-tool-button.js

@@ -151,10 +151,21 @@ let EdgelessTemplateButton = (() => {
             const { theme } = this;
             return [TemplateCard1[theme], TemplateCard2[theme], TemplateCard3[theme]];
         }
+        connectedCallback() {
+            super.connectedCallback();
+            // The panel can still be open when the button is removed: without this the
+            // `autoUpdate` listeners outlive the element and leak.
+            this.disposables.add(() => {
+                this._autoUpdateCleanup?.();
+                this._autoUpdateCleanup = null;
+            });
+        }
         _closePanel() {
             if (this._openedPanel) {
                 this._openedPanel.remove();
                 this._openedPanel = null;
+                this._autoUpdateCleanup?.();
+                this._autoUpdateCleanup = null;
                 this._cleanup?.();
                 this._cleanup = null;
                 this.requestUpdate();
@@ -188,8 +199,13 @@ let EdgelessTemplateButton = (() => {
             this._openedPanel = panel;
             this.renderRoot.append(panel);
             requestAnimationFrame(() => {
+                // The panel may already have been closed before this frame ran; starting
+                // a loop on it now would never be stopped.
+                if (this._openedPanel !== panel)
+                    return;
                 const arrowEl = panel.renderRoot.querySelector('.arrow');
-                autoUpdate(this, panel, () => {
+                this._autoUpdateCleanup?.();
+                this._autoUpdateCleanup = autoUpdate(this, panel, () => {
                     computePosition(this, panel, {
                         placement: 'top',
                         middleware: [offset(20), arrow({ element: arrowEl }), shift()],
@@ -230,6 +246,7 @@ let EdgelessTemplateButton = (() => {
         constructor() {
             super(...arguments);
             this._cleanup = null;
+            this._autoUpdateCleanup = null;
             this._prevTool = null;
             this.enableActiveBackground = true;
             this.type = TemplateTool;

package/dist/_pkgs/affine-gfx-text/edgeless-text-editor.js

@@ -35,7 +35,7 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
 import { CanvasElementType, DefaultTool, EdgelessCRUDIdentifier, getSurfaceBlock, TextUtils, } from '../affine-block-surface/index.js';
 import { DefaultTheme, TextElementModel } from '../affine-model/index.js';
 import { ThemeProvider } from '../affine-shared/services/index.js';
-import { getSelectedRect } from '../affine-shared/utils/index.js';
+import { getSelectedRect, overlayScale, toOverlayCoord, } from '../affine-shared/utils/index.js';
 import { Bound, toRadian, Vec } from '../global/gfx/index.js';
 import { WithDisposable } from '../global/lit/index.js';
 import { ShadowlessElement, stdContext, } from '../std/index.js';
@@ -281,13 +281,17 @@ let EdgelessTextEditor = (() => {
             const { text, fontFamily, fontSize, fontWeight, fontStyle, textAlign, rotate, hasMaxWidth, w, } = this.element;
             const lineHeight = getLineHeight(fontFamily, fontSize, fontWeight);
             const rect = getSelectedRect([this.element]);
-            const { translateX, translateY, zoom } = this.gfx.viewport;
+            const viewport = this.gfx.viewport;
             const [visualX, visualY] = this.getVisualPosition(this.element);
             const containerOffset = this.getContainerOffset();
+            // The editor is mounted inside the container the host may have scaled, so
+            // it is placed and scaled the way a gfx block is, not in screen pixels.
+            // Panning the viewport and reaching the element are one and the same
+            // translation, which is what `toOverlayCoord` answers.
+            const [x, y] = toOverlayCoord(viewport, visualX, visualY);
             const transformOperation = [
-                `translate(${translateX}px, ${translateY}px)`,
-                `translate(${visualX * zoom}px, ${visualY * zoom}px)`,
-                `scale(${zoom})`,
+                `translate(${x}px, ${y}px)`,
+                `scale(${overlayScale(viewport)})`,
                 `rotate(${rotate}deg)`,
                 `translate(${containerOffset})`,
             ];

package/dist/_pkgs/affine-inline-latex/command.js

@@ -1,7 +1,37 @@
 import { DocModeProvider, TelemetryProvider, } from '../affine-shared/services/index.js';
+function openInlineLatexEditor(inlineEditor, index) {
+    inlineEditor
+        .waitForUpdate()
+        .then(async () => {
+        await inlineEditor.waitForUpdate();
+        const textPoint = inlineEditor.getTextPoint(index);
+        if (!textPoint)
+            return;
+        const [text] = textPoint;
+        const latexNode = text.parentElement?.closest('affine-latex-node');
+        if (!latexNode)
+            return;
+        latexNode.toggleEditor();
+    })
+        .catch(console.error);
+}
+/**
+ * An inline equation can only replace a range living in a single block, so a
+ * selection spanning several blocks is refused instead of silently applying to
+ * its first block.
+ */
+function getSingleBlockInlineRange(textSelection) {
+    if (textSelection.to) {
+        return null;
+    }
+    return {
+        index: textSelection.from.index,
+        length: textSelection.from.length,
+    };
+}
 export const insertInlineLatex = (ctx, next) => {
     const textSelection = ctx.textSelection ?? ctx.currentTextSelection;
-    if (!textSelection || !textSelection.isCollapsed())
+    if (!textSelection)
         return;
     const blockComponent = ctx.std.view.getBlock(textSelection.from.blockId);
     if (!blockComponent)
@@ -12,18 +42,17 @@ export const insertInlineLatex = (ctx, next) => {
     const inlineEditor = richText.inlineEditor;
     if (!inlineEditor)
         return;
-    inlineEditor.insertText({
-        index: textSelection.from.index,
-        length: 0,
-    }, ' ');
-    inlineEditor.formatText({
-        index: textSelection.from.index,
-        length: 1,
-    }, {
-        latex: '',
-    });
+    const inlineRange = getSingleBlockInlineRange(textSelection);
+    if (!inlineRange)
+        return;
+    // A non-collapsed selection becomes the equation source, so selecting a
+    // formula and asking for an inline equation renders what was already typed.
+    const latex = textSelection.isCollapsed()
+        ? ''
+        : inlineEditor.yTextString.slice(inlineRange.index, inlineRange.index + inlineRange.length);
+    inlineEditor.insertText(inlineRange, ' ', { latex });
     inlineEditor.setInlineRange({
-        index: textSelection.from.index,
+        index: inlineRange.index,
         length: 1,
     });
     const mode = ctx.std.get(DocModeProvider).getEditorMode() ?? 'page';
@@ -39,19 +68,10 @@ export const insertInlineLatex = (ctx, next) => {
         module: 'inline equation',
         control: 'create inline equation',
     });
-    inlineEditor
-        .waitForUpdate()
-        .then(async () => {
-        await inlineEditor.waitForUpdate();
-        const textPoint = inlineEditor.getTextPoint(textSelection.from.index + 1);
-        if (!textPoint)
-            return;
-        const [text] = textPoint;
-        const latexNode = text.parentElement?.closest('affine-latex-node');
-        if (!latexNode)
-            return;
-        latexNode.toggleEditor();
-    })
-        .catch(console.error);
+    // Only an empty equation needs the editor right away; one built from a
+    // selection already has its content.
+    if (textSelection.isCollapsed()) {
+        openInlineLatexEditor(inlineEditor, inlineRange.index + 1);
+    }
     next();
 };

package/dist/_pkgs/affine-inline-latex/latex-node/latex-node.d.ts

@@ -2,15 +2,25 @@ import type { AffineTextAttributes } from '../../affine-shared/types/index.js';
 import { type BlockStdScope, ShadowlessElement } from '../../std/index.js';
 import { type InlineEditor } from '../../std/inline/index.js';
 import type { DeltaInsert } from '../../store/index.js';
+import { type PropertyValues } from 'lit';
 declare const AffineLatexNode_base: typeof ShadowlessElement & import("../../global/utils/types.js").Constructor<import("../../global/lit/with-disposable.js").DisposableClass>;
 export declare class AffineLatexNode extends AffineLatexNode_base {
     static styles: import("lit").CSSResult;
     private _editorAbortController;
+    private _isEditorOpen;
     readonly latex$: import("@preact/signals-core").Signal<string>;
     readonly latexEditorSignal: import("@preact/signals-core").Signal<string>;
     get deltaLatex(): string;
     get latexContainer(): HTMLElement | null;
     connectedCallback(): void;
+    /**
+     * The delta is the source of truth: when it changes underneath us (undo, a
+     * remote edit, a paste replacing the node) the signals must follow it,
+     * otherwise the node keeps painting the equation it was first created with.
+     * While the editor is open the user is the source of truth instead, so the
+     * in-flight draft is left alone.
+     */
+    protected updated(changedProperties: PropertyValues<this>): void;
     render(): import("lit-html").TemplateResult<1>;
     toggleEditor(): void;
     get readonly(): boolean;

package/dist/_pkgs/affine-inline-latex/latex-node/latex-node.js

@@ -203,6 +203,26 @@ let AffineLatexNode = (() => {
             });
             return result;
         }
+        /**
+         * The delta is the source of truth: when it changes underneath us (undo, a
+         * remote edit, a paste replacing the node) the signals must follow it,
+         * otherwise the node keeps painting the equation it was first created with.
+         * While the editor is open the user is the source of truth instead, so the
+         * in-flight draft is left alone.
+         */
+        updated(changedProperties) {
+            super.updated(changedProperties);
+            if (!changedProperties.has('delta') || this._isEditorOpen) {
+                return;
+            }
+            const latex = this.deltaLatex;
+            if (this.latex$.peek() !== latex) {
+                this.latex$.value = latex;
+            }
+            if (this.latexEditorSignal.peek() !== latex) {
+                this.latexEditorSignal.value = latex;
+            }
+        }
         render() {
             return html `<span class="affine-latex" data-selected=${this.selected}
       ><div class="latex-container"></div>
@@ -237,7 +257,9 @@ let AffineLatexNode = (() => {
                     zIndex: 'var(--affine-z-index-popover)',
                 },
             });
+            this._isEditorOpen = true;
             this._editorAbortController.signal.addEventListener('abort', () => {
+                this._isEditorOpen = false;
                 portal.remove();
                 const latex = this.latexEditorSignal.peek();
                 this.latex$.value = latex;
@@ -279,6 +301,7 @@ let AffineLatexNode = (() => {
         constructor() {
             super(...arguments);
             this._editorAbortController = null;
+            this._isEditorOpen = false;
             this.latex$ = signal('');
             this.latexEditorSignal = signal('');
             this.#delta_accessor_storage = __runInitializers(this, _delta_initializers, {

package/dist/_pkgs/affine-inline-link/link-node/affine-link.js

@@ -124,10 +124,13 @@ let AffineLink = (() => {
     ></a>`;
         }
         render() {
+            // No `text-decoration` here on purpose: this object is the OVERRIDE handed
+            // to `affineTextStyles`, and it is spread last, so any decoration it names
+            // would silently erase the one computed from `strike` / `underline`.
+            // A plain link still shows none — `affineTextStyles` defaults to 'none'.
             const linkStyle = {
                 color: 'var(--affine-link-color)',
                 fill: 'var(--affine-link-color)',
-                'text-decoration': 'none',
                 cursor: 'pointer',
             };
             if (this.delta.attributes && this.delta.attributes?.code) {

package/dist/_pkgs/affine-inline-preset/adapters/html/html-inline.d.ts

@@ -1,6 +1,9 @@
 export declare const htmlTextToDeltaMatcher: import("../../../store/index.js").ExtensionType & {
     identifier: import("../../../global/di/types.js").ServiceIdentifier<import("../../../affine-shared/adapters/index.js").HtmlASTToDeltaMatcher>;
 };
+export declare const htmlColorStyleElementToDeltaMatcher: import("../../../store/index.js").ExtensionType & {
+    identifier: import("../../../global/di/types.js").ServiceIdentifier<import("../../../affine-shared/adapters/index.js").HtmlASTToDeltaMatcher>;
+};
 export declare const htmlTextLikeElementToDeltaMatcher: import("../../../store/index.js").ExtensionType & {
     identifier: import("../../../global/di/types.js").ServiceIdentifier<import("../../../affine-shared/adapters/index.js").HtmlASTToDeltaMatcher>;
 };

package/dist/_pkgs/affine-inline-preset/adapters/html/html-inline.js

@@ -1,4 +1,4 @@
-import { HtmlASTToDeltaExtension, } from '../../../affine-shared/adapters/index.js';
+import { extractColorFromStyle, HtmlASTToDeltaExtension, resolveNearestSupportedColor, } from '../../../affine-shared/adapters/index.js';
 import { collapseWhiteSpace } from 'collapse-white-space';
 /**
  * Handle empty text nodes created by HTML parser for styling purposes.
@@ -147,6 +147,33 @@ export const htmlTextToDeltaMatcher = HtmlASTToDeltaExtension({
         return value ? [{ insert: value }] : [];
     },
 });
+export const htmlColorStyleElementToDeltaMatcher = HtmlASTToDeltaExtension({
+    name: 'color-style-element',
+    match: ast => isElement(ast) &&
+        ast.tagName === 'span' &&
+        typeof ast.properties?.style === 'string' &&
+        /color\s*:/i.test(ast.properties.style),
+    toDelta: (ast, context) => {
+        if (!isElement(ast)) {
+            return [];
+        }
+        const baseOptions = { ...context.options, trim: false };
+        // In preformatted contexts (e.g. code blocks) we don't keep inline colors.
+        if (baseOptions.pre) {
+            return ast.children.flatMap(child => context.toDelta(child, baseOptions));
+        }
+        const colorValue = extractColorFromStyle(typeof ast.properties?.style === 'string' ? ast.properties.style : '');
+        const mappedColor = colorValue
+            ? resolveNearestSupportedColor(colorValue)
+            : null;
+        return ast.children.flatMap(child => context.toDelta(child, baseOptions).map(delta => {
+            if (mappedColor) {
+                delta.attributes = { ...delta.attributes, color: mappedColor };
+            }
+            return delta;
+        }));
+    },
+});
 export const htmlTextLikeElementToDeltaMatcher = HtmlASTToDeltaExtension({
     name: 'text-like-element',
     match: ast => isTextLikeElement(ast),
@@ -251,6 +278,7 @@ export const htmlBrElementToDeltaMatcher = HtmlASTToDeltaExtension({
 });
 export const HtmlInlineToDeltaAdapterExtensions = [
     htmlTextToDeltaMatcher,
+    htmlColorStyleElementToDeltaMatcher,
     htmlTextLikeElementToDeltaMatcher,
     htmlStrongElementToDeltaMatcher,
     htmlItalicElementToDeltaMatcher,

package/dist/_pkgs/affine-model/blocks/code/code-model.d.ts

@@ -7,6 +7,7 @@ type CodeBlockProps = {
     caption: string;
     preview?: boolean;
     lineNumber?: boolean;
+    collapsed?: boolean;
     comments?: Record<string, boolean>;
 } & BlockMeta;
 export declare const CodeBlockSchema: {

package/dist/_pkgs/affine-model/blocks/code/code-model.js

@@ -8,6 +8,7 @@ export const CodeBlockSchema = defineBlockSchema({
         caption: '',
         preview: undefined,
         lineNumber: undefined,
+        collapsed: undefined,
         comments: undefined,
         'meta:createdAt': undefined,
         'meta:createdBy': undefined,

package/dist/_pkgs/affine-model/elements/connector/connector.js

@@ -225,6 +225,10 @@ let ConnectorElementModel = (() => {
          */
         getNearestPoint(point) {
             const { mode, absolutePath: path } = this;
+            // Degraded connector (vanished endpoint): no path to project onto.
+            if (path.length === 0) {
+                return [this.x, this.y];
+            }
             if (mode === ConnectorMode.Straight) {
                 const first = path[0];
                 const last = path[path.length - 1];
@@ -249,6 +253,10 @@ let ConnectorElementModel = (() => {
          */
         getOffsetDistanceByPoint(point, bounds) {
             const { mode, absolutePath: path } = this;
+            // Degraded connector (vanished endpoint): no path to measure along.
+            if (path.length === 0) {
+                return 0.5;
+            }
             let { x, y, w, h } = this;
             if (bounds) {
                 x = bounds.x;
@@ -256,6 +264,9 @@ let ConnectorElementModel = (() => {
                 w = bounds.w;
                 h = bounds.h;
             }
+            if (path.length === 0) {
+                return 0.5;
+            }
             point[0] = Vec.clamp(point[0], x, x + w);
             point[1] = Vec.clamp(point[1], y, y + h);
             if (mode === ConnectorMode.Straight) {
@@ -282,6 +293,11 @@ let ConnectorElementModel = (() => {
          */
         getPointByOffsetDistance(offsetDistance = 0.5, bounds) {
             const { mode, absolutePath: path } = this;
+            // Degraded connector (vanished endpoint): fall back to the bound center.
+            if (path.length === 0) {
+                const b = bounds ?? this;
+                return [b.x + b.w / 2, b.y + b.h / 2];
+            }
             if (mode === ConnectorMode.Straight) {
                 const first = path[0];
                 const last = path[path.length - 1];
@@ -294,6 +310,9 @@ let ConnectorElementModel = (() => {
                 w = bounds.w;
                 h = bounds.h;
             }
+            if (path.length === 0) {
+                return [x + w / 2, y + h / 2];
+            }
             if (mode === ConnectorMode.Orthogonal) {
                 const points = path.map(p => [p[0], p[1]]);
                 const point = Polyline.pointAt(points, offsetDistance);
@@ -323,6 +342,11 @@ let ConnectorElementModel = (() => {
                 return true;
             }
             const { mode, strokeWidth, absolutePath: path } = this;
+            // Degraded connector (vanished endpoint): nothing painted, nothing hit.
+            // The label check above still applies if a label is displayed.
+            if (path.length === 0) {
+                return false;
+            }
             const point = mode === ConnectorMode.Curve
                 ? getBezierNearestPoint(getBezierParameters(path), currentPoint)
                 : polyLineNearestPoint(path, currentPoint);