Merge pull request #54 from humanspeak/0.7.-

Bugs: Fixing and updated test cases for tables

.cursorrules

@@ -2,4 +2,6 @@ When asking for python doc strings please always do it from a senior google engi
 
 When creating test cases for javascript, please use the vitest library.
 
-We are using svelte5, so please use the svelte5 syntax.
+We are using svelte5, so please use the svelte5 syntax.
+
+When adding comments to the components please use this webpage for references: https://svelte.dev/docs/svelte/faq#How-do-I-document-my-components

.github/workflows/npm-publish.yml

@@ -8,6 +8,7 @@ on:
         paths-ignore:
             - '.github/**'
             - 'docs/**'
+            - 'PRD.md'
 
 jobs:
     build:

.vscode/settings.json

@@ -11,6 +11,5 @@
     "editor.formatOnPaste": true,
     "files.exclude": {
         "**/node_modules": true,
-        "**/*.test.ts": true
     }
 }

PRD.md

@@ -0,0 +1,227 @@
+# Svelte Markdown Package
+
+## Overview
+
+@humanspeak/svelte-markdown is a powerful, customizable markdown renderer for Svelte with TypeScript support. It's built as a successor to the original svelte-markdown package by Pablo Berganza, now maintained and enhanced by Humanspeak, Inc.
+
+## Lineage
+
+1. Original Creator: Pablo Berganza (2020-2024)
+2. Current Maintainer: Humanspeak, Inc. (2024-present)
+
+## Core Features
+
+### 1. Markdown Rendering
+
+- Full markdown syntax support through Marked
+- Custom component overrides
+- HTML parsing capabilities via HTMLParser2
+- GitHub-style slug generation for headers
+
+### 2. TypeScript Support
+
+- Full TypeScript definitions
+- Type-safe component props
+- Svelte 5 compatibility
+
+### 3. Testing Infrastructure
+
+- Comprehensive unit testing with Vitest
+- Coverage reporting via Coveralls
+- Browser environment testing with JSDOM
+
+## Technical Specifications
+
+### Dependencies
+
+- Core Dependencies:
+
+    - marked: ^15.0.5
+    - github-slugger: ^2.0.0
+    - htmlparser2: ^10.0.0
+
+- Peer Dependencies:
+    - svelte: ^5.0.0
+
+### Build Configuration
+
+- Vite-based build system
+- SvelteKit package preparation
+- Source map generation
+- TypeScript compilation
+
+### Package Structure
+
+- Distribution via NPM
+- ESM module format
+- Side effects declared for CSS files
+- Source maps included
+
+### Testing Setup
+
+- Vitest configuration with extensive edge case coverage
+- JSDOM environment for DOM manipulation testing
+- Testing Library integration for component testing
+- Coverage reporting with minimum 90% threshold
+- Specialized test suites for:
+    - Malformed markdown input
+    - Unicode and special character handling
+    - Nested component scenarios
+    - Memory leak prevention
+    - Large document performance
+    - Concurrent rendering scenarios
+
+### Edge Case Handling
+
+- Input Validation
+
+    - Empty markdown strings
+    - Non-string inputs
+    - Malformed HTML within markdown
+    - Deep nested lists (>10 levels)
+    - Extended Unicode characters
+    - Zero-width spaces and invisible characters
+
+- Component Behavior
+
+    - Recursive component rendering
+    - Circular reference detection
+    - Dynamic component loading
+    - Error boundary implementation
+    - Memory management for large documents
+
+- Performance Considerations
+    - Chunked rendering for large documents
+    - Lazy loading for complex syntax
+    - Resource cleanup on unmount
+    - Debounced updates for live editing
+
+## Quality Assurance
+
+### Automated Testing
+
+- Unit tests for core functionality
+- Browser environment testing
+- Continuous Integration via GitHub Actions
+
+### Code Quality
+
+- ESLint for code quality
+- Prettier for code formatting
+- TypeScript for type safety
+
+## Distribution
+
+### Package Configuration
+
+- Scoped under @humanspeak
+- Type definitions included
+- ESM format
+- Svelte component exports
+
+### NPM Publishing
+
+- Public package under @humanspeak scope
+- Automated versioning and releases
+- Source maps included for debugging
+
+## License
+
+MIT License with dual copyright:
+
+- Copyright (c) 2024-2025 Humanspeak, Inc.
+- Copyright (c) 2020-2024 Pablo Berganza
+
+## Development Workflow
+
+### Build Process
+
+1. Development: npm run dev
+2. Testing: npm run test
+3. Building: npm run build
+4. Publishing: Automated via GitHub Actions
+
+### Contribution Guidelines
+
+- Pull requests welcome
+- Tests required for new features
+- Automated CI/CD pipeline
+- Code formatting enforced via Prettier
+
+## Future Roadmap
+
+### Planned Features
+
+1. Enhanced HTML parsing capabilities
+2. Additional markdown extensions
+3. Performance optimizations
+4. Extended component customization options
+
+### Maintenance Goals
+
+1. Regular dependency updates via Dependabot
+2. Continuous security monitoring
+3. Documentation improvements
+4. Community engagement
+
+## Support
+
+### Official Channels
+
+- GitHub Issues
+- NPM Package Page
+- Documentation Website
+
+### Commercial Support
+
+Available through Humanspeak, Inc. for enterprise customers
+
+## Migration Guide
+
+### From Svelte 4
+
+- Update to Svelte 5
+- Review component bindings
+- Check custom component implementations
+- Verify TypeScript types
+
+### From Other Markdown Libraries
+
+- Review component structure
+- Adapt custom renderers
+- Update event handlers
+- Migrate styling approaches
+
+## Implementation Priorities
+
+### Phase 1: Foundation (Completed)
+
+- Core markdown rendering with edge case handling
+- Robust syntax highlighting with fallback modes
+- Comprehensive component override system
+- Full TypeScript support with strict type checking
+- Edge case test suite implementation
+- Performance baseline measurements
+
+### Phase 2: Advanced Features (In Progress)
+
+- Math and diagram support with error handling
+- Interactive elements with accessibility support
+- Performance optimizations for large documents
+- Plugin system foundation with validation
+- Extended edge case coverage
+- Load testing infrastructure
+
+### Phase 3: Enterprise Features
+
+- Collaboration features
+- Security enhancements
+- Accessibility compliance
+- Advanced tooling
+
+### Phase 4: Ecosystem
+
+- Extended plugin library
+- Developer tools
+- Performance monitoring
+- Community features

