@scrider/formatter 1.4.4 → 1.6.0

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${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,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 = {
@@ -2358,6 +2497,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 +2550,7 @@ var defaultBlockFormats = [
 var defaultEmbedFormats = [
   imageFormat,
   videoFormat,
+  codeWidgetFormat,
   formulaFormat,
   dividerFormat,
   softBreakFormat,
@@ -2856,7 +2997,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;
     }
@@ -3127,11 +3277,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;
@@ -3144,14 +3296,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;
 }
@@ -3365,6 +3523,7 @@ function htmlToDelta(html, options = {}) {
   let currentBlockAttributes = {};
   let pendingText = "";
   let atLineStart = true;
+  let codeBlockIdSeq = 0;
   const context = {
     delta,
     get attributes() {
@@ -3577,6 +3736,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;
@@ -3732,6 +3893,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) {
@@ -4312,11 +4477,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;
@@ -4434,6 +4601,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) {
@@ -4583,6 +4754,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}$`;
@@ -4787,6 +4980,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) {
@@ -5048,6 +5242,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")) {
@@ -5102,7 +5300,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);
@@ -5116,7 +5315,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);
@@ -5411,6 +5613,7 @@ function extractTableRegion(ops, hintOpIdx) {
   cloneDelta,
   codeBlockFormat,
   codeFormat,
+  codeWidgetFormat,
   colorFormat,
   columnsBlockHandler,
   createDefaultBlockHandlers,
@@ -5474,6 +5677,7 @@ function extractTableRegion(ops, hintOpIdx) {
   tableColFormat,
   tableHeaderFormat,
   tableRowFormat,
+  toCodeWidgetEmbedUrl,
   toHexColor,
   underlineFormat,
   unescapeHtml,