@humanspeak/svelte-markdown 0.7.20 → 0.8.0

package/README.md

@@ -24,6 +24,7 @@ A powerful, customizable markdown renderer for Svelte with TypeScript support. B
 - ♿ WCAG 2.1 accessibility compliance
 - 🧪 Comprehensive test coverage (vitest and playwright)
 - 🔄 Svelte 5 runes compatibility
+- 🛡️ XSS protection and sanitization
 
 ## Installation
 
@@ -175,6 +176,7 @@ Seamlessly mix HTML and Markdown:
 - `codespan` - Inline code (`<code>`)
 - `code` - Block of code (`<pre><code>`)
 - `html` - HTML node
+- `rawtext` - All other text that is going to be included in an object above
 
 ### Optional List Renderers
 
@@ -242,6 +244,15 @@ The component emits a `parsed` event when tokens are calculated:
 | options   | `SvelteMarkdownOptions` | Marked parser configuration           |
 | isInline  | `boolean`               | Toggle inline parsing mode            |
 
+## Security
+
+The package includes several security features:
+
+- XSS protection through HTML sanitization
+- Secure HTML parsing with HTMLParser2
+- Safe handling of HTML entities
+- Protection against malicious markdown injection
+
 ## License
 
 MIT © [Humanspeak, Inc.](LICENSE)

package/dist/Parser.svelte

@@ -53,13 +53,13 @@
         RendererComponent
     } from './utils/markdown-parser.js'
 
-    interface Props {
+    interface Props<T extends Renderers = Renderers> {
         type?: string
         tokens?: Token[] | TokensList
         header?: Tokens.TableCell[]
         rows?: Tokens.TableCell[][]
         ordered?: boolean
-        renderers: Renderers
+        renderers: T
     }
 
     const {
@@ -116,8 +116,9 @@
                                     }}
                                     {@const { tag, ...localRest } = token}
                                     {@const htmlTag = tag as keyof typeof Html}
