@memberjunction/ng-markdown 0.0.1 → 2.126.0

package/dist/lib/extensions/collapsible-headings.extension.js

@@ -0,0 +1,240 @@
+const DEFAULT_OPTIONS = {
+    startLevel: 2,
+    defaultExpanded: true,
+    autoExpandLevels: undefined,
+    classPrefix: 'collapsible'
+};
+/**
+ * Creates a marked extension that wraps heading sections in collapsible containers.
+ *
+ * This extension transforms headings into clickable toggles that can expand/collapse
+ * the content that follows them (until the next heading of equal or higher level).
+ *
+ * The key innovation is that child sections are properly NESTED inside parent sections,
+ * so collapsing a parent will hide all its children.
+ *
+ * Usage:
+ * ```typescript
+ * import { Marked } from 'marked';
+ * import { createCollapsibleHeadingsExtension } from './collapsible-headings.extension';
+ *
+ * const marked = new Marked();
+ * marked.use(createCollapsibleHeadingsExtension({ startLevel: 2 }));
+ * ```
+ *
+ * The generated HTML structure (properly nested):
+ * ```html
+ * <div class="collapsible-section" data-level="2">
+ *   <div class="collapsible-heading-wrapper">
+ *     <h2 class="collapsible-heading" id="...">Parent Heading</h2>
+ *   </div>
+ *   <div class="collapsible-content">
+ *     <p>Content under parent...</p>
+ *     <div class="collapsible-section" data-level="3">
+ *       <div class="collapsible-heading-wrapper">
+ *         <h3 class="collapsible-heading" id="...">Child Heading</h3>
+ *       </div>
+ *       <div class="collapsible-content">
+ *         <p>Content under child...</p>
+ *       </div>
+ *     </div>
+ *   </div>
+ * </div>
+ * ```
+ *
+ * Note: The toggle button is added dynamically by the component after rendering
+ * to avoid issues with Angular's HTML sanitizer.
+ */
+export function createCollapsibleHeadingsExtension(options) {
+    const opts = { ...DEFAULT_OPTIONS, ...options };
+    return {
+        renderer: {
+            // Mark headings with a special marker that we'll process in postprocess
+            heading(token) {
+                const { depth, text } = token;
+                const escapedText = text.toLowerCase().replace(/[^\w]+/g, '-');
+                const id = `heading-${escapedText}`;
+                // Only make headings collapsible at or below the start level
+                if (depth >= opts.startLevel) {
+                    // Use a marker format that we'll parse in postprocess
+                    // Format: <!--COLLAPSIBLE_HEADING:level:id:text-->
+                    const marker = `<!--COLLAPSIBLE_HEADING:${depth}:${id}:${encodeURIComponent(text)}-->`;
+                    return `${marker}<h${depth} id="${id}">${text}</h${depth}>\n`;
+                }
+                // Regular heading rendering for levels above startLevel
+                return `<h${depth} id="${id}">${text}</h${depth}>\n`;
+            }
+        },
+        hooks: {
+            postprocess(html) {
+                return restructureToNestedSections(html, opts);
+            }
+        }
+    };
+}
+/**
+ * Restructures flat HTML with heading markers into properly nested collapsible sections.
+ * This is the key function that creates the hierarchical structure needed for
+ * parent collapse to affect children.
+ */
+function restructureToNestedSections(html, opts) {
+    // Parse the HTML to find all content chunks and headings
+    const markerRegex = /<!--COLLAPSIBLE_HEADING:(\d):([^:]+):([^>]+)-->/g;
+    // Split HTML by markers while capturing the markers
+    const parts = [];
+    let lastIndex = 0;
+    let match;
+    while ((match = markerRegex.exec(html)) !== null) {
+        // Add content before this marker
+        if (match.index > lastIndex) {
+            const content = html.slice(lastIndex, match.index);
+            if (content.trim()) {
+                parts.push({ type: 'content', content });
+            }
+        }
+        // Add the heading marker info
+        parts.push({
+            type: 'heading',
+            content: '', // Will be filled with the actual h tag
+            level: parseInt(match[1], 10),
+            id: match[2],
+            text: decodeURIComponent(match[3])
+        });
+        lastIndex = match.index + match[0].length;
+    }
+    // Add remaining content after last marker
+    if (lastIndex < html.length) {
+        const content = html.slice(lastIndex);
+        if (content.trim()) {
+            parts.push({ type: 'content', content });
+        }
+    }
+    // If no collapsible headings, return original HTML
+    if (!parts.some(p => p.type === 'heading')) {
+        return html;
+    }
+    // Now build the nested structure
+    return buildNestedStructure(parts, opts);
+}
+/**
+ * Determine if a heading level should start expanded based on options
+ */
+function shouldLevelBeExpanded(level, opts) {
+    // If autoExpandLevels is specified, use it
+    if (opts.autoExpandLevels !== undefined) {
+        return opts.autoExpandLevels.includes(level);
+    }
+    // Otherwise fall back to defaultExpanded
+    return opts.defaultExpanded;
+}
+/**
+ * Builds the nested HTML structure from the parsed parts.
+ */
+function buildNestedStructure(parts, opts) {
+    const result = [];
+    // Stack tracks open sections: { level, hasContent }
+    const sectionStack = [];
+    for (let i = 0; i < parts.length; i++) {
+        const part = parts[i];
+        if (part.type === 'content') {
+            // Regular content - just add it
+            result.push(part.content);
+        }
+        else if (part.type === 'heading' && part.level !== undefined) {
+            const level = part.level;
+            // Close any sections at same or higher level (lower number = higher level)
+            while (sectionStack.length > 0 && sectionStack[sectionStack.length - 1].level >= level) {
+                // Close the content div and section div
+                result.push('</div></div>');
+                sectionStack.pop();
+            }
+            // Determine expanded state for this specific level
+            const isExpanded = shouldLevelBeExpanded(level, opts);
+            const expandedClass = isExpanded ? '' : ' collapsed';
+            // Extract the actual h tag from the next content piece if it starts with it
+            let headingHtml = `<h${level} class="${opts.classPrefix}-heading" id="${part.id}">${part.text}</h${level}>`;
+            // Look ahead to find and remove the actual h tag from content
+            if (i + 1 < parts.length && parts[i + 1].type === 'content') {
+                const nextContent = parts[i + 1].content;
+                const hTagRegex = new RegExp(`<h${level}[^>]*id="${part.id}"[^>]*>[^<]*</h${level}>\\s*`);
+                const hTagMatch = nextContent.match(hTagRegex);
+                if (hTagMatch) {
+                    // Use the actual h tag and remove it from content
+                    headingHtml = hTagMatch[0].replace(`<h${level}`, `<h${level} class="${opts.classPrefix}-heading"`);
+                    parts[i + 1].content = nextContent.replace(hTagRegex, '');
+                }
+            }
+            // Open new section
+            result.push(`<div class="${opts.classPrefix}-section${expandedClass}" data-level="${level}">`);
+            result.push(`<div class="${opts.classPrefix}-heading-wrapper">`);
+            result.push(headingHtml);
+            result.push('</div>');
+            result.push(`<div class="${opts.classPrefix}-content">`);
+            sectionStack.push({ level });
+        }
+    }
+    // Close any remaining open sections
+    while (sectionStack.length > 0) {
+        result.push('</div></div>');
+        sectionStack.pop();
+    }
+    return result.join('');
+}
+/**
+ * Helper function to toggle a collapsible section programmatically
+ */
+export function toggleCollapsibleSection(sectionElement) {
+    const isCollapsed = sectionElement.classList.contains('collapsed');
+    const toggle = sectionElement.querySelector('.collapsible-toggle');
+    sectionElement.classList.toggle('collapsed');
+    if (toggle) {
+        toggle.setAttribute('aria-expanded', String(isCollapsed));
+    }
+}
+/**
+ * Expand all collapsible sections in a container
+ */
+export function expandAllSections(container) {
+    const sections = container.querySelectorAll('.collapsible-section.collapsed');
+    sections.forEach((section) => {
+        section.classList.remove('collapsed');
+        const toggle = section.querySelector('.collapsible-toggle');
+        if (toggle) {
+            toggle.setAttribute('aria-expanded', 'true');
+        }
+    });
+}
+/**
+ * Collapse all collapsible sections in a container
+ */
+export function collapseAllSections(container) {
+    const sections = container.querySelectorAll('.collapsible-section:not(.collapsed)');
+    sections.forEach((section) => {
+        section.classList.add('collapsed');
+        const toggle = section.querySelector('.collapsible-toggle');
+        if (toggle) {
+            toggle.setAttribute('aria-expanded', 'false');
+        }
+    });
+}
+/**
+ * Expand sections to reveal a specific heading by ID
+ */
+export function expandToHeading(container, headingId) {
+    const heading = container.querySelector(`#${headingId}`);
+    if (!heading)
+        return;
+    // Find all ancestor collapsible sections and expand them
+    let current = heading.closest('.collapsible-section');
+    while (current) {
+        if (current.classList.contains('collapsed')) {
+            current.classList.remove('collapsed');
+            const toggle = current.querySelector(':scope > .collapsible-heading-wrapper .collapsible-toggle');
+            if (toggle) {
+                toggle.setAttribute('aria-expanded', 'true');
+            }
+        }
+        current = current.parentElement?.closest('.collapsible-section') || null;
+    }
+}
+//# sourceMappingURL=collapsible-headings.extension.js.map

