@formicoidea/labre-core 0.23.0 → 0.23.2

package/src/_pkgs/affine-block-table/table-cell.ts

@@ -1,866 +1,866 @@
-import {
-  menu,
-  popMenu,
-  type PopupTarget,
-  popupTargetFromElement,
-} from '../affine-components/context-menu/index.js';
-import { TextBackgroundDuotoneIcon } from '../affine-components/icons/index.js';
-import { DefaultInlineManagerExtension } from '../affine-inline-preset/index.js';
-import type { TableColumn, TableRow } from '../affine-model/index.js';
-import { RichText } from '../affine-rich-text/index.js';
-import { cssVarV2 } from '../affine-shared/theme/index.js';
-import { getViewportElement } from '../affine-shared/utils/index.js';
-import { IS_MAC } from '../global/env/index.js';
-import { SignalWatcher, WithDisposable } from '../global/lit/index.js';
-import {
-  ArrowDownBigIcon,
-  ArrowLeftBigIcon,
-  ArrowRightBigIcon,
-  ArrowUpBigIcon,
-  CloseIcon,
-  ColorPickerIcon,
-  CopyIcon,
-  DeleteIcon,
-  DuplicateIcon,
-  InsertAboveIcon,
-  InsertBelowIcon,
-  InsertLeftIcon,
-  InsertRightIcon,
-  PasteIcon,
-} from '@blocksuite/icons/lit';
-import { ShadowlessElement } from '../std/index.js';
-import type { Text } from '../store/index.js';
-import { computed, effect, signal } from '@preact/signals-core';
-import { html, nothing } from 'lit';
-import { property, query } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { ref } from 'lit/directives/ref.js';
-import { styleMap } from 'lit/directives/style-map.js';
-
-import { colorList } from './color';
-import { ColumnMaxWidth, DefaultColumnWidth } from './consts';
-import type { SelectionController } from './selection-controller';
-import {
-  type TableAreaSelection,
-  TableSelectionData,
-} from './selection-schema';
-import type { TableBlockComponent } from './table-block';
-import {
-  cellContainerStyle,
-  columnLeftIndicatorStyle,
-  columnOptionsCellStyle,
-  columnOptionsStyle,
-  columnRightIndicatorStyle,
-  rowBottomIndicatorStyle,
-  rowOptionsCellStyle,
-  rowOptionsStyle,
-  rowTopIndicatorStyle,
-  threePointerIconDotStyle,
-  threePointerIconStyle,
-} from './table-cell-css';
-import type { TableDataManager } from './table-data-manager';
-export const TableCellComponentName = 'affine-table-cell';
-export class TableCell extends SignalWatcher(
-  WithDisposable(ShadowlessElement)
-) {
-  @property({ attribute: false })
-  accessor text: Text | undefined = undefined;
-
-  get readonly() {
-    return this.dataManager.readonly$.value;
-  }
-
-  @property({ attribute: false })
-  accessor dataManager!: TableDataManager;
-
-  @query('rich-text')
-  accessor richText: RichText | null = null;
-
-  @property({ type: Number })
-  accessor rowIndex = 0;
-
-  @property({ type: Number })
-  accessor columnIndex = 0;
-
-  @property({ attribute: false })
-  accessor row: TableRow | undefined = undefined;
-
-  @property({ attribute: false })
-  accessor column: TableColumn | undefined = undefined;
-
-  @property({ attribute: false })
-  accessor selectionController!: SelectionController;
-
-  @property({ attribute: false })
-  accessor height: number | undefined;
-
-  get hoverColumnIndex$() {
-    return this.dataManager.hoverColumnIndex$;
-  }
-  get hoverRowIndex$() {
-    return this.dataManager.hoverRowIndex$;
-  }
-  get inlineManager() {
-    return this.closest<TableBlockComponent>('affine-table')?.std.get(
-      DefaultInlineManagerExtension.identifier
-    );
-  }
-
-  get topContenteditableElement() {
-    return this.closest<TableBlockComponent>('affine-table')
-      ?.topContenteditableElement;
-  }
-
-  openColumnOptions(
-    target: PopupTarget,
-    column: TableColumn,
-    columnIndex: number
-  ) {
-    this.selectionController.setSelected({
-      type: 'column',
-      columnId: column.columnId,
-    });
-    popMenu(target, {
-      options: {
-        onClose: () => {
-          this.selectionController.setSelected(undefined);
-        },
-        items: [
-          menu.group({
-            items: [
-              menu.subMenu({
-                name: 'Background color',
-                prefix: ColorPickerIcon(),
-                options: {
-                  items: [
-                    { name: 'Default', color: undefined },
-                    ...colorList,
-                  ].map(item =>
-                    menu.action({
-                      prefix: html`<div
-                        style="color: ${item.color ??
-                        cssVarV2.layer.background
-                          .primary};display: flex;align-items: center;justify-content: center;"
-                      >
-                        ${TextBackgroundDuotoneIcon}
-                      </div>`,
-                      name: item.name,
-                      isSelected: column.backgroundColor === item.color,
-                      select: () => {
-                        this.dataManager.setColumnBackgroundColor(
-                          column.columnId,
-                          item.color
-                        );
-                      },
-                    })
-                  ),
-                },
-              }),
-              ...(column.backgroundColor
-                ? [
-                    menu.action({
-                      name: 'Clear column style',
-                      prefix: CloseIcon(),
-                      select: () => {
-                        this.dataManager.setColumnBackgroundColor(
-                          column.columnId,
-                          undefined
-                        );
-                      },
-                    }),
-                  ]
-                : []),
-            ],
-          }),
-          menu.group({
-            items: [
-              menu.action({
-                name: 'Insert Left',
-                prefix: InsertLeftIcon(),
-                select: () => {
-                  this.dataManager.insertColumn(
-                    columnIndex > 0 ? columnIndex - 1 : undefined
-                  );
-                },
-              }),
-              menu.action({
-                name: 'Insert Right',
-                prefix: InsertRightIcon(),
-                select: () => {
-                  this.dataManager.insertColumn(columnIndex);
-                },
-              }),
-              menu.action({
-                name: 'Move Left',
-                prefix: ArrowLeftBigIcon(),
-                select: () => {
-                  this.dataManager.moveColumn(columnIndex, columnIndex - 2);
-                },
-              }),
-              menu.action({
-                name: 'Move Right',
-                prefix: ArrowRightBigIcon(),
-                select: () => {
-                  this.dataManager.moveColumn(columnIndex, columnIndex + 1);
-                },
-              }),
-            ],
-          }),
-          menu.group({
-            items: [
-              menu.action({
-                name: 'Duplicate',
-                prefix: DuplicateIcon(),
-                select: () => {
-                  this.dataManager.duplicateColumn(columnIndex);
-                },
-              }),
-
-              menu.action({
-                name: 'Clear column contents',
-                prefix: CloseIcon(),
-                select: () => {
-                  this.dataManager.clearColumn(column.columnId);
-                },
-              }),
-
-              menu.action({
-                name: 'Delete',
-                class: {
-                  'delete-item': true,
-                },
-                prefix: DeleteIcon(),
-                select: () => {
-                  this.dataManager.deleteColumn(column.columnId);
-                },
-              }),
-            ],
-          }),
-        ],
-      },
-    });
-  }
-
-  openRowOptions(target: PopupTarget, row: TableRow, rowIndex: number) {
-    this.selectionController.setSelected({
-      type: 'row',
-      rowId: row.rowId,
-    });
-    popMenu(target, {
-      options: {
-        onClose: () => {
-          this.selectionController.setSelected(undefined);
-        },
-        items: [
-          menu.group({
-            items: [
-              menu.subMenu({
-                name: 'Background color',
-                prefix: ColorPickerIcon(),
-                options: {
-                  items: [
-                    { name: 'Default', color: undefined },
-                    ...colorList,
-                  ].map(item =>
-                    menu.action({
-                      prefix: html`<div
-                        style="color: ${item.color ??
-                        cssVarV2.layer.background
-                          .primary};display: flex;align-items: center;justify-content: center;"
-                      >
-                        ${TextBackgroundDuotoneIcon}
-                      </div>`,
-                      name: item.name,
-                      isSelected: row.backgroundColor === item.color,
-                      select: () => {
-                        this.dataManager.setRowBackgroundColor(
-                          row.rowId,
-                          item.color
-                        );
-                      },
-                    })
-                  ),
-                },
-              }),
-              ...(row.backgroundColor
-                ? [
-                    menu.action({
-                      name: 'Clear row style',
-                      prefix: CloseIcon(),
-                      select: () => {
-                        this.dataManager.setRowBackgroundColor(
-                          row.rowId,
-                          undefined
-                        );
-                      },
-                    }),
-                  ]
-                : []),
-            ],
-          }),
-          menu.group({
-            items: [
-              menu.action({
-                name: 'Insert Above',
-                prefix: InsertAboveIcon(),
-                select: () => {
-                  this.dataManager.insertRow(
-                    rowIndex > 0 ? rowIndex - 1 : undefined
-                  );
-                },
-              }),
-              menu.action({
-                name: 'Insert Below',
-                prefix: InsertBelowIcon(),
-                select: () => {
-                  this.dataManager.insertRow(rowIndex);
-                },
-              }),
-              menu.action({
-                name: 'Move Up',
-                prefix: ArrowUpBigIcon(),
-                select: () => {
-                  this.dataManager.moveRow(rowIndex, rowIndex - 1);
-                },
-              }),
-              menu.action({
-                name: 'Move Down',
-                prefix: ArrowDownBigIcon(),
-                select: () => {
-                  this.dataManager.moveRow(rowIndex, rowIndex + 1);
-                },
-              }),
-            ],
-          }),
-          menu.group({
-            items: [
-              menu.action({
-                name: 'Duplicate',
-                prefix: DuplicateIcon(),
-                select: () => {
-                  this.dataManager.duplicateRow(rowIndex);
-                },
-              }),
-              menu.action({
-                name: 'Clear row contents',
-                prefix: CloseIcon(),
-                select: () => {
-                  this.dataManager.clearRow(row.rowId);
-                },
-              }),
-              menu.action({
-                name: 'Delete',
-                class: {
-                  'delete-item': true,
-                },
-                prefix: DeleteIcon(),
-                select: () => {
-                  this.dataManager.deleteRow(row.rowId);
-                },
-              }),
-            ],
-          }),
-        ],
-      },
-    });
-  }
-
-  createColorPickerMenu(
-    currentColor: string | undefined,
-    select: (color?: string) => void
-  ) {
-    return menu.subMenu({
-      name: 'Background color',
-      prefix: ColorPickerIcon(),
-      options: {
-        items: [{ name: 'Default', color: undefined }, ...colorList].map(item =>
-          menu.action({
-            prefix: html`<div
-              style="color: ${item.color ??
-              cssVarV2.layer.background
-                .primary};display: flex;align-items: center;justify-content: center;"
-            >
-              ${TextBackgroundDuotoneIcon}
-            </div>`,
-            name: item.name,
-            isSelected: currentColor === item.color,
-            select: () => {
-              select(item.color);
-            },
-          })
-        ),
-      },
-    });
-  }
-
-  onContextMenu(e: Event) {
-    e.preventDefault();
-    e.stopPropagation();
-    const selected = this.selectionController.selected$.value;
-    if (!selected) {
-      return;
-    }
-    if (selected.type === 'area' && e.currentTarget instanceof HTMLElement) {
-      const target = popupTargetFromElement(e.currentTarget);
-      popMenu(target, {
-        options: {
-          items: [
-            menu.group({
-              items: [
-                menu.action({
-                  name: 'Copy',
-                  prefix: CopyIcon(),
-                  select: () => {
-                    this.selectionController.doCopyOrCut(selected, false);
-                  },
-                }),
-                menu.action({
-                  name: 'Paste',
-                  prefix: PasteIcon(),
-                  select: () => {
-                    navigator.clipboard.readText().then(text => {
-                      this.selectionController.doPaste(text, selected);
-                    });
-                  },
-                }),
-              ],
-            }),
-            menu.group({
-              items: [
-                menu.action({
-                  name: 'Clear contents',
-                  prefix: CloseIcon(),
-                  select: () => {
-                    this.dataManager.clearCellsBySelection(selected);
-                  },
-                }),
-              ],
-            }),
-          ],
-        },
-      });
-    }
-  }
-
-  renderColumnOptions(column: TableColumn, columnIndex: number) {
-    const openColumnOptions = (e: Event) => {
-      e.stopPropagation();
-      const element = e.currentTarget;
-      if (element instanceof HTMLElement) {
-        this.openColumnOptions(
-          popupTargetFromElement(element),
-          column,
-          columnIndex
-        );
-      }
-    };
-    return html`<div class=${columnOptionsCellStyle}>
-      <div
-        data-testid="drag-column-handle"
-        data-drag-column-id=${column.columnId}
-        class=${classMap({
-          [columnOptionsStyle]: true,
-        })}
-        style=${styleMap({
-          opacity: columnIndex === this.hoverColumnIndex$.value ? 1 : undefined,
-        })}
-        @click=${openColumnOptions}
-      >
-        ${threePointerIcon()}
-      </div>
-    </div>`;
-  }
-
-  renderRowOptions(row: TableRow, rowIndex: number) {
-    const openRowOptions = (e: Event) => {
-      e.stopPropagation();
-      const element = e.currentTarget;
-      if (element instanceof HTMLElement) {
-        this.openRowOptions(popupTargetFromElement(element), row, rowIndex);
-      }
-    };
-    return html`<div class=${rowOptionsCellStyle}>
-      <div
-        data-testid="drag-row-handle"
-        data-drag-row-id=${row.rowId}
-        class=${classMap({
-          [rowOptionsStyle]: true,
-        })}
-        style=${styleMap({
-          opacity: rowIndex === this.hoverRowIndex$.value ? 1 : undefined,
-        })}
-        @click=${openRowOptions}
-      >
-        ${threePointerIcon(true)}
-      </div>
-    </div>`;
-  }
-  renderOptionsButton() {
-    if (this.readonly || !this.row || !this.column) {
-      return nothing;
-    }
-    return html`
-      ${this.rowIndex === 0
-        ? this.renderColumnOptions(this.column, this.columnIndex)
-        : nothing}
-      ${this.columnIndex === 0
-        ? this.renderRowOptions(this.row, this.rowIndex)
-        : nothing}
-    `;
-  }
-
-  tdMouseEnter(rowIndex: number, columnIndex: number) {
-    this.hoverColumnIndex$.value = columnIndex;
-    this.hoverRowIndex$.value = rowIndex;
-  }
-
-  tdMouseLeave() {
-    this.hoverColumnIndex$.value = undefined;
-    this.hoverRowIndex$.value = undefined;
-  }
-
-  virtualWidth$ = computed(() => {
-    const virtualWidth = this.dataManager.virtualWidth$.value;
-    if (!virtualWidth || this.column?.columnId !== virtualWidth.columnId) {
-      return undefined;
-    }
-    return virtualWidth.width;
-  });
-
-  tdStyle() {
-    const columnWidth = this.virtualWidth$.value ?? this.column?.width;
-    const backgroundColor =
-      this.column?.backgroundColor ?? this.row?.backgroundColor ?? undefined;
-    return styleMap({
-      backgroundColor,
-      minWidth: columnWidth ? `${columnWidth}px` : `${DefaultColumnWidth}px`,
-      maxWidth: columnWidth ? `${columnWidth}px` : `${ColumnMaxWidth}px`,
-    });
-  }
-
-  showColumnIndicator$ = computed(() => {
-    const indicatorIndex =
-      this.dataManager.ui.columnIndicatorIndex$.value ?? -1;
-    if (indicatorIndex === 0 && this.columnIndex === 0) {
-      return 'left';
-    }
-    if (indicatorIndex - 1 === this.columnIndex) {
-      return 'right';
-    }
-    return;
-  });
-  showRowIndicator$ = computed(() => {
-    const indicatorIndex = this.dataManager.ui.rowIndicatorIndex$.value ?? -1;
-    if (indicatorIndex === 0 && this.rowIndex === 0) {
-      return 'top';
-    }
-    if (indicatorIndex - 1 === this.rowIndex) {
-      return 'bottom';
-    }
-    return;
-  });
-  renderRowIndicator() {
-    if (this.readonly) {
-      return nothing;
-    }
-    const columnIndex = this.columnIndex;
-    const isFirstColumn = columnIndex === 0;
-    const isLastColumn =
-      columnIndex === this.dataManager.uiColumns$.value.length - 1;
-    const showIndicator = this.showRowIndicator$.value;
-    const style = (show: boolean) =>
-      styleMap({
-        opacity: show ? 1 : 0,
-        borderRadius: isFirstColumn
-          ? '3px 0 0 3px'
-          : isLastColumn
-            ? '0 3px 3px 0'
-            : '0',
-      });
-    const indicator0 =
-      this.rowIndex === 0
-        ? html`
-            <div
-              style=${style(showIndicator === 'top')}
-              class=${rowTopIndicatorStyle}
-            ></div>
-          `
-        : nothing;
-    return html`
-      ${indicator0}
-      <div
-        style=${style(showIndicator === 'bottom')}
-        class=${rowBottomIndicatorStyle}
-      ></div>
-    `;
-  }
-  renderColumnIndicator() {
-    if (this.readonly) {
-      return nothing;
-    }
-    const hoverColumnId$ = this.dataManager.hoverDragHandleColumnId$;
-    const draggingColumnId$ = this.dataManager.widthAdjustColumnId$;
-    const rowIndex = this.rowIndex;
-    const isFirstRow = rowIndex === 0;
-    const isLastRow = rowIndex === this.dataManager.uiRows$.value.length - 1;
-    const showWidthAdjustIndicator =
-      draggingColumnId$.value === this.column?.columnId ||
-      hoverColumnId$.value === this.column?.columnId;
-    const showIndicator = this.showColumnIndicator$.value;
-    const style = (show: boolean) =>
-      styleMap({
-        opacity: show ? 1 : 0,
-        borderRadius: isFirstRow
-          ? '3px 3px 0 0'
-          : isLastRow
-            ? '0 0 3px 3px'
-            : '0',
-      });
-    const indicator0 =
-      this.columnIndex === 0
-        ? html`
-            <div
-              style=${style(showIndicator === 'left')}
-              class=${columnLeftIndicatorStyle}
-            ></div>
-          `
-        : nothing;
-    const mouseEnter = () => {
-      hoverColumnId$.value = this.column?.columnId;
-    };
-    const mouseLeave = () => {
-      hoverColumnId$.value = undefined;
-    };
-    return html` ${indicator0}
-      <div
-        @mouseenter=${mouseEnter}
-        @mouseleave=${mouseLeave}
-        style=${style(showWidthAdjustIndicator || showIndicator === 'right')}
-        data-width-adjust-column-id=${this.column?.columnId}
-        class=${columnRightIndicatorStyle}
-      ></div>`;
-  }
-
-  richText$ = signal<RichText>();
-
-  get inlineEditor() {
-    return this.richText$.value?.inlineEditor;
-  }
-
-  private readonly _handleKeyDown = (e: KeyboardEvent) => {
-    if (e.key !== 'Escape') {
-      if (e.key === 'Tab') {
-        e.preventDefault();
-        return;
-      }
-      e.stopPropagation();
-    }
-  };
-
-  override connectedCallback() {
-    super.connectedCallback();
-    if (this.readonly) {
-      return;
-    }
-    const selectAll = (e: KeyboardEvent) => {
-      if (e.key === 'a' && (IS_MAC ? e.metaKey : e.ctrlKey)) {
-        e.stopPropagation();
-        e.preventDefault();
-        this.inlineEditor?.selectAll();
-      }
-    };
-    this.disposables.addFromEvent(this, 'keydown', selectAll);
-    this.disposables.addFromEvent(this, 'click', (e: MouseEvent) => {
-      e.stopPropagation();
-      requestAnimationFrame(() => {
-        if (!this.inlineEditor?.inlineRange$.value) {
-          this.inlineEditor?.focusEnd();
-        }
-      });
-    });
-  }
-
-  override firstUpdated() {
-    if (this.readonly) {
-      return;
-    }
-    this.richText$.value?.updateComplete
-      .then(() => {
-        const inlineEditor = this.inlineEditor;
-        if (inlineEditor) {
-          this.disposables.add(
-            inlineEditor.slots.keydown.subscribe(this._handleKeyDown)
-          );
-        }
-
-        this.disposables.add(
-          effect(() => {
-            const richText = this.richText$.value;
-            if (!richText) {
-              return;
-            }
-            const inlineEditor = this.inlineEditor;
-            if (!inlineEditor) {
-              return;
-            }
-            const inlineRange = inlineEditor.inlineRange$.value;
-            const targetSelection: TableAreaSelection = {
-              type: 'area',
-              rowStartIndex: this.rowIndex,
-              rowEndIndex: this.rowIndex,
-              columnStartIndex: this.columnIndex,
-              columnEndIndex: this.columnIndex,
-            };
-            const currentSelection = this.selectionController.selected$.peek();
-            if (
-              inlineRange &&
-              !TableSelectionData.equals(targetSelection, currentSelection)
-            ) {
-              this.selectionController.setSelected(targetSelection, false);
-            }
-          })
-        );
-      })
-      .catch(console.error);
-  }
-
-  override render() {
-    if (!this.text) {
-      return html`<td class=${cellContainerStyle} style=${this.tdStyle()}>
-        <div
-          style=${styleMap({
-            padding: '8px 12px',
-          })}
-        >
-          <div style="height:22px"></div>
-        </div>
-      </td>`;
-    }
-    return html`
-      <td
-        data-row-id=${this.row?.rowId}
-        data-column-id=${this.column?.columnId}
-        @mouseenter=${() => {
-          this.tdMouseEnter(this.rowIndex, this.columnIndex);
-        }}
-        @mouseleave=${() => {
-          this.tdMouseLeave();
-        }}
-        @contextmenu=${this.onContextMenu}
-        class=${cellContainerStyle}
-        style=${this.tdStyle()}
-      >
-        <rich-text
-          ${ref(this.richText$)}
-          data-disable-ask-ai
-          data-not-block-text
-          style=${styleMap({
-            minHeight: '22px',
-            padding: '8px 12px',
-          })}
-          .yText="${this.text}"
-          .inlineEventSource="${this.topContenteditableElement ?? nothing}"
-          .attributesSchema="${this.inlineManager?.getSchema()}"
-          .attributeRenderer="${this.inlineManager?.getRenderer()}"
-          .embedChecker="${this.inlineManager?.embedChecker}"
-          .markdownMatches="${this.inlineManager?.markdownMatches}"
-          .readonly="${this.readonly}"
-          .enableClipboard="${true}"
-          .verticalScrollContainerGetter="${() =>
-            this.topContenteditableElement?.host
-              ? getViewportElement(this.topContenteditableElement.host)
-              : null}"
-          data-parent-flavour="affine:table"
-        ></rich-text>
-        ${this.renderOptionsButton()} ${this.renderColumnIndicator()}
-        ${this.renderRowIndicator()}
-      </td>
-    `;
-  }
-}
-
-export const createColumnDragPreview = (cells: TableCell[]) => {
-  const container = document.createElement('div');
-  container.style.position = 'absolute';
-  container.style.opacity = '0.8';
-  container.style.display = 'flex';
-  container.style.flexDirection = 'column';
-  container.style.zIndex = '1000';
-  container.style.boxShadow = '0 0 10px 0 rgba(0, 0, 0, 0.1)';
-  container.style.backgroundColor = cssVarV2.layer.background.primary;
-  cells.forEach((cell, index) => {
-    const div = document.createElement('div');
-    const td = cell.querySelector('td');
-    if (index !== 0) {
-      div.style.borderTop = `1px solid ${cssVarV2.layer.insideBorder.border}`;
-    }
-    if (td) {
-      div.style.height = `${td.getBoundingClientRect().height}px`;
-    }
-    if (cell.text) {
-      const text = new RichText();
-      text.style.padding = '8px 12px';
-      text.yText = cell.text;
-      text.readonly = true;
-      text.attributesSchema = cell.inlineManager?.getSchema();
-      text.attributeRenderer = cell.inlineManager?.getRenderer();
-      text.embedChecker = cell.inlineManager?.embedChecker ?? (() => false);
-      div.append(text);
-    }
-    container.append(div);
-  });
-  return container;
-};
-
-export const createRowDragPreview = (cells: TableCell[]) => {
-  const container = document.createElement('div');
-  container.style.position = 'absolute';
-  container.style.opacity = '0.8';
-  container.style.display = 'flex';
-  container.style.flexDirection = 'row';
-  container.style.zIndex = '1000';
-  container.style.boxShadow = '0 0 10px 0 rgba(0, 0, 0, 0.1)';
-  container.style.backgroundColor = cssVarV2.layer.background.primary;
-  cells.forEach((cell, index) => {
-    const div = document.createElement('div');
-    const td = cell.querySelector('td');
-    if (index !== 0) {
-      div.style.borderLeft = `1px solid ${cssVarV2.layer.insideBorder.border}`;
-    }
-    if (td) {
-      div.style.width = `${td.getBoundingClientRect().width}px`;
-    }
-    if (cell.text) {
-      const text = new RichText();
-      text.style.padding = '8px 12px';
-      text.yText = cell.text;
-      text.readonly = true;
-      text.attributesSchema = cell.inlineManager?.getSchema();
-      text.attributeRenderer = cell.inlineManager?.getRenderer();
-      text.embedChecker = cell.inlineManager?.embedChecker ?? (() => false);
-      div.append(text);
-    }
-    container.append(div);
-  });
-  return container;
-};
-
-const threePointerIcon = (vertical: boolean = false) => {
-  return html`
-    <div
-      class=${threePointerIconStyle}
-      style=${styleMap({
-        transform: vertical ? 'rotate(90deg)' : undefined,
-      })}
-    >
-      <div class=${threePointerIconDotStyle}></div>
-      <div class=${threePointerIconDotStyle}></div>
-      <div class=${threePointerIconDotStyle}></div>
-    </div>
-  `;
-};
-declare global {
-  interface HTMLElementTagNameMap {
-    [TableCellComponentName]: TableCell;
-  }
-}
+import {
+  menu,
+  popMenu,
+  type PopupTarget,
+  popupTargetFromElement,
+} from '../affine-components/context-menu/index.js';
+import { TextBackgroundDuotoneIcon } from '../affine-components/icons/index.js';
+import { DefaultInlineManagerExtension } from '../affine-inline-preset/index.js';
+import type { TableColumn, TableRow } from '../affine-model/index.js';
+import { RichText } from '../affine-rich-text/index.js';
+import { cssVarV2 } from '../affine-shared/theme/index.js';
+import { getViewportElement } from '../affine-shared/utils/index.js';
+import { IS_MAC } from '../global/env/index.js';
+import { SignalWatcher, WithDisposable } from '../global/lit/index.js';
+import {
+  ArrowDownBigIcon,
+  ArrowLeftBigIcon,
+  ArrowRightBigIcon,
+  ArrowUpBigIcon,
+  CloseIcon,
+  ColorPickerIcon,
+  CopyIcon,
+  DeleteIcon,
+  DuplicateIcon,
+  InsertAboveIcon,
+  InsertBelowIcon,
+  InsertLeftIcon,
+  InsertRightIcon,
+  PasteIcon,
+} from '@blocksuite/icons/lit';
+import { ShadowlessElement } from '../std/index.js';
+import type { Text } from '../store/index.js';
+import { computed, effect, signal } from '@preact/signals-core';
+import { html, nothing } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { ref } from 'lit/directives/ref.js';
+import { styleMap } from 'lit/directives/style-map.js';
+
+import { colorList } from './color';
+import { ColumnMaxWidth, DefaultColumnWidth } from './consts';
+import type { SelectionController } from './selection-controller';
+import {
+  type TableAreaSelection,
+  TableSelectionData,
+} from './selection-schema';
+import type { TableBlockComponent } from './table-block';
+import {
+  cellContainerStyle,
+  columnLeftIndicatorStyle,
+  columnOptionsCellStyle,
+  columnOptionsStyle,
+  columnRightIndicatorStyle,
+  rowBottomIndicatorStyle,
+  rowOptionsCellStyle,
+  rowOptionsStyle,
+  rowTopIndicatorStyle,
+  threePointerIconDotStyle,
+  threePointerIconStyle,
+} from './table-cell-css';
+import type { TableDataManager } from './table-data-manager';
+export const TableCellComponentName = 'affine-table-cell';
+export class TableCell extends SignalWatcher(
+  WithDisposable(ShadowlessElement)
+) {
+  @property({ attribute: false })
+  accessor text: Text | undefined = undefined;
+
+  get readonly() {
+    return this.dataManager.readonly$.value;
+  }
+
+  @property({ attribute: false })
+  accessor dataManager!: TableDataManager;
+
+  @query('rich-text')
+  accessor richText: RichText | null = null;
+
+  @property({ type: Number })
+  accessor rowIndex = 0;
+
+  @property({ type: Number })
+  accessor columnIndex = 0;
+
+  @property({ attribute: false })
+  accessor row: TableRow | undefined = undefined;
+
+  @property({ attribute: false })
+  accessor column: TableColumn | undefined = undefined;
+
+  @property({ attribute: false })
+  accessor selectionController!: SelectionController;
+
+  @property({ attribute: false })
+  accessor height: number | undefined;
+
+  get hoverColumnIndex$() {
+    return this.dataManager.hoverColumnIndex$;
+  }
+  get hoverRowIndex$() {
+    return this.dataManager.hoverRowIndex$;
+  }
+  get inlineManager() {
+    return this.closest<TableBlockComponent>('affine-table')?.std.get(
+      DefaultInlineManagerExtension.identifier
+    );
+  }
+
+  get topContenteditableElement() {
+    return this.closest<TableBlockComponent>('affine-table')
+      ?.topContenteditableElement;
+  }
+
+  openColumnOptions(
+    target: PopupTarget,
+    column: TableColumn,
+    columnIndex: number
+  ) {
+    this.selectionController.setSelected({
+      type: 'column',
+      columnId: column.columnId,
+    });
+    popMenu(target, {
+      options: {
+        onClose: () => {
+          this.selectionController.setSelected(undefined);
+        },
+        items: [
+          menu.group({
+            items: [
+              menu.subMenu({
+                name: 'Background color',
+                prefix: ColorPickerIcon(),
+                options: {
+                  items: [
+                    { name: 'Default', color: undefined },
+                    ...colorList,
+                  ].map(item =>
+                    menu.action({
+                      prefix: html`<div
+                        style="color: ${item.color ??
+                        cssVarV2.layer.background
+                          .primary};display: flex;align-items: center;justify-content: center;"
+                      >
+                        ${TextBackgroundDuotoneIcon}
+                      </div>`,
+                      name: item.name,
+                      isSelected: column.backgroundColor === item.color,
+                      select: () => {
+                        this.dataManager.setColumnBackgroundColor(
+                          column.columnId,
+                          item.color
+                        );
+                      },
+                    })
+                  ),
+                },
+              }),
+              ...(column.backgroundColor
+                ? [
+                    menu.action({
+                      name: 'Clear column style',
+                      prefix: CloseIcon(),
+                      select: () => {
+                        this.dataManager.setColumnBackgroundColor(
+                          column.columnId,
+                          undefined
+                        );
+                      },
+                    }),
+                  ]
+                : []),
+            ],
+          }),
+          menu.group({
+            items: [
+              menu.action({
+                name: 'Insert Left',
+                prefix: InsertLeftIcon(),
+                select: () => {
+                  this.dataManager.insertColumn(
+                    columnIndex > 0 ? columnIndex - 1 : undefined
+                  );
+                },
+              }),
+              menu.action({
+                name: 'Insert Right',
+                prefix: InsertRightIcon(),
+                select: () => {
+                  this.dataManager.insertColumn(columnIndex);
+                },
+              }),
+              menu.action({
+                name: 'Move Left',
+                prefix: ArrowLeftBigIcon(),
+                select: () => {
+                  this.dataManager.moveColumn(columnIndex, columnIndex - 2);
+                },
+              }),
+              menu.action({
+                name: 'Move Right',
+                prefix: ArrowRightBigIcon(),
+                select: () => {
+                  this.dataManager.moveColumn(columnIndex, columnIndex + 1);
+                },
+              }),
+            ],
+          }),
+          menu.group({
+            items: [
+              menu.action({
+                name: 'Duplicate',
+                prefix: DuplicateIcon(),
+                select: () => {
+                  this.dataManager.duplicateColumn(columnIndex);
+                },
+              }),
+
+              menu.action({
+                name: 'Clear column contents',
+                prefix: CloseIcon(),
+                select: () => {
+                  this.dataManager.clearColumn(column.columnId);
+                },
+              }),
+
+              menu.action({
+                name: 'Delete',
+                class: {
+                  'delete-item': true,
+                },
+                prefix: DeleteIcon(),
+                select: () => {
+                  this.dataManager.deleteColumn(column.columnId);
+                },
+              }),
+            ],
+          }),
+        ],
+      },
+    });
+  }
+
+  openRowOptions(target: PopupTarget, row: TableRow, rowIndex: number) {
+    this.selectionController.setSelected({
+      type: 'row',
+      rowId: row.rowId,
+    });
+    popMenu(target, {
+      options: {
+        onClose: () => {
+          this.selectionController.setSelected(undefined);
+        },
+        items: [
+          menu.group({
+            items: [
+              menu.subMenu({
+                name: 'Background color',
+                prefix: ColorPickerIcon(),
+                options: {
+                  items: [
+                    { name: 'Default', color: undefined },
+                    ...colorList,
+                  ].map(item =>
+                    menu.action({
+                      prefix: html`<div
+                        style="color: ${item.color ??
+                        cssVarV2.layer.background
+                          .primary};display: flex;align-items: center;justify-content: center;"
+                      >
+                        ${TextBackgroundDuotoneIcon}
+                      </div>`,
+                      name: item.name,
+                      isSelected: row.backgroundColor === item.color,
+                      select: () => {
+                        this.dataManager.setRowBackgroundColor(
+                          row.rowId,
+                          item.color
+                        );
+                      },
+                    })
+                  ),
+                },
+              }),
+              ...(row.backgroundColor
+                ? [
+                    menu.action({
+                      name: 'Clear row style',
+                      prefix: CloseIcon(),
+                      select: () => {
+                        this.dataManager.setRowBackgroundColor(
+                          row.rowId,
+                          undefined
+                        );
+                      },
+                    }),
+                  ]
+                : []),
+            ],
+          }),
+          menu.group({
+            items: [
+              menu.action({
+                name: 'Insert Above',
+                prefix: InsertAboveIcon(),
+                select: () => {
+                  this.dataManager.insertRow(
+                    rowIndex > 0 ? rowIndex - 1 : undefined
+                  );
+                },
+              }),
+              menu.action({
+                name: 'Insert Below',
+                prefix: InsertBelowIcon(),
+                select: () => {
+                  this.dataManager.insertRow(rowIndex);
+                },
+              }),
+              menu.action({
+                name: 'Move Up',
+                prefix: ArrowUpBigIcon(),
+                select: () => {
+                  this.dataManager.moveRow(rowIndex, rowIndex - 1);
+                },
+              }),
+              menu.action({
+                name: 'Move Down',
+                prefix: ArrowDownBigIcon(),
+                select: () => {
+                  this.dataManager.moveRow(rowIndex, rowIndex + 1);
+                },
+              }),
+            ],
+          }),
+          menu.group({
+            items: [
+              menu.action({
+                name: 'Duplicate',
+                prefix: DuplicateIcon(),
+                select: () => {
+                  this.dataManager.duplicateRow(rowIndex);
+                },
+              }),
+              menu.action({
+                name: 'Clear row contents',
+                prefix: CloseIcon(),
+                select: () => {
+                  this.dataManager.clearRow(row.rowId);
+                },
+              }),
+              menu.action({
+                name: 'Delete',
+                class: {
+                  'delete-item': true,
+                },
+                prefix: DeleteIcon(),
+                select: () => {
+                  this.dataManager.deleteRow(row.rowId);
+                },
+              }),
+            ],
+          }),
+        ],
+      },
+    });
+  }
+
+  createColorPickerMenu(
+    currentColor: string | undefined,
+    select: (color?: string) => void
+  ) {
+    return menu.subMenu({
+      name: 'Background color',
+      prefix: ColorPickerIcon(),
+      options: {
+        items: [{ name: 'Default', color: undefined }, ...colorList].map(item =>
+          menu.action({
+            prefix: html`<div
+              style="color: ${item.color ??
+              cssVarV2.layer.background
+                .primary};display: flex;align-items: center;justify-content: center;"
+            >
+              ${TextBackgroundDuotoneIcon}
+            </div>`,
+            name: item.name,
+            isSelected: currentColor === item.color,
+            select: () => {
+              select(item.color);
+            },
+          })
+        ),
+      },
+    });
+  }
+
+  onContextMenu(e: Event) {
+    e.preventDefault();
+    e.stopPropagation();
+    const selected = this.selectionController.selected$.value;
+    if (!selected) {
+      return;
+    }
+    if (selected.type === 'area' && e.currentTarget instanceof HTMLElement) {
+      const target = popupTargetFromElement(e.currentTarget);
+      popMenu(target, {
+        options: {
+          items: [
+            menu.group({
+              items: [
+                menu.action({
+                  name: 'Copy',
+                  prefix: CopyIcon(),
+                  select: () => {
+                    this.selectionController.doCopyOrCut(selected, false);
+                  },
+                }),
+                menu.action({
+                  name: 'Paste',
+                  prefix: PasteIcon(),
+                  select: () => {
+                    navigator.clipboard.readText().then(text => {
+                      this.selectionController.doPaste(text, selected);
+                    });
+                  },
+                }),
+              ],
+            }),
+            menu.group({
+              items: [
+                menu.action({
+                  name: 'Clear contents',
+                  prefix: CloseIcon(),
+                  select: () => {
+                    this.dataManager.clearCellsBySelection(selected);
+                  },
+                }),
+              ],
+            }),
+          ],
+        },
+      });
+    }
+  }
+
+  renderColumnOptions(column: TableColumn, columnIndex: number) {
+    const openColumnOptions = (e: Event) => {
+      e.stopPropagation();
+      const element = e.currentTarget;
+      if (element instanceof HTMLElement) {
+        this.openColumnOptions(
+          popupTargetFromElement(element),
+          column,
+          columnIndex
+        );
+      }
+    };
+    return html`<div class=${columnOptionsCellStyle}>
+      <div
+        data-testid="drag-column-handle"
+        data-drag-column-id=${column.columnId}
+        class=${classMap({
+          [columnOptionsStyle]: true,
+        })}
+        style=${styleMap({
+          opacity: columnIndex === this.hoverColumnIndex$.value ? 1 : undefined,
+        })}
+        @click=${openColumnOptions}
+      >
+        ${threePointerIcon()}
+      </div>
+    </div>`;
+  }
+
+  renderRowOptions(row: TableRow, rowIndex: number) {
+    const openRowOptions = (e: Event) => {
+      e.stopPropagation();
+      const element = e.currentTarget;
+      if (element instanceof HTMLElement) {
+        this.openRowOptions(popupTargetFromElement(element), row, rowIndex);
+      }
+    };
+    return html`<div class=${rowOptionsCellStyle}>
+      <div
+        data-testid="drag-row-handle"
+        data-drag-row-id=${row.rowId}
+        class=${classMap({
+          [rowOptionsStyle]: true,
+        })}
+        style=${styleMap({
+          opacity: rowIndex === this.hoverRowIndex$.value ? 1 : undefined,
+        })}
+        @click=${openRowOptions}
+      >
+        ${threePointerIcon(true)}
+      </div>
+    </div>`;
+  }
+  renderOptionsButton() {
+    if (this.readonly || !this.row || !this.column) {
+      return nothing;
+    }
+    return html`
+      ${this.rowIndex === 0
+        ? this.renderColumnOptions(this.column, this.columnIndex)
+        : nothing}
+      ${this.columnIndex === 0
+        ? this.renderRowOptions(this.row, this.rowIndex)
+        : nothing}
+    `;
+  }
+
+  tdMouseEnter(rowIndex: number, columnIndex: number) {
+    this.hoverColumnIndex$.value = columnIndex;
+    this.hoverRowIndex$.value = rowIndex;
+  }
+
+  tdMouseLeave() {
+    this.hoverColumnIndex$.value = undefined;
+    this.hoverRowIndex$.value = undefined;
+  }
+
+  virtualWidth$ = computed(() => {
+    const virtualWidth = this.dataManager.virtualWidth$.value;
+    if (!virtualWidth || this.column?.columnId !== virtualWidth.columnId) {
+      return undefined;
+    }
+    return virtualWidth.width;
+  });
+
+  tdStyle() {
+    const columnWidth = this.virtualWidth$.value ?? this.column?.width;
+    const backgroundColor =
+      this.column?.backgroundColor ?? this.row?.backgroundColor ?? undefined;
+    return styleMap({
+      backgroundColor,
+      minWidth: columnWidth ? `${columnWidth}px` : `${DefaultColumnWidth}px`,
+      maxWidth: columnWidth ? `${columnWidth}px` : `${ColumnMaxWidth}px`,
+    });
+  }
+
+  showColumnIndicator$ = computed(() => {
+    const indicatorIndex =
+      this.dataManager.ui.columnIndicatorIndex$.value ?? -1;
+    if (indicatorIndex === 0 && this.columnIndex === 0) {
+      return 'left';
+    }
+    if (indicatorIndex - 1 === this.columnIndex) {
+      return 'right';
+    }
+    return;
+  });
+  showRowIndicator$ = computed(() => {
+    const indicatorIndex = this.dataManager.ui.rowIndicatorIndex$.value ?? -1;
+    if (indicatorIndex === 0 && this.rowIndex === 0) {
+      return 'top';
+    }
+    if (indicatorIndex - 1 === this.rowIndex) {
+      return 'bottom';
+    }
+    return;
+  });
+  renderRowIndicator() {
+    if (this.readonly) {
+      return nothing;
+    }
+    const columnIndex = this.columnIndex;
+    const isFirstColumn = columnIndex === 0;
+    const isLastColumn =
+      columnIndex === this.dataManager.uiColumns$.value.length - 1;
+    const showIndicator = this.showRowIndicator$.value;
+    const style = (show: boolean) =>
+      styleMap({
+        opacity: show ? 1 : 0,
+        borderRadius: isFirstColumn
+          ? '3px 0 0 3px'
+          : isLastColumn
+            ? '0 3px 3px 0'
+            : '0',
+      });
+    const indicator0 =
+      this.rowIndex === 0
+        ? html`
+            <div
+              style=${style(showIndicator === 'top')}
+              class=${rowTopIndicatorStyle}
+            ></div>
+          `
+        : nothing;
+    return html`
+      ${indicator0}
+      <div
+        style=${style(showIndicator === 'bottom')}
+        class=${rowBottomIndicatorStyle}
+      ></div>
+    `;
+  }
+  renderColumnIndicator() {
+    if (this.readonly) {
+      return nothing;
+    }
+    const hoverColumnId$ = this.dataManager.hoverDragHandleColumnId$;
+    const draggingColumnId$ = this.dataManager.widthAdjustColumnId$;
+    const rowIndex = this.rowIndex;
+    const isFirstRow = rowIndex === 0;
+    const isLastRow = rowIndex === this.dataManager.uiRows$.value.length - 1;
+    const showWidthAdjustIndicator =
+      draggingColumnId$.value === this.column?.columnId ||
+      hoverColumnId$.value === this.column?.columnId;
+    const showIndicator = this.showColumnIndicator$.value;
+    const style = (show: boolean) =>
+      styleMap({
+        opacity: show ? 1 : 0,
+        borderRadius: isFirstRow
+          ? '3px 3px 0 0'
+          : isLastRow
+            ? '0 0 3px 3px'
+            : '0',
+      });
+    const indicator0 =
+      this.columnIndex === 0
+        ? html`
+            <div
+              style=${style(showIndicator === 'left')}
+              class=${columnLeftIndicatorStyle}
+            ></div>
+          `
+        : nothing;
+    const mouseEnter = () => {
+      hoverColumnId$.value = this.column?.columnId;
+    };
+    const mouseLeave = () => {
+      hoverColumnId$.value = undefined;
+    };
+    return html` ${indicator0}
+      <div
+        @mouseenter=${mouseEnter}
+        @mouseleave=${mouseLeave}
+        style=${style(showWidthAdjustIndicator || showIndicator === 'right')}
+        data-width-adjust-column-id=${this.column?.columnId}
+        class=${columnRightIndicatorStyle}
+      ></div>`;
+  }
+
+  richText$ = signal<RichText>();
+
+  get inlineEditor() {
+    return this.richText$.value?.inlineEditor;
+  }
+
+  private readonly _handleKeyDown = (e: KeyboardEvent) => {
+    if (e.key !== 'Escape') {
+      if (e.key === 'Tab') {
+        e.preventDefault();
+        return;
+      }
+      e.stopPropagation();
+    }
+  };
+
+  override connectedCallback() {
+    super.connectedCallback();
+    if (this.readonly) {
+      return;
+    }
+    const selectAll = (e: KeyboardEvent) => {
+      if (e.key === 'a' && (IS_MAC ? e.metaKey : e.ctrlKey)) {
+        e.stopPropagation();
+        e.preventDefault();
+        this.inlineEditor?.selectAll();
+      }
+    };
+    this.disposables.addFromEvent(this, 'keydown', selectAll);
+    this.disposables.addFromEvent(this, 'click', (e: MouseEvent) => {
+      e.stopPropagation();
+      requestAnimationFrame(() => {
+        if (!this.inlineEditor?.inlineRange$.value) {
+          this.inlineEditor?.focusEnd();
+        }
+      });
+    });
+  }
+
+  override firstUpdated() {
+    if (this.readonly) {
+      return;
+    }
+    this.richText$.value?.updateComplete
+      .then(() => {
+        const inlineEditor = this.inlineEditor;
+        if (inlineEditor) {
+          this.disposables.add(
+            inlineEditor.slots.keydown.subscribe(this._handleKeyDown)
+          );
+        }
+
+        this.disposables.add(
+          effect(() => {
+            const richText = this.richText$.value;
+            if (!richText) {
+              return;
+            }
+            const inlineEditor = this.inlineEditor;
+            if (!inlineEditor) {
+              return;
+            }
+            const inlineRange = inlineEditor.inlineRange$.value;
+            const targetSelection: TableAreaSelection = {
+              type: 'area',
+              rowStartIndex: this.rowIndex,
+              rowEndIndex: this.rowIndex,
+              columnStartIndex: this.columnIndex,
+              columnEndIndex: this.columnIndex,
+            };
+            const currentSelection = this.selectionController.selected$.peek();
+            if (
+              inlineRange &&
+              !TableSelectionData.equals(targetSelection, currentSelection)
+            ) {
+              this.selectionController.setSelected(targetSelection, false);
+            }
+          })
+        );
+      })
+      .catch(console.error);
+  }
+
+  override render() {
+    if (!this.text) {
+      return html`<td class=${cellContainerStyle} style=${this.tdStyle()}>
+        <div
+          style=${styleMap({
+            padding: '8px 12px',
+          })}
+        >
+          <div style="height:22px"></div>
+        </div>
+      </td>`;
+    }
+    return html`
+      <td
+        data-row-id=${this.row?.rowId}
+        data-column-id=${this.column?.columnId}
+        @mouseenter=${() => {
+          this.tdMouseEnter(this.rowIndex, this.columnIndex);
+        }}
+        @mouseleave=${() => {
+          this.tdMouseLeave();
+        }}
+        @contextmenu=${this.onContextMenu}
+        class=${cellContainerStyle}
+        style=${this.tdStyle()}
+      >
+        <rich-text
+          ${ref(this.richText$)}
+          data-disable-ask-ai
+          data-not-block-text
+          style=${styleMap({
+            minHeight: '22px',
+            padding: '8px 12px',
+          })}
+          .yText="${this.text}"
+          .inlineEventSource="${this.topContenteditableElement ?? nothing}"
+          .attributesSchema="${this.inlineManager?.getSchema()}"
+          .attributeRenderer="${this.inlineManager?.getRenderer()}"
+          .embedChecker="${this.inlineManager?.embedChecker}"
+          .markdownMatches="${this.inlineManager?.markdownMatches}"
+          .readonly="${this.readonly}"
+          .enableClipboard="${true}"
+          .verticalScrollContainerGetter="${() =>
+            this.topContenteditableElement?.host
+              ? getViewportElement(this.topContenteditableElement.host)
+              : null}"
+          data-parent-flavour="affine:table"
+        ></rich-text>
+        ${this.renderOptionsButton()} ${this.renderColumnIndicator()}
+        ${this.renderRowIndicator()}
+      </td>
+    `;
+  }
+}
+
+export const createColumnDragPreview = (cells: TableCell[]) => {
+  const container = document.createElement('div');
+  container.style.position = 'absolute';
+  container.style.opacity = '0.8';
+  container.style.display = 'flex';
+  container.style.flexDirection = 'column';
+  container.style.zIndex = '1000';
+  container.style.boxShadow = '0 0 10px 0 rgba(0, 0, 0, 0.1)';
+  container.style.backgroundColor = cssVarV2.layer.background.primary;
+  cells.forEach((cell, index) => {
+    const div = document.createElement('div');
+    const td = cell.querySelector('td');
+    if (index !== 0) {
+      div.style.borderTop = `1px solid ${cssVarV2.layer.insideBorder.border}`;
+    }
+    if (td) {
+      div.style.height = `${td.getBoundingClientRect().height}px`;
+    }
+    if (cell.text) {
+      const text = new RichText();
+      text.style.padding = '8px 12px';
+      text.yText = cell.text;
+      text.readonly = true;
+      text.attributesSchema = cell.inlineManager?.getSchema();
+      text.attributeRenderer = cell.inlineManager?.getRenderer();
+      text.embedChecker = cell.inlineManager?.embedChecker ?? (() => false);
+      div.append(text);
+    }
+    container.append(div);
+  });
+  return container;
+};
+
+export const createRowDragPreview = (cells: TableCell[]) => {
+  const container = document.createElement('div');
+  container.style.position = 'absolute';
+  container.style.opacity = '0.8';
+  container.style.display = 'flex';
+  container.style.flexDirection = 'row';
+  container.style.zIndex = '1000';
+  container.style.boxShadow = '0 0 10px 0 rgba(0, 0, 0, 0.1)';
+  container.style.backgroundColor = cssVarV2.layer.background.primary;
+  cells.forEach((cell, index) => {
+    const div = document.createElement('div');
+    const td = cell.querySelector('td');
+    if (index !== 0) {
+      div.style.borderLeft = `1px solid ${cssVarV2.layer.insideBorder.border}`;
+    }
+    if (td) {
+      div.style.width = `${td.getBoundingClientRect().width}px`;
+    }
+    if (cell.text) {
+      const text = new RichText();
+      text.style.padding = '8px 12px';
+      text.yText = cell.text;
+      text.readonly = true;
+      text.attributesSchema = cell.inlineManager?.getSchema();
+      text.attributeRenderer = cell.inlineManager?.getRenderer();
+      text.embedChecker = cell.inlineManager?.embedChecker ?? (() => false);
+      div.append(text);
+    }
+    container.append(div);
+  });
+  return container;
+};
+
+const threePointerIcon = (vertical: boolean = false) => {
+  return html`
+    <div
+      class=${threePointerIconStyle}
+      style=${styleMap({
+        transform: vertical ? 'rotate(90deg)' : undefined,
+      })}
+    >
+      <div class=${threePointerIconDotStyle}></div>
+      <div class=${threePointerIconDotStyle}></div>
+      <div class=${threePointerIconDotStyle}></div>
+    </div>
+  `;
+};
+declare global {
+  interface HTMLElementTagNameMap {
+    [TableCellComponentName]: TableCell;
+  }
+}