@formicoidea/labre-core 0.23.0

package/src/_pkgs/affine-block-database/components/title/index.ts

@@ -0,0 +1,199 @@
+import { unsafeCSSVarV2 } from '../../../affine-shared/theme/index.js';
+import { stopPropagation } from '../../../affine-shared/utils/index.js';
+import type { DataViewUILogicBase } from '../../../data-view/index.js';
+import { SignalWatcher, WithDisposable } from '../../../global/lit/index.js';
+import { ShadowlessElement } from '../../../std/index.js';
+import type { Text } from '../../../store/index.js';
+import { signal } from '@preact/signals-core';
+import { css, html } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
+
+import type { DatabaseBlockComponent } from '../../database-block.js';
+
+export class DatabaseTitle extends SignalWatcher(
+  WithDisposable(ShadowlessElement)
+) {
+  static override styles = css`
+    .affine-database-title {
+      position: relative;
+      flex: 1;
+      font-family: inherit;
+      font-size: 20px;
+      line-height: 28px;
+      font-weight: 600;
+      color: var(--affine-text-primary-color);
+      overflow: hidden;
+    }
+
+    .affine-database-title textarea {
+      font-size: inherit;
+      line-height: inherit;
+      font-weight: inherit;
+      letter-spacing: inherit;
+      font-family: inherit;
+      border: none;
+      background-color: transparent;
+      padding: 0;
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      right: 0;
+      outline: none;
+      resize: none;
+      scrollbar-width: none;
+    }
+
+    .affine-database-title .text {
+      user-select: none;
+      opacity: 0;
+      white-space: pre-wrap;
+    }
+
+    .affine-database-title[data-title-focus='false'] textarea {
+      opacity: 0;
+    }
+
+    .affine-database-title[data-title-focus='false'] .text {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      opacity: 1;
+      white-space: pre;
+    }
+
+    .affine-database-title [data-title-empty='true']::before {
+      content: 'Untitled';
+      position: absolute;
+      pointer-events: none;
+      color: var(--affine-text-primary-color);
+    }
+
+    .affine-database-title [data-title-focus='true']::before {
+      color: var(--affine-placeholder-color);
+    }
+
+    .affine-database-title.comment-highlighted {
+      border-bottom: 2px solid
+        ${unsafeCSSVarV2('block/comment/highlightUnderline')};
+      background-color: ${unsafeCSSVarV2('block/comment/highlightActive')};
+    }
+  `;
+
+  private readonly compositionEnd = () => {
+    this.isComposing$.value = false;
+    this.titleText.replace(0, this.titleText.length, this.input.value);
+  };
+
+  private readonly onBlur = () => {
+    this.isFocus$.value = false;
+  };
+
+  private readonly onFocus = () => {
+    this.isFocus$.value = true;
+    if (this.dataViewLogic.selection$.value) {
+      this.dataViewLogic.setSelection(undefined);
+    }
+  };
+
+  private readonly onInput = (e: InputEvent) => {
+    this.text$.value = this.input.value;
+    if (!e.isComposing) {
+      this.titleText.replace(0, this.titleText.length, this.input.value);
+    }
+  };
+
+  private readonly onKeyDown = (event: KeyboardEvent) => {
+    event.stopPropagation();
+    if (event.key === 'Enter' && !event.isComposing) {
+      event.preventDefault();
+      this.onPressEnterKey?.();
+      return;
+    }
+  };
+
+  updateText = () => {
+    if (!this.isFocus$.value) {
+      this.input.value = this.titleText.toString();
+      this.text$.value = this.input.value;
+    }
+  };
+
+  get database() {
+    return this.closest<DatabaseBlockComponent>('affine-database');
+  }
+
+  override connectedCallback() {
+    super.connectedCallback();
+    requestAnimationFrame(() => {
+      this.updateText();
+    });
+    this.titleText.yText.observe(this.updateText);
+    this.disposables.add(() => {
+      this.titleText.yText.unobserve(this.updateText);
+    });
+  }
+
+  override render() {
+    const isEmpty = !this.text$.value;
+
+    const classList = classMap({
+      'affine-database-title': true,
+      ellipsis: !this.isFocus$.value,
+      'comment-highlighted': this.database?.isCommentHighlighted ?? false,
+    });
+    const untitledStyle = styleMap({
+      height: isEmpty ? 'auto' : 0,
+      opacity: isEmpty && !this.isFocus$.value ? 1 : 0,
+    });
+    return html` <div
+      class="${classList}"
+      data-title-empty="${isEmpty}"
+      data-title-focus="${this.isFocus$.value}"
+    >
+      <div class="text" style="${untitledStyle}">Untitled</div>
+      <div class="text">${this.text$.value}</div>
+      <textarea
+        .disabled="${this.readonly$.value}"
+        @input="${this.onInput}"
+        @keydown="${this.onKeyDown}"
+        @copy="${stopPropagation}"
+        @paste="${stopPropagation}"
+        @focus="${this.onFocus}"
+        @blur="${this.onBlur}"
+        @compositionend="${this.compositionEnd}"
+        data-block-is-database-title="true"
+        title="${this.titleText.toString()}"
+      ></textarea>
+    </div>`;
+  }
+
+  @query('textarea')
+  private accessor input!: HTMLTextAreaElement;
+
+  private readonly isComposing$ = signal(false);
+  private readonly isFocus$ = signal(false);
+
+  private onPressEnterKey() {
+    this.dataViewLogic.addRow?.('start');
+  }
+
+  get readonly$() {
+    return this.dataViewLogic.view.readonly$;
+  }
+
+  private readonly text$ = signal('');
+
+  @property({ attribute: false })
+  accessor titleText!: Text;
+
+  @property({ attribute: false })
+  accessor dataViewLogic!: DataViewUILogicBase;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'affine-database-title': DatabaseTitle;
+  }
+}

