@scrider/formatter 1.4.4 → 1.6.0

package/dist/index.d.cts

@@ -999,6 +999,25 @@ declare const tableColAlignFormat: Format<TableColAlignType>;
  */
 declare const blockFormat: Format<Record<string, unknown>>;
 
+/**
+ * Code Widget embed format (Phase 8 Part 3.5)
+ *
+ * Delta: { insert: { codeWidget: "https://codesandbox.io/s/abc123" } }
+ *
+ * Value is a URL to an interactive code playground (StackBlitz, CodeSandbox,
+ * Replit, CodePen, JSFiddle). Rendered as an <iframe> carrying a
+ * `data-code-widget` marker so it can be told apart from a plain video iframe
+ * during HTML → Delta (see videoFormat.match guard).
+ *
+ * Markdown: ![Widget](url)
+ * HTML: <iframe data-code-widget src="<embed-url>" frameborder="0" allowfullscreen>
+ *
+ * The src is run through `toCodeWidgetEmbedUrl` at render time, which is
+ * idempotent, so resize/float attributes and the Delta ↔ HTML round-trip stay
+ * stable regardless of whether the stored value is the user URL or embed URL.
+ */
+declare const codeWidgetFormat: Format<string>;
+
 /**
  * Divider (Horizontal Rule) embed format
  *
@@ -1580,6 +1599,26 @@ declare function escapeHtml(text: string): string;
  * Unescape HTML entities
  */
 declare function unescapeHtml(text: string): string;
+/**
+ * Convert a code-playground URL to an embeddable iframe URL (Phase 8 Part 3.5).
+ *
+ * Idempotent: a URL that is already in embed form is returned unchanged, so the
+ * Delta → HTML → Delta round-trip is stable regardless of which form is stored.
+ *
+ *   Provider     | User URL                         | Embed URL
+ *   -------------|----------------------------------|-----------------------------------
+ *   StackBlitz   | stackblitz.com/edit/{id}         | …?embed=1
+ *                | stackblitz.com/github/{u}/{r}    | …?embed=1
+ *   CodeSandbox  | codesandbox.io/s/{id}            | codesandbox.io/embed/{id}
+ *   Replit       | replit.com/@{u}/{repl}           | …?embed=true
+ *   CodePen      | codepen.io/{u}/pen/{id}          | codepen.io/{u}/embed/{id}
+ *   JSFiddle     | jsfiddle.net/{u}/{id}/           | jsfiddle.net/{u}/{id}/embedded/
+ *
+ * Unknown hosts are returned unchanged (the marker `data-code-widget` still
+ * makes them render as an iframe; auto-detection of bare URLs lives in the
+ * editor layer).
+ */
+declare function toCodeWidgetEmbedUrl(url: string): string;
 
 /**
  * GitHub-compatible slugify for heading anchor links.
@@ -1944,4 +1983,4 @@ declare function isTableNewlineOp(op: Op | undefined): boolean;
  */
 declare function extractTableRegion(ops: readonly Op[], hintOpIdx: number): TableRegion | null;
 
