refactor(editor): unify directories naming (#11516)

**Directory Structure Changes**

- Renamed multiple block-related directories by removing the "block-" prefix:
  - `block-attachment` → `attachment`
  - `block-bookmark` → `bookmark`
  - `block-callout` → `callout`
  - `block-code` → `code`
  - `block-data-view` → `data-view`
  - `block-database` → `database`
  - `block-divider` → `divider`
  - `block-edgeless-text` → `edgeless-text`
  - `block-embed` → `embed`

blocksuite/affine/blocks/database/src/properties/link/cell-renderer.css.ts

@@ -0,0 +1,99 @@
+import { cssVarV2 } from '@blocksuite/affine-shared/theme';
+import { baseTheme } from '@toeverything/theme';
+import { style } from '@vanilla-extract/css';
+
+export const linkCellStyle = style({
+  width: '100%',
+  height: '100%',
+  userSelect: 'none',
+  position: 'relative',
+});
+
+export const linkContainerStyle = style({
+  display: 'flex',
+  position: 'relative',
+  alignItems: 'center',
+  width: '100%',
+  height: '100%',
+  outline: 'none',
+  overflow: 'hidden',
+  fontSize: 'var(--data-view-cell-text-size)',
+  lineHeight: 'var(--data-view-cell-text-line-height)',
+  wordBreak: 'break-all',
+});
+export const linkIconContainerStyle = style({
+  position: 'absolute',
+  right: '8px',
+  top: '8px',
+  display: 'flex',
+  alignItems: 'center',
+  visibility: 'hidden',
+  backgroundColor: cssVarV2.layer.background.primary,
+  boxShadow: 'var(--affine-button-shadow)',
+  borderRadius: '4px',
+  overflow: 'hidden',
+  zIndex: 1,
+});
+export const linkIconStyle = style({
+  width: '100%',
+  height: '100%',
+  display: 'flex',
+  alignItems: 'center',
+  cursor: 'pointer',
+  color: cssVarV2.icon.primary,
+  fontSize: '14px',
+  padding: '2px',
+  ':hover': {
+    backgroundColor: cssVarV2.layer.background.hoverOverlay,
+  },
+});
+
+export const showLinkIconStyle = style({
+  selectors: {
+    [`${linkCellStyle}:hover &`]: {
+      visibility: 'visible',
+    },
+  },
+});
+
+export const linkedDocStyle = style({
+  textDecoration: 'underline',
+  textDecorationColor: 'var(--affine-divider-color)',
+  transition: 'text-decoration-color 0.2s ease-out',
+  cursor: 'pointer',
+  ':hover': {
+    textDecorationColor: 'var(--affine-icon-color)',
+  },
+});
+
+export const linkEditingStyle = style({
+  display: 'flex',
+  alignItems: 'center',
+  width: '100%',
+  padding: '0',
+  border: 'none',
+  fontFamily: baseTheme.fontSansFamily,
+  color: 'var(--affine-text-primary-color)',
+  fontWeight: '400',
+  backgroundColor: 'transparent',
+  fontSize: 'var(--data-view-cell-text-size)',
+  lineHeight: 'var(--data-view-cell-text-line-height)',
+  wordBreak: 'break-all',
+  ':focus': {
+    outline: 'none',
+  },
+});
+
+export const inlineLinkNodeStyle = style({
+  wordBreak: 'break-all',
+  color: 'var(--affine-link-color)',
+  fill: 'var(--affine-link-color)',
+  cursor: 'pointer',
+  fontWeight: 'normal',
+  fontStyle: 'normal',
+  textDecoration: 'none',
+});
+
+export const normalTextStyle = style({
+  wordBreak: 'break-all',
+});

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

@@ -0,0 +1,186 @@
+import { RefNodeSlotsProvider } from '@blocksuite/affine-inline-reference';
+import { ParseDocUrlProvider } from '@blocksuite/affine-shared/services';
+import {
+  isValidUrl,
+  normalizeUrl,
+  stopPropagation,
+} from '@blocksuite/affine-shared/utils';
+import {
+  BaseCellRenderer,
+  createFromBaseCellRenderer,
+  createIcon,
+} from '@blocksuite/data-view';
+import { EditIcon } from '@blocksuite/icons/lit';
+import { computed } from '@preact/signals-core';
+import { html, nothing, type PropertyValues } from 'lit';
+import { createRef, ref } from 'lit/directives/ref.js';
+
+import { HostContextKey } from '../../context/host-context.js';
+import {
+  inlineLinkNodeStyle,
+  linkCellStyle,
+  linkContainerStyle,
+  linkedDocStyle,
+  linkEditingStyle,
+  linkIconContainerStyle,
+  linkIconStyle,
+  normalTextStyle,
+  showLinkIconStyle,
+} from './cell-renderer.css.js';
+import { linkPropertyModelConfig } from './define.js';
+
+export class LinkCell extends BaseCellRenderer<string, string> {
+  protected override firstUpdated(_changedProperties: PropertyValues) {
+    super.firstUpdated(_changedProperties);
+    this.classList.add(linkCellStyle);
+  }
+
+  private readonly _onEdit = (e: Event) => {
+    e.stopPropagation();
+    this.selectCurrentCell(true);
+    this.selectCurrentCell(true);
+  };
+
+  private readonly _focusEnd = () => {
+    const ele = this._container.value;
+    if (!ele) {
+      return;
+    }
+    const end = ele?.value.length;
+    ele?.focus();
+    ele?.setSelectionRange(end, end);
+  };
+
+  private readonly _onKeydown = (e: KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.isComposing) {
+      this.selectCurrentCell(false);
+    }
+  };
+
+  private readonly _setValue = (
+    value: string = this._container.value?.value ?? ''
+  ) => {
+    let url = value;
+    if (isValidUrl(value)) {
+      url = normalizeUrl(value);
+    }
+
+    this.valueSetNextTick(url);
+    if (this._container.value) {
+      this._container.value.value = url;
+    }
+  };
+
+  openDoc = (e: MouseEvent) => {
+    e.stopPropagation();
+    if (!this.docId$.value) {
+      return;
+    }
+    const std = this.std;
+    if (!std) {
+      return;
+    }
+
+    std.getOptional(RefNodeSlotsProvider)?.docLinkClicked.next({
+      pageId: this.docId$.value,
+      host: std.host,
+    });
+  };
+
+  get std() {
+    const host = this.view.contextGet(HostContextKey);
+    return host?.std;
+  }
+
+  docId$ = computed(() => {
+    if (!this.value || !isValidUrl(this.value)) {
+      return;
+    }
+    return this.parseDocUrl(this.value)?.docId;
+  });
+
+  private readonly _container = createRef<HTMLInputElement>();
+
+  override afterEnterEditingMode() {
+    this._focusEnd();
+  }
+
+  override beforeExitEditingMode() {
+    this._setValue();
+  }
+
+  parseDocUrl(url: string) {
+    return this.std?.getOptional(ParseDocUrlProvider)?.parseDocUrl(url);
+  }
+
+  docName$ = computed(() => {
+    const title =
+      this.docId$.value &&
+      this.std?.workspace.getDoc(this.docId$.value)?.meta?.title;
+    if (title == null) {
+      return;
+    }
+    return title || 'Untitled';
+  });
+
+  renderLink() {
+    const linkText = this.value ?? '';
+    const docName = this.docName$.value;
+    const isDoc = !!docName;
+    const isLink = !!linkText;
+    const hasLink = isDoc || isLink;
+    return html`
+      <div>
+        <div class="${linkContainerStyle}">
+          ${isDoc
+            ? html`<span class="${linkedDocStyle}" @click="${this.openDoc}"
+                >${docName}</span
+              >`
+            : isValidUrl(linkText)
+              ? html`<a
+                  data-testid="property-link-a"
+                  class="${inlineLinkNodeStyle}"
+                  href="${linkText}"
+                  rel="noopener noreferrer"
+                  target="_blank"
+                  >${linkText}</a
+                >`
+              : html`<span class="${normalTextStyle}">${linkText}</span>`}
+        </div>
+        ${hasLink
+          ? html` <div class="${linkIconContainerStyle} ${showLinkIconStyle}">
+              <div
+                class="${linkIconStyle}"
+                data-testid="edit-link-button"
+                @click="${this._onEdit}"
+              >
+                ${EditIcon()}
+              </div>
+            </div>`
+          : nothing}
+      </div>
+    `;
+  }
+
+  override render() {
+    if (this.isEditing$.value) {
+      const linkText = this.value ?? '';
+      return html`<input
+        class="${linkEditingStyle} link"
+        ${ref(this._container)}
+        .value="${linkText}"
+        @keydown="${this._onKeydown}"
+        @pointerdown="${stopPropagation}"
+      />`;
+    } else {
+      return this.renderLink();
+    }
+  }
+}
+
+export const linkColumnConfig = linkPropertyModelConfig.createPropertyMeta({
+  icon: createIcon('LinkIcon'),
+  cellRenderer: {
+    view: createFromBaseCellRenderer(LinkCell),
+  },
+});

blocksuite/affine/blocks/database/src/properties/link/define.ts

@@ -0,0 +1,25 @@
+import { propertyType, t } from '@blocksuite/data-view';
+import zod from 'zod';
+export const linkColumnType = propertyType('link');
+export const linkPropertyModelConfig = linkColumnType.modelConfig({
+  name: 'Link',
+  propertyData: {
+    schema: zod.object({}),
+    default: () => ({}),
+  },
+  jsonValue: {
+    schema: zod.string(),
+    type: () => t.string.instance(),
+    isEmpty: ({ value }) => !value,
+  },
+  rawValue: {
+    schema: zod.string(),
+    default: () => '',
+    toString: ({ value }) => value,
+    fromString: ({ value }) => {
+      return { value: value };
+    },
+    toJson: ({ value }) => value,
+    fromJson: ({ value }) => value,
+  },
+});