BlockSuite

Appearance

BlockSuite API Documentation / @blocksuite/affine-block-embed

@blocksuite/affine-block-embed ​

Classes ​

Extension ​

EdgelessClipboardEmbedFigmaConfig ​

Understanding Extensions ​

Extensions provide a way to extend the functionality of a system using dependency injection. They allow you to register services, implementations, and factories in the DI container, which can then be retrieved and used by different parts of the application.

Extensions are particularly useful for:

  • Registering different implementations for different types
  • Creating pluggable architecture where components can be added or removed
  • Managing dependencies between different parts of the application

Usage Example: Fruit Processing System ​

Let's consider a fruit processing system where different types of fruits need different processing methods. We'll show how to implement this using extensions.

Step 1: Define the interfaces ​

ts
interface FruitProcessor {
  process(fruit: Fruit): void;
}

interface Fruit {
  type: string;
  // other properties
}

Step 2: Create a service identifier ​

ts
import { createIdentifier } from '@blocksuite/global/di';

const FruitProcessorProvider = createIdentifier<FruitProcessor>('fruit-processor-provider');

Step 3: Create implementations ​

ts
class AppleProcessor implements FruitProcessor {
  process(fruit: Fruit): void {
    console.log('Slicing apple');
    // Apple-specific processing
  }
}

class BananaProcessor implements FruitProcessor {
  process(fruit: Fruit): void {
    console.log('Peeling banana');
    // Banana-specific processing
  }
}

Step 4: Create an extension factory ​

ts
const FruitProcessorExtension = (
  fruitType: string,
  implementation: new () => FruitProcessor
): ExtensionType => {
  return {
    setup: di => {
      di.addImpl(FruitProcessorProvider(fruitType), implementation);
    }
  };
};

Step 5: Create concrete extensions ​

ts
export const AppleProcessorExtension = FruitProcessorExtension('apple', AppleProcessor);
export const BananaProcessorExtension = FruitProcessorExtension('banana', BananaProcessor);

Step 6: Use the extensions ​

ts
import { Container } from '@blocksuite/global/di';

class FruitProcessingSystem {
  provider: ServiceProvider;

  constructor(extensions: ExtensionType[]) {
    const container = new Container();

    // Set up all extensions
    extensions.forEach(ext => ext.setup(container));

    // Create a provider from the container
    this.provider = container.provider();
  }

  processFruit(fruit: Fruit) {
    // Get the appropriate processor based on fruit type
    const processor = this.provider.get(FruitProcessorProvider(fruit.type));

    // Process the fruit
    processor.process(fruit);
  }
}

// Initialize the system with extensions
const system = new FruitProcessingSystem([
  AppleProcessorExtension,
  BananaProcessorExtension
]);

// Use the system
system.processFruit({ type: 'apple' });  // Output: Slicing apple
system.processFruit({ type: 'banana' }); // Output: Peeling banana

Note: We deliberately used a non-block specific example here. In BlockSuite, the extension pattern can be applied to any entity that can be configured by third parties, not just blocks. This includes different tools in the whiteboard, different column types in database blocks, and many other extensible components. The pattern remains the same regardless of what you're extending.

Extends ​
Constructors ​
Properties ​
key ​

readonly static key: "affine:embed-figma" = 'affine:embed-figma'

Overrides ​

EdgelessClipboardConfig.key

Accessors ​
Methods ​
createBlock() ​

createBlock(figmaEmbed): string | null

Parameters ​
figmaEmbed ​

BlockSnapshot

Returns ​

string | null

Overrides ​

EdgelessClipboardConfig.createBlock

EdgelessClipboardEmbedGithubConfig ​

Understanding Extensions ​

Extensions provide a way to extend the functionality of a system using dependency injection. They allow you to register services, implementations, and factories in the DI container, which can then be retrieved and used by different parts of the application.

Extensions are particularly useful for:

  • Registering different implementations for different types
  • Creating pluggable architecture where components can be added or removed
  • Managing dependencies between different parts of the application

Usage Example: Fruit Processing System ​

Let's consider a fruit processing system where different types of fruits need different processing methods. We'll show how to implement this using extensions.

Step 1: Define the interfaces ​

ts
interface FruitProcessor {
  process(fruit: Fruit): void;
}

interface Fruit {
  type: string;
  // other properties
}

Step 2: Create a service identifier ​

ts
import { createIdentifier } from '@blocksuite/global/di';

const FruitProcessorProvider = createIdentifier<FruitProcessor>('fruit-processor-provider');

Step 3: Create implementations ​

ts
class AppleProcessor implements FruitProcessor {
  process(fruit: Fruit): void {
    console.log('Slicing apple');
    // Apple-specific processing
  }
}

class BananaProcessor implements FruitProcessor {
  process(fruit: Fruit): void {
    console.log('Peeling banana');
    // Banana-specific processing
  }
}

Step 4: Create an extension factory ​

ts
const FruitProcessorExtension = (
  fruitType: string,
  implementation: new () => FruitProcessor
): ExtensionType => {
  return {
    setup: di => {
      di.addImpl(FruitProcessorProvider(fruitType), implementation);
    }
  };
};

Step 5: Create concrete extensions ​

ts
export const AppleProcessorExtension = FruitProcessorExtension('apple', AppleProcessor);
export const BananaProcessorExtension = FruitProcessorExtension('banana', BananaProcessor);

Step 6: Use the extensions ​

ts
import { Container } from '@blocksuite/global/di';

class FruitProcessingSystem {
  provider: ServiceProvider;

  constructor(extensions: ExtensionType[]) {
    const container = new Container();

    // Set up all extensions
    extensions.forEach(ext => ext.setup(container));

    // Create a provider from the container
    this.provider = container.provider();
  }

  processFruit(fruit: Fruit) {
    // Get the appropriate processor based on fruit type
    const processor = this.provider.get(FruitProcessorProvider(fruit.type));

    // Process the fruit
    processor.process(fruit);
  }
}

// Initialize the system with extensions
const system = new FruitProcessingSystem([
  AppleProcessorExtension,
  BananaProcessorExtension
]);

// Use the system
system.processFruit({ type: 'apple' });  // Output: Slicing apple
system.processFruit({ type: 'banana' }); // Output: Peeling banana

Note: We deliberately used a non-block specific example here. In BlockSuite, the extension pattern can be applied to any entity that can be configured by third parties, not just blocks. This includes different tools in the whiteboard, different column types in database blocks, and many other extensible components. The pattern remains the same regardless of what you're extending.

Extends ​
Constructors ​
Properties ​
key ​

readonly static key: "affine:embed-github" = 'affine:embed-github'

Overrides ​

EdgelessClipboardConfig.key

Accessors ​
Methods ​
createBlock() ​

createBlock(githubEmbed): string | null

Parameters ​
githubEmbed ​

BlockSnapshot

Returns ​

string | null

Overrides ​

EdgelessClipboardConfig.createBlock

EdgelessClipboardEmbedHtmlConfig ​

Understanding Extensions ​

Extensions provide a way to extend the functionality of a system using dependency injection. They allow you to register services, implementations, and factories in the DI container, which can then be retrieved and used by different parts of the application.

