igniteui-webcomponents 6.4.0 → 6.5.0

package/extras/chat-markdown-renderer.d.ts

@@ -1,6 +1,8 @@
+import { Marked } from 'marked';
 import type { IgcChatMessage } from '../components/chat/types.js';
 /**
- * Options to configure the MarkdownMessageRenderer.
+ * Configuration options for setting up the markdown parser and highlighter.
+ * This provides more granular control over the markdown processing pipeline.
  */
 export interface MarkdownRendererOptions {
     /**
@@ -9,18 +11,84 @@ export interface MarkdownRendererOptions {
     noHighlighter?: boolean;
     /**
      * List of programming languages to support in syntax highlighting.
+     * @default ['javascript', 'typescript', 'html', 'css']
      */
     languages?: string[];
     /**
-     * The theme used by the syntax highlighter (e.g., 'github-light').
+     * The theme(s) used by the syntax highlighter.
+     * Can be a single theme name or separate themes for light and dark modes.
+     * @default { light: 'github-light', dark: 'github-dark' }
      */
-    theme?: {
+    theme?: string | {
         light?: string;
         dark?: string;
     };
     /**
-     * A custom HTML sanitization function. Defaults to DOMPurify.sanitize.
+     * A custom HTML sanitization function.
+     * @default DOMPurify.sanitize
      */
     sanitizer?: (html: string) => string;
+    /**
+     * Custom color replacements for syntax highlighting.
+     * Maps hex colors to CSS variable names.
+     */
+    colorReplacements?: Record<string, string>;
 }
+/**
+ * Represents a markdown renderer instance that can process markdown text.
+ */
+export interface MarkdownRenderer {
+    /**
+     * Parses markdown text and returns rendered HTML.
+     * @param text - The markdown text to parse
+     * @returns The sanitized HTML string
+     */
+    parse(text: string): Promise<string>;
+    /**
+     * The underlying marked instance for advanced usage.
+     */
+    readonly marked: Marked;
+}
+/**
+ * Sets up a markdown renderer with syntax highlighting and sanitization.
+ * This is the core setup function that can be used in any framework.
+ *
+ * @param options - Configuration options for the markdown renderer
+ * @returns A MarkdownRenderer instance
+ *
+ * @example
+ * ```typescript
+ * // Basic usage
+ * const renderer = await setupMarkdownRenderer();
+ * const html = await renderer.parse('# Hello **World**');
+ *
+ * // With custom options
+ * const renderer = await setupMarkdownRenderer({
+ *   languages: ['javascript', 'python', 'rust'],
+ *   theme: 'monokai',
+ *   noHighlighter: false
+ * });
+ *
+ * // With custom sanitizer
+ * const renderer = await setupMarkdownRenderer({
+ *   sanitizer: (html) => myCustomSanitizer(html)
+ * });
+ * ```
+ */
+export declare function setupMarkdownRenderer(options?: MarkdownRendererOptions): Promise<MarkdownRenderer>;
+/**
+ * Creates a markdown renderer specifically for igc-chat messages.
+ * This function wraps the renderer to work with IgcChatMessage objects
+ * and returns Lit's unsafeHTML directive for rendering.
+ *
+ * @param options - Configuration options for the markdown renderer
+ * @returns A function that takes an IgcChatMessage and returns a Lit template result
+ *
+ * @example
+ * ```typescript
+ * const renderer = await createMarkdownRenderer();
+ * const message = { text: '# Hello **World**' };
+ * const template = await renderer(message);
+ * ```
+ */
 export declare function createMarkdownRenderer(options?: MarkdownRendererOptions): Promise<(message: IgcChatMessage) => Promise<unknown>>;

package/extras/chat-markdown-renderer.js

@@ -8,8 +8,11 @@ const DEFAULT_THEME = {
     light: 'github-light',
     dark: 'github-dark',
 };
-export async function createMarkdownRenderer(options) {
+export async function setupMarkdownRenderer(options) {
     const sanitizer = options?.sanitizer ?? DOMPurify.sanitize;
+    const theme = typeof options?.theme === 'string'
+        ? { light: options.theme, dark: options.theme }
+        : (options?.theme ?? DEFAULT_THEME);
     const markdown = new Marked({
         breaks: true,
         gfm: true,
@@ -23,9 +26,8 @@ export async function createMarkdownRenderer(options) {
         ],
     });
     if (!options?.noHighlighter) {
-        const themes = options?.theme ?? DEFAULT_THEME;
         const langs = options?.languages ?? DEFAULT_LANGUAGES;
-        const colorReplacements = {
+        const colorReplacements = options?.colorReplacements ?? {
             '#6f42c1': 'var(--shiki-purple)',
             '#032f62': 'var(--shiki-dark-blue)',
             '#24292e': 'var(--shiki-navy)',
@@ -43,7 +45,7 @@ export async function createMarkdownRenderer(options) {
                 try {
                     return highlighter.codeToHtml(code, {
                         lang,
-                        themes,
+                        themes: theme,
                         colorReplacements: {
                             'github-light': {
                                 ...colorReplacements,
@@ -65,10 +67,20 @@ export async function createMarkdownRenderer(options) {
             },
         }));
     }
+    return {
+        async parse(text) {
+            const result = await markdown.parse(text);
+            return sanitizer(String(result));
+        },
+        get marked() {
+            return markdown;
+        },
+    };
+}
+export async function createMarkdownRenderer(options) {
+    const renderer = await setupMarkdownRenderer(options);
     return async (message) => {
-        return message.text
-            ? unsafeHTML(sanitizer(await markdown.parse(message.text)))
-            : '';
+        return message.text ? unsafeHTML(await renderer.parse(message.text)) : '';
     };
 }
 //# sourceMappingURL=chat-markdown-renderer.js.map

package/extras/chat-markdown-renderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"chat-markdown-renderer.js","sourceRoot":"","sources":["../../src/extras/chat-markdown-renderer.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,WAAW,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAChC,OAAO,WAAW,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAGpE,MAAM,iBAAiB,GAAG,CAAC,YAAY,EAAE,YAAY,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC;AACtE,MAAM,aAAa,GAAG;IACpB,KAAK,EAAE,cAAc;IACrB,IAAI,EAAE,aAAa;CACpB,CAAC;AA8BF,MAAM,CAAC,KAAK,UAAU,sBAAsB,CAC1C,OAAiC;IAEjC,MAAM,SAAS,GAAG,OAAO,EAAE,SAAS,IAAI,SAAS,CAAC,QAAQ,CAAC;IAE3D,MAAM,QAAQ,GAAG,IAAI,MAAM,CAAC;QAC1B,MAAM,EAAE,IAAI;QACZ,GAAG,EAAE,IAAI;QACT,UAAU,EAAE;YACV;gBACE,IAAI,EAAE,MAAM;gBACZ,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE;oBAC5B,OAAO,YAAY,IAAI,+CAA+C,KAAK,CAAC,CAAC,CAAC,UAAU,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,MAAM,CAAC;gBACtH,CAAC;aACF;SACF;KACF,CAAC,CAAC;IAEH,IAAI,CAAC,OAAO,EAAE,aAAa,EAAE,CAAC;QAC5B,MAAM,MAAM,GAAG,OAAO,EAAE,KAAK,IAAI,aAAa,CAAC;QAC/C,MAAM,KAAK,GAAG,OAAO,EAAE,SAAS,IAAI,iBAAiB,CAAC;QACtD,MAAM,iBAAiB,GAAG;YACxB,SAAS,EAAE,qBAAqB;YAChC,SAAS,EAAE,wBAAwB;YACnC,SAAS,EAAE,mBAAmB;YAC9B,SAAS,EAAE,kBAAkB;YAC7B,SAAS,EAAE,mBAAmB;YAC9B,SAAS,EAAE,oBAAoB;YAC/B,SAAS,EAAE,qBAAqB;SACjC,CAAC;QAEF,MAAM,WAAW,GAAG,MAAM,iBAAiB,CAAC;YAC1C,KAAK;YACL,MAAM,EAAE,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC;SACnC,CAAC,CAAC;QAEH,QAAQ,CAAC,GAAG,CACV,WAAW,CAAC;YACV,SAAS,CAAC,IAAI,EAAE,IAAI,EAAE,CAAC;gBACrB,IAAI,CAAC;oBACH,OAAO,WAAW,CAAC,UAAU,CAAC,IAAI,EAAE;wBAClC,IAAI;wBACJ,MAAM;wBACN,iBAAiB,EAAE;4BACjB,cAAc,EAAE;gCACd,GAAG,iBAAiB;gCACpB,MAAM,EAAE,iBAAiB;gCACzB,SAAS,EAAE,iBAAiB;6BAC7B;4BACD,aAAa,EAAE;gCACb,GAAG,iBAAiB;gCACpB,SAAS,EAAE,iBAAiB;gCAC5B,SAAS,EAAE,iBAAiB;6BAC7B;yBACF;wBACD,YAAY,EAAE,cAAc;qBAC7B,CAAC,CAAC;gBACL,CAAC;gBAAC,MAAM,CAAC;oBACP,OAAO,cAAc,SAAS,CAAC,IAAI,CAAC,eAAe,CAAC;gBACtD,CAAC;YACH,CAAC;SACF,CAAC,CACH,CAAC;IACJ,CAAC;IAED,OAAO,KAAK,EAAE,OAAuB,EAAoB,EAAE;QACzD,OAAO,OAAO,CAAC,IAAI;YACjB,CAAC,CAAC,UAAU,CAAC,SAAS,CAAC,MAAM,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC;YAC3D,CAAC,CAAC,EAAE,CAAC;IACT,CAAC,CAAC;AACJ,CAAC","sourcesContent":["import DOMPurify from 'dompurify';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { Marked } from 'marked';\nimport markedShiki from 'marked-shiki';\nimport { bundledThemes, createHighlighter } from 'shiki/bundle/web';\nimport type { IgcChatMessage } from '../components/chat/types.js';\n\nconst DEFAULT_LANGUAGES = ['javascript', 'typescript', 'html', 'css'];\nconst DEFAULT_THEME = {\n  light: 'github-light',\n  dark: 'github-dark',\n};\n\n/**\n * Options to configure the MarkdownMessageRenderer.\n */\nexport interface MarkdownRendererOptions {\n  /**\n   * If true, disables syntax highlighting entirely.\n   */\n  noHighlighter?: boolean;\n\n  /**\n   * List of programming languages to support in syntax highlighting.\n   */\n  languages?: string[];\n\n  /**\n   * The theme used by the syntax highlighter (e.g., 'github-light').\n   */\n  theme?: {\n    light?: string;\n    dark?: string;\n  };\n\n  /**\n   * A custom HTML sanitization function. Defaults to DOMPurify.sanitize.\n   */\n  sanitizer?: (html: string) => string;\n}\n\nexport async function createMarkdownRenderer(\n  options?: MarkdownRendererOptions\n) {\n  const sanitizer = options?.sanitizer ?? DOMPurify.sanitize;\n\n  const markdown = new Marked({\n    breaks: true,\n    gfm: true,\n    extensions: [\n      {\n        name: 'link',\n        renderer({ href, title, text }) {\n          return `<a href=\"${href}\" target=\"_blank\" rel=\"noopener noreferrer\" ${title ? `title=\"${title}\"` : ''}>${text}</a>`;\n        },\n      },\n    ],\n  });\n\n  if (!options?.noHighlighter) {\n    const themes = options?.theme ?? DEFAULT_THEME;\n    const langs = options?.languages ?? DEFAULT_LANGUAGES;\n    const colorReplacements = {\n      '#6f42c1': 'var(--shiki-purple)',\n      '#032f62': 'var(--shiki-dark-blue)',\n      '#24292e': 'var(--shiki-navy)',\n      '#d73a49': 'var(--shiki-red)',\n      '#005cc5': 'var(--shiki-blue)',\n      '#22863a': 'var(--shiki-green)',\n      '#e36209': 'var(--shiki-orange)',\n    };\n\n    const highlighter = await createHighlighter({\n      langs,\n      themes: Object.keys(bundledThemes),\n    });\n\n    markdown.use(\n      markedShiki({\n        highlight(code, lang, _) {\n          try {\n            return highlighter.codeToHtml(code, {\n              lang,\n              themes,\n              colorReplacements: {\n                'github-light': {\n                  ...colorReplacements,\n                  '#fff': 'var(--shiki-bg)',\n                  '#24292e': 'var(--shiki-fg)',\n                },\n                'github-dark': {\n                  ...colorReplacements,\n                  '#24292e': 'var(--shiki-bg)',\n                  '#e1e4e8': 'var(--shiki-fg)',\n                },\n              },\n              defaultColor: 'light-dark()',\n            });\n          } catch {\n            return `<pre><code>${sanitizer(code)}</code></pre>`;\n          }\n        },\n      })\n    );\n  }\n\n  return async (message: IgcChatMessage): Promise<unknown> => {\n    return message.text\n      ? unsafeHTML(sanitizer(await markdown.parse(message.text)))\n      : '';\n  };\n}\n"]}
+{"version":3,"file":"chat-markdown-renderer.js","sourceRoot":"","sources":["../../src/extras/chat-markdown-renderer.ts"],"names":[],"mappings":"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","sourcesContent":["import DOMPurify from 'dompurify';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { Marked } from 'marked';\nimport markedShiki from 'marked-shiki';\nimport { bundledThemes, createHighlighter } from 'shiki/bundle/web';\nimport type { IgcChatMessage } from '../components/chat/types.js';\n\nconst DEFAULT_LANGUAGES = ['javascript', 'typescript', 'html', 'css'];\nconst DEFAULT_THEME = {\n  light: 'github-light',\n  dark: 'github-dark',\n};\n\n/**\n * Configuration options for setting up the markdown parser and highlighter.\n * This provides more granular control over the markdown processing pipeline.\n */\nexport interface MarkdownRendererOptions {\n  /**\n   * If true, disables syntax highlighting entirely.\n   */\n  noHighlighter?: boolean;\n\n  /**\n   * List of programming languages to support in syntax highlighting.\n   * @default ['javascript', 'typescript', 'html', 'css']\n   */\n  languages?: string[];\n\n  /**\n   * The theme(s) used by the syntax highlighter.\n   * Can be a single theme name or separate themes for light and dark modes.\n   * @default { light: 'github-light', dark: 'github-dark' }\n   */\n  theme?: string | { light?: string; dark?: string };\n\n  /**\n   * A custom HTML sanitization function.\n   * @default DOMPurify.sanitize\n   */\n  sanitizer?: (html: string) => string;\n\n  /**\n   * Custom color replacements for syntax highlighting.\n   * Maps hex colors to CSS variable names.\n   */\n  colorReplacements?: Record<string, string>;\n}\n\n/**\n * Represents a markdown renderer instance that can process markdown text.\n */\nexport interface MarkdownRenderer {\n  /**\n   * Parses markdown text and returns rendered HTML.\n   * @param text - The markdown text to parse\n   * @returns The sanitized HTML string\n   */\n  parse(text: string): Promise<string>;\n\n  /**\n   * The underlying marked instance for advanced usage.\n   */\n  readonly marked: Marked;\n}\n\n/**\n * Sets up a markdown renderer with syntax highlighting and sanitization.\n * This is the core setup function that can be used in any framework.\n *\n * @param options - Configuration options for the markdown renderer\n * @returns A MarkdownRenderer instance\n *\n * @example\n * ```typescript\n * // Basic usage\n * const renderer = await setupMarkdownRenderer();\n * const html = await renderer.parse('# Hello **World**');\n *\n * // With custom options\n * const renderer = await setupMarkdownRenderer({\n *   languages: ['javascript', 'python', 'rust'],\n *   theme: 'monokai',\n *   noHighlighter: false\n * });\n *\n * // With custom sanitizer\n * const renderer = await setupMarkdownRenderer({\n *   sanitizer: (html) => myCustomSanitizer(html)\n * });\n * ```\n */\nexport async function setupMarkdownRenderer(\n  options?: MarkdownRendererOptions\n): Promise<MarkdownRenderer> {\n  const sanitizer = options?.sanitizer ?? DOMPurify.sanitize;\n\n  // Normalize theme option\n  const theme =\n    typeof options?.theme === 'string'\n      ? { light: options.theme, dark: options.theme }\n      : (options?.theme ?? DEFAULT_THEME);\n\n  // Create marked instance with default configuration\n  const markdown = new Marked({\n    breaks: true,\n    gfm: true,\n    extensions: [\n      {\n        name: 'link',\n        renderer({ href, title, text }) {\n          return `<a href=\"${href}\" target=\"_blank\" rel=\"noopener noreferrer\" ${title ? `title=\"${title}\"` : ''}>${text}</a>`;\n        },\n      },\n    ],\n  });\n\n  // Setup syntax highlighting if not disabled\n  if (!options?.noHighlighter) {\n    const langs = options?.languages ?? DEFAULT_LANGUAGES;\n    const colorReplacements = options?.colorReplacements ?? {\n      '#6f42c1': 'var(--shiki-purple)',\n      '#032f62': 'var(--shiki-dark-blue)',\n      '#24292e': 'var(--shiki-navy)',\n      '#d73a49': 'var(--shiki-red)',\n      '#005cc5': 'var(--shiki-blue)',\n      '#22863a': 'var(--shiki-green)',\n      '#e36209': 'var(--shiki-orange)',\n    };\n\n    const highlighter = await createHighlighter({\n      langs,\n      themes: Object.keys(bundledThemes),\n    });\n\n    markdown.use(\n      markedShiki({\n        highlight(code, lang, _) {\n          try {\n            return highlighter.codeToHtml(code, {\n              lang,\n              themes: theme,\n              colorReplacements: {\n                'github-light': {\n                  ...colorReplacements,\n                  '#fff': 'var(--shiki-bg)',\n                  '#24292e': 'var(--shiki-fg)',\n                },\n                'github-dark': {\n                  ...colorReplacements,\n                  '#24292e': 'var(--shiki-bg)',\n                  '#e1e4e8': 'var(--shiki-fg)',\n                },\n              },\n              defaultColor: 'light-dark()',\n            });\n          } catch {\n            return `<pre><code>${sanitizer(code)}</code></pre>`;\n          }\n        },\n      })\n    );\n  }\n\n  return {\n    async parse(text: string): Promise<string> {\n      const result = await markdown.parse(text);\n      return sanitizer(String(result));\n    },\n    get marked(): Marked<string, string> {\n      return markdown;\n    },\n  };\n}\n\n/**\n * Creates a markdown renderer specifically for igc-chat messages.\n * This function wraps the renderer to work with IgcChatMessage objects\n * and returns Lit's unsafeHTML directive for rendering.\n *\n * @param options - Configuration options for the markdown renderer\n * @returns A function that takes an IgcChatMessage and returns a Lit template result\n *\n * @example\n * ```typescript\n * const renderer = await createMarkdownRenderer();\n * const message = { text: '# Hello **World**' };\n * const template = await renderer(message);\n * ```\n */\nexport async function createMarkdownRenderer(\n  options?: MarkdownRendererOptions\n) {\n  const renderer = await setupMarkdownRenderer(options);\n\n  return async (message: IgcChatMessage): Promise<unknown> => {\n    return message.text ? unsafeHTML(await renderer.parse(message.text)) : '';\n  };\n}\n"]}