feat: add extensions support

README.md

@@ -96,6 +96,7 @@ The SvelteMarkdown component accepts the following options:
 - `source` - _string_ The Markdown source to be parsed.
 - `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`.
 - `options` - _object (optional)_ An object containing [options for Marked](https://marked.js.org/using_advanced#options)
+- `use` - _object (optional)_ An object containing [extensions for Marked]([marked.use](https://marked.js.org/using_pro#use)) 
 
 ## Events
 

src/SvelteMarkdown.svelte

@@ -1,13 +1,14 @@
 <script>
   import { setContext, createEventDispatcher, onMount } from 'svelte'
   import Parser from './Parser.svelte'
-  import { Lexer, Slugger, defaultOptions, defaultRenderers } from './markdown-parser'
+  import { Lexer, Slugger, defaultOptions, defaultRenderers, marked } from './markdown-parser'
   import { key } from './context'
 
   export let source = ''
   export let renderers = {}
   export let options = {}
   export let isInline = false
+  export let use = {}
 
   const dispatch = createEventDispatcher();
 
@@ -18,7 +19,10 @@
   $: slugger = source ? new Slugger : undefined
   $: combinedOptions = { ...defaultOptions, ...options }
   $: {
-    lexer = new Lexer(combinedOptions)
+    marked.setOptions(combinedOptions)
+    marked.use(use)
+
+    lexer = new Lexer()
 
     tokens = isInline ? lexer.inlineTokens(source) : lexer.lex(source)
 

src/markdown-parser.js

@@ -1,4 +1,4 @@
-export { Lexer, Slugger } from 'marked'
+export { Lexer, Slugger, marked } from 'marked'
 
 import {
   Heading,

tests/TestRenderer.svelte

@@ -0,0 +1,6 @@
+<script>
+  export let value = 0
+  export let message = ''
+</script>
+
+<span>{message}: {value}</span>

tests/extensions.spec.js

@@ -0,0 +1,44 @@
+import '@testing-library/jest-dom/extend-expect'
+
+import { render, screen } from '@testing-library/svelte'
+
+import SvelteMarkdown from '../src/SvelteMarkdown.svelte'
+import TestRenderer from './TestRenderer.svelte'
+
+describe('testing extensions', () => {
+  beforeAll(() => {
+    console.warn = jest.fn()
+  })
+
+  test('renders a custom token with an extension and custom component', () => {
+    const testTokenizerExtension = {
+      name: 'test',
+      level: 'inline',
+      start(src) {
+        return src.match(/\[\[/).index
+      },
+      tokenizer(src) {
+        const rule = /^\[\[test(?:(?=.*?\svalue="(.*?)".*?|.*)(?=.*?\smessage="(.*?)(?<!\\)".*?|.*).*?|\s*)\]\]/
+        const match = rule.exec(src)
+        if (match) {
+          return {
+            type: 'test',
+            raw: match[0],
+            value: match[1],
+            message: match[2],
+          }
+        }
+      },
+    }
+
+    render(SvelteMarkdown, {
+      source: '[[test value="5" message="test message"]]',
+      use: { extensions: [testTokenizerExtension] },
+      renderers: { test: TestRenderer },
+    })
+
+    const element = screen.getByText('test message', { exact: false })
+    expect(element).toBeInTheDocument()
+    expect(element).toContainHTML('<span>test message: 5</span>')
+  })
+})

types/index.d.ts

@@ -1,4 +1,5 @@
 import type {
+  marked,
   MarkedExtension as MarkedConfig,
   Tokens,
   TokensList,
@@ -71,6 +72,11 @@ type Props = {
    */
   renderers?: Partial<Renderers>
 
+  /**
+   * Parameters for the function [marked.use](https://marked.js.org/using_pro#use)
+   */
+  use?: Omit<marked.MarkedExtension, 'renderer'>[]
+
   /**
    * Options for [marked](https://marked.js.org/using_advanced#options)
    */