@memberjunction/ng-markdown 6.1.0-edge.4 → 6.1.0-edge.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/dist/__tests__/web-dom-utils.test.js +57 -0
  2. package/dist/__tests__/web-dom-utils.test.js.map +1 -1
  3. package/dist/lib/components/markdown.component.d.ts +0 -10
  4. package/dist/lib/components/markdown.component.d.ts.map +1 -1
  5. package/dist/lib/components/markdown.component.dom.test.js +119 -0
  6. package/dist/lib/components/markdown.component.dom.test.js.map +1 -1
  7. package/dist/lib/components/markdown.component.js +5 -68
  8. package/dist/lib/components/markdown.component.js.map +1 -1
  9. package/dist/lib/extensions/svg-renderer.extension.d.ts +6 -1
  10. package/dist/lib/extensions/svg-renderer.extension.d.ts.map +1 -1
  11. package/dist/lib/extensions/svg-renderer.extension.js +47 -36
  12. package/dist/lib/extensions/svg-renderer.extension.js.map +1 -1
  13. package/dist/lib/services/markdown.service.d.ts +39 -10
  14. package/dist/lib/services/markdown.service.d.ts.map +1 -1
  15. package/dist/lib/services/markdown.service.dom.test.js +80 -1
  16. package/dist/lib/services/markdown.service.dom.test.js.map +1 -1
  17. package/dist/lib/services/markdown.service.js +160 -17
  18. package/dist/lib/services/markdown.service.js.map +1 -1
  19. package/package.json +10 -9
package/dist/lib/components/markdown.component.js CHANGED
@@ -216,11 +216,9 @@ export class MarkdownComponent {
216
216
  const sanitized = this.sanitizer.sanitize(SecurityContext.HTML, html);
217
217
  html = sanitized || '';
218
218
  }
219
- // Strip JavaScript unless explicitly enabled
220
- // This removes <script> tags and on* event handlers while keeping layout HTML
221
- if (bypassAngularSanitizer && !this.enableJavaScript) {
222
- html = this.stripJavaScript(html);
223
- }
219
+ // When Angular's sanitizer is bypassed, the HTML has already been sanitized by
220
+ // MarkdownService.parse() (DOMPurify, HTML + SVG profiles) unless enableJavaScript
221
+ // opted out. Nothing further to do here.
224
222
  // Trust the HTML for display
225
223
  this.renderedContent = this.sanitizer.bypassSecurityTrustHtml(html);
226
224
  this.cdr.markForCheck();
@@ -504,78 +502,17 @@ export class MarkdownComponent {
504
502
  heading.scrollIntoView({ behavior: 'smooth', block: 'start' });
505
503
  }
506
504
  }
507
- /**
508
- * Strip JavaScript from HTML content while preserving layout HTML.
509
- * Removes <script> tags, on* event handlers, and javascript: URLs.
510
- */
511
- stripJavaScript(html) {
512
- if (typeof DOMParser === 'undefined') {
513
- // Fallback for environments without DOMParser
514
- return this.fallbackStripJavaScript(html);
515
- }
516
- try {
517
- const parser = new DOMParser();
518
- const doc = parser.parseFromString('<body>' + html + '</body>', 'text/html');
519
- const cleanNode = (node) => {
520
- const tagName = node.tagName.toLowerCase();
521
- // Remove unsafe elements completely
522
- if (tagName === 'script' || tagName === 'iframe' || tagName === 'object' || tagName === 'embed' || tagName === 'base') {
523
- node.parentNode?.removeChild(node);
524
- return;
525
- }
526
- if (node.attributes) {
527
- const attrs = Array.from(node.attributes);
528
- for (const attr of attrs) {
529
- const name = attr.name.toLowerCase();
530
- // Remove whitespace and control chars from value to prevent bypasses like "java\nscript:"
531
- // eslint-disable-next-line no-control-regex
532
- const valueStr = attr.value.toLowerCase().replace(/[\s\x00-\x20]/g, '');
533
- if (name.startsWith('on') ||
534
- ((name === 'href' || name === 'xlink:href' || name === 'src' || name === 'action' || name === 'formaction') &&
535
- (valueStr.startsWith('javascript:') || valueStr.startsWith('vbscript:') || valueStr.startsWith('data:text/html')))) {
536
- node.removeAttribute(attr.name);
537
- }
538
- }
539
- }
540
- // Recursively clean children (Array.from prevents issues with live collections when removing nodes)
541
- Array.from(node.children).forEach(cleanNode);
542
- };
543
- Array.from(doc.body.children).forEach(cleanNode);
544
- return doc.body.innerHTML;
545
- }
546
- catch (e) {
547
- // If parsing fails completely, fall back to aggressive regex
548
- return this.fallbackStripJavaScript(html);
549
- }
550
- }
551
- /**
552
- * Fallback regex-based sanitization when DOMParser is unavailable.
553
- * Note: This is less robust than DOM parsing and should only be a fallback.
554
- */
555
- fallbackStripJavaScript(html) {
556
- // Remove <script> tags and their content
557
- html = html.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '');
558
- // Remove on* event handlers (onclick, onload, onerror, etc.)
559
- html = html.replace(/\s+on\w+\s*=\s*["'][^"']*["']/gi, '');
560
- html = html.replace(/\s+on\w+\s*=\s*[^\s>]+/gi, '');
561
- // Remove javascript: URLs from href and src attributes
562
- html = html.replace(/\s+href\s*=\s*["']?javascript:[^"'>\s]*["']?/gi, '');
563
- html = html.replace(/\s+src\s*=\s*["']?javascript:[^"'>\s]*["']?/gi, '');
564
- // Remove data: URLs that could contain scripts (data:text/html, etc.)
565
- html = html.replace(/\s+src\s*=\s*["']?data:text\/html[^"'>\s]*["']?/gi, '');
566
- return html;
567
- }
568
505
  static { this.ɵfac = function MarkdownComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MarkdownComponent)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i1.DomSanitizer), i0.ɵɵdirectiveInject(i2.MarkdownService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); }; }
