@scrider/formatter 1.5.0 → 1.6.1

package/dist/index.cjs

@@ -60,6 +60,7 @@ __export(index_exports, {
   cloneDelta: () => cloneDelta,
   codeBlockFormat: () => codeBlockFormat,
   codeFormat: () => codeFormat,
+  codeWidgetFormat: () => codeWidgetFormat,
   colorFormat: () => colorFormat,
   columnsBlockHandler: () => columnsBlockHandler,
   createDefaultBlockHandlers: () => createDefaultBlockHandlers,
@@ -123,6 +124,7 @@ __export(index_exports, {
   tableColFormat: () => tableColFormat,
   tableHeaderFormat: () => tableHeaderFormat,
   tableRowFormat: () => tableRowFormat,
+  toCodeWidgetEmbedUrl: () => toCodeWidgetEmbedUrl,
   toHexColor: () => toHexColor,
   underlineFormat: () => underlineFormat,
   unescapeHtml: () => unescapeHtml,
@@ -2021,6 +2023,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 allow="${CODE_WIDGET_IFRAME_ALLOW}"${float}${style}></iframe>`;
+  },
   formula: (value) => {
     const latex = typeof value === "string" ? value : "";
     return `<span class="formula" data-formula="${escapeHtml(latex)}">${escapeHtml(latex)}</span>`;
@@ -2114,6 +2135,125 @@ 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}`;
+}
+var CODE_WIDGET_IFRAME_ALLOW = "accelerometer; camera; encrypted-media; geolocation; gyroscope; microphone; midi; payment; usb; vr; xr-spatial-tracking; cross-origin-isolated";
+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 allow="${CODE_WIDGET_IFRAME_ALLOW}"${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 = {
@@ -2358,6 +2498,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");
@@ -2410,6 +2551,7 @@ var defaultBlockFormats = [
 var defaultEmbedFormats = [
   imageFormat,
   videoFormat,
+  codeWidgetFormat,
   formulaFormat,
   dividerFormat,
   softBreakFormat,
@@ -3752,6 +3894,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) {
@@ -4609,6 +4755,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}$`;
@@ -5075,6 +5243,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")) {
@@ -5442,6 +5614,7 @@ function extractTableRegion(ops, hintOpIdx) {
   cloneDelta,
   codeBlockFormat,
   codeFormat,
+  codeWidgetFormat,
   colorFormat,
   columnsBlockHandler,
   createDefaultBlockHandlers,
@@ -5505,6 +5678,7 @@ function extractTableRegion(ops, hintOpIdx) {
   tableColFormat,
   tableHeaderFormat,
   tableRowFormat,
+  toCodeWidgetEmbedUrl,
   toHexColor,
   underlineFormat,
   unescapeHtml,