ФреймворкJavaScript

Встраивание: адаптивные внешние виджеты

A live interactive iframe for a pasted provider URL (YouTube, Vimeo, Figma, CodePen, and 100+ other services), like Notion’s "Create embed". Pure client-side: the URL is matched against a built-in embed registry and resolved into a provider-sanctioned iframe URL — only registry-matched URLs are ever embedded. Supports resizing (document-style providers such as Google Docs, Sheets, Slides, Forms and Drive also get a bottom handle for adjusting the embed height), alignment (left/center/right), and an optional caption.

Импорт

TypeScript

import { Embed } from '@bloklabs/core/tools';

Формат данных

TypeScript

interface EmbedData {
  service: string;        // Registry service key, e.g. "youtube"
  source: string;         // Original pasted URL
  embed: string;          // Resolved provider iframe URL
  kind?: 'iframe' | 'script'; // How the embed is rendered
  width?: number;         // Intrinsic width in pixels
  height?: number;        // Intrinsic height in pixels (user-adjustable for document-style providers)
  widthPercent?: number;  // Rendered width as % of the editor column (default 100)
  alignment?: 'left' | 'center' | 'right'; // Placement (default center)
  caption?: string;       // Caption HTML content
  captionVisible?: boolean; // Whether the caption field is shown
}

JSON

{
  "id": "emb001",
  "type": "embed",
  "data": {
    "service": "youtube",
    "source": "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
    "embed": "https://www.youtube.com/embed/dQw4w9WgXcQ",
    "kind": "iframe",
    "width": 580,
    "height": 320
  }
}

Пример использования

TypeScript

import { Blok } from '@bloklabs/core';
import { Embed } from '@bloklabs/core/tools';

const editor = new Blok({
  holder: 'editor',
  tools: {
    embed: {
      class: Embed,
    },
  },
});