package/src/_pkgs/affine-block-database/config.ts

@@ -0,0 +1,6 @@
+import { ConfigExtensionFactory } from '../std/index.js';
+
+import type { DatabaseViewExtensionOptions } from './view';
+
+export const DatabaseConfigExtension =
+  ConfigExtensionFactory<DatabaseViewExtensionOptions>('affine:database');

package/src/_pkgs/affine-block-database/configs/slash-menu.ts

@@ -0,0 +1,83 @@
+import { getSelectedModelsCommand } from '../../affine-shared/commands/index.js';
+import { TelemetryProvider } from '../../affine-shared/services/index.js';
+import { isInsideBlockByFlavour } from '../../affine-shared/utils/index.js';
+import { type SlashMenuConfig } from '../../affine-widget-slash-menu/index.js';
+import { viewPresets } from '../../data-view/view-presets/index.js';
+import {
+  DatabaseKanbanViewIcon,
+  DatabaseTableViewIcon,
+} from '@blocksuite/icons/lit';
+
+import { insertDatabaseBlockCommand } from '../commands';
+import { KanbanViewTooltip, TableViewTooltip } from './tooltips';
+
+export const databaseSlashMenuConfig: SlashMenuConfig = {
+  disableWhen: ({ model }) => model.flavour === 'affine:database',
+  items: [
+    {
+      name: 'Table View',
+      description: 'Display items in a table format.',
+      searchAlias: ['database'],
+      icon: DatabaseTableViewIcon(),
+      tooltip: {
+        figure: TableViewTooltip,
+        caption: 'Table View',
+      },
+      group: '7_Database@0',
+      when: ({ model }) =>
+        !isInsideBlockByFlavour(model.store, model, 'affine:edgeless-text'),
+      action: ({ std }) => {
+        std.command
+          .chain()
+          .pipe(getSelectedModelsCommand)
+          .pipe(insertDatabaseBlockCommand, {
+            viewType: viewPresets.tableViewMeta.type,
+            place: 'after',
+            removeEmptyLine: true,
+          })
+          .pipe(({ insertedDatabaseBlockId }) => {
+            if (insertedDatabaseBlockId) {
+              const telemetry = std.getOptional(TelemetryProvider);
+              telemetry?.track('BlockCreated', {
+                blockType: 'affine:database',
+              });
+            }
+          })
+          .run();
+      },
+    },
+
+    {
+      name: 'Kanban View',
+      description: 'Visualize data in a dashboard.',
+      searchAlias: ['database'],
+      icon: DatabaseKanbanViewIcon(),
+      tooltip: {
+        figure: KanbanViewTooltip,
+        caption: 'Kanban View',
+      },
+      group: '7_Database@2',
+      when: ({ model }) =>
+        !isInsideBlockByFlavour(model.store, model, 'affine:edgeless-text'),
+      action: ({ std }) => {
+        std.command
+          .chain()
+          .pipe(getSelectedModelsCommand)
+          .pipe(insertDatabaseBlockCommand, {
+            viewType: viewPresets.kanbanViewMeta.type,
+            place: 'after',
+            removeEmptyLine: true,
+          })
+          .pipe(({ insertedDatabaseBlockId }) => {
+            if (insertedDatabaseBlockId) {
+              const telemetry = std.getOptional(TelemetryProvider);
+              telemetry?.track('BlockCreated', {
+                blockType: 'affine:database',
+              });
+            }
+          })
+          .run();
+      },
+    },
+  ],
+};

