chore: merge blocksuite source code (#9213)

blocksuite/affine/block-embed/src/embed-figma-block/adapters/html.ts

@@ -0,0 +1,11 @@
+import { EmbedFigmaBlockSchema } from '@blocksuite/affine-model';
+import { BlockHtmlAdapterExtension } from '@blocksuite/affine-shared/adapters';
+
+import { createEmbedBlockHtmlAdapterMatcher } from '../../common/adapters/html.js';
+
+export const embedFigmaBlockHtmlAdapterMatcher =
+  createEmbedBlockHtmlAdapterMatcher(EmbedFigmaBlockSchema.model.flavour);
+
+export const EmbedFigmaBlockHtmlAdapterExtension = BlockHtmlAdapterExtension(
+  embedFigmaBlockHtmlAdapterMatcher
+);

blocksuite/affine/block-embed/src/embed-figma-block/adapters/index.ts

@@ -0,0 +1,3 @@
+export * from './html.js';
+export * from './markdown.js';
+export * from './plain-text.js';

blocksuite/affine/block-embed/src/embed-figma-block/adapters/markdown.ts

@@ -0,0 +1,11 @@
+import { EmbedFigmaBlockSchema } from '@blocksuite/affine-model';
+import { BlockMarkdownAdapterExtension } from '@blocksuite/affine-shared/adapters';
+
+import { createEmbedBlockMarkdownAdapterMatcher } from '../../common/adapters/markdown.js';
+
+export const embedFigmaBlockMarkdownAdapterMatcher =
+  createEmbedBlockMarkdownAdapterMatcher(EmbedFigmaBlockSchema.model.flavour);
+
+export const EmbedFigmaMarkdownAdapterExtension = BlockMarkdownAdapterExtension(
+  embedFigmaBlockMarkdownAdapterMatcher
+);

blocksuite/affine/block-embed/src/embed-figma-block/adapters/plain-text.ts

@@ -0,0 +1,10 @@
+import { EmbedFigmaBlockSchema } from '@blocksuite/affine-model';
+import { BlockPlainTextAdapterExtension } from '@blocksuite/affine-shared/adapters';
+
+import { createEmbedBlockPlainTextAdapterMatcher } from '../../common/adapters/plain-text.js';
+
+export const embedFigmaBlockPlainTextAdapterMatcher =
+  createEmbedBlockPlainTextAdapterMatcher(EmbedFigmaBlockSchema.model.flavour);
+
+export const EmbedFigmaBlockPlainTextAdapterExtension =
+  BlockPlainTextAdapterExtension(embedFigmaBlockPlainTextAdapterMatcher);

blocksuite/affine/block-embed/src/embed-figma-block/embed-edgeless-figma-block.ts

@@ -0,0 +1,6 @@
+import { toEdgelessEmbedBlock } from '../common/to-edgeless-embed-block.js';
+import { EmbedFigmaBlockComponent } from './embed-figma-block.js';
+
+export class EmbedEdgelessBlockComponent extends toEdgelessEmbedBlock(
+  EmbedFigmaBlockComponent
+) {}

blocksuite/affine/block-embed/src/embed-figma-block/embed-figma-block.ts

@@ -0,0 +1,166 @@
+import { OpenIcon } from '@blocksuite/affine-components/icons';
+import type {
+  EmbedFigmaModel,
+  EmbedFigmaStyles,
+} from '@blocksuite/affine-model';
+import { html } from 'lit';
+import { state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
+
+import { EmbedBlockComponent } from '../common/embed-block-element.js';
+import type { EmbedFigmaBlockService } from './embed-figma-service.js';
+import { FigmaIcon, styles } from './styles.js';
+
+export class EmbedFigmaBlockComponent extends EmbedBlockComponent<
+  EmbedFigmaModel,
+  EmbedFigmaBlockService
+> {
+  static override styles = styles;
+
+  override _cardStyle: (typeof EmbedFigmaStyles)[number] = 'figma';
+
+  protected _isDragging = false;
+
+  protected _isResizing = false;
+
+  open = () => {
+    let link = this.model.url;
+    if (!link.match(/^[a-zA-Z]+:\/\//)) {
+      link = 'https://' + link;
+    }
+    window.open(link, '_blank');
+  };
+
+  refreshData = () => {};
+
+  private _handleDoubleClick(event: MouseEvent) {
+    event.stopPropagation();
+    this.open();
+  }
+
+  private _selectBlock() {
+    const selectionManager = this.host.selection;
+    const blockSelection = selectionManager.create('block', {
+      blockId: this.blockId,
+    });
+    selectionManager.setGroup('note', [blockSelection]);
+  }
+
+  protected _handleClick(event: MouseEvent) {
+    event.stopPropagation();
+    this._selectBlock();
+  }
+
+  override connectedCallback() {
+    super.connectedCallback();
+    this._cardStyle = this.model.style;
+
+    if (!this.model.description && !this.model.title) {
+      this.doc.withoutTransact(() => {
+        this.doc.updateBlock(this.model, {
+          title: 'Figma',
+          description: this.model.url,
+        });
+      });
+    }
+
+    this.disposables.add(
+      this.model.propsUpdated.on(({ key }) => {
+        if (key === 'url') {
+          this.refreshData();
+        }
+      })
+    );
+
+    // this is required to prevent iframe from capturing pointer events
+    this.disposables.add(
+      this.std.selection.slots.changed.on(() => {
+        this._isSelected =
+          !!this.selected?.is('block') || !!this.selected?.is('surface');
+
+        this._showOverlay =
+          this._isResizing || this._isDragging || !this._isSelected;
+      })
+    );
+    // this is required to prevent iframe from capturing pointer events
+    this.handleEvent('dragStart', () => {
+      this._isDragging = true;
+      this._showOverlay =
+        this._isResizing || this._isDragging || !this._isSelected;
+    });
+
+    this.handleEvent('dragEnd', () => {
+      this._isDragging = false;
+      this._showOverlay =
+        this._isResizing || this._isDragging || !this._isSelected;
+    });
+  }
+
+  override renderBlock() {
+    const { title, description, url } = this.model;
+    const titleText = title ?? 'Figma';
+    const descriptionText = description ?? url;
+
+    return this.renderEmbed(
+      () => html`
+        <div
+          class=${classMap({
+            'affine-embed-figma-block': true,
+            selected: this._isSelected,
+          })}
+          style=${styleMap({
+            transform: `scale(${this._scale})`,
+            transformOrigin: '0 0',
+          })}
+          @click=${this._handleClick}
+          @dblclick=${this._handleDoubleClick}
+        >
+          <div class="affine-embed-figma">
+            <div class="affine-embed-figma-iframe-container">
+              <iframe
+                src=${`https://www.figma.com/embed?embed_host=blocksuite&url=${url}`}
+                allowfullscreen
+                loading="lazy"
+              ></iframe>
+
+              <div
+                class=${classMap({
+                  'affine-embed-figma-iframe-overlay': true,
+                  hide: !this._showOverlay,
+                })}
+              ></div>
+            </div>
+          </div>
+          <div class="affine-embed-figma-content">
+            <div class="affine-embed-figma-content-header">
+              <div class="affine-embed-figma-content-title-icon">
+                ${FigmaIcon}
+              </div>
+
+              <div class="affine-embed-figma-content-title-text">
+                ${titleText}
+              </div>
+            </div>
+
+            <div class="affine-embed-figma-content-description">
+              ${descriptionText}
+            </div>
+
+            <div class="affine-embed-figma-content-url" @click=${this.open}>
+              <span>www.figma.com</span>
+
+              <div class="affine-embed-figma-content-url-icon">${OpenIcon}</div>
+            </div>
+          </div>
+        </div>
+      `
+    );
+  }
+
+  @state()
+  protected accessor _isSelected = false;
+
+  @state()
+  protected accessor _showOverlay = true;
+}

blocksuite/affine/block-embed/src/embed-figma-block/embed-figma-model.ts

@@ -0,0 +1,2 @@
+export const figmaUrlRegex: RegExp =
+  /https:\/\/[\w.-]+\.?figma.com\/([\w-]+)\/([0-9a-zA-Z]{22,128})(?:\/.*)?$/;

blocksuite/affine/block-embed/src/embed-figma-block/embed-figma-service.ts

@@ -0,0 +1,23 @@
+import {
+  EmbedFigmaBlockSchema,
+  EmbedFigmaStyles,
+} from '@blocksuite/affine-model';
+import { EmbedOptionProvider } from '@blocksuite/affine-shared/services';
+import { BlockService } from '@blocksuite/block-std';
+
+import { figmaUrlRegex } from './embed-figma-model.js';
+
+export class EmbedFigmaBlockService extends BlockService {
+  static override readonly flavour = EmbedFigmaBlockSchema.model.flavour;
+
+  override mounted() {
+    super.mounted();
+
+    this.std.get(EmbedOptionProvider).registerEmbedBlockOptions({
+      flavour: this.flavour,
+      urlRegex: figmaUrlRegex,
+      styles: EmbedFigmaStyles,
+      viewType: 'embed',
+    });
+  }
+}

blocksuite/affine/block-embed/src/embed-figma-block/embed-figma-spec.ts

@@ -0,0 +1,18 @@
+import {
+  BlockViewExtension,
+  type ExtensionType,
+  FlavourExtension,
+} from '@blocksuite/block-std';
+import { literal } from 'lit/static-html.js';
+
+import { EmbedFigmaBlockService } from './embed-figma-service.js';
+
+export const EmbedFigmaBlockSpec: ExtensionType[] = [
+  FlavourExtension('affine:embed-figma'),
+  EmbedFigmaBlockService,
+  BlockViewExtension('affine:embed-figma', model => {
+    return model.parent?.flavour === 'affine:surface'
+      ? literal`affine-embed-edgeless-figma-block`
+      : literal`affine-embed-figma-block`;
+  }),
+];

blocksuite/affine/block-embed/src/embed-figma-block/index.ts

@@ -0,0 +1,5 @@
+export * from './adapters/index.js';
+export * from './embed-figma-block.js';
+export * from './embed-figma-model.js';
+export * from './embed-figma-spec.js';
+export { FigmaIcon } from './styles.js';

blocksuite/affine/block-embed/src/embed-figma-block/styles.ts

@@ -0,0 +1,229 @@
+import {
+  EMBED_CARD_HEIGHT,
+  EMBED_CARD_WIDTH,
+} from '@blocksuite/affine-shared/consts';
+import { css, html } from 'lit';
+
+export const styles = css`
+  .affine-embed-figma-block {
+    width: ${EMBED_CARD_WIDTH.figma}px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    padding: 12px;
+
+    border-radius: 8px;
+    border: 1px solid var(--affine-background-tertiary-color);
+
+    opacity: var(--add, 1);
+    background: var(--affine-background-primary-color);
+    user-select: none;
+
+    aspect-ratio: ${EMBED_CARD_WIDTH.figma} / ${EMBED_CARD_HEIGHT.figma};
+  }
+
+  .affine-embed-figma {
+    flex-grow: 1;
+    width: 100%;
+    opacity: var(--add, 1);
+  }
+
+  .affine-embed-figma img,
+  .affine-embed-figma object,
+  .affine-embed-figma svg {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 4px 4px var(--1, 0px) var(--1, 0px);
+  }
+
+  .affine-embed-figma-iframe-container {
+    height: 100%;
+    position: relative;
+  }
+
+  .affine-embed-figma-iframe-container > iframe {
+    width: 100%;
+    height: 100%;
+    border-radius: 4px 4px var(--1, 0px) var(--1, 0px);
+    border: none;
+  }
+
+  .affine-embed-figma-iframe-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  .affine-embed-figma-iframe-overlay.hide {
+    display: none;
+  }
+
+  .affine-embed-figma-content {
+    display: block;
+    flex-direction: column;
+    width: 100%;
+    height: fit-content;
+    border-radius: var(--1, 0px);
+    opacity: var(--add, 1);
+  }
+
+  .affine-embed-figma-content-header {
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+    align-items: center;
+
+    align-self: stretch;
+    padding: var(--1, 0px);
+    border-radius: var(--1, 0px);
+    opacity: var(--add, 1);
+  }
+
+  .affine-embed-figma-content-title-icon {
+    display: flex;
+    width: 20px;
+    height: 20px;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .affine-embed-figma-content-title-icon img,
+  .affine-embed-figma-content-title-icon object,
+  .affine-embed-figma-content-title-icon svg {
+    width: 20px;
+    height: 20px;
+    fill: var(--affine-background-primary-color);
+  }
+
+  .affine-embed-figma-content-title-text {
+    flex: 1 0 0;
+
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+
+    word-break: break-word;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: var(--affine-text-primary-color);
+
+    font-family: var(--affine-font-family);
+    font-size: var(--affine-font-sm);
+    font-style: normal;
+    font-weight: 600;
+    line-height: 22px;
+  }
+
+  .affine-embed-figma-content-description {
+    height: 40px;
+
+    position: relative;
+
+    word-break: break-word;
+    white-space: normal;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: var(--affine-text-primary-color);
+
+    font-family: var(--affine-font-family);
+    font-size: var(--affine-font-xs);
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px;
+  }
+
+  .affine-embed-figma-content-description::after {
+    content: '...';
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    background-color: var(--affine-background-primary-color);
+  }
+
+  .affine-embed-figma-content-url {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 4px;
+    width: max-content;
+    max-width: 100%;
+    cursor: pointer;
+  }
+  .affine-embed-figma-content-url > span {
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+
+    word-break: break-all;
+    white-space: normal;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: var(--affine-text-secondary-color);
+
+    font-family: var(--affine-font-family);
+    font-size: var(--affine-font-xs);
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px;
+  }
+  .affine-embed-figma-content-url:hover > span {
+    color: var(--affine-link-color);
+  }
+  .affine-embed-figma-content-url:hover .open-icon {
+    fill: var(--affine-link-color);
+  }
+
+  .affine-embed-figma-content-url-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 12px;
+    height: 12px;
+  }
+  .affine-embed-figma-content-url-icon .open-icon {
+    height: 12px;
+    width: 12px;
+    fill: var(--affine-text-secondary-color);
+  }
+
+  .affine-embed-figma-block.selected {
+    .affine-embed-figma-content-url > span {
+      color: var(--affine-link-color);
+    }
+    .affine-embed-figma-content-url .open-icon {
+      fill: var(--affine-link-color);
+    }
+  }
+`;
+
+export const FigmaIcon = html`<svg
+  width="20"
+  height="20"
+  viewBox="0 0 20 20"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M7.66898 17.9165C9.00426 17.9165 10.088 16.7342 10.088 15.2776V12.6387H7.66898C6.3337 12.6387 5.25 13.8209 5.25 15.2776C5.25 16.7342 6.3337 17.9165 7.66898 17.9165Z"
+    fill="#0ACF83"
+  />
+  <path
+    d="M5.25 10.0002C5.25 8.54355 6.3337 7.36133 7.66898 7.36133H10.088V12.6391H7.66898C6.3337 12.6391 5.25 11.4569 5.25 10.0002Z"
+    fill="#A259FF"
+  />
+  <path
+    d="M5.25 4.72238C5.25 3.26572 6.3337 2.0835 7.66898 2.0835H10.088V7.36127H7.66898C6.3337 7.36127 5.25 6.17905 5.25 4.72238Z"
+    fill="#F24E1E"
+  />
+  <path
+    d="M10.0879 2.0835H12.5069C13.8421 2.0835 14.9259 3.26572 14.9259 4.72238C14.9259 6.17905 13.8421 7.36127 12.5069 7.36127H10.0879V2.0835Z"
+    fill="#FF7262"
+  />
+  <path
+    d="M14.9259 10.0002C14.9259 11.4569 13.8421 12.6391 12.5069 12.6391C11.1716 12.6391 10.0879 11.4569 10.0879 10.0002C10.0879 8.54355 11.1716 7.36133 12.5069 7.36133C13.8421 7.36133 14.9259 8.54355 14.9259 10.0002Z"
+    fill="#1ABCFE"
+  />
+</svg>`;