updated docs for 1.1.0 release

Author: deftio

README.md

@@ -9,7 +9,7 @@ Quikdown is a small, secure markdown parser with bidirectional conversion. Zero
 
 For small and fast projects quikdown includes built-in inline styles for a "batteries included" rendering experience, but these can be overridden with themed css (see light and dark examples).
 
-- **quikdown.js** (9.1KB) - Markdown to HTML Parser
+- **quikdown.js** (9.0KB) - Markdown to HTML Parser
 - **quikdown_bd.js** (13.8KB) - Bidirectional (HTML ↔ Markdown) Parser
 - **quikdown_edit.js** (37.8KB) - Drop-in editor component (HTML ↔ Markdown) with md/split/html views
 
@@ -21,7 +21,7 @@ For small and fast projects quikdown includes built-in inline styles for a "batt
 
 - 📦 **Zero dependencies** - No external libraries required
 - 🌐 **Universal** - Works in browsers and Node.js
-- 🚀 **Lightweight** - 9.1KB (core), 13.8KB (bidirectional), 37.8KB (editor)
+- 🚀 **Lightweight** - 9.0KB (core), 13.8KB (bidirectional), 37.8KB (editor)
 - 🔒 **Secure by default** - Built-in XSS protection with URL sanitization
 - 🎨 **Flexible styling** - Inline styles or CSS classes with theme support
 - 🔌 **Plugin system** - Extensible fence block handlers
@@ -108,7 +108,9 @@ quikdown supports built-in styles for a "batteries included" experience or you c
 const html = quikdown(markdown, {
   lazy_linefeeds: true,    // Single newlines become <br>
   inline_styles: false,    // Use class based CSS instead of inline styles
-  fence_plugin: myHandler  // Custom code block processor
+  fence_plugin: {          // Custom code block processor (v1.1.0+ API)
+    render: myHandler      // Function to render fence blocks
+  }
 });
 ```
 
@@ -135,18 +137,19 @@ Quikdown provides a callback for all fenced text such as code blocks, math, svg
 Handle code blocks with custom languages:
 
 ```javascript