Extensions are particularly useful for:

  • Registering different implementations for different types
  • Creating pluggable architecture where components can be added or removed
  • Managing dependencies between different parts of the application

Usage Example: Fruit Processing System ​

Let's consider a fruit processing system where different types of fruits need different processing methods. We'll show how to implement this using extensions.

Step 1: Define the interfaces ​

ts
interface FruitProcessor {
  process(fruit: Fruit): void;
}

interface Fruit {
  type: string;
  // other properties
}

Step 2: Create a service identifier ​

ts
import { createIdentifier } from '@blocksuite/global/di';

const FruitProcessorProvider = createIdentifier<FruitProcessor>('fruit-processor-provider');

Step 3: Create implementations ​

ts
class AppleProcessor implements FruitProcessor {
  process(fruit: Fruit): void {
    console.log('Slicing apple');
    // Apple-specific processing
  }
}

class BananaProcessor implements FruitProcessor {
  process(fruit: Fruit): void {
    console.log('Peeling banana');
    // Banana-specific processing
  }
}

Step 4: Create an extension factory ​

ts
const FruitProcessorExtension = (
  fruitType: string,
  implementation: new () => FruitProcessor
): ExtensionType => {
  return {
    setup: di => {
      di.addImpl(FruitProcessorProvider(fruitType), implementation);
    }
  };
};

Step 5: Create concrete extensions ​

ts
export const AppleProcessorExtension = FruitProcessorExtension('apple', AppleProcessor);
export const BananaProcessorExtension = FruitProcessorExtension('banana', BananaProcessor);

Step 6: Use the extensions ​

ts
import { Container } from '@blocksuite/global/di';

class FruitProcessingSystem {
  provider: ServiceProvider;

  constructor(extensions: ExtensionType[]) {
    const container = new Container();

    // Set up all extensions
    extensions.forEach(ext => ext.setup(container));

    // Create a provider from the container
    this.provider = container.provider();
  }

  processFruit(fruit: Fruit) {
    // Get the appropriate processor based on fruit type
    const processor = this.provider.get(FruitProcessorProvider(fruit.type));

    // Process the fruit
    processor.process(fruit);
  }
}

// Initialize the system with extensions
const system = new FruitProcessingSystem([
  AppleProcessorExtension,
  BananaProcessorExtension
]);

// Use the system
system.processFruit({ type: 'apple' });  // Output: Slicing apple
system.processFruit({ type: 'banana' }); // Output: Peeling banana

Note: We deliberately used a non-block specific example here. In BlockSuite, the extension pattern can be applied to any entity that can be configured by third parties, not just blocks. This includes different tools in the whiteboard, different column types in database blocks, and many other extensible components. The pattern remains the same regardless of what you're extending.

Extends ​
Constructors ​
Properties ​
key ​

readonly static key: "affine:embed-html" = 'affine:embed-html'

Overrides ​

EdgelessClipboardConfig.key

Accessors ​
Methods ​
createBlock() ​

createBlock(htmlEmbed): string | null

Parameters ​
htmlEmbed ​

BlockSnapshot

Returns ​

string | null

Overrides ​

EdgelessClipboardConfig.createBlock

EdgelessClipboardEmbedIframeConfig ​

Understanding Extensions ​

Extensions provide a way to extend the functionality of a system using dependency injection. They allow you to register services, implementations, and factories in the DI container, which can then be retrieved and used by different parts of the application.

Extensions are particularly useful for:

  • Registering different implementations for different types
  • Creating pluggable architecture where components can be added or removed
  • Managing dependencies between different parts of the application

Usage Example: Fruit Processing System ​

Let's consider a fruit processing system where different types of fruits need different processing methods. We'll show how to implement this using extensions.

Step 1: Define the interfaces ​

ts
interface FruitProcessor {
  process(fruit: Fruit): void;
}

interface Fruit {
  type: string;
  // other properties
}

Step 2: Create a service identifier ​

ts
import { createIdentifier } from '@blocksuite/global/di';

const FruitProcessorProvider = createIdentifier<FruitProcessor>('fruit-processor-provider');

Step 3: Create implementations ​

ts
class AppleProcessor implements FruitProcessor {
  process(fruit: Fruit): void {
    console.log('Slicing apple');
    // Apple-specific processing
  }
}

class BananaProcessor implements FruitProcessor {
  process(fruit: Fruit): void {
    console.log('Peeling banana');
    // Banana-specific processing
  }
}

Step 4: Create an extension factory ​

ts
const FruitProcessorExtension = (
  fruitType: string,
  implementation: new () => FruitProcessor
): ExtensionType => {
  return {
    setup: di => {
      di.addImpl(FruitProcessorProvider(fruitType), implementation);
    }
  };
};

Step 5: Create concrete extensions ​

ts
export const AppleProcessorExtension = FruitProcessorExtension('apple', AppleProcessor);
export const BananaProcessorExtension = FruitProcessorExtension('banana', BananaProcessor);

Step 6: Use the extensions ​

ts
import { Container } from '@blocksuite/global/di';

class FruitProcessingSystem {
  provider: ServiceProvider;

  constructor(extensions: ExtensionType[]) {
    const container = new Container();

    // Set up all extensions
    extensions.forEach(ext => ext.setup(container));

    // Create a provider from the container
    this.provider = container.provider();
  }

  processFruit(fruit: Fruit) {
    // Get the appropriate processor based on fruit type
    const processor = this.provider.get(FruitProcessorProvider(fruit.type));

    // Process the fruit
    processor.process(fruit);
  }
}

// Initialize the system with extensions
const system = new FruitProcessingSystem([
  AppleProcessorExtension,
  BananaProcessorExtension
]);

// Use the system
system.processFruit({ type: 'apple' });  // Output: Slicing apple
system.processFruit({ type: 'banana' }); // Output: Peeling banana

Note: We deliberately used a non-block specific example here. In BlockSuite, the extension pattern can be applied to any entity that can be configured by third parties, not just blocks. This includes different tools in the whiteboard, different column types in database blocks, and many other extensible components. The pattern remains the same regardless of what you're extending.

Extends ​
Constructors ​
Properties ​
key ​

readonly static key: "affine:embed-iframe" = 'affine:embed-iframe'

Overrides ​

EdgelessClipboardConfig.key

Accessors ​
Methods ​
createBlock() ​

createBlock(embedIframe): string | null

Parameters ​
embedIframe ​

BlockSnapshot

Returns ​

string | null

Overrides ​

EdgelessClipboardConfig.createBlock

EdgelessClipboardEmbedLoomConfig ​

Understanding Extensions ​

Extensions provide a way to extend the functionality of a system using dependency injection. They allow you to register services, implementations, and factories in the DI container, which can then be retrieved and used by different parts of the application.

Extensions are particularly useful for:

  • Registering different implementations for different types
  • Creating pluggable architecture where components can be added or removed
  • Managing dependencies between different parts of the application

Usage Example: Fruit Processing System ​

Let's consider a fruit processing system where different types of fruits need different processing methods. We'll show how to implement this using extensions.

Step 1: Define the interfaces ​

ts
interface FruitProcessor {
  process(fruit: Fruit): void;
}

interface Fruit {
  type: string;
  // other properties
}

Step 2: Create a service identifier ​

