@wireweave/markdown-plugin 1.1.0 → 1.2.1-beta.1

package/README.md

@@ -32,7 +32,8 @@ import { markdownItWireframe } from '@wireweave/markdown-plugin';
 
 const md = new MarkdownIt();
 md.use(markdownItWireframe, {
-  format: 'svg-img',  // or 'html', 'svg'
+  format: 'svg-img',  // or 'html', 'html-preview', 'svg'
+  theme: 'light',     // or 'dark'
 });
 
 const html = md.render(`
@@ -59,6 +60,7 @@ import { markedWireframe } from '@wireweave/markdown-plugin';
 
 marked.use(markedWireframe({
   format: 'svg-img',
+  theme: 'light',
 }));
 
 const html = marked.parse(`
@@ -79,6 +81,7 @@ import { remarkableWireframe } from '@wireweave/markdown-plugin';
 const md = new Remarkable();
 remarkableWireframe(md, {
   format: 'svg-img',
+  theme: 'light',
 });
 
 const html = md.render(`
@@ -94,15 +97,19 @@ All plugins accept the same options:
 
 | Option | Type | Default | Description |
 |--------|------|---------|-------------|
-| `format` | `'html' \| 'svg' \| 'svg-img'` | `'svg-img'` | Output format |
+| `format` | `'html' \| 'html-preview' \| 'svg' \| 'svg-img'` | `'svg-img'` | Output format |
+| `theme` | `'light' \| 'dark'` | `'light'` | Theme for rendering |
 | `containerClass` | `string` | `'wireframe-container'` | CSS class for wrapper div |
 | `errorHandling` | `'code' \| 'error' \| 'both'` | `'both'` | How to handle parse errors |
+| `containerWidth` | `number` | `0` | Container width for preview scaling (0 = no scaling) |
+| `maxScale` | `number` | `1` | Maximum scale factor (prevents upscaling beyond this value) |
 
 ### Output Formats
 
 - **`svg-img`** (default): Base64-encoded SVG in an `<img>` tag. Best for compatibility.
 - **`svg`**: Inline SVG. Allows CSS styling but may conflict with page styles.
 - **`html`**: Full HTML/CSS rendering. Interactive but may conflict with page styles.
+- **`html-preview`**: HTML with preview container that supports scaling to fit container width.
 
 ### Error Handling
 
@@ -120,8 +127,10 @@ import { renderWireframe } from '@wireweave/markdown-plugin';
 const html = renderWireframe(`
   page { button "Click" primary }
 `, {
-  format: 'svg',
+  format: 'html-preview',
+  theme: 'light',
   containerClass: 'my-wireframe',
+  containerWidth: 600,  // Scale to fit 600px width
 });
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wireweave/markdown-plugin",
-  "version": "1.1.0",
+  "version": "1.2.1-beta.1",
   "description": "Markdown plugins for wireweave",
   "type": "module",
   "main": "dist/index.js",
@@ -30,7 +30,7 @@
   },
   "files": [
     "dist",
-    "src"
+    "README.md"
   ],
   "scripts": {
     "build": "tsup",
@@ -56,7 +56,7 @@
     }
   },
   "dependencies": {
-    "@wireweave/core": "1.1.0-beta.0"
+    "@wireweave/core": "^1.4.1"
   },
   "devDependencies": {
     "@release-it/conventional-changelog": "^10.0.4",

package/src/index.ts

@@ -1,163 +0,0 @@
-/**
- * @wireweave/markdown-plugin
- *
- * Markdown plugins for wireweave
- */
-
-import {
-  parse,
-  render,
-  renderToSvg,
-  resolveViewport,
-  wrapInPreviewContainer,
-} from '@wireweave/core';
-
-export interface WireframePluginOptions {
-  /**
-   * Output format
-   * - 'html': HTML/CSS rendering (inline styles)
-   * - 'html-preview': HTML with preview container (supports scaling)
-   * - 'svg': SVG image
-   * - 'svg-img': base64 encoded img tag
-   */
-  format?: 'html' | 'html-preview' | 'svg' | 'svg-img';
-
-  /**
-   * Theme for rendering
-   * - 'light': Light theme
-   * - 'dark': Dark theme
-   */
-  theme?: 'light' | 'dark';
-
-  /**
-   * Container class for wrapping SVG/HTML
-   */
-  containerClass?: string;
-
-  /**
-   * Error handling mode
-   * - 'code': Show original code
-   * - 'error': Show error message
-   * - 'both': Show both
-   */
-  errorHandling?: 'code' | 'error' | 'both';
-
-  /**
-   * Container width for preview scaling (in pixels)
-   * When set, the wireframe will be scaled to fit this width
-   */
-  containerWidth?: number;
-
-  /**
-   * Maximum scale factor (default: 1)
-   * Prevents the preview from being scaled up beyond this value
-   */
-  maxScale?: number;
-}
-
-const defaultOptions: Required<WireframePluginOptions> = {
-  format: 'svg-img',
-  theme: 'light',
-  containerClass: 'wireframe-container',
-  errorHandling: 'both',
-  containerWidth: 0, // 0 means no scaling
-  maxScale: 1,
-};
-
-/**
- * Render wireframe code to output format
- */
-export function renderWireframe(
-  code: string,
-  options: WireframePluginOptions = {}
-): string {
-  const opts = { ...defaultOptions, ...options };
-
-  try {
-    const doc = parse(code);
-
-    switch (opts.format) {
-      case 'html': {
-        const { html, css } = render(doc, { theme: opts.theme });
-        return `
-          <div class="${opts.containerClass}">
-            <style>${css}</style>
-            ${html}
-          </div>
-        `.trim();
-      }
-
-      case 'html-preview': {
-        const { html, css } = render(doc, { theme: opts.theme });
-        const firstPage = doc.children[0];
-        const viewport = resolveViewport(firstPage?.viewport, firstPage?.device);
-
-        const previewHtml = wrapInPreviewContainer(html, viewport, {
-          darkMode: opts.theme === 'dark',
-          containerWidth: opts.containerWidth > 0 ? opts.containerWidth : undefined,
-        });
-
-        return `
-          <div class="${opts.containerClass}">
-            <style>${css}</style>
-            ${previewHtml}
-          </div>
-        `.trim();
-      }
-
-      case 'svg': {
-        const { svg } = renderToSvg(doc);
-        return `<div class="${opts.containerClass}">${svg}</div>`;
-      }
-
-      case 'svg-img':
-      default: {
-        const { svg } = renderToSvg(doc);
-        // Use btoa for browser compatibility, Buffer for Node.js
-        const base64 =
-          typeof Buffer !== 'undefined'
-            ? Buffer.from(svg).toString('base64')
-            : btoa(svg);
-        return `
-          <div class="${opts.containerClass}">
-            <img src="data:image/svg+xml;base64,${base64}" alt="Wireframe" />
-          </div>
-        `.trim();
-      }
-    }
-  } catch (error) {
-    return renderError(code, error as Error, opts);
-  }
-}
-
-function renderError(
-  code: string,
-  error: Error,
-  options: Required<WireframePluginOptions>
-): string {
-  const errorHtml = `<pre class="wireframe-error">${escapeHtml(error.message)}</pre>`;
-  const codeHtml = `<pre class="wireframe-source"><code>${escapeHtml(code)}</code></pre>`;
-
-  switch (options.errorHandling) {
-    case 'code':
-      return codeHtml;
-    case 'error':
-      return errorHtml;
-    case 'both':
-    default:
-      return `<div class="${options.containerClass} wireframe-error-container">${errorHtml}${codeHtml}</div>`;
-  }
-}
-
-function escapeHtml(text: string): string {
-  return text
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;')
-    .replace(/'/g, '&#039;');
-}
-
-export { markdownItWireframe } from './markdown-it';
-export { markedWireframe } from './marked';
-export { remarkableWireframe } from './remarkable';

package/src/markdown-it.ts

@@ -1,43 +0,0 @@
-/**
- * markdown-it plugin for wireweave
- */
-
-import type MarkdownIt from 'markdown-it';
-import { renderWireframe, WireframePluginOptions } from './index';
-
-/**
- * markdown-it plugin
- *
- * @example
- * ```typescript
- * import MarkdownIt from 'markdown-it';
- * import { markdownItWireframe } from '@wireweave/markdown-plugin/markdown-it';
- *
- * const md = new MarkdownIt();
- * md.use(markdownItWireframe, { format: 'svg' });
- *
- * const html = md.render('```wireframe\npage { text "Hello" }\n```');
- * ```
- */
-export function markdownItWireframe(
-  md: MarkdownIt,
-  options: WireframePluginOptions = {}
-): void {
-  const defaultFence = md.renderer.rules.fence;
-
-  md.renderer.rules.fence = (tokens, idx, opts, env, self) => {
-    const token = tokens[idx];
-    const info = token.info.trim();
-
-    if (info === 'wireframe' || info === 'wf') {
-      return renderWireframe(token.content, options);
-    }
-
-    // Use default renderer for other code blocks
-    if (defaultFence) {
-      return defaultFence(tokens, idx, opts, env, self);
-    }
-
-    return `<pre><code class="language-${info}">${md.utils.escapeHtml(token.content)}</code></pre>`;
-  };
-}

package/src/marked.ts

@@ -1,34 +0,0 @@
-/**
- * marked extension for wireweave
- */
-
-import type { MarkedExtension, Tokens } from 'marked';
-import { renderWireframe, WireframePluginOptions } from './index';
-
-/**
- * marked extension
- *
- * @example
- * ```typescript
- * import { marked } from 'marked';
- * import { markedWireframe } from '@wireweave/markdown-plugin/marked';
- *
- * marked.use(markedWireframe({ format: 'svg' }));
- *
- * const html = marked.parse('```wireframe\npage { text "Hello" }\n```');
- * ```
- */
-export function markedWireframe(
-  options: WireframePluginOptions = {}
-): MarkedExtension {
-  return {
-    renderer: {
-      code(token: Tokens.Code): string | false {
-        if (token.lang === 'wireframe' || token.lang === 'wf') {
-          return renderWireframe(token.text, options);
-        }
-        return false; // Use default renderer
-      },
-    },
-  };
-}

package/src/remarkable.ts

@@ -1,84 +0,0 @@
-/**
- * remarkable plugin for wireweave
- */
-
-import { renderWireframe, WireframePluginOptions } from './index';
-
-// Type declarations for remarkable (no @types/remarkable available)
-interface RemarkableToken {
-  type: string;
-  params: string;
-  content: string;
-}
-
-interface RemarkableRenderer {
-  rules: {
-    fence: (
-      tokens: RemarkableToken[],
-      idx: number,
-      options: Record<string, unknown>,
-      env: Record<string, unknown>
-    ) => string;
-  };
-}
-
-interface RemarkableUtils {
-  escapeHtml: (text: string) => string;
-}
-
-interface Remarkable {
-  renderer: RemarkableRenderer;
-  utils: RemarkableUtils;
-}
-
-/**
- * remarkable plugin
- *
- * @example
- * ```typescript
- * import { Remarkable } from 'remarkable';
- * import { remarkableWireframe } from '@wireweave/markdown-plugin/remarkable';
- *
- * const md = new Remarkable();
- * md.use(remarkableWireframe({ format: 'svg' }));
- *
- * const html = md.render('```wireframe\npage { text "Hello" }\n```');
- * ```
- */
-/**
- * Escape HTML entities
- */
-function escapeHtml(text: string): string {
-  return text
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;');
-}
-
-export function remarkableWireframe(
-  options: WireframePluginOptions = {}
-): (md: Remarkable) => void {
-  return (md: Remarkable) => {
-    const rules = md.renderer.rules;
-
-    // Override fence rule completely
-    rules.fence = (
-      tokens: RemarkableToken[],
-      idx: number,
-      _opts: Record<string, unknown>,
-      _env: Record<string, unknown>
-    ): string => {
-      const token = tokens[idx];
-      const lang = token.params || '';
-
-      if (lang === 'wireframe' || lang === 'wf') {
-        return renderWireframe(token.content, options);
-      }
-
-      // Render other code blocks with syntax highlighting class
-      const langClass = lang ? ` class="language-${escapeHtml(lang)}"` : '';
-      return `<pre><code${langClass}>${escapeHtml(token.content)}</code></pre>\n`;
-    };
-  };
-}