@humanspeak/svelte-markdown 0.5.3 → 0.5.5

package/README.md

@@ -10,18 +10,10 @@ You can install it with
 npm i -S @humanspeak/svelte-markdown
 ```
 
-If you use npm or if you prefer yarn
-
-```console
-yarn add @humanspeak/svelte-markdown
-```
-
-If you're using Sapper you might need to install it as a dev dependency.
-
 ## Usage
 
-```html
-<script>
+```svelte
+<script lang="ts">
     import SvelteMarkdown from '@humanspeak/svelte-markdown'
     const source = `
   # This is a header

package/dist/Parser.svelte

@@ -42,6 +42,7 @@
                             align={rest.align[i] || 'center'}
                             {...rest}
                         >
+                            {rest.align[i]}
                             <Parser tokens={headerItem.tokens} {renderers} />
                         </renderers.tablecell>
                     {/each}
@@ -53,7 +54,7 @@
                         {#each row ?? [] as cells, i}
                             <renderers.tablecell
                                 header={false}
-                                align={rest.align[i] || 'center'}
+                                align={rest.align[i] ?? 'center'}
                                 {...rest}
                             >
                                 <Parser tokens={cells.tokens} {renderers} />

package/dist/SvelteMarkdown.svelte

@@ -9,6 +9,7 @@
         type SvelteMarkdownOptions
     } from './utils/markdown-parser.js'
     import Parser from './Parser.svelte'
+    import { shrinkHtmlTokens } from './utils/token-cleanup.js'
 
     interface Props {
         source: Token[] | string
@@ -38,10 +39,12 @@
 
     $effect.pre(() => {
         if (Array.isArray(source)) {
-            tokens = source as Token[]
+            tokens = shrinkHtmlTokens(source) as Token[]
         } else {
             lexer = new Lexer(combinedOptions)
-            tokens = isInline ? lexer.inlineTokens(source as string) : lexer.lex(source as string)
+            tokens = shrinkHtmlTokens(
+                isInline ? lexer.inlineTokens(source as string) : lexer.lex(source as string)
+            )
         }
     })
     $effect(() => {

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

@@ -0,0 +1,6 @@
+import type { Token, TokensList } from 'marked';
+export declare const isHtmlOpenTag: (raw: string) => {
+    tag: string;
+    isOpening: boolean;
+} | null;
+export declare const shrinkHtmlTokens: (tokens: Token[] | TokensList) => Token[];

package/dist/utils/token-cleanup.js

@@ -0,0 +1,45 @@
+// Cache the regex pattern
+const HTML_TAG_PATTERN = /<\/?([a-zA-Z][a-zA-Z0-9]*).*?>/;
+export const isHtmlOpenTag = (raw) => {
+    const match = raw.match(HTML_TAG_PATTERN);
+    if (!match)
+        return null;
+    return { tag: match[1], isOpening: !raw.startsWith('</') };
+};
+export const shrinkHtmlTokens = (tokens) => {
+    const result = [];
+    const len = tokens.length;
+    for (let i = 0; i < len; i++) {
+        const currentToken = tokens[i];
+        // Handle nested tokens first
+        if ('tokens' in currentToken && currentToken.tokens) {
+            currentToken.tokens = shrinkHtmlTokens(currentToken.tokens);
+            result.push(currentToken);
+            continue;
+        }
+        // Check for HTML pattern
+        if (currentToken.type === 'html' && i + 2 < len) {
+            const openTag = isHtmlOpenTag(currentToken.raw);
+            if (openTag?.isOpening) {
+                const contentToken = tokens[i + 1];
+                const closingToken = tokens[i + 2];
+                const closeTag = isHtmlOpenTag(closingToken.raw);
+                if (contentToken.type === 'text' &&
+                    closeTag &&
+                    !closeTag.isOpening &&
+                    openTag.tag === closeTag.tag) {
+                    result.push({
+                        type: 'html',
+                        raw: currentToken.raw + contentToken.raw + closingToken.raw,
+                        text: currentToken.raw + contentToken.raw + closingToken.raw,
+                        tag: openTag.tag
+                    });
+                    i += 2;
+                    continue;
+                }
+            }
+        }
+        result.push(currentToken);
+    }
+    return result;
+};

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@humanspeak/svelte-markdown",
     "description": "A markdown renderer for Svelte",
-    "version": "0.5.3",
+    "version": "0.5.5",
     "scripts": {
         "dev": "vite dev",
         "build": "vite build && npm run package",
@@ -19,14 +19,18 @@
     },
     "repository": {
         "type": "git",
-        "url": "https://github.com/humanspeak/svelte-markdown.git"
+        "url": "git+https://github.com/humanspeak/svelte-markdown.git"
     },
     "author": "Humanspeak, Inc.",
     "license": "MIT",
     "bugs": {
         "url": "https://github.com/humanspeak/svelte-markdown/issues"
     },
-    "homepage": "https://github.com/humanspeak/svelte-markdown",
+    "tags": [
+        "svelte",
+        "markdown"
+    ],
+    "homepage": "sveltemarkdown.com",
     "files": [
         "dist",
         "!dist/**/*.test.*",
@@ -48,36 +52,36 @@
         "svelte": "^5.0.0"
     },
     "dependencies": {
+        "github-slugger": "^2.0.0",
         "marked": "^14.1.3"
     },
     "devDependencies": {
         "@eslint/eslintrc": "^3.1.0",
-        "@eslint/js": "^9.13.0",
-        "@sveltejs/kit": "^2.7.3",
+        "@eslint/js": "^9.14.0",
+        "@sveltejs/adapter-auto": "^3.3.1",
+        "@sveltejs/kit": "^2.7.4",
         "@sveltejs/package": "^2.3.7",
         "@sveltejs/vite-plugin-svelte": "^4.0.0",
-        "@testing-library/jest-dom": "^6.6.2",
+        "@testing-library/jest-dom": "^6.6.3",
         "@testing-library/svelte": "^5.2.4",
         "@testing-library/user-event": "^14.5.2",
-        "@types/node": "^22.8.4",
-        "@typescript-eslint/eslint-plugin": "^8.12.2",
-        "@typescript-eslint/parser": "^8.12.2",
+        "@types/node": "^22.8.7",
+        "@typescript-eslint/eslint-plugin": "^8.13.0",
+        "@typescript-eslint/parser": "^8.13.0",
         "@vitest/coverage-v8": "^2.1.4",
-        "eslint": "^9.13.0",
+        "eslint": "^9.14.0",
         "eslint-config-prettier": "^9.1.0",
         "eslint-plugin-svelte": "^2.46.0",
-        "github-slugger": "^2.0.0",
-        "globals": "^15.11.0",
+        "globals": "^15.12.0",
         "jsdom": "^25.0.1",
         "prettier": "^3.3.3",
         "prettier-plugin-organize-imports": "^4.1.0",
         "prettier-plugin-svelte": "^3.2.7",
         "prettier-plugin-tailwindcss": "^0.6.8",
         "publint": "^0.2.12",
-        "svelte": "^5.1.4",
+        "svelte": "^5.1.9",
         "svelte-check": "^4.0.5",
         "typescript": "^5.6.3",
-        "@sveltejs/adapter-auto": "^3.3.1",
         "vite": "^5.4.10",
         "vitest": "^2.1.4"
     },
@@ -86,4 +90,4 @@
             "cookie": "^0.7.0"
         }
     }
-}
+}