package/dist/lib/extensions/collapsible-headings.extension.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapsible-headings.extension.js","sourceRoot":"","sources":["../../../src/lib/extensions/collapsible-headings.extension.ts"],"names":[],"mappings":"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","sourcesContent":["import { MarkedExtension, Tokens } from 'marked';\n\n/**\n * Options for the collapsible headings extension\n */\nexport interface CollapsibleHeadingsOptions {\n  /**\n   * The minimum heading level to make collapsible (1-6)\n   * Headings at this level and below will be collapsible\n   * @default 2\n   */\n  startLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n\n  /**\n   * Whether sections should be expanded by default\n   * @default true\n   */\n  defaultExpanded?: boolean;\n\n  /**\n   * Specify which heading levels should start expanded.\n   * Takes precedence over defaultExpanded for specified levels.\n   * @default undefined (uses defaultExpanded for all levels)\n   */\n  autoExpandLevels?: number[];\n\n  /**\n   * CSS class prefix for generated elements\n   * @default 'collapsible'\n   */\n  classPrefix?: string;\n}\n\ninterface ResolvedOptions {\n  startLevel: 1 | 2 | 3 | 4 | 5 | 6;\n  defaultExpanded: boolean;\n  autoExpandLevels?: number[];\n  classPrefix: string;\n}\n\nconst DEFAULT_OPTIONS: ResolvedOptions = {\n  startLevel: 2,\n  defaultExpanded: true,\n  autoExpandLevels: undefined,\n  classPrefix: 'collapsible'\n};\n\n/**\n * Creates a marked extension that wraps heading sections in collapsible containers.\n *\n * This extension transforms headings into clickable toggles that can expand/collapse\n * the content that follows them (until the next heading of equal or higher level).\n *\n * The key innovation is that child sections are properly NESTED inside parent sections,\n * so collapsing a parent will hide all its children.\n *\n * Usage:\n * ```typescript\n * import { Marked } from 'marked';\n * import { createCollapsibleHeadingsExtension } from './collapsible-headings.extension';\n *\n * const marked = new Marked();\n * marked.use(createCollapsibleHeadingsExtension({ startLevel: 2 }));\n * ```\n *\n * The generated HTML structure (properly nested):\n * ```html\n * <div class=\"collapsible-section\" data-level=\"2\">\n *   <div class=\"collapsible-heading-wrapper\">\n *     <h2 class=\"collapsible-heading\" id=\"...\">Parent Heading</h2>\n *   </div>\n *   <div class=\"collapsible-content\">\n *     <p>Content under parent...</p>\n *     <div class=\"collapsible-section\" data-level=\"3\">\n *       <div class=\"collapsible-heading-wrapper\">\n *         <h3 class=\"collapsible-heading\" id=\"...\">Child Heading</h3>\n *       </div>\n *       <div class=\"collapsible-content\">\n *         <p>Content under child...</p>\n *       </div>\n *     </div>\n *   </div>\n * </div>\n * ```\n *\n * Note: The toggle button is added dynamically by the component after rendering\n * to avoid issues with Angular's HTML sanitizer.\n */\nexport function createCollapsibleHeadingsExtension(\n  options?: CollapsibleHeadingsOptions\n): MarkedExtension {\n  const opts: ResolvedOptions = { ...DEFAULT_OPTIONS, ...options };\n\n  return {\n    renderer: {\n      // Mark headings with a special marker that we'll process in postprocess\n      heading(token: Tokens.Heading): string {\n        const { depth, text } = token;\n        const escapedText = text.toLowerCase().replace(/[^\\w]+/g, '-');\n        const id = `heading-${escapedText}`;\n\n        // Only make headings collapsible at or below the start level\n        if (depth >= opts.startLevel) {\n          // Use a marker format that we'll parse in postprocess\n          // Format: <!--COLLAPSIBLE_HEADING:level:id:text-->\n          const marker = `<!--COLLAPSIBLE_HEADING:${depth}:${id}:${encodeURIComponent(text)}-->`;\n          return `${marker}<h${depth} id=\"${id}\">${text}</h${depth}>\\n`;\n        }\n\n        // Regular heading rendering for levels above startLevel\n        return `<h${depth} id=\"${id}\">${text}</h${depth}>\\n`;\n      }\n    },\n\n    hooks: {\n      postprocess(html: string): string {\n        return restructureToNestedSections(html, opts);\n      }\n    }\n  };\n}\n\n/**\n * Restructures flat HTML with heading markers into properly nested collapsible sections.\n * This is the key function that creates the hierarchical structure needed for\n * parent collapse to affect children.\n */\nfunction restructureToNestedSections(\n  html: string,\n  opts: ResolvedOptions\n): string {\n  // Parse the HTML to find all content chunks and headings\n  const markerRegex = /<!--COLLAPSIBLE_HEADING:(\\d):([^:]+):([^>]+)-->/g;\n\n  // Split HTML by markers while capturing the markers\n  const parts: Array<{ type: 'content' | 'heading'; content: string; level?: number; id?: string; text?: string }> = [];\n  let lastIndex = 0;\n  let match;\n\n  while ((match = markerRegex.exec(html)) !== null) {\n    // Add content before this marker\n    if (match.index > lastIndex) {\n      const content = html.slice(lastIndex, match.index);\n      if (content.trim()) {\n        parts.push({ type: 'content', content });\n      }\n    }\n\n    // Add the heading marker info\n    parts.push({\n      type: 'heading',\n      content: '', // Will be filled with the actual h tag\n      level: parseInt(match[1], 10),\n      id: match[2],\n      text: decodeURIComponent(match[3])\n    });\n\n    lastIndex = match.index + match[0].length;\n  }\n\n  // Add remaining content after last marker\n  if (lastIndex < html.length) {\n    const content = html.slice(lastIndex);\n    if (content.trim()) {\n      parts.push({ type: 'content', content });\n    }\n  }\n\n  // If no collapsible headings, return original HTML\n  if (!parts.some(p => p.type === 'heading')) {\n    return html;\n  }\n\n  // Now build the nested structure\n  return buildNestedStructure(parts, opts);\n}\n\n/**\n * Determine if a heading level should start expanded based on options\n */\nfunction shouldLevelBeExpanded(level: number, opts: ResolvedOptions): boolean {\n  // If autoExpandLevels is specified, use it\n  if (opts.autoExpandLevels !== undefined) {\n    return opts.autoExpandLevels.includes(level);\n  }\n  // Otherwise fall back to defaultExpanded\n  return opts.defaultExpanded;\n}\n\n/**\n * Builds the nested HTML structure from the parsed parts.\n */\nfunction buildNestedStructure(\n  parts: Array<{ type: 'content' | 'heading'; content: string; level?: number; id?: string; text?: string }>,\n  opts: ResolvedOptions\n): string {\n  const result: string[] = [];\n  // Stack tracks open sections: { level, hasContent }\n  const sectionStack: Array<{ level: number }> = [];\n\n  for (let i = 0; i < parts.length; i++) {\n    const part = parts[i];\n\n    if (part.type === 'content') {\n      // Regular content - just add it\n      result.push(part.content);\n    } else if (part.type === 'heading' && part.level !== undefined) {\n      const level = part.level;\n\n      // Close any sections at same or higher level (lower number = higher level)\n      while (sectionStack.length > 0 && sectionStack[sectionStack.length - 1].level >= level) {\n        // Close the content div and section div\n        result.push('</div></div>');\n        sectionStack.pop();\n      }\n\n      // Determine expanded state for this specific level\n      const isExpanded = shouldLevelBeExpanded(level, opts);\n      const expandedClass = isExpanded ? '' : ' collapsed';\n\n      // Extract the actual h tag from the next content piece if it starts with it\n      let headingHtml = `<h${level} class=\"${opts.classPrefix}-heading\" id=\"${part.id}\">${part.text}</h${level}>`;\n\n      // Look ahead to find and remove the actual h tag from content\n      if (i + 1 < parts.length && parts[i + 1].type === 'content') {\n        const nextContent = parts[i + 1].content;\n        const hTagRegex = new RegExp(`<h${level}[^>]*id=\"${part.id}\"[^>]*>[^<]*</h${level}>\\\\s*`);\n        const hTagMatch = nextContent.match(hTagRegex);\n        if (hTagMatch) {\n          // Use the actual h tag and remove it from content\n          headingHtml = hTagMatch[0].replace(`<h${level}`, `<h${level} class=\"${opts.classPrefix}-heading\"`);\n          parts[i + 1].content = nextContent.replace(hTagRegex, '');\n        }\n      }\n\n      // Open new section\n      result.push(`<div class=\"${opts.classPrefix}-section${expandedClass}\" data-level=\"${level}\">`);\n      result.push(`<div class=\"${opts.classPrefix}-heading-wrapper\">`);\n      result.push(headingHtml);\n      result.push('</div>');\n      result.push(`<div class=\"${opts.classPrefix}-content\">`);\n\n      sectionStack.push({ level });\n    }\n  }\n\n  // Close any remaining open sections\n  while (sectionStack.length > 0) {\n    result.push('</div></div>');\n    sectionStack.pop();\n  }\n\n  return result.join('');\n}\n\n/**\n * Helper function to toggle a collapsible section programmatically\n */\nexport function toggleCollapsibleSection(sectionElement: HTMLElement): void {\n  const isCollapsed = sectionElement.classList.contains('collapsed');\n  const toggle = sectionElement.querySelector('.collapsible-toggle');\n\n  sectionElement.classList.toggle('collapsed');\n\n  if (toggle) {\n    toggle.setAttribute('aria-expanded', String(isCollapsed));\n  }\n}\n\n/**\n * Expand all collapsible sections in a container\n */\nexport function expandAllSections(container: HTMLElement): void {\n  const sections = container.querySelectorAll('.collapsible-section.collapsed');\n  sections.forEach((section) => {\n    section.classList.remove('collapsed');\n    const toggle = section.querySelector('.collapsible-toggle');\n    if (toggle) {\n      toggle.setAttribute('aria-expanded', 'true');\n    }\n  });\n}\n\n/**\n * Collapse all collapsible sections in a container\n */\nexport function collapseAllSections(container: HTMLElement): void {\n  const sections = container.querySelectorAll('.collapsible-section:not(.collapsed)');\n  sections.forEach((section) => {\n    section.classList.add('collapsed');\n    const toggle = section.querySelector('.collapsible-toggle');\n    if (toggle) {\n      toggle.setAttribute('aria-expanded', 'false');\n    }\n  });\n}\n\n/**\n * Expand sections to reveal a specific heading by ID\n */\nexport function expandToHeading(container: HTMLElement, headingId: string): void {\n  const heading = container.querySelector(`#${headingId}`);\n  if (!heading) return;\n\n  // Find all ancestor collapsible sections and expand them\n  let current: HTMLElement | null = heading.closest('.collapsible-section');\n  while (current) {\n    if (current.classList.contains('collapsed')) {\n      current.classList.remove('collapsed');\n      const toggle = current.querySelector(':scope > .collapsible-heading-wrapper .collapsible-toggle');\n      if (toggle) {\n        toggle.setAttribute('aria-expanded', 'true');\n      }\n    }\n    current = current.parentElement?.closest('.collapsible-section') || null;\n  }\n}\n"]}

package/dist/lib/extensions/svg-renderer.extension.d.ts

@@ -0,0 +1,38 @@
+import { MarkedExtension } from 'marked';
+/**
+ * Creates a marked extension that renders SVG code blocks as actual SVG images.
+ *
+ * When encountering a code block with language "svg", this extension will
+ * render it as an actual SVG element instead of showing the code.
+ *
+ * This is useful for:
+ * - UX mockups and wireframes
+ * - Diagrams and illustrations
+ * - Icons and simple graphics
+ * - Any visual content that can be expressed as SVG
+ *
+ * Usage in markdown:
+ * ```svg
+ * <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
+ *   <circle cx="50" cy="50" r="40" fill="blue"/>
+ * </svg>
+ * ```
+ *
+ * The generated HTML structure:
+ * ```html
+ * <div class="svg-rendered">
+ *   <svg ...>...</svg>
+ * </div>
+ * ```
+ *
+ * Security note: SVG content is rendered as-is. Make sure to only render
+ * trusted SVG content or enable sanitization if rendering user-provided content.
+ */
+export declare function createSvgRendererExtension(): MarkedExtension;
+/**
+ * Helper function to sanitize SVG content by removing potentially dangerous elements.
+ * Call this on the container element after rendering if you need additional security.
+ *
+ * @param container The DOM element containing rendered SVG
+ */
+export declare function sanitizeSvgContent(container: HTMLElement): void;

package/dist/lib/extensions/svg-renderer.extension.js

@@ -0,0 +1,126 @@
+/**
+ * Creates a marked extension that renders SVG code blocks as actual SVG images.
+ *
+ * When encountering a code block with language "svg", this extension will
+ * render it as an actual SVG element instead of showing the code.
+ *
+ * This is useful for:
+ * - UX mockups and wireframes
+ * - Diagrams and illustrations
+ * - Icons and simple graphics
+ * - Any visual content that can be expressed as SVG
+ *
+ * Usage in markdown:
+ * ```svg
+ * <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
+ *   <circle cx="50" cy="50" r="40" fill="blue"/>
+ * </svg>
+ * ```
+ *
+ * The generated HTML structure:
+ * ```html
+ * <div class="svg-rendered">
+ *   <svg ...>...</svg>
+ * </div>
+ * ```
+ *
+ * Security note: SVG content is rendered as-is. Make sure to only render
+ * trusted SVG content or enable sanitization if rendering user-provided content.
+ */
+export function createSvgRendererExtension() {
+    return {
+        extensions: [{
+                name: 'svgCodeBlock',
+                level: 'block',
+                start(src) {
+                    // Look for ```svg at the start of the source
+                    const match = src.match(/^```svg\b/);
+                    return match ? match.index : undefined;
+                },
+                tokenizer(src) {
+                    // Match ```svg code blocks
+                    const rule = /^```svg\n([\s\S]*?)```(?:\n|$)/;
+                    const match = rule.exec(src);
+                    if (match) {
+                        const svgContent = match[1].trim();
+                        // Only process if it looks like valid SVG
+                        if (isSvgContent(svgContent)) {
+                            return {
+                                type: 'svgCodeBlock',
+                                raw: match[0],
+                                svgContent: svgContent
+                            };
+                        }
+                    }
+                    return undefined;
+                },
+                renderer(token) {
+                    const svgToken = token;
+                    return `<div class="svg-rendered">${svgToken.svgContent}</div>\n`;
+                }
+            }]
+    };
+}
+/**
+ * Basic validation to check if content appears to be SVG.
+ * This is a simple check - it doesn't fully validate SVG syntax.
+ */
+function isSvgContent(content) {
+    // Check if it starts with <svg and contains closing </svg>
+    const startsWithSvg = content.toLowerCase().startsWith('<svg');
+    const hasSvgClosing = content.toLowerCase().includes('</svg>');
+    // Also accept self-closing SVG (rare but valid)
+    const isSelfClosing = content.toLowerCase().match(/<svg[^>]*\/>/);
+    return (startsWithSvg && hasSvgClosing) || !!isSelfClosing;
+}
+/**
+ * Helper function to sanitize SVG content by removing potentially dangerous elements.
+ * Call this on the container element after rendering if you need additional security.
+ *
+ * @param container The DOM element containing rendered SVG
+ */
+export function sanitizeSvgContent(container) {
+    // Remove script elements
+    const scripts = container.querySelectorAll('script');
+    scripts.forEach(script => script.remove());
+    // Remove event handlers from all elements
+    const allElements = container.querySelectorAll('*');
+    allElements.forEach(el => {
+        // Remove common event handler attributes
+        const dangerousAttrs = [
+            'onload', 'onerror', 'onclick', 'onmouseover', 'onmouseout',
+            'onfocus', 'onblur', 'onchange', 'onsubmit', 'onreset',
+            'onkeydown', 'onkeyup', 'onkeypress'
+        ];
+        dangerousAttrs.forEach(attr => {
+            if (el.hasAttribute(attr)) {
+                el.removeAttribute(attr);
+            }
+        });
+        // Remove javascript: URLs from href/xlink:href
+        if (el.hasAttribute('href')) {
+            const href = el.getAttribute('href') || '';
+            if (href.toLowerCase().startsWith('javascript:')) {
+                el.removeAttribute('href');
+            }
+        }
+        if (el.hasAttribute('xlink:href')) {
+            const href = el.getAttribute('xlink:href') || '';
+            if (href.toLowerCase().startsWith('javascript:')) {
+                el.removeAttribute('xlink:href');
+            }
+        }
+    });
+    // Remove foreignObject elements (can contain HTML/scripts)
+    const foreignObjects = container.querySelectorAll('foreignObject');
+    foreignObjects.forEach(fo => fo.remove());
+    // Remove use elements pointing to external resources
+    const useElements = container.querySelectorAll('use');
+    useElements.forEach(use => {
+        const href = use.getAttribute('href') || use.getAttribute('xlink:href') || '';
+        if (href.startsWith('http://') || href.startsWith('https://') || href.startsWith('//')) {
+            use.remove();
+        }
+    });
+}
+//# sourceMappingURL=svg-renderer.extension.js.map

package/dist/lib/extensions/svg-renderer.extension.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"svg-renderer.extension.js","sourceRoot":"","sources":["../../../src/lib/extensions/svg-renderer.extension.ts"],"names":[],"mappings":"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","sourcesContent":["import { MarkedExtension } from 'marked';\n\n/**\n * Creates a marked extension that renders SVG code blocks as actual SVG images.\n *\n * When encountering a code block with language \"svg\", this extension will\n * render it as an actual SVG element instead of showing the code.\n *\n * This is useful for:\n * - UX mockups and wireframes\n * - Diagrams and illustrations\n * - Icons and simple graphics\n * - Any visual content that can be expressed as SVG\n *\n * Usage in markdown:\n * ```svg\n * <svg width=\"100\" height=\"100\" xmlns=\"http://www.w3.org/2000/svg\">\n *   <circle cx=\"50\" cy=\"50\" r=\"40\" fill=\"blue\"/>\n * </svg>\n * ```\n *\n * The generated HTML structure:\n * ```html\n * <div class=\"svg-rendered\">\n *   <svg ...>...</svg>\n * </div>\n * ```\n *\n * Security note: SVG content is rendered as-is. Make sure to only render\n * trusted SVG content or enable sanitization if rendering user-provided content.\n */\nexport function createSvgRendererExtension(): MarkedExtension {\n  return {\n    extensions: [{\n      name: 'svgCodeBlock',\n      level: 'block',\n      start(src: string) {\n        // Look for ```svg at the start of the source\n        const match = src.match(/^```svg\\b/);\n        return match ? match.index : undefined;\n      },\n      tokenizer(src: string) {\n        // Match ```svg code blocks\n        const rule = /^```svg\\n([\\s\\S]*?)```(?:\\n|$)/;\n        const match = rule.exec(src);\n\n        if (match) {\n          const svgContent = match[1].trim();\n\n          // Only process if it looks like valid SVG\n          if (isSvgContent(svgContent)) {\n            return {\n              type: 'svgCodeBlock',\n              raw: match[0],\n              svgContent: svgContent\n            };\n          }\n        }\n        return undefined;\n      },\n      renderer(token) {\n        const svgToken = token as unknown as { svgContent: string };\n        return `<div class=\"svg-rendered\">${svgToken.svgContent}</div>\\n`;\n      }\n    }]\n  };\n}\n\n/**\n * Basic validation to check if content appears to be SVG.\n * This is a simple check - it doesn't fully validate SVG syntax.\n */\nfunction isSvgContent(content: string): boolean {\n  // Check if it starts with <svg and contains closing </svg>\n  const startsWithSvg = content.toLowerCase().startsWith('<svg');\n  const hasSvgClosing = content.toLowerCase().includes('</svg>');\n\n  // Also accept self-closing SVG (rare but valid)\n  const isSelfClosing = content.toLowerCase().match(/<svg[^>]*\\/>/);\n\n  return (startsWithSvg && hasSvgClosing) || !!isSelfClosing;\n}\n\n/**\n * Helper function to sanitize SVG content by removing potentially dangerous elements.\n * Call this on the container element after rendering if you need additional security.\n *\n * @param container The DOM element containing rendered SVG\n */\nexport function sanitizeSvgContent(container: HTMLElement): void {\n  // Remove script elements\n  const scripts = container.querySelectorAll('script');\n  scripts.forEach(script => script.remove());\n\n  // Remove event handlers from all elements\n  const allElements = container.querySelectorAll('*');\n  allElements.forEach(el => {\n    // Remove common event handler attributes\n    const dangerousAttrs = [\n      'onload', 'onerror', 'onclick', 'onmouseover', 'onmouseout',\n      'onfocus', 'onblur', 'onchange', 'onsubmit', 'onreset',\n      'onkeydown', 'onkeyup', 'onkeypress'\n    ];\n\n    dangerousAttrs.forEach(attr => {\n      if (el.hasAttribute(attr)) {\n        el.removeAttribute(attr);\n      }\n    });\n\n    // Remove javascript: URLs from href/xlink:href\n    if (el.hasAttribute('href')) {\n      const href = el.getAttribute('href') || '';\n      if (href.toLowerCase().startsWith('javascript:')) {\n        el.removeAttribute('href');\n      }\n    }\n    if (el.hasAttribute('xlink:href')) {\n      const href = el.getAttribute('xlink:href') || '';\n      if (href.toLowerCase().startsWith('javascript:')) {\n        el.removeAttribute('xlink:href');\n      }\n    }\n  });\n\n  // Remove foreignObject elements (can contain HTML/scripts)\n  const foreignObjects = container.querySelectorAll('foreignObject');\n  foreignObjects.forEach(fo => fo.remove());\n\n  // Remove use elements pointing to external resources\n  const useElements = container.querySelectorAll('use');\n  useElements.forEach(use => {\n    const href = use.getAttribute('href') || use.getAttribute('xlink:href') || '';\n    if (href.startsWith('http://') || href.startsWith('https://') || href.startsWith('//')) {\n      use.remove();\n    }\n  });\n}\n"]}

package/dist/lib/markdown.module.d.ts

@@ -0,0 +1,38 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./components/markdown.component";
+import * as i2 from "@angular/common";
+/**
+ * MemberJunction Markdown Module
+ *
+ * A lightweight Angular module for rendering markdown content with:
+ * - Prism.js syntax highlighting
+ * - Mermaid diagram support
+ * - Copy-to-clipboard for code blocks
+ * - Collapsible heading sections
+ * - GitHub-style alerts
+ * - Heading anchor IDs
+ *
+ * Usage:
+ * ```typescript
+ * import { MarkdownModule } from '@memberjunction/ng-markdown';
+ *
+ * @NgModule({
+ *   imports: [MarkdownModule]
+ * })
+ * export class YourModule { }
+ * ```
+ *
+ * Then in your template:
+ * ```html
+ * <mj-markdown [data]="markdownContent"></mj-markdown>
+ * ```
+ *
+ * Note: This module does NOT use forRoot(). Simply import it in any module
+ * where you need markdown rendering. The MarkdownService is provided at root
+ * level for efficient sharing across the application.
+ */
+export declare class MarkdownModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MarkdownModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MarkdownModule, [typeof i1.MarkdownComponent], [typeof i2.CommonModule], [typeof i1.MarkdownComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<MarkdownModule>;
+}

package/dist/lib/markdown.module.js

@@ -0,0 +1,59 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MarkdownComponent } from './components/markdown.component';
+import * as i0 from "@angular/core";
+/**
+ * MemberJunction Markdown Module
+ *
+ * A lightweight Angular module for rendering markdown content with:
+ * - Prism.js syntax highlighting
+ * - Mermaid diagram support
+ * - Copy-to-clipboard for code blocks
+ * - Collapsible heading sections
+ * - GitHub-style alerts
+ * - Heading anchor IDs
+ *
+ * Usage:
+ * ```typescript
+ * import { MarkdownModule } from '@memberjunction/ng-markdown';
+ *
+ * @NgModule({
+ *   imports: [MarkdownModule]
+ * })
+ * export class YourModule { }
+ * ```
+ *
+ * Then in your template:
+ * ```html
+ * <mj-markdown [data]="markdownContent"></mj-markdown>
+ * ```
+ *
+ * Note: This module does NOT use forRoot(). Simply import it in any module
+ * where you need markdown rendering. The MarkdownService is provided at root
+ * level for efficient sharing across the application.
+ */
+export class MarkdownModule {
+    static { this.ɵfac = function MarkdownModule_Factory(t) { return new (t || MarkdownModule)(); }; }
+    static { this.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: MarkdownModule }); }
+    static { this.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonModule] }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MarkdownModule, [{
+        type: NgModule,
+        args: [{
+                declarations: [
+                    MarkdownComponent
+                ],
+                imports: [
+                    CommonModule
+                ],
+                exports: [
+                    MarkdownComponent
+                ],
+                providers: [
+                // MarkdownService is providedIn: 'root', so no need to provide here
+                // This ensures a single instance is shared across the app
+                ]
+            }]
+    }], null, null); })();
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MarkdownModule, { declarations: [MarkdownComponent], imports: [CommonModule], exports: [MarkdownComponent] }); })();
+//# sourceMappingURL=markdown.module.js.map