-export { ALERT_TYPES, type AlertBlockData, type AlertType, type AlignType, BOX_FLOAT_VALUES, BOX_OVERFLOW_VALUES, type BlockContext, type BlockHandler, BlockHandlerRegistry, type BlockRenderOptions, type BoxBlockData, type BoxFloat, type BoxOpAttributes, type BoxOverflow, BrowserDOMAdapter, type CellAlign, type CellData, type ColumnsBlockData, type DOMAdapter, type DOMDocument, type DOMDocumentFragment, type DOMElement, type DOMNode, type DOMNodeList, type DeltaToHtmlOptions, type DeltaToMarkdownOptions, type DocumentPresentation, type FootnotesBlockData, type Format, type FormatDefinition, type FormatMatchResult, type FormatScope, type HtmlToDeltaOptions, LINE_HEIGHT_BLOCK_TAGS, type ListType, type MarkdownToDeltaOptions, NODE_TYPE, NodeDOMAdapter, PARAGRAPH_SPACING_BLOCK_TAGS, Registry, type ResolvedDocumentPresentation, type ResolvedTablePresentation, SCRIDER_LINE_HEIGHT_KEY, SCRIDER_MARGIN_AFTER_KEY, SCRIDER_MARGIN_BEFORE_KEY, type SanitizeOptions, type TableBlockData, type TableCellAlign, type TableColAlignType, type TablePresentation, type TableRegion, alertBlockHandler, alignFormat, backgroundFormat, blockFormat, blockLineHeightStyleParts, blockMarginAfterStyleParts, blockMarginBeforeStyleParts, blockParagraphMarginStyleParts, blockPresentationStyleParts, blockquoteFormat, boldFormat, boxBlockHandler, browserAdapter, cloneDelta, codeBlockFormat, codeFormat, colorFormat, columnsBlockHandler, createDefaultBlockHandlers, createDefaultRegistry, defaultBlockFormats, defaultEmbedFormats, defaultFormats, defaultInlineFormats, deltaToHtml, deltaToMarkdown, dividerFormat, documentPresentationStyleParts, escapeHtml, extractBoxOpAttributes, extractTableRegion, fontFormat, footnoteRefFormat, footnotesBlockHandler, formulaFormat, getAdapter, getNamedColors, headerFormat, headerIdFormat, htmlToDelta, imageFormat, indentFormat, isAdapterAvailable, isElement, isRemarkAvailable, isTableNewlineOp, isTextNode, isValidColor, isValidHexColor, isZebraBodyRow, italicFormat, kbdFormat, linkFormat, listFormat, markFormat, markdownToDelta, markdownToDeltaSync, nodeAdapter, normalizeDelta, parseScriderLineHeightMultiplier, parseScriderMarginAfterEm, parseScriderMarginBeforeEm, parseScriderMarginEm, preloadRemark, resolveDocumentPresentation, resolveTablePresentation, sanitizeDelta, sizeFormat, slugify, slugifyWithDedup, softBreakFormat, strikeFormat, subscriptFormat, superscriptFormat, tableBlockHandler, tableColAlignFormat, tableColFormat, tableHeaderFormat, tableRowFormat, toHexColor, underlineFormat, unescapeHtml, validateDelta, videoFormat };
+export { ALERT_TYPES, type AlertBlockData, type AlertType, type AlignType, BOX_FLOAT_VALUES, BOX_OVERFLOW_VALUES, type BlockContext, type BlockHandler, BlockHandlerRegistry, type BlockRenderOptions, type BoxBlockData, type BoxFloat, type BoxOpAttributes, type BoxOverflow, BrowserDOMAdapter, type CellAlign, type CellData, type ColumnsBlockData, type DOMAdapter, type DOMDocument, type DOMDocumentFragment, type DOMElement, type DOMNode, type DOMNodeList, type DeltaToHtmlOptions, type DeltaToMarkdownOptions, type DocumentPresentation, type FootnotesBlockData, type Format, type FormatDefinition, type FormatMatchResult, type FormatScope, type HtmlToDeltaOptions, LINE_HEIGHT_BLOCK_TAGS, type ListType, type MarkdownToDeltaOptions, NODE_TYPE, NodeDOMAdapter, PARAGRAPH_SPACING_BLOCK_TAGS, Registry, type ResolvedDocumentPresentation, type ResolvedTablePresentation, SCRIDER_LINE_HEIGHT_KEY, SCRIDER_MARGIN_AFTER_KEY, SCRIDER_MARGIN_BEFORE_KEY, type SanitizeOptions, type TableBlockData, type TableCellAlign, type TableColAlignType, type TablePresentation, type TableRegion, alertBlockHandler, alignFormat, backgroundFormat, blockFormat, blockLineHeightStyleParts, blockMarginAfterStyleParts, blockMarginBeforeStyleParts, blockParagraphMarginStyleParts, blockPresentationStyleParts, blockquoteFormat, boldFormat, boxBlockHandler, browserAdapter, cloneDelta, codeBlockFormat, codeFormat, codeWidgetFormat, colorFormat, columnsBlockHandler, createDefaultBlockHandlers, createDefaultRegistry, defaultBlockFormats, defaultEmbedFormats, defaultFormats, defaultInlineFormats, deltaToHtml, deltaToMarkdown, dividerFormat, documentPresentationStyleParts, escapeHtml, extractBoxOpAttributes, extractTableRegion, fontFormat, footnoteRefFormat, footnotesBlockHandler, formulaFormat, getAdapter, getNamedColors, headerFormat, headerIdFormat, htmlToDelta, imageFormat, indentFormat, isAdapterAvailable, isElement, isRemarkAvailable, isTableNewlineOp, isTextNode, isValidColor, isValidHexColor, isZebraBodyRow, italicFormat, kbdFormat, linkFormat, listFormat, markFormat, markdownToDelta, markdownToDeltaSync, nodeAdapter, normalizeDelta, parseScriderLineHeightMultiplier, parseScriderMarginAfterEm, parseScriderMarginBeforeEm, parseScriderMarginEm, preloadRemark, resolveDocumentPresentation, resolveTablePresentation, sanitizeDelta, sizeFormat, slugify, slugifyWithDedup, softBreakFormat, strikeFormat, subscriptFormat, superscriptFormat, tableBlockHandler, tableColAlignFormat, tableColFormat, tableHeaderFormat, tableRowFormat, toCodeWidgetEmbedUrl, toHexColor, underlineFormat, unescapeHtml, validateDelta, videoFormat };