-                                    {#if htmlTag in renderers.html}
-                                        {@const HtmlComponent = renderers.html[htmlTag]}
+                                    {#if renderers.html && htmlTag in renderers.html}
+                                        {@const HtmlComponent =
+                                            renderers.html[htmlTag as keyof typeof renderers.html]}
                                         <HtmlComponent {...token}>
                                             {#if token.tokens?.length}
                                                 <Parser
@@ -167,8 +168,8 @@
     {:else if type === 'html'}
         {@const { tag, ...localRest } = rest}
         {@const htmlTag = rest.tag as keyof typeof Html}
-        {#if htmlTag in renderers.html}
-            {@const HtmlComponent = renderers.html[htmlTag]}
+        {#if renderers.html && htmlTag in renderers.html}
+            {@const HtmlComponent = renderers.html[htmlTag as keyof typeof renderers.html]}
             {@const tokens = (rest.tokens as Token[]) ?? ([] as Token[])}
             <HtmlComponent {...rest}>
                 {#if tokens.length}
@@ -189,13 +190,13 @@
             />
         {/if}
     {:else}
-        {@const GeneralComponent = renderers[type as keyof Renderers] as RendererComponent}
+        {@const GeneralComponent = renderers[type as keyof typeof renderers] as RendererComponent}
         <GeneralComponent {...rest}>
             {#if tokens}
                 {@const { text: _text, raw: _raw, ...parserRest } = rest}
                 <Parser {tokens} {renderers} {...parserRest} />
             {:else}
-                {rest.raw}
+                <renderers.rawtext text={rest.raw} />
             {/if}
         </GeneralComponent>
     {/if}

package/dist/Parser.svelte.d.ts

@@ -43,13 +43,13 @@
      */
 import Parser from './Parser.svelte';
 import type { Renderers, Token, TokensList, Tokens } from './utils/markdown-parser.js';
-interface Props {
+interface Props<T extends Renderers = Renderers> {
     type?: string;
     tokens?: Token[] | TokensList;
     header?: Tokens.TableCell[];
     rows?: Tokens.TableCell[][];
     ordered?: boolean;
-    renderers: Renderers;
+    renderers: T;
 }
 type $$ComponentProps = Props & {
     [key: string]: unknown;

package/dist/SvelteMarkdown.svelte

@@ -46,23 +46,22 @@
      * - Provides parsed callback for external token access
      */
 
+    import Parser from './Parser.svelte'
+    import { type SvelteMarkdownProps } from './types.js'
     import {
-        Lexer,
         defaultOptions,
         defaultRenderers,
+        Lexer,
         Slugger,
         type Token,
-        type TokensList,
-        type SvelteMarkdownOptions
+        type TokensList
     } from './utils/markdown-parser.js'
-    import Parser from './Parser.svelte'
     import { shrinkHtmlTokens } from './utils/token-cleanup.js'
-    import { type SvelteMarkdownProps } from './types.js'
 
     const {
         source = [],
         renderers = {},
-        options = {} as SvelteMarkdownOptions,
+        options = {},
         isInline = false,
         parsed = () => {},
         ...rest

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import type { SvelteMarkdownOptions, Token, TokensList } from './utils/markdown-parser.js';
+import type { RendererComponent, Renderers, Token, TokensList } from './utils/markdown-parser.js';
 import SvelteMarkdown from './SvelteMarkdown.svelte';
-import type { SvelteMarkdownProps } from './types.js';
+import type { SvelteMarkdownOptions, SvelteMarkdownProps } from './types.js';
 export default SvelteMarkdown;
-export type { SvelteMarkdownOptions, SvelteMarkdownProps, Token, TokensList };
+export type { RendererComponent, Renderers, SvelteMarkdownOptions, SvelteMarkdownProps, Token, TokensList };

package/dist/renderers/Heading.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import type { Snippet } from 'svelte'
-    import type { SvelteMarkdownOptions } from '../utils/markdown-parser.js'
+    import type { SvelteMarkdownOptions } from '../types.js'
 
     interface Props {
         depth: number

package/dist/renderers/Heading.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { Snippet } from 'svelte';
-import type { SvelteMarkdownOptions } from '../utils/markdown-parser.js';
+import type { SvelteMarkdownOptions } from '../types.js';
 interface Props {
     depth: number;
     raw: string;

package/dist/renderers/RawText.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+    interface Props {
+        text?: string
+    }
+    const { text }: Props = $props()
+</script>
+
+{text}

package/dist/renderers/RawText.svelte.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    text?: string;
+}
+declare const RawText: import("svelte").Component<Props, {}, "">;
+type RawText = ReturnType<typeof RawText>;
+export default RawText;

package/dist/renderers/index.d.ts

@@ -12,6 +12,7 @@ export { default as Link } from './Link.svelte';
 export { default as List } from './List.svelte';
 export { default as ListItem } from './ListItem.svelte';
 export { default as Paragraph } from './Paragraph.svelte';
+export { default as RawText } from './RawText.svelte';
 export { default as Strong } from './Strong.svelte';
 export { default as Table } from './Table.svelte';
 export { default as TableBody } from './TableBody.svelte';

package/dist/renderers/index.js

@@ -12,6 +12,7 @@ export { default as Link } from './Link.svelte';
 export { default as List } from './List.svelte';
 export { default as ListItem } from './ListItem.svelte';
 export { default as Paragraph } from './Paragraph.svelte';
+export { default as RawText } from './RawText.svelte';
 export { default as Strong } from './Strong.svelte';
 export { default as Table } from './Table.svelte';
 export { default as TableBody } from './TableBody.svelte';

package/dist/types.d.ts

@@ -18,11 +18,15 @@
  * @packageDocumentation
  */
 import type { Token, TokensList } from 'marked';
-import type { Renderers, SvelteMarkdownOptions } from './utils/markdown-parser.js';
-export type SvelteMarkdownProps = {
+import type { MarkedOptions, Renderers } from './utils/markdown-parser.js';
+export type SvelteMarkdownProps<T extends Renderers = Renderers> = {
     source: Token[] | string;
-    renderers?: Partial<Renderers>;
+    renderers?: Partial<T>;
     options?: Partial<SvelteMarkdownOptions>;
     isInline?: boolean;
     parsed?: (tokens: Token[] | TokensList) => void;
 };
+export interface SvelteMarkdownOptions extends MarkedOptions {
+    headerIds?: boolean;
+    headerPrefix?: string;
+}

package/dist/utils/markdown-parser.d.ts

@@ -1,7 +1,8 @@
 export { default as Slugger } from 'github-slugger';
-export { Lexer, type Token, type Tokens, type TokensList } from 'marked';
+export { Lexer, type MarkedOptions, type Token, type Tokens, type TokensList } from 'marked';
 import type { Component } from 'svelte';
 import { type HtmlRenderers } from '../renderers/html/index.js';
+import type { SvelteMarkdownOptions } from '../types.js';
 /**
  * Represents a Svelte component that can be used as a renderer.
  * Allows for flexible component types while maintaining type safety.
@@ -24,6 +25,7 @@ export type RendererComponent = Component<any, any, any> | undefined | null;
  */
 export type Renderers = {
     html: HtmlRenderers;
+    rawtext: RendererComponent;
     heading: RendererComponent;
     paragraph: RendererComponent;
     blockquote: RendererComponent;
@@ -59,50 +61,6 @@ export type Renderers = {
  * @const {Renderers}
  */
 export declare const defaultRenderers: Renderers;
-/**
- * Configuration options for SvelteMarkdown parser.
- * Extends marked options with additional Svelte-specific configurations.
- *
- * @interface SvelteMarkdownOptions
- *
- * @property {string|null} baseUrl - Base URL for relative links
- * @property {boolean} breaks - Enable line breaks in output
- * @property {boolean} gfm - Enable GitHub Flavored Markdown
- * @property {boolean} headerIds - Auto-generate header IDs
- * @property {string} headerPrefix - Prefix for header IDs
- * @property {Function|null} highlight - Syntax highlighting function
- * @property {string} langPrefix - Prefix for code block language classes
- * @property {boolean} mangle - Encode email addresses
- * @property {boolean} pedantic - Conform to original markdown spec
- * @property {Object|null} renderer - Custom renderer
- * @property {boolean} sanitize - Sanitize HTML input
- * @property {Function|null} sanitizer - Custom sanitizer function
- * @property {boolean} silent - Suppress error output
- * @property {boolean} smartLists - Use smarter list behavior
- * @property {boolean} smartypants - Use smart punctuation
- * @property {Object|null} tokenizer - Custom tokenizer
- * @property {boolean} xhtml - Generate XHTML-compliant tags
- */
-export type SvelteMarkdownOptions = {
-    baseUrl: string | null;
-    breaks: boolean;
-    gfm: boolean;
-    headerIds: boolean;
-    tables: boolean;
-    headerPrefix: string;
-    highlight: null;
-    langPrefix: string;
-    mangle: boolean;
-    pedantic: boolean;
-    renderer: null;
-    sanitize: boolean;
-    sanitizer: null;
-    silent: boolean;
-    smartLists: boolean;
-    smartypants: boolean;
-    tokenizer: null;
-    xhtml: boolean;
-};
 /**
  * Default configuration options for the markdown parser.
  * Provides sensible defaults while allowing for customization.

package/dist/utils/markdown-parser.js

@@ -1,7 +1,7 @@
 export { default as Slugger } from 'github-slugger';
 export { Lexer } from 'marked';
 import {} from '../renderers/html/index.js';
-import { Blockquote, Br, Code, Codespan, Del, Em, Heading, Hr, Html, Image, Link, List, ListItem, Paragraph, Strong, Table, TableBody, TableCell, TableHead, TableRow, Text } from '../renderers/index.js';
+import { Blockquote, Br, Code, Codespan, Del, Em, Heading, Hr, Html, Image, Link, List, ListItem, Paragraph, RawText, Strong, Table, TableBody, TableCell, TableHead, TableRow, Text } from '../renderers/index.js';
 /**
  * Default renderer configuration mapping markdown elements to Svelte components.
  * Provides out-of-the-box rendering capabilities while allowing for customization.
@@ -36,7 +36,8 @@ export const defaultRenderers = {
     html: Html,
     blockquote: Blockquote,
     code: Code,
-    br: Br
+    br: Br,
+    rawtext: RawText
 };
 /**
  * Default configuration options for the markdown parser.
@@ -52,22 +53,15 @@ export const defaultRenderers = {
  * @const {SvelteMarkdownOptions}
  */
 export const defaultOptions = {
-    baseUrl: null,
+    async: false,
     breaks: false,
     gfm: true,
-    tables: true,
-    headerIds: true,
-    headerPrefix: '',
-    highlight: null,
-    langPrefix: 'language-',
-    mangle: true,
     pedantic: false,
     renderer: null,
-    sanitize: false,
-    sanitizer: null,
     silent: false,
-    smartLists: false,
-    smartypants: false,
     tokenizer: null,
-    xhtml: false
+    walkTokens: null,
+    // Custom options
+    headerIds: true,
+    headerPrefix: ''
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@humanspeak/svelte-markdown",
-    "version": "0.7.20",
+    "version": "0.8.0",
     "description": "A powerful, customizable markdown renderer for Svelte with TypeScript support",
     "keywords": [
         "svelte",
@@ -75,24 +75,24 @@
         "marked": "^15.0.7"
     },
     "devDependencies": {
-        "@eslint/compat": "^1.2.7",
-        "@eslint/js": "^9.23.0",
+        "@eslint/compat": "^1.2.8",
+        "@eslint/js": "^9.24.0",
         "@playwright/test": "^1.51.1",
-        "@sveltejs/adapter-auto": "^5.0.0",
-        "@sveltejs/kit": "^2.20.2",
+        "@sveltejs/adapter-auto": "^6.0.0",
+        "@sveltejs/kit": "^2.20.4",
         "@sveltejs/package": "^2.3.10",
         "@sveltejs/vite-plugin-svelte": "^5.0.3",
         "@testing-library/jest-dom": "^6.6.3",
         "@testing-library/svelte": "^5.2.7",
         "@testing-library/user-event": "^14.6.1",
-        "@types/node": "^22.13.14",
-        "@typescript-eslint/eslint-plugin": "^8.28.0",
-        "@typescript-eslint/parser": "^8.28.0",
-        "@vitest/coverage-v8": "^3.0.9",
-        "eslint": "^9.23.0",
+        "@types/node": "^22.14.0",
+        "@typescript-eslint/eslint-plugin": "^8.29.0",
+        "@typescript-eslint/parser": "^8.29.0",
+        "@vitest/coverage-v8": "^3.1.1",
+        "eslint": "^9.24.0",
         "eslint-config-prettier": "^10.1.1",
         "eslint-plugin-import": "^2.31.0",
-        "eslint-plugin-svelte": "^3.3.3",
+        "eslint-plugin-svelte": "^3.5.1",
         "eslint-plugin-unused-imports": "^4.1.4",
         "globals": "^16.0.0",
         "jsdom": "^26.0.0",
@@ -100,13 +100,13 @@
         "prettier-plugin-organize-imports": "^4.1.0",
         "prettier-plugin-svelte": "^3.3.3",
         "prettier-plugin-tailwindcss": "^0.6.11",
-        "publint": "^0.3.9",
-        "svelte": "^5.25.3",
+        "publint": "^0.3.10",
+        "svelte": "^5.25.7",
         "svelte-check": "^4.1.5",
-        "typescript": "^5.8.2",
-        "typescript-eslint": "^8.28.0",
-        "vite": "^6.2.3",
-        "vitest": "^3.0.9"
+        "typescript": "^5.8.3",
+        "typescript-eslint": "^8.29.0",
+        "vite": "^6.2.5",
+        "vitest": "^3.1.1"
     },
     "peerDependencies": {
         "svelte": "^5.0.0"