package/dist/lib/markdown.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"markdown.module.js","sourceRoot":"","sources":["../../src/lib/markdown.module.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;;AAGpE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAgBH,MAAM,OAAO,cAAc;+EAAd,cAAc;mEAAd,cAAc;uEAVvB,YAAY;;iFAUH,cAAc;cAf1B,QAAQ;eAAC;gBACR,YAAY,EAAE;oBACZ,iBAAiB;iBAClB;gBACD,OAAO,EAAE;oBACP,YAAY;iBACb;gBACD,OAAO,EAAE;oBACP,iBAAiB;iBAClB;gBACD,SAAS,EAAE;gBACT,oEAAoE;gBACpE,0DAA0D;iBAC3D;aACF;;wFACY,cAAc,mBAbvB,iBAAiB,aAGjB,YAAY,aAGZ,iBAAiB","sourcesContent":["import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { MarkdownComponent } from './components/markdown.component';\nimport { MarkdownService } from './services/markdown.service';\n\n/**\n * MemberJunction Markdown Module\n *\n * A lightweight Angular module for rendering markdown content with:\n * - Prism.js syntax highlighting\n * - Mermaid diagram support\n * - Copy-to-clipboard for code blocks\n * - Collapsible heading sections\n * - GitHub-style alerts\n * - Heading anchor IDs\n *\n * Usage:\n * ```typescript\n * import { MarkdownModule } from '@memberjunction/ng-markdown';\n *\n * @NgModule({\n *   imports: [MarkdownModule]\n * })\n * export class YourModule { }\n * ```\n *\n * Then in your template:\n * ```html\n * <mj-markdown [data]=\"markdownContent\"></mj-markdown>\n * ```\n *\n * Note: This module does NOT use forRoot(). Simply import it in any module\n * where you need markdown rendering. The MarkdownService is provided at root\n * level for efficient sharing across the application.\n */\n@NgModule({\n  declarations: [\n    MarkdownComponent\n  ],\n  imports: [\n    CommonModule\n  ],\n  exports: [\n    MarkdownComponent\n  ],\n  providers: [\n    // MarkdownService is providedIn: 'root', so no need to provide here\n    // This ensures a single instance is shared across the app\n  ]\n})\nexport class MarkdownModule { }\n"]}