package/dist/index.d.ts

@@ -999,6 +999,25 @@ declare const tableColAlignFormat: Format<TableColAlignType>;
  */
 declare const blockFormat: Format<Record<string, unknown>>;
 
+/**
+ * Code Widget embed format (Phase 8 Part 3.5)
+ *
+ * Delta: { insert: { codeWidget: "https://codesandbox.io/s/abc123" } }
+ *
+ * Value is a URL to an interactive code playground (StackBlitz, CodeSandbox,
+ * Replit, CodePen, JSFiddle). Rendered as an <iframe> carrying a
+ * `data-code-widget` marker so it can be told apart from a plain video iframe
+ * during HTML → Delta (see videoFormat.match guard).
+ *
+ * Markdown: ![Widget](url)
+ * HTML: <iframe data-code-widget src="<embed-url>" frameborder="0" allowfullscreen>
+ *
+ * The src is run through `toCodeWidgetEmbedUrl` at render time, which is
+ * idempotent, so resize/float attributes and the Delta ↔ HTML round-trip stay
+ * stable regardless of whether the stored value is the user URL or embed URL.
+ */
+declare const codeWidgetFormat: Format<string>;
+
 /**
  * Divider (Horizontal Rule) embed format
  *
@@ -1580,6 +1599,26 @@ declare function escapeHtml(text: string): string;
  * Unescape HTML entities
  */
 declare function unescapeHtml(text: string): string;
+/**
+ * Convert a code-playground URL to an embeddable iframe URL (Phase 8 Part 3.5).
+ *
+ * Idempotent: a URL that is already in embed form is returned unchanged, so the
+ * Delta → HTML → Delta round-trip is stable regardless of which form is stored.
+ *
+ *   Provider     | User URL                         | Embed URL
+ *   -------------|----------------------------------|-----------------------------------
+ *   StackBlitz   | stackblitz.com/edit/{id}         | …?embed=1
+ *                | stackblitz.com/github/{u}/{r}    | …?embed=1
+ *   CodeSandbox  | codesandbox.io/s/{id}            | codesandbox.io/embed/{id}
+ *   Replit       | replit.com/@{u}/{repl}           | …?embed=true
+ *   CodePen      | codepen.io/{u}/pen/{id}          | codepen.io/{u}/embed/{id}
+ *   JSFiddle     | jsfiddle.net/{u}/{id}/           | jsfiddle.net/{u}/{id}/embedded/
+ *
+ * Unknown hosts are returned unchanged (the marker `data-code-widget` still
+ * makes them render as an iframe; auto-detection of bare URLs lives in the
+ * editor layer).
+ */
+declare function toCodeWidgetEmbedUrl(url: string): string;
 
 /**
  * GitHub-compatible slugify for heading anchor links.
@@ -1944,4 +1983,4 @@ declare function isTableNewlineOp(op: Op | undefined): boolean;
  */
 declare function extractTableRegion(ops: readonly Op[], hintOpIdx: number): TableRegion | null;
 