docs/src/routes/+page.svelte

@@ -13,6 +13,12 @@ Hey there! This is a *fun* example of mixing **Markdown** and <em>HTML</em> toge
 2. Making lists (like this one!)
 3. Using emojis 🚀 ✨ 🌈
 
+| Feature | Markdown | HTML |
+|---------|:--------:|-----:|
+| Bold | **text** | <strong>text</strong> |
+| Italic | *text* | <em>text</em> |
+| Links | [text](url) | <a href="url">text</a> |
+
 Here's a quote for you:
 > "The best of both worlds" - <cite>Someone who loves markdown & HTML</cite>
 

src/lib/Parser.svelte

@@ -1,4 +1,42 @@
 <script lang="ts">
+    /**
+     * @component Parser
+     *
+     * Recursive markdown token parser that transforms tokens into Svelte components.
+     * This component is the core rendering engine of the markdown system, handling
+     * the transformation of parsed markdown tokens into their corresponding Svelte components.
+     *
+     * @example
+     * ```svelte
+     * <Parser
+     *   tokens={parsedTokens}
+     *   renderers={customRenderers}
+     *   type="paragraph"
+     * />
+     * ```
+     *
+     * Features:
+     * - Recursive token parsing
+     * - Custom renderer support
+     * - Special handling for tables, lists, and HTML content
+     * - Type-safe component rendering
+     *
+     * @typedef {Object} Props
+     * @property {string} [type] - Token type for direct component rendering
+     * @property {Token[] | TokensList} [tokens] - Markdown tokens to be rendered
+     * @property {Tokens.TableCell[]} [header] - Table header cells for table rendering
+     * @property {Tokens.TableCell[][]} [rows] - Table row cells for table rendering
+     * @property {boolean} [ordered=false] - Whether the list is ordered (for list rendering)
+     * @property {Renderers} renderers - Component mapping for markdown elements
+     *
+     * Implementation Notes:
+     * - Uses recursive rendering for nested tokens
+     * - Implements special logic for tables, lists, and HTML content
+     * - Handles component prop spreading carefully to avoid conflicts
+     * - Maintains type safety through TypeScript interfaces
+     *
+     */
+
     import Parser from './Parser.svelte'
     import Html from './renderers/html/index.js'
     import type {
@@ -44,10 +82,11 @@
             <renderers.tablehead {...rest}>
                 <renderers.tablerow {...rest}>
                     {#each header ?? [] as headerItem, i}
+                        {@const { align: _align, ...cellRest } = rest}
                         <renderers.tablecell
                             header={true}
-                            align={(rest.align as string[])[i] || 'center'}
-                            {...rest}
+                            align={(rest.align as string[])[i]}
+                            {...cellRest}
                         >
                             <Parser tokens={headerItem.tokens} {renderers} />
                         </renderers.tablecell>
@@ -58,12 +97,30 @@
                 {#each rows ?? [] as row}
                     <renderers.tablerow {...rest}>
                         {#each row ?? [] as cells, i}
+                            {@const { align: _align, ...cellRest } = rest}
                             <renderers.tablecell
                                 header={false}
-                                align={(rest.align as string[])[i] ?? 'center'}
-                                {...rest}
+                                align={(rest.align as string[])[i]}
+                                {...cellRest}
                             >
-                                <Parser tokens={cells.tokens} {renderers} />
+                                {#if cells.type === 'html'}
+                                    {@const { tag, ...localRest } = cells}
+                                    {@const htmlTag = cells.tag as keyof typeof Html}
+                                    {#if htmlTag in Html}
+                                        {@const HtmlComponent = Html[htmlTag]}
+                                        <HtmlComponent {...cells}>
+                                            {#if cells.tokens?.length}
+                                                <Parser
+                                                    tokens={cells.tokens}
+                                                    {renderers}
+                                                    {...localRest}
+                                                />
+                                            {/if}
+                                        </HtmlComponent>
+                                    {/if}
+                                {:else}
+                                    <Parser tokens={cells.tokens} {renderers} />
+                                {/if}
                             </renderers.tablecell>
                         {/each}
                     </renderers.tablerow>