@fsegurai/marked-extended-embeds 17.0.0-beta.0

package/dist/index.esm.js

@@ -0,0 +1,742 @@
+/**
+ * Ensure styles are injected into the document
+ */
+function ensureStyles(id, styles) {
+    if (typeof window === 'undefined')
+        return;
+    if (typeof document === 'undefined')
+        return;
+    if (document.getElementById(id))
+        return;
+    const styleEl = document.createElement('style');
+    styleEl.id = id;
+    styleEl.textContent = styles;
+    document.head.appendChild(styleEl);
+}
+
+/**
+ * Default options for the embed extension
+ */
+const DEFAULT_OPTIONS = {
+    className: 'marked-extended-embed',
+    prefixId: 'embed',
+    defaultAspectRatio: '16:9',
+    allowFullscreen: true,
+    lazyLoad: true,
+    privacyMode: false,
+    injectStyles: true,
+    enableSandbox: true,
+    sandboxPermissions: ['allow-scripts', 'allow-same-origin', 'allow-popups', 'allow-presentation'],
+};
+/**
+ * Provider-specific URL patterns for detection
+ */
+const PROVIDER_PATTERNS = {
+    youtube: [
+        /(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([a-zA-Z0-9_-]+)/,
+        /youtube\.com\/shorts\/([a-zA-Z0-9_-]+)/,
+    ],
+    vimeo: [
+        /vimeo\.com\/(?:video\/)?(\d+)/,
+    ],
+    twitter: [
+        /twitter\.com\/\w+\/status\/(\d+)/,
+        /x\.com\/\w+\/status\/(\d+)/,
+    ],
+    codepen: [
+        /codepen\.io\/([^\/]+)\/pen\/([a-zA-Z0-9]+)/,
+    ],
+    codesandbox: [
+        /codesandbox\.io\/(?:s|embed)\/([a-zA-Z0-9-]+)/,
+    ],
+    'github-gist': [
+        /gist\.github\.com\/([^\/]+)\/([a-zA-Z0-9]+)/,
+    ],
+    spotify: [
+        /open\.spotify\.com\/(track|album|playlist|episode|show)\/([a-zA-Z0-9]+)/,
+    ],
+    soundcloud: [
+        /soundcloud\.com\/([^\/]+\/[^\/]+)/,
+    ],
+    slideshare: [
+        /slideshare\.net\/[^\/]+\/([^\/\?]+)/,
+    ],
+    figma: [
+        /figma\.com\/(?:file|proto|design)\/([a-zA-Z0-9]+)(?:\/([^?]+))?/,
+    ],
+    loom: [
+        /loom\.com\/(?:share|embed)\/([a-zA-Z0-9]+)/,
+    ],
+    miro: [
+        /miro\.com\/app\/board\/([a-zA-Z0-9_=-]+)/,
+    ],
+    mermaid: [],
+    excalidraw: [
+        /excalidraw\.com\/#json=([a-zA-Z0-9_-]+)/,
+        /excalidraw\.com\/#room=([a-zA-Z0-9_-]+)/,
+    ],
+    drawio: [
+        /(?:app\.)?diagrams\.net\/.*[?&]src=([^&]+)/,
+        /drive\.google\.com.*\/file\/d\/([^\/]+)/,
+    ],
+    'diagrams-net': [
+        /(?:app\.)?diagrams\.net\/.*[?&]src=([^&]+)/,
+    ],
+    pdf: [],
+    iframe: [],
+};
+/**
+ * Provider display names
+ */
+const PROVIDER_NAMES = {
+    youtube: 'YouTube',
+    vimeo: 'Vimeo',
+    twitter: 'Twitter',
+    codepen: 'CodePen',
+    codesandbox: 'CodeSandbox',
+    'github-gist': 'GitHub Gist',
+    spotify: 'Spotify',
+    soundcloud: 'SoundCloud',
+    slideshare: 'SlideShare',
+    figma: 'Figma',
+    loom: 'Loom',
+    miro: 'Miro',
+    mermaid: 'Mermaid Diagram',
+    excalidraw: 'Excalidraw',
+    drawio: 'Draw.io',
+    'diagrams-net': 'Diagrams.net',
+    pdf: 'PDF Document',
+    iframe: 'External Content',
+};
+/**
+ * Default template for embeds
+ */
+const DEFAULT_TEMPLATE = `
+<div class="{className}-container" id="{embedId}" data-provider="{provider}">
+  <div class="{className}-wrapper" style="{aspectRatioStyle}">
+    {loadingPlaceholder}
+    <iframe
+      class="{className}-iframe"
+      src="{embedUrl}"
+      title="{title}"
+      frameborder="0"
+      {allowFullscreen}
+      {sandbox}
+      {loading}
+      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+      referrerpolicy="no-referrer-when-downgrade"
+    ></iframe>
+  </div>
+  {caption}
+</div>
+`;
+/**
+ * Loading placeholder template
+ */
+const LOADING_PLACEHOLDER = `
+<div class="{className}-loading" aria-label="Loading embed">
+  <div class="{className}-spinner"></div>
+  <span class="{className}-loading-text">Loading {providerName}...</span>
+</div>
+`;
+/**
+ * Default structural styles for embeds (minimal, layout-only)
+ */
+const DEFAULT_STYLES = `
+.marked-extended-embed-container { position: relative; margin: 1.5rem 0; overflow: hidden; }
+.marked-extended-embed-wrapper { position: relative; width: 100%; height: 0; overflow: hidden; }
+.marked-extended-embed-iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }
+.marked-extended-embed-loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 1rem; }
+.marked-extended-embed-spinner { width: 40px; height: 40px; }
+.marked-extended-embed-caption { padding: 0.75rem 1rem; text-align: center; }
+`;
+
+/**
+ * Generate a unique ID for embeds
+ */
+let embedCounter = 0;
+function generateUniqueId(prefix = 'embed') {
+    embedCounter++;
+    return `${prefix}-${Date.now()}-${embedCounter}`;
+}
+/**
+ * Parse property string like 'title="Video" autoplay="true"'
+ */
+function parsePropString(propString) {
+    const props = {};
+    if (!propString || !propString.trim()) {
+        return props;
+    }
+    // Match key="value" or key='value' or key=value patterns
+    const matches = propString.matchAll(/(\w+)=(?:"([^"]*)"|'([^']*)'|([^\s]+))/g);
+    for (const match of matches) {
+        const key = match[1];
+        const value = match[2] || match[3] || match[4];
+        props[key] = value;
+    }
+    return props;
+}
+/**
+ * Detect embed provider from URL
+ */
+function detectProvider(url) {
+    for (const [provider, patterns] of Object.entries(PROVIDER_PATTERNS)) {
+        for (const pattern of patterns) {
+            if (pattern.test(url)) {
+                return provider;
+            }
+        }
+    }
+    return null;
+}
+/**
+ * Parse embed URL and extract provider-specific information
+ */
+function parseEmbedUrl(url, provider) {
+    const patterns = PROVIDER_PATTERNS[provider];
+    for (const pattern of patterns) {
+        const match = url.match(pattern);
+        if (match) {
+            return buildEmbedInfo(provider, match, url);
+        }
+    }
+    return null;
+}
+/**
+ * Build embed information based on provider
+ */
+function buildEmbedInfo(provider, match, originalUrl) {
+    switch (provider) {
+        case 'youtube': {
+            const videoId = match[1];
+            return {
+                provider,
+                id: videoId,
+                embedUrl: `https://www.youtube.com/embed/${videoId}`,
+                originalUrl,
+            };
+        }
+        case 'vimeo': {
+            const videoId = match[1];
+            return {
+                provider,
+                id: videoId,
+                embedUrl: `https://player.vimeo.com/video/${videoId}`,
+                originalUrl,
+            };
+        }
+        case 'twitter': {
+            const tweetId = match[1];
+            return {
+                provider,
+                id: tweetId,
+                embedUrl: `https://platform.twitter.com/embed/Tweet.html?id=${tweetId}`,
+                originalUrl,
+            };
+        }
+        case 'codepen': {
+            const username = match[1];
+            const penId = match[2];
+            return {
+                provider,
+                id: penId,
+                embedUrl: `https://codepen.io/${username}/embed/${penId}`,
+                originalUrl,
+            };
+        }
+        case 'codesandbox': {
+            const sandboxId = match[1];
+            return {
+                provider,
+                id: sandboxId,
+                embedUrl: `https://codesandbox.io/embed/${sandboxId}`,
+                originalUrl,
+            };
+        }
+        case 'github-gist': {
+            const username = match[1];
+            const gistId = match[2];
+            return {
+                provider,
+                id: gistId,
+                embedUrl: `https://gist.github.com/${username}/${gistId}`,
+                originalUrl,
+            };
+        }
+        case 'spotify': {
+            const type = match[1];
+            const id = match[2];
+            return {
+                provider,
+                id,
+                embedUrl: `https://open.spotify.com/embed/${type}/${id}`,
+                originalUrl,
+            };
+        }
+        case 'soundcloud': {
+            const trackPath = match[1];
+            return {
+                provider,
+                id: trackPath,
+                embedUrl: `https://w.soundcloud.com/player/?url=https://soundcloud.com/${trackPath}`,
+                originalUrl,
+            };
+        }
+        case 'figma': {
+            const fileId = match[1];
+            return {
+                provider,
+                id: fileId,
+                embedUrl: `https://www.figma.com/embed?embed_host=marked-extensions&url=${encodeURIComponent(originalUrl)}`,
+                originalUrl,
+            };
+        }
+        case 'loom': {
+            const videoId = match[1];
+            return {
+                provider,
+                id: videoId,
+                embedUrl: `https://www.loom.com/embed/${videoId}`,
+                originalUrl,
+            };
+        }
+        case 'miro': {
+            const boardId = match[1];
+            return {
+                provider,
+                id: boardId,
+                embedUrl: `https://miro.com/app/live-embed/${boardId}`,
+                originalUrl,
+            };
+        }
+        case 'excalidraw': {
+            // Handle both #json= and #room= URLs
+            const id = match[1];
+            if (originalUrl.includes('#room=')) {
+                return {
+                    provider,
+                    id,
+                    embedUrl: `https://excalidraw.com/#room=${id}`,
+                    originalUrl,
+                };
+            }
+            return {
+                provider,
+                id,
+                embedUrl: `https://excalidraw.com/#json=${id}`,
+                originalUrl,
+            };
+        }
+        case 'drawio':
+        case 'diagrams-net': {
+            // For draw.io, we need to use the original URL with viewer
+            const fileUrl = match[1] || encodeURIComponent(originalUrl);
+            return {
+                provider,
+                id: fileUrl,
+                embedUrl: `https://viewer.diagrams.net/?highlight=0000ff&edit=_blank&layers=1&nav=1&title=diagram#U${fileUrl}`,
+                originalUrl,
+            };
+        }
+        default:
+            return {
+                provider,
+                id: '',
+                embedUrl: originalUrl,
+                originalUrl,
+            };
+    }
+}
+/**
+ * Build embed URL with parameters
+ */
+function buildEmbedUrlWithParams(baseUrl, params = {}, providerConfig) {
+    const url = new URL(baseUrl);
+    // Apply custom domain if specified
+    if (providerConfig?.domain) {
+        url.hostname = providerConfig.domain;
+    }
+    // Add provider-specific params
+    if (providerConfig?.params) {
+        Object.entries(providerConfig.params).forEach(([key, value]) => {
+            url.searchParams.set(key, value);
+        });
+    }
+    // Add custom params
+    Object.entries(params).forEach(([key, value]) => {
+        url.searchParams.set(key, value);
+    });
+    return url.toString();
+}
+/**
+ * Replace template placeholders with values
+ */
+function replaceTemplatePlaceholders(template, values) {
+    let result = template;
+    for (const [key, value] of Object.entries(values)) {
+        const regex = new RegExp(`\\{${key}\\}`, 'g');
+        result = result.replace(regex, value || '');
+    }
+    return result;
+}
+/**
+ * Get aspect ratio style
+ */
+function getAspectRatioStyle(aspectRatio, customWidth, customHeight) {
+    if (customWidth && customHeight) {
+        return `width: ${customWidth}; height: ${customHeight};`;
+    }
+    const ratios = {
+        '16:9': '56.25%',
+        '4:3': '75%',
+        '1:1': '100%',
+        '21:9': '42.85%',
+    };
+    const padding = ratios[aspectRatio] || ratios['16:9'];
+    return `padding-bottom: ${padding};`;
+}
+/**
+ * Build sandbox attribute value
+ */
+function buildSandboxAttribute(permissions) {
+    return permissions.join(' ');
+}
+/**
+ * Escape HTML to prevent XSS
+ */
+function escapeHtml(text) {
+    const map = {
+        '&': '&amp;',
+        '<': '&lt;',
+        '>': '&gt;',
+        '"': '&quot;',
+        '\'': '&#039;',
+    };
+    return text.replace(/[&<>"']/g, (m) => map[m]);
+}
+
+/**
+ * Render an embed
+ */
+function renderEmbed(options) {
+    const { embedId, meta, className, template, lazyLoad, enableSandbox, sandboxPermissions, providers } = options;
+    const provider = meta.provider;
+    const providerConfig = providers[provider];
+    const providerName = PROVIDER_NAMES[provider] || provider;
+    // Build embed URL with parameters
+    const params = {
+        ...meta.params,
+    };
+    // Add provider-specific params
+    if (meta.autoplay)
+        params['autoplay'] = '1';
+    if (meta.muted)
+        params['mute'] = '1';
+    if (meta.loop)
+        params['loop'] = '1';
+    if (meta.startTime)
+        params['start'] = meta.startTime;
+    if (meta.controls === false)
+        params['controls'] = '0';
+    // Privacy mode for YouTube
+    if (provider === 'youtube' && (meta.privacyMode || providerConfig?.domain)) {
+        const urlObj = new URL(meta.url);
+        urlObj.hostname = 'www.youtube-nocookie.com';
+        meta.url = urlObj.toString();
+    }
+    const embedUrl = buildEmbedUrlWithParams(meta.url, params, providerConfig);
+    // Build aspect ratio style
+    const aspectRatio = meta.aspectRatio || '16:9';
+    const aspectRatioStyle = getAspectRatioStyle(aspectRatio, meta.width, meta.height);
+    // Build attributes
+    const allowFullscreen = meta.allowFullscreen !== false ? 'allowfullscreen' : '';
+    const loading = lazyLoad ? 'loading="lazy"' : '';
+    const sandbox = enableSandbox
+        ? `sandbox="${buildSandboxAttribute(sandboxPermissions)}"`
+        : '';
+    // Build loading placeholder
+    const loadingPlaceholder = lazyLoad
+        ? replaceTemplatePlaceholders(LOADING_PLACEHOLDER, {
+            className,
+            providerName,
+        })
+        : '';
+    // Build caption
+    const caption = meta.title
+        ? `<div class="${className}-caption">${escapeHtml(meta.title)}</div>`
+        : '';
+    // Get template
+    const templateToUse = template || providerConfig?.template || DEFAULT_TEMPLATE;
+    // Replace placeholders
+    return replaceTemplatePlaceholders(templateToUse, {
+        className,
+        embedId,
+        provider,
+        providerName,
+        embedUrl,
+        title: escapeHtml(meta.title || `${providerName} embed`),
+        aspectRatioStyle,
+        allowFullscreen,
+        sandbox,
+        loading,
+        loadingPlaceholder,
+        caption,
+    });
+}
+/**
+ * Render special embeds (mermaid, excalidraw, pdf, drawio)
+ */
+function renderSpecialEmbed(options) {
+    const { embedId, meta, className } = options;
+    const provider = meta.provider;
+    switch (provider) {
+        case 'mermaid':
+            return renderMermaidEmbed(embedId, meta, className);
+        case 'excalidraw':
+            return renderExcalidrawEmbed(embedId, meta, className);
+        case 'drawio':
+        case 'diagrams-net':
+            return renderDrawioEmbed(embedId, meta, className);
+        case 'pdf':
+            return renderPdfEmbed(embedId, meta, className);
+        default:
+            return renderEmbed(options);
+    }
+}
+/**
+ * Render Mermaid diagram
+ */
+function renderMermaidEmbed(embedId, meta, className) {
+    // Extract diagram code from URL (it should be the content after 'mermaid://')
+    const diagramCode = meta.url.replace(/^mermaid:\/\//, '');
+    return `
+<div class="${className}-container ${className}-mermaid" id="${embedId}" data-provider="mermaid">
+  <div class="mermaid">
+${escapeHtml(diagramCode)}
+  </div>
+  ${meta.title ? `<div class="${className}-caption">${escapeHtml(meta.title)}</div>` : ''}
+</div>
+  `;
+}
+/**
+ * Render Excalidraw diagram
+ */
+function renderExcalidrawEmbed(embedId, meta, className) {
+    // Excalidraw embeds use iframe with the full URL
+    const embedUrl = meta.url;
+    const aspectRatioStyle = getAspectRatioStyle(meta.aspectRatio || '16:9', meta.width, meta.height);
+    return `
+<div class="${className}-container ${className}-excalidraw" id="${embedId}" data-provider="excalidraw">
+  <div class="${className}-wrapper" style="${aspectRatioStyle}">
+    <iframe
+      class="${className}-iframe"
+      src="${embedUrl}"
+      title="${escapeHtml(meta.title || 'Excalidraw diagram')}"
+      frameborder="0"
+      allowfullscreen
+    ></iframe>
+  </div>
+  ${meta.title ? `<div class="${className}-caption">${escapeHtml(meta.title)}</div>` : ''}
+</div>
+  `;
+}
+/**
+ * Render Draw.io / Diagrams.net diagram
+ */
+function renderDrawioEmbed(embedId, meta, className) {
+    const embedUrl = meta.url;
+    const aspectRatioStyle = getAspectRatioStyle(meta.aspectRatio || '16:9', meta.width, meta.height);
+    return `
+<div class="${className}-container ${className}-drawio" id="${embedId}" data-provider="drawio">
+  <div class="${className}-wrapper" style="${aspectRatioStyle}">
+    <iframe
+      class="${className}-iframe"
+      src="${embedUrl}"
+      title="${escapeHtml(meta.title || 'Draw.io diagram')}"
+      frameborder="0"
+      allowfullscreen
+    ></iframe>
+  </div>
+  ${meta.title ? `<div class="${className}-caption">${escapeHtml(meta.title)}</div>` : ''}
+</div>
+  `;
+}
+/**
+ * Render PDF embed
+ */
+function renderPdfEmbed(embedId, meta, className) {
+    const aspectRatioStyle = getAspectRatioStyle('4:3', meta.width, meta.height);
+    return `
+<div class="${className}-container ${className}-pdf" id="${embedId}" data-provider="pdf">
+  <div class="${className}-wrapper" style="${aspectRatioStyle}">
+    <iframe
+      class="${className}-iframe"
+      src="${meta.url}"
+      title="${escapeHtml(meta.title || 'PDF document')}"
+      frameborder="0"
+      type="application/pdf"
+    ></iframe>
+  </div>
+  ${meta.title ? `<div class="${className}-caption">${escapeHtml(meta.title)}</div>` : ''}
+</div>
+  `;
+}
+
+/**
+ * Create embed tokenizer
+ */
+function createEmbedTokenizer() {
+    return {
+        name: 'embed',
+        level: 'block',
+        tokenizer(src) {
+            // Regex for embed blocks: ::::embed{props}\nurl\n::::embedend
+            const match = src.match(/^::::embed(?:\{([^}]*)})?s*\n([\s\S]*?)::::embedend/);
+            if (!match)
+                return undefined;
+            const [raw, propString = '', content] = match;
+            const url = content.trim();
+            if (!url)
+                return undefined;
+            // Parse properties
+            const props = parsePropString(propString);
+            // Detect provider from URL or use explicit provider
+            let provider = props['provider'];
+            if (!provider) {
+                const detectedProvider = detectProvider(url);
+                if (!detectedProvider)
+                    return undefined;
+                provider = detectedProvider;
+            }
+            // Parse embed URL
+            let embedUrl = url;
+            if (!['mermaid', 'excalidraw', 'pdf', 'iframe'].includes(provider)) {
+                const parsed = parseEmbedUrl(url, provider);
+                if (parsed) {
+                    embedUrl = parsed.embedUrl;
+                }
+            }
+            const meta = {
+                provider,
+                url: embedUrl,
+                title: props['title'],
+                aspectRatio: (props['aspectRatio'] || props['ratio']),
+                width: props['width'],
+                height: props['height'],
+                allowFullscreen: props['allowFullscreen'] === 'false' ? false : undefined,
+                autoplay: props['autoplay'] === 'true',
+                lazyLoad: props['lazyLoad'] !== 'false',
+                privacyMode: props['privacyMode'] === 'true' || props['privacy'] === 'true',
+                startTime: props['startTime'] || props['start'],
+                muted: props['muted'] === 'true',
+                loop: props['loop'] === 'true',
+                className: props['className'] || props['class'],
+                id: props['id'],
+                theme: props['theme'] || 'light',
+                controls: props['controls'] !== 'false',
+                params: {},
+            };
+            // Parse additional params (any prop starting with 'param-')
+            Object.entries(props).forEach(([key, value]) => {
+                if (key.startsWith('param-')) {
+                    const paramName = key.replace('param-', '');
+                    meta.params[paramName] = value;
+                }
+            });
+            return {
+                type: 'embed',
+                raw,
+                meta,
+            };
+        },
+    };
+}
+/**
+ * Create renderer for embeds
+ */
+function createEmbedRenderer(options) {
+    return {
+        name: 'embed',
+        renderer(token) {
+            const embedToken = token;
+            const meta = embedToken.meta;
+            // Generate unique ID
+            const embedId = meta.id || generateUniqueId(options.prefixId);
+            // Check if special embed (mermaid, excalidraw, pdf, drawio)
+            const isSpecialEmbed = ['mermaid', 'excalidraw', 'pdf', 'drawio', 'diagrams-net'].includes(meta.provider);
+            const renderOptions = {
+                embedId,
+                meta: {
+                    ...meta,
+                    // Override allowFullscreen from global config if meta doesn't specify
+                    allowFullscreen: meta.allowFullscreen !== undefined ? meta.allowFullscreen : options.allowFullscreen,
+                },
+                className: meta.className || options.className,
+                template: options.template,
+                lazyLoad: meta.lazyLoad !== false && options.lazyLoad,
+                enableSandbox: options.enableSandbox,
+                sandboxPermissions: options.sandboxPermissions,
+                providers: options.providers || {},
+            };
+            // Render embed
+            const html = isSpecialEmbed
+                ? renderSpecialEmbed(renderOptions)
+                : renderEmbed(renderOptions);
+            // Trigger onEmbedLoad callback if defined
+            if (options.onEmbedLoad && typeof options.onEmbedLoad === 'function') {
+                setTimeout(() => {
+                    try {
+                        options.onEmbedLoad(embedId, meta.provider);
+                    }
+                    catch (error) {
+                        console.error('Error in onEmbedLoad callback:', error);
+                    }
+                }, 0);
+            }
+            return html;
+        },
+    };
+}
+
+/**
+ * Marked Extended Embeds extension
+ * Adds support for rich media embeds from various platforms
+ *
+ * @example
+ * ```markdown
+ * ::::embed{title="My Video" aspectRatio="16:9"}
+ * https://www.youtube.com/watch?v=dQw4w9WgXcQ
+ * ::::embedend
+ *
+ * ::::embed{provider="codepen" theme="dark"}
+ * https://codepen.io/username/pen/abc123
+ * ::::embedend
+ * ```
+ *
+ * @param options - Configuration options
+ * @returns Marked extension object
+ */
+function markedExtendedEmbeds(options = {}) {
+    // Merge options with defaults
+    const config = { ...DEFAULT_OPTIONS, ...options };
+    // Inject styles if needed
+    if (config.injectStyles) {
+        ensureStyles('marked-extended-embeds-styles', DEFAULT_STYLES);
+    }
+    // Return the extension
+    return {
+        walkTokens(token) {
+            if (token.type !== 'embed')
+                return;
+            const embedToken = token;
+            // Apply custom token modifications if configured
+            if (config.customizeToken && typeof config.customizeToken === 'function') {
+                config.customizeToken(embedToken);
+            }
+        },
+        extensions: [createEmbedTokenizer(), createEmbedRenderer(config)],
+    };
+}
+
+export { markedExtendedEmbeds as default };
+//# sourceMappingURL=index.esm.js.map