Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-15 05:37:32 +00:00
Code Issues Packages Projects Releases Wiki Activity
9,514 Commits 62 Branches 704 Tags
b036ff5a459f2d9de973035dadf8e162b3ab78fb
Commit Graph

49 Commits

Author SHA1 Message Date
donteatfriedrice
bfec5dd594 fix(editor): markdown html and image import (#11712) 
Close
[BS-3145](https://linear.app/affine-design/issue/BS-3145/markdown-adapter-html-标签导入成-code-block)
[BS-3154](https://linear.app/affine-design/issue/BS-3154/[bug]-使用-markdown-with-files-导入到-affine-图片丢失)
 2025-04-16 04:27:39 +00:00
Saul-Mirone
b5c9741f18 feat(editor): extract keyboard toolbar widget (#11707) 2025-04-15 12:06:50 +00:00
donteatfriedrice
7aa87de5f7 fix(editor): markdown code preprocessor should handle link correctly (#11671) 
Close [BS-3117](https://linear.app/affine-design/issue/BS-3117/代码粘贴后出现多余的-和-符号)
 2025-04-14 08:28:43 +00:00
Saul-Mirone
4f9a4e739a feat(editor): extract linked doc widget package (#11589) 
Close [BS-2738](https://github.com/toeverything/AFFiNE/pull/11589)
 2025-04-11 14:06:16 +08:00
donteatfriedrice
d5aebc1421 fix(editor): enhance markdown latex preprocessing (#11597) 
Close [BS-2440](https://linear.app/affine-design/issue/BS-2440/inline-latex-markdown-adapter-需要更精确的处理)
 2025-04-10 12:15:24 +00:00
liuyi
e376aa57c5 chore: bring treeshake back (#11577) 2025-04-10 14:12:36 +08:00
donteatfriedrice
568a390b75 feat(editor): support markdown adapter preprocessed with latex delimiters (#11431) 
To close [BS-2870](https://linear.app/affine-design/issue/BS-2870/支持识别-和-[-包裹内容为公式)

## Add Markdown Preprocessor Extension and Enhanced LaTeX Support

### Markdown Preprocessor Extension
This PR introduces a new preprocessor extension for Markdown adapters that allows preprocessing of content before conversion:

Adds a new PreprocessorManager for handling text transformations
Introduces extensible preprocessor interface that supports different processing levels (block/slice/doc)

Integrates preprocessor extension into the existing Markdown adapter workflow

### LaTeX Support Enhancement
Extends LaTeX support to handle both traditional and alternative syntax:
Adds support for backslash LaTeX syntax:

Block math: ```\[...\] ``` alongside existing ```$$...$$```
Inline math: ```\(...\) ``` alongside existing ```$...$```

Implements LaTeX preprocessor to standardize syntax before conversion

Updates tests to cover both syntax variants
 2025-04-07 02:18:04 +00:00
Saul-Mirone
bb1270061a feat(editor): gfx template package (#11480) 2025-04-06 12:24:13 +00:00
Saul-Mirone
aed7f40568 refactor(editor): improve element adapters (#11473) 2025-04-05 09:40:13 +00:00
fundon
f374f2695f fix(core): add shortcuts to open doc dropdown menu (#11358) 
Closes: [BS-2992](https://linear.app/affine-design/issue/BS-2992/走查toolbar上的open-in-button)

[Screen Recording 2025-04-01 at 16.37.57.mov <span class="graphite__hidden">(uploaded via Graphite)</span> <img class="graphite__hidden" src="https://app.graphite.dev/api/v1/graphite/video/thumbnail/8ypiIKZXudF5a0tIgIzf/cf4b1baf-aa2c-4f37-9c62-f7202d0f7c42.mov" />](https://app.graphite.dev/media/video/8ypiIKZXudF5a0tIgIzf/cf4b1baf-aa2c-4f37-9c62-f7202d0f7c42.mov)
 2025-04-01 12:39: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
0a8d8e0a6b feat: seperate createDoc and createStore (#11182) 2025-03-26 11:03:47 +00:00
Saul-Mirone
1871428021 feat(editor): extensionize clipboards (#11172) 2025-03-25 12:09:24 +00:00
Saul-Mirone
e84c60f53d feat(editor): add provider for base adapter (#11169) 2025-03-25 12:09:23 +00:00
Saul-Mirone
4d3eee3bad feat(editor): brush gfx package (#11131) 2025-03-24 09:28:46 +00:00
Saul-Mirone
ef1ed383cb feat(editor): command for ungroup and group (#11116) 2025-03-24 15:34:38 +09:00
Flrande
4bacfbd640 feat(editor): support member node (#11075) 
Close [BS-2793](https://linear.app/affine-design/issue/BS-2793/inline-member)
 2025-03-24 05:57:03 +00:00
Saul-Mirone
8e08b9000d feat(editor): create gfx mindmap package (#11100) 2025-03-24 03:14:22 +00:00
Saul-Mirone
1f0fc9d47a feat(editor): gfx connector package (#11091) 2025-03-22 14:39:05 +00:00
Saul-Mirone
e3735f40b8 feat(editor): gfx note package (#11088) 2025-03-22 14:39:04 +00:00
Saul-Mirone
6777c16683 feat(editor): edgeless toolbar widget package (#11064) 2025-03-21 11:45:32 +00:00
Saul-Mirone
8109c718c7 feat(editor): gfx shape package (#11060) 2025-03-21 06:13:11 +00:00
Saul-Mirone
e50d09db50 feat(editor): latex inline package (#11051) 2025-03-21 01:38:08 +00:00
Saul-Mirone
57388e4cf7 feat(editor): footnote inline package (#11049) 2025-03-20 16:18:22 +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
Saul-Mirone
92d76ba571 refactor(editor): merge inline to std (#11025) 2025-03-20 05:46:56 +00:00
fundon
54bc60aa4d refactor(editor): edgeless shape toolbar config extension (#10821) 2025-03-20 02:08:16 +00:00
fundon
e320552594 refactor(editor): edgeless note toolbar config extension (#10719) 2025-03-19 12:34:18 +00:00
fundon
d8567e669a refactor(editor): edgeless bookmark toolbar config extension (#10711) 2025-03-19 02:24:26 +00:00
zzj3720
3939cc1c52 feat(editor): support file column and member column for database block (#10932) 
close: BS-2630, BS-2631, BS-2629, BS-2632, BS-2635
 2025-03-18 14:51:45 +00:00
Saul-Mirone
3de7d85eea feat(editor): improve api for store, and add docs (#10941) 2025-03-17 16:30:59 +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
Mirone
cd63e0ed8b feat(editor): replace slot with rxjs subject (#10768) 2025-03-12 11:29:24 +09:00
doodlewind
ad36a9de35 refactor(editor): add gfx turbo renderer package (#10745) 
The `ViewportTurboRendererExtension` is now extracted from `@blocksuite/affine-shared` to `@blocksuite/affine-gfx-turbo-renderer` with minimal dependencies, mirroring the gfx text package in #10378.
 2025-03-11 03:21:52 +00:00
fundon
6244bbbd11 refactor(editor): move getTooltipWithShortcut to affine-tooltip-content-with-shortcut (#10743) 
I'm refactoring the edgeless note toolbar config extension and find that I need to move this.

cac05e720a/blocksuite/affine/blocks/block-root/src/widgets/element-toolbar/change-note-button.ts (L525)
 2025-03-10 11:58:58 +00:00
Saul-Mirone
cac05e720a refactor(editor): gfx text package (#10738) 2025-03-10 10:25:21 +00:00
Saul-Mirone
ec709925ee refactor(editor): orgnize exports (#10709) 2025-03-10 02:04:01 +00:00
Saul-Mirone
12bc142809 refactor(editor): remove blocks package (#10708) 2025-03-09 05:44:26 +00:00
Saul-Mirone
84e2dda3f8 refactor(editor): separate lit and slot in global (#10666) 2025-03-06 10:24:59 +00:00
Saul-Mirone
66d9d576e0 refactor(editor): add gfx entry in bs global package (#10612) 2025-03-04 12:46:50 +00:00
Saul-Mirone
f3218ab3bc refactor(editor): rename presets to integration test (#10340) 2025-02-21 06:26:03 +00:00
Saul-Mirone
2b3da1f0e9 fix: remove global, store and std in affine packages (#9785) 2025-01-20 06:14:46 +00:00
Saul-Mirone
5e51018c03 fix(editor): remove ts ignore (#9567) 2025-01-07 08:48:05 +00:00
Saul-Mirone
cfd64f1fa5 refactor(core): move workspace implementation to affine (#9504) 2025-01-03 08:13:57 +00:00
Mirone
30200ff86d chore: merge blocksuite source code (#9213) 2024-12-20 15:38:06 +08:00