569
506
  static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MarkdownComponent, selectors: [["mj-markdown"]], inputs: { data: "data", enableHighlight: "enableHighlight", enableMermaid: "enableMermaid", enableCodeCopy: "enableCodeCopy", enableCollapsibleHeadings: "enableCollapsibleHeadings", collapsibleHeadingLevel: "collapsibleHeadingLevel", collapsibleDefaultExpanded: "collapsibleDefaultExpanded", autoExpandLevels: "autoExpandLevels", enableAlerts: "enableAlerts", enableSmartypants: "enableSmartypants", enableSvgRenderer: "enableSvgRenderer", enableHtml: "enableHtml", enableJavaScript: "enableJavaScript", enableHeadingIds: "enableHeadingIds", headingIdPrefix: "headingIdPrefix", enableLineNumbers: "enableLineNumbers", containerClass: "containerClass", mermaidTheme: "mermaidTheme", sanitize: "sanitize" }, outputs: { rendered: "rendered", headingClick: "headingClick", codeCopied: "codeCopied" }, standalone: false, features: [i0.ɵɵNgOnChangesFeature], decls: 1, vars: 3, consts: [[1, "mj-markdown-container", 3, "innerHTML"]], template: function MarkdownComponent_Template(rf, ctx) { if (rf & 1) {
570
507
  i0.ɵɵelement(0, "div", 0);
571
508
  } if (rf & 2) {
572
509
  i0.ɵɵclassMap(ctx.containerClass);
573
510
  i0.ɵɵproperty("innerHTML", ctx.renderedContent, i0.ɵɵsanitizeHtml);
574
- } }, styles: ["/**\n * MJ Markdown Component Styles\n *\n * These styles apply to rendered markdown content.\n * Using ViewEncapsulation.None so styles penetrate into dynamically generated content.\n */\n\n/* ============================================\n Container\n ============================================ */\n.mj-markdown-container {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n font-size: 15px;\n line-height: 1.6;\n color: var(--mj-text-primary);\n word-wrap: break-word;\n}\n\n/* ============================================\n Typography\n ============================================ */\n.mj-markdown-container h1,\n.mj-markdown-container h2,\n.mj-markdown-container h3,\n.mj-markdown-container h4,\n.mj-markdown-container h5,\n.mj-markdown-container h6 {\n margin-top: 1.5em;\n margin-bottom: 0.5em;\n font-weight: 600;\n line-height: 1.25;\n color: var(--mj-text-primary);\n}\n\n.mj-markdown-container h1 { font-size: 1.75em; }\n.mj-markdown-container h2 { font-size: 1.5em; }\n.mj-markdown-container h3 { font-size: 1.25em; }\n.mj-markdown-container h4 { font-size: 1.1em; }\n.mj-markdown-container h5 { font-size: 1em; }\n.mj-markdown-container h6 { font-size: 0.9em; color: var(--mj-text-secondary); }\n\n.mj-markdown-container > h1:first-child,\n.mj-markdown-container > h2:first-child,\n.mj-markdown-container > h3:first-child {\n margin-top: 0;\n}\n\n.mj-markdown-container p {\n margin: 0 0 1em 0;\n}\n\n.mj-markdown-container > p:last-child {\n margin-bottom: 0;\n}\n\n.mj-markdown-container a {\n color: var(--mj-brand-primary);\n text-decoration: none;\n}\n\n.mj-markdown-container a:hover {\n text-decoration: underline;\n}\n\n.mj-markdown-container strong {\n font-weight: 600;\n}\n\n.mj-markdown-container em {\n font-style: italic;\n}\n\n/* ============================================\n Lists\n ============================================ */\n.mj-markdown-container ul,\n.mj-markdown-container ol {\n margin: 0 0 1em 0;\n padding-left: 2em;\n}\n\n.mj-markdown-container li {\n margin-bottom: 0.25em;\n}\n\n.mj-markdown-container li > ul,\n.mj-markdown-container li > ol {\n margin-top: 0.25em;\n margin-bottom: 0;\n}\n\n/* Task lists */\n.mj-markdown-container ul.contains-task-list {\n list-style: none;\n padding-left: 0;\n}\n\n.mj-markdown-container li.task-list-item {\n display: flex;\n align-items: flex-start;\n gap: 0.5em;\n}\n\n.mj-markdown-container li.task-list-item input[type=\"checkbox\"] {\n margin-top: 0.35em;\n}\n\n/* ============================================\n Blockquotes\n ============================================ */\n.mj-markdown-container blockquote {\n margin: 1em 0;\n padding: 0.5em 1em;\n border-left: 4px solid var(--mj-border-default);\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-secondary);\n}\n\n.mj-markdown-container blockquote > p:last-child {\n margin-bottom: 0;\n}\n\n/* ============================================\n Code Blocks\n ============================================ */\n.mj-markdown-container code {\n font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Courier New', monospace;\n font-size: 0.9em;\n}\n\n/* Inline code */\n.mj-markdown-container :not(pre) > code {\n padding: 0.2em 0.4em;\n background: var(--mj-bg-surface-sunken);\n border-radius: 4px;\n color: var(--mj-status-error);\n}\n\n/* Code blocks\n * design-token-exempt fallbacks: --mj-bg-code-block / --mj-text-code resolve to\n * Monaco-style dark editor colors when an app does not override them. Code\n * blocks intentionally use a fixed dark editor aesthetic (same exemption as\n * Monaco/CodeMirror), so the hex fallbacks here are deliberate. */\n.mj-markdown-container pre {\n margin: 1em 0;\n padding: 1em;\n background: var(--mj-bg-code-block, #1e1e1e);\n border-radius: var(--mj-radius-md);\n overflow-x: auto;\n position: relative;\n}\n\n.mj-markdown-container pre code {\n background: transparent;\n padding: 0;\n color: var(--mj-text-code, #d4d4d4);\n font-size: 0.875em;\n line-height: 1.5;\n}\n\n/* ============================================\n Code Toolbar (copy button, language label)\n ============================================ */\n.mj-markdown-container .code-toolbar {\n position: absolute;\n top: 8px;\n right: 8px;\n display: flex;\n align-items: center;\n gap: 8px;\n z-index: 10;\n}\n\n.mj-markdown-container .code-language-label {\n font-size: 11px;\n font-weight: 500;\n color: var(--mj-text-disabled);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n user-select: none;\n}\n\n.mj-markdown-container .code-copy-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0;\n background: rgba(255, 255, 255, 0.1);\n border: 1px solid rgba(255, 255, 255, 0.15);\n border-radius: var(--mj-radius-md);\n color: var(--mj-text-disabled);\n cursor: pointer;\n transition: all 0.2s ease;\n opacity: 0;\n}\n\n.mj-markdown-container pre:hover .code-copy-btn {\n opacity: 1;\n}\n\n.mj-markdown-container .code-copy-btn:hover {\n background: rgba(255, 255, 255, 0.2);\n color: var(--mj-text-inverse);\n}\n\n.mj-markdown-container .code-copy-btn.copied {\n background: color-mix(in srgb, var(--mj-status-success) 20%, transparent);\n border-color: color-mix(in srgb, var(--mj-status-success) 30%, transparent);\n color: var(--mj-status-success);\n}\n\n.mj-markdown-container .code-copy-btn.error {\n background: color-mix(in srgb, var(--mj-status-error) 20%, transparent);\n border-color: color-mix(in srgb, var(--mj-status-error) 30%, transparent);\n color: var(--mj-status-error);\n}\n\n/* ============================================\n Tables\n ============================================ */\n.mj-markdown-container table {\n width: 100%;\n margin: 1em 0;\n border-collapse: collapse;\n border-spacing: 0;\n}\n\n.mj-markdown-container th,\n.mj-markdown-container td {\n padding: 0.5em 1em;\n border: 1px solid var(--mj-border-default);\n text-align: left;\n}\n\n.mj-markdown-container th {\n background: var(--mj-bg-surface-sunken);\n font-weight: 600;\n}\n\n.mj-markdown-container tr:nth-child(even) {\n background: var(--mj-bg-surface-sunken);\n}\n\n/* ============================================\n Horizontal Rule\n ============================================ */\n.mj-markdown-container hr {\n margin: 2em 0;\n border: none;\n border-top: 1px solid var(--mj-border-default);\n}\n\n/* ============================================\n Images\n ============================================ */\n.mj-markdown-container img {\n max-width: 100%;\n height: auto;\n border-radius: 4px;\n}\n\n/* ============================================\n GitHub-style Alerts (marked-alert)\n ============================================ */\n.mj-markdown-container .markdown-alert {\n margin: 1em 0;\n padding: 1em;\n border-radius: 8px;\n border-left: 4px solid;\n}\n\n.mj-markdown-container .markdown-alert-title {\n display: flex;\n align-items: center;\n gap: 8px;\n font-weight: 600;\n margin-bottom: 0.5em;\n}\n\n.mj-markdown-container .markdown-alert > p:last-child {\n margin-bottom: 0;\n}\n\n/* Note */\n.mj-markdown-container .markdown-alert-note {\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n border-color: var(--mj-brand-primary);\n}\n\n.mj-markdown-container .markdown-alert-note .markdown-alert-title {\n color: var(--mj-brand-primary);\n}\n\n/* Tip */\n.mj-markdown-container .markdown-alert-tip {\n background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n border-color: var(--mj-status-success);\n}\n\n.mj-markdown-container .markdown-alert-tip .markdown-alert-title {\n color: var(--mj-status-success);\n}\n\n/* Important */\n.mj-markdown-container .markdown-alert-important {\n background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n border-color: var(--mj-brand-primary);\n}\n\n.mj-markdown-container .markdown-alert-important .markdown-alert-title {\n color: var(--mj-brand-primary);\n}\n\n/* Warning */\n.mj-markdown-container .markdown-alert-warning {\n background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n border-color: var(--mj-status-warning);\n}\n\n.mj-markdown-container .markdown-alert-warning .markdown-alert-title {\n color: var(--mj-status-warning);\n}\n\n/* Caution */\n.mj-markdown-container .markdown-alert-caution {\n background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n border-color: var(--mj-status-error);\n}\n\n.mj-markdown-container .markdown-alert-caution .markdown-alert-title {\n color: var(--mj-status-error);\n}\n\n/* ============================================\n Collapsible Headings\n ============================================ */\n.mj-markdown-container .collapsible-section {\n margin: 0.75em 0;\n border-left: 2px solid transparent;\n transition: border-color 0.2s ease;\n}\n\n.mj-markdown-container .collapsible-section:hover {\n border-left-color: var(--mj-border-default);\n}\n\n/* Heading wrapper - contains toggle and heading */\n.mj-markdown-container .collapsible-heading-wrapper {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 4px 0;\n border-radius: 4px;\n transition: background-color 0.15s ease;\n user-select: none;\n}\n\n.mj-markdown-container .collapsible-heading-wrapper:hover {\n background-color: color-mix(in srgb, var(--mj-text-primary) 3%, transparent);\n}\n\n/* The heading itself */\n.mj-markdown-container .collapsible-heading {\n margin: 0 !important;\n flex: 1;\n}\n\n/* Toggle button/icon */\n.mj-markdown-container .collapsible-toggle {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n flex-shrink: 0;\n color: var(--mj-text-muted);\n transition: transform 0.2s ease, color 0.15s ease;\n}\n\n.mj-markdown-container .collapsible-toggle svg {\n width: 14px;\n height: 14px;\n}\n\n.mj-markdown-container .collapsible-heading-wrapper:hover .collapsible-toggle {\n color: var(--mj-text-secondary);\n}\n\n/* Expanded state - arrow points down */\n.mj-markdown-container .collapsible-section:not(.collapsed) .collapsible-toggle {\n transform: rotate(90deg);\n}\n\n/* Collapsed state - arrow points right (default SVG orientation) */\n.mj-markdown-container .collapsible-section.collapsed .collapsible-toggle {\n transform: rotate(0deg);\n}\n\n/* Content area */\n.mj-markdown-container .collapsible-content {\n padding-left: 26px;\n overflow: hidden;\n max-height: 5000px; /* Large enough for most content */\n opacity: 1;\n transition: max-height 0.3s ease-out, opacity 0.2s ease-out, padding 0.2s ease;\n}\n\n.mj-markdown-container .collapsible-section.collapsed .collapsible-content {\n max-height: 0;\n opacity: 0;\n padding-top: 0;\n padding-bottom: 0;\n visibility: hidden;\n}\n\n/* Nested sections - indent further */\n.mj-markdown-container .collapsible-section .collapsible-section {\n margin-left: 0;\n}\n\n/* Focus styles for accessibility */\n.mj-markdown-container .collapsible-heading-wrapper:focus-within {\n outline: 2px solid var(--mj-brand-primary);\n outline-offset: 2px;\n}\n\n.mj-markdown-container .collapsible-toggle:focus {\n outline: none;\n}\n\n/* Action buttons container - expand/collapse all */\n.mj-markdown-container .collapsible-actions {\n display: flex;\n align-items: center;\n gap: 2px;\n margin-left: auto;\n padding-left: 12px;\n opacity: 0;\n transition: opacity 0.15s ease;\n}\n\n.mj-markdown-container .collapsible-heading-wrapper:hover .collapsible-actions {\n opacity: 1;\n}\n\n/* Individual action buttons */\n.mj-markdown-container .collapsible-action-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 22px;\n height: 22px;\n padding: 0;\n border: none;\n border-radius: 4px;\n background: transparent;\n color: var(--mj-text-muted);\n cursor: pointer;\n transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;\n}\n\n.mj-markdown-container .collapsible-action-btn:hover {\n background-color: color-mix(in srgb, var(--mj-text-primary) 8%, transparent);\n color: var(--mj-text-primary);\n}\n\n.mj-markdown-container .collapsible-action-btn:active {\n transform: scale(0.92);\n}\n\n.mj-markdown-container .collapsible-action-btn svg {\n width: 14px;\n height: 14px;\n}\n\n/* Expand all button - double down chevron */\n.mj-markdown-container .collapsible-action-btn.expand-all:hover {\n color: var(--mj-status-success);\n background-color: color-mix(in srgb, var(--mj-status-success) 10%, transparent);\n}\n\n/* Collapse all button - double up chevron */\n.mj-markdown-container .collapsible-action-btn.collapse-all:hover {\n color: var(--mj-status-error);\n background-color: color-mix(in srgb, var(--mj-status-error) 10%, transparent);\n}\n\n/* ============================================\n Mermaid Diagrams\n ============================================ */\n.mj-markdown-container .mermaid-diagram {\n margin: 1em 0;\n padding: 1em;\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n text-align: center;\n overflow-x: auto;\n}\n\n.mj-markdown-container .mermaid-diagram svg {\n max-width: 100%;\n height: auto;\n}\n\n.mj-markdown-container .mermaid-error {\n background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n border-color: color-mix(in srgb, var(--mj-status-error) 30%, var(--mj-bg-surface));\n}\n\n.mj-markdown-container .mermaid-error::before {\n content: 'Diagram rendering failed';\n display: block;\n color: var(--mj-status-error);\n font-size: 12px;\n margin-bottom: 8px;\n}\n\n/* ============================================\n Heading Anchors\n ============================================ */\n.mj-markdown-container h1[id],\n.mj-markdown-container h2[id],\n.mj-markdown-container h3[id],\n.mj-markdown-container h4[id],\n.mj-markdown-container h5[id],\n.mj-markdown-container h6[id] {\n scroll-margin-top: 1em;\n}\n\n.mj-markdown-container h1[id]:hover,\n.mj-markdown-container h2[id]:hover,\n.mj-markdown-container h3[id]:hover,\n.mj-markdown-container h4[id]:hover,\n.mj-markdown-container h5[id]:hover,\n.mj-markdown-container h6[id]:hover {\n cursor: pointer;\n}\n\n/* Anchor link indicator on hover */\n.mj-markdown-container h1[id]::before,\n.mj-markdown-container h2[id]::before,\n.mj-markdown-container h3[id]::before,\n.mj-markdown-container h4[id]::before,\n.mj-markdown-container h5[id]::before,\n.mj-markdown-container h6[id]::before {\n content: '#';\n position: absolute;\n left: -1.5em;\n color: var(--mj-text-muted);\n opacity: 0;\n transition: opacity 0.2s ease;\n}\n\n.mj-markdown-container h1[id]:hover::before,\n.mj-markdown-container h2[id]:hover::before,\n.mj-markdown-container h3[id]:hover::before,\n.mj-markdown-container h4[id]:hover::before,\n.mj-markdown-container h5[id]:hover::before,\n.mj-markdown-container h6[id]:hover::before {\n opacity: 1;\n}\n\n/* ============================================\n Line Numbers (optional)\n ============================================ */\n.mj-markdown-container pre.line-numbers {\n padding-left: 3.5em;\n counter-reset: line;\n}\n\n.mj-markdown-container pre.line-numbers code {\n display: block;\n}\n\n.mj-markdown-container pre.line-numbers code .line::before {\n counter-increment: line;\n content: counter(line);\n display: inline-block;\n width: 2em;\n margin-left: -3em;\n margin-right: 1em;\n text-align: right;\n color: var(--mj-text-muted);\n user-select: none;\n}\n\n/* ============================================\n Error State\n ============================================ */\n.mj-markdown-container .markdown-error {\n background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n color: var(--mj-status-error);\n padding: 1em;\n border-radius: 8px;\n border: 1px solid color-mix(in srgb, var(--mj-status-error) 30%, var(--mj-bg-surface));\n white-space: pre-wrap;\n font-family: monospace;\n}\n\n/* Dark Mode Support \u2014 handled automatically by --mj-* semantic tokens */\n\n/* ============================================\n SVG Rendered Content\n ============================================ */\n.mj-markdown-container .svg-rendered {\n margin: 1em 0;\n padding: 1em;\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n text-align: center;\n overflow: auto;\n}\n\n.mj-markdown-container .svg-rendered svg {\n max-width: 100%;\n height: auto;\n}\n\n/* Dark mode for SVG rendered content \u2014 handled automatically by --mj-* semantic tokens */\n\n/* ============================================\n Print Styles\n ============================================ */\n@media print {\n .mj-markdown-container .code-toolbar {\n display: none;\n }\n\n .mj-markdown-container .collapsible-section.collapsed .collapsible-content {\n max-height: none;\n opacity: 1;\n visibility: visible;\n }\n\n /* design-token-exempt: print always uses light background + dark text for\n paper readability, regardless of the screen theme the user is rendering from */\n .mj-markdown-container pre {\n background: #f3f4f6 !important;\n color: #1f2937 !important;\n }\n\n .mj-markdown-container pre code {\n color: #1f2937 !important;\n }\n}\n"], encapsulation: 2, changeDetection: 0 }); }
511
+ } }, styles: ["/**\n * MJ Markdown Component Styles\n *\n * These styles apply to rendered markdown content.\n * Using ViewEncapsulation.None so styles penetrate into dynamically generated content.\n */\n\n/* ============================================\n Container\n ============================================ */\n.mj-markdown-container {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n font-size: 15px;\n line-height: 1.6;\n color: var(--mj-text-primary);\n word-wrap: break-word;\n}\n\n/* ============================================\n Typography\n ============================================ */\n.mj-markdown-container h1,\n.mj-markdown-container h2,\n.mj-markdown-container h3,\n.mj-markdown-container h4,\n.mj-markdown-container h5,\n.mj-markdown-container h6 {\n margin-top: 1.5em;\n margin-bottom: 0.5em;\n font-weight: 600;\n line-height: 1.25;\n color: var(--mj-text-primary);\n}\n\n.mj-markdown-container h1 { font-size: 1.75em; }\n.mj-markdown-container h2 { font-size: 1.5em; }\n.mj-markdown-container h3 { font-size: 1.25em; }\n.mj-markdown-container h4 { font-size: 1.1em; }\n.mj-markdown-container h5 { font-size: 1em; }\n.mj-markdown-container h6 { font-size: 0.9em; color: var(--mj-text-secondary); }\n\n.mj-markdown-container > h1:first-child,\n.mj-markdown-container > h2:first-child,\n.mj-markdown-container > h3:first-child {\n margin-top: 0;\n}\n\n.mj-markdown-container p {\n margin: 0 0 1em 0;\n}\n\n.mj-markdown-container > p:last-child {\n margin-bottom: 0;\n}\n\n.mj-markdown-container a {\n color: var(--mj-brand-primary);\n text-decoration: none;\n}\n\n.mj-markdown-container a:hover {\n text-decoration: underline;\n}\n\n.mj-markdown-container strong {\n font-weight: 600;\n}\n\n.mj-markdown-container em {\n font-style: italic;\n}\n\n/* ============================================\n Lists\n ============================================ */\n.mj-markdown-container ul,\n.mj-markdown-container ol {\n margin: 0 0 1em 0;\n padding-left: 2em;\n}\n\n.mj-markdown-container li {\n margin-bottom: 0.25em;\n}\n\n.mj-markdown-container li > ul,\n.mj-markdown-container li > ol {\n margin-top: 0.25em;\n margin-bottom: 0;\n}\n\n/* Task lists */\n.mj-markdown-container ul.contains-task-list {\n list-style: none;\n padding-left: 0;\n}\n\n.mj-markdown-container li.task-list-item {\n display: flex;\n align-items: flex-start;\n gap: 0.5em;\n}\n\n.mj-markdown-container li.task-list-item input[type=\"checkbox\"] {\n margin-top: 0.35em;\n}\n\n/* ============================================\n Blockquotes\n ============================================ */\n.mj-markdown-container blockquote {\n margin: 1em 0;\n padding: 0.5em 1em;\n border-left: 4px solid var(--mj-border-default);\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-secondary);\n}\n\n.mj-markdown-container blockquote > p:last-child {\n margin-bottom: 0;\n}\n\n/* ============================================\n Code Blocks\n ============================================ */\n.mj-markdown-container code {\n font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Courier New', monospace;\n font-size: 0.9em;\n}\n\n/* Inline code */\n.mj-markdown-container :not(pre) > code {\n padding: 0.2em 0.4em;\n background: var(--mj-bg-surface-sunken);\n border-radius: 4px;\n color: var(--mj-status-error);\n}\n\n/* Code blocks\n * design-token-exempt fallbacks: --mj-bg-code-block / --mj-text-code resolve to\n * Monaco-style dark editor colors when an app does not override them. Code\n * blocks intentionally use a fixed dark editor aesthetic (same exemption as\n * Monaco/CodeMirror), so the hex fallbacks here are deliberate. */\n.mj-markdown-container pre {\n margin: 1em 0;\n padding: 1em;\n background: var(--mj-bg-code-block, #1e1e1e);\n border-radius: var(--mj-radius-md);\n overflow-x: auto;\n position: relative;\n}\n\n.mj-markdown-container pre code {\n background: transparent;\n padding: 0;\n color: var(--mj-text-code, #d4d4d4);\n font-size: 0.875em;\n line-height: 1.5;\n}\n\n/* ============================================\n Code Toolbar (copy button, language label)\n ============================================ */\n.mj-markdown-container .code-toolbar {\n position: absolute;\n top: 8px;\n right: 8px;\n display: flex;\n align-items: center;\n gap: 8px;\n z-index: 10;\n}\n\n.mj-markdown-container .code-language-label {\n font-size: 11px;\n font-weight: 500;\n color: var(--mj-text-disabled);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n user-select: none;\n}\n\n.mj-markdown-container .code-copy-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0;\n background: rgba(255, 255, 255, 0.1);\n border: 1px solid rgba(255, 255, 255, 0.15);\n border-radius: var(--mj-radius-md);\n color: var(--mj-text-disabled);\n cursor: pointer;\n transition: all 0.2s ease;\n opacity: 0;\n}\n\n.mj-markdown-container pre:hover .code-copy-btn {\n opacity: 1;\n}\n\n.mj-markdown-container .code-copy-btn:hover {\n background: rgba(255, 255, 255, 0.2);\n color: var(--mj-text-inverse);\n}\n\n.mj-markdown-container .code-copy-btn.copied {\n background: color-mix(in srgb, var(--mj-status-success) 20%, transparent);\n border-color: color-mix(in srgb, var(--mj-status-success) 30%, transparent);\n color: var(--mj-status-success);\n}\n\n.mj-markdown-container .code-copy-btn.error {\n background: color-mix(in srgb, var(--mj-status-error) 20%, transparent);\n border-color: color-mix(in srgb, var(--mj-status-error) 30%, transparent);\n color: var(--mj-status-error);\n}\n\n/* ============================================\n Tables\n ============================================ */\n.mj-markdown-container table {\n width: 100%;\n margin: 1em 0;\n border-collapse: collapse;\n border-spacing: 0;\n}\n\n.mj-markdown-container th,\n.mj-markdown-container td {\n padding: 0.5em 1em;\n border: 1px solid var(--mj-border-default);\n text-align: left;\n}\n\n.mj-markdown-container th {\n background: var(--mj-bg-surface-sunken);\n font-weight: 600;\n}\n\n.mj-markdown-container tr:nth-child(even) {\n background: var(--mj-bg-surface-sunken);\n}\n\n/* ============================================\n Horizontal Rule\n ============================================ */\n.mj-markdown-container hr {\n margin: 2em 0;\n border: none;\n border-top: 1px solid var(--mj-border-default);\n}\n\n/* ============================================\n Images\n ============================================ */\n.mj-markdown-container img {\n max-width: 100%;\n height: auto;\n border-radius: 4px;\n}\n\n/* ============================================\n GitHub-style Alerts (marked-alert)\n ============================================ */\n.mj-markdown-container .markdown-alert {\n margin: 1em 0;\n padding: 1em;\n border-radius: 8px;\n border-left: 4px solid;\n}\n\n.mj-markdown-container .markdown-alert-title {\n display: flex;\n align-items: center;\n gap: 8px;\n font-weight: 600;\n margin-bottom: 0.5em;\n}\n\n.mj-markdown-container .markdown-alert > p:last-child {\n margin-bottom: 0;\n}\n\n/* Note */\n.mj-markdown-container .markdown-alert-note {\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n border-color: var(--mj-brand-primary);\n}\n\n.mj-markdown-container .markdown-alert-note .markdown-alert-title {\n color: var(--mj-brand-primary);\n}\n\n/* Tip */\n.mj-markdown-container .markdown-alert-tip {\n background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n border-color: var(--mj-status-success);\n}\n\n.mj-markdown-container .markdown-alert-tip .markdown-alert-title {\n color: var(--mj-status-success);\n}\n\n/* Important */\n.mj-markdown-container .markdown-alert-important {\n background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n border-color: var(--mj-brand-primary);\n}\n\n.mj-markdown-container .markdown-alert-important .markdown-alert-title {\n color: var(--mj-brand-primary);\n}\n\n/* Warning */\n.mj-markdown-container .markdown-alert-warning {\n background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n border-color: var(--mj-status-warning);\n}\n\n.mj-markdown-container .markdown-alert-warning .markdown-alert-title {\n color: var(--mj-status-warning);\n}\n\n/* Caution */\n.mj-markdown-container .markdown-alert-caution {\n background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n border-color: var(--mj-status-error);\n}\n\n.mj-markdown-container .markdown-alert-caution .markdown-alert-title {\n color: var(--mj-status-error);\n}\n\n/* ============================================\n Collapsible Headings\n ============================================ */\n.mj-markdown-container .collapsible-section {\n margin: 0.75em 0;\n border-left: 2px solid transparent;\n transition: border-color 0.2s ease;\n}\n\n.mj-markdown-container .collapsible-section:hover {\n border-left-color: var(--mj-border-default);\n}\n\n/* Heading wrapper - contains toggle and heading */\n.mj-markdown-container .collapsible-heading-wrapper {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 4px 0;\n border-radius: 4px;\n transition: background-color 0.15s ease;\n user-select: none;\n}\n\n.mj-markdown-container .collapsible-heading-wrapper:hover {\n background-color: color-mix(in srgb, var(--mj-text-primary) 3%, transparent);\n}\n\n/* The heading itself */\n.mj-markdown-container .collapsible-heading {\n margin: 0 !important;\n flex: 1;\n}\n\n/* Toggle button/icon */\n.mj-markdown-container .collapsible-toggle {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n flex-shrink: 0;\n color: var(--mj-text-muted);\n transition: transform 0.2s ease, color 0.15s ease;\n}\n\n.mj-markdown-container .collapsible-toggle svg {\n width: 14px;\n height: 14px;\n}\n\n.mj-markdown-container .collapsible-heading-wrapper:hover .collapsible-toggle {\n color: var(--mj-text-secondary);\n}\n\n/* Expanded state - arrow points down */\n.mj-markdown-container .collapsible-section:not(.collapsed) .collapsible-toggle {\n transform: rotate(90deg);\n}\n\n/* Collapsed state - arrow points right (default SVG orientation) */\n.mj-markdown-container .collapsible-section.collapsed .collapsible-toggle {\n transform: rotate(0deg);\n}\n\n/* Content area */\n.mj-markdown-container .collapsible-content {\n padding-left: 26px;\n overflow: hidden;\n max-height: 5000px; /* Large enough for most content */\n opacity: 1;\n transition: max-height 0.3s ease-out, opacity 0.2s ease-out, padding 0.2s ease;\n}\n\n.mj-markdown-container .collapsible-section.collapsed .collapsible-content {\n max-height: 0;\n opacity: 0;\n padding-top: 0;\n padding-bottom: 0;\n visibility: hidden;\n}\n\n/* Nested sections - indent further */\n.mj-markdown-container .collapsible-section .collapsible-section {\n margin-left: 0;\n}\n\n/* Focus styles for accessibility */\n.mj-markdown-container .collapsible-heading-wrapper:focus-within {\n outline: 2px solid var(--mj-brand-primary);\n outline-offset: 2px;\n}\n\n.mj-markdown-container .collapsible-toggle:focus {\n outline: none;\n}\n\n/* Action buttons container - expand/collapse all */\n.mj-markdown-container .collapsible-actions {\n display: flex;\n align-items: center;\n gap: 2px;\n margin-left: auto;\n padding-left: 12px;\n opacity: 0;\n transition: opacity 0.15s ease;\n}\n\n.mj-markdown-container .collapsible-heading-wrapper:hover .collapsible-actions {\n opacity: 1;\n}\n\n/* Individual action buttons */\n.mj-markdown-container .collapsible-action-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 22px;\n height: 22px;\n padding: 0;\n border: none;\n border-radius: 4px;\n background: transparent;\n color: var(--mj-text-muted);\n cursor: pointer;\n transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;\n}\n\n.mj-markdown-container .collapsible-action-btn:hover {\n background-color: color-mix(in srgb, var(--mj-text-primary) 8%, transparent);\n color: var(--mj-text-primary);\n}\n\n.mj-markdown-container .collapsible-action-btn:active {\n transform: scale(0.92);\n}\n\n.mj-markdown-container .collapsible-action-btn svg {\n width: 14px;\n height: 14px;\n}\n\n/* Expand all button - double down chevron */\n.mj-markdown-container .collapsible-action-btn.expand-all:hover {\n color: var(--mj-status-success);\n background-color: color-mix(in srgb, var(--mj-status-success) 10%, transparent);\n}\n\n/* Collapse all button - double up chevron */\n.mj-markdown-container .collapsible-action-btn.collapse-all:hover {\n color: var(--mj-status-error);\n background-color: color-mix(in srgb, var(--mj-status-error) 10%, transparent);\n}\n\n/* ============================================\n Mermaid Diagrams\n ============================================ */\n.mj-markdown-container .mermaid-diagram {\n margin: 1em 0;\n padding: 1em;\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n text-align: center;\n overflow-x: auto;\n}\n\n.mj-markdown-container .mermaid-diagram svg {\n max-width: 100%;\n height: auto;\n}\n\n.mj-markdown-container .mermaid-error {\n background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n border-color: color-mix(in srgb, var(--mj-status-error) 30%, var(--mj-bg-surface));\n}\n\n.mj-markdown-container .mermaid-error::before {\n content: 'Diagram rendering failed';\n display: block;\n color: var(--mj-status-error);\n font-size: 12px;\n margin-bottom: 8px;\n}\n\n/* A specific reason, when we have one \u2014 e.g. the lazily-fetched diagram engine\n never arrived, which is a different problem than bad diagram source. */\n.mj-markdown-container .mermaid-error[data-mermaid-error]::before {\n content: attr(data-mermaid-error);\n}\n\n/* ============================================\n Heading Anchors\n ============================================ */\n.mj-markdown-container h1[id],\n.mj-markdown-container h2[id],\n.mj-markdown-container h3[id],\n.mj-markdown-container h4[id],\n.mj-markdown-container h5[id],\n.mj-markdown-container h6[id] {\n scroll-margin-top: 1em;\n}\n\n.mj-markdown-container h1[id]:hover,\n.mj-markdown-container h2[id]:hover,\n.mj-markdown-container h3[id]:hover,\n.mj-markdown-container h4[id]:hover,\n.mj-markdown-container h5[id]:hover,\n.mj-markdown-container h6[id]:hover {\n cursor: pointer;\n}\n\n/* Anchor link indicator on hover */\n.mj-markdown-container h1[id]::before,\n.mj-markdown-container h2[id]::before,\n.mj-markdown-container h3[id]::before,\n.mj-markdown-container h4[id]::before,\n.mj-markdown-container h5[id]::before,\n.mj-markdown-container h6[id]::before {\n content: '#';\n position: absolute;\n left: -1.5em;\n color: var(--mj-text-muted);\n opacity: 0;\n transition: opacity 0.2s ease;\n}\n\n.mj-markdown-container h1[id]:hover::before,\n.mj-markdown-container h2[id]:hover::before,\n.mj-markdown-container h3[id]:hover::before,\n.mj-markdown-container h4[id]:hover::before,\n.mj-markdown-container h5[id]:hover::before,\n.mj-markdown-container h6[id]:hover::before {\n opacity: 1;\n}\n\n/* ============================================\n Line Numbers (optional)\n ============================================ */\n.mj-markdown-container pre.line-numbers {\n padding-left: 3.5em;\n counter-reset: line;\n}\n\n.mj-markdown-container pre.line-numbers code {\n display: block;\n}\n\n.mj-markdown-container pre.line-numbers code .line::before {\n counter-increment: line;\n content: counter(line);\n display: inline-block;\n width: 2em;\n margin-left: -3em;\n margin-right: 1em;\n text-align: right;\n color: var(--mj-text-muted);\n user-select: none;\n}\n\n/* ============================================\n Error State\n ============================================ */\n.mj-markdown-container .markdown-error {\n background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n color: var(--mj-status-error);\n padding: 1em;\n border-radius: 8px;\n border: 1px solid color-mix(in srgb, var(--mj-status-error) 30%, var(--mj-bg-surface));\n white-space: pre-wrap;\n font-family: monospace;\n}\n\n/* Dark Mode Support \u2014 handled automatically by --mj-* semantic tokens */\n\n/* ============================================\n SVG Rendered Content\n ============================================ */\n.mj-markdown-container .svg-rendered {\n margin: 1em 0;\n padding: 1em;\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n text-align: center;\n overflow: auto;\n}\n\n.mj-markdown-container .svg-rendered svg {\n max-width: 100%;\n height: auto;\n}\n\n/* Dark mode for SVG rendered content \u2014 handled automatically by --mj-* semantic tokens */\n\n/* ============================================\n Print Styles\n ============================================ */\n@media print {\n .mj-markdown-container .code-toolbar {\n display: none;\n }\n\n .mj-markdown-container .collapsible-section.collapsed .collapsible-content {\n max-height: none;\n opacity: 1;\n visibility: visible;\n }\n\n /* design-token-exempt: print always uses light background + dark text for\n paper readability, regardless of the screen theme the user is rendering from */\n .mj-markdown-container pre {\n background: #f3f4f6 !important;\n color: #1f2937 !important;\n }\n\n .mj-markdown-container pre code {\n color: #1f2937 !important;\n }\n}\n"], encapsulation: 2, changeDetection: 0 }); }
575
512
  }