ts
import { createIdentifier } from '@blocksuite/global/di';

const FruitProcessorProvider = createIdentifier<FruitProcessor>('fruit-processor-provider');

Step 3: Create implementations ​

ts
class AppleProcessor implements FruitProcessor {
  process(fruit: Fruit): void {
    console.log('Slicing apple');
    // Apple-specific processing
  }
}

class BananaProcessor implements FruitProcessor {
  process(fruit: Fruit): void {
    console.log('Peeling banana');
    // Banana-specific processing
  }
}

Step 4: Create an extension factory ​

ts
const FruitProcessorExtension = (
  fruitType: string,
  implementation: new () => FruitProcessor
): ExtensionType => {
  return {
    setup: di => {
      di.addImpl(FruitProcessorProvider(fruitType), implementation);
    }
  };
};

Step 5: Create concrete extensions ​

ts
export const AppleProcessorExtension = FruitProcessorExtension('apple', AppleProcessor);
export const BananaProcessorExtension = FruitProcessorExtension('banana', BananaProcessor);

Step 6: Use the extensions ​

ts
import { Container } from '@blocksuite/global/di';

class FruitProcessingSystem {
  provider: ServiceProvider;

  constructor(extensions: ExtensionType[]) {
    const container = new Container();

    // Set up all extensions
    extensions.forEach(ext => ext.setup(container));

    // Create a provider from the container
    this.provider = container.provider();
  }

  processFruit(fruit: Fruit) {
    // Get the appropriate processor based on fruit type
    const processor = this.provider.get(FruitProcessorProvider(fruit.type));

    // Process the fruit
    processor.process(fruit);
  }
}

// Initialize the system with extensions
const system = new FruitProcessingSystem([
  AppleProcessorExtension,
  BananaProcessorExtension
]);

// Use the system
system.processFruit({ type: 'apple' });  // Output: Slicing apple
system.processFruit({ type: 'banana' }); // Output: Peeling banana

Note: We deliberately used a non-block specific example here. In BlockSuite, the extension pattern can be applied to any entity that can be configured by third parties, not just blocks. This includes different tools in the whiteboard, different column types in database blocks, and many other extensible components. The pattern remains the same regardless of what you're extending.

Extends ​
Constructors ​
Properties ​
key ​

readonly static key: "affine:embed-loom" = 'affine:embed-loom'

Overrides ​

EdgelessClipboardConfig.key

Accessors ​
Methods ​
createBlock() ​

createBlock(loomEmbed): string | null

Parameters ​
loomEmbed ​

BlockSnapshot

Returns ​

string | null

Overrides ​

EdgelessClipboardConfig.createBlock

EdgelessClipboardEmbedYoutubeConfig ​

Understanding Extensions ​

Extensions provide a way to extend the functionality of a system using dependency injection. They allow you to register services, implementations, and factories in the DI container, which can then be retrieved and used by different parts of the application.

Extensions are particularly useful for:

  • Registering different implementations for different types
  • Creating pluggable architecture where components can be added or removed
  • Managing dependencies between different parts of the application

Usage Example: Fruit Processing System ​

Let's consider a fruit processing system where different types of fruits need different processing methods. We'll show how to implement this using extensions.

Step 1: Define the interfaces ​

ts
interface FruitProcessor {
  process(fruit: Fruit): void;
}

interface Fruit {
  type: string;
  // other properties
}

Step 2: Create a service identifier ​

ts
import { createIdentifier } from '@blocksuite/global/di';

const FruitProcessorProvider = createIdentifier<FruitProcessor>('fruit-processor-provider');

Step 3: Create implementations ​

ts
class AppleProcessor implements FruitProcessor {
  process(fruit: Fruit): void {
    console.log('Slicing apple');
    // Apple-specific processing
  }
}

class BananaProcessor implements FruitProcessor {
  process(fruit: Fruit): void {
    console.log('Peeling banana');
    // Banana-specific processing
  }
}

Step 4: Create an extension factory ​

ts
const FruitProcessorExtension = (
  fruitType: string,
  implementation: new () => FruitProcessor
): ExtensionType => {
  return {
    setup: di => {
      di.addImpl(FruitProcessorProvider(fruitType), implementation);
    }
  };
};

Step 5: Create concrete extensions ​

ts
export const AppleProcessorExtension = FruitProcessorExtension('apple', AppleProcessor);
export const BananaProcessorExtension = FruitProcessorExtension('banana', BananaProcessor);

Step 6: Use the extensions ​

ts
import { Container } from '@blocksuite/global/di';

class FruitProcessingSystem {
  provider: ServiceProvider;

  constructor(extensions: ExtensionType[]) {
    const container = new Container();

    // Set up all extensions
    extensions.forEach(ext => ext.setup(container));

    // Create a provider from the container
    this.provider = container.provider();
  }

  processFruit(fruit: Fruit) {
    // Get the appropriate processor based on fruit type
    const processor = this.provider.get(FruitProcessorProvider(fruit.type));

    // Process the fruit
    processor.process(fruit);
  }
}

// Initialize the system with extensions
const system = new FruitProcessingSystem([
  AppleProcessorExtension,
  BananaProcessorExtension
]);

// Use the system
system.processFruit({ type: 'apple' });  // Output: Slicing apple
system.processFruit({ type: 'banana' }); // Output: Peeling banana

Note: We deliberately used a non-block specific example here. In BlockSuite, the extension pattern can be applied to any entity that can be configured by third parties, not just blocks. This includes different tools in the whiteboard, different column types in database blocks, and many other extensible components. The pattern remains the same regardless of what you're extending.

Extends ​
Constructors ​
Properties ​
key ​

readonly static key: "affine:embed-youtube" = 'affine:embed-youtube'

Overrides ​

EdgelessClipboardConfig.key

Accessors ​
Methods ​
createBlock() ​

createBlock(youtubeEmbed): string | null

Parameters ​
youtubeEmbed ​

BlockSnapshot

Returns ​

string | null

Overrides ​

EdgelessClipboardConfig.createBlock

Other ​

EmbedBlockComponent<Model, Service, WidgetName> ​

Extends ​
  • CaptionedBlockComponent<Model, Service, WidgetName>
Extended by ​
Type Parameters ​
Model ​

Model extends BlockModel<EmbedProps> = BlockModel<EmbedProps>

Service ​

Service extends BlockService = BlockService

WidgetName ​

WidgetName extends string = string

Constructors ​
Other ​
_cardStyle ​

_cardStyle: EmbedCardStyle = 'horizontal'

blockDraggable ​

blockDraggable: boolean = true

embedContainerStyle ​

protected embedContainerStyle: StyleInfo = {}

The style of the embed card. You can use this to change the height and width of the card. By default, the height and width are set to _cardHeight and _cardWidth respectively.

isDraggingOnHost$ ​

readonly isDraggingOnHost$: Signal<boolean>

isResizing$ ​

readonly isResizing$: Signal<boolean>

selectedStyle$ ​

selectedStyle$: ReadonlySignal<ClassInfo> | null

showOverlay$ ​

readonly showOverlay$: ReadonlySignal<boolean>

_cardHeight ​
Get Signature ​

get _cardHeight(): number

The height of the current embed card. Changes based on the card style.

Returns ​

number

