@berlysia/vertical-writing-slide-system 0.0.22 → 0.0.24

package/README.md

@@ -6,6 +6,7 @@ A React-based slides application built with Vite that supports markdown-based pr
 
 - Support for both vertical and horizontal writing modes (縦書き・横書き)
 - MDX-based slide creation
+- External script embedding with security validation
 - Print mode support
 - Browser compatibility across Chrome, Firefox, and Safari
 
@@ -60,6 +61,54 @@ Each presentation should be in its own directory containing:
 
 - `index.mdx`: The main presentation file with your MDX content. \*.md is also fine
 - `images/`: (Optional) Directory containing images used in the presentation
+- `scripts.json`: (Optional) Configuration file for external scripts
+- `style.css`: (Optional) Custom CSS styles for the presentation
+
+## Script Embedding
+
+You can embed external scripts in your slides for enhanced functionality:
+
+### Method 1: Direct Script Tags in MDX
+
+```mdx
+<script
+  src="https://cdn.jsdelivr.net/npm/baseline-status@1/baseline-status.min.js"
+  type="module"
+></script>
+
+<script>console.log('Inline script executed');</script>
+
+<Center>
+  <h1>External Script Example</h1>
+  <baseline-status feature="css-grid"></baseline-status>
+</Center>
+```
+
+### Method 2: Configuration File
+
+Create a `scripts.json` file in your slide directory:
+
+```json
+{
+  "external": [
+    {
+      "src": "https://cdn.jsdelivr.net/npm/baseline-status@1/baseline-status.min.js",
+      "type": "module"
+    }
+  ],
+  "inline": [
+    {
+      "content": "console.log('Script from configuration');"
+    }
+  ]
+}
+```
+
+### Security Features
+
+- Only trusted CDNs are allowed (jsdelivr, unpkg, cdnjs, etc.)
+- Scripts are loaded only once per session
+- Basic validation of script attributes and content
 
 For development documentation, see [DEVELOPMENT.md](DEVELOPMENT.md).
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@berlysia/vertical-writing-slide-system",
-  "version": "0.0.22",
+  "version": "0.0.24",
   "type": "module",
   "bin": {
     "vertical-slides": "./cli.js"

package/src/App.tsx

@@ -1,5 +1,6 @@
 import { useState, useRef, useEffect, useCallback } from "react";
-import slidesContent from "virtual:slides.js";
+import slidesContent, { slideScripts } from "virtual:slides.js";
+import { globalScriptManager } from "./script-manager";
 
 function App() {
   const [writingMode, setWritingMode] = useState(() => {
@@ -34,6 +35,21 @@ function App() {
     );
   }, [withAbsoluteFontSize]);
 
+  // スクリプトの読み込み
+  useEffect(() => {
+    if (
+      slideScripts &&
+      (slideScripts.external.length > 0 || slideScripts.inline.length > 0)
+    ) {
+      console.log("[App] Loading slide scripts:", slideScripts);
+      globalScriptManager.loadScripts(slideScripts).catch(console.error);
+    }
+
+    return () => {
+      // クリーンアップは慎重に行う（全てのスクリプトを削除すると他の機能に影響する場合がある）
+    };
+  }, []);
+
   // ロード時にハッシュが入ってたらそのページにスクロール
   useEffect(() => {
     const hash = location.hash;

package/src/script-manager.ts

@@ -0,0 +1,210 @@
+export interface ScriptInfo {
+  src?: string;
+  type?: string;
+  async?: boolean;
+  defer?: boolean;
+  crossorigin?: string;
+  integrity?: string;
+  content?: string;
+  id?: string;
+}
+
+export interface ParsedScript {
+  external: ScriptInfo[];
+  inline: ScriptInfo[];
+}
+
+export class ScriptManager {
+  private loadedScripts = new Set<string>();
+  private scriptElements = new Map<string, HTMLScriptElement>();
+
+  static parseScripts(content: string): ParsedScript {
+    const external: ScriptInfo[] = [];
+    const inline: ScriptInfo[] = [];
+
+    const scriptRegex = /<script([^>]*)>([\s\S]*?)<\/script>/gi;
+    let match;
+
+    while ((match = scriptRegex.exec(content)) !== null) {
+      const attributes = match[1];
+      const scriptContent = match[2].trim();
+
+      const scriptInfo: ScriptInfo = {};
+
+      const srcMatch = attributes.match(/src\s*=\s*["']([^"']+)["']/);
+      if (srcMatch) {
+        scriptInfo.src = srcMatch[1];
+      }
+
+      const typeMatch = attributes.match(/type\s*=\s*["']([^"']+)["']/);
+      if (typeMatch) {
+        scriptInfo.type = typeMatch[1];
+      }
+
+      const asyncMatch = attributes.match(/\basync\b/);
+      if (asyncMatch) {
+        scriptInfo.async = true;
+      }
+
+      const deferMatch = attributes.match(/\bdefer\b/);
+      if (deferMatch) {
+        scriptInfo.defer = true;
+      }
+
+      const crossoriginMatch = attributes.match(
+        /crossorigin\s*=\s*["']([^"']+)["']/,
+      );
+      if (crossoriginMatch) {
+        scriptInfo.crossorigin = crossoriginMatch[1];
+      }
+
+      const integrityMatch = attributes.match(
+        /integrity\s*=\s*["']([^"']+)["']/,
+      );
+      if (integrityMatch) {
+        scriptInfo.integrity = integrityMatch[1];
+      }
+
+      const idMatch = attributes.match(/id\s*=\s*["']([^"']+)["']/);
+      if (idMatch) {
+        scriptInfo.id = idMatch[1];
+      }
+
+      if (scriptInfo.src) {
+        external.push(scriptInfo);
+      } else if (scriptContent) {
+        scriptInfo.content = scriptContent;
+        inline.push(scriptInfo);
+      }
+    }
+
+    return { external, inline };
+  }
+
+  static removeScriptsFromContent(content: string): string {
+    return content.replace(/<script[^>]*>[\s\S]*?<\/script>/gi, "");
+  }
+
+  static isValidExternalScript(src: string): boolean {
+    try {
+      const url = new URL(src);
+      const allowedProtocols = ["https:", "http:"];
+      const trustedDomains = [
+        "cdn.jsdelivr.net",
+        "unpkg.com",
+        "cdnjs.cloudflare.com",
+        "code.jquery.com",
+        "stackpath.bootstrapcdn.com",
+      ];
+
+      if (!allowedProtocols.includes(url.protocol)) {
+        return false;
+      }
+
+      return trustedDomains.some(
+        (domain) =>
+          url.hostname === domain || url.hostname.endsWith(`.${domain}`),
+      );
+    } catch {
+      return false;
+    }
+  }
+
+  async loadScript(scriptInfo: ScriptInfo): Promise<void> {
+    if (scriptInfo.src) {
+      return this.loadExternalScript(scriptInfo);
+    } else if (scriptInfo.content) {
+      return this.loadInlineScript(scriptInfo);
+    }
+  }
+
+  private async loadExternalScript(scriptInfo: ScriptInfo): Promise<void> {
+    const { src } = scriptInfo;
+    if (!src) return;
+
+    if (!ScriptManager.isValidExternalScript(src)) {
+      console.warn(
+        `[ScriptManager] External script blocked for security: ${src}`,
+      );
+      return;
+    }
+
+    const scriptId = scriptInfo.id || `script-${src}`;
+
+    if (this.loadedScripts.has(scriptId)) {
+      return;
+    }
+
+    return new Promise((resolve, reject) => {
+      const script = document.createElement("script");
+
+      script.src = src;
+      if (scriptInfo.type) script.type = scriptInfo.type;
+      if (scriptInfo.async) script.async = true;
+      if (scriptInfo.defer) script.defer = true;
+      if (scriptInfo.crossorigin) script.crossOrigin = scriptInfo.crossorigin;
+      if (scriptInfo.integrity) script.integrity = scriptInfo.integrity;
+      if (scriptInfo.id) script.id = scriptInfo.id;
+
+      script.onload = () => {
+        this.loadedScripts.add(scriptId);
+        this.scriptElements.set(scriptId, script);
+        console.log(`[ScriptManager] Loaded external script: ${src}`);
+        resolve();
+      };
+
+      script.onerror = () => {
+        console.error(`[ScriptManager] Failed to load script: ${src}`);
+        reject(new Error(`Failed to load script: ${src}`));
+      };
+
+      document.head.appendChild(script);
+    });
+  }
+
+  private async loadInlineScript(scriptInfo: ScriptInfo): Promise<void> {
+    const { content, id } = scriptInfo;
+    if (!content) return;
+
+    const scriptId = id || `inline-script-${Date.now()}`;
+
+    if (this.loadedScripts.has(scriptId)) {
+      return;
+    }
+
+    const script = document.createElement("script");
+    if (scriptInfo.type) script.type = scriptInfo.type;
+    if (scriptInfo.id) script.id = scriptInfo.id;
+    script.textContent = content;
+
+    document.head.appendChild(script);
+    this.loadedScripts.add(scriptId);
+    this.scriptElements.set(scriptId, script);
+
+    console.log(`[ScriptManager] Loaded inline script: ${scriptId}`);
+  }
+
+  cleanup(): void {
+    for (const [scriptId, element] of this.scriptElements) {
+      if (element.parentNode) {
+        element.parentNode.removeChild(element);
+      }
+      this.loadedScripts.delete(scriptId);
+    }
+    this.scriptElements.clear();
+  }
+
+  async loadScripts(scripts: ParsedScript): Promise<void> {
+    const allScripts = [...scripts.external, ...scripts.inline];
+
+    for (const script of allScripts) {
+      try {
+        await this.loadScript(script);
+      } catch (error) {
+        console.error("[ScriptManager] Failed to load script:", error);
+      }
+    }
+  }
+}
+
+export const globalScriptManager = new ScriptManager();

package/src/vite-plugin-slides.ts

@@ -9,6 +9,7 @@ import remarkParse from "remark-parse";
 import remarkRehype from "remark-rehype";
 import rehypeStringify from "rehype-stringify";
 import remarkSlideImages from "./remark-slide-images";
+import { ScriptManager, type ParsedScript } from "./script-manager";
 import { visit } from "unist-util-visit";
 import type { Node } from "unist";
 import type { Element, Text, ElementContent } from "hast";
@@ -46,14 +47,21 @@ async function processMarkdown(
   markdown: string,
   base: string,
   extractedStyles: string[],
+  extractedScripts: ParsedScript,
 ) {
+  const parsedScripts = ScriptManager.parseScripts(markdown);
+  extractedScripts.external.push(...parsedScripts.external);
+  extractedScripts.inline.push(...parsedScripts.inline);
+
+  const cleanedMarkdown = ScriptManager.removeScriptsFromContent(markdown);
+
   return await unified()
     .use(remarkParse)
     .use(remarkSlideImages, { base })
     .use(remarkRehype, { allowDangerousHtml: true })
     .use(rehypeExtractStyles(extractedStyles))
     .use(rehypeStringify, { allowDangerousHtml: true })
-    .process(markdown);
+    .process(cleanedMarkdown);
 }
 
 /**
@@ -78,6 +86,43 @@ function loadAdjacentCSS(slidesDir: string, collection: string): string[] {
   return [];
 }
 
+/**
+ * 隣接スクリプト設定ファイルを検索して読み込み
+ */
+function loadAdjacentScripts(
+  slidesDir: string,
+  collection: string,
+): ParsedScript {
+  const collectionDir = path.resolve(slidesDir, collection);
+  const scriptsPath = path.resolve(collectionDir, "scripts.json");
+
+  const result: ParsedScript = { external: [], inline: [] };
+
+  if (fs.existsSync(scriptsPath)) {
+    try {
+      const scriptsConfig = JSON.parse(fs.readFileSync(scriptsPath, "utf-8"));
+
+      if (scriptsConfig.external && Array.isArray(scriptsConfig.external)) {
+        result.external.push(...scriptsConfig.external);
+        logger.info(
+          `Loaded ${scriptsConfig.external.length} external scripts from scripts.json`,
+        );
+      }
+
+      if (scriptsConfig.inline && Array.isArray(scriptsConfig.inline)) {
+        result.inline.push(...scriptsConfig.inline);
+        logger.info(
+          `Loaded ${scriptsConfig.inline.length} inline scripts from scripts.json`,
+        );
+      }
+    } catch (error) {
+      logger.warn("Failed to parse scripts.json:", error);
+    }
+  }
+
+  return result;
+}
+
 export interface SlidesPluginOptions {
   /** Directory containing the slides (absolute path) */
   slidesDir?: string;
@@ -184,6 +229,7 @@ export default async function slidesPlugin(
   let compiledSlides: string[] = [];
   let resolvedConfig: ResolvedConfig;
   let slideStyles: string[] = [];
+  let slideScripts: ParsedScript = { external: [], inline: [] };
   return {
     name: "vite-plugin-slides",
     configResolved(config: ResolvedConfig) {
@@ -248,25 +294,45 @@ export default async function slidesPlugin(
         );
         slideStyles = [...adjacentStyles];
 
+        // 隣接スクリプト設定ファイルを読み込み
+        const adjacentScripts = loadAdjacentScripts(
+          config.slidesDir,
+          config.collection,
+        );
+        slideScripts = {
+          external: [...adjacentScripts.external],
+          inline: [...adjacentScripts.inline],
+        };
+
         if (!isMdx) {
           const slides = content.split(/^\s*(?:---|\*\*\*|___)\s*$/m);
           const extractedStyles: string[] = [];
+          const extractedScripts: ParsedScript = { external: [], inline: [] };
           const processedSlides = await Promise.all(
             slides.map((slide) =>
-              processMarkdown(slide, base, extractedStyles),
+              processMarkdown(slide, base, extractedStyles, extractedScripts),
             ),
           );
 
-          // 抽出されたスタイルを追加
+          // 抽出されたスタイル・スクリプトを追加
           slideStyles = [...slideStyles, ...extractedStyles];
+          slideScripts.external.push(...extractedScripts.external);
+          slideScripts.inline.push(...extractedScripts.inline);
 
-          return `export default ${JSON.stringify(processedSlides.map((p) => p.value))}`;
+          // スライド固有のスクリプトを文字列として生成
+          const slideScriptsString = JSON.stringify(slideScripts);
+
+          return `
+            export default ${JSON.stringify(processedSlides.map((p) => p.value))};
+            export const slideScripts = ${slideScriptsString};
+          `;
         }
 
         const slides = content.split(/^\s*(?:---|\*\*\*|___)\s*$/m);
 
-        // MDXにもCSS抽出を適用（MDXの場合はJSXのstyleタグを抽出）
+        // MDXにもCSS・スクリプト抽出を適用
         const extractedStyles: string[] = [];
+        const extractedScripts: ParsedScript = { external: [], inline: [] };
         const processedSlides = await Promise.all(
           slides.map(async (slideContent) => {
             // MDX内のstyleタグを手動で抽出（簡易実装）
@@ -278,8 +344,15 @@ export default async function slidesPlugin(
               }
             }
 
-            // styleタグを削除したコンテンツでMDXコンパイル
-            const cleanedContent = slideContent.replace(styleRegex, "");
+            // MDX内のscriptタグを抽出
+            const parsedScripts = ScriptManager.parseScripts(slideContent);
+            extractedScripts.external.push(...parsedScripts.external);
+            extractedScripts.inline.push(...parsedScripts.inline);
+
+            // style・scriptタグを削除したコンテンツでMDXコンパイル
+            let cleanedContent = slideContent.replace(styleRegex, "");
+            cleanedContent =
+              ScriptManager.removeScriptsFromContent(cleanedContent);
 
             const result = await compile(cleanedContent, {
               outputFormat: "program",
@@ -292,8 +365,10 @@ export default async function slidesPlugin(
           }),
         );
 
-        // 抽出されたスタイルを追加
+        // 抽出されたスタイル・スクリプトを追加
         slideStyles = [...slideStyles, ...extractedStyles];
+        slideScripts.external.push(...extractedScripts.external);
+        slideScripts.inline.push(...extractedScripts.inline);
 
         compiledSlides = processedSlides;
 
@@ -322,6 +397,9 @@ export default async function slidesPlugin(
             ? JSON.stringify(slideStyles.join("\n\n"))
             : "null";
 
+        // スライド固有のスクリプトを文字列として生成
+        const slideScriptsString = JSON.stringify(slideScripts);
+
         // Return as a module with CSS injection
         return `
             ${slideComponentsFilenames.map((filename) => `import * as ${filenameToComponentName(filename)} from '@components/${filename}';`).join("\n")}
@@ -344,6 +422,9 @@ export default async function slidesPlugin(
               }
             }
 
+            // スライド固有のスクリプトを外部から利用可能にする
+            export const slideScripts = ${slideScriptsString};
+
             // provide slide components to each slide
             // Wrap SlideN components to provide SlideComponents
             ${compiledSlides