@formicoidea/labre-core 0.26.1 → 0.28.0

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

@@ -6,7 +6,7 @@ import { toast } from '../affine-components/toast/index.js';
 import { EDGELESS_TOP_CONTENTEDITABLE_SELECTOR } from '../affine-shared/consts/index.js';
 import { BlockCommentManager, CommentProviderIdentifier, DocModeProvider, NotificationProvider, TelemetryProvider, } from '../affine-shared/services/index.js';
 import { getDropResult } from '../affine-widget-drag-handle/index.js';
-import { createRecordDetail, createUniComponentFromWebComponent, DataViewRootUILogic, defineUniComponent, ExternalGroupByConfigProvider, lazy, renderUniLit, uniMap, } from '../data-view/index.js';
+import { createRecordDetail, createUniComponentFromWebComponent, DataViewRootUILogic, defineUniComponent, ExternalGroupByConfigProvider, renderUniLit, uniMap, } from '../data-view/index.js';
 import { widgetPresets } from '../data-view/widget-presets/index.js';
 import { Rect } from '../global/gfx/index.js';
 import { CommentIcon, CopyIcon, DeleteIcon, MoreHorizontalIcon, } from '@blocksuite/icons/lit';
@@ -16,6 +16,7 @@ import { Slice } from '../store/index.js';
 import { autoUpdate } from '@floating-ui/dom';
 import { computed, signal } from '@preact/signals-core';
 import { html, nothing } from 'lit';
+import { keyed } from 'lit/directives/keyed.js';
 import { popSideDetail } from './components/layout.js';
 import { DatabaseConfigExtension } from './config.js';
 import { EditorHostKey } from './context/host-context.js';
@@ -88,25 +89,10 @@ export class DatabaseBlockComponent extends CaptionedBlockComponent {
                 options,
             });
         };