_cardWidth ​
Get Signature ​

get _cardWidth(): number

The width of the current embed card. Changes based on the card style.

Returns ​

number

blockContainerStyles ​
Overrides ​

CaptionedBlockComponent.blockContainerStyles

embedBlock ​
fetchAbortController ​
Get Signature ​

get fetchAbortController(): AbortController

Returns ​

AbortController

isCommentHighlighted ​
Get Signature ​

get isCommentHighlighted(): boolean

Returns ​

boolean

selectedStyle ​
Overrides ​

CaptionedBlockComponent.selectedStyle

useCaptionEditor ​
Overrides ​

CaptionedBlockComponent.useCaptionEditor

useZeroWidth ​
Overrides ​

CaptionedBlockComponent.useZeroWidth

connectedCallback() ​

connectedCallback(): void

Returns ​

void

Overrides ​

CaptionedBlockComponent.connectedCallback

disconnectedCallback() ​

disconnectedCallback(): void

Returns ​

void

Overrides ​

CaptionedBlockComponent.disconnectedCallback

renderEmbed() ​

renderEmbed(content): TemplateResult<1>

Parameters ​
content ​

() => TemplateResult

Returns ​

TemplateResult<1>

attributes ​
controllers ​
dev-mode ​
properties ​
rendering ​
styles ​
updates ​

EmbedFigmaBlockComponent ​

Extends ​
Constructors ​
Other ​
_cardStyle ​

_cardStyle: "figma" = 'figma'

Overrides ​

EmbedBlockComponent._cardStyle

_handleClick() ​

protected _handleClick(event): void

Parameters ​
event ​

MouseEvent

Returns ​

void

connectedCallback() ​

connectedCallback(): void

Returns ​

void

Overrides ​

EmbedBlockComponent.connectedCallback

open() ​

open(): void

Returns ​

void

refreshData() ​

refreshData(): void

Returns ​

void

renderBlock() ​

renderBlock(): TemplateResult<1>

Returns ​

TemplateResult<1>

Overrides ​

EmbedBlockComponent.renderBlock

attributes ​
controllers ​
dev-mode ​
properties ​
rendering ​
styles ​
styles ​

static styles: CSSResult

Array of styles to apply to the element. The styles should be defined using the css tag function, via constructible stylesheets, or imported from native CSS module scripts.

Note on Content Security Policy:

Element styles are implemented with <style> tags when the browser doesn't support adopted StyleSheets. To use such <style> tags with the style-src CSP directive, the style-src value must either include 'unsafe-inline' or nonce-<base64-value> with <base64-value> replaced be a server-generated nonce.

To provide a nonce to use on generated <style> elements, set window.litNonce to a server-generated nonce in your page's HTML, before loading application code:

html
<script>
  // Generated and unique per request:
  window.litNonce = 'a1b2c3d4';
</script>
Nocollapse ​
Overrides ​

EmbedBlockComponent.styles

updates ​

EmbedGithubBlockComponent ​

Extends ​
Constructors ​
Other ​
_cardStyle ​

_cardStyle: "list" | "horizontal" | "vertical" | "cube" = 'horizontal'

Overrides ​

EmbedBlockComponent._cardStyle

loading ​
_handleClick() ​

protected _handleClick(event): void

Parameters ​
event ​

MouseEvent

Returns ​

void

connectedCallback() ​

connectedCallback(): void

Returns ​

void

Overrides ​

EmbedBlockComponent.connectedCallback

open() ​

open(): void

Returns ​

void

refreshData() ​

refreshData(): void

Returns ​

void

refreshStatus() ​

refreshStatus(): void

Returns ​

void

renderBlock() ​

renderBlock(): TemplateResult<1>

Returns ​

TemplateResult<1>

Overrides ​

EmbedBlockComponent.renderBlock

attributes ​
controllers ​
dev-mode ​
properties ​
rendering ​
styles ​
styles ​

static styles: CSSResult

Array of styles to apply to the element. The styles should be defined using the css tag function, via constructible stylesheets, or imported from native CSS module scripts.

Note on Content Security Policy:

Element styles are implemented with <style> tags when the browser doesn't support adopted StyleSheets. To use such <style> tags with the style-src CSP directive, the style-src value must either include 'unsafe-inline' or nonce-<base64-value> with <base64-value> replaced be a server-generated nonce.

To provide a nonce to use on generated <style> elements, set window.litNonce to a server-generated nonce in your page's HTML, before loading application code:

html
<script>
  // Generated and unique per request:
  window.litNonce = 'a1b2c3d4';
</script>
Nocollapse ​
Overrides ​

EmbedBlockComponent.styles

updates ​

EmbedGithubBlockService ​

Deprecated ​

BlockService is deprecated. You should reconsider where to put your feature.

BlockService is a legacy extension that is used to provide services to the block. In the previous version of BlockSuite, block service provides a way to extend the block. However, in the new version, we recommend using the new extension system.

Extends ​
Constructors ​
Properties ​
flavour ​

readonly static flavour: `affine:embed-${string}` = EmbedGithubBlockSchema.model.flavour

Overrides ​

BlockService.flavour

Accessors ​
Methods ​
queryApiData() ​

queryApiData(embedGithubModel, signal?): Promise<Partial<EmbedGithubBlockUrlData>>

Parameters ​
embedGithubModel ​

EmbedGithubModel

signal? ​

AbortSignal

Returns ​

Promise<Partial<EmbedGithubBlockUrlData>>

queryUrlData() ​

queryUrlData(embedGithubModel, signal?): Promise<Partial<EmbedGithubBlockUrlData>>

Parameters ​
embedGithubModel ​

EmbedGithubModel

signal? ​

AbortSignal

Returns ​

Promise<Partial<EmbedGithubBlockUrlData>>

EmbedHtmlBlockComponent ​

Extends ​
Constructors ​
Other ​
_cardStyle ​

_cardStyle: "html" = 'html'

Overrides ​

EmbedBlockComponent._cardStyle

embedHtmlStyle ​

protected embedHtmlStyle: StyleInfo = {}

iframeWrapper ​
_handleClick() ​

protected _handleClick(event): void

Parameters ​
event ​

MouseEvent

Returns ​

void

close() ​

close(): void

Returns ​

void

connectedCallback() ​

connectedCallback(): void

Returns ​

void

Overrides ​

EmbedBlockComponent.connectedCallback

open() ​

open(): void

Returns ​

void

refreshData() ​

refreshData(): void

Returns ​

void

renderBlock() ​

renderBlock(): unknown

Returns ​

unknown

Overrides ​

EmbedBlockComponent.renderBlock

attributes ​
controllers ​
dev-mode ​
properties ​
rendering ​
styles ​
styles ​

static styles: CSSResult

Array of styles to apply to the element. The styles should be defined using the css tag function, via constructible stylesheets, or imported from native CSS module scripts.

Note on Content Security Policy:

Element styles are implemented with <style> tags when the browser doesn't support adopted StyleSheets. To use such <style> tags with the style-src CSP directive, the style-src value must either include 'unsafe-inline' or nonce-<base64-value> with <base64-value> replaced be a server-generated nonce.

To provide a nonce to use on generated <style> elements, set window.litNonce to a server-generated nonce in your page's HTML, before loading application code:

