mulmocast 2.1.27 → 2.1.29

package/lib/types/schema.d.ts

@@ -182,6 +182,7 @@ export declare const mediaSourceMermaidSchema: z.ZodDiscriminatedUnion<[z.ZodObj
 export declare const mulmoMarkdownMediaSchema: z.ZodObject<{
     type: z.ZodLiteral<"markdown">;
     markdown: z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>;
+    style: z.ZodOptional<z.ZodString>;
 }, z.core.$strict>;
 export declare const mulmoImageMediaSchema: z.ZodObject<{
     type: z.ZodLiteral<"image">;
@@ -271,6 +272,7 @@ export declare const mulmoVisionMediaSchema: z.ZodObject<{
 export declare const mulmoImageAssetSchema: z.ZodUnion<readonly [z.ZodObject<{
     type: z.ZodLiteral<"markdown">;
     markdown: z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>;
+    style: z.ZodOptional<z.ZodString>;
 }, z.core.$strict>, z.ZodObject<{
     type: z.ZodLiteral<"web">;
     url: z.ZodURL;
@@ -797,6 +799,7 @@ export declare const mulmoBeatSchema: z.ZodObject<{
     image: z.ZodOptional<z.ZodUnion<readonly [z.ZodObject<{
         type: z.ZodLiteral<"markdown">;
         markdown: z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>;
+        style: z.ZodOptional<z.ZodString>;
     }, z.core.$strict>, z.ZodObject<{
         type: z.ZodLiteral<"web">;
         url: z.ZodURL;
@@ -1981,6 +1984,7 @@ export declare const mulmoScriptSchema: z.ZodObject<{
         image: z.ZodOptional<z.ZodUnion<readonly [z.ZodObject<{
             type: z.ZodLiteral<"markdown">;
             markdown: z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>;
+            style: z.ZodOptional<z.ZodString>;
         }, z.core.$strict>, z.ZodObject<{
             type: z.ZodLiteral<"web">;
             url: z.ZodURL;
@@ -2869,6 +2873,7 @@ export declare const mulmoStudioSchema: z.ZodObject<{
             image: z.ZodOptional<z.ZodUnion<readonly [z.ZodObject<{
                 type: z.ZodLiteral<"markdown">;
                 markdown: z.ZodUnion<readonly [z.ZodString, z.ZodArray<z.ZodString>]>;
+                style: z.ZodOptional<z.ZodString>;
             }, z.core.$strict>, z.ZodObject<{
                 type: z.ZodLiteral<"web">;
                 url: z.ZodURL;

package/lib/types/schema.js

@@ -79,6 +79,7 @@ export const mulmoMarkdownMediaSchema = z
     .object({
     type: z.literal("markdown"),
     markdown: stringOrStringArray,
+    style: z.string().optional(),
 })
     .strict();
 const mulmoWebMediaSchema = z

package/lib/utils/context.d.ts

@@ -275,6 +275,7 @@ export declare const createStudioData: (_mulmoScript: MulmoScript, fileName: str
             } | {
                 type: "markdown";
                 markdown: string | string[];
+                style?: string | undefined;
             } | {
                 type: "web";
                 url: string;
@@ -931,6 +932,7 @@ export declare const initializeContextFromFiles: (files: FileObject, raiseError:
                 } | {
                     type: "markdown";
                     markdown: string | string[];
+                    style?: string | undefined;
                 } | {
                     type: "web";
                     url: string;

package/lib/utils/html_render.d.ts

@@ -0,0 +1,3 @@
+export declare const renderHTMLToImage: (html: string, outputPath: string, width: number, height: number, isMermaid?: boolean, omitBackground?: boolean) => Promise<void>;
+export declare const renderMarkdownToImage: (markdown: string, style: string, outputPath: string, width: number, height: number) => Promise<void>;
+export declare const interpolate: (template: string, data: Record<string, string>) => string;

package/lib/utils/html_render.js

@@ -0,0 +1,50 @@
+import { marked } from "marked";
+import puppeteer from "puppeteer";
+const isCI = process.env.CI === "true";
+export const renderHTMLToImage = async (html, outputPath, width, height, isMermaid = false, omitBackground = false) => {
+    // Use Puppeteer to render HTML to an image
+    const browser = await puppeteer.launch({
+        args: isCI ? ["--no-sandbox"] : [],
+    });
+    const page = await browser.newPage();
+    // Set the page content to the HTML generated from the Markdown
+    await page.setContent(html);
+    // Adjust page settings if needed (like width, height, etc.)
+    await page.setViewport({ width, height });
+    // height:100% ensures background fills viewport; only reset html, let body styles come from custom CSS
+    await page.addStyleTag({ content: "html{height:100%;margin:0;padding:0;overflow:hidden}" });
+    if (isMermaid) {
+        await page.waitForFunction(() => {
+            const element = document.querySelector(".mermaid");
+            return element && element.dataset.ready === "true";
+        }, { timeout: 20000 });
+    }
+    // Wait for Chart.js to finish rendering if this is a chart
+    if (html.includes("data-chart-ready")) {
+        await page.waitForFunction(() => {
+            const canvas = document.querySelector("canvas[data-chart-ready='true']");
+            return !!canvas;
+        }, { timeout: 20000 });
+    }
+    // Measure the size of the page and scale the page to the width and height
+    await page.evaluate(({ viewportWidth, viewportHeight }) => {
+        const docElement = document.documentElement;
+        const scrollWidth = Math.max(docElement.scrollWidth, document.body.scrollWidth || 0);
+        const scrollHeight = Math.max(docElement.scrollHeight, document.body.scrollHeight || 0);
+        const scale = Math.min(viewportWidth / (scrollWidth || viewportWidth), viewportHeight / (scrollHeight || viewportHeight), 1);
+        docElement.style.overflow = "hidden";
+        document.body.style.zoom = String(scale);
+    }, { viewportWidth: width, viewportHeight: height });
+    // Step 3: Capture screenshot of the page (which contains the Markdown-rendered HTML)
+    await page.screenshot({ path: outputPath, omitBackground });
+    await browser.close();
+};
+export const renderMarkdownToImage = async (markdown, style, outputPath, width, height) => {
+    const header = `<head><style>${style}</style></head>`;
+    const body = await marked(markdown);
+    const html = `<html>${header}<body>${body}</body></html>`;
+    await renderHTMLToImage(html, outputPath, width, height);
+};
+export const interpolate = (template, data) => {
+    return template.replace(/\$\{(.*?)\}/g, (_, key) => data[key.trim()] ?? "");
+};

package/lib/utils/image_plugins/chart.js

@@ -1,5 +1,5 @@
 import { getHTMLFile } from "../file.js";
-import { renderHTMLToImage, interpolate } from "../markdown.js";
+import { renderHTMLToImage, interpolate } from "../html_render.js";
 import { parrotingImagePath } from "./utils.js";
 import nodeProcess from "node:process";
 export const imageType = "chart";

package/lib/utils/image_plugins/html_tailwind.js

@@ -1,5 +1,5 @@
 import { getHTMLFile } from "../file.js";
-import { renderHTMLToImage, interpolate } from "../markdown.js";
+import { renderHTMLToImage, interpolate } from "../html_render.js";
 import { parrotingImagePath } from "./utils.js";
 export const imageType = "html_tailwind";
 const processHtmlTailwind = async (params) => {

package/lib/utils/image_plugins/markdown.js

@@ -1,5 +1,6 @@
-import { renderMarkdownToImage } from "../markdown.js";
+import { renderMarkdownToImage } from "../html_render.js";
 import { parrotingImagePath } from "./utils.js";
+import { getMarkdownStyle } from "../../data/markdownStyles.js";
 import { marked } from "marked";
 export const imageType = "markdown";
 const processMarkdown = async (params) => {
@@ -7,7 +8,11 @@ const processMarkdown = async (params) => {
     if (!beat.image || beat.image.type !== imageType)
         return;
     const markdown = dumpMarkdown(params) ?? "";
-    await renderMarkdownToImage(markdown, textSlideStyle, imagePath, canvasSize.width, canvasSize.height);
+    // Use custom style if specified, otherwise use default textSlideStyle
+    const styleName = beat.image.style;
+    const customStyle = styleName ? getMarkdownStyle(styleName) : undefined;
+    const style = customStyle ? customStyle.css : textSlideStyle;
+    await renderMarkdownToImage(markdown, style, imagePath, canvasSize.width, canvasSize.height);
     return imagePath;
 };
 const dumpMarkdown = (params) => {

package/lib/utils/image_plugins/mermaid.js

@@ -1,6 +1,6 @@
 import { MulmoMediaSourceMethods } from "../../methods/index.js";
 import { getHTMLFile } from "../file.js";
-import { renderHTMLToImage, interpolate } from "../markdown.js";
+import { renderHTMLToImage, interpolate } from "../html_render.js";
 import { parrotingImagePath } from "./utils.js";
 import nodeProcess from "node:process";
 export const imageType = "mermaid";

package/lib/utils/image_plugins/text_slide.js

@@ -1,4 +1,4 @@
-import { renderMarkdownToImage } from "../markdown.js";
+import { renderMarkdownToImage } from "../html_render.js";
 import { parrotingImagePath } from "./utils.js";
 import { marked } from "marked";
 export const imageType = "textSlide";

package/lib/utils/markdown.js

@@ -1,113 +1,42 @@
 import { marked } from "marked";
 import puppeteer from "puppeteer";
 const isCI = process.env.CI === "true";
-const reuseBrowser = process.env.MULMO_PUPPETEER_REUSE !== "0";
-const browserLaunchArgs = isCI ? ["--no-sandbox"] : [];
-// Shared browser to avoid spawning a new Chromium per render.
-let sharedBrowserPromise = null;
-let sharedBrowserRefs = 0;
-let sharedBrowserCloseTimer = null;
-// Acquire a browser instance; reuse a shared one when enabled.
-const acquireBrowser = async () => {
-    if (!reuseBrowser) {
-        return await puppeteer.launch({ args: browserLaunchArgs });
-    }
-    sharedBrowserRefs += 1;
-    if (sharedBrowserCloseTimer) {
-        clearTimeout(sharedBrowserCloseTimer);
-        sharedBrowserCloseTimer = null;
-    }
-    if (!sharedBrowserPromise) {
-        sharedBrowserPromise = puppeteer.launch({ args: browserLaunchArgs });
-    }
-    const currentPromise = sharedBrowserPromise;
-    try {
-        return await currentPromise;
-    }
-    catch (error) {
-        if (sharedBrowserPromise === currentPromise) {
-            sharedBrowserPromise = null;
-        }
-        sharedBrowserRefs = Math.max(0, sharedBrowserRefs - 1);
-        throw error;
-    }
-};
-// Release the browser; close only after a short idle window.
-const releaseBrowser = async (browser) => {
-    if (!reuseBrowser) {
-        await browser.close().catch(() => { });
-        return;
-    }
-    sharedBrowserRefs = Math.max(0, sharedBrowserRefs - 1);
-    if (sharedBrowserRefs > 0 || !sharedBrowserPromise) {
-        return;
-    }
-    // Delay close to allow back-to-back renders to reuse the browser.
-    sharedBrowserCloseTimer = setTimeout(async () => {
-        const current = sharedBrowserPromise;
-        sharedBrowserPromise = null;
-        sharedBrowserCloseTimer = null;
-        if (current) {
-            await (await current).close().catch(() => { });
-        }
-    }, 300);
-};
-// Wait for a single animation frame to let canvas paints settle.
-const waitForNextFrame = async (page) => {
-    await page.evaluate(() => new Promise((resolve) => {
-        requestAnimationFrame(() => resolve());
-    }));
-};
 export const renderHTMLToImage = async (html, outputPath, width, height, isMermaid = false, omitBackground = false) => {
-    // Charts are rendered in a dedicated browser to avoid shared-page timing issues.
-    const useSharedBrowser = reuseBrowser && !html.includes("data-chart-ready");
-    const browser = useSharedBrowser ? await acquireBrowser() : await puppeteer.launch({ args: browserLaunchArgs });
-    let page = null;
-    try {
-        page = await browser.newPage();
-        // Adjust page settings if needed (like width, height, etc.)
-        await page.setViewport({ width, height });
-        // Set the page content to the HTML generated from the Markdown
-        await page.setContent(html, { waitUntil: "domcontentloaded" });
-        await page.addStyleTag({ content: "html,body{margin:0;padding:0;overflow:hidden}" });
-        if (isMermaid) {
-            await page.waitForFunction(() => {
-                const element = document.querySelector(".mermaid");
-                return element && element.dataset.ready === "true";
-            }, { timeout: 20000 });
-        }
-        if (html.includes("data-chart-ready")) {
-            await page.waitForFunction(() => {
-                const canvas = document.querySelector("canvas[data-chart-ready='true']");
-                return !!canvas;
-            }, { timeout: 20000 });
-            // Give the browser a couple of frames to paint the canvas.
-            await waitForNextFrame(page);
-            await waitForNextFrame(page);
-        }
-        // Measure the size of the page and scale the page to the width and height
-        await page.evaluate(({ vw, vh }) => {
-            const documentElement = document.documentElement;
-            const scrollWidth = Math.max(documentElement.scrollWidth, document.body.scrollWidth || 0);
-            const scrollHeight = Math.max(documentElement.scrollHeight, document.body.scrollHeight || 0);
-            const scale = Math.min(vw / (scrollWidth || vw), vh / (scrollHeight || vh), 1); // <=1 で縮小のみ
-            documentElement.style.overflow = "hidden";
-            document.body.style.zoom = String(scale);
-        }, { vw: width, vh: height });
-        // Step 3: Capture screenshot of the page (which contains the Markdown-rendered HTML)
-        await page.screenshot({ path: outputPath, omitBackground });
-    }
-    finally {
-        if (page) {
-            await page.close().catch(() => { });
-        }
-        if (useSharedBrowser) {
-            await releaseBrowser(browser);
-        }
-        else {
-            await browser.close().catch(() => { });
-        }
-    }
+    // Use Puppeteer to render HTML to an image
+    const browser = await puppeteer.launch({
+        args: isCI ? ["--no-sandbox"] : [],
+    });
+    const page = await browser.newPage();
+    // Set the page content to the HTML generated from the Markdown
+    await page.setContent(html);
+    // Adjust page settings if needed (like width, height, etc.)
+    await page.setViewport({ width, height });
+    await page.addStyleTag({ content: "html,body{margin:0;padding:0;overflow:hidden}" });
+    if (isMermaid) {
+        await page.waitForFunction(() => {
+            const el = document.querySelector(".mermaid");
+            return el && el.dataset.ready === "true";
+        }, { timeout: 20000 });
+    }
+    // Wait for Chart.js to finish rendering if this is a chart
+    if (html.includes("data-chart-ready")) {
+        await page.waitForFunction(() => {
+            const canvas = document.querySelector("canvas[data-chart-ready='true']");
+            return !!canvas;
+        }, { timeout: 20000 });
+    }
+    // Measure the size of the page and scale the page to the width and height
+    await page.evaluate(({ vw, vh }) => {
+        const de = document.documentElement;
+        const sw = Math.max(de.scrollWidth, document.body.scrollWidth || 0);
+        const sh = Math.max(de.scrollHeight, document.body.scrollHeight || 0);
+        const scale = Math.min(vw / (sw || vw), vh / (sh || vh), 1); // <=1 で縮小のみ
+        de.style.overflow = "hidden";
+        document.body.style.zoom = String(scale);
+    }, { vw: width, vh: height });
+    // Step 3: Capture screenshot of the page (which contains the Markdown-rendered HTML)
+    await page.screenshot({ path: outputPath, omitBackground });
+    await browser.close();
 };
 export const renderMarkdownToImage = async (markdown, style, outputPath, width, height) => {
     const header = `<head><style>${style}</style></head>`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mulmocast",
-  "version": "2.1.27",
+  "version": "2.1.29",
   "description": "",
   "type": "module",
   "main": "lib/index.node.js",