Commit Graph

47 Commits

Author SHA1 Message Date
Saul-Mirone 04531508cb feat(editor): add embed doc block extension (#12090)
Closes: BS-3393

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

## Summary by CodeRabbit

- **New Features**
  - Introduced a new "Embed Doc" block, enabling embedding and rendering of linked and synced documents within cards, including support for banners and note previews.
  - Added new toolbar and quick search options for inserting embedded linked and synced documents.

- **Improvements**
  - Updated dependencies and internal references to support the new embed doc functionality across related blocks and components.
  - Enhanced support for edgeless environments with new clipboard and configuration options for embedded docs.

- **Refactor**
  - Streamlined and reorganized embed-related code, moving linked and synced doc logic into a dedicated embed doc module.
  - Removed obsolete adapter and utility files to simplify maintenance.

- **Chores**
  - Updated project and TypeScript configuration files to include the new embed doc module in builds and references.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2025-04-30 09:16:17 +00:00
Saul-Mirone 638f0b466f feat(editor): fragment extensions (#12066)
Closes: BS-3382
Closes: BS-3381
Closes: BS-3380

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

- **New Features**
	- Introduced new view extensions for document title, frame panel, and outline fragments, enhancing modularity and extensibility.
- **Refactor**
	- Updated export structure for fragments to support directory-based modules and added dedicated view module exports.
	- Replaced a centralized view extension with individual fragment-based view extensions for improved clarity.
- **Chores**
	- Updated dependencies and TypeScript project references to ensure compatibility and maintainability.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2025-04-29 11:21:58 +00:00
Saul-Mirone d6ab958e15 feat(editor): root block extension (#12063)
Closes: BS-3202

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

- **New Features**
  - Introduced new root block store and view extensions, enhancing modularity and integration options for root block functionality.
  - Exported the EdgelessLocker class for broader usage.

- **Improvements**
  - Updated export paths for root block modules, enabling clearer and more flexible module access.
  - Enhanced view extension setup to better tailor user interface and interactions based on context.

- **Removals**
  - Removed legacy migrating store and view extension logic, streamlining extension management and reducing unused code.
  - Removed multiple deprecated block specifications and common extension collections to simplify the codebase.
  - Deleted AI page root block specification, retaining only lifecycle watcher functionality.

- **Chores**
  - Updated dependencies and project references to support new extension loader integration.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2025-04-29 17:20:42 +08:00
Saul-Mirone 4c84e6bac7 feat(editor): gfx link extension (#12046)
Closes: BS-3368

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

## Summary by CodeRabbit

- **New Features**
  - Introduced a new link tool extension, enabling enhanced link-related functionality within the edgeless workspace.
  - Added a new view extension for link tools, improving integration and usability in edgeless mode.

- **Chores**
  - Added a new package for link tool functionality with appropriate dependencies and exports.
  - Registered new custom elements for edgeless toolbars and link tools to support modular UI components.
  - Updated project configurations and workspace dependencies to include the new link tool module.

- **Refactor**
  - Removed unused quick tool exports and toolbar component registrations to streamline the edgeless extension codebase.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2025-04-29 03:19:37 +00:00
Saul-Mirone d82d37b53d feat(editor): add page dragging area widget extension (#12045)
Closes: BS-3364

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

- **New Features**
  - Introduced a new "Page Dragging Area" widget, enabling enhanced block selection and drag area detection within the user interface.
  - Added utilities for more precise block selection based on rectangular selection areas.

- **Improvements**
  - Integrated the new widget into the view extension system for consistent behavior across supported views.
  - Enhanced clipboard handling with comprehensive adapter configurations for various data types.

- **Refactor**
  - Streamlined widget registration and block selection logic for improved maintainability and modularity.
  - Removed legacy widget exports and registrations to centralize widget management.

- **Chores**
  - Updated workspace and TypeScript configurations to support the new widget module.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2025-04-29 01:45:00 +00:00
Saul-Mirone 468db9f3eb feat(editor): edgeless zoom toolbar widget extension (#12037)
Closes: BS-3363
2025-04-28 14:38:26 +00:00
Saul-Mirone 4e201ede17 feat(editor): viewport overlay widget extension (#12035)
Closes: BS-3360

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

- **New Features**
  - Introduced a new viewport overlay widget, making it available as part of the workspace and enabling its integration into supported pages.

- **Refactor**
  - Updated internal imports and exports to utilize the new viewport overlay widget package.
  - Streamlined widget registration and extension mechanisms for improved modularity.

- **Chores**
  - Added configuration and project references to support the new viewport overlay widget package in the build system.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2025-04-28 14:38:26 +00:00
Saul-Mirone 3fdab1bec6 feat(editor): add bs affine foundation module (#12012)
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

- **New Features**
  - Introduced the Affine Foundation package, providing a centralized layer for initializing core UI effects, custom elements, and foundational services.
  - Added new foundational store and view extensions to improve core service registration and UI effect setup.

- **Refactor**
  - Streamlined and reorganized block, store, and view extension arrays to rely on the new foundation layer, reducing duplication and simplifying extension management.
  - Removed redundant or now-centralized services and UI effects from existing modules.

- **Chores**
  - Updated configuration files and workspace dependencies to support the new Affine Foundation package.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2025-04-28 06:38:42 +00:00
Saul-Mirone d7b1819149 refactor(editor): move transcription block model to ai (#12010)
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

- **Refactor**
	- Updated and reorganized import paths for transcription block models and types to improve module structure and maintainability.
- **Chores**
	- Removed deprecated transcription block schema and related exports from core libraries.
	- Registered transcription block schema directly within the workspace schema for improved schema management.
- **Bug Fixes**
	- Ensured consistent registration and availability of transcription block features across relevant modules.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2025-04-27 13:13:07 +00:00
Saul-Mirone 81b439c4e1 feat(editor): add gfx pointer extension (#12006)
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
  - Introduced a new pointer graphics module with tools and quick tool integration for edgeless surfaces.
  - Added a quick tool button for pointer interactions in edgeless mode.
  - Exposed new extension points for pointer graphics and effects.

- **Improvements**
  - Integrated pointer graphics as a dependency into related packages.
  - Enhanced toolbar context to support additional surface alignment modes.
  - Added conditional clipboard configuration registrations for edgeless contexts across multiple block types.

- **Removals**
  - Removed legacy tool and effect definitions and related quick tool exports from edgeless components.
  - Streamlined extension arrays and removed unused exports for a cleaner codebase.
  - Deleted obsolete utility functions and component registrations.

- **Chores**
  - Updated workspace and TypeScript project references to include the new pointer graphics module.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2025-04-27 04:46:44 +00:00
Saul-Mirone 59d4942d9b feat(editor): slash menu and toolbar widget extensions (#12002)
Closes: BS-3226
Closes: BS-3227
Closes: BS-3228
Closes: BS-3229

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

- **New Features**
  - Introduced new view extensions for remote selection, scroll anchoring, slash menu, and toolbar widgets, enhancing customization and integration capabilities.

- **Refactor**
  - Updated export paths and module structure for widget-related packages to improve modularity and accessibility.
  - Reorganized internal dependencies and removed redundant widget imports from core block packages.
  - Refactored edgeless-related widgets and components to use a standardized scope interface for improved context and state management.
  - Centralized graphics controller access and slot management through standardized context objects.

- **Chores**
  - Added and updated dependencies to streamline extension loading and workspace management.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2025-04-26 23:28:49 +08:00
Saul-Mirone c3f6bea446 feat(editor): linked doc widget extension (#12001)
Closes: BS-3225
2025-04-26 02:45:19 +00:00
Saul-Mirone 6e76a3e593 feat(editor): add frame title and mobile toolbar widget extension (#11996)
Closes: BS-3223
Closes: BS-3224

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

- **New Features**
  - Introduced new view extensions for frame title and keyboard toolbar widgets with conditional registration based on context and environment.
  - Enhanced widget integration by adding explicit exports for view components.

- **Chores**
  - Updated export paths and package dependencies to improve modularity and compatibility.
  - Removed deprecated widget dependencies and related imports from core packages.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2025-04-26 02:45:18 +00:00
Saul-Mirone 25a2b94a43 feat(editor): edgeless auto connect widget extension (#11990)
Closes: BS-3221
Closes: BS-3222

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

- **New Features**
  - Introduced extensions that conditionally register edgeless auto-connect and toolbar widgets with associated effects based on the view context.
  - Added new exports for edgeless auto-connect and toolbar widget views, making them available for external use.

- **Chores**
  - Updated dependencies and project references to include the extension loader for improved module integration.
  - Refined workspace configuration to reflect new package dependencies.

- **Refactor**
  - Streamlined registration and effect logic by removing legacy integration points for edgeless auto-connect and toolbar widgets.
  - Reorganized widget export paths to a more modular directory structure.

- **Bug Fixes**
  - Disabled pointer events on the edgeless navigator black background to prevent interaction interference.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2025-04-26 01:21:49 +00:00
forehalo 4ffa37d1c3 chore: proxy image preview in frontend (#11957)
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
	- Images and icons in bookmark cards are now loaded through an image proxy for improved reliability and consistency.
	- Embed blocks for GitHub, Loom, and YouTube now display banner and creator images via an image proxy service for enhanced image loading.

- **Refactor**
	- Simplified backend URL handling and proxy logic for images, resulting in more efficient processing and reduced complexity.
	- Consolidated image proxy middleware and services into a shared adapter module for streamlined imports and improved maintainability.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2025-04-24 10:23:25 +00:00
Saul-Mirone 1d38e5787b feat(editor): drag handle widget extension (#11962)
Closes: BS-3220
2025-04-24 09:47:36 +00:00
Saul-Mirone b66d2d58a1 feat(editor): surface block extension (#11961)
Closes: BS-3204
2025-04-24 09:47:36 +00:00
Saul-Mirone 2200bd7b70 feat(editor): text gfx extension (#11951)
Closes: BS-3213
2025-04-24 03:21:54 +00:00
Saul-Mirone 9d90899344 feat(editor): group gfx extension (#11950)
Closes: BS-3208

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

## Summary by CodeRabbit

- **New Features**
  - Introduced a new group view extension, enhancing how group elements are handled and displayed.
  - Added new store and view modules for group-related features, improving modularity and integration.

- **Refactor**
  - Updated the group element architecture to use extension-based registration for views, toolbars, and effects.
  - Simplified and reorganized exports for group and text modules.

- **Chores**
  - Updated dependencies and project references to improve build consistency and compatibility.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2025-04-24 03:21:54 +00:00
Saul-Mirone 0cd7111f20 feat(editor): connector gfx extension (#11940)
Closes: BS-3207
2025-04-24 01:27:28 +00:00
Saul-Mirone 9c0633b75c feat(editor): template gfx extension (#11939)
Closes: BS-3212
2025-04-24 00:49:39 +00:00
Saul-Mirone f0a233368d feat(editor): mindmap gfx extension (#11936)
Closes: BS-3209

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

## Summary by CodeRabbit

- **New Features**
  - Introduced mind map view and store extensions, enhancing mind map integration and conversion to plain text and markdown formats.
  - Added priority property to quick tools, allowing for custom ordering in the toolbar.
- **Improvements**
  - Toolbar quick tools are now sorted by priority for a more intuitive user experience.
  - Updated toolbar and extension configurations to streamline available tools and extensions.
- **Bug Fixes**
  - Conditional registration of certain components ensures correct behavior in edgeless mode.
- **Chores**
  - Updated dependencies and project references to improve module integration and maintainability.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2025-04-24 00:49:38 +00:00
Saul-Mirone bc0530a708 feat(editor) shape gfx extension (#11928)
Closes: BS-3211
2025-04-23 15:46:23 +00:00
Saul-Mirone 61121ab727 feat(editor): brush and note gfx extension (#11927)
Closes: BS-3206
Closes: BS-3210

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

- **New Features**
  - Introduced new brush and note view extensions, enhancing integration and extensibility for brush and note tools.
  - Added store extension for brush tools, allowing for improved adapter integration.

- **Improvements**
  - Expanded module exports for brush and note graphics, making store and view functionalities more accessible.
  - Added new dependencies to support extension loading and improved project structure.

- **Refactor**
  - Updated extension arrays and toolbars to use the new view and store extensions for brush and note tools.
  - Removed legacy brush and note tools, effects, and toolbar extensions in favor of the new extension-based approach.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2025-04-23 15:46:22 +00:00
Saul-Mirone ea391779dd feat(editor): inline preset extension (#11919)
Closes: BS-3214
2025-04-23 14:26:20 +00:00
Saul-Mirone 16831e8c0e feat(editor): reference, mention and latex inline extension (#11914)
Closes: BS-3215
Closes: BS-3218
Closes: BS-3217
2025-04-23 09:22:16 +00:00
Saul-Mirone b1aecfc1c4 feat(editor): link inline extension (#11910)
Closes: BS-3216
2025-04-23 04:42:24 +00:00
Saul-Mirone 730ed16fc5 refactor(editor): remove old specs (#11909) 2025-04-23 02:57:01 +00:00
Saul-Mirone 2510e7a9a4 feat(editor): inline footnote extension (#11908)
Closes: BS-3219
2025-04-23 01:40:49 +00:00
Saul-Mirone 6fbbfc80e5 refactor(editor): move block-specific extensions to their respective modules (#11907)
### TL;DR

Refactored extension registration to follow a more modular approach by moving extensions to their respective block packages.

### What changed?

- Removed centralized registration of several extensions from `store.ts` in the main package
- Moved the following extensions to their respective block packages:
  - `CodeMarkdownPreprocessorExtension` to the code block package
  - `LatexMarkdownPreprocessorExtension` to the latex block package
  - `EmbedIframeConfigExtensions` and `EmbedIframeService` to the embed block package
  - `ImageStoreSpec` removed from central registration
- Cleaned up unused arrays and imports in the main store file
- Removed empty `defaultBlockPlainTextAdapterMatchers` array

### How to test?

1. Verify that markdown preprocessing for code and latex blocks still works correctly
2. Check that iframe embeds function properly
3. Ensure image handling continues to work as expected
4. Test import/export functionality for all affected block types

### Why make this change?

This change improves code organization by following a more modular architecture where each block package is responsible for registering its own extensions. This approach reduces coupling between packages, makes the codebase more maintainable, and follows the principle that extensions should be registered where they are defined.
2025-04-23 01:16:08 +00:00
Saul-Mirone 24edfc75bd feat(editor): table extension (#11906)
Closes: BS-3205
2025-04-23 01:16:08 +00:00
Saul-Mirone e57222b89a feat(editor): surface ref extension (#11902)
Closes: BS-3203
2025-04-23 01:16:07 +00:00
Saul-Mirone 45b6cbe8d7 refactor(editor): cleanup dead code (#11893) 2025-04-22 15:51:23 +00:00
Saul-Mirone 43966a6c6b feat(editor): use store extension manager (#11891)
Closes: BS-3284
2025-04-22 15:51:23 +00:00
Saul-Mirone 99ad4e871e feat(editor): use migrated extensions (#11886)
Closes: BS-3283
2025-04-22 15:51:22 +00:00
Saul-Mirone 6d6504e2af feat(editor): replace spec provider with extension manager (#11861)
Closes: BS-3273
2025-04-22 07:40:41 +00:00
liuyi e376aa57c5 chore: bring treeshake back (#11577) 2025-04-10 14:12:36 +08:00
Saul-Mirone aed7f40568 refactor(editor): improve element adapters (#11473) 2025-04-05 09:40:13 +00:00
L-Sun 2f1f09e25f fix(editor): extract store spec register from effects (#11268)
Close [BS-2802](https://linear.app/affine-design/issue/BS-2802/移動端缺少bseffects導致文檔創建錯誤)
2025-03-31 10:53:02 +00:00
Saul-Mirone 205cd7a86d refactor(editor): rename block-std to std (#11250)
Closes: BS-2946
2025-03-28 07:20:34 +00:00
Saul-Mirone 1871428021 feat(editor): extensionize clipboards (#11172) 2025-03-25 12:09:24 +00:00
Saul-Mirone e5e429e7b2 feat(editor): add inline packages (#11048) 2025-03-20 13:47:35 +00:00
pengx17 fad49bb070 feat(editor): audio block (#10947)
AudioMedia entity for loading & controlling a single audio media
AudioMediaManagerService: Global audio state synchronization across tabs
AudioAttachmentService + AudioAttachmentBlock for manipulating AttachmentBlock in affine - e.g., filling transcription (using mock endpoint for now)
Added AudioBlock + AudioPlayer for rendering audio block in affine (new transcription block whose renderer is provided in affine)

fix AF-2292
fix AF-2337
2025-03-20 12:46:15 +00:00
donteatfriedrice f4202a7976 refactor(editor): move embed iframe config and service extension to shared (#11029) 2025-03-20 08:56:25 +00:00
L-Sun d80f1e8067 feat(editor): insert a blank frame slash menu action (#10899)
Close [BS-2517](https://linear.app/affine-design/issue/BS-2517/%E6%B7%BB%E5%8A%A0frame%E5%85%A5%E5%8F%A3)

### What changes:
- add a insert blank frame action to slash menu
- move `EdgelessFrameManager` and `FrameOverlay` extensions to `FrameBlockSpec`
- make `FrameBlockSpec` as a part of `CommonBlockSpecs` such that we can use `EdgelessFrameManager` to create a frame more easily

https://github.com/user-attachments/assets/ddff5866-8933-4ce5-aaf4-873661407ee4
2025-03-17 10:32:55 +00:00
donteatfriedrice d2c62602a4 feat(editor): support embed iframe block (#10740)
To close:
[BS-2660](https://linear.app/affine-design/issue/BS-2660/slash-menu-支持-iframe-embed)
[BS-2661](https://linear.app/affine-design/issue/BS-2661/iframe-embed-block-model-and-block-component)
[BS-2662](https://linear.app/affine-design/issue/BS-2662/iframe-embed-block-toolbar)
[BS-2768](https://linear.app/affine-design/issue/BS-2768/iframe-embed-block-loading-和-error-态)
[BS-2670](https://linear.app/affine-design/issue/BS-2670/iframe-embed-block-导出)

# PR Description

# Add Embed Iframe Block Support

## Overview

This PR introduces a new `EmbedIframeBlock` to enhance content embedding capabilities within our editor. This block allows users to seamlessly embed external content from various providers (Google Drive, Spotify, etc.) directly into their docs.

## New Blocks

### EmbedIframeBlock

The core block that renders embedded iframe content. This block:

* Displays external content within a secure iframe
* Handles loading states with visual feedback
* Provides error handling with edit and retry options
* Supports customization of width, height, and other iframe attributes

### Supporting Components

* **EmbedIframeCreateModal**: Modal interface for creating new iframe embeds
* **EmbedIframeLinkEditPopup**: UI for editing existing embed links
* **EmbedIframeLoadingCard**: Visual feedback during content loading
* **EmbedIframeErrorCard**: Error handling with retry functionality

## New Store Extensions

### EmbedIframeConfigExtension

This extension provides configuration for different embed providers:

```typescript
/**
 * The options for the iframe
 * @example
 * {
 *   defaultWidth: '100%',
 *   defaultHeight: '152px',
 *   style: 'border-radius: 8px;',
 *   allow: 'autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture',
 * }
 * =>
 * <iframe
 *   width="100%"
 *   height="152px"
 *   style="border-radius: 8px;"
 *   allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
 * ></iframe>
 */
export type IframeOptions = {
  defaultWidth?: string;
  defaultHeight?: string;
  style?: string;
  referrerpolicy?: string;
  scrolling?: boolean;
  allow?: string;
  allowFullscreen?: boolean;
};

/**
 * Define the config of an embed iframe block provider
 */
export type EmbedIframeConfig = {
  /**
   * The name of the embed iframe block provider
   */
  name: string;
  /**
   * The function to match the url
   */
  match: (url: string) => boolean;
  /**
   * The function to build the oEmbed URL for fetching embed data
   */
  buildOEmbedUrl: (url: string) => string | undefined;
  /**
   * Use oEmbed URL directly as iframe src without fetching oEmbed data
   */
  useOEmbedUrlDirectly: boolean;
  /**
   * The options for the iframe
   */
  options?: IframeOptions;
};

export const EmbedIframeConfigIdentifier =
  createIdentifier<EmbedIframeConfig>('EmbedIframeConfig');

export function EmbedIframeConfigExtension(
  config: EmbedIframeConfig
): ExtensionType & {
  identifier: ServiceIdentifier<EmbedIframeConfig>;
} {
  const identifier = EmbedIframeConfigIdentifier(config.name);
  return {
    setup: di => {
      di.addImpl(identifier, () => config);
    },
    identifier,
  };
}
```

**example:**

```typescript
//  blocksuite/affine/blocks/block-embed/src/embed-iframe-block/configs/providers/spotify.ts

const SPOTIFY_DEFAULT_WIDTH = '100%';
const SPOTIFY_DEFAULT_HEIGHT = '152px';

// https://developer.spotify.com/documentation/embeds/reference/oembed
const spotifyEndpoint = 'https://open.spotify.com/oembed';

const spotifyUrlValidationOptions: EmbedIframeUrlValidationOptions = {
  protocols: ['https:'],
  hostnames: ['open.spotify.com', 'spotify.link'],
};

const spotifyConfig = {
  name: 'spotify',
  match: (url: string) =>
    validateEmbedIframeUrl(url, spotifyUrlValidationOptions),
  buildOEmbedUrl: (url: string) => {
    const match = validateEmbedIframeUrl(url, spotifyUrlValidationOptions);
    if (!match) {
      return undefined;
    }
    const encodedUrl = encodeURIComponent(url);
    const oEmbedUrl = `${spotifyEndpoint}?url=${encodedUrl}`;
    return oEmbedUrl;
  },
  useOEmbedUrlDirectly: false,
  options: {
    defaultWidth: SPOTIFY_DEFAULT_WIDTH,
    defaultHeight: SPOTIFY_DEFAULT_HEIGHT,
    allow:
      'autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture',
    style: 'border-radius: 12px;',
    allowFullscreen: true,
  },
};

// add the config extension to store
export const SpotifyEmbedConfig = EmbedIframeConfigExtension(spotifyConfig);
```

**Key features:**

* Provider registration and discovery
* URL pattern matching
* Provider-specific embed options (width, height, features)

### EmbedIframeService

This service provides abilities to handle URL validation, data fetching, and block creation

**Type:**

```typescript
/**
 * Service for handling embeddable URLs
 */
export interface EmbedIframeProvider {
  /**
   * Check if a URL can be embedded
   * @param url URL to check
   * @returns true if the URL can be embedded, false otherwise
   */
  canEmbed: (url: string) => boolean;

  /**
   * Build a API URL for fetching embed data
   * @param url URL to build API URL
   * @returns API URL if the URL can be embedded, undefined otherwise
   */
  buildOEmbedUrl: (url: string) => string | undefined;

  /**
   * Get the embed iframe config
   * @param url URL to get embed iframe config
   * @returns Embed iframe config if the URL can be embedded, undefined otherwise
   */
  getConfig: (url: string) => EmbedIframeConfig | undefined;

  /**
   * Get embed iframe data
   * @param url URL to get embed iframe data
   * @returns Embed iframe data if the URL can be embedded, undefined otherwise
   */
  getEmbedIframeData: (url: string) => Promise<EmbedIframeData | null>;

  /**
   * Parse an embeddable URL and add an EmbedIframeBlock to doc
   * @param url Original url to embed
   * @param parentId Parent block ID
   * @param index Optional index to insert at
   * @returns Created block id if successful, undefined if the URL cannot be embedded
   */
  addEmbedIframeBlock: (
    props: Partial<EmbedIframeBlockProps>,
    parentId: string,
    index?: number
  ) => string | undefined;
}
```

**Implemetation:**

```typescript
export class EmbedIframeService
  extends StoreExtension
  implements EmbedIframeProvider
{
  static override key = 'embed-iframe-service';

  private readonly _configs: EmbedIframeConfig[];

  constructor(store: Store) {
    super(store);
    this._configs = Array.from(
      store.provider.getAll(EmbedIframeConfigIdentifier).values()
    );
  }

  canEmbed = (url: string): boolean => {
    return this._configs.some(config => config.match(url));
  };

  buildOEmbedUrl = (url: string): string | undefined => {
    return this._configs.find(config => config.match(url))?.buildOEmbedUrl(url);
  };

  getConfig = (url: string): EmbedIframeConfig | undefined => {
    return this._configs.find(config => config.match(url));
  };

  getEmbedIframeData = async (
    url: string,
    signal?: AbortSignal
  ): Promise<EmbedIframeData | null> => {
    try {
      const config = this._configs.find(config => config.match(url));
      if (!config) {
        return null;
      }

      const oEmbedUrl = config.buildOEmbedUrl(url);
      if (!oEmbedUrl) {
        return null;
      }

      // if the config useOEmbedUrlDirectly is true, return the url directly as iframe_url
      if (config.useOEmbedUrlDirectly) {
        return {
          iframe_url: oEmbedUrl,
        };
      }

      // otherwise, fetch the oEmbed data
      const response = await fetch(oEmbedUrl, { signal });
      if (!response.ok) {
        console.warn(
          `Failed to fetch oEmbed data: ${response.status} ${response.statusText}`
        );
        return null;
      }

      const data = await response.json();
      return data as EmbedIframeData;
    } catch (error) {
      if (error instanceof Error && error.name !== 'AbortError') {
        console.error('Error fetching embed iframe data:', error);
      }
      return null;
    }
  };

  addEmbedIframeBlock = (
    props: Partial<EmbedIframeBlockProps>,
    parentId: string,
    index?: number
  ): string | undefined => {
    const blockId = this.store.addBlock(
      'affine:embed-iframe',
      props,
      parentId,
      index
    );
    return blockId;
  };
}
```

**Usage:**

```typescript
// Usage example
const embedIframeService = this.std.get(EmbedIframeService);

// Check if a URL can be embedded
const canEmbed = embedIframeService.canEmbed(url);

// Get embed data for a URL
const embedData = await embedIframeService.getEmbedIframeData(url);

// Add an embed iframe block to the document
const block = embedIframeService.addEmbedIframeBlock({
  url,
  iframeUrl: embedData.iframe_url,
  title: embedData.title,
  description: embedData.description
}, parentId, index);
```

**Key features:**

* URL validation and transformation
* Provider-specific data fetching
* Block creation and management

## Adaptations

### Toolbar Integration

Added toolbar actions for embedded content:

* Copy link
* Edit embed title and description
* Toggle between inline/card views
* Add caption
* And more

### Slash Menu Integration

Added a new slash menu option for embedding content:

* Embed item for inserting embed iframe block
* Conditional rendering based on feature flags

### Adapters

Implemented adapters for various formats:

* **HTML Adapter**: Exports embed original urls as html links
* **Markdown Adapter**: Exports embed original urls as markdown links
* **Plain Text Adapter**: Exports embed original urls as link text

## To Be Continued:
- [ ] **UI Optimization**
- [ ] **Edgeless Mode Support**
- [ ] **Mobile Support**
2025-03-13 04:11:46 +00:00
Saul-Mirone 12bc142809 refactor(editor): remove blocks package (#10708) 2025-03-09 05:44:26 +00:00