html
<script>
  // Generated and unique per request:
  window.litNonce = 'a1b2c3d4';
</script>
Nocollapse ​
Overrides ​

EmbedBlockComponent.styles

updates ​

EmbedIframeBlockComponent ​

Extends ​
Constructors ​
Other ​
blockDraggable ​

blockDraggable: boolean = true

error$ ​

readonly error$: Signal<Error | null>

hasError$ ​

readonly hasError$: ReadonlySignal<boolean>

iframeOptions ​

protected iframeOptions: IframeOptions | undefined = undefined

isDraggingOnHost$ ​

readonly isDraggingOnHost$: Signal<boolean>

isIdle$ ​

readonly isIdle$: ReadonlySignal<boolean>

isLoading$ ​

readonly isLoading$: ReadonlySignal<boolean>

isResizing$ ​

readonly isResizing$: Signal<boolean>

isSuccess$ ​

readonly isSuccess$: ReadonlySignal<boolean>

selectedBorderRadius$ ​

readonly selectedBorderRadius$: ReadonlySignal<number>

selectedStyle$ ​

selectedStyle$: ReadonlySignal<ClassInfo> | null

showOverlay$ ​

readonly showOverlay$: ReadonlySignal<boolean>

status$ ​

readonly status$: Signal<EmbedIframeStatus>

styles ​

static styles: CSSResult = embedIframeBlockStyles

Overrides ​

CaptionedBlockComponent.styles

_blockContainer ​
_horizontalCardHeight ​
Get Signature ​

get _horizontalCardHeight(): number

Returns ​

number

_statusCardOptions ​
Get Signature ​

get _statusCardOptions(): EmbedIframeStatusCardOptions

Returns ​

EmbedIframeStatusCardOptions

blockContainerStyles ​
Overrides ​

CaptionedBlockComponent.blockContainerStyles

embedIframeService ​
Get Signature ​

get embedIframeService(): EmbedIframeService

Returns ​

EmbedIframeService

inSurface ​
Get Signature ​

get inSurface(): boolean

Returns ​

boolean

linkPreviewService ​
Get Signature ​

get linkPreviewService(): LinkPreviewProvider

Returns ​

LinkPreviewProvider

notificationService ​
Get Signature ​

get notificationService(): NotificationService | null

Returns ​

NotificationService | null

readonly ​
Get Signature ​

get readonly(): boolean

Returns ​

boolean

selectedStyle ​
Overrides ​

CaptionedBlockComponent.selectedStyle

selectionManager ​
Get Signature ​

get selectionManager(): StoreSelectionExtension

Returns ​

StoreSelectionExtension

useCaptionEditor ​
Overrides ​

CaptionedBlockComponent.useCaptionEditor

useZeroWidth ​
Overrides ​

CaptionedBlockComponent.useZeroWidth

_handleClick() ​

protected _handleClick(): void

Returns ​

void

connectedCallback() ​

connectedCallback(): void

Returns ​

void

Overrides ​

CaptionedBlockComponent.connectedCallback

disconnectedCallback() ​

disconnectedCallback(): void

Returns ​

void

Overrides ​

CaptionedBlockComponent.disconnectedCallback

open() ​

open(): void

Returns ​

void

refreshData() ​

refreshData(): Promise<boolean>

Returns ​

Promise<boolean>

renderBlock() ​

renderBlock(): TemplateResult<1>

Returns ​

TemplateResult<1>

Overrides ​

CaptionedBlockComponent.renderBlock

toggleLinkInputPopup() ​

toggleLinkInputPopup(options?): void

Parameters ​
options? ​

EmbedLinkInputPopupOptions

Returns ​

void

attributes ​
controllers ​
dev-mode ​
properties ​
rendering ​
styles ​
updates ​

EmbedLoomBlockComponent ​

Extends ​
Constructors ​
Other ​
_cardStyle ​

_cardStyle: "video" = 'video'

Overrides ​

EmbedBlockComponent._cardStyle

loading ​
_handleClick() ​

protected _handleClick(event): void

Parameters ​
event ​

MouseEvent

Returns ​

void

connectedCallback() ​

connectedCallback(): void

Returns ​

void

Overrides ​

EmbedBlockComponent.connectedCallback

open() ​

open(): void

Returns ​

void

refreshData() ​

refreshData(): void

Returns ​

void

renderBlock() ​

renderBlock(): TemplateResult<1>

Returns ​

TemplateResult<1>

Overrides ​

EmbedBlockComponent.renderBlock

attributes ​
controllers ​
dev-mode ​
properties ​
rendering ​
styles ​
styles ​

static styles: CSSResult

Array of styles to apply to the element. The styles should be defined using the css tag function, via constructible stylesheets, or imported from native CSS module scripts.

Note on Content Security Policy:

Element styles are implemented with <style> tags when the browser doesn't support adopted StyleSheets. To use such <style> tags with the style-src CSP directive, the style-src value must either include 'unsafe-inline' or nonce-<base64-value> with <base64-value> replaced be a server-generated nonce.

To provide a nonce to use on generated <style> elements, set window.litNonce to a server-generated nonce in your page's HTML, before loading application code:

html
<script>
  // Generated and unique per request:
  window.litNonce = 'a1b2c3d4';
</script>
Nocollapse ​
Overrides ​

EmbedBlockComponent.styles

updates ​

EmbedLoomBlockService ​

Deprecated ​

BlockService is deprecated. You should reconsider where to put your feature.

BlockService is a legacy extension that is used to provide services to the block. In the previous version of BlockSuite, block service provides a way to extend the block. However, in the new version, we recommend using the new extension system.

Extends ​
Constructors ​
Properties ​
flavour ​

readonly static flavour: `affine:embed-${string}` = EmbedLoomBlockSchema.model.flavour

Overrides ​

BlockService.flavour

Accessors ​
Methods ​
queryUrlData() ​

queryUrlData(embedLoomModel, signal?): Promise<Partial<EmbedLoomBlockUrlData>>

Parameters ​
embedLoomModel ​

EmbedLoomModel

signal? ​

AbortSignal

Returns ​

Promise<Partial<EmbedLoomBlockUrlData>>

EmbedYoutubeBlockComponent ​

Extends ​
Constructors ​
Other ​
_cardStyle ​

_cardStyle: "video" = 'video'

Overrides ​

EmbedBlockComponent._cardStyle

loading ​
_handleClick() ​

protected _handleClick(event): void

Parameters ​
event ​

MouseEvent

Returns ​

void

connectedCallback() ​

connectedCallback(): void

Returns ​

void

Overrides ​

EmbedBlockComponent.connectedCallback

open() ​

open(): void

Returns ​

void

refreshData() ​

refreshData(): void

Returns ​

void

renderBlock() ​

renderBlock(): TemplateResult<1>

Returns ​

TemplateResult<1>

Overrides ​

EmbedBlockComponent.renderBlock

attributes ​
controllers ​
dev-mode ​
properties ​
rendering ​
styles ​
styles ​

static styles: CSSResult

Array of styles to apply to the element. The styles should be defined using the css tag function, via constructible stylesheets, or imported from native CSS module scripts.

Note on Content Security Policy:

