@humanspeak/svelte-markdown 0.8.8 → 0.8.9

package/dist/Parser.svelte

@@ -109,44 +109,13 @@
                                 {#each row ?? [] as cells, i (i)}
                                     {@const { align: _align, ...cellRest } = rest}
                                     <renderers.tablecell
+                                        {...cellRest}
                                         header={false}
                                         align={(rest.align as string[])[i]}
-                                        {...cellRest}
                                     >
-                                        {#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 renderers.html && htmlTag in renderers.html}
-                                                {@const HtmlComponent =
-                                                    renderers.html[
-                                                        htmlTag as keyof typeof renderers.html
-                                                    ]}
-                                                {#if HtmlComponent}
-                                                    <HtmlComponent {...token}>
-                                                        {#if token.tokens?.length}
-                                                            <Parser
-                                                                tokens={token.tokens}
-                                                                {renderers}
-                                                                {...Object.fromEntries(
-                                                                    Object.entries(
-                                                                        localRest
-                                                                    ).filter(
-                                                                        ([key]) =>
-                                                                            key !== 'attributes'
-                                                                    )
-                                                                )}
-                                                            />
-                                                        {/if}
-                                                    </HtmlComponent>
-                                                {/if}
-                                            {/if}
-                                        {:else}
-                                            <Parser tokens={cells.tokens} {renderers} />
-                                        {/if}
+                                        {#each cells.tokens ?? [] as cellToken, index (index)}
+                                            <Parser {...cellRest} {...cellToken} {renderers} />
+                                        {/each}
                                     </renderers.tablecell>
                                 {/each}
                             </renderers.tablerow>

package/dist/renderers/html/Br.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+    interface Props {
+        attributes?: Record<string, any> // eslint-disable-line @typescript-eslint/no-explicit-any
+    }
+
+    const { attributes = {} }: Props = $props()
+</script>
+
+<br {...attributes} />

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

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

package/dist/renderers/html/index.js

@@ -8,6 +8,7 @@ import B from './B.svelte';
 import Bdi from './Bdi.svelte';
 import Bdo from './Bdo.svelte';
 import Blockquote from './Blockquote.svelte';
+import Br from './Br.svelte';
 import Button from './Button.svelte';
 import Canvas from './Canvas.svelte';
 import Cite from './Cite.svelte';
@@ -91,6 +92,7 @@ export const Html = {
     bdi: Bdi,
     bdo: Bdo,
     blockquote: Blockquote,
+    br: Br,
     button: Button,
     canvas: Canvas,
     cite: Cite,

package/dist/utils/token-cleanup.d.ts

@@ -94,6 +94,7 @@ export declare const containsMultipleTags: (html: string) => boolean;
  *
  * Key features:
  * - Breaks down complex HTML structures into atomic tokens
+ * - Formats self-closing tags with proper syntax (e.g., <br> -> <br/>)
  * - Maintains attribute information
  * - Preserves proper nesting relationships
  * - Handles malformed HTML gracefully

package/dist/utils/token-cleanup.js

@@ -12,6 +12,11 @@ import * as htmlparser2 from 'htmlparser2';
  */
 const HTML_TAG_PATTERN = /<\/?([a-zA-Z][a-zA-Z0-9-]{0,})(?:\s+[^>]*)?>/;
 const htmlTagRegex = new RegExp(HTML_TAG_PATTERN);
+/**
+ * Regex pattern for self-closing HTML tags.
+ * @const {RegExp}
+ */
+const SELF_CLOSING_TAGS = /^(br|hr|img|input|link|meta|area|base|col|embed|keygen|param|source|track|wbr)$/i;
 /**
  * Analyzes a string to determine if it contains an HTML tag and its characteristics.
  *
@@ -37,6 +42,33 @@ export const isHtmlOpenTag = (raw) => {
         return null;
     return { tag: match[1], isOpening: !raw.startsWith('</') };
 };
+/**
+ * Formats individual HTML tokens to ensure self-closing tags are properly formatted.
+ * This handles cases like <br> -> <br/> without affecting the token structure.
+ *
+ * @param {Token} token - HTML token to format
+ * @returns {Token} Formatted token with proper self-closing syntax
+ */
+const formatSelfClosingHtmlToken = (token) => {
+    // Extract tag name from raw HTML
+    const tagMatch = token.raw.match(/<\/?([a-zA-Z][a-zA-Z0-9-]*)/i);
+    if (!tagMatch)
+        return token;
+    const tagName = tagMatch[1];
+    if (!SELF_CLOSING_TAGS.test(tagName))
+        return token;
+    // If it's a self-closing tag and doesn't already end with />, format it properly
+    if (!token.raw.endsWith('/>')) {
+        const formattedRaw = token.raw.replace(/\s*>$/, '/>');
+        return {
+            ...token,
+            raw: formattedRaw,
+            tag: tagName,
+            attributes: extractAttributes(token.raw)
+        };
+    }
+    return token;
+};
 /**
  * Parses HTML attributes from a tag string into a structured object.
  * Handles both single and double quoted attributes.
@@ -117,7 +149,6 @@ export const extractAttributes = (raw) => {
 export const parseHtmlBlock = (html) => {
     const tokens = [];
     let currentText = '';
-    const selfClosingTags = /^(br|hr|img|input|link|meta|area|base|col|embed|keygen|param|source|track|wbr)$/i;
     const openTags = [];
     const parser = new htmlparser2.Parser({
         onopentag: (name, attributes) => {
@@ -129,8 +160,7 @@ export const parseHtmlBlock = (html) => {
                 });
                 currentText = '';
             }
-            openTags.push(name);
-            if (selfClosingTags.test(name)) {
+            if (SELF_CLOSING_TAGS.test(name)) {
                 tokens.push({
                     type: 'html',
                     raw: `<${name}${Object.entries(attributes)
@@ -141,6 +171,7 @@ export const parseHtmlBlock = (html) => {
                 });
             }
             else {
+                openTags.push(name);
                 tokens.push({
                     type: 'html',
                     raw: `<${name}${Object.entries(attributes)
@@ -165,7 +196,7 @@ export const parseHtmlBlock = (html) => {
             }
             // Only add closing tag if we found its opening tag
             // and it's not a self-closing tag
-            if (openTags.includes(name) && !selfClosingTags.test(name)) {
+            if (openTags.includes(name) && !SELF_CLOSING_TAGS.test(name)) {
                 if (html.includes(`</${name}>`)) {
                     tokens.push({
                         type: 'html',
@@ -219,6 +250,7 @@ export const containsMultipleTags = (html) => {
  *
  * Key features:
  * - Breaks down complex HTML structures into atomic tokens
+ * - Formats self-closing tags with proper syntax (e.g., <br> -> <br/>)
  * - Maintains attribute information
  * - Preserves proper nesting relationships
  * - Handles malformed HTML gracefully
@@ -251,6 +283,7 @@ export const shrinkHtmlTokens = (tokens) => {
         else if (token.type === 'table') {
             // Process header cells
             if (token.header) {
+                // @ts-expect-error: expected any
                 token.header = token.header.map((cell) => ({
                     ...cell,
                     tokens: cell.tokens ? shrinkHtmlTokens(cell.tokens) : []
@@ -258,7 +291,10 @@ export const shrinkHtmlTokens = (tokens) => {
             }
             // Process row cells
             if (token.rows) {
-                token.rows = token.rows.map((row) => row.map((cell) => ({
+                // @ts-expect-error: expected any
+                token.rows = token.rows.map((row) => 
+                // @ts-expect-error: expected any
+                row.map((cell) => ({
                     ...cell,
                     tokens: cell.tokens ? shrinkHtmlTokens(cell.tokens) : []
                 })));
@@ -269,6 +305,11 @@ export const shrinkHtmlTokens = (tokens) => {
             // Parse HTML with multiple tags into separate tokens
             result.push(...parseHtmlBlock(token.raw));
         }
+        else if (token.type === 'html') {
+            // Format self-closing tags properly (e.g., <br> -> <br/>)
+            const formattedToken = formatSelfClosingHtmlToken(token);
+            result.push(formattedToken);
+        }
         else {
             result.push(token);
         }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@humanspeak/svelte-markdown",
-    "version": "0.8.8",
+    "version": "0.8.9",
     "description": "A powerful, customizable markdown renderer for Svelte with TypeScript support",
     "keywords": [
         "svelte",
@@ -77,47 +77,47 @@
     "dependencies": {
         "github-slugger": "^2.0.0",
         "htmlparser2": "^10.0.0",
-        "marked": "^16.0.0"
+        "marked": "^16.1.1"
     },
     "devDependencies": {
         "@eslint/compat": "^1.3.1",
-        "@eslint/js": "^9.31.0",
+        "@eslint/js": "^9.32.0",
         "@playwright/test": "^1.54.1",
         "@sveltejs/adapter-auto": "^6.0.1",
-        "@sveltejs/kit": "^2.22.5",
-        "@sveltejs/package": "^2.3.12",
-        "@sveltejs/vite-plugin-svelte": "^6.0.0",
-        "@testing-library/jest-dom": "^6.6.3",
+        "@sveltejs/kit": "^2.26.1",
+        "@sveltejs/package": "^2.4.0",
+        "@sveltejs/vite-plugin-svelte": "^6.1.0",
+        "@testing-library/jest-dom": "^6.6.4",
         "@testing-library/svelte": "^5.2.8",
         "@testing-library/user-event": "^14.6.1",
-        "@types/node": "^24.0.13",
-        "@typescript-eslint/eslint-plugin": "^8.36.0",
-        "@typescript-eslint/parser": "^8.36.0",
+        "@types/node": "^24.1.0",
+        "@typescript-eslint/eslint-plugin": "^8.38.0",
+        "@typescript-eslint/parser": "^8.38.0",
         "@vitest/coverage-v8": "^3.2.4",
-        "eslint": "^9.31.0",
-        "eslint-config-prettier": "^10.1.5",
+        "eslint": "^9.32.0",
+        "eslint-config-prettier": "^10.1.8",
         "eslint-plugin-import": "^2.32.0",
-        "eslint-plugin-svelte": "^3.10.1",
+        "eslint-plugin-svelte": "^3.11.0",
         "eslint-plugin-unused-imports": "^4.1.4",
         "globals": "^16.3.0",
         "jsdom": "^26.1.0",
         "prettier": "^3.6.2",
-        "prettier-plugin-organize-imports": "^4.1.0",
+        "prettier-plugin-organize-imports": "^4.2.0",
         "prettier-plugin-svelte": "^3.4.0",
         "prettier-plugin-tailwindcss": "^0.6.14",
         "publint": "^0.3.12",
-        "svelte": "^5.35.6",
-        "svelte-check": "^4.2.2",
+        "svelte": "^5.37.0",
+        "svelte-check": "^4.3.0",
         "typescript": "^5.8.3",
-        "typescript-eslint": "^8.36.0",
-        "vite": "^7.0.4",
+        "typescript-eslint": "^8.38.0",
+        "vite": "^7.0.6",
         "vitest": "^3.2.4"
     },
     "peerDependencies": {
         "svelte": "^5.0.0"
     },
     "volta": {
-        "node": "22.17.0"
+        "node": "22.17.1"
     },
     "publishConfig": {
         "access": "public"