-function fencePlugin(code, language) {
-  if (language === 'mermaid') {
-    // Process with mermaid library and return rendered diagram
-    const id = 'mermaid-' + Math.random().toString(36).substr(2, 9);
-    setTimeout(() => mermaid.render(id + '-svg', code).then(result => {
-      document.getElementById(id).innerHTML = result.svg;
-    }), 0);
-    return `<div id="${id}" class="mermaid">Loading diagram...</div>`;
+const fencePlugin = {
+  render: (code, language) => {
+    if (language === 'mermaid') {
+      // Process with mermaid library and return rendered diagram
+      const id = 'mermaid-' + Math.random().toString(36).substr(2, 9);
+      setTimeout(() => mermaid.render(id + '-svg', code).then(result => {
+        document.getElementById(id).innerHTML = result.svg;
+      }), 0);
+      return `<div id="${id}" class="mermaid">Loading diagram...</div>`;
+    }
+    // Return undefined for default handling
   }
-  return `<pre>${code}</pre>`;
-  // Return undefined for default handling
-}
+};
 
 const html = quikdown(markdown, { fence_plugin: fencePlugin });
 ```
@@ -156,18 +159,21 @@ const html = quikdown(markdown, { fence_plugin: fencePlugin });
 
 quikdown includes TypeScript definitions for better IDE support and type safety:
 
-``` javascript
-import quikdown, { QuikdownOptions } from 'quikdown';
+```typescript
+import quikdown, { QuikdownOptions, FencePlugin } from 'quikdown';
+
+const fencePlugin: FencePlugin = {
+  render: (content: string, language: string) => {
+    return `<pre class="hljs ${language}">${content}</pre>`;
+  }
+};
 
 const options: QuikdownOptions = {
-    inline_styles: true,
-    fence_plugin: (content: string, language: string) => {
-        return `<pre class="hljs ${language}">${content}</pre>`;
-    }
+  inline_styles: true,
+  fence_plugin: fencePlugin
 };
 
 const html: string = quikdown(markdown, options);
-
 ```
 
 ## Supported Markdown

dist/quikdown_bd.d.ts

@@ -10,12 +10,9 @@ declare module 'quikdown/bd' {
   export interface QuikdownBdOptions {
     /**
      * Custom renderer for fenced code blocks.
-     * Return undefined to use default rendering.
-     * @param content - The code block content (unescaped)
-     * @param language - The language identifier (or empty string)
-     * @returns HTML string or undefined for default rendering
+     * Uses the FencePlugin interface from quikdown module.
      */
-    fence_plugin?: (content: string, language: string) => string | undefined;
+    fence_plugin?: import('./quikdown').FencePlugin;
 
     /**
      * If true, uses inline styles instead of CSS classes.
@@ -107,7 +104,7 @@ declare namespace quikdown_bd {
 }
 
 export interface QuikdownBdOptions {
-  fence_plugin?: (content: string, language: string) => string | undefined;
+  fence_plugin?: import('./quikdown').FencePlugin;
   inline_styles?: boolean;
   allow_unsafe_urls?: boolean;
   bidirectional?: boolean;

docs/README.html

@@ -115,9 +115,11 @@ <h2>🔒 Security First</h2>
 
 // Trusted HTML requires explicit plugin
 const html = quikdown(markdown, {
-  fence_plugin: (content, lang) =&gt; {
-    if (lang === &#39;trusted-html&#39; &amp;&amp; isAdmin()) {
-      return content; // Only for trusted sources
+  fence_plugin: {
+    render: (content, lang) =&gt; {
+      if (lang === &#39;trusted-html&#39; &amp;&amp; isAdmin()) {
+        return content; // Only for trusted sources
+      }
     }
   }
 });

docs/README.md

@@ -55,9 +55,11 @@ const html = quikdown(userInput);
 
 // Trusted HTML requires explicit plugin
 const html = quikdown(markdown, {
-  fence_plugin: (content, lang) => {
-    if (lang === 'trusted-html' && isAdmin()) {
-      return content; // Only for trusted sources
+  fence_plugin: {
+    render: (content, lang) => {
+      if (lang === 'trusted-html' && isAdmin()) {
+        return content; // Only for trusted sources
+      }
     }
   }
 });

docs/api-reference.html

@@ -868,9 +868,21 @@ <h3>Bidirectional Module</h3>
 <h2>TypeScript</h2>
 <p>TypeScript definitions are included for both modules:</p>
 <pre><code class="language-typescript">declare module &#39;quikdown&#39; {
+  interface FencePlugin {
+    render: (content: string, language: string) =&gt; string | undefined;
+    reverse?: (element: HTMLElement) =&gt; {
+      fence: string;
+      lang: string;
+      content: string;
+    } | null;
+  }
+
   interface QuikdownOptions {
     inline_styles?: boolean;
-    fence_plugin?: (content: string, language: string) =&gt; string | undefined;
+    fence_plugin?: FencePlugin;
+    bidirectional?: boolean;
+    lazy_linefeeds?: boolean;
+    allow_unsafe_urls?: boolean;
   }
 
   interface QuikdownFunction {

docs/api-reference.md

@@ -586,9 +586,21 @@ TypeScript definitions are included for both modules:
 
 ```typescript
 declare module 'quikdown' {
+  interface FencePlugin {
+    render: (content: string, language: string) => string | undefined;
+    reverse?: (element: HTMLElement) => {
+      fence: string;
+      lang: string;
+      content: string;
+    } | null;
+  }
+
   interface QuikdownOptions {
     inline_styles?: boolean;
-    fence_plugin?: (content: string, language: string) => string | undefined;
+    fence_plugin?: FencePlugin;
+    bidirectional?: boolean;
+    lazy_linefeeds?: boolean;
+    allow_unsafe_urls?: boolean;
   }
 
   interface QuikdownFunction {

docs/framework-integration.html

@@ -628,9 +628,11 @@ <h2>TypeScript Support</h2>
 
 const options: QuikdownOptions = {
   inline_styles: true,
-  fence_plugin: (code: string, lang: string) =&gt; {
-    // Custom plugin logic
-    return `&lt;pre class=&quot;${lang}&quot;&gt;${code}&lt;/pre&gt;`;
+  fence_plugin: {
+    render: (code: string, lang: string) =&gt; {
+      // Custom plugin logic
+      return `&lt;pre class=&quot;${lang}&quot;&gt;${code}&lt;/pre&gt;`;
+    }
   }
 };
 

docs/framework-integration.md

@@ -635,9 +635,11 @@ import quikdown_bd from 'quikdown/bd';
 
 const options: QuikdownOptions = {
   inline_styles: true,
-  fence_plugin: (code: string, lang: string) => {
-    // Custom plugin logic
-    return `<pre class="${lang}">${code}</pre>`;
+  fence_plugin: {
+    render: (code: string, lang: string) => {
+      // Custom plugin logic
+      return `<pre class="${lang}">${code}</pre>`;
+    }
   }
 };
 

docs/quikdown-bidirectional.html

@@ -146,7 +146,7 @@ <h3>quikdown_bd(markdown, options)</h3>
 <ul>
 <li><code>markdown</code> (string): The Markdown source text</li>
 <li><code>options</code> (object): Optional configuration<ul>
-<li><code>fence_plugin</code> (function): Custom renderer for fenced code blocks</li>
+<li><code>fence_plugin</code> (FencePlugin): Custom renderer for fenced code blocks (object with <code>render</code> function)</li>
 <li><code>inline_styles</code> (boolean): Use inline styles instead of CSS classes</li>
 <li><code>allow_unsafe_urls</code> (boolean): Allow potentially unsafe URLs</li>
 <li><code>bidirectional</code> (boolean): Always <code>true</code> for quikdown_bd (automatically set)</li>

docs/quikdown-bidirectional.md

@@ -117,7 +117,7 @@ Convert Markdown to HTML with bidirectional support.
 **Parameters:**
 - `markdown` (string): The Markdown source text
 - `options` (object): Optional configuration
-  - `fence_plugin` (function): Custom renderer for fenced code blocks
+  - `fence_plugin` (FencePlugin): Custom renderer for fenced code blocks (object with `render` function)
   - `inline_styles` (boolean): Use inline styles instead of CSS classes
   - `allow_unsafe_urls` (boolean): Allow potentially unsafe URLs
   - `bidirectional` (boolean): Always `true` for quikdown_bd (automatically set)