-export { ALERT_TYPES, type AlertBlockData, type AlertType, type AlignType, BOX_FLOAT_VALUES, BOX_OVERFLOW_VALUES, type BlockContext, type BlockHandler, BlockHandlerRegistry, type BlockRenderOptions, type BoxBlockData, type BoxFloat, type BoxOpAttributes, type BoxOverflow, BrowserDOMAdapter, type CellAlign, type CellData, type ColumnsBlockData, type DOMAdapter, type DOMDocument, type DOMDocumentFragment, type DOMElement, type DOMNode, type DOMNodeList, type DeltaToHtmlOptions, type DeltaToMarkdownOptions, type DocumentPresentation, type FootnotesBlockData, type Format, type FormatDefinition, type FormatMatchResult, type FormatScope, type HtmlToDeltaOptions, LINE_HEIGHT_BLOCK_TAGS, type ListType, type MarkdownToDeltaOptions, NODE_TYPE, NodeDOMAdapter, PARAGRAPH_SPACING_BLOCK_TAGS, Registry, type ResolvedDocumentPresentation, type ResolvedTablePresentation, SCRIDER_LINE_HEIGHT_KEY, SCRIDER_MARGIN_AFTER_KEY, SCRIDER_MARGIN_BEFORE_KEY, type SanitizeOptions, type TableBlockData, type TableCellAlign, type TableColAlignType, type TablePresentation, type TableRegion, alertBlockHandler, alignFormat, backgroundFormat, blockFormat, blockLineHeightStyleParts, blockMarginAfterStyleParts, blockMarginBeforeStyleParts, blockParagraphMarginStyleParts, blockPresentationStyleParts, blockquoteFormat, boldFormat, boxBlockHandler, browserAdapter, cloneDelta, codeBlockFormat, codeFormat, colorFormat, columnsBlockHandler, createDefaultBlockHandlers, createDefaultRegistry, defaultBlockFormats, defaultEmbedFormats, defaultFormats, defaultInlineFormats, deltaToHtml, deltaToMarkdown, dividerFormat, documentPresentationStyleParts, escapeHtml, extractBoxOpAttributes, extractTableRegion, fontFormat, footnoteRefFormat, footnotesBlockHandler, formulaFormat, getAdapter, getNamedColors, headerFormat, headerIdFormat, htmlToDelta, imageFormat, indentFormat, isAdapterAvailable, isElement, isRemarkAvailable, isTableNewlineOp, isTextNode, isValidColor, isValidHexColor, isZebraBodyRow, italicFormat, kbdFormat, linkFormat, listFormat, markFormat, markdownToDelta, markdownToDeltaSync, nodeAdapter, normalizeDelta, parseScriderLineHeightMultiplier, parseScriderMarginAfterEm, parseScriderMarginBeforeEm, parseScriderMarginEm, preloadRemark, resolveDocumentPresentation, resolveTablePresentation, sanitizeDelta, sizeFormat, slugify, slugifyWithDedup, softBreakFormat, strikeFormat, subscriptFormat, superscriptFormat, tableBlockHandler, tableColAlignFormat, tableColFormat, tableHeaderFormat, tableRowFormat, toHexColor, underlineFormat, unescapeHtml, validateDelta, videoFormat };
+export { ALERT_TYPES, type AlertBlockData, type AlertType, type AlignType, BOX_FLOAT_VALUES, BOX_OVERFLOW_VALUES, type BlockContext, type BlockHandler, BlockHandlerRegistry, type BlockRenderOptions, type BoxBlockData, type BoxFloat, type BoxOpAttributes, type BoxOverflow, BrowserDOMAdapter, type CellAlign, type CellData, type ColumnsBlockData, type DOMAdapter, type DOMDocument, type DOMDocumentFragment, type DOMElement, type DOMNode, type DOMNodeList, type DeltaToHtmlOptions, type DeltaToMarkdownOptions, type DocumentPresentation, type FootnotesBlockData, type Format, type FormatDefinition, type FormatMatchResult, type FormatScope, type HtmlToDeltaOptions, LINE_HEIGHT_BLOCK_TAGS, type ListType, type MarkdownToDeltaOptions, NODE_TYPE, NodeDOMAdapter, PARAGRAPH_SPACING_BLOCK_TAGS, Registry, type ResolvedDocumentPresentation, type ResolvedTablePresentation, SCRIDER_LINE_HEIGHT_KEY, SCRIDER_MARGIN_AFTER_KEY, SCRIDER_MARGIN_BEFORE_KEY, type SanitizeOptions, type TableBlockData, type TableCellAlign, type TableColAlignType, type TablePresentation, type TableRegion, alertBlockHandler, alignFormat, backgroundFormat, blockFormat, blockLineHeightStyleParts, blockMarginAfterStyleParts, blockMarginBeforeStyleParts, blockParagraphMarginStyleParts, blockPresentationStyleParts, blockquoteFormat, boldFormat, boxBlockHandler, browserAdapter, cloneDelta, codeBlockFormat, codeFormat, codeWidgetFormat, colorFormat, columnsBlockHandler, createDefaultBlockHandlers, createDefaultRegistry, defaultBlockFormats, defaultEmbedFormats, defaultFormats, defaultInlineFormats, deltaToHtml, deltaToMarkdown, dividerFormat, documentPresentationStyleParts, escapeHtml, extractBoxOpAttributes, extractTableRegion, fontFormat, footnoteRefFormat, footnotesBlockHandler, formulaFormat, getAdapter, getNamedColors, headerFormat, headerIdFormat, htmlToDelta, imageFormat, indentFormat, isAdapterAvailable, isElement, isRemarkAvailable, isTableNewlineOp, isTextNode, isValidColor, isValidHexColor, isZebraBodyRow, italicFormat, kbdFormat, linkFormat, listFormat, markFormat, markdownToDelta, markdownToDeltaSync, nodeAdapter, normalizeDelta, parseScriderLineHeightMultiplier, parseScriderMarginAfterEm, parseScriderMarginBeforeEm, parseScriderMarginEm, preloadRemark, resolveDocumentPresentation, resolveTablePresentation, sanitizeDelta, sizeFormat, slugify, slugifyWithDedup, softBreakFormat, strikeFormat, subscriptFormat, superscriptFormat, tableBlockHandler, tableColAlignFormat, tableColFormat, tableHeaderFormat, tableRowFormat, toCodeWidgetEmbedUrl, toHexColor, underlineFormat, unescapeHtml, validateDelta, videoFormat };