-        this.dataSource = lazy(() => {
-            const initFn = (dataSource) => {
-                dataSource.serviceSet(EditorHostKey, this.host);
-                this.std.provider
-                    .getAll(ExternalGroupByConfigProvider)
-                    .forEach(config => {
-                    dataSource.serviceSet(ExternalGroupByConfigProvider(config.name), config);
-                });
-            };
-            const provider = this.std.getOptional(DatabaseDataSourceProvider);
-            const dataSource = provider && this.model.props.externalSourceId
-                ? provider.createDataSource(this.model, initFn)
-                : new DatabaseBlockDataSource(this.model, initFn);
-            const id = currentViewStorage.getCurrentView(this.model.id);
-            if (id && dataSource.viewManager.viewGet(id)) {
-                dataSource.viewManager.setCurrentView(id);
-            }
-            return dataSource;
-        });
+        // Bumps on every rebuild so `renderBlock` can `keyed()` the renderer element,
+        // forcing Lit to tear the old one down (disposing its listeners) and mount a
+        // fresh one bound to the new source.
+        this._sourceVersion = 0;
         this.renderTitle = (dataViewLogic) => {
             return html ` <affine-database-title
       class="${databaseTitleStyles}"
@@ -219,7 +205,107 @@ export class DatabaseBlockComponent extends CaptionedBlockComponent {
             return databaseSelection?.viewSelection;
         });
         this.virtualPadding$ = signal(0);
-        this.dataViewRootLogic = lazy(() => new DataViewRootUILogic({
+        this.#useZeroWidth_accessor_storage = true;
+    }
+    _buildDataSource() {
+        const initFn = (dataSource) => {
+            dataSource.serviceSet(EditorHostKey, this.host);
+            this.std.provider
+                .getAll(ExternalGroupByConfigProvider)
+                .forEach(config => {
+                dataSource.serviceSet(ExternalGroupByConfigProvider(config.name), config);
+            });
+        };
+        const provider = this.std.getOptional(DatabaseDataSourceProvider);
+        const dataSource = provider && this.model.props.externalSourceId
+            ? provider.createDataSource(this.model, initFn)
+            : new DatabaseBlockDataSource(this.model, initFn);
+        const id = currentViewStorage.getCurrentView(this.model.id);
+        if (id && dataSource.viewManager.viewGet(id)) {
+            dataSource.viewManager.setCurrentView(id);
+        }
+        return dataSource;
+    }
+    get dataSource() {
+        if (!this._dataSource) {
+            this._dataSource = this._buildDataSource();
+        }
+        return this._dataSource;
+    }
+    rebuildDataSource() {
+        this._dataSource?.dispose();
+        this._dataSource = undefined;
+        this._dataViewRootLogic = undefined;
+        this._sourceVersion++;
+        this.requestUpdate();
+    }
+    get optionsConfig() {
+        return {
+            configure: (_model, options) => options,
+            ...this.std.getOptional(DatabaseConfigExtension.identifier),
+        };
+    }
+    get isCommentHighlighted() {
+        return (this.std
+            .getOptional(BlockCommentManager)
+            ?.isBlockCommentHighlighted(this.model) ?? false);
+    }
+    get topContenteditableElement() {
+        if (this.std.get(DocModeProvider).getEditorMode() === 'edgeless') {
+            return this.closest(EDGELESS_TOP_CONTENTEDITABLE_SELECTOR);
+        }
+        return this.rootComponent;
+    }
+    renderDatabaseOps() {
+        if (this.dataSource.readonly$.value) {
+            return nothing;
+        }
+        return html ` <div
+      data-testid="database-ops"
+      class="${databaseOpsStyles}"
+      @click="${this.clickDatabaseOps}"
+    >
+      ${MoreHorizontalIcon()}
+    </div>`;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute(RANGE_SYNC_EXCLUDE_ATTR, 'true');
+        this.classList.add(databaseBlockStyles);
+        this.listenFullWidthChange();
+        // Rebuild the source whenever the block is re-pointed at (or detached from)
+        // an external collection. The first (synchronous) emission is skipped: the
+        // source is still lazy at this point, so there is nothing to rebuild.
+        this.disposables.add(this.model.props.externalSourceId$.subscribe(() => {
+            if (this._dataSource) {
+                this.rebuildDataSource();
+            }
+        }));
+    }
+    disconnectedCallback() {
+        this._dataSource?.dispose();
+        this._dataSource = undefined;
+        this._dataViewRootLogic = undefined;
+        super.disconnectedCallback();
+    }
+    listenFullWidthChange() {
+        if (this.std.get(DocModeProvider).getEditorMode() === 'edgeless') {
+            return;
+        }
+        this.disposables.add(autoUpdate(this.host, this, () => {
+            const padding = this.getBoundingClientRect().left -
+                this.host.getBoundingClientRect().left;
+            this.virtualPadding$.value = Math.max(0, padding - 72);
+        }));
+    }
+    get dataViewRootLogic() {
+        if (!this._dataViewRootLogic) {
+            this._dataViewRootLogic = this._buildDataViewRootLogic();
+        }
+        return this._dataViewRootLogic;
+    }
+    _buildDataViewRootLogic() {
+        return new DataViewRootUILogic({
             virtualPadding$: this.virtualPadding$,
             bindHotkey: hotkeys => {
                 return {
@@ -237,7 +323,7 @@ export class DatabaseBlockComponent extends CaptionedBlockComponent {
             },
             selection$: this.viewSelection$,
             setSelection: this.setSelection,
-            dataSource: this.dataSource.value,
+            dataSource: this.dataSource,
             headerWidget: this.headerWidget,
             onDrag: this.onDrag,
             clipboard: this.std.clipboard,
@@ -297,58 +383,12 @@ export class DatabaseBlockComponent extends CaptionedBlockComponent {
                     }
                 },
             },
-        }));
-        this.#useZeroWidth_accessor_storage = true;
-    }
-    get optionsConfig() {
-        return {
-            configure: (_model, options) => options,
-            ...this.std.getOptional(DatabaseConfigExtension.identifier),
-        };
-    }
-    get isCommentHighlighted() {
-        return (this.std
-            .getOptional(BlockCommentManager)
-            ?.isBlockCommentHighlighted(this.model) ?? false);
-    }
-    get topContenteditableElement() {
-        if (this.std.get(DocModeProvider).getEditorMode() === 'edgeless') {
-            return this.closest(EDGELESS_TOP_CONTENTEDITABLE_SELECTOR);
-        }
-        return this.rootComponent;
-    }
-    renderDatabaseOps() {
-        if (this.dataSource.value.readonly$.value) {
-            return nothing;
-        }
-        return html ` <div
-      data-testid="database-ops"
-      class="${databaseOpsStyles}"
-      @click="${this.clickDatabaseOps}"
-    >
-      ${MoreHorizontalIcon()}
-    </div>`;
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.setAttribute(RANGE_SYNC_EXCLUDE_ATTR, 'true');
-        this.classList.add(databaseBlockStyles);
-        this.listenFullWidthChange();
-    }
-    listenFullWidthChange() {
-        if (this.std.get(DocModeProvider).getEditorMode() === 'edgeless') {
-            return;
-        }
-        this.disposables.add(autoUpdate(this.host, this, () => {
-            const padding = this.getBoundingClientRect().left -
-                this.host.getBoundingClientRect().left;
-            this.virtualPadding$.value = Math.max(0, padding - 72);
-        }));
+        });
     }
     renderBlock() {
         return html `
       <div contenteditable="false" class="${databaseContentStyles}">
-        ${this.dataViewRootLogic.value.render()}
+        ${keyed(this._sourceVersion, this.dataViewRootLogic.render())}
       </div>
     `;
     }

package/dist/_pkgs/affine-block-database/external-data-source.d.ts

@@ -0,0 +1,69 @@
+import type { DatabaseBlockModel } from '../affine-model/index.js';
+import type { InsertToPosition } from '../affine-shared/utils/index.js';
+import { type DatabaseFlags, DataSourceBase, type DataViewDataType, type PropertyMetaConfig, type TypeInstance, type ViewManager, type ViewMeta } from '../data-view/index.js';
+import { DisposableGroup } from '../global/disposable/index.js';
+import { type ReadonlySignal } from '@preact/signals-core';
+/**
+ * Intermediate base for `affine:database` data sources whose **view config**
+ * keeps living in the block model blob (`model.props.views`) while the **data
+ * layer** (rows / cells / columns) is redirected elsewhere — the inline blob
+ * source, or a host-provided external collection.
+ *
+ * It implements everything generic — the view manager / metas / converts, the
+ * view-data CRUD, feature flags, readonly, and the reactive plumbing — so a
+ * concrete source only provides a small synchronous data contract (`getRows`,
+ * `getCellValue`, …) plus the mutations, and calls {@link invalidate} from its
+ * own change observers.
+ *
+ * Reactivity: the data-layer reads ({@link rows$}, {@link properties$} and the
+ * `*Get` getters that `DataSourceBase` wraps in `computed()`) all depend on
+ * {@link revision}. A source backed by reactive blocksuite signals (the blob
+ * source) tracks those naturally and never bumps `revision` — cost is nil. A
+ * source reading raw `Y.Map`s bumps `revision` via {@link invalidate} so the
+ * computeds re-run. Defining `rows$`/`properties$` here (not as instance fields
+ * reassigned in a subclass constructor) also avoids the "reassign after super"
+ * dance.
+ */
+export declare abstract class ExternalDataSourceBase extends DataSourceBase {
+    protected readonly _model: DatabaseBlockModel;
+    /** Bumped by {@link invalidate} to re-run the data-layer computeds. */
+    protected readonly revision: import("@preact/signals-core").Signal<number>;
+    protected readonly disposables: DisposableGroup;
+    constructor(model: DatabaseBlockModel);
+    /** Notify the view layer that the underlying data changed. */
+    protected invalidate(): void;
+    dispose(): void;
+    get doc(): import("../store/index.js").Store;
+    get parentProvider(): import("../global/di/provider.js").ServiceProvider;
+    protected abstract getRows(): string[];
+    protected abstract getProperties(): string[];
+    protected abstract getCellValue(rowId: string, propertyId: string): unknown;
+    protected abstract getPropertyType(propertyId: string): string | undefined;
+    protected abstract getPropertyName(propertyId: string): string;
+    protected abstract getPropertyData(propertyId: string): Record<string, unknown>;
+    protected abstract getPropertyDataType(propertyId: string): TypeInstance | undefined;
+    protected abstract getPropertyMetas(): PropertyMetaConfig[];
+    rows$: ReadonlySignal<string[]>;
+    properties$: ReadonlySignal<string[]>;
+    allPropertyMetas$: ReadonlySignal<PropertyMetaConfig[]>;
+    propertyMetas$: ReadonlySignal<PropertyMetaConfig[]>;
+    cellValueGet(rowId: string, propertyId: string): unknown;
+    propertyTypeGet(propertyId: string): string | undefined;
+    propertyNameGet(propertyId: string): string;
+    propertyDataGet(propertyId: string): Record<string, unknown>;
+    propertyDataTypeGet(propertyId: string): TypeInstance | undefined;
+    featureFlags$: ReadonlySignal<DatabaseFlags>;
+    readonly$: ReadonlySignal<boolean>;
+    viewConverts: import("./index.js").ViewConvertConfig[];
+    viewMetas: ViewMeta[];
+    viewManager: ViewManager;
+    viewDataList$: ReadonlySignal<DataViewDataType[]>;
+    viewDataGet(viewId: string): DataViewDataType | undefined;
+    viewDataAdd(viewData: DataViewDataType): string;
+    viewDataDelete(viewId: string): void;
+    viewDataDuplicate(id: string): string;
+    viewDataMoveTo(id: string, position: InsertToPosition): void;
+    viewDataUpdate<ViewData extends DataViewDataType>(id: string, updater: (data: ViewData) => Partial<ViewData>): void;
+    viewMetaGet(type: string): ViewMeta;
+    viewMetaGetById(viewId: string): ViewMeta | undefined;
+}

package/dist/_pkgs/affine-block-database/external-data-source.js

@@ -0,0 +1,144 @@
+import { FeatureFlagService } from '../affine-shared/services/index.js';
+import { DataSourceBase, ViewManagerBase, } from '../data-view/index.js';
+import { DisposableGroup } from '../global/disposable/index.js';
+import { IS_MOBILE } from '../global/env/index.js';
+import { BlockSuiteError, ErrorCode } from '../global/exceptions/index.js';
+import { computed, signal, } from '@preact/signals-core';
+import { deleteView, duplicateView, moveViewTo, updateView, } from './utils/block-utils.js';
+import { databaseBlockViewConverts, databaseBlockViewMap, databaseBlockViews, } from './views/index.js';
+/**
+ * Intermediate base for `affine:database` data sources whose **view config**
+ * keeps living in the block model blob (`model.props.views`) while the **data
+ * layer** (rows / cells / columns) is redirected elsewhere — the inline blob
+ * source, or a host-provided external collection.
+ *
+ * It implements everything generic — the view manager / metas / converts, the
+ * view-data CRUD, feature flags, readonly, and the reactive plumbing — so a
+ * concrete source only provides a small synchronous data contract (`getRows`,
+ * `getCellValue`, …) plus the mutations, and calls {@link invalidate} from its
+ * own change observers.
+ *
+ * Reactivity: the data-layer reads ({@link rows$}, {@link properties$} and the
+ * `*Get` getters that `DataSourceBase` wraps in `computed()`) all depend on
+ * {@link revision}. A source backed by reactive blocksuite signals (the blob
+ * source) tracks those naturally and never bumps `revision` — cost is nil. A
+ * source reading raw `Y.Map`s bumps `revision` via {@link invalidate} so the
+ * computeds re-run. Defining `rows$`/`properties$` here (not as instance fields
+ * reassigned in a subclass constructor) also avoids the "reassign after super"
+ * dance.
+ */
+export class ExternalDataSourceBase extends DataSourceBase {
+    constructor(model) {
+        super();
+        /** Bumped by {@link invalidate} to re-run the data-layer computeds. */
+        this.revision = signal(0);
+        this.disposables = new DisposableGroup();
+        // --- reactive bridge over the data contract -----------------------------
+        this.rows$ = computed(() => {
+            void this.revision.value;
+            return this.getRows();
+        });
+        this.properties$ = computed(() => {
+            void this.revision.value;
+            return this.getProperties();
+        });
+        this.allPropertyMetas$ = computed(() => {
+            void this.revision.value;
+            return this.getPropertyMetas();
+        });
+        this.propertyMetas$ = computed(() => {
+            return this.allPropertyMetas$.value.filter(v => !v.config.fixed && !v.config.hide);
+        });
+        // --- view surface (config stays in the model blob) ----------------------
+        this.featureFlags$ = computed(() => {
+            const featureFlagService = this.doc.get(FeatureFlagService);
+            return {
+                enable_number_formatting: featureFlagService.getFlag('enable_database_number_formatting') ??
+                    false,
+                enable_table_virtual_scroll: featureFlagService.getFlag('enable_table_virtual_scroll') ?? false,
+            };
+        });
+        this.readonly$ = computed(() => {
+            return (this._model.store.readonly ||
+                // TODO(@L-Sun): use block level readonly
+                IS_MOBILE);
+        });
+        this.viewConverts = databaseBlockViewConverts;
+        this.viewMetas = databaseBlockViews;
+        this.viewManager = new ViewManagerBase(this);
+        this.viewDataList$ = computed(() => {
+            return this._model.props.views$.value;
+        });
+        this._model = model;
+    }
+    /** Notify the view layer that the underlying data changed. */
+    invalidate() {
+        this.revision.value++;
+    }
+    dispose() {
+        this.disposables.dispose();
+    }
+    get doc() {
+        return this._model.store;
+    }
+    get parentProvider() {
+        return this._model.store.provider;
+    }
+    cellValueGet(rowId, propertyId) {
+        void this.revision.value;
+        return this.getCellValue(rowId, propertyId);
+    }
+    propertyTypeGet(propertyId) {
+        void this.revision.value;
+        return this.getPropertyType(propertyId);
+    }
+    propertyNameGet(propertyId) {
+        void this.revision.value;
+        return this.getPropertyName(propertyId);
+    }
+    propertyDataGet(propertyId) {
+        void this.revision.value;
+        return this.getPropertyData(propertyId);
+    }
+    propertyDataTypeGet(propertyId) {
+        void this.revision.value;
+        return this.getPropertyDataType(propertyId);
+    }
+    viewDataGet(viewId) {
+        return this.viewDataList$.value.find(data => data.id === viewId);
+    }
+    viewDataAdd(viewData) {
+        this._model.store.captureSync();
+        this._model.store.transact(() => {
+            this._model.props.views = [...this._model.props.views, viewData];
+        });
+        return viewData.id;
+    }
+    viewDataDelete(viewId) {
+        this._model.store.captureSync();
+        deleteView(this._model, viewId);
+    }
+    viewDataDuplicate(id) {
+        return duplicateView(this._model, id);
+    }
+    viewDataMoveTo(id, position) {
+        moveViewTo(this._model, id, position);
+    }
+    viewDataUpdate(id, updater) {
+        updateView(this._model, id, updater);
+    }
+    viewMetaGet(type) {
+        const view = databaseBlockViewMap[type];
+        if (!view) {
+            throw new BlockSuiteError(ErrorCode.DatabaseBlockError, `Unknown view type: ${type}`);
+        }
+        return view;
+    }
+    viewMetaGetById(viewId) {
+        const view = this.viewDataGet(viewId);
+        if (!view) {
+            return;
+        }
+        return this.viewMetaGet(view.mode);
+    }
+}

package/dist/_pkgs/affine-block-database/index.d.ts

@@ -4,6 +4,7 @@ export * from './config';
 export * from './context';
 export * from './data-source';
 export * from './database-block';
+export * from './external-data-source';
 export * from './detail-panel/block-renderer';
 export * from './detail-panel/note-renderer';
 export * from './properties';

package/dist/_pkgs/affine-block-database/index.js

@@ -4,6 +4,7 @@ export * from './config';
 export * from './context';
 export * from './data-source';
 export * from './database-block';
+export * from './external-data-source';
 export * from './detail-panel/block-renderer';
 export * from './detail-panel/note-renderer';
 export * from './properties';

package/dist/_pkgs/affine-block-root/edgeless/configs/toolbar/misc.d.ts

@@ -118,6 +118,24 @@ export declare const builtinMiscToolbarConfig: {
             readonly icon: import("lit-html").TemplateResult<1>;
             readonly when: (ctx: ToolbarContext) => boolean;
             readonly run: (ctx: ToolbarContext) => void;
+        }, {
+            readonly id: "c.link-element";
+            readonly label: "Link";
+            readonly icon: import("lit-html").TemplateResult<1>;
+            readonly when: (ctx: ToolbarContext) => boolean;
+            readonly run: (ctx: ToolbarContext) => void;
+        }, {
+            readonly id: "c.edit-element-link";
+            readonly label: "Edit link";
+            readonly icon: import("lit-html").TemplateResult<1>;
+            readonly when: (ctx: ToolbarContext) => boolean;
+            readonly run: (ctx: ToolbarContext) => void;
+        }, {
+            readonly id: "c.remove-element-link";
+            readonly label: "Remove link";
+            readonly icon: import("lit-html").TemplateResult<1>;
+            readonly when: (ctx: ToolbarContext) => boolean;
+            readonly run: (ctx: ToolbarContext) => void;
         }];
     } | {
         placement: ActionPlacement;

package/dist/_pkgs/affine-block-root/edgeless/configs/toolbar/more.d.ts

@@ -69,6 +69,24 @@ export declare const moreActions: [{
         readonly icon: import("lit-html").TemplateResult<1>;
         readonly when: (ctx: ToolbarContext) => boolean;
         readonly run: (ctx: ToolbarContext) => void;
+    }, {
+        readonly id: "c.link-element";
+        readonly label: "Link";
+        readonly icon: import("lit-html").TemplateResult<1>;
+        readonly when: (ctx: ToolbarContext) => boolean;
+        readonly run: (ctx: ToolbarContext) => void;
+    }, {
+        readonly id: "c.edit-element-link";
+        readonly label: "Edit link";
+        readonly icon: import("lit-html").TemplateResult<1>;
+        readonly when: (ctx: ToolbarContext) => boolean;
+        readonly run: (ctx: ToolbarContext) => void;
+    }, {
+        readonly id: "c.remove-element-link";
+        readonly label: "Remove link";
+        readonly icon: import("lit-html").TemplateResult<1>;
+        readonly when: (ctx: ToolbarContext) => boolean;
+        readonly run: (ctx: ToolbarContext) => void;
     }];
 }, {
     readonly id: "e.delete";

package/dist/_pkgs/affine-block-root/edgeless/configs/toolbar/more.js

@@ -6,10 +6,11 @@ import { ImageBlockComponent } from '../../../../affine-block-image/index.js';
 import { EdgelessCRUDIdentifier, getSurfaceComponent, } from '../../../../affine-block-surface/index.js';
 import { createGroupFromSelectedCommand } from '../../../../affine-gfx-group/index.js';
 import { AttachmentBlockModel, BookmarkBlockModel, EmbedLinkedDocBlockSchema, EmbedLinkedDocModel, EmbedSyncedDocBlockSchema, EmbedSyncedDocModel, FrameBlockModel, ImageBlockModel, isExternalEmbedModel, NoteBlockModel, ParagraphBlockModel, } from '../../../../affine-model/index.js';
+import { QuickSearchProvider } from '../../../../affine-shared/services/index.js';
 import { matchModels, } from '../../../../affine-shared/utils/index.js';
 import { Bound, getCommonBoundWithRotation } from '../../../../global/gfx/index.js';
-import { ArrowDownBigBottomIcon, ArrowDownBigIcon, ArrowUpBigIcon, ArrowUpBigTopIcon, CopyIcon, DeleteIcon, DuplicateIcon, FrameIcon, GroupIcon, LinkedPageIcon, ResetIcon, } from '@blocksuite/icons/lit';
-import { GfxBlockElementModel } from '../../../../std/gfx/index.js';
+import { ArrowDownBigBottomIcon, ArrowDownBigIcon, ArrowUpBigIcon, ArrowUpBigTopIcon, CopyIcon, DeleteIcon, DuplicateIcon, FrameIcon, GroupIcon, LinkIcon, LinkedPageIcon, ResetIcon, UnlinkIcon, } from '@blocksuite/icons/lit';
+import { GfxBlockElementModel, GfxPrimitiveElementModel, } from '../../../../std/gfx/index.js';
 import { EdgelessClipboardController } from '../../clipboard/clipboard';
 import { duplicate } from '../../utils/clipboard-utils';
 import { getSortedCloneElements } from '../../utils/clone-utils';
@@ -298,6 +299,54 @@ export const moreActions = [
                     create().catch(console.error);
                 },
             },
+            {
+                id: 'c.link-element',
+                // Attach a link (existing doc or external URL) to a single drawing
+                // element. A hover arrow (edgeless-element-link widget) opens it.
+                label: 'Link',
+                icon: LinkIcon(),
+                when(ctx) {
+                    const el = getLinkableElement(ctx);
+                    return el !== null && !hasElementLink(el) && canPickLink(ctx);
+                },
+                run(ctx) {
+                    const el = getLinkableElement(ctx);
+                    if (el)
+                        linkElementViaQuickSearch(ctx, el);
+                },
+            },
+            {
+                id: 'c.edit-element-link',
+                label: 'Edit link',
+                icon: LinkIcon(),
+                when(ctx) {
+                    const el = getLinkableElement(ctx);
+                    return el !== null && hasElementLink(el) && canPickLink(ctx);
+                },
+                run(ctx) {
+                    const el = getLinkableElement(ctx);
+                    if (el)
+                        linkElementViaQuickSearch(ctx, el);
+                },
+            },
+            {
+                id: 'c.remove-element-link',
+                label: 'Remove link',
+                icon: UnlinkIcon(),
+                when(ctx) {
+                    const el = getLinkableElement(ctx);
+                    return el !== null && hasElementLink(el);
+                },
+                run(ctx) {
+                    const el = getLinkableElement(ctx);
+                    if (!el)
+                        return;
+                    ctx.std.get(EdgelessCRUDIdentifier).updateElement(el.id, {
+                        linkedDocId: undefined,
+                        externalLink: undefined,
+                    });
+                },
+            },
         ],
     },
     // Deleting Group
@@ -321,6 +370,59 @@ export const moreActions = [
         },
     },
 ];
+/** The single selected drawing element a link can be attached to, or null. */
+function getLinkableElement(ctx) {
+    const models = ctx.getSurfaceModels();
+    return models.length === 1 && models[0] instanceof GfxPrimitiveElementModel
+        ? models[0]
+        : null;
+}
+function hasElementLink(el) {
+    return Boolean(el.linkedDocId || el.externalLink);
+}
+/**
+ * Picking a doc/URL needs the host-provided quick-search modal. Hide the
+ * Link / Edit link items where it is absent (they would no-op); Remove link
+ * stays available since clearing needs no picker.
+ */
+function canPickLink(ctx) {
+    return Boolean(ctx.std.getOptional(QuickSearchProvider));
+}
+/** Pick a doc or URL via the quick-search modal and store it on the element. */
+function linkElementViaQuickSearch(ctx, el) {
+    const quickSearch = ctx.std.getOptional(QuickSearchProvider);
+    if (!quickSearch)
+        return;
+    quickSearch
+        .openQuickSearch()
+        .then(result => {
+        if (!result)
+            return;
+        const crud = ctx.std.get(EdgelessCRUDIdentifier);
+        if ('docId' in result) {
+            crud.updateElement(el.id, {
+                linkedDocId: result.docId,
+                externalLink: undefined,
+            });
+            ctx.track('LinkedDocCreated', {
+                control: 'link element',
+                type: 'element-ref',
+                other: 'existing doc',
+            });
+        }
+        else if ('externalUrl' in result) {
+            crud.updateElement(el.id, {
+                externalLink: result.externalUrl,
+                linkedDocId: undefined,
+            });
+            ctx.track('Link', {
+                control: 'link element',
+                type: 'external url',
+            });
+        }
+    })
+        .catch(console.error);
+}
 function reorderElements(ctx, models, type) {
     if (!models.length)
         return;

package/dist/_pkgs/affine-widget-edgeless-selected-rect/edgeless-element-link.d.ts

@@ -0,0 +1,29 @@
+import type { RootBlockModel } from '../affine-model/index.js';
+import { WidgetComponent } from '../std/index.js';
+import { nothing } from 'lit';
+export declare const EDGELESS_ELEMENT_LINK_WIDGET = "edgeless-element-link";
+/**
+ * Shows a clickable arrow when hovering a drawing element that carries a link
+ * ({@link GfxPrimitiveElementModel.linkedDocId} or `.externalLink`). Clicking it
+ * opens the linked doc (host side-view via `docLinkClicked`) or the URL.
+ *
+ * ponytail: hover is resolved via `getElementByPoint`, which returns the topmost
+ * leaf — a link set on a group only shows when a child is hovered. Good enough
+ * for v1 (shapes/text/connectors are hit directly).
+ */
+export declare class EdgelessElementLinkWidget extends WidgetComponent<RootBlockModel> {
+    static styles: import("lit").CSSResult;
+    private _hideTimer;
+    private accessor _target;
+    private accessor _rect;
+    get gfx(): import("../std/gfx/controller.js").GfxController;
+    private readonly _updateRect;
+    private _hasLink;
+    private _setTarget;
+    /** The hovered element if it carries a link, else its nearest linked group. */
+    private _resolveLinked;
+    private readonly _open;
+    private readonly _onKeydown;
+    firstUpdated(): void;
+    render(): import("lit-html").TemplateResult<1> | typeof nothing;
+}