@wireweave/markdown-plugin 1.1.0-beta.3 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wireweave/markdown-plugin",
-  "version": "1.1.0-beta.3",
+  "version": "1.1.0",
   "description": "Markdown plugins for wireweave",
   "type": "module",
   "main": "dist/index.js",
@@ -30,7 +30,7 @@
   },
   "files": [
     "dist",
-    "README.md"
+    "src"
   ],
   "scripts": {
     "build": "tsup",

package/src/index.ts

@@ -0,0 +1,163 @@
+/**
+ * @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

@@ -0,0 +1,43 @@
+/**
+ * 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

@@ -0,0 +1,34 @@
+/**
+ * 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

@@ -0,0 +1,84 @@
+/**
+ * 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`;
+    };
+  };
+}