package/dist/index.js

@@ -1897,6 +1897,25 @@ var EMBED_RENDERERS = {
     }
     return `<video src="${escapeHtml(src)}" controls${float}${style}></video>`;
   },
+  codeWidget: (value, attrs) => {
+    const src = typeof value === "string" ? value : "";
+    const floatVal = attrs?.float;
+    const widthVal = attrs?.width;
+    const heightVal = attrs?.height;
+    const float = floatVal != null && typeof floatVal === "string" && floatVal !== "none" ? ` data-float="${escapeHtml(floatVal)}"` : "";
+    const styles = [];
+    if (widthVal != null && (typeof widthVal === "string" || typeof widthVal === "number")) {
+      const w = String(widthVal);
+      if (w && w !== "auto") styles.push(`width: ${/^\d+$/.test(w) ? w + "px" : w}`);
+    }
+    if (heightVal != null && (typeof heightVal === "string" || typeof heightVal === "number")) {
+      const h = String(heightVal);
+      if (h && h !== "auto") styles.push(`height: ${/^\d+$/.test(h) ? h + "px" : h}`);
+    }
+    const style = styles.length > 0 ? ` style="${styles.join("; ")}"` : "";
+    const embedSrc = toCodeWidgetEmbedUrl(src);
+    return `<iframe data-code-widget src="${escapeHtml(embedSrc)}" frameborder="0" allowfullscreen${float}${style}></iframe>`;
+  },
   formula: (value) => {
     const latex = typeof value === "string" ? value : "";
     return `<span class="formula" data-formula="${escapeHtml(latex)}">${escapeHtml(latex)}</span>`;
@@ -1990,6 +2009,124 @@ function fromVideoEmbedUrl(embedUrl) {
   }
   return embedUrl;
 }
