ФреймворкJavaScript

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

Живой интерактивный iframe для вставленного URL провайдера (YouTube, Vimeo, Figma, CodePen и ещё более 100 сервисов) — как «Create embed» в Notion. Работает целиком на клиенте: URL сопоставляется со встроенным реестром встраиваний и превращается в разрешённый провайдером URL для iframe. По умолчанию встраиваются только URL, найденные в реестре; установите на уровне редактора `linkPaste.allowGenericEmbed: true`, чтобы встраивать и несовпавшие https-URL — в общий iframe в песочнице (сохраняется с пустым `service`). Поддерживаются изменение размера (у провайдеров документов — Google Docs, Sheets, Slides, Forms и Drive — есть ещё нижний захват для настройки высоты встраивания), выравнивание (влево, по центру, вправо) и необязательная подпись.

Импорт

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,
    },
  },
});