Element styles are implemented with <style> tags when the browser doesn't support adopted StyleSheets. To use such <style> tags with the style-src CSP directive, the style-src value must either include 'unsafe-inline' or nonce-<base64-value> with <base64-value> replaced be a server-generated nonce.

To provide a nonce to use on generated <style> elements, set window.litNonce to a server-generated nonce in your page's HTML, before loading application code:

html
<script>
  // Generated and unique per request:
  window.litNonce = 'a1b2c3d4';
</script>
Nocollapse ​
Overrides ​

EmbedBlockComponent.styles

updates ​

EmbedYoutubeBlockService ​

Deprecated ​

BlockService is deprecated. You should reconsider where to put your feature.

BlockService is a legacy extension that is used to provide services to the block. In the previous version of BlockSuite, block service provides a way to extend the block. However, in the new version, we recommend using the new extension system.

Extends ​
Constructors ​
Properties ​
flavour ​

readonly static flavour: `affine:embed-${string}` = EmbedYoutubeBlockSchema.model.flavour

Overrides ​

BlockService.flavour

Accessors ​
Methods ​
queryUrlData() ​

queryUrlData(embedYoutubeModel, signal?): Promise<Partial<EmbedYoutubeBlockUrlData>>

Parameters ​
embedYoutubeModel ​

EmbedYoutubeModel

signal? ​

AbortSignal

Returns ​

Promise<Partial<EmbedYoutubeBlockUrlData>>

Type Aliases ​

EmbedIframeStatus ​

EmbedIframeStatus = "idle" | "loading" | "success" | "error"

ExternalEmbedBlockComponent ​

ExternalEmbedBlockComponent = EmbedFigmaBlockComponent | EmbedGithubBlockComponent | EmbedLoomBlockComponent | EmbedYoutubeBlockComponent

Variables ​

builtinSurfaceToolbarConfig ​

const builtinSurfaceToolbarConfig: object

Type Declaration ​

actions ​

readonly actions: [ToolbarAction, { actions: ({ id: string; label: string; disabled?: ; run: void; } | { disabled: true; id: string; label: string; run?: ; })[]; id: string; when: (ctx) => boolean; content: TemplateResult<1> | null; }, ToolbarAction, { id: "e.scale"; content: TemplateResult<1> | null; }]

when() ​

readonly when: (ctx) => boolean

Parameters ​
ctx ​

ToolbarContext

Returns ​

boolean

builtinToolbarConfig ​

const builtinToolbarConfig: object

Type Declaration ​

actions ​

readonly actions: [ToolbarAction, { actions: ({ id: string; label: string; disabled?: ; run: void; } | { disabled: true; id: string; label: string; run?: ; })[]; id: string; when: (ctx) => boolean; content: TemplateResult<1> | null; }, ToolbarAction, { icon: TemplateResult<1>; id: "e.convert-to-linked-doc"; tooltip: "Create Linked Doc"; run: void; }]

EMBED_HTML_MIN_HEIGHT ​

const EMBED_HTML_MIN_HEIGHT: 80 = 80

EMBED_HTML_MIN_WIDTH ​

const EMBED_HTML_MIN_WIDTH: 370 = 370

EMBED_IFRAME_DEFAULT_HEIGHT_IN_SURFACE ​

const EMBED_IFRAME_DEFAULT_HEIGHT_IN_SURFACE: 116 = 116

EMBED_IFRAME_DEFAULT_WIDTH_IN_SURFACE ​

const EMBED_IFRAME_DEFAULT_WIDTH_IN_SURFACE: 752 = 752

EmbedFigmaBlockHtmlAdapterExtension ​

const EmbedFigmaBlockHtmlAdapterExtension: ExtensionType & object

Type Declaration ​

identifier ​

identifier: ServiceIdentifier<BlockHtmlAdapterMatcher>

embedFigmaBlockHtmlAdapterMatcher ​

const embedFigmaBlockHtmlAdapterMatcher: BlockHtmlAdapterMatcher

embedFigmaBlockMarkdownAdapterMatcher ​

const embedFigmaBlockMarkdownAdapterMatcher: BlockMarkdownAdapterMatcher

EmbedFigmaBlockNotionHtmlAdapterExtension ​

const EmbedFigmaBlockNotionHtmlAdapterExtension: ExtensionType & object

Type Declaration ​

identifier ​

identifier: ServiceIdentifier<BlockNotionHtmlAdapterMatcher>

embedFigmaBlockNotionHtmlAdapterMatcher ​

const embedFigmaBlockNotionHtmlAdapterMatcher: BlockNotionHtmlAdapterMatcher

EmbedFigmaBlockPlainTextAdapterExtension ​

const EmbedFigmaBlockPlainTextAdapterExtension: ExtensionType & object

Type Declaration ​

identifier ​

identifier: ServiceIdentifier<BlockPlainTextAdapterMatcher>

embedFigmaBlockPlainTextAdapterMatcher ​

const embedFigmaBlockPlainTextAdapterMatcher: BlockPlainTextAdapterMatcher

EmbedFigmaMarkdownAdapterExtension ​

const EmbedFigmaMarkdownAdapterExtension: ExtensionType & object

Type Declaration ​

identifier ​

identifier: ServiceIdentifier<BlockMarkdownAdapterMatcher>

EmbedFigmaViewExtensions ​

const EmbedFigmaViewExtensions: ExtensionType[]

EmbedGithubBlockHtmlAdapterExtension ​

const EmbedGithubBlockHtmlAdapterExtension: ExtensionType & object

Type Declaration ​

identifier ​

identifier: ServiceIdentifier<BlockHtmlAdapterMatcher>

embedGithubBlockHtmlAdapterMatcher ​

const embedGithubBlockHtmlAdapterMatcher: BlockHtmlAdapterMatcher

embedGithubBlockMarkdownAdapterMatcher ​

const embedGithubBlockMarkdownAdapterMatcher: BlockMarkdownAdapterMatcher

EmbedGithubBlockNotionHtmlAdapterExtension ​

const EmbedGithubBlockNotionHtmlAdapterExtension: ExtensionType & object

Type Declaration ​

identifier ​

identifier: ServiceIdentifier<BlockNotionHtmlAdapterMatcher>

embedGithubBlockNotionHtmlAdapterMatcher ​

const embedGithubBlockNotionHtmlAdapterMatcher: BlockNotionHtmlAdapterMatcher

EmbedGithubBlockOptionConfig ​

const EmbedGithubBlockOptionConfig: ExtensionType

EmbedGithubBlockPlainTextAdapterExtension ​

const EmbedGithubBlockPlainTextAdapterExtension: ExtensionType & object

Type Declaration ​

identifier ​

identifier: ServiceIdentifier<BlockPlainTextAdapterMatcher>

embedGithubBlockPlainTextAdapterMatcher ​

const embedGithubBlockPlainTextAdapterMatcher: BlockPlainTextAdapterMatcher

EmbedGithubMarkdownAdapterExtension ​

const EmbedGithubMarkdownAdapterExtension: ExtensionType & object

Type Declaration ​

identifier ​

identifier: ServiceIdentifier<BlockMarkdownAdapterMatcher>

EmbedGithubViewExtensions ​

const EmbedGithubViewExtensions: ExtensionType[]

