@humanspeak/svelte-markdown 0.7.9 → 0.7.11

package/README.md

@@ -1,4 +1,6 @@
-# Svelte Markdown
+# @humanspeak/svelte-markdown
+
+A powerful, customizable markdown renderer for Svelte with TypeScript support. Built as a successor to the original svelte-markdown package by Pablo Berganza, now maintained and enhanced by Humanspeak, Inc.
 
 [![NPM version](https://img.shields.io/npm/v/@humanspeak/svelte-markdown.svg)](https://www.npmjs.com/package/@humanspeak/svelte-markdown)
 [![Build Status](https://github.com/humanspeak/svelte-markdown/actions/workflows/npm-publish.yml/badge.svg)](https://github.com/humanspeak/svelte-markdown/actions/workflows/npm-publish.yml)
@@ -6,20 +8,24 @@
 [![License](https://img.shields.io/npm/l/@humanspeak/svelte-markdown.svg)](https://github.com/humanspeak/svelte-markdown/blob/main/LICENSE.md)
 [![Downloads](https://img.shields.io/npm/dm/@humanspeak/svelte-markdown.svg)](https://www.npmjs.com/package/@humanspeak/svelte-markdown)
 [![CodeQL](https://github.com/humanspeak/svelte-markdown/actions/workflows/codeql.yml/badge.svg)](https://github.com/humanspeak/svelte-markdown/actions/workflows/codeql.yml)
+[![Code Style: Trunk](https://img.shields.io/badge/code%20style-trunk-blue.svg)](https://trunk.io)
 [![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](http://www.typescriptlang.org/)
 [![Types](https://img.shields.io/npm/types/@humanspeak/svelte-markdown.svg)](https://www.npmjs.com/package/@humanspeak/svelte-markdown)
 [![Maintenance](https://img.shields.io/badge/Maintained%3F-yes-green.svg)](https://github.com/humanspeak/svelte-markdown/graphs/commit-activity)
 
-A markdown parser that renders into Svelte Components. Inspired by [ReactMarkdown](https://github.com/remarkjs/react-markdown).
-
-Feel free to play with it and leave comments on its [homepage](https://markdown.svelte.page)
+## Features
 
-Rewriten for Svelte5 and all the updated goodies that have happened over the last two years. Also moved to Typescript because its the future!
+- 🚀 Full markdown syntax support through Marked
+- 💪 Complete TypeScript support with strict typing
+- 🎨 Customizable component rendering system
+- 🔒 Secure HTML parsing via HTMLParser2
+- 🎯 GitHub-style slug generation for headers
+- ♿ WCAG 2.1 accessibility compliance
+- 🧪 Comprehensive test coverage (vitest and playwright)
+- 🔄 Svelte 5 runes compatibility
 
 ## Installation
 
-You can install it with
-
 ```bash
 npm i -S @humanspeak/svelte-markdown
 ```
@@ -31,7 +37,31 @@ pnpm add @humanspeak/svelte-markdown
 yarn add @humanspeak/svelte-markdown
 ```
 
-## Usage with Svelte 5
+## External Dependencies
+
+This package carefully selects its dependencies to provide a robust and maintainable solution:
+
+### Core Dependencies
+
+- **marked**
+
+    - Industry-standard markdown parser
+    - Battle-tested in production
+    - Extensive security features
+
+- **github-slugger**
+
+    - GitHub-style heading ID generation
+    - Unicode support
+    - Collision handling
+
+- **htmlparser2**
+
+    - High-performance HTML parsing
+    - Streaming capabilities
+    - Security-focused design
+
+## Basic Usage
 
 ```svelte
 <script lang="ts">
@@ -54,7 +84,7 @@ This is a paragraph with **bold** and <em>mixed HTML</em>.
 
 ## TypeScript Support
 
-The package is written in TypeScript and includes full type definitions. You can import types for custom renderers:
+The package is written in TypeScript and includes full type definitions:
 
 ```typescript
 import type {
@@ -88,166 +118,47 @@ Here's a complete example of a custom renderer with TypeScript support:
 </a>
 ```
 
-## Usage
-
-```svelte
-<script lang="ts">
-    import SvelteMarkdown from '@humanspeak/svelte-markdown'
-    const source = `
-  # This is a header
-
-This is a paragraph.
-
-* This is a list
-* With two items
-  1. And a sublist
-  2. That is ordered
-    * With another
-    * Sublist inside
-
-| And this is | A table |
-|-------------|---------|
-| With two    | columns |`
-</script>
-
-<SvelteMarkdown {source} />
-```
-
-This would render something like
-
-```html
-<h1>This is a header</h1>
-<p>This is a paragraph.</p>
-<ul>
-    <li>This is a list</li>
-    <li>
-        With two items
-        <ol start="1">
-            <li>And a sublist</li>
-            <li>
-                That is ordered
-                <ul>
-                    <li>With another</li>
-                    <li>Sublist inside</li>
-                </ul>
-            </li>
-        </ol>
-    </li>
-</ul>
-<table>
-    <thead>
-        <tr>
-            <th>And this is</th>
-            <th>A table</th>
-        </tr>
-    </thead>
-    <tbody>
-        <tr>
-            <td>With two</td>
-            <td>columns</td>
-        </tr>
-    </tbody>
-</table>
-```
+## Advanced Features
 
-## Note
+### Table Support with Mixed Content
 
-Just like with React Markdown, this package doesn't use `{@html ...}`. Even if you add HTML tags to the code, all if it is managed by either the defaults or YOU! If you want to spice things up you can! 🥰
+The package excels at handling complex nested structures and mixed content:
 
-## Props
-
-The SvelteMarkdown component accepts the following props:
-
-- `source` - _string_ or _array_ The Markdown source to be parsed, or an array of tokens to be rendered directly.
-- `renderers` - _object (optional)_ An object where the keys represent a node type and the value is a Svelte component. This object will be merged with the default renderers. For now you can check how the default renderers are written in the source code at `src/renderers`.
-- `renderes.html` - _object (optional)_ An object where the key represents the HTML tag and the value is a Svelte component. This object will be merged with the default renderers. For now you can check how the default renderers are written in the source code at `src/renderers/html`.
-- `options` - _object (optional)_ An object containing [options for Marked](https://marked.js.org/using_advanced#options)
-
-## Renderers
-
-To create custom renderer for an element, you can create a Svelte component with the default props ([you can check them here](https://marked.js.org/using_pro#renderer)), for example:
-
-_`ImageComponent.svelte`_
-
-```svelte
-<script lang="ts">
-    interface Props {
-        href?: string
-        title?: string
-        text?: string
-    }
-
-    const { href = '', title = undefined, text = '' }: Props = $props()
-</script>
-
-<img src={href} {title} alt={text} />
-```
-
-So you can import the component and pass to the `renderers` props:
-
-```svelte
-<script lang="ts">
-    import SvelteMarkdown from '@humanspeak/svelte-markdown'
-    import ImageComponent from './renderers/ImageComponent.svelte'
-    export let content
-</script>
-
-<SvelteMarkdown source={content} renderers={{ image: ImageComponent }} />
-```
-
-## Rendering From Tokens
-
-For greater flexibility, an array of tokens may be given as `source`, in which case parsing is skipped and the tokens will be rendered directly. This alows you to generate and transform the tokens freely beforehand. Example:
-
-```html
-<script lang="ts">
-    import SvelteMarkdown from '@humanspeak/svelte-markdown'
-    import { marked } from 'marked'
-
-    const tokens = marked.lexer('this is an **example**')
-
-    marked.walkTokens(tokens, (token) => {
-        if (token.type == 'strong') token.type = 'em'
-        token.raw = token.raw.toUpperCase()
-    })
-</script>
-
-<SvelteMarkdown source="{tokens}" />
-```
-
-This will render the following:
-
-```html
-<p>THIS IS AN <em>EXAMPLE</em></p>
+```markdown
+| Type       | Content                                 |
+| ---------- | --------------------------------------- |
+| Nested     | <div>**bold** and _italic_</div>        |
+| Mixed List | <ul><li>Item 1</li><li>Item 2</li></ul> |
+| Code       | <code>`inline code`</code>              |
 ```
 
-## Events
+### HTML in Markdown
 
-A `parsed` event will be fired when the final tokens have been calculated, allowing you to access the raw token array if needed for things like generating Table of Contents from headings.
+Seamlessly mix HTML and Markdown:
 
-```html
-<script lang="ts">
-    import SvelteMarkdown from '@humanspeak/svelte-markdown'
+```markdown
+<div style="color: blue">
+  ### This is a Markdown heading inside HTML
+  And here's some **bold** text too!
+</div>
 
-    const source = `# This is a header`
+<details>
+<summary>Click to expand</summary>
 
-    const handleParsed = async (parsedTokens: Token[] | TokensList) => {
-        console.log('displaying tokens', parsedTokens)
-    }
-</script>
+- This is a markdown list
+- Inside an HTML details element
+- Supporting **bold** and _italic_ text
 
-<SvelteMarkdown {source} parsed="{handleParsed}"></SvelteMarkdown>
+</details>
 ```
 
-## Available renderers
-
-These would be the property names expected by the `renderers` option.
+## Available Renderers
 
-- `text` - Text rendered inside of other elements, such as paragraphs
+- `text` - Text within other elements
 - `paragraph` - Paragraph (`<p>`)
 - `em` - Emphasis (`<em>`)
 - `strong` - Strong/bold (`<strong>`)
-- `hr` - Horizontal rule / thematic break (`<hr>`)
+- `hr` - Horizontal rule (`<hr>`)
 - `blockquote` - Block quote (`<blockquote>`)
 - `del` - Deleted/strike-through (`<del>`)
 - `link` - Link (`<a>`)
@@ -266,145 +177,74 @@ These would be the property names expected by the `renderers` option.
 
 ### Optional List Renderers
 
-For fine detail styling of lists, it can be useful to differentiate between ordered and un-ordered lists.
-If either key is missing, the default `listitem` will be used. There are two
-optional keys in the `renderers` option which can provide this:
-
-- `orderedlistitem` - A list item appearing inside an ordered list
-- `unorderedlistitem` A list item appearing inside an un-ordered list
-
-As an example, if we have an `orderedlistitem`:
-
-```html
-<style>
-    li::marker {
-        color: blue;
-    }
-</style>
-
-<li><slot></slot></li>
-```
-
-Then numbers at the start of ordered list items would be colored blue. Bullets at the start of unordered list items
-would remain the default text color.
-
-### Inline Markdown
-
-To use [inline markdown](https://marked.js.org/using_advanced#inline), you can assign the prop `isInline` to the component.
-
-```html
-<SvelteMarkdown {source} isInline />
-```
-
-## HTML rendering
-
-The package supports mixing HTML and Markdown content seamlessly within the same document. You can use HTML tags alongside Markdown syntax, and both will be properly rendered through their respective components.
-
-### Basic HTML in Markdown
-
-You can freely mix HTML tags with Markdown syntax:
-
-```markdown
-This is a **markdown** paragraph with <em>HTML emphasis</em> mixed in.
-
-<div style="color: blue">
-  ### This is a Markdown heading inside HTML
-  And here's some **bold** text too!
-</div>
-```
+For fine-grained styling:
 
-### Tables with Mixed Content
+- `orderedlistitem` - Items in ordered lists
+- `unorderedlistitem` - Items in unordered lists
 
-Tables support both Markdown and HTML formatting in cells:
+### HTML Renderers
 
-```markdown
-| Feature |  Markdown   |                   HTML |
-| ------- | :---------: | ---------------------: |
-| Bold    |  **text**   |  <strong>text</strong> |
-| Italic  |   _text_    |          <em>text</em> |
-| Links   | [text](url) | <a href="url">text</a> |
-```
+The `html` renderer is special and can be configured separately to handle HTML elements:
 
-### Interactive HTML Elements
+| Element  | Description          |
+| -------- | -------------------- |
+| `div`    | Division element     |
+| `span`   | Inline container     |
+| `table`  | HTML table structure |
+| `thead`  | Table header group   |
+| `tbody`  | Table body group     |
+| `tr`     | Table row            |
+| `td`     | Table data cell      |
+| `th`     | Table header cell    |
+| `ul`     | Unordered list       |
+| `ol`     | Ordered list         |
+| `li`     | List item            |
+| `code`   | Code block           |
+| `em`     | Emphasized text      |
+| `strong` | Strong text          |
+| `a`      | Anchor/link          |
+| `img`    | Image                |
 
-HTML interactive elements like `<details>` work seamlessly:
+You can customize HTML rendering by providing your own components:
 
-```markdown
-<details>
-<summary>Click to expand</summary>
-
-- This is a markdown list
-- Inside an HTML details element
-- Supporting **bold** and _italic_ text
-
-</details>
-```
-
-### HTML Block Elements
-
-HTML block elements can contain Markdown content:
-
-```markdown
-<blockquote>
-  ### Markdown Heading in Blockquote
+```typescript
+import type { HtmlRenderers } from '@humanspeak/svelte-markdown'
 
-- List item with **bold**
-- Another item with _italic_
-  </blockquote>
+const customHtmlRenderers: Partial<HtmlRenderers> = {
+    div: YourCustomDivComponent,
+    span: YourCustomSpanComponent
+}
 ```
 
-### Component Customization
+## Events
 
-You can customize how HTML elements are rendered by providing custom components in the `renderers.html` prop:
+The component emits a `parsed` event when tokens are calculated:
 
 ```svelte
 <script lang="ts">
     import SvelteMarkdown from '@humanspeak/svelte-markdown'
-    import CustomBlockquote from './renderers/CustomBlockquote.svelte'
 
-    const source = `
-        <blockquote>
-            This will use the custom renderer
-        </blockquote>
-    `
+    const handleParsed = (tokens: Token[] | TokensList) => {
+        console.log('Parsed tokens:', tokens)
+    }
 </script>
 
-<SvelteMarkdown
-    {source}
-    renderers={{
-        html: {
-            blockquote: CustomBlockquote
-        }
-    }}
-/>
+<SvelteMarkdown {source} parsed={handleParsed} />
 ```
 
-### Important Notes
-
-1. The HTML rendering is handled by dedicated Svelte components, ensuring proper integration with Svelte's reactivity system.
-
-2. All HTML elements are sanitized by default for security. Custom HTML attributes are preserved and passed to the corresponding components.
-
-3. The package includes renderers for all standard HTML5 elements, which can be found in the source code at `src/renderers/html/`.
-
-4. When mixing HTML and Markdown, the parser maintains proper nesting and hierarchy of elements.
-
-5. For security reasons, script tags and potentially harmful HTML attributes are stripped out during parsing.
-
-## Developing
-
-Some tests have been added to the `tests` folder. You can clone this repo and create another svelte app and link it to this repo to try modifying it.
+## Props
 
-The current extenral dependencies are:
+| Prop      | Type                    | Description                           |
+| --------- | ----------------------- | ------------------------------------- |
+| source    | `string \| Token[]`     | Markdown content or pre-parsed tokens |
+| renderers | `Partial<Renderers>`    | Custom component overrides            |
+| options   | `SvelteMarkdownOptions` | Marked parser configuration           |
+| isInline  | `boolean`               | Toggle inline parsing mode            |
 
-- [Marked](https://marked.js.org/)
-- [Github-Slugger](https://github.com/Flet/github-slugger)
-- [HTMLParser2](https://github.com/fb55/htmlparser2).
+## License
 
-## Related
+MIT © [Humanspeak, Inc.](LICENSE.md)
 
-- [ReactMarkdown](https://github.com/remarkjs/react-markdown) - React library to render markdown using React components. Inspiration for this library.
-- [Svelte](https://svelte.dev) - JavaScript front-end framework.
-- [Original](https://github.com/pablo-abc/svelte-markdown) - Original component
+## Credits
 
 Made with ♥ by [Humanspeak](https://humanspeak.com)

package/dist/Parser.svelte

@@ -34,6 +34,12 @@
      * - Implements special logic for tables, lists, and HTML content
      * - Handles component prop spreading carefully to avoid conflicts
      * - Maintains type safety through TypeScript interfaces
+     * - HTML token handling in table cells uses type assertions for better type safety
+     * - Table cell HTML content is processed with proper token nesting and attribute preservation
+     * - Improved HTML component rendering with proper type checking for tag properties
+     * - Added support for nested markdown within HTML table cells (see test at lines 311-343 in SvelteMarkdown.test.ts)
+     * - Token cleanup utilities handle complex nested structures (see lines 105-127 in token-cleanup.test.ts)
+     * - HTML parsing maintains proper structure for both simple and complex nested elements
      *
      */
 
@@ -103,15 +109,19 @@
                                 align={(rest.align as string[])[i]}
                                 {...cellRest}
                             >
-                                {#if cells.type === 'html'}
-                                    {@const { tag, ...localRest } = cells}
-                                    {@const htmlTag = cells.tag as keyof typeof Html}
+                                {#if cells.tokens?.[0]?.type === 'html'}
+                                    {@const token = cells.tokens[0] as Token & {
+                                        tag: string
+                                        tokens?: Token[]
+                                    }}
+                                    {@const { tag, ...localRest } = token}
+                                    {@const htmlTag = tag as keyof typeof Html}
                                     {#if htmlTag in Html}
                                         {@const HtmlComponent = Html[htmlTag]}
-                                        <HtmlComponent {...cells}>
-                                            {#if cells.tokens?.length}
+                                        <HtmlComponent {...token}>
+                                            {#if token.tokens?.length}
                                                 <Parser
-                                                    tokens={cells.tokens}
+                                                    tokens={token.tokens}
                                                     {renderers}
                                                     {...localRest}
                                                 />

package/dist/Parser.svelte.d.ts

@@ -33,19 +33,27 @@
      * - Implements special logic for tables, lists, and HTML content
      * - Handles component prop spreading carefully to avoid conflicts
      * - Maintains type safety through TypeScript interfaces
+     * - HTML token handling in table cells uses type assertions for better type safety
+     * - Table cell HTML content is processed with proper token nesting and attribute preservation
+     * - Improved HTML component rendering with proper type checking for tag properties
+     * - Added support for nested markdown within HTML table cells (see test at lines 311-343 in SvelteMarkdown.test.ts)
+     * - Token cleanup utilities handle complex nested structures (see lines 105-127 in token-cleanup.test.ts)
+     * - HTML parsing maintains proper structure for both simple and complex nested elements
      *
      */
 import Parser from './Parser.svelte';
 import type { Renderers, Token, TokensList, Tokens } from './utils/markdown-parser.js';
-declare const Parser: import("svelte").Component<{
+interface Props {
     type?: string;
     tokens?: Token[] | TokensList;
     header?: Tokens.TableCell[];
     rows?: Tokens.TableCell[][];
     ordered?: boolean;
     renderers: Renderers;
-} & {
+}
+type $$ComponentProps = Props & {
     [key: string]: unknown;
-}, {}, "">;
+};
+declare const Parser: import("svelte").Component<$$ComponentProps, {}, "">;
 type Parser = ReturnType<typeof Parser>;
 export default Parser;

package/dist/renderers/html/A.svelte.d.ts

@@ -1,7 +1,8 @@
 import type { Snippet } from 'svelte';
-declare const A: import("svelte").Component<{
+interface Props {
     children?: Snippet;
     attributes?: Record<string, any>;
-}, {}, "">;
+}
+declare const A: import("svelte").Component<Props, {}, "">;
 type A = ReturnType<typeof A>;
 export default A;

package/dist/renderers/html/Abbr.svelte.d.ts

@@ -1,7 +1,8 @@
 import type { Snippet } from 'svelte';
-declare const Abbr: import("svelte").Component<{
+interface Props {
     children?: Snippet;
     attributes?: Record<string, any>;
-}, {}, "">;
+}
+declare const Abbr: import("svelte").Component<Props, {}, "">;
 type Abbr = ReturnType<typeof Abbr>;
 export default Abbr;

package/dist/renderers/html/Address.svelte.d.ts

@@ -1,7 +1,8 @@
 import type { Snippet } from 'svelte';
-declare const Address: import("svelte").Component<{
+interface Props {
     children?: Snippet;
     attributes?: Record<string, any>;
-}, {}, "">;
+}
+declare const Address: import("svelte").Component<Props, {}, "">;
 type Address = ReturnType<typeof Address>;
 export default Address;

package/dist/renderers/html/Article.svelte.d.ts

@@ -1,7 +1,8 @@
 import type { Snippet } from 'svelte';
-declare const Article: import("svelte").Component<{
+interface Props {
     children?: Snippet;
     attributes?: Record<string, any>;
-}, {}, "">;
+}
+declare const Article: import("svelte").Component<Props, {}, "">;
 type Article = ReturnType<typeof Article>;
 export default Article;

package/dist/renderers/html/Aside.svelte.d.ts

@@ -1,7 +1,8 @@
 import type { Snippet } from 'svelte';
-declare const Aside: import("svelte").Component<{
+interface Props {
     children?: Snippet;
     attributes?: Record<string, any>;
-}, {}, "">;
+}
+declare const Aside: import("svelte").Component<Props, {}, "">;
 type Aside = ReturnType<typeof Aside>;
 export default Aside;

package/dist/renderers/html/Audio.svelte.d.ts

@@ -1,7 +1,8 @@
 import type { Snippet } from 'svelte';
-declare const Audio: import("svelte").Component<{
+interface Props {
     children?: Snippet;
     attributes?: Record<string, any>;
-}, {}, "">;
+}
+declare const Audio: import("svelte").Component<Props, {}, "">;
 type Audio = ReturnType<typeof Audio>;
 export default Audio;

package/dist/renderers/html/B.svelte.d.ts

@@ -1,7 +1,8 @@
 import type { Snippet } from 'svelte';
-declare const B: import("svelte").Component<{
+interface Props {
     children?: Snippet;
     attributes?: Record<string, any>;
-}, {}, "">;
+}
+declare const B: import("svelte").Component<Props, {}, "">;
 type B = ReturnType<typeof B>;
 export default B;

package/dist/renderers/html/Bdi.svelte.d.ts

@@ -1,7 +1,8 @@
 import type { Snippet } from 'svelte';
-declare const Bdi: import("svelte").Component<{
+interface Props {
     children?: Snippet;
     attributes?: Record<string, any>;
-}, {}, "">;
+}
+declare const Bdi: import("svelte").Component<Props, {}, "">;
 type Bdi = ReturnType<typeof Bdi>;
 export default Bdi;

package/dist/renderers/html/Bdo.svelte.d.ts

@@ -1,7 +1,8 @@
 import type { Snippet } from 'svelte';
-declare const Bdo: import("svelte").Component<{
+interface Props {
     children?: Snippet;
     attributes?: Record<string, any>;
-}, {}, "">;
+}
+declare const Bdo: import("svelte").Component<Props, {}, "">;
 type Bdo = ReturnType<typeof Bdo>;
 export default Bdo;

package/dist/renderers/html/Blockquote.svelte.d.ts

@@ -1,7 +1,8 @@
 import type { Snippet } from 'svelte';
-declare const Blockquote: import("svelte").Component<{
+interface Props {
     children?: Snippet;
     attributes?: Record<string, any>;
-}, {}, "">;
+}
+declare const Blockquote: import("svelte").Component<Props, {}, "">;
 type Blockquote = ReturnType<typeof Blockquote>;
 export default Blockquote;

package/dist/renderers/html/Button.svelte.d.ts

@@ -1,7 +1,8 @@
 import type { Snippet } from 'svelte';
-declare const Button: import("svelte").Component<{
+interface Props {
     children?: Snippet;
     attributes?: Record<string, any>;
-}, {}, "">;
+}
+declare const Button: import("svelte").Component<Props, {}, "">;
 type Button = ReturnType<typeof Button>;
 export default Button;