576
513
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MarkdownComponent, [{
577
514
  type: Component,
578
- args: [{ selector: 'mj-markdown', standalone: false, template: ` <div class="mj-markdown-container" [class]="containerClass" [innerHTML]="renderedContent"></div> `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["/**\n * MJ Markdown Component Styles\n *\n * These styles apply to rendered markdown content.\n * Using ViewEncapsulation.None so styles penetrate into dynamically generated content.\n */\n\n/* ============================================\n Container\n ============================================ */\n.mj-markdown-container {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n font-size: 15px;\n line-height: 1.6;\n color: var(--mj-text-primary);\n word-wrap: break-word;\n}\n\n/* ============================================\n Typography\n ============================================ */\n.mj-markdown-container h1,\n.mj-markdown-container h2,\n.mj-markdown-container h3,\n.mj-markdown-container h4,\n.mj-markdown-container h5,\n.mj-markdown-container h6 {\n margin-top: 1.5em;\n margin-bottom: 0.5em;\n font-weight: 600;\n line-height: 1.25;\n color: var(--mj-text-primary);\n}\n\n.mj-markdown-container h1 { font-size: 1.75em; }\n.mj-markdown-container h2 { font-size: 1.5em; }\n.mj-markdown-container h3 { font-size: 1.25em; }\n.mj-markdown-container h4 { font-size: 1.1em; }\n.mj-markdown-container h5 { font-size: 1em; }\n.mj-markdown-container h6 { font-size: 0.9em; color: var(--mj-text-secondary); }\n\n.mj-markdown-container > h1:first-child,\n.mj-markdown-container > h2:first-child,\n.mj-markdown-container > h3:first-child {\n margin-top: 0;\n}\n\n.mj-markdown-container p {\n margin: 0 0 1em 0;\n}\n\n.mj-markdown-container > p:last-child {\n margin-bottom: 0;\n}\n\n.mj-markdown-container a {\n color: var(--mj-brand-primary);\n text-decoration: none;\n}\n\n.mj-markdown-container a:hover {\n text-decoration: underline;\n}\n\n.mj-markdown-container strong {\n font-weight: 600;\n}\n\n.mj-markdown-container em {\n font-style: italic;\n}\n\n/* ============================================\n Lists\n ============================================ */\n.mj-markdown-container ul,\n.mj-markdown-container ol {\n margin: 0 0 1em 0;\n padding-left: 2em;\n}\n\n.mj-markdown-container li {\n margin-bottom: 0.25em;\n}\n\n.mj-markdown-container li > ul,\n.mj-markdown-container li > ol {\n margin-top: 0.25em;\n margin-bottom: 0;\n}\n\n/* Task lists */\n.mj-markdown-container ul.contains-task-list {\n list-style: none;\n padding-left: 0;\n}\n\n.mj-markdown-container li.task-list-item {\n display: flex;\n align-items: flex-start;\n gap: 0.5em;\n}\n\n.mj-markdown-container li.task-list-item input[type=\"checkbox\"] {\n margin-top: 0.35em;\n}\n\n/* ============================================\n Blockquotes\n ============================================ */\n.mj-markdown-container blockquote {\n margin: 1em 0;\n padding: 0.5em 1em;\n border-left: 4px solid var(--mj-border-default);\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-secondary);\n}\n\n.mj-markdown-container blockquote > p:last-child {\n margin-bottom: 0;\n}\n\n/* ============================================\n Code Blocks\n ============================================ */\n.mj-markdown-container code {\n font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Courier New', monospace;\n font-size: 0.9em;\n}\n\n/* Inline code */\n.mj-markdown-container :not(pre) > code {\n padding: 0.2em 0.4em;\n background: var(--mj-bg-surface-sunken);\n border-radius: 4px;\n color: var(--mj-status-error);\n}\n\n/* Code blocks\n * design-token-exempt fallbacks: --mj-bg-code-block / --mj-text-code resolve to\n * Monaco-style dark editor colors when an app does not override them. Code\n * blocks intentionally use a fixed dark editor aesthetic (same exemption as\n * Monaco/CodeMirror), so the hex fallbacks here are deliberate. */\n.mj-markdown-container pre {\n margin: 1em 0;\n padding: 1em;\n background: var(--mj-bg-code-block, #1e1e1e);\n border-radius: var(--mj-radius-md);\n overflow-x: auto;\n position: relative;\n}\n\n.mj-markdown-container pre code {\n background: transparent;\n padding: 0;\n color: var(--mj-text-code, #d4d4d4);\n font-size: 0.875em;\n line-height: 1.5;\n}\n\n/* ============================================\n Code Toolbar (copy button, language label)\n ============================================ */\n.mj-markdown-container .code-toolbar {\n position: absolute;\n top: 8px;\n right: 8px;\n display: flex;\n align-items: center;\n gap: 8px;\n z-index: 10;\n}\n\n.mj-markdown-container .code-language-label {\n font-size: 11px;\n font-weight: 500;\n color: var(--mj-text-disabled);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n user-select: none;\n}\n\n.mj-markdown-container .code-copy-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0;\n background: rgba(255, 255, 255, 0.1);\n border: 1px solid rgba(255, 255, 255, 0.15);\n border-radius: var(--mj-radius-md);\n color: var(--mj-text-disabled);\n cursor: pointer;\n transition: all 0.2s ease;\n opacity: 0;\n}\n\n.mj-markdown-container pre:hover .code-copy-btn {\n opacity: 1;\n}\n\n.mj-markdown-container .code-copy-btn:hover {\n background: rgba(255, 255, 255, 0.2);\n color: var(--mj-text-inverse);\n}\n\n.mj-markdown-container .code-copy-btn.copied {\n background: color-mix(in srgb, var(--mj-status-success) 20%, transparent);\n border-color: color-mix(in srgb, var(--mj-status-success) 30%, transparent);\n color: var(--mj-status-success);\n}\n\n.mj-markdown-container .code-copy-btn.error {\n background: color-mix(in srgb, var(--mj-status-error) 20%, transparent);\n border-color: color-mix(in srgb, var(--mj-status-error) 30%, transparent);\n color: var(--mj-status-error);\n}\n\n/* ============================================\n Tables\n ============================================ */\n.mj-markdown-container table {\n width: 100%;\n margin: 1em 0;\n border-collapse: collapse;\n border-spacing: 0;\n}\n\n.mj-markdown-container th,\n.mj-markdown-container td {\n padding: 0.5em 1em;\n border: 1px solid var(--mj-border-default);\n text-align: left;\n}\n\n.mj-markdown-container th {\n background: var(--mj-bg-surface-sunken);\n font-weight: 600;\n}\n\n.mj-markdown-container tr:nth-child(even) {\n background: var(--mj-bg-surface-sunken);\n}\n\n/* ============================================\n Horizontal Rule\n ============================================ */\n.mj-markdown-container hr {\n margin: 2em 0;\n border: none;\n border-top: 1px solid var(--mj-border-default);\n}\n\n/* ============================================\n Images\n ============================================ */\n.mj-markdown-container img {\n max-width: 100%;\n height: auto;\n border-radius: 4px;\n}\n\n/* ============================================\n GitHub-style Alerts (marked-alert)\n ============================================ */\n.mj-markdown-container .markdown-alert {\n margin: 1em 0;\n padding: 1em;\n border-radius: 8px;\n border-left: 4px solid;\n}\n\n.mj-markdown-container .markdown-alert-title {\n display: flex;\n align-items: center;\n gap: 8px;\n font-weight: 600;\n margin-bottom: 0.5em;\n}\n\n.mj-markdown-container .markdown-alert > p:last-child {\n margin-bottom: 0;\n}\n\n/* Note */\n.mj-markdown-container .markdown-alert-note {\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n border-color: var(--mj-brand-primary);\n}\n\n.mj-markdown-container .markdown-alert-note .markdown-alert-title {\n color: var(--mj-brand-primary);\n}\n\n/* Tip */\n.mj-markdown-container .markdown-alert-tip {\n background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n border-color: var(--mj-status-success);\n}\n\n.mj-markdown-container .markdown-alert-tip .markdown-alert-title {\n color: var(--mj-status-success);\n}\n\n/* Important */\n.mj-markdown-container .markdown-alert-important {\n background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n border-color: var(--mj-brand-primary);\n}\n\n.mj-markdown-container .markdown-alert-important .markdown-alert-title {\n color: var(--mj-brand-primary);\n}\n\n/* Warning */\n.mj-markdown-container .markdown-alert-warning {\n background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n border-color: var(--mj-status-warning);\n}\n\n.mj-markdown-container .markdown-alert-warning .markdown-alert-title {\n color: var(--mj-status-warning);\n}\n\n/* Caution */\n.mj-markdown-container .markdown-alert-caution {\n background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n border-color: var(--mj-status-error);\n}\n\n.mj-markdown-container .markdown-alert-caution .markdown-alert-title {\n color: var(--mj-status-error);\n}\n\n/* ============================================\n Collapsible Headings\n ============================================ */\n.mj-markdown-container .collapsible-section {\n margin: 0.75em 0;\n border-left: 2px solid transparent;\n transition: border-color 0.2s ease;\n}\n\n.mj-markdown-container .collapsible-section:hover {\n border-left-color: var(--mj-border-default);\n}\n\n/* Heading wrapper - contains toggle and heading */\n.mj-markdown-container .collapsible-heading-wrapper {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 4px 0;\n border-radius: 4px;\n transition: background-color 0.15s ease;\n user-select: none;\n}\n\n.mj-markdown-container .collapsible-heading-wrapper:hover {\n background-color: color-mix(in srgb, var(--mj-text-primary) 3%, transparent);\n}\n\n/* The heading itself */\n.mj-markdown-container .collapsible-heading {\n margin: 0 !important;\n flex: 1;\n}\n\n/* Toggle button/icon */\n.mj-markdown-container .collapsible-toggle {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n flex-shrink: 0;\n color: var(--mj-text-muted);\n transition: transform 0.2s ease, color 0.15s ease;\n}\n\n.mj-markdown-container .collapsible-toggle svg {\n width: 14px;\n height: 14px;\n}\n\n.mj-markdown-container .collapsible-heading-wrapper:hover .collapsible-toggle {\n color: var(--mj-text-secondary);\n}\n\n/* Expanded state - arrow points down */\n.mj-markdown-container .collapsible-section:not(.collapsed) .collapsible-toggle {\n transform: rotate(90deg);\n}\n\n/* Collapsed state - arrow points right (default SVG orientation) */\n.mj-markdown-container .collapsible-section.collapsed .collapsible-toggle {\n transform: rotate(0deg);\n}\n\n/* Content area */\n.mj-markdown-container .collapsible-content {\n padding-left: 26px;\n overflow: hidden;\n max-height: 5000px; /* Large enough for most content */\n opacity: 1;\n transition: max-height 0.3s ease-out, opacity 0.2s ease-out, padding 0.2s ease;\n}\n\n.mj-markdown-container .collapsible-section.collapsed .collapsible-content {\n max-height: 0;\n opacity: 0;\n padding-top: 0;\n padding-bottom: 0;\n visibility: hidden;\n}\n\n/* Nested sections - indent further */\n.mj-markdown-container .collapsible-section .collapsible-section {\n margin-left: 0;\n}\n\n/* Focus styles for accessibility */\n.mj-markdown-container .collapsible-heading-wrapper:focus-within {\n outline: 2px solid var(--mj-brand-primary);\n outline-offset: 2px;\n}\n\n.mj-markdown-container .collapsible-toggle:focus {\n outline: none;\n}\n\n/* Action buttons container - expand/collapse all */\n.mj-markdown-container .collapsible-actions {\n display: flex;\n align-items: center;\n gap: 2px;\n margin-left: auto;\n padding-left: 12px;\n opacity: 0;\n transition: opacity 0.15s ease;\n}\n\n.mj-markdown-container .collapsible-heading-wrapper:hover .collapsible-actions {\n opacity: 1;\n}\n\n/* Individual action buttons */\n.mj-markdown-container .collapsible-action-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 22px;\n height: 22px;\n padding: 0;\n border: none;\n border-radius: 4px;\n background: transparent;\n color: var(--mj-text-muted);\n cursor: pointer;\n transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;\n}\n\n.mj-markdown-container .collapsible-action-btn:hover {\n background-color: color-mix(in srgb, var(--mj-text-primary) 8%, transparent);\n color: var(--mj-text-primary);\n}\n\n.mj-markdown-container .collapsible-action-btn:active {\n transform: scale(0.92);\n}\n\n.mj-markdown-container .collapsible-action-btn svg {\n width: 14px;\n height: 14px;\n}\n\n/* Expand all button - double down chevron */\n.mj-markdown-container .collapsible-action-btn.expand-all:hover {\n color: var(--mj-status-success);\n background-color: color-mix(in srgb, var(--mj-status-success) 10%, transparent);\n}\n\n/* Collapse all button - double up chevron */\n.mj-markdown-container .collapsible-action-btn.collapse-all:hover {\n color: var(--mj-status-error);\n background-color: color-mix(in srgb, var(--mj-status-error) 10%, transparent);\n}\n\n/* ============================================\n Mermaid Diagrams\n ============================================ */\n.mj-markdown-container .mermaid-diagram {\n margin: 1em 0;\n padding: 1em;\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n text-align: center;\n overflow-x: auto;\n}\n\n.mj-markdown-container .mermaid-diagram svg {\n max-width: 100%;\n height: auto;\n}\n\n.mj-markdown-container .mermaid-error {\n background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n border-color: color-mix(in srgb, var(--mj-status-error) 30%, var(--mj-bg-surface));\n}\n\n.mj-markdown-container .mermaid-error::before {\n content: 'Diagram rendering failed';\n display: block;\n color: var(--mj-status-error);\n font-size: 12px;\n margin-bottom: 8px;\n}\n\n/* ============================================\n Heading Anchors\n ============================================ */\n.mj-markdown-container h1[id],\n.mj-markdown-container h2[id],\n.mj-markdown-container h3[id],\n.mj-markdown-container h4[id],\n.mj-markdown-container h5[id],\n.mj-markdown-container h6[id] {\n scroll-margin-top: 1em;\n}\n\n.mj-markdown-container h1[id]:hover,\n.mj-markdown-container h2[id]:hover,\n.mj-markdown-container h3[id]:hover,\n.mj-markdown-container h4[id]:hover,\n.mj-markdown-container h5[id]:hover,\n.mj-markdown-container h6[id]:hover {\n cursor: pointer;\n}\n\n/* Anchor link indicator on hover */\n.mj-markdown-container h1[id]::before,\n.mj-markdown-container h2[id]::before,\n.mj-markdown-container h3[id]::before,\n.mj-markdown-container h4[id]::before,\n.mj-markdown-container h5[id]::before,\n.mj-markdown-container h6[id]::before {\n content: '#';\n position: absolute;\n left: -1.5em;\n color: var(--mj-text-muted);\n opacity: 0;\n transition: opacity 0.2s ease;\n}\n\n.mj-markdown-container h1[id]:hover::before,\n.mj-markdown-container h2[id]:hover::before,\n.mj-markdown-container h3[id]:hover::before,\n.mj-markdown-container h4[id]:hover::before,\n.mj-markdown-container h5[id]:hover::before,\n.mj-markdown-container h6[id]:hover::before {\n opacity: 1;\n}\n\n/* ============================================\n Line Numbers (optional)\n ============================================ */\n.mj-markdown-container pre.line-numbers {\n padding-left: 3.5em;\n counter-reset: line;\n}\n\n.mj-markdown-container pre.line-numbers code {\n display: block;\n}\n\n.mj-markdown-container pre.line-numbers code .line::before {\n counter-increment: line;\n content: counter(line);\n display: inline-block;\n width: 2em;\n margin-left: -3em;\n margin-right: 1em;\n text-align: right;\n color: var(--mj-text-muted);\n user-select: none;\n}\n\n/* ============================================\n Error State\n ============================================ */\n.mj-markdown-container .markdown-error {\n background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n color: var(--mj-status-error);\n padding: 1em;\n border-radius: 8px;\n border: 1px solid color-mix(in srgb, var(--mj-status-error) 30%, var(--mj-bg-surface));\n white-space: pre-wrap;\n font-family: monospace;\n}\n\n/* Dark Mode Support \u2014 handled automatically by --mj-* semantic tokens */\n\n/* ============================================\n SVG Rendered Content\n ============================================ */\n.mj-markdown-container .svg-rendered {\n margin: 1em 0;\n padding: 1em;\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n text-align: center;\n overflow: auto;\n}\n\n.mj-markdown-container .svg-rendered svg {\n max-width: 100%;\n height: auto;\n}\n\n/* Dark mode for SVG rendered content \u2014 handled automatically by --mj-* semantic tokens */\n\n/* ============================================\n Print Styles\n ============================================ */\n@media print {\n .mj-markdown-container .code-toolbar {\n display: none;\n }\n\n .mj-markdown-container .collapsible-section.collapsed .collapsible-content {\n max-height: none;\n opacity: 1;\n visibility: visible;\n }\n\n /* design-token-exempt: print always uses light background + dark text for\n paper readability, regardless of the screen theme the user is rendering from */\n .mj-markdown-container pre {\n background: #f3f4f6 !important;\n color: #1f2937 !important;\n }\n\n .mj-markdown-container pre code {\n color: #1f2937 !important;\n }\n}\n"] }]
515
+ args: [{ selector: 'mj-markdown', standalone: false, template: ` <div class="mj-markdown-container" [class]="containerClass" [innerHTML]="renderedContent"></div> `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["/**\n * MJ Markdown Component Styles\n *\n * These styles apply to rendered markdown content.\n * Using ViewEncapsulation.None so styles penetrate into dynamically generated content.\n */\n\n/* ============================================\n Container\n ============================================ */\n.mj-markdown-container {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n font-size: 15px;\n line-height: 1.6;\n color: var(--mj-text-primary);\n word-wrap: break-word;\n}\n\n/* ============================================\n Typography\n ============================================ */\n.mj-markdown-container h1,\n.mj-markdown-container h2,\n.mj-markdown-container h3,\n.mj-markdown-container h4,\n.mj-markdown-container h5,\n.mj-markdown-container h6 {\n margin-top: 1.5em;\n margin-bottom: 0.5em;\n font-weight: 600;\n line-height: 1.25;\n color: var(--mj-text-primary);\n}\n\n.mj-markdown-container h1 { font-size: 1.75em; }\n.mj-markdown-container h2 { font-size: 1.5em; }\n.mj-markdown-container h3 { font-size: 1.25em; }\n.mj-markdown-container h4 { font-size: 1.1em; }\n.mj-markdown-container h5 { font-size: 1em; }\n.mj-markdown-container h6 { font-size: 0.9em; color: var(--mj-text-secondary); }\n\n.mj-markdown-container > h1:first-child,\n.mj-markdown-container > h2:first-child,\n.mj-markdown-container > h3:first-child {\n margin-top: 0;\n}\n\n.mj-markdown-container p {\n margin: 0 0 1em 0;\n}\n\n.mj-markdown-container > p:last-child {\n margin-bottom: 0;\n}\n\n.mj-markdown-container a {\n color: var(--mj-brand-primary);\n text-decoration: none;\n}\n\n.mj-markdown-container a:hover {\n text-decoration: underline;\n}\n\n.mj-markdown-container strong {\n font-weight: 600;\n}\n\n.mj-markdown-container em {\n font-style: italic;\n}\n\n/* ============================================\n Lists\n ============================================ */\n.mj-markdown-container ul,\n.mj-markdown-container ol {\n margin: 0 0 1em 0;\n padding-left: 2em;\n}\n\n.mj-markdown-container li {\n margin-bottom: 0.25em;\n}\n\n.mj-markdown-container li > ul,\n.mj-markdown-container li > ol {\n margin-top: 0.25em;\n margin-bottom: 0;\n}\n\n/* Task lists */\n.mj-markdown-container ul.contains-task-list {\n list-style: none;\n padding-left: 0;\n}\n\n.mj-markdown-container li.task-list-item {\n display: flex;\n align-items: flex-start;\n gap: 0.5em;\n}\n\n.mj-markdown-container li.task-list-item input[type=\"checkbox\"] {\n margin-top: 0.35em;\n}\n\n/* ============================================\n Blockquotes\n ============================================ */\n.mj-markdown-container blockquote {\n margin: 1em 0;\n padding: 0.5em 1em;\n border-left: 4px solid var(--mj-border-default);\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-secondary);\n}\n\n.mj-markdown-container blockquote > p:last-child {\n margin-bottom: 0;\n}\n\n/* ============================================\n Code Blocks\n ============================================ */\n.mj-markdown-container code {\n font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Courier New', monospace;\n font-size: 0.9em;\n}\n\n/* Inline code */\n.mj-markdown-container :not(pre) > code {\n padding: 0.2em 0.4em;\n background: var(--mj-bg-surface-sunken);\n border-radius: 4px;\n color: var(--mj-status-error);\n}\n\n/* Code blocks\n * design-token-exempt fallbacks: --mj-bg-code-block / --mj-text-code resolve to\n * Monaco-style dark editor colors when an app does not override them. Code\n * blocks intentionally use a fixed dark editor aesthetic (same exemption as\n * Monaco/CodeMirror), so the hex fallbacks here are deliberate. */\n.mj-markdown-container pre {\n margin: 1em 0;\n padding: 1em;\n background: var(--mj-bg-code-block, #1e1e1e);\n border-radius: var(--mj-radius-md);\n overflow-x: auto;\n position: relative;\n}\n\n.mj-markdown-container pre code {\n background: transparent;\n padding: 0;\n color: var(--mj-text-code, #d4d4d4);\n font-size: 0.875em;\n line-height: 1.5;\n}\n\n/* ============================================\n Code Toolbar (copy button, language label)\n ============================================ */\n.mj-markdown-container .code-toolbar {\n position: absolute;\n top: 8px;\n right: 8px;\n display: flex;\n align-items: center;\n gap: 8px;\n z-index: 10;\n}\n\n.mj-markdown-container .code-language-label {\n font-size: 11px;\n font-weight: 500;\n color: var(--mj-text-disabled);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n user-select: none;\n}\n\n.mj-markdown-container .code-copy-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0;\n background: rgba(255, 255, 255, 0.1);\n border: 1px solid rgba(255, 255, 255, 0.15);\n border-radius: var(--mj-radius-md);\n color: var(--mj-text-disabled);\n cursor: pointer;\n transition: all 0.2s ease;\n opacity: 0;\n}\n\n.mj-markdown-container pre:hover .code-copy-btn {\n opacity: 1;\n}\n\n.mj-markdown-container .code-copy-btn:hover {\n background: rgba(255, 255, 255, 0.2);\n color: var(--mj-text-inverse);\n}\n\n.mj-markdown-container .code-copy-btn.copied {\n background: color-mix(in srgb, var(--mj-status-success) 20%, transparent);\n border-color: color-mix(in srgb, var(--mj-status-success) 30%, transparent);\n color: var(--mj-status-success);\n}\n\n.mj-markdown-container .code-copy-btn.error {\n background: color-mix(in srgb, var(--mj-status-error) 20%, transparent);\n border-color: color-mix(in srgb, var(--mj-status-error) 30%, transparent);\n color: var(--mj-status-error);\n}\n\n/* ============================================\n Tables\n ============================================ */\n.mj-markdown-container table {\n width: 100%;\n margin: 1em 0;\n border-collapse: collapse;\n border-spacing: 0;\n}\n\n.mj-markdown-container th,\n.mj-markdown-container td {\n padding: 0.5em 1em;\n border: 1px solid var(--mj-border-default);\n text-align: left;\n}\n\n.mj-markdown-container th {\n background: var(--mj-bg-surface-sunken);\n font-weight: 600;\n}\n\n.mj-markdown-container tr:nth-child(even) {\n background: var(--mj-bg-surface-sunken);\n}\n\n/* ============================================\n Horizontal Rule\n ============================================ */\n.mj-markdown-container hr {\n margin: 2em 0;\n border: none;\n border-top: 1px solid var(--mj-border-default);\n}\n\n/* ============================================\n Images\n ============================================ */\n.mj-markdown-container img {\n max-width: 100%;\n height: auto;\n border-radius: 4px;\n}\n\n/* ============================================\n GitHub-style Alerts (marked-alert)\n ============================================ */\n.mj-markdown-container .markdown-alert {\n margin: 1em 0;\n padding: 1em;\n border-radius: 8px;\n border-left: 4px solid;\n}\n\n.mj-markdown-container .markdown-alert-title {\n display: flex;\n align-items: center;\n gap: 8px;\n font-weight: 600;\n margin-bottom: 0.5em;\n}\n\n.mj-markdown-container .markdown-alert > p:last-child {\n margin-bottom: 0;\n}\n\n/* Note */\n.mj-markdown-container .markdown-alert-note {\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n border-color: var(--mj-brand-primary);\n}\n\n.mj-markdown-container .markdown-alert-note .markdown-alert-title {\n color: var(--mj-brand-primary);\n}\n\n/* Tip */\n.mj-markdown-container .markdown-alert-tip {\n background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n border-color: var(--mj-status-success);\n}\n\n.mj-markdown-container .markdown-alert-tip .markdown-alert-title {\n color: var(--mj-status-success);\n}\n\n/* Important */\n.mj-markdown-container .markdown-alert-important {\n background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n border-color: var(--mj-brand-primary);\n}\n\n.mj-markdown-container .markdown-alert-important .markdown-alert-title {\n color: var(--mj-brand-primary);\n}\n\n/* Warning */\n.mj-markdown-container .markdown-alert-warning {\n background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n border-color: var(--mj-status-warning);\n}\n\n.mj-markdown-container .markdown-alert-warning .markdown-alert-title {\n color: var(--mj-status-warning);\n}\n\n/* Caution */\n.mj-markdown-container .markdown-alert-caution {\n background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n border-color: var(--mj-status-error);\n}\n\n.mj-markdown-container .markdown-alert-caution .markdown-alert-title {\n color: var(--mj-status-error);\n}\n\n/* ============================================\n Collapsible Headings\n ============================================ */\n.mj-markdown-container .collapsible-section {\n margin: 0.75em 0;\n border-left: 2px solid transparent;\n transition: border-color 0.2s ease;\n}\n\n.mj-markdown-container .collapsible-section:hover {\n border-left-color: var(--mj-border-default);\n}\n\n/* Heading wrapper - contains toggle and heading */\n.mj-markdown-container .collapsible-heading-wrapper {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 4px 0;\n border-radius: 4px;\n transition: background-color 0.15s ease;\n user-select: none;\n}\n\n.mj-markdown-container .collapsible-heading-wrapper:hover {\n background-color: color-mix(in srgb, var(--mj-text-primary) 3%, transparent);\n}\n\n/* The heading itself */\n.mj-markdown-container .collapsible-heading {\n margin: 0 !important;\n flex: 1;\n}\n\n/* Toggle button/icon */\n.mj-markdown-container .collapsible-toggle {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n flex-shrink: 0;\n color: var(--mj-text-muted);\n transition: transform 0.2s ease, color 0.15s ease;\n}\n\n.mj-markdown-container .collapsible-toggle svg {\n width: 14px;\n height: 14px;\n}\n\n.mj-markdown-container .collapsible-heading-wrapper:hover .collapsible-toggle {\n color: var(--mj-text-secondary);\n}\n\n/* Expanded state - arrow points down */\n.mj-markdown-container .collapsible-section:not(.collapsed) .collapsible-toggle {\n transform: rotate(90deg);\n}\n\n/* Collapsed state - arrow points right (default SVG orientation) */\n.mj-markdown-container .collapsible-section.collapsed .collapsible-toggle {\n transform: rotate(0deg);\n}\n\n/* Content area */\n.mj-markdown-container .collapsible-content {\n padding-left: 26px;\n overflow: hidden;\n max-height: 5000px; /* Large enough for most content */\n opacity: 1;\n transition: max-height 0.3s ease-out, opacity 0.2s ease-out, padding 0.2s ease;\n}\n\n.mj-markdown-container .collapsible-section.collapsed .collapsible-content {\n max-height: 0;\n opacity: 0;\n padding-top: 0;\n padding-bottom: 0;\n visibility: hidden;\n}\n\n/* Nested sections - indent further */\n.mj-markdown-container .collapsible-section .collapsible-section {\n margin-left: 0;\n}\n\n/* Focus styles for accessibility */\n.mj-markdown-container .collapsible-heading-wrapper:focus-within {\n outline: 2px solid var(--mj-brand-primary);\n outline-offset: 2px;\n}\n\n.mj-markdown-container .collapsible-toggle:focus {\n outline: none;\n}\n\n/* Action buttons container - expand/collapse all */\n.mj-markdown-container .collapsible-actions {\n display: flex;\n align-items: center;\n gap: 2px;\n margin-left: auto;\n padding-left: 12px;\n opacity: 0;\n transition: opacity 0.15s ease;\n}\n\n.mj-markdown-container .collapsible-heading-wrapper:hover .collapsible-actions {\n opacity: 1;\n}\n\n/* Individual action buttons */\n.mj-markdown-container .collapsible-action-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 22px;\n height: 22px;\n padding: 0;\n border: none;\n border-radius: 4px;\n background: transparent;\n color: var(--mj-text-muted);\n cursor: pointer;\n transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;\n}\n\n.mj-markdown-container .collapsible-action-btn:hover {\n background-color: color-mix(in srgb, var(--mj-text-primary) 8%, transparent);\n color: var(--mj-text-primary);\n}\n\n.mj-markdown-container .collapsible-action-btn:active {\n transform: scale(0.92);\n}\n\n.mj-markdown-container .collapsible-action-btn svg {\n width: 14px;\n height: 14px;\n}\n\n/* Expand all button - double down chevron */\n.mj-markdown-container .collapsible-action-btn.expand-all:hover {\n color: var(--mj-status-success);\n background-color: color-mix(in srgb, var(--mj-status-success) 10%, transparent);\n}\n\n/* Collapse all button - double up chevron */\n.mj-markdown-container .collapsible-action-btn.collapse-all:hover {\n color: var(--mj-status-error);\n background-color: color-mix(in srgb, var(--mj-status-error) 10%, transparent);\n}\n\n/* ============================================\n Mermaid Diagrams\n ============================================ */\n.mj-markdown-container .mermaid-diagram {\n margin: 1em 0;\n padding: 1em;\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n text-align: center;\n overflow-x: auto;\n}\n\n.mj-markdown-container .mermaid-diagram svg {\n max-width: 100%;\n height: auto;\n}\n\n.mj-markdown-container .mermaid-error {\n background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n border-color: color-mix(in srgb, var(--mj-status-error) 30%, var(--mj-bg-surface));\n}\n\n.mj-markdown-container .mermaid-error::before {\n content: 'Diagram rendering failed';\n display: block;\n color: var(--mj-status-error);\n font-size: 12px;\n margin-bottom: 8px;\n}\n\n/* A specific reason, when we have one \u2014 e.g. the lazily-fetched diagram engine\n never arrived, which is a different problem than bad diagram source. */\n.mj-markdown-container .mermaid-error[data-mermaid-error]::before {\n content: attr(data-mermaid-error);\n}\n\n/* ============================================\n Heading Anchors\n ============================================ */\n.mj-markdown-container h1[id],\n.mj-markdown-container h2[id],\n.mj-markdown-container h3[id],\n.mj-markdown-container h4[id],\n.mj-markdown-container h5[id],\n.mj-markdown-container h6[id] {\n scroll-margin-top: 1em;\n}\n\n.mj-markdown-container h1[id]:hover,\n.mj-markdown-container h2[id]:hover,\n.mj-markdown-container h3[id]:hover,\n.mj-markdown-container h4[id]:hover,\n.mj-markdown-container h5[id]:hover,\n.mj-markdown-container h6[id]:hover {\n cursor: pointer;\n}\n\n/* Anchor link indicator on hover */\n.mj-markdown-container h1[id]::before,\n.mj-markdown-container h2[id]::before,\n.mj-markdown-container h3[id]::before,\n.mj-markdown-container h4[id]::before,\n.mj-markdown-container h5[id]::before,\n.mj-markdown-container h6[id]::before {\n content: '#';\n position: absolute;\n left: -1.5em;\n color: var(--mj-text-muted);\n opacity: 0;\n transition: opacity 0.2s ease;\n}\n\n.mj-markdown-container h1[id]:hover::before,\n.mj-markdown-container h2[id]:hover::before,\n.mj-markdown-container h3[id]:hover::before,\n.mj-markdown-container h4[id]:hover::before,\n.mj-markdown-container h5[id]:hover::before,\n.mj-markdown-container h6[id]:hover::before {\n opacity: 1;\n}\n\n/* ============================================\n Line Numbers (optional)\n ============================================ */\n.mj-markdown-container pre.line-numbers {\n padding-left: 3.5em;\n counter-reset: line;\n}\n\n.mj-markdown-container pre.line-numbers code {\n display: block;\n}\n\n.mj-markdown-container pre.line-numbers code .line::before {\n counter-increment: line;\n content: counter(line);\n display: inline-block;\n width: 2em;\n margin-left: -3em;\n margin-right: 1em;\n text-align: right;\n color: var(--mj-text-muted);\n user-select: none;\n}\n\n/* ============================================\n Error State\n ============================================ */\n.mj-markdown-container .markdown-error {\n background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n color: var(--mj-status-error);\n padding: 1em;\n border-radius: 8px;\n border: 1px solid color-mix(in srgb, var(--mj-status-error) 30%, var(--mj-bg-surface));\n white-space: pre-wrap;\n font-family: monospace;\n}\n\n/* Dark Mode Support \u2014 handled automatically by --mj-* semantic tokens */\n\n/* ============================================\n SVG Rendered Content\n ============================================ */\n.mj-markdown-container .svg-rendered {\n margin: 1em 0;\n padding: 1em;\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n text-align: center;\n overflow: auto;\n}\n\n.mj-markdown-container .svg-rendered svg {\n max-width: 100%;\n height: auto;\n}\n\n/* Dark mode for SVG rendered content \u2014 handled automatically by --mj-* semantic tokens */\n\n/* ============================================\n Print Styles\n ============================================ */\n@media print {\n .mj-markdown-container .code-toolbar {\n display: none;\n }\n\n .mj-markdown-container .collapsible-section.collapsed .collapsible-content {\n max-height: none;\n opacity: 1;\n visibility: visible;\n }\n\n /* design-token-exempt: print always uses light background + dark text for\n paper readability, regardless of the screen theme the user is rendering from */\n .mj-markdown-container pre {\n background: #f3f4f6 !important;\n color: #1f2937 !important;\n }\n\n .mj-markdown-container pre code {\n color: #1f2937 !important;\n }\n}\n"] }]
579
516
  }], () => [{ type: i0.ElementRef }, { type: i1.DomSanitizer }, { type: i2.MarkdownService }, { type: i0.ChangeDetectorRef }], { data: [{
580
517
  type: Input
581
518
  }], enableHighlight: [{
package/dist/lib/components/markdown.component.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"markdown.component.js","sourceRoot":"","sources":["../../../src/lib/components/markdown.component.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Input,\n Output,\n EventEmitter,\n ElementRef,\n OnChanges,\n OnDestroy,\n SimpleChanges,\n SecurityContext,\n ViewEncapsulation,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n AfterViewInit,\n} from '@angular/core';\nimport { DomSanitizer, SafeHtml } from '@angular/platform-browser';\nimport { MarkdownService } from '../services/markdown.service';\nimport { MarkdownConfig, DEFAULT_MARKDOWN_CONFIG, MarkdownRenderEvent, HeadingInfo } from '@memberjunction/markdown-core';\n// Collapsible section toggle is handled inline in setupCollapsibleListeners\n\n/**\n * Angular component for rendering markdown content.\n *\n * Features:\n * - Prism.js syntax highlighting for code blocks\n * - Mermaid diagram rendering\n * - Copy-to-clipboard for code blocks\n * - Collapsible heading sections\n * - GitHub-style alerts and heading IDs\n *\n * Usage:\n * ```html\n * <mj-markdown [data]=\"markdownContent\"></mj-markdown>\n *\n * <mj-markdown\n * [data]=\"content\"\n * [enableMermaid]=\"true\"\n * [enableCollapsibleHeadings]=\"true\"\n * (rendered)=\"onRendered($event)\">\n * </mj-markdown>\n * ```\n */\n@Component({\n selector: 'mj-markdown',\n standalone: false,\n template: ` <div class=\"mj-markdown-container\" [class]=\"containerClass\" [innerHTML]=\"renderedContent\"></div> `,\n styleUrls: ['./markdown.component.css'],\n encapsulation: ViewEncapsulation.None, // Allow styles to penetrate into rendered content\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class MarkdownComponent implements OnChanges, AfterViewInit, OnDestroy {\n /**\n * The markdown content to render\n */\n @Input() data: string = '';\n\n /**\n * Enable syntax highlighting\n */\n @Input() enableHighlight: boolean = DEFAULT_MARKDOWN_CONFIG.enableHighlight;\n\n /**\n * Enable Mermaid diagram rendering\n */\n @Input() enableMermaid: boolean = DEFAULT_MARKDOWN_CONFIG.enableMermaid;\n\n /**\n * Enable copy button on code blocks\n */\n @Input() enableCodeCopy: boolean = DEFAULT_MARKDOWN_CONFIG.enableCodeCopy;\n\n /**\n * Enable collapsible heading sections\n */\n @Input() enableCollapsibleHeadings: boolean = DEFAULT_MARKDOWN_CONFIG.enableCollapsibleHeadings;\n\n /**\n * Heading level at which to start collapsing\n */\n @Input() collapsibleHeadingLevel: 1 | 2 | 3 | 4 | 5 | 6 = DEFAULT_MARKDOWN_CONFIG.collapsibleHeadingLevel;\n\n /**\n * Whether collapsible sections should be expanded by default\n */\n @Input() collapsibleDefaultExpanded: boolean = DEFAULT_MARKDOWN_CONFIG.collapsibleDefaultExpanded;\n\n /**\n * Specify which heading levels should start expanded.\n * Array of heading levels (2-6) that should be expanded by default.\n * Takes precedence over collapsibleDefaultExpanded for specified levels.\n *\n * Examples:\n * - [2] = Only h2 expanded, h3-h6 collapsed\n * - [2, 3] = h2 and h3 expanded, h4-h6 collapsed\n * - [] = All collapsed\n * - undefined = Uses collapsibleDefaultExpanded for all levels\n */\n @Input() autoExpandLevels?: number[];\n\n /**\n * Enable GitHub-style alerts\n */\n @Input() enableAlerts: boolean = DEFAULT_MARKDOWN_CONFIG.enableAlerts;\n\n /**\n * Enable smartypants for typography (curly quotes, em/en dashes, ellipses)\n */\n @Input() enableSmartypants: boolean = DEFAULT_MARKDOWN_CONFIG.enableSmartypants;\n\n /**\n * Enable SVG code block rendering\n * When enabled, ```svg code blocks are rendered as actual SVG images\n */\n @Input() enableSvgRenderer: boolean = DEFAULT_MARKDOWN_CONFIG.enableSvgRenderer;\n\n /**\n * Enable raw HTML passthrough in markdown content.\n * Scripts and event handlers are still stripped unless enableJavaScript is true.\n */\n @Input() enableHtml: boolean = DEFAULT_MARKDOWN_CONFIG.enableHtml;\n\n /**\n * Enable JavaScript in HTML content (<script> tags and on* handlers).\n * WARNING: Major security risk - only enable for fully trusted content.\n */\n @Input() enableJavaScript: boolean = DEFAULT_MARKDOWN_CONFIG.enableJavaScript;\n\n /**\n * Enable heading IDs for anchor links\n */\n @Input() enableHeadingIds: boolean = DEFAULT_MARKDOWN_CONFIG.enableHeadingIds;\n\n /**\n * Prefix for heading IDs\n */\n @Input() headingIdPrefix: string = DEFAULT_MARKDOWN_CONFIG.headingIdPrefix;\n\n /**\n * Enable line numbers in code blocks\n */\n @Input() enableLineNumbers: boolean = DEFAULT_MARKDOWN_CONFIG.enableLineNumbers;\n\n /**\n * Custom CSS class for the container\n */\n @Input() containerClass: string = '';\n\n /**\n * Mermaid theme.\n * 'auto' (default) detects light/dark from the document's data-theme attribute.\n */\n @Input() mermaidTheme: 'auto' | 'default' | 'dark' | 'forest' | 'neutral' | 'base' = DEFAULT_MARKDOWN_CONFIG.mermaidTheme;\n\n /**\n * Whether to sanitize HTML output\n */\n @Input() sanitize: boolean = DEFAULT_MARKDOWN_CONFIG.sanitize;\n\n /**\n * Emitted when rendering is complete\n */\n @Output() rendered = new EventEmitter<MarkdownRenderEvent>();\n\n /**\n * Emitted when a heading anchor is clicked\n */\n @Output() headingClick = new EventEmitter<HeadingInfo>();\n\n /**\n * Emitted when code is copied to clipboard\n */\n @Output() codeCopied = new EventEmitter<string>();\n\n /**\n * The sanitized HTML content to display\n */\n public renderedContent: SafeHtml = '';\n\n /**\n * Public accessor for the component's element reference.\n * Provided for backward compatibility with ngx-markdown API.\n */\n public get element(): ElementRef<HTMLElement> {\n return this.elementRef;\n }\n\n private renderStartTime: number = 0;\n private hasMermaid: boolean = false;\n private hasCodeBlocks: boolean = false;\n private themeObserver: MutationObserver | null = null;\n\n constructor(\n private elementRef: ElementRef<HTMLElement>,\n private sanitizer: DomSanitizer,\n private markdownService: MarkdownService,\n private cdr: ChangeDetectorRef,\n ) {}\n\n ngOnChanges(changes: SimpleChanges): void {\n // Check if any relevant input changed\n const needsRerender =\n changes['data'] ||\n changes['enableHighlight'] ||\n changes['enableMermaid'] ||\n changes['enableCodeCopy'] ||\n changes['enableCollapsibleHeadings'] ||\n changes['collapsibleHeadingLevel'] ||\n changes['collapsibleDefaultExpanded'] ||\n changes['autoExpandLevels'] ||\n changes['enableAlerts'] ||\n changes['enableSmartypants'] ||\n changes['enableSvgRenderer'] ||\n changes['enableHtml'] ||\n changes['enableJavaScript'] ||\n changes['enableHeadingIds'] ||\n changes['headingIdPrefix'] ||\n changes['mermaidTheme'] ||\n changes['sanitize'];\n\n if (needsRerender) {\n this.render();\n }\n }\n\n ngAfterViewInit(): void {\n // Initial render if data was provided\n if (this.data) {\n this.postRenderProcessing();\n }\n\n this.setupThemeObserver();\n }\n\n ngOnDestroy(): void {\n this.themeObserver?.disconnect();\n this.themeObserver = null;\n this.cleanupEventListeners();\n }\n\n /**\n * Render the markdown content\n */\n private render(): void {\n if (!this.data) {\n this.renderedContent = '';\n this.cdr.markForCheck();\n return;\n }\n\n this.renderStartTime = performance.now();\n\n // Build config from inputs\n const config: MarkdownConfig = {\n enableHighlight: this.enableHighlight,\n enableMermaid: this.enableMermaid,\n enableCodeCopy: this.enableCodeCopy,\n enableCollapsibleHeadings: this.enableCollapsibleHeadings,\n collapsibleHeadingLevel: this.collapsibleHeadingLevel,\n collapsibleDefaultExpanded: this.collapsibleDefaultExpanded,\n autoExpandLevels: this.autoExpandLevels,\n enableAlerts: this.enableAlerts,\n enableSmartypants: this.enableSmartypants,\n enableSvgRenderer: this.enableSvgRenderer,\n enableHtml: this.enableHtml,\n enableJavaScript: this.enableJavaScript,\n enableHeadingIds: this.enableHeadingIds,\n headingIdPrefix: this.headingIdPrefix,\n mermaidTheme: this.mermaidTheme,\n sanitize: this.sanitize,\n };\n\n // Configure service and parse\n this.markdownService.configureMarked(config);\n let html = this.markdownService.parse(this.data);\n\n // Check for mermaid and code blocks\n this.hasMermaid = html.includes('language-mermaid') || html.includes('class=\"mermaid\"');\n this.hasCodeBlocks = html.includes('<pre>') && html.includes('<code');\n\n // Sanitize if enabled\n // Note: We bypass Angular's sanitizer when SVG renderer or HTML passthrough is enabled\n // because it strips SVG elements and most HTML layout tags.\n const bypassAngularSanitizer = this.enableSvgRenderer || this.enableHtml;\n if (this.sanitize && !bypassAngularSanitizer) {\n const sanitized = this.sanitizer.sanitize(SecurityContext.HTML, html);\n html = sanitized || '';\n }\n\n // Strip JavaScript unless explicitly enabled\n // This removes <script> tags and on* event handlers while keeping layout HTML\n if (bypassAngularSanitizer && !this.enableJavaScript) {\n html = this.stripJavaScript(html);\n }\n\n // Trust the HTML for display\n this.renderedContent = this.sanitizer.bypassSecurityTrustHtml(html);\n this.cdr.markForCheck();\n\n // Schedule post-render processing for next tick (after DOM update)\n Promise.resolve().then(() => this.postRenderProcessing());\n }\n\n /**\n * Process rendered content after DOM update\n * Handles syntax highlighting, mermaid rendering, copy buttons, etc.\n */\n private async postRenderProcessing(): Promise<void> {\n const container = this.elementRef.nativeElement.querySelector('.mj-markdown-container');\n if (!container) return;\n\n // Add copy buttons to code blocks\n if (this.enableCodeCopy && this.hasCodeBlocks) {\n this.markdownService.addCodeCopyButtons(container as HTMLElement);\n }\n\n // Initialize collapsible headings\n if (this.enableCollapsibleHeadings) {\n this.markdownService.initializeCollapsibleHeadings(container as HTMLElement);\n this.setupCollapsibleListeners(container as HTMLElement);\n }\n\n // Render mermaid diagrams (async)\n if (this.enableMermaid && this.hasMermaid) {\n await this.markdownService.renderMermaid(container as HTMLElement);\n }\n\n // Setup heading click listeners\n if (this.enableHeadingIds) {\n this.setupHeadingClickListeners(container as HTMLElement);\n }\n\n // Setup code copy listeners for custom event emission\n if (this.enableCodeCopy) {\n this.setupCodeCopyListeners(container as HTMLElement);\n }\n\n // Emit rendered event\n const renderTime = performance.now() - this.renderStartTime;\n const headingIds = this.markdownService.getHeadingList();\n\n this.rendered.emit({\n html: (container as HTMLElement).innerHTML,\n renderTime,\n hasMermaid: this.hasMermaid,\n hasCodeBlocks: this.hasCodeBlocks,\n headingIds,\n });\n }\n\n /**\n * Setup collapsible sections by adding toggle buttons and click listeners\n */\n private setupCollapsibleListeners(container: HTMLElement): void {\n const sections = container.querySelectorAll('.collapsible-section');\n\n sections.forEach((section) => {\n const wrapper = section.querySelector(':scope > .collapsible-heading-wrapper') as HTMLElement | null;\n if (!wrapper) return;\n\n // Check if toggle already exists\n if (wrapper.querySelector('.collapsible-toggle')) return;\n\n const isExpanded = !section.classList.contains('collapsed');\n const hasChildren = section.querySelector('.collapsible-section') !== null;\n\n // Create toggle button (chevron)\n const toggle = document.createElement('span');\n toggle.className = 'collapsible-toggle';\n toggle.setAttribute('role', 'button');\n toggle.setAttribute('tabindex', '0');\n toggle.setAttribute('aria-expanded', String(isExpanded));\n toggle.innerHTML = `<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"currentColor\">\n <path d=\"M6 12l4-4-4-4\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>`;\n\n // Insert toggle before heading\n wrapper.insertBefore(toggle, wrapper.firstChild);\n\n // Add action buttons container (only if has children)\n if (hasChildren) {\n const actions = this.createActionButtons(section as HTMLElement);\n wrapper.appendChild(actions);\n }\n\n // Make the whole wrapper clickable\n wrapper.style.cursor = 'pointer';\n\n // Add click listener to wrapper (but not on action buttons)\n wrapper.addEventListener('click', (e: Event) => {\n const target = e.target as HTMLElement;\n // Don't toggle if clicking on action buttons\n if (target.closest('.collapsible-actions')) return;\n\n e.preventDefault();\n e.stopPropagation();\n this.toggleSection(section as HTMLElement, toggle);\n });\n\n // Add keyboard support\n wrapper.addEventListener('keydown', (e: Event) => {\n const target = e.target as HTMLElement;\n if (target.closest('.collapsible-actions')) return;\n\n const keyEvent = e as KeyboardEvent;\n if (keyEvent.key === 'Enter' || keyEvent.key === ' ') {\n e.preventDefault();\n this.toggleSection(section as HTMLElement, toggle);\n }\n });\n });\n }\n\n /**\n * Create the expand/collapse all action buttons for sections with children\n */\n private createActionButtons(section: HTMLElement): HTMLElement {\n const container = document.createElement('span');\n container.className = 'collapsible-actions';\n\n // Expand all button\n const expandBtn = document.createElement('button');\n expandBtn.className = 'collapsible-action-btn expand-all';\n expandBtn.setAttribute('type', 'button');\n expandBtn.setAttribute('title', 'Expand all');\n expandBtn.innerHTML = `<svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M4 6l4 4 4-4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M4 10l4 4 4-4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>`;\n\n expandBtn.addEventListener('click', (e: Event) => {\n e.preventDefault();\n e.stopPropagation();\n this.expandDescendants(section);\n // Also expand the section itself if collapsed\n if (section.classList.contains('collapsed')) {\n section.classList.remove('collapsed');\n const toggle = section.querySelector(':scope > .collapsible-heading-wrapper .collapsible-toggle');\n if (toggle) toggle.setAttribute('aria-expanded', 'true');\n }\n });\n\n // Collapse all button\n const collapseBtn = document.createElement('button');\n collapseBtn.className = 'collapsible-action-btn collapse-all';\n collapseBtn.setAttribute('type', 'button');\n collapseBtn.setAttribute('title', 'Collapse all');\n collapseBtn.innerHTML = `<svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M4 10l4-4 4 4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M4 14l4-4 4 4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>`;\n\n collapseBtn.addEventListener('click', (e: Event) => {\n e.preventDefault();\n e.stopPropagation();\n this.collapseDescendants(section);\n });\n\n container.appendChild(expandBtn);\n container.appendChild(collapseBtn);\n\n return container;\n }\n\n /**\n * Toggle a collapsible section\n * @param section The section element to toggle\n * @param toggle The toggle button element\n */\n private toggleSection(section: HTMLElement, toggle: HTMLElement): void {\n const isCollapsed = section.classList.contains('collapsed');\n\n // Toggle the section\n section.classList.toggle('collapsed');\n toggle.setAttribute('aria-expanded', String(isCollapsed));\n // Children retain their state - CSS handles visibility via parent collapse\n }\n\n /**\n * Collapse all descendant sections (used by action button)\n */\n private collapseDescendants(section: HTMLElement): void {\n const descendants = section.querySelectorAll('.collapsible-section');\n descendants.forEach((desc) => {\n desc.classList.add('collapsed');\n const toggle = desc.querySelector(':scope > .collapsible-heading-wrapper .collapsible-toggle');\n if (toggle) {\n toggle.setAttribute('aria-expanded', 'false');\n }\n });\n }\n\n /**\n * Expand all descendant sections (used by action button)\n */\n private expandDescendants(section: HTMLElement): void {\n const descendants = section.querySelectorAll('.collapsible-section');\n descendants.forEach((desc) => {\n desc.classList.remove('collapsed');\n const toggle = desc.querySelector(':scope > .collapsible-heading-wrapper .collapsible-toggle');\n if (toggle) {\n toggle.setAttribute('aria-expanded', 'true');\n }\n });\n }\n\n /**\n * Setup click listeners for heading anchors\n */\n private setupHeadingClickListeners(container: HTMLElement): void {\n const headings = container.querySelectorAll('h1[id], h2[id], h3[id], h4[id], h5[id], h6[id]');\n\n headings.forEach((heading) => {\n heading.addEventListener('click', () => {\n const id = heading.getAttribute('id') || '';\n const text = heading.textContent || '';\n const level = parseInt(heading.tagName.charAt(1), 10);\n\n this.headingClick.emit({\n id,\n text,\n level,\n raw: text,\n });\n });\n });\n }\n\n /**\n * Setup listeners to emit code copy events\n */\n private setupCodeCopyListeners(container: HTMLElement): void {\n const copyButtons = container.querySelectorAll('.code-copy-btn');\n\n copyButtons.forEach((button) => {\n button.addEventListener('click', () => {\n const pre = button.closest('pre');\n const code = pre?.querySelector('code');\n if (code) {\n this.codeCopied.emit(code.textContent || '');\n }\n });\n });\n }\n\n /**\n * Watch the document's data-theme attribute for changes.\n * When the app theme switches (light ↔ dark) and mermaidTheme is 'auto',\n * re-render so mermaid diagrams pick up the new theme.\n */\n private setupThemeObserver(): void {\n if (typeof MutationObserver === 'undefined') return;\n\n this.themeObserver = new MutationObserver((mutations) => {\n for (const mutation of mutations) {\n if (mutation.type === 'attributes' && mutation.attributeName === 'data-theme') {\n this.onThemeAttributeChanged();\n break;\n }\n }\n });\n\n this.themeObserver.observe(document.documentElement, {\n attributes: true,\n attributeFilter: ['data-theme'],\n });\n }\n\n /**\n * Called when data-theme changes on the document root.\n * Triggers a full re-render when mermaid auto-theming is active.\n */\n private onThemeAttributeChanged(): void {\n if (this.mermaidTheme === 'auto' && this.enableMermaid && this.hasMermaid && this.data) {\n this.render();\n }\n }\n\n /**\n * Cleanup event listeners\n */\n private cleanupEventListeners(): void {\n const container = this.elementRef.nativeElement.querySelector('.mj-markdown-container');\n if (!container) return;\n\n // Clone and replace to remove all listeners\n const clone = container.cloneNode(true);\n container.parentNode?.replaceChild(clone, container);\n }\n\n /**\n * Force a re-render of the markdown content\n */\n public refresh(): void {\n this.render();\n }\n\n /**\n * Get the current heading list (for TOC building)\n */\n public getHeadings(): HeadingInfo[] {\n return this.markdownService.getHeadingList();\n }\n\n /**\n * Scroll to a heading by ID\n */\n public scrollToHeading(headingId: string): void {\n const container = this.elementRef.nativeElement.querySelector('.mj-markdown-container');\n if (!container) return;\n\n const heading = container.querySelector(`#${headingId}`);\n if (heading) {\n heading.scrollIntoView({ behavior: 'smooth', block: 'start' });\n }\n }\n\n /**\n * Strip JavaScript from HTML content while preserving layout HTML.\n * Removes <script> tags, on* event handlers, and javascript: URLs.\n */\n private stripJavaScript(html: string): string {\n if (typeof DOMParser === 'undefined') {\n // Fallback for environments without DOMParser\n return this.fallbackStripJavaScript(html);\n }\n\n try {\n const parser = new DOMParser();\n const doc = parser.parseFromString('<body>' + html + '</body>', 'text/html');\n\n const cleanNode = (node: Element) => {\n const tagName = node.tagName.toLowerCase();\n\n // Remove unsafe elements completely\n if (tagName === 'script' || tagName === 'iframe' || tagName === 'object' || tagName === 'embed' || tagName === 'base') {\n node.parentNode?.removeChild(node);\n return;\n }\n\n if (node.attributes) {\n const attrs = Array.from(node.attributes);\n for (const attr of attrs) {\n const name = attr.name.toLowerCase();\n // Remove whitespace and control chars from value to prevent bypasses like \"java\\nscript:\"\n // eslint-disable-next-line no-control-regex\n const valueStr = attr.value.toLowerCase().replace(/[\\s\\x00-\\x20]/g, '');\n\n if (\n name.startsWith('on') ||\n ((name === 'href' || name === 'xlink:href' || name === 'src' || name === 'action' || name === 'formaction') &&\n (valueStr.startsWith('javascript:') || valueStr.startsWith('vbscript:') || valueStr.startsWith('data:text/html')))\n ) {\n node.removeAttribute(attr.name);\n }\n }\n }\n\n // Recursively clean children (Array.from prevents issues with live collections when removing nodes)\n Array.from(node.children).forEach(cleanNode);\n };\n\n Array.from(doc.body.children).forEach(cleanNode);\n return doc.body.innerHTML;\n } catch (e) {\n // If parsing fails completely, fall back to aggressive regex\n return this.fallbackStripJavaScript(html);\n }\n }\n\n /**\n * Fallback regex-based sanitization when DOMParser is unavailable.\n * Note: This is less robust than DOM parsing and should only be a fallback.\n */\n private fallbackStripJavaScript(html: string): string {\n // Remove <script> tags and their content\n html = html.replace(/<script\\b[^<]*(?:(?!<\\/script>)<[^<]*)*<\\/script>/gi, '');\n\n // Remove on* event handlers (onclick, onload, onerror, etc.)\n html = html.replace(/\\s+on\\w+\\s*=\\s*[\"'][^\"']*[\"']/gi, '');\n html = html.replace(/\\s+on\\w+\\s*=\\s*[^\\s>]+/gi, '');\n\n // Remove javascript: URLs from href and src attributes\n html = html.replace(/\\s+href\\s*=\\s*[\"']?javascript:[^\"'>\\s]*[\"']?/gi, '');\n html = html.replace(/\\s+src\\s*=\\s*[\"']?javascript:[^\"'>\\s]*[\"']?/gi, '');\n\n // Remove data: URLs that could contain scripts (data:text/html, etc.)\n html = html.replace(/\\s+src\\s*=\\s*[\"']?data:text\\/html[^\"'>\\s]*[\"']?/gi, '');\n\n return html;\n }\n}\n"]}
1
+ {"version":3,"file":"markdown.component.js","sourceRoot":"","sources":["../../../src/lib/components/markdown.component.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Input,\n Output,\n EventEmitter,\n ElementRef,\n OnChanges,\n OnDestroy,\n SimpleChanges,\n SecurityContext,\n ViewEncapsulation,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n AfterViewInit,\n} from '@angular/core';\nimport { DomSanitizer, SafeHtml } from '@angular/platform-browser';\nimport { MarkdownService } from '../services/markdown.service';\nimport { MarkdownConfig, DEFAULT_MARKDOWN_CONFIG, MarkdownRenderEvent, HeadingInfo } from '@memberjunction/markdown-core';\n// Collapsible section toggle is handled inline in setupCollapsibleListeners\n\n/**\n * Angular component for rendering markdown content.\n *\n * Features:\n * - Prism.js syntax highlighting for code blocks\n * - Mermaid diagram rendering\n * - Copy-to-clipboard for code blocks\n * - Collapsible heading sections\n * - GitHub-style alerts and heading IDs\n *\n * Usage:\n * ```html\n * <mj-markdown [data]=\"markdownContent\"></mj-markdown>\n *\n * <mj-markdown\n * [data]=\"content\"\n * [enableMermaid]=\"true\"\n * [enableCollapsibleHeadings]=\"true\"\n * (rendered)=\"onRendered($event)\">\n * </mj-markdown>\n * ```\n */\n@Component({\n selector: 'mj-markdown',\n standalone: false,\n template: ` <div class=\"mj-markdown-container\" [class]=\"containerClass\" [innerHTML]=\"renderedContent\"></div> `,\n styleUrls: ['./markdown.component.css'],\n encapsulation: ViewEncapsulation.None, // Allow styles to penetrate into rendered content\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class MarkdownComponent implements OnChanges, AfterViewInit, OnDestroy {\n /**\n * The markdown content to render\n */\n @Input() data: string = '';\n\n /**\n * Enable syntax highlighting\n */\n @Input() enableHighlight: boolean = DEFAULT_MARKDOWN_CONFIG.enableHighlight;\n\n /**\n * Enable Mermaid diagram rendering\n */\n @Input() enableMermaid: boolean = DEFAULT_MARKDOWN_CONFIG.enableMermaid;\n\n /**\n * Enable copy button on code blocks\n */\n @Input() enableCodeCopy: boolean = DEFAULT_MARKDOWN_CONFIG.enableCodeCopy;\n\n /**\n * Enable collapsible heading sections\n */\n @Input() enableCollapsibleHeadings: boolean = DEFAULT_MARKDOWN_CONFIG.enableCollapsibleHeadings;\n\n /**\n * Heading level at which to start collapsing\n */\n @Input() collapsibleHeadingLevel: 1 | 2 | 3 | 4 | 5 | 6 = DEFAULT_MARKDOWN_CONFIG.collapsibleHeadingLevel;\n\n /**\n * Whether collapsible sections should be expanded by default\n */\n @Input() collapsibleDefaultExpanded: boolean = DEFAULT_MARKDOWN_CONFIG.collapsibleDefaultExpanded;\n\n /**\n * Specify which heading levels should start expanded.\n * Array of heading levels (2-6) that should be expanded by default.\n * Takes precedence over collapsibleDefaultExpanded for specified levels.\n *\n * Examples:\n * - [2] = Only h2 expanded, h3-h6 collapsed\n * - [2, 3] = h2 and h3 expanded, h4-h6 collapsed\n * - [] = All collapsed\n * - undefined = Uses collapsibleDefaultExpanded for all levels\n */\n @Input() autoExpandLevels?: number[];\n\n /**\n * Enable GitHub-style alerts\n */\n @Input() enableAlerts: boolean = DEFAULT_MARKDOWN_CONFIG.enableAlerts;\n\n /**\n * Enable smartypants for typography (curly quotes, em/en dashes, ellipses)\n */\n @Input() enableSmartypants: boolean = DEFAULT_MARKDOWN_CONFIG.enableSmartypants;\n\n /**\n * Enable SVG code block rendering\n * When enabled, ```svg code blocks are rendered as actual SVG images\n */\n @Input() enableSvgRenderer: boolean = DEFAULT_MARKDOWN_CONFIG.enableSvgRenderer;\n\n /**\n * Enable raw HTML passthrough in markdown content.\n * Scripts and event handlers are still stripped unless enableJavaScript is true.\n */\n @Input() enableHtml: boolean = DEFAULT_MARKDOWN_CONFIG.enableHtml;\n\n /**\n * Enable JavaScript in HTML content (<script> tags and on* handlers).\n * WARNING: Major security risk - only enable for fully trusted content.\n */\n @Input() enableJavaScript: boolean = DEFAULT_MARKDOWN_CONFIG.enableJavaScript;\n\n /**\n * Enable heading IDs for anchor links\n */\n @Input() enableHeadingIds: boolean = DEFAULT_MARKDOWN_CONFIG.enableHeadingIds;\n\n /**\n * Prefix for heading IDs\n */\n @Input() headingIdPrefix: string = DEFAULT_MARKDOWN_CONFIG.headingIdPrefix;\n\n /**\n * Enable line numbers in code blocks\n */\n @Input() enableLineNumbers: boolean = DEFAULT_MARKDOWN_CONFIG.enableLineNumbers;\n\n /**\n * Custom CSS class for the container\n */\n @Input() containerClass: string = '';\n\n /**\n * Mermaid theme.\n * 'auto' (default) detects light/dark from the document's data-theme attribute.\n */\n @Input() mermaidTheme: 'auto' | 'default' | 'dark' | 'forest' | 'neutral' | 'base' = DEFAULT_MARKDOWN_CONFIG.mermaidTheme;\n\n /**\n * Whether to sanitize HTML output\n */\n @Input() sanitize: boolean = DEFAULT_MARKDOWN_CONFIG.sanitize;\n\n /**\n * Emitted when rendering is complete\n */\n @Output() rendered = new EventEmitter<MarkdownRenderEvent>();\n\n /**\n * Emitted when a heading anchor is clicked\n */\n @Output() headingClick = new EventEmitter<HeadingInfo>();\n\n /**\n * Emitted when code is copied to clipboard\n */\n @Output() codeCopied = new EventEmitter<string>();\n\n /**\n * The sanitized HTML content to display\n */\n public renderedContent: SafeHtml = '';\n\n /**\n * Public accessor for the component's element reference.\n * Provided for backward compatibility with ngx-markdown API.\n */\n public get element(): ElementRef<HTMLElement> {\n return this.elementRef;\n }\n\n private renderStartTime: number = 0;\n private hasMermaid: boolean = false;\n private hasCodeBlocks: boolean = false;\n private themeObserver: MutationObserver | null = null;\n\n constructor(\n private elementRef: ElementRef<HTMLElement>,\n private sanitizer: DomSanitizer,\n private markdownService: MarkdownService,\n private cdr: ChangeDetectorRef,\n ) {}\n\n ngOnChanges(changes: SimpleChanges): void {\n // Check if any relevant input changed\n const needsRerender =\n changes['data'] ||\n changes['enableHighlight'] ||\n changes['enableMermaid'] ||\n changes['enableCodeCopy'] ||\n changes['enableCollapsibleHeadings'] ||\n changes['collapsibleHeadingLevel'] ||\n changes['collapsibleDefaultExpanded'] ||\n changes['autoExpandLevels'] ||\n changes['enableAlerts'] ||\n changes['enableSmartypants'] ||\n changes['enableSvgRenderer'] ||\n changes['enableHtml'] ||\n changes['enableJavaScript'] ||\n changes['enableHeadingIds'] ||\n changes['headingIdPrefix'] ||\n changes['mermaidTheme'] ||\n changes['sanitize'];\n\n if (needsRerender) {\n this.render();\n }\n }\n\n ngAfterViewInit(): void {\n // Initial render if data was provided\n if (this.data) {\n this.postRenderProcessing();\n }\n\n this.setupThemeObserver();\n }\n\n ngOnDestroy(): void {\n this.themeObserver?.disconnect();\n this.themeObserver = null;\n this.cleanupEventListeners();\n }\n\n /**\n * Render the markdown content\n */\n private render(): void {\n if (!this.data) {\n this.renderedContent = '';\n this.cdr.markForCheck();\n return;\n }\n\n this.renderStartTime = performance.now();\n\n // Build config from inputs\n const config: MarkdownConfig = {\n enableHighlight: this.enableHighlight,\n enableMermaid: this.enableMermaid,\n enableCodeCopy: this.enableCodeCopy,\n enableCollapsibleHeadings: this.enableCollapsibleHeadings,\n collapsibleHeadingLevel: this.collapsibleHeadingLevel,\n collapsibleDefaultExpanded: this.collapsibleDefaultExpanded,\n autoExpandLevels: this.autoExpandLevels,\n enableAlerts: this.enableAlerts,\n enableSmartypants: this.enableSmartypants,\n enableSvgRenderer: this.enableSvgRenderer,\n enableHtml: this.enableHtml,\n enableJavaScript: this.enableJavaScript,\n enableHeadingIds: this.enableHeadingIds,\n headingIdPrefix: this.headingIdPrefix,\n mermaidTheme: this.mermaidTheme,\n sanitize: this.sanitize,\n };\n\n // Configure service and parse\n this.markdownService.configureMarked(config);\n let html = this.markdownService.parse(this.data);\n\n // Check for mermaid and code blocks\n this.hasMermaid = html.includes('language-mermaid') || html.includes('class=\"mermaid\"');\n this.hasCodeBlocks = html.includes('<pre>') && html.includes('<code');\n\n // Sanitize if enabled\n // Note: We bypass Angular's sanitizer when SVG renderer or HTML passthrough is enabled\n // because it strips SVG elements and most HTML layout tags.\n const bypassAngularSanitizer = this.enableSvgRenderer || this.enableHtml;\n if (this.sanitize && !bypassAngularSanitizer) {\n const sanitized = this.sanitizer.sanitize(SecurityContext.HTML, html);\n html = sanitized || '';\n }\n\n // When Angular's sanitizer is bypassed, the HTML has already been sanitized by\n // MarkdownService.parse() (DOMPurify, HTML + SVG profiles) unless enableJavaScript\n // opted out. Nothing further to do here.\n\n // Trust the HTML for display\n this.renderedContent = this.sanitizer.bypassSecurityTrustHtml(html);\n this.cdr.markForCheck();\n\n // Schedule post-render processing for next tick (after DOM update)\n Promise.resolve().then(() => this.postRenderProcessing());\n }\n\n /**\n * Process rendered content after DOM update\n * Handles syntax highlighting, mermaid rendering, copy buttons, etc.\n */\n private async postRenderProcessing(): Promise<void> {\n const container = this.elementRef.nativeElement.querySelector('.mj-markdown-container');\n if (!container) return;\n\n // Add copy buttons to code blocks\n if (this.enableCodeCopy && this.hasCodeBlocks) {\n this.markdownService.addCodeCopyButtons(container as HTMLElement);\n }\n\n // Initialize collapsible headings\n if (this.enableCollapsibleHeadings) {\n this.markdownService.initializeCollapsibleHeadings(container as HTMLElement);\n this.setupCollapsibleListeners(container as HTMLElement);\n }\n\n // Render mermaid diagrams (async)\n if (this.enableMermaid && this.hasMermaid) {\n await this.markdownService.renderMermaid(container as HTMLElement);\n }\n\n // Setup heading click listeners\n if (this.enableHeadingIds) {\n this.setupHeadingClickListeners(container as HTMLElement);\n }\n\n // Setup code copy listeners for custom event emission\n if (this.enableCodeCopy) {\n this.setupCodeCopyListeners(container as HTMLElement);\n }\n\n // Emit rendered event\n const renderTime = performance.now() - this.renderStartTime;\n const headingIds = this.markdownService.getHeadingList();\n\n this.rendered.emit({\n html: (container as HTMLElement).innerHTML,\n renderTime,\n hasMermaid: this.hasMermaid,\n hasCodeBlocks: this.hasCodeBlocks,\n headingIds,\n });\n }\n\n /**\n * Setup collapsible sections by adding toggle buttons and click listeners\n */\n private setupCollapsibleListeners(container: HTMLElement): void {\n const sections = container.querySelectorAll('.collapsible-section');\n\n sections.forEach((section) => {\n const wrapper = section.querySelector(':scope > .collapsible-heading-wrapper') as HTMLElement | null;\n if (!wrapper) return;\n\n // Check if toggle already exists\n if (wrapper.querySelector('.collapsible-toggle')) return;\n\n const isExpanded = !section.classList.contains('collapsed');\n const hasChildren = section.querySelector('.collapsible-section') !== null;\n\n // Create toggle button (chevron)\n const toggle = document.createElement('span');\n toggle.className = 'collapsible-toggle';\n toggle.setAttribute('role', 'button');\n toggle.setAttribute('tabindex', '0');\n toggle.setAttribute('aria-expanded', String(isExpanded));\n toggle.innerHTML = `<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"currentColor\">\n <path d=\"M6 12l4-4-4-4\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>`;\n\n // Insert toggle before heading\n wrapper.insertBefore(toggle, wrapper.firstChild);\n\n // Add action buttons container (only if has children)\n if (hasChildren) {\n const actions = this.createActionButtons(section as HTMLElement);\n wrapper.appendChild(actions);\n }\n\n // Make the whole wrapper clickable\n wrapper.style.cursor = 'pointer';\n\n // Add click listener to wrapper (but not on action buttons)\n wrapper.addEventListener('click', (e: Event) => {\n const target = e.target as HTMLElement;\n // Don't toggle if clicking on action buttons\n if (target.closest('.collapsible-actions')) return;\n\n e.preventDefault();\n e.stopPropagation();\n this.toggleSection(section as HTMLElement, toggle);\n });\n\n // Add keyboard support\n wrapper.addEventListener('keydown', (e: Event) => {\n const target = e.target as HTMLElement;\n if (target.closest('.collapsible-actions')) return;\n\n const keyEvent = e as KeyboardEvent;\n if (keyEvent.key === 'Enter' || keyEvent.key === ' ') {\n e.preventDefault();\n this.toggleSection(section as HTMLElement, toggle);\n }\n });\n });\n }\n\n /**\n * Create the expand/collapse all action buttons for sections with children\n */\n private createActionButtons(section: HTMLElement): HTMLElement {\n const container = document.createElement('span');\n container.className = 'collapsible-actions';\n\n // Expand all button\n const expandBtn = document.createElement('button');\n expandBtn.className = 'collapsible-action-btn expand-all';\n expandBtn.setAttribute('type', 'button');\n expandBtn.setAttribute('title', 'Expand all');\n expandBtn.innerHTML = `<svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M4 6l4 4 4-4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M4 10l4 4 4-4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>`;\n\n expandBtn.addEventListener('click', (e: Event) => {\n e.preventDefault();\n e.stopPropagation();\n this.expandDescendants(section);\n // Also expand the section itself if collapsed\n if (section.classList.contains('collapsed')) {\n section.classList.remove('collapsed');\n const toggle = section.querySelector(':scope > .collapsible-heading-wrapper .collapsible-toggle');\n if (toggle) toggle.setAttribute('aria-expanded', 'true');\n }\n });\n\n // Collapse all button\n const collapseBtn = document.createElement('button');\n collapseBtn.className = 'collapsible-action-btn collapse-all';\n collapseBtn.setAttribute('type', 'button');\n collapseBtn.setAttribute('title', 'Collapse all');\n collapseBtn.innerHTML = `<svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path d=\"M4 10l4-4 4 4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M4 14l4-4 4 4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>`;\n\n collapseBtn.addEventListener('click', (e: Event) => {\n e.preventDefault();\n e.stopPropagation();\n this.collapseDescendants(section);\n });\n\n container.appendChild(expandBtn);\n container.appendChild(collapseBtn);\n\n return container;\n }\n\n /**\n * Toggle a collapsible section\n * @param section The section element to toggle\n * @param toggle The toggle button element\n */\n private toggleSection(section: HTMLElement, toggle: HTMLElement): void {\n const isCollapsed = section.classList.contains('collapsed');\n\n // Toggle the section\n section.classList.toggle('collapsed');\n toggle.setAttribute('aria-expanded', String(isCollapsed));\n // Children retain their state - CSS handles visibility via parent collapse\n }\n\n /**\n * Collapse all descendant sections (used by action button)\n */\n private collapseDescendants(section: HTMLElement): void {\n const descendants = section.querySelectorAll('.collapsible-section');\n descendants.forEach((desc) => {\n desc.classList.add('collapsed');\n const toggle = desc.querySelector(':scope > .collapsible-heading-wrapper .collapsible-toggle');\n if (toggle) {\n toggle.setAttribute('aria-expanded', 'false');\n }\n });\n }\n\n /**\n * Expand all descendant sections (used by action button)\n */\n private expandDescendants(section: HTMLElement): void {\n const descendants = section.querySelectorAll('.collapsible-section');\n descendants.forEach((desc) => {\n desc.classList.remove('collapsed');\n const toggle = desc.querySelector(':scope > .collapsible-heading-wrapper .collapsible-toggle');\n if (toggle) {\n toggle.setAttribute('aria-expanded', 'true');\n }\n });\n }\n\n /**\n * Setup click listeners for heading anchors\n */\n private setupHeadingClickListeners(container: HTMLElement): void {\n const headings = container.querySelectorAll('h1[id], h2[id], h3[id], h4[id], h5[id], h6[id]');\n\n headings.forEach((heading) => {\n heading.addEventListener('click', () => {\n const id = heading.getAttribute('id') || '';\n const text = heading.textContent || '';\n const level = parseInt(heading.tagName.charAt(1), 10);\n\n this.headingClick.emit({\n id,\n text,\n level,\n raw: text,\n });\n });\n });\n }\n\n /**\n * Setup listeners to emit code copy events\n */\n private setupCodeCopyListeners(container: HTMLElement): void {\n const copyButtons = container.querySelectorAll('.code-copy-btn');\n\n copyButtons.forEach((button) => {\n button.addEventListener('click', () => {\n const pre = button.closest('pre');\n const code = pre?.querySelector('code');\n if (code) {\n this.codeCopied.emit(code.textContent || '');\n }\n });\n });\n }\n\n /**\n * Watch the document's data-theme attribute for changes.\n * When the app theme switches (light ↔ dark) and mermaidTheme is 'auto',\n * re-render so mermaid diagrams pick up the new theme.\n */\n private setupThemeObserver(): void {\n if (typeof MutationObserver === 'undefined') return;\n\n this.themeObserver = new MutationObserver((mutations) => {\n for (const mutation of mutations) {\n if (mutation.type === 'attributes' && mutation.attributeName === 'data-theme') {\n this.onThemeAttributeChanged();\n break;\n }\n }\n });\n\n this.themeObserver.observe(document.documentElement, {\n attributes: true,\n attributeFilter: ['data-theme'],\n });\n }\n\n /**\n * Called when data-theme changes on the document root.\n * Triggers a full re-render when mermaid auto-theming is active.\n */\n private onThemeAttributeChanged(): void {\n if (this.mermaidTheme === 'auto' && this.enableMermaid && this.hasMermaid && this.data) {\n this.render();\n }\n }\n\n /**\n * Cleanup event listeners\n */\n private cleanupEventListeners(): void {\n const container = this.elementRef.nativeElement.querySelector('.mj-markdown-container');\n if (!container) return;\n\n // Clone and replace to remove all listeners\n const clone = container.cloneNode(true);\n container.parentNode?.replaceChild(clone, container);\n }\n\n /**\n * Force a re-render of the markdown content\n */\n public refresh(): void {\n this.render();\n }\n\n /**\n * Get the current heading list (for TOC building)\n */\n public getHeadings(): HeadingInfo[] {\n return this.markdownService.getHeadingList();\n }\n\n /**\n * Scroll to a heading by ID\n */\n public scrollToHeading(headingId: string): void {\n const container = this.elementRef.nativeElement.querySelector('.mj-markdown-container');\n if (!container) return;\n\n const heading = container.querySelector(`#${headingId}`);\n if (heading) {\n heading.scrollIntoView({ behavior: 'smooth', block: 'start' });\n }\n }\n}\n"]}
package/dist/lib/extensions/svg-renderer.extension.d.ts CHANGED
@@ -7,9 +7,14 @@
7
7
  * after the SVG has been inserted into the page.
8
8
  */
9
9
  /**
10
- * Helper function to sanitize SVG content by removing potentially dangerous elements.
10
+ * Sanitize rendered SVG in place by removing the vectors that can run script.
11
11
  * Call this on the container element after rendering if you need additional security.
12
12
  *
13
+ * Removes `<script>` and `<foreignObject>` elements, every `on*` event-handler
14
+ * attribute (not a fixed list: any attribute whose name starts with `on`),
15
+ * `javascript:` / `vbscript:` / `data:` URLs on link and resource attributes, and
16
+ * `<use>` elements that reference an external document.
17
+ *
13
18
  * @param container The DOM element containing rendered SVG
14
19
  */
15
20
  export declare function sanitizeSvgContent(container: HTMLElement): void;
package/dist/lib/extensions/svg-renderer.extension.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"svg-renderer.extension.d.ts","sourceRoot":"","sources":["../../../src/lib/extensions/svg-renderer.extension.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAC,SAAS,EAAE,WAAW,GAAG,IAAI,CAgD/D"}
1
+ {"version":3,"file":"svg-renderer.extension.d.ts","sourceRoot":"","sources":["../../../src/lib/extensions/svg-renderer.extension.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AA8BH;;;;;;;;;;GAUG;AACH,wBAAgB,kBAAkB,CAAC,SAAS,EAAE,WAAW,GAAG,IAAI,CA2B/D"}
package/dist/lib/extensions/svg-renderer.extension.js CHANGED
@@ -6,52 +6,63 @@
6
6
  * the browser-only sanitization helper, which operates on a live DOM subtree
7
7
  * after the SVG has been inserted into the page.
8
8
  */
9
+ /** URL schemes that can execute script or smuggle markup when used as a link or resource target. */
10
+ const SCRIPT_URL_SCHEME = /^(javascript|vbscript|data):/;
11
+ /** Attributes whose value is a URL the browser will navigate to or load. */
12
+ const URL_ATTRIBUTES = new Set(['href', 'xlink:href', 'src', 'action', 'formaction']);
9
13
  /**
10
- * Helper function to sanitize SVG content by removing potentially dangerous elements.
14
+ * True when an attribute value is a script-capable URL. Whitespace and control
15
+ * characters are removed before the scheme check because browsers ignore them
16
+ * (a tab inside `javascript:` still navigates), and the comparison is case-insensitive.
17
+ *
18
+ * `data:image/...` (other than SVG, which can carry script) is allowed on `<image>`
19
+ * so embedded raster images inside an SVG keep working.
20
+ */
21
+ function isScriptUrl(element, attributeName, value) {
22
+ // eslint-disable-next-line no-control-regex
23
+ const normalized = value.replace(/[\u0000-\u0020\u007f]/g, '').toLowerCase();
24
+ if (!SCRIPT_URL_SCHEME.test(normalized)) {
25
+ return false;
26
+ }
27
+ const isImageData = element.tagName.toLowerCase() === 'image' &&
28
+ (attributeName === 'href' || attributeName === 'xlink:href') &&
29
+ normalized.startsWith('data:image/') &&
30
+ !normalized.startsWith('data:image/svg');
31
+ return !isImageData;
32
+ }
33
+ /**
34
+ * Sanitize rendered SVG in place by removing the vectors that can run script.
11
35
  * Call this on the container element after rendering if you need additional security.
12
36
  *
37
+ * Removes `<script>` and `<foreignObject>` elements, every `on*` event-handler
38
+ * attribute (not a fixed list: any attribute whose name starts with `on`),
39
+ * `javascript:` / `vbscript:` / `data:` URLs on link and resource attributes, and
40
+ * `<use>` elements that reference an external document.
41
+ *
13
42
  * @param container The DOM element containing rendered SVG
14
43
  */
15
44
  export function sanitizeSvgContent(container) {
16
- // Remove script elements
17
- const scripts = container.querySelectorAll('script');
18
- scripts.forEach(script => script.remove());
19
- // Remove event handlers from all elements
20
- const allElements = container.querySelectorAll('*');
21
- allElements.forEach(el => {
22
- // Remove common event handler attributes
23
- const dangerousAttrs = [
24
- 'onload', 'onerror', 'onclick', 'onmouseover', 'onmouseout',
25
- 'onfocus', 'onblur', 'onchange', 'onsubmit', 'onreset',
26
- 'onkeydown', 'onkeyup', 'onkeypress'
27
- ];
28
- dangerousAttrs.forEach(attr => {
29
- if (el.hasAttribute(attr)) {
30
- el.removeAttribute(attr);
31
- }
32
- });
33
- // Remove javascript: URLs from href/xlink:href
34
- if (el.hasAttribute('href')) {
35
- const href = el.getAttribute('href') || '';
36
- if (href.toLowerCase().startsWith('javascript:')) {
37
- el.removeAttribute('href');
45
+ container.querySelectorAll('script').forEach((script) => script.remove());
46
+ container.querySelectorAll('foreignObject').forEach((fo) => fo.remove());
47
+ container.querySelectorAll('*').forEach((el) => {
48
+ for (const attr of Array.from(el.attributes)) {
49
+ const name = attr.name.toLowerCase();
50
+ if (name.startsWith('on')) {
51
+ el.removeAttribute(attr.name);
52
+ continue;
38
53
  }
39
- }
40
- if (el.hasAttribute('xlink:href')) {
41
- const href = el.getAttribute('xlink:href') || '';
42
- if (href.toLowerCase().startsWith('javascript:')) {
43
- el.removeAttribute('xlink:href');
54
+ if (URL_ATTRIBUTES.has(name) && isScriptUrl(el, name, attr.value)) {
55
+ el.removeAttribute(attr.name);
44
56
  }
45
57
  }
46
58
  });
47
- // Remove foreignObject elements (can contain HTML/scripts)
48
- const foreignObjects = container.querySelectorAll('foreignObject');
49
- foreignObjects.forEach(fo => fo.remove());
50
- // Remove use elements pointing to external resources
51
- const useElements = container.querySelectorAll('use');
52
- useElements.forEach(use => {
53
- const href = use.getAttribute('href') || use.getAttribute('xlink:href') || '';
54
- if (href.startsWith('http://') || href.startsWith('https://') || href.startsWith('//')) {
59
+ container.querySelectorAll('use').forEach((use) => {
60
+ // Same-document references only; anything that is not a fragment can load an external
61
+ // document. Normalised the same way isScriptUrl normalises, so obfuscation does not help.
62
+ const href = (use.getAttribute('href') || use.getAttribute('xlink:href') || '')
63
+ // eslint-disable-next-line no-control-regex
64
+ .replace(/[\u0000-\u0020\u007f]/g, '');
65
+ if (href !== '' && !href.startsWith('#')) {
55
66
  use.remove();
56
67
  }
57
68
  });