EmbedHtmlViewExtensions ​

const EmbedHtmlViewExtensions: ExtensionType[]

EmbedIframeBlockAdapterExtensions ​

const EmbedIframeBlockAdapterExtensions: ExtensionType[]

EmbedIframeBlockHtmlAdapterExtension ​

const EmbedIframeBlockHtmlAdapterExtension: ExtensionType & object

Type Declaration ​

identifier ​

identifier: ServiceIdentifier<BlockHtmlAdapterMatcher>

embedIframeBlockHtmlAdapterMatcher ​

const embedIframeBlockHtmlAdapterMatcher: BlockHtmlAdapterMatcher

EmbedIframeBlockMarkdownAdapterExtension ​

const EmbedIframeBlockMarkdownAdapterExtension: ExtensionType & object

Type Declaration ​

identifier ​

identifier: ServiceIdentifier<BlockMarkdownAdapterMatcher>

embedIframeBlockMarkdownAdapterMatcher ​

const embedIframeBlockMarkdownAdapterMatcher: BlockMarkdownAdapterMatcher

EmbedIframeBlockPlainTextAdapterExtension ​

const EmbedIframeBlockPlainTextAdapterExtension: ExtensionType & object

Type Declaration ​

identifier ​

identifier: ServiceIdentifier<BlockPlainTextAdapterMatcher>

embedIframeBlockPlainTextAdapterMatcher ​

const embedIframeBlockPlainTextAdapterMatcher: BlockPlainTextAdapterMatcher

EmbedIframeConfigExtensions ​

const EmbedIframeConfigExtensions: ExtensionType & object[]

EmbedIframeViewExtensions ​

const EmbedIframeViewExtensions: ExtensionType[]

EmbedLoomBlockHtmlAdapterExtension ​

const EmbedLoomBlockHtmlAdapterExtension: ExtensionType & object

Type Declaration ​

identifier ​

identifier: ServiceIdentifier<BlockHtmlAdapterMatcher>

embedLoomBlockHtmlAdapterMatcher ​

const embedLoomBlockHtmlAdapterMatcher: BlockHtmlAdapterMatcher

embedLoomBlockMarkdownAdapterMatcher ​

const embedLoomBlockMarkdownAdapterMatcher: BlockMarkdownAdapterMatcher

EmbedLoomBlockNotionHtmlAdapterExtension ​

const EmbedLoomBlockNotionHtmlAdapterExtension: ExtensionType & object

Type Declaration ​

identifier ​

identifier: ServiceIdentifier<BlockNotionHtmlAdapterMatcher>

embedLoomBlockNotionHtmlAdapterMatcher ​

const embedLoomBlockNotionHtmlAdapterMatcher: BlockNotionHtmlAdapterMatcher

EmbedLoomBlockOptionConfig ​

const EmbedLoomBlockOptionConfig: ExtensionType

EmbedLoomBlockPlainTextAdapterExtension ​

const EmbedLoomBlockPlainTextAdapterExtension: ExtensionType & object

Type Declaration ​

identifier ​

identifier: ServiceIdentifier<BlockPlainTextAdapterMatcher>

embedLoomBlockPlainTextAdapterMatcher ​

const embedLoomBlockPlainTextAdapterMatcher: BlockPlainTextAdapterMatcher

EmbedLoomMarkdownAdapterExtension ​

const EmbedLoomMarkdownAdapterExtension: ExtensionType & object

Type Declaration ​

identifier ​

identifier: ServiceIdentifier<BlockMarkdownAdapterMatcher>

EmbedLoomViewExtensions ​

const EmbedLoomViewExtensions: ExtensionType[]

embedNoteContentStyles ​

const embedNoteContentStyles: CSSResult

EmbedYoutubeBlockHtmlAdapterExtension ​

const EmbedYoutubeBlockHtmlAdapterExtension: ExtensionType & object

Type Declaration ​

identifier ​

identifier: ServiceIdentifier<BlockHtmlAdapterMatcher>

embedYoutubeBlockHtmlAdapterMatcher ​

const embedYoutubeBlockHtmlAdapterMatcher: BlockHtmlAdapterMatcher

embedYoutubeBlockMarkdownAdapterMatcher ​

const embedYoutubeBlockMarkdownAdapterMatcher: BlockMarkdownAdapterMatcher

EmbedYoutubeBlockNotionHtmlAdapterExtension ​

const EmbedYoutubeBlockNotionHtmlAdapterExtension: ExtensionType & object

Type Declaration ​

identifier ​

identifier: ServiceIdentifier<BlockNotionHtmlAdapterMatcher>

embedYoutubeBlockNotionHtmlAdapterMatcher ​

const embedYoutubeBlockNotionHtmlAdapterMatcher: BlockNotionHtmlAdapterMatcher

EmbedYoutubeBlockOptionConfig ​

const EmbedYoutubeBlockOptionConfig: ExtensionType

EmbedYoutubeBlockPlainTextAdapterExtension ​

const EmbedYoutubeBlockPlainTextAdapterExtension: ExtensionType & object

Type Declaration ​

identifier ​

identifier: ServiceIdentifier<BlockPlainTextAdapterMatcher>

embedYoutubeBlockPlainTextAdapterMatcher ​

const embedYoutubeBlockPlainTextAdapterMatcher: BlockPlainTextAdapterMatcher

EmbedYoutubeMarkdownAdapterExtension ​

const EmbedYoutubeMarkdownAdapterExtension: ExtensionType & object

Type Declaration ​

identifier ​

identifier: ServiceIdentifier<BlockMarkdownAdapterMatcher>

EmbedYoutubeViewExtensions ​

const EmbedYoutubeViewExtensions: ExtensionType[]

FigmaIcon ​

const FigmaIcon: TemplateResult<1>

figmaUrlRegex ​

const figmaUrlRegex: RegExp

GithubIcon ​

const GithubIcon: TemplateResult<1>

HtmlIcon ​

const HtmlIcon: TemplateResult<1>

insertEmbedIframeWithUrlCommand ​

const insertEmbedIframeWithUrlCommand: Command<{ url: string; }, { blockId: string; flavour: string; }>

insertEmptyEmbedIframeCommand ​

const insertEmptyEmbedIframeCommand: Command<{ linkInputPopupOptions?: EmbedLinkInputPopupOptions; place?: "after" | "before"; removeEmptyLine?: boolean; selectedModels?: BlockModel[]; }, { insertedEmbedIframeBlockId: Promise<string>; }>

LoomIcon ​

const LoomIcon: TemplateResult<1>

loomUrlRegex ​

const loomUrlRegex: RegExp

RENDER_CARD_THROTTLE_MS ​

const RENDER_CARD_THROTTLE_MS: 60 = 60

YoutubeIcon ​

const YoutubeIcon: TemplateResult<1>

youtubeUrlRegex ​

const youtubeUrlRegex: RegExp

Functions ​

canEmbedAsEmbedBlock() ​

canEmbedAsEmbedBlock(std, url): boolean

Parameters ​

std ​

BlockStdScope

url ​

string

Returns ​

boolean

canEmbedAsIframe() ​

canEmbedAsIframe(std, url): boolean

Check if the url can be embedded as an iframe

Parameters ​

std ​

BlockStdScope