+function splitUrl(url) {
+  let rest = url;
+  let hash = "";
+  const hashIdx = rest.indexOf("#");
+  if (hashIdx >= 0) {
+    hash = rest.slice(hashIdx);
+    rest = rest.slice(0, hashIdx);
+  }
+  let query = "";
+  const qIdx = rest.indexOf("?");
+  if (qIdx >= 0) {
+    query = rest.slice(qIdx);
+    rest = rest.slice(0, qIdx);
+  }
+  return { base: rest, query, hash };
+}
+function hasQueryParam(url, key) {
+  const { query } = splitUrl(url);
+  return new RegExp(`[?&]${key}=`, "i").test(query);
+}
+function appendQueryParam(url, key, value) {
+  const { base, query, hash } = splitUrl(url);
+  const next = query ? `${query}&${key}=${value}` : `?${key}=${value}`;
+  return `${base}${next}${hash}`;
+}
+function toCodeWidgetEmbedUrl(url) {
+  const u = typeof url === "string" ? url.trim() : "";
+  if (!u) return "";
+  if (/(?:\/\/|^)(?:[\w-]+\.)*stackblitz\.com\//i.test(u)) {
+    return hasQueryParam(u, "embed") ? u : appendQueryParam(u, "embed", "1");
+  }
+  if (/(?:\/\/|^)(?:[\w-]+\.)*codesandbox\.io\//i.test(u)) {
+    if (/codesandbox\.io\/embed\//i.test(u)) return u;
+    return u.replace(/codesandbox\.io\/s\//i, "codesandbox.io/embed/");
+  }
+  if (/(?:\/\/|^)(?:[\w-]+\.)*replit\.com\//i.test(u)) {
+    return hasQueryParam(u, "embed") ? u : appendQueryParam(u, "embed", "true");
+  }
+  if (/(?:\/\/|^)(?:[\w-]+\.)*codepen\.io\//i.test(u)) {
+    if (/codepen\.io\/[^/]+\/embed\//i.test(u)) return u;
+    return u.replace(/(codepen\.io\/[^/]+)\/pen\//i, "$1/embed/");
+  }
+  if (/(?:\/\/|^)(?:[\w-]+\.)*jsfiddle\.net\//i.test(u)) {
+    const { base, query, hash } = splitUrl(u);
+    if (/\/embedded(?:\/|$)/i.test(base)) return u;
+    const trimmed = base.replace(/\/+$/, "");
+    return `${trimmed}/embedded/${query}${hash}`;
+  }
+  return u;
+}
+
+// src/schema/formats/embed/codeWidget.ts
+var codeWidgetFormat = {
+  name: "codeWidget",
+  scope: "embed",
+  normalize(value) {
+    return typeof value === "string" ? value.trim() : value;
+  },
+  validate(value) {
+    if (typeof value !== "string" || value.length === 0) {
+      return false;
+    }
+    const trimmed = value.trim();
+    if (trimmed.startsWith("/") || trimmed.startsWith("./") || trimmed.startsWith("../")) {
+      return true;
+    }
+    if (trimmed.startsWith("//")) {
+      return true;
+    }
+    try {
+      const url = new URL(trimmed);
+      return url.protocol === "http:" || url.protocol === "https:";
+    } catch {
+      return false;
+    }
+  },
+  render(value, attributes) {
+    const src = typeof value === "string" ? value : "";
+    const floatVal = attributes?.float;
+    const widthVal = attributes?.width;
+    const heightVal = attributes?.height;
+    const float = floatVal != null && typeof floatVal === "string" && floatVal !== "none" ? ` data-float="${escapeHtml(floatVal)}"` : "";
+    const styles = [];
+    if (widthVal != null && (typeof widthVal === "string" || typeof widthVal === "number")) {
+      const w = String(widthVal);
+      if (w && w !== "auto") styles.push(`width: ${/^\d+$/.test(w) ? w + "px" : w}`);
+    }
+    if (heightVal != null && (typeof heightVal === "string" || typeof heightVal === "number")) {
+      const h = String(heightVal);
+      if (h && h !== "auto") styles.push(`height: ${/^\d+$/.test(h) ? h + "px" : h}`);
+    }
+    const style = styles.length > 0 ? ` style="${styles.join("; ")}"` : "";
+    const embedSrc = toCodeWidgetEmbedUrl(src);
+    return `<iframe data-code-widget src="${escapeHtml(embedSrc)}" frameborder="0" allowfullscreen${float}${style}></iframe>`;
+  },
+  match(element) {
+    if (element.tagName.toLowerCase() !== "iframe") return null;
+    if (element.getAttribute("data-code-widget") === null) return null;
+    const src = element.getAttribute("src");
+    if (!src) return null;
+    const attrs = {};
+    const float = element.getAttribute("data-float");
+    const styleAttr = element.getAttribute("style") || "";
+    if (float) attrs.float = float;
+    const widthMatch = styleAttr.match(/(?:^|;\s*)width:\s*([^;]+)/);
+    if (widthMatch?.[1]) attrs.width = widthMatch[1].trim().replace(/px$/, "");
+    const heightMatch = styleAttr.match(/(?:^|;\s*)height:\s*([^;]+)/);
+    if (heightMatch?.[1]) attrs.height = heightMatch[1].trim().replace(/px$/, "");
+    if (Object.keys(attrs).length > 0) {
+      return { value: src, attributes: attrs };
+    }
+    return { value: src };
+  },
+  toMarkdown(value) {
+    const src = typeof value === "string" ? value : "";
+    return `![Widget](${src})`;
+  }
+};
 
 // src/schema/formats/embed/divider.ts
 var dividerFormat = {
@@ -2234,6 +2371,7 @@ var videoFormat = {
     return `<video src="${escapeHtml(src)}" controls${float}${style}></video>`;
   },
   match(element) {
+    if (element.getAttribute("data-code-widget") !== null) return null;
     const tagName = element.tagName.toLowerCase();
     if (tagName !== "video" && tagName !== "iframe") return null;
     const src = element.getAttribute("src");
@@ -2286,6 +2424,7 @@ var defaultBlockFormats = [
 var defaultEmbedFormats = [
   imageFormat,
   videoFormat,
+  codeWidgetFormat,
   formulaFormat,
   dividerFormat,
   softBreakFormat,
@@ -2732,7 +2871,16 @@ function deltaToHtml(delta, options = {}) {
       counters = [];
       const codeLines = collectCodeBlockLines(lines, i);
       const language = getCodeBlockLanguage(line.attributes);
-      html += renderCodeBlock(codeLines, language, embedRenderers, pretty, blockHandlers, options);
+      const codeBlockId = getCodeBlockId(line.attributes);
+      html += renderCodeBlock(
+        codeLines,
+        language,
+        embedRenderers,
+        pretty,
+        blockHandlers,
+        options,
+        codeBlockId
+      );
       i += codeLines.length - 1;
       continue;
     }
@@ -3003,11 +3151,13 @@ function collectCodeBlockLines(lines, startIndex) {
   const startLine = lines[startIndex];
   if (!startLine) return codeLines;
   const startLang = getCodeBlockLanguage(startLine.attributes);
+  const startId = getCodeBlockId(startLine.attributes);
   for (let i = startIndex; i < lines.length; i++) {
     const line = lines[i];
     if (!line || !line.attributes?.["code-block"]) break;
     const lang = getCodeBlockLanguage(line.attributes);
-    if (i > startIndex && lang !== startLang) break;
+    const id = getCodeBlockId(line.attributes);
+    if (i > startIndex && (lang !== startLang || id !== startId)) break;
     codeLines.push(line);
   }
   return codeLines;
@@ -3020,14 +3170,20 @@ function getCodeBlockLanguage(attributes) {
   }
   return void 0;
 }
-function renderCodeBlock(codeLines, language, embedRenderers, pretty, blockHandlers, options) {
+function getCodeBlockId(attributes) {
+  if (!attributes) return void 0;
+  const id = attributes["code-block-id"];
+  return typeof id === "string" ? id : void 0;
+}
+function renderCodeBlock(codeLines, language, embedRenderers, pretty, blockHandlers, options, codeBlockId) {
   const lineContents = codeLines.map(
     (line) => renderLineContent(line.ops, embedRenderers, blockHandlers, options)
   );
   const code = lineContents.join("\n");
   const langClass = language ? ` class="language-${escapeHtml(language)}"` : "";
   const langAttr = language ? ` data-language="${escapeHtml(language)}"` : "";
-  const html = `<pre${langAttr}><code${langClass}>${code}
+  const idAttr = codeBlockId ? ` data-code-block-id="${escapeHtml(codeBlockId)}"` : "";
+  const html = `<pre${langAttr}${idAttr}><code${langClass}>${code}
 </code></pre>`;
   return pretty ? html + "\n" : html;
 }
@@ -3241,6 +3397,7 @@ function htmlToDelta(html, options = {}) {
   let currentBlockAttributes = {};
   let pendingText = "";
   let atLineStart = true;
+  let codeBlockIdSeq = 0;
   const context = {
     delta,
     get attributes() {
@@ -3453,6 +3610,8 @@ function htmlToDelta(html, options = {}) {
     }
     const codeBlockValue = language || true;
     currentBlockAttributes["code-block"] = codeBlockValue;
+    const existingId = element.getAttribute("data-code-block-id");
+    currentBlockAttributes["code-block-id"] = existingId || `cb-${++codeBlockIdSeq}`;
     const sourceElement = codeElement || element;
     const rawText = sourceElement.textContent ?? "";
     const text = rawText.endsWith("\n") ? rawText.slice(0, -1) : rawText;
@@ -3608,6 +3767,10 @@ function htmlToDelta(html, options = {}) {
     const heightMatch = style.match(/(?:^|;\s*)height:\s*([^;]+)/);
     if (heightMatch?.[1]) attrs.height = heightMatch[1].trim().replace(/px$/, "");
     const embedAttrs = Object.keys(attrs).length > 0 ? attrs : void 0;
+    if (element.getAttribute("data-code-widget") !== null) {
+      context.pushEmbed({ codeWidget: src }, embedAttrs);
+      return;
+    }
     context.pushEmbed({ video: fromVideoEmbedUrl(src) }, embedAttrs);
   }
   function processFootnotesSection(section) {
@@ -4188,11 +4351,13 @@ function collectCodeBlock(lines, startIndex) {
   const startLine = lines[startIndex];
   if (!startLine) return codeLines;
   const startLang = getCodeBlockLanguage2(startLine.attributes);
+  const startId = getCodeBlockId2(startLine.attributes);
   for (let i = startIndex; i < lines.length; i++) {
     const line = lines[i];
     if (!line || !line.attributes["code-block"]) break;
     const lang = getCodeBlockLanguage2(line.attributes);
-    if (i > startIndex && lang !== startLang) break;
+    const id = getCodeBlockId2(line.attributes);
+    if (i > startIndex && (lang !== startLang || id !== startId)) break;
     codeLines.push(line);
   }
   return codeLines;
@@ -4310,6 +4475,10 @@ function getCodeBlockLanguage2(attributes) {
   }
   return void 0;
 }
+function getCodeBlockId2(attributes) {
+  const id = attributes["code-block-id"];
+  return typeof id === "string" ? id : void 0;
+}
 function renderLineContent2(ops, embedRenderers, inCodeBlock, useLatexDelimiters = false, blockHandlers, prettyHtml = false, registry, softBreakStyle = "spaces", inTableCell = false) {
   let result = "";
   for (const op of ops) {
@@ -4459,6 +4628,28 @@ function renderEmbed2(embed, attributes, customRenderers, useLatexDelimiters = f
     }
     return `![Video](${src})`;
   }
+  if (embedType === "codeWidget") {
+    const src = typeof embedValue === "string" ? embedValue : "";
+    const hasFloat = attributes?.float != null && typeof attributes.float === "string" && attributes.float !== "none";
+    const hasWidth = attributes?.width != null;
+    const hasHeight = attributes?.height != null;
+    if (hasFloat || hasWidth || hasHeight) {
+      const floatAttr = hasFloat ? ` data-float="${escapeHtml(String(attributes.float))}"` : "";
+      const styles = [];
+      if (hasWidth) {
+        const w = typeof attributes.width === "string" || typeof attributes.width === "number" ? String(attributes.width) : "";
+        if (w && w !== "auto") styles.push(`width: ${/^\d+$/.test(w) ? w + "px" : w}`);
+      }
+      if (hasHeight) {
+        const h = typeof attributes.height === "string" || typeof attributes.height === "number" ? String(attributes.height) : "";
+        if (h && h !== "auto") styles.push(`height: ${/^\d+$/.test(h) ? h + "px" : h}`);
+      }
+      const styleAttr = styles.length > 0 ? ` style="${styles.join("; ")}"` : "";
+      const embedSrc = toCodeWidgetEmbedUrl(src);
+      return `<iframe data-code-widget src="${escapeHtml(embedSrc)}" frameborder="0" allowfullscreen${floatAttr}${styleAttr}></iframe>`;
+    }
+    return `![Widget](${src})`;
+  }
   if (embedType === "formula") {
     const latex = typeof embedValue === "string" ? embedValue : "";
     return useLatexDelimiters ? `\\(${latex}\\)` : `$${latex}$`;
@@ -4663,6 +4854,7 @@ function astToDelta(tree, customHandlers, mathBlock, mermaidBlock, plantumlBlock
   let pendingText = "";
   const spanAttrStack = [];
   const footnoteDefinitions = /* @__PURE__ */ new Map();
+  let codeBlockIdSeq = 0;
   const context = {
     delta,
     pushText(text, attrs) {
@@ -4924,6 +5116,10 @@ function astToDelta(tree, customHandlers, mathBlock, mermaidBlock, plantumlBlock
       context.pushEmbed({ video: url });
       return;
     }
+    if (alt.toLowerCase() === "widget") {
+      context.pushEmbed({ codeWidget: url });
+      return;
+    }
     const attrs = {};
     if (node.alt) attrs.alt = node.alt;
     if (url.toLowerCase().endsWith(".drawio")) {
@@ -4978,7 +5174,8 @@ function astToDelta(tree, customHandlers, mathBlock, mermaidBlock, plantumlBlock
     }
     const lines = code.split("\n");
     const codeBlockAttr = {
-      "code-block": lang ?? true
+      "code-block": lang ?? true,
+      "code-block-id": `cb-${++codeBlockIdSeq}`
     };
     for (const line of lines) {
       context.pushText(line);
@@ -4992,7 +5189,10 @@ function astToDelta(tree, customHandlers, mathBlock, mermaidBlock, plantumlBlock
       context.pushNewline();
     } else {
       const lines = value.split("\n");
-      const mathBlockAttr = { "code-block": "math" };
+      const mathBlockAttr = {
+        "code-block": "math",
+        "code-block-id": `cb-${++codeBlockIdSeq}`
+      };
       for (const line of lines) {
         context.pushText(line);
         context.pushNewline(mathBlockAttr);
@@ -5286,6 +5486,7 @@ export {
   cloneDelta,
   codeBlockFormat,
   codeFormat,
+  codeWidgetFormat,
   colorFormat,
   columnsBlockHandler,
   createDefaultBlockHandlers,
@@ -5349,6 +5550,7 @@ export {
   tableColFormat,
   tableHeaderFormat,
   tableRowFormat,
+  toCodeWidgetEmbedUrl,
   toHexColor,
   underlineFormat,
   unescapeHtml,