package/src/_pkgs/affine-block-database/configs/tooltips.ts

@@ -0,0 +1,181 @@
+import { html } from 'lit';
+// prettier-ignore
+export const TableViewTooltip = html`<svg width="170" height="106" viewBox="0 0 170 106" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="170" height="106" rx="2" fill="white"/>
+<mask id="mask0_16460_1148" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="170" height="106">
+<rect width="170" height="106" rx="2" fill="white"/>
+</mask>
+<g mask="url(#mask0_16460_1148)">
+<rect x="7.5" y="26.5" width="169" height="84" rx="3.5" fill="white" stroke="#E3E2E4"/>
+<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="9" font-weight="500" letter-spacing="0em"><tspan x="17" y="42.7727">Untitled Table</tspan></text>
+<line x1="17" y1="50.75" x2="176" y2="50.75" stroke="#E3E2E4" stroke-width="0.5"/>
+<line x1="65.25" y1="51" x2="65.25" y2="110" stroke="#E3E2E4" stroke-width="0.5"/>
+<line x1="17" y1="63.75" x2="176" y2="63.75" stroke="#E3E2E4" stroke-width="0.5"/>
+<line x1="17" y1="76.75" x2="176" y2="76.75" stroke="#E3E2E4" stroke-width="0.5"/>
+<line x1="17" y1="89.75" x2="176" y2="89.75" stroke="#E3E2E4" stroke-width="0.5"/>
+<line x1="17" y1="102.75" x2="176" y2="102.75" stroke="#E3E2E4" stroke-width="0.5"/>
+<text fill="#8E8D91" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="5" letter-spacing="0em"><tspan x="25" y="58.8182">Title</tspan></text>
+<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="5" letter-spacing="0em"><tspan x="28" y="71.8182">Task 1</tspan></text>
+<text fill="#8E8D91" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="5" letter-spacing="0em"><tspan x="78" y="58.8182">Status</tspan></text>
+<rect x="69" y="66" width="16" height="8" rx="1" fill="#FFE1E1"/>
+<text fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="5" letter-spacing="0em"><tspan x="71" y="71.8182">Todo</tspan></text>
+<rect x="69" y="79" width="31" height="8" rx="1" fill="#F3F0FF"/>
+<text fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="5" letter-spacing="0em"><tspan x="71" y="84.8182">In Progress</tspan></text>
+<rect x="69" y="93" width="17" height="8" rx="1" fill="#DFF4E8"/>
+<text fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="5" letter-spacing="0em"><tspan x="71" y="98.8182">Done</tspan></text>
+<g clip-path="url(#clip0_16460_1148)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.7102 55.3125C17.6067 55.3125 17.5227 55.3964 17.5227 55.5V56C17.5227 56.1036 17.6067 56.1875 17.7102 56.1875C17.8138 56.1875 17.8977 56.1036 17.8977 56V55.6875H18.75V58.3125H18.2557C18.1521 58.3125 18.0682 58.3964 18.0682 58.5C18.0682 58.6036 18.1521 58.6875 18.2557 58.6875H18.9375H19.6193C19.7228 58.6875 19.8068 58.6036 19.8068 58.5C19.8068 58.3964 19.7228 58.3125 19.6193 58.3125H19.125V55.6875H19.9773V56C19.9773 56.1036 20.0612 56.1875 20.1648 56.1875C20.2683 56.1875 20.3523 56.1036 20.3523 56V55.5C20.3523 55.3964 20.2683 55.3125 20.1648 55.3125H18.9375H17.7102ZM20.9011 55.3125C20.7976 55.3125 20.7136 55.3964 20.7136 55.5C20.7136 55.6036 20.7976 55.6875 20.9011 55.6875H22.2647C22.3683 55.6875 22.4522 55.6036 22.4522 55.5C22.4522 55.3964 22.3683 55.3125 22.2647 55.3125H20.9011ZM20.7136 57C20.7136 56.8964 20.7976 56.8125 20.9011 56.8125H22.2647C22.3683 56.8125 22.4522 56.8964 22.4522 57C22.4522 57.1036 22.3683 57.1875 22.2647 57.1875H20.9011C20.7976 57.1875 20.7136 57.1036 20.7136 57ZM20.9011 58.3125C20.7976 58.3125 20.7136 58.3964 20.7136 58.5C20.7136 58.6036 20.7976 58.6875 20.9011 58.6875H22.2647C22.3683 58.6875 22.4522 58.6036 22.4522 58.5C22.4522 58.3964 22.3683 58.3125 22.2647 58.3125H20.9011Z" fill="#8E8D91"/>
+</g>
+<rect x="17" y="66" width="8" height="8" rx="1" fill="#EEEEEE"/>
+<g clip-path="url(#clip1_16460_1148)">
+<g clip-path="url(#clip2_16460_1148)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.8125 68C18.8125 67.8964 18.8964 67.8125 19 67.8125H23C23.1036 67.8125 23.1875 67.8964 23.1875 68V68.6667C23.1875 68.7702 23.1036 68.8542 23 68.8542C22.8964 68.8542 22.8125 68.7702 22.8125 68.6667V68.1875H21.1875V71.8125H22C22.1036 71.8125 22.1875 71.8964 22.1875 72C22.1875 72.1036 22.1036 72.1875 22 72.1875H20C19.8964 72.1875 19.8125 72.1036 19.8125 72C19.8125 71.8964 19.8964 71.8125 20 71.8125H20.8125V68.1875H19.1875V68.6667C19.1875 68.7702 19.1036 68.8542 19 68.8542C18.8964 68.8542 18.8125 68.7702 18.8125 68.6667V68Z" fill="#77757D"/>
+</g>
+</g>
+<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="5" letter-spacing="0em"><tspan x="28" y="84.8182">Task 2</tspan></text>
+<rect x="17" y="79" width="8" height="8" rx="1" fill="#EEEEEE"/>
+<g clip-path="url(#clip3_16460_1148)">
+<g clip-path="url(#clip4_16460_1148)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.8125 81C18.8125 80.8964 18.8964 80.8125 19 80.8125H23C23.1036 80.8125 23.1875 80.8964 23.1875 81V81.6667C23.1875 81.7702 23.1036 81.8542 23 81.8542C22.8964 81.8542 22.8125 81.7702 22.8125 81.6667V81.1875H21.1875V84.8125H22C22.1036 84.8125 22.1875 84.8964 22.1875 85C22.1875 85.1036 22.1036 85.1875 22 85.1875H20C19.8964 85.1875 19.8125 85.1036 19.8125 85C19.8125 84.8964 19.8964 84.8125 20 84.8125H20.8125V81.1875H19.1875V81.6667C19.1875 81.7702 19.1036 81.8542 19 81.8542C18.8964 81.8542 18.8125 81.7702 18.8125 81.6667V81Z" fill="#77757D"/>
+</g>
+</g>
+<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="5" letter-spacing="0em"><tspan x="28" y="98.8182">Task 3</tspan></text>
+<rect x="17" y="93" width="8" height="8" rx="1" fill="#EEEEEE"/>
+<g clip-path="url(#clip5_16460_1148)">
+<g clip-path="url(#clip6_16460_1148)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.8125 95C18.8125 94.8964 18.8964 94.8125 19 94.8125H23C23.1036 94.8125 23.1875 94.8964 23.1875 95V95.6667C23.1875 95.7702 23.1036 95.8542 23 95.8542C22.8964 95.8542 22.8125 95.7702 22.8125 95.6667V95.1875H21.1875V98.8125H22C22.1036 98.8125 22.1875 98.8964 22.1875 99C22.1875 99.1036 22.1036 99.1875 22 99.1875H20C19.8964 99.1875 19.8125 99.1036 19.8125 99C19.8125 98.8964 19.8964 98.8125 20 98.8125H20.8125V95.1875H19.1875V95.6667C19.1875 95.7702 19.1036 95.8542 19 95.8542C18.8964 95.8542 18.8125 95.7702 18.8125 95.6667V95Z" fill="#77757D"/>
+</g>
+</g>
+<g clip-path="url(#clip7_16460_1148)">
+<g clip-path="url(#clip8_16460_1148)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M71 54.6875C71.1036 54.6875 71.1875 54.7714 71.1875 54.875V55.0625H72.8125V54.875C72.8125 54.7714 72.8964 54.6875 73 54.6875C73.1036 54.6875 73.1875 54.7714 73.1875 54.875V55.0625H73.75C74.1297 55.0625 74.4375 55.3703 74.4375 55.75V56.375V57C74.4375 57.1036 74.3536 57.1875 74.25 57.1875C74.1464 57.1875 74.0625 57.1036 74.0625 57V56.5625H69.9375V58.75C69.9375 58.9226 70.0774 59.0625 70.25 59.0625H72C72.1036 59.0625 72.1875 59.1464 72.1875 59.25C72.1875 59.3536 72.1036 59.4375 72 59.4375H70.25C69.8703 59.4375 69.5625 59.1297 69.5625 58.75V56.375V55.75C69.5625 55.3703 69.8703 55.0625 70.25 55.0625H70.8125V54.875C70.8125 54.7714 70.8964 54.6875 71 54.6875ZM72.8125 55.4375V55.625C72.8125 55.7286 72.8964 55.8125 73 55.8125C73.1036 55.8125 73.1875 55.7286 73.1875 55.625V55.4375H73.75C73.9226 55.4375 74.0625 55.5774 74.0625 55.75V56.1875H69.9375V55.75C69.9375 55.5774 70.0774 55.4375 70.25 55.4375H70.8125V55.625C70.8125 55.7286 70.8964 55.8125 71 55.8125C71.1036 55.8125 71.1875 55.7286 71.1875 55.625V55.4375H72.8125ZM72.8586 57.8981C72.9975 57.7326 73.2059 57.6276 73.4386 57.6276C73.7911 57.6276 74.0877 57.8687 74.1718 58.1952C74.1976 58.2955 74.2998 58.3559 74.4001 58.33C74.5004 58.3042 74.5607 58.202 74.5349 58.1017C74.4093 57.6135 73.9663 57.2526 73.4386 57.2526C73.0495 57.2526 72.7065 57.4489 72.5029 57.7474L72.354 57.6842C72.2983 57.6606 72.239 57.7093 72.2513 57.7686L72.3723 58.3507C72.383 58.402 72.4416 58.4269 72.4859 58.3989L72.9884 58.081C73.0395 58.0487 73.0333 57.9722 72.9776 57.9486L72.8586 57.8981ZM73.3836 59.2519C73.6163 59.2519 73.8246 59.1469 73.9636 58.9814L73.8446 58.9309C73.7889 58.9073 73.7827 58.8308 73.8338 58.7985L74.3363 58.4806C74.3806 58.4526 74.4392 58.4775 74.4499 58.5287L74.5709 59.1109C74.5832 59.1702 74.5239 59.2189 74.4682 59.1952L74.3193 59.1321C74.1156 59.4306 73.7727 59.6269 73.3836 59.6269C72.9868 59.6269 72.6378 59.4226 72.436 59.1143C72.3693 59.0125 72.3185 58.8991 72.2873 58.7778C72.2615 58.6775 72.3218 58.5752 72.4221 58.5494C72.5224 58.5236 72.6246 58.584 72.6504 58.6843C72.6712 58.7651 72.7051 58.8407 72.7497 58.9089C72.8852 59.1158 73.1186 59.2519 73.3836 59.2519Z" fill="#8E8D91"/>
+</g>
+</g>
+<text fill="#8E8D91" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="8" y="16.6364">Display items in a table format.</tspan></text>
+</g>
+<defs>
+<clipPath id="clip0_16460_1148">
+<rect width="6" height="6" fill="white" transform="translate(17 54)"/>
+</clipPath>
+<clipPath id="clip1_16460_1148">
+<rect width="6" height="6" fill="white" transform="translate(18 67)"/>
+</clipPath>
+<clipPath id="clip2_16460_1148">
+<rect width="6" height="6" fill="white" transform="translate(18 67)"/>
+</clipPath>
+<clipPath id="clip3_16460_1148">
+<rect width="6" height="6" fill="white" transform="translate(18 80)"/>
+</clipPath>
+<clipPath id="clip4_16460_1148">
+<rect width="6" height="6" fill="white" transform="translate(18 80)"/>
+</clipPath>
+<clipPath id="clip5_16460_1148">
+<rect width="6" height="6" fill="white" transform="translate(18 94)"/>
+</clipPath>
+<clipPath id="clip6_16460_1148">
+<rect width="6" height="6" fill="white" transform="translate(18 94)"/>
+</clipPath>
+<clipPath id="clip7_16460_1148">
+<rect width="6" height="6" fill="white" transform="translate(69 54)"/>
+</clipPath>
+<clipPath id="clip8_16460_1148">
+<rect width="6" height="6" fill="white" transform="translate(69 54)"/>
+</clipPath>
+</defs>
+</svg>
+`;
+
+// prettier-ignore
+export const KanbanViewTooltip = html`<svg width="170" height="106" viewBox="0 0 170 106" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="170" height="106" rx="2" fill="white"/>
+<mask id="mask0_16460_1185" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="170" height="106">
+<rect width="170" height="106" rx="2" fill="white"/>
+</mask>
+<g mask="url(#mask0_16460_1185)">
+<rect x="8.5" y="26.5" width="169" height="84" rx="3.5" fill="white" stroke="#E3E2E4"/>
+<mask id="mask1_16460_1185" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="9" y="27" width="168" height="83">
+<rect x="9" y="27" width="168" height="83" rx="4" fill="white"/>
+</mask>
+<g mask="url(#mask1_16460_1185)">
+<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="9" font-weight="500" letter-spacing="0em"><tspan x="18" y="42.7727">Untitled Kanban</tspan></text>
+<text fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="5" letter-spacing="0em"><tspan x="18" y="55.8182">Ungroups</tspan></text>
+<rect x="84" y="50" width="31" height="8" rx="1" fill="#F3F0FF"/>
+<text fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="5" letter-spacing="0em"><tspan x="86" y="55.8182">In Progress</tspan></text>
+<rect x="150" y="50" width="17" height="8" rx="1" fill="#DFF4E8"/>
+<text fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="5" letter-spacing="0em"><tspan x="152" y="55.8182">Done</tspan></text>
+<rect x="16.25" y="60.25" width="59.5" height="53.5" rx="1.75" fill="white" stroke="#E3E2E4" stroke-width="0.5"/>
+<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="5" letter-spacing="0em"><tspan x="21" y="68.8182">Task 5</tspan></text>
+<rect x="20" y="88" width="8" height="8" rx="1" fill="#EEEEEE"/>
+<g clip-path="url(#clip0_16460_1185)">
+<g clip-path="url(#clip1_16460_1185)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.8125 90C21.8125 89.8964 21.8964 89.8125 22 89.8125H26C26.1036 89.8125 26.1875 89.8964 26.1875 90V90.6667C26.1875 90.7702 26.1036 90.8542 26 90.8542C25.8964 90.8542 25.8125 90.7702 25.8125 90.6667V90.1875H24.1875V93.8125H25C25.1036 93.8125 25.1875 93.8964 25.1875 94C25.1875 94.1036 25.1036 94.1875 25 94.1875H23C22.8964 94.1875 22.8125 94.1036 22.8125 94C22.8125 93.8964 22.8964 93.8125 23 93.8125H23.8125V90.1875H22.1875V90.6667C22.1875 90.7702 22.1036 90.8542 22 90.8542C21.8964 90.8542 21.8125 90.7702 21.8125 90.6667V90Z" fill="#77757D"/>
+</g>
+</g>
+<rect x="82.25" y="60.25" width="59.5" height="53.5" rx="1.75" fill="white" stroke="#E3E2E4" stroke-width="0.5"/>
+<rect x="148.25" y="60.25" width="59.5" height="53.5" rx="1.75" fill="white" stroke="#E3E2E4" stroke-width="0.5"/>
+<line x1="16" y1="99.75" x2="76" y2="99.75" stroke="#E3E2E4" stroke-width="0.5"/>
+<line x1="82" y1="99.75" x2="142" y2="99.75" stroke="#E3E2E4" stroke-width="0.5"/>
+<line x1="148" y1="99.75" x2="208" y2="99.75" stroke="#E3E2E4" stroke-width="0.5"/>
+<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="5" letter-spacing="0em"><tspan x="87" y="68.8182">Task 1</tspan></text>
+<rect x="86" y="88" width="8" height="8" rx="1" fill="#EEEEEE"/>
+<g clip-path="url(#clip2_16460_1185)">
+<g clip-path="url(#clip3_16460_1185)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M87.8125 90C87.8125 89.8964 87.8964 89.8125 88 89.8125H92C92.1036 89.8125 92.1875 89.8964 92.1875 90V90.6667C92.1875 90.7702 92.1036 90.8542 92 90.8542C91.8964 90.8542 91.8125 90.7702 91.8125 90.6667V90.1875H90.1875V93.8125H91C91.1036 93.8125 91.1875 93.8964 91.1875 94C91.1875 94.1036 91.1036 94.1875 91 94.1875H89C88.8964 94.1875 88.8125 94.1036 88.8125 94C88.8125 93.8964 88.8964 93.8125 89 93.8125H89.8125V90.1875H88.1875V90.6667C88.1875 90.7702 88.1036 90.8542 88 90.8542C87.8964 90.8542 87.8125 90.7702 87.8125 90.6667V90Z" fill="#77757D"/>
+</g>
+</g>
+<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="5" letter-spacing="0em"><tspan x="153" y="68.8182">Task 4</tspan></text>
+<rect x="152" y="88" width="8" height="8" rx="1" fill="#EEEEEE"/>
+<g clip-path="url(#clip4_16460_1185)">
+<g clip-path="url(#clip5_16460_1185)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M153.812 90C153.812 89.8964 153.896 89.8125 154 89.8125H158C158.104 89.8125 158.188 89.8964 158.188 90V90.6667C158.188 90.7702 158.104 90.8542 158 90.8542C157.896 90.8542 157.812 90.7702 157.812 90.6667V90.1875H156.188V93.8125H157C157.104 93.8125 157.188 93.8964 157.188 94C157.188 94.1036 157.104 94.1875 157 94.1875H155C154.896 94.1875 154.812 94.1036 154.812 94C154.812 93.8964 154.896 93.8125 155 93.8125H155.812V90.1875H154.188V90.6667C154.188 90.7702 154.104 90.8542 154 90.8542C153.896 90.8542 153.812 90.7702 153.812 90.6667V90Z" fill="#77757D"/>
+</g>
+</g>
+<rect x="43" y="50" width="8" height="8" rx="1" fill="#F5F5F5"/>
+<text fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="5" letter-spacing="0em"><tspan x="45.5" y="55.8182">1</tspan></text>
+<rect x="117" y="50" width="8" height="8" rx="1" fill="#F5F5F5"/>
+<text fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="5" letter-spacing="0em"><tspan x="119.5" y="55.8182">1</tspan></text>
+<rect x="169" y="50" width="8" height="8" rx="1" fill="#F5F5F5"/>
+<rect x="86" y="103" width="31" height="8" rx="1" fill="#F3F0FF"/>
+<text fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="5" letter-spacing="0em"><tspan x="88" y="108.818">In Progress</tspan></text>
+<rect x="152" y="103" width="17" height="8" rx="1" fill="#DFF4E8"/>
+<text fill="black" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="5" letter-spacing="0em"><tspan x="154" y="108.818">Done</tspan></text>
+</g>
+<text fill="#8E8D91" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="8" y="16.6364">Visualize data in a dashboard.</tspan></text>
+</g>
+<defs>
+<clipPath id="clip0_16460_1185">
+<rect width="6" height="6" fill="white" transform="translate(21 89)"/>
+</clipPath>
+<clipPath id="clip1_16460_1185">
+<rect width="6" height="6" fill="white" transform="translate(21 89)"/>
+</clipPath>
+<clipPath id="clip2_16460_1185">
+<rect width="6" height="6" fill="white" transform="translate(87 89)"/>
+</clipPath>
+<clipPath id="clip3_16460_1185">
+<rect width="6" height="6" fill="white" transform="translate(87 89)"/>
+</clipPath>
+<clipPath id="clip4_16460_1185">
+<rect width="6" height="6" fill="white" transform="translate(153 89)"/>
+</clipPath>
+<clipPath id="clip5_16460_1185">
+<rect width="6" height="6" fill="white" transform="translate(153 89)"/>
+</clipPath>
+</defs>
+</svg>
+`;
+
+// prettier-ignore
+export const ToDoListTooltip = html`<svg width="170" height="68" viewBox="0 0 170 68" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="170" height="68" rx="2" fill="white"/>
+<mask id="mask0_16460_960" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="170" height="68">
+<rect width="170" height="68" rx="2" fill="white"/>
+</mask>
+<g mask="url(#mask0_16460_960)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.6667 19C12.7462 19 12 19.7462 12 20.6667V27.3333C12 28.2538 12.7462 29 13.6667 29H20.3333C21.2538 29 22 28.2538 22 27.3333V20.6667C22 19.7462 21.2538 19 20.3333 19H13.6667ZM12.9091 20.6667C12.9091 20.2483 13.2483 19.9091 13.6667 19.9091H20.3333C20.7517 19.9091 21.0909 20.2483 21.0909 20.6667V27.3333C21.0909 27.7517 20.7517 28.0909 20.3333 28.0909H13.6667C13.2483 28.0909 12.9091 27.7517 12.9091 27.3333V20.6667Z" fill="#77757D"/>
+<text fill="#121212" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="28" y="27.6364">Here is an example of todo list.</tspan></text>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 40.6667C12 39.7462 12.7462 39 13.6667 39H20.3333C21.2538 39 22 39.7462 22 40.6667V47.3333C22 48.2538 21.2538 49 20.3333 49H13.6667C12.7462 49 12 48.2538 12 47.3333V40.6667ZM19.7457 42.5032C19.9232 42.3257 19.9232 42.0379 19.7457 41.8604C19.5681 41.6829 19.2803 41.6829 19.1028 41.8604L16.0909 44.8723L15.2002 43.9816C15.0227 43.8041 14.7349 43.8041 14.5574 43.9816C14.3799 44.1591 14.3799 44.4469 14.5574 44.6244L15.7695 45.8366C15.947 46.0141 16.2348 46.0141 16.4123 45.8366L19.7457 42.5032Z" fill="#1E96EB"/>
+<text fill="#8E8D91" xml:space="preserve" style="white-space: pre" font-family="Inter" font-size="10" letter-spacing="0px"><tspan x="28" y="47.6364">Make a list for building preview.</tspan></text>
+</g>
+</svg>
+`;

package/src/_pkgs/affine-block-database/context/host-context.ts

@@ -0,0 +1,4 @@
+import { createIdentifier } from '../../global/di/index.js';
+import type { EditorHost } from '../../std/index.js';
+
+export const EditorHostKey = createIdentifier<EditorHost>('editor-host');

package/src/_pkgs/affine-block-database/context/index.ts

@@ -0,0 +1 @@
+export * from './host-context';