The block std scope

url ​

string

The url to check

Returns ​

boolean

Whether the url can be embedded as an iframe

convertSelectedBlocksToLinkedDoc() ​

convertSelectedBlocksToLinkedDoc(std, doc, selectedModels, docTitle?): Promise<Store | undefined>

Parameters ​

std ​

BlockStdScope

doc ​

Store

selectedModels ​

DraftModel[] | Promise<DraftModel[]>

docTitle? ​

string

Returns ​

Promise<Store | undefined>

createBuiltinToolbarConfigExtension() ​

createBuiltinToolbarConfigExtension(flavour): ExtensionType[]

Parameters ​

flavour ​

string

Returns ​

ExtensionType[]

createEmbedBlockHtmlAdapterMatcher() ​

createEmbedBlockHtmlAdapterMatcher(flavour, __namedParameters): BlockHtmlAdapterMatcher

Parameters ​

flavour ​

string

__namedParameters ​
fromBlockSnapshot? ​

{ enter?: (o, context) => void | Promise<void>; leave?: (o, context) => void | Promise<void>; } = ...

fromBlockSnapshot.enter? ​

(o, context) => void | Promise<void>

Called when entering a BlockSnapshot walker node during traversal

fromBlockSnapshot.leave? ​

(o, context) => void | Promise<void>

Called when leaving a BlockSnapshot walker node during traversal

fromMatch? ​

(o) => boolean = ...

toBlockSnapshot? ​

{ enter?: (o, context) => void | Promise<void>; leave?: (o, context) => void | Promise<void>; } = {}

toBlockSnapshot.enter? ​

(o, context) => void | Promise<void>

Called when entering a target walker node during traversal

toBlockSnapshot.leave? ​

(o, context) => void | Promise<void>

Called when leaving a target walker node during traversal

toMatch? ​

(o) => boolean = ...

Returns ​

BlockHtmlAdapterMatcher

createEmbedBlockMarkdownAdapterMatcher() ​

createEmbedBlockMarkdownAdapterMatcher(flavour, __namedParameters): BlockMarkdownAdapterMatcher

Parameters ​

flavour ​

string

__namedParameters ​
fromBlockSnapshot? ​

{ enter?: (o, context) => void | Promise<void>; leave?: (o, context) => void | Promise<void>; } = ...

fromBlockSnapshot.enter? ​

(o, context) => void | Promise<void>

Called when entering a BlockSnapshot walker node during traversal

fromBlockSnapshot.leave? ​

(o, context) => void | Promise<void>

Called when leaving a BlockSnapshot walker node during traversal

fromMatch? ​

(o) => boolean = ...

toBlockSnapshot? ​

{ enter?: (o, context) => void | Promise<void>; leave?: (o, context) => void | Promise<void>; } = {}

toBlockSnapshot.enter? ​

(o, context) => void | Promise<void>

Called when entering a target walker node during traversal

toBlockSnapshot.leave? ​

(o, context) => void | Promise<void>

Called when leaving a target walker node during traversal

toMatch? ​

(o) => boolean = ...

Returns ​

BlockMarkdownAdapterMatcher

createEmbedBlockPlainTextAdapterMatcher() ​

createEmbedBlockPlainTextAdapterMatcher(flavour, __namedParameters): BlockPlainTextAdapterMatcher

Parameters ​

flavour ​

string

__namedParameters ​
fromBlockSnapshot? ​

{ enter?: (o, context) => void | Promise<void>; leave?: (o, context) => void | Promise<void>; } = ...

fromBlockSnapshot.enter? ​

(o, context) => void | Promise<void>

Called when entering a BlockSnapshot walker node during traversal

fromBlockSnapshot.leave? ​

(o, context) => void | Promise<void>

Called when leaving a BlockSnapshot walker node during traversal

fromMatch? ​

(o) => boolean = ...

toBlockSnapshot? ​

{ enter?: (o, context) => void | Promise<void>; leave?: (o, context) => void | Promise<void>; } = {}

toBlockSnapshot.enter? ​

(o, context) => void | Promise<void>

Called when entering a target walker node during traversal

toBlockSnapshot.leave? ​

(o, context) => void | Promise<void>

Called when leaving a target walker node during traversal

toMatch? ​

(o) => boolean = ...

Returns ​

BlockPlainTextAdapterMatcher

createEmbedEdgelessBlockInteraction() ​

createEmbedEdgelessBlockInteraction(flavour, config?): ExtensionType

Parameters ​

flavour ​

string

config? ​
resizeConstraint? ​

ResizeConstraint

Returns ​

ExtensionType

createLinkedDocFromSlice() ​

createLinkedDocFromSlice(std, doc, snapshots, docTitle?): Store

Parameters ​

std ​

BlockStdScope

doc ​

Store

snapshots ​

BlockSnapshot[]

docTitle? ​

string

Returns ​

Store

getDocContentWithMaxLength() ​

getDocContentWithMaxLength(doc, maxlength): string | undefined

Gets the document content with a max length.

Parameters ​

doc ​

Store

maxlength ​

number = 500

Returns ​

string | undefined

getEmbedCardIcons() ​

getEmbedCardIcons(theme): EmbedCardIcons

Parameters ​

theme ​

ColorScheme

Returns ​

EmbedCardIcons

getNotesFromDoc() ​

getNotesFromDoc(doc): BlockModel<object>[] | null

Parameters ​

doc ​

Store

Returns ​

BlockModel<object>[] | null

getTitleFromSelectedModels() ​

getTitleFromSelectedModels(selectedModels): string | undefined

Parameters ​

selectedModels ​

DraftModel[]

Returns ​

string | undefined

insertEmbedCard() ​

insertEmbedCard(std, properties): string | undefined

Parameters ​

std ​

BlockStdScope

properties ​

EmbedCardProperties

Returns ​

string | undefined

isEmptyDoc() ​

isEmptyDoc(doc, mode): boolean

Parameters ​

doc ​

Store | null

mode ​

DocMode

Returns ​

boolean

isEmptyNote() ​

isEmptyNote(note): boolean

Parameters ​

note ​

BlockModel

Returns ​

boolean

isExternalEmbedBlockComponent() ​

isExternalEmbedBlockComponent(block): block is ExternalEmbedBlockComponent

Parameters ​

block ​

BlockComponent

Returns ​

block is ExternalEmbedBlockComponent

notifyDocCreated() ​

notifyDocCreated(std): void

Parameters ​

std ​

BlockStdScope

Returns ​

void

promptDocTitle() ​

promptDocTitle(std, autofill?): Promise<string | null> | Promise<undefined>

Parameters ​

std ​

BlockStdScope

autofill? ​

string

Returns ​

Promise<string | null> | Promise<undefined>

toEdgelessEmbedBlock() ​

toEdgelessEmbedBlock<Model, Service, WidgetName, B>(block): B & (...args) => GfxBlockComponent

Type Parameters ​

Model ​

Model extends GfxBlockElementModel<EmbedProps>

Service ​

Service extends BlockService

WidgetName ​

WidgetName extends string

B ​

B extends typeof EmbedBlockComponent

Parameters ​

block ​

B

Returns ​

B & (...args) => GfxBlockComponent

Copyright © 2022-present Toeverything