@wireweave/markdown-plugin 1.0.0

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`;
+    };
+  };
+}