feat(editor): add created-time and created-by property for database block (#12156)

close: BS-3431

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
  - Added "Created By" property type and cell renderer, displaying creator's avatar and name in database blocks.
  - Introduced "Created Time" property type and cell renderer, showing formatted creation timestamps.

- **Improvements**
  - Enhanced table and Kanban views with improved column and row movement, hiding, and statistics capabilities.
  - Streamlined property and row management with unified object handling and reactive signals for better performance and reliability.
  - Improved avatar display logic to handle removed or unnamed users gracefully.
  - Refactored property and row APIs to consolidate access patterns and support reactive updates.
  - Updated icon retrieval and reactive value access for improved UI responsiveness in database and Kanban cells.
  - Consolidated property and cell access methods to use "get or create" patterns ensuring consistent data availability.
  - Added locking mechanism to stabilize computed signals during locked states.
  - Modularized table and Kanban column and row abstractions for better encapsulation and maintainability.

- **Bug Fixes**
  - Corrected row and column deletion, movement, and selection behaviors across table and Kanban views.
  - Fixed issues with property and row referencing, ensuring consistent handling of identifiers and objects.
  - Removed debugging logs and fixed method calls to align with updated APIs.

- **Style**
  - Updated and simplified table column header styles for a cleaner appearance.

- **Chores**
  - Added `@emotion/css` dependency for styling support.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

blocksuite/affine/blocks/database/src/properties/created-time/cell-renderer.ts

@@ -0,0 +1,55 @@
+import {
+  BaseCellRenderer,
+  createFromBaseCellRenderer,
+  createIcon,
+} from '@blocksuite/data-view';
+import { css } from '@emotion/css';
+import { format } from 'date-fns/format';
+import { html } from 'lit';
+
+import { createdTimePropertyModelConfig } from './define.js';
+const createdTimeCellStyle = css({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: '100%',
+  height: '100%',
+});
+
+const textStyle = css({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: '100%',
+  height: '100%',
+});
+
+export class CreatedTimeCell extends BaseCellRenderer<number, number> {
+  renderContent() {
+    const formattedDate = this.value
+      ? format(this.value, 'yyyy-MM-dd HH:mm:ss')
+      : '';
+    return html`<div class="${textStyle}">${formattedDate}</div>`;
+  }
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.classList.add(createdTimeCellStyle);
+  }
+
+  override beforeEnterEditMode() {
+    return false;
+  }
+
+  override render() {
+    return html`<div class="date-container">${this.renderContent()}</div>`;
+  }
+}
+
+export const createdTimeColumnConfig =
+  createdTimePropertyModelConfig.createPropertyMeta({
+    icon: createIcon('DateTimeIcon'),
+    cellRenderer: {
+      view: createFromBaseCellRenderer(CreatedTimeCell),
+    },
+  });

blocksuite/affine/blocks/database/src/properties/created-time/define.ts

@@ -0,0 +1,35 @@
+import { propertyType, t } from '@blocksuite/data-view';
+import { format } from 'date-fns/format';
+import zod from 'zod';
+
+export const createdTimeColumnType = propertyType('created-time');
+export const createdTimePropertyModelConfig = createdTimeColumnType.modelConfig(
+  {
+    name: 'Created Time',
+    propertyData: {
+      schema: zod.object({}),
+      default: () => ({}),
+    },
+    jsonValue: {
+      schema: zod.number().nullable(),
+      isEmpty: () => false,
+      type: () => t.date.instance(),
+    },
+    rawValue: {
+      schema: zod.number().nullable(),
+      default: () => null,
+      toString: ({ value }) =>
+        value != null ? format(value, 'yyyy-MM-dd HH:mm:ss') : '',
+      fromString: () => {
+        return { value: null };
+      },
+      toJson: ({ value }) => value,
+      fromJson: ({ value }) => value,
+    },
+    fixed: {
+      defaultData: {},
+      defaultShow: false,
+      defaultOrder: 'end',
+    },
+  }
+);

blocksuite/affine/blocks/database/src/properties/index.ts

@@ -1,5 +1,6 @@
 import { propertyPresets } from '@blocksuite/data-view/property-presets';
 
+import { createdTimeColumnConfig } from './created-time/cell-renderer.js';
 import { linkColumnConfig } from './link/cell-renderer.js';
 import { richTextColumnConfig } from './rich-text/cell-renderer.js';
 import { titleColumnConfig } from './title/cell-renderer.js';
@@ -24,4 +25,5 @@ export const databaseBlockProperties = {
   linkColumnConfig,
   richTextColumnConfig,
   titleColumnConfig,
+  createdTimeColumnConfig,
 };

blocksuite/affine/blocks/database/src/properties/rich-text/cell-renderer.ts

@@ -310,7 +310,6 @@ export class RichTextCell extends BaseCellRenderer<Text, string> {
         });
       }
     } else {
-      console.log(text);
       inlineEditor.insertText(inlineRange, text);
       inlineEditor.setInlineRange({
         index: inlineRange.index + text.length,

blocksuite/affine/blocks/database/src/properties/title/text.ts

@@ -271,7 +271,8 @@ export class HeaderAreaTextCell extends BaseCellRenderer<Text, string> {
     const iconColumn = this.view.mainProperties$.value.iconColumn;
     if (!iconColumn) return;
 
-    const icon = this.view.cellValueGet(this.cell.rowId, iconColumn) as string;
+    const icon = this.view.cellGetOrCreate(this.cell.rowId, iconColumn).value$
+      .value;
     if (!icon) return;
     return icon;
   });