draftly 0.1.0-alpha.0 → 1.0.0-alpha.2

package/src/preview/context.ts

@@ -0,0 +1,38 @@
+import { SyntaxNode } from "@lezer/common";
+import { ThemeEnum } from "../editor/utils";
+import { PreviewContext } from "./types";
+import DOMPurify from "dompurify";
+
+/**
+ * Creates a PreviewContext for rendering
+ */
+export function createPreviewContext(
+  doc: string,
+  theme: ThemeEnum,
+  renderChildren: (node: SyntaxNode) => Promise<string>,
+  sanitizeHtml: boolean = true
+): PreviewContext {
+  return {
+    doc,
+    theme,
+
+    sliceDoc(from: number, to: number): string {
+      return doc.slice(from, to);
+    },
+
+    sanitize(html: string): string {
+      if (!sanitizeHtml) return html;
+
+      // DOMPurify works in browser; in Node, it needs jsdom
+      if (typeof window !== "undefined") {
+        return DOMPurify.sanitize(html);
+      }
+
+      // Server-side: return as-is (user should sanitize at application level)
+      // or use isomorphic-dompurify in their setup
+      return html;
+    },
+
+    renderChildren,
+  };
+}

package/src/preview/css-generator.ts

@@ -0,0 +1,51 @@
+import { ThemeEnum } from "../editor/utils";
+import { GenerateCSSConfig } from "./types";
+
+/**
+ * Base CSS styles for preview rendering
+ */
+const baseStyles = `.draftly-preview {
+  padding: 0 0.5rem;
+}`;
+
+/**
+ * Generate CSS for preview rendering
+ *
+ * @param config - CSS generation configuration
+ * @returns CSS string
+ *
+ * @example
+ * ```ts
+ * import { generateCSS } from 'draftly/preview';
+ * import { HeadingPlugin, ListPlugin } from 'draftly/plugins';
+ *
+ * const css = generateCSS({
+ *   plugins: [new HeadingPlugin(), new ListPlugin()],
+ *   theme: ThemeEnum.AUTO,
+ *   includeBase: true,
+ * });
+ * ```
+ */
+export function generateCSS(config: GenerateCSSConfig = {}): string {
+  const { plugins = [], theme = ThemeEnum.AUTO, wrapperClass = "draftly-preview", includeBase = true } = config;
+
+  const cssChunks: string[] = [];
+
+  // Include base styles
+  if (includeBase) {
+    // Replace default wrapper class if custom one is provided
+    if (wrapperClass !== "draftly-preview") {
+      cssChunks.push(baseStyles.replace(/\.draftly-preview/g, `.${wrapperClass}`));
+    } else {
+      cssChunks.push(baseStyles);
+    }
+  }
+
+  // Collect styles from plugins
+  for (const plugin of plugins) {
+    const pluginCSS = plugin.getPreviewStyles(theme, wrapperClass);
+    if (pluginCSS) cssChunks.push(`/* ${plugin.name} - ${plugin.version} */\n` + pluginCSS);
+  }
+
+  return cssChunks.join("\n\n");
+}

package/src/preview/default-renderers.ts

@@ -0,0 +1,29 @@
+import { NodeRenderer, NodeRendererMap } from "./types";
+
+/**
+ * Escape HTML special characters
+ */
+export function escapeHtml(text: string): string {
+  return text
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+}
+
+// ============================================
+// DEFAULT RENDERERS
+// ============================================
+
+const renderDocument: NodeRenderer = (_node, children) => {
+  return children;
+};
+
+/**
+ * Default node renderers for all markdown node types
+ */
+export const defaultRenderers: NodeRendererMap = {
+  // Document structure
+  Document: renderDocument,
+};

package/src/preview/index.ts

@@ -0,0 +1,20 @@
+/**
+ * draftly/preview - Static HTML rendering for markdown
+ *
+ * @packageDocumentation
+ */
+
+// Main preview function
+export { preview } from "./preview";
+
+// CSS generation
+export { generateCSS } from "./css-generator";
+
+// Types
+export type { PreviewConfig, PreviewContext, GenerateCSSConfig, NodeRenderer, NodeRendererMap } from "./types";
+
+// Utilities
+export { escapeHtml, defaultRenderers } from "./default-renderers";
+
+// Renderer class (for advanced usage)
+export { PreviewRenderer } from "./renderer";

package/src/preview/preview.ts

@@ -0,0 +1,40 @@
+import { ThemeEnum } from "../editor/utils";
+import { PreviewRenderer } from "./renderer";
+import { PreviewConfig } from "./types";
+
+/**
+ * Render markdown to semantic HTML
+ *
+ * @param markdown - Markdown string to render
+ * @param config - Preview configuration
+ * @returns HTML string
+ *
+ * @example
+ * ```ts
+ * import { preview } from 'draftly/preview';
+ * import { HeadingPlugin, ListPlugin } from 'draftly/plugins';
+ *
+ * const html = preview('# Hello World', {
+ *   plugins: [new HeadingPlugin(), new ListPlugin()],
+ *   wrapperClass: 'draftly-preview',
+ * });
+ * ```
+ */
+export async function preview(markdown: string, config: PreviewConfig = {}): Promise<string> {
+  const {
+    plugins = [],
+    markdown: markdownConfig = [],
+    wrapperClass = "draftly-preview",
+    wrapperTag = "article",
+    sanitize = true,
+    theme = ThemeEnum.AUTO,
+  } = config;
+
+  // Create renderer and generate HTML
+  const renderer = new PreviewRenderer(markdown, plugins, markdownConfig, theme, sanitize);
+  const content = await renderer.render();
+
+  // Wrap in container
+  const classAttr = wrapperClass ? ` class="${wrapperClass}"` : "";
+  return `<${wrapperTag}${classAttr}>\n${content}</${wrapperTag}>`;
+}

package/src/preview/renderer.ts

@@ -0,0 +1,157 @@
+import { SyntaxNode } from "@lezer/common";
+import { Emoji, GFM, MarkdownConfig, parser as markdownParser, Subscript, Superscript } from "@lezer/markdown";
+
+import { DraftlyPlugin } from "../editor/plugin";
+import { ThemeEnum } from "../editor/utils";
+import { createPreviewContext } from "./context";
+import { defaultRenderers, escapeHtml } from "./default-renderers";
+import { NodeRendererMap, PreviewContext } from "./types";
+import { foldNodeProp } from "@codemirror/language";
+
+/**
+ * Renderer class that walks the syntax tree and produces HTML
+ */
+export class PreviewRenderer {
+  private doc: string;
+  private theme: ThemeEnum;
+  private plugins: DraftlyPlugin[];
+  private markdown: MarkdownConfig[];
+  private sanitizeHtml: boolean;
+  private renderers: NodeRendererMap;
+  private ctx: PreviewContext;
+  private nodeToPlugins: Map<string, DraftlyPlugin[]>;
+
+  constructor(
+    doc: string,
+    plugins: DraftlyPlugin[] = [],
+    markdown: MarkdownConfig[],
+    theme: ThemeEnum = ThemeEnum.AUTO,
+    sanitize: boolean = true
+  ) {
+    this.doc = doc;
+    this.theme = theme;
+    this.plugins = plugins;
+    this.markdown = markdown;
+    this.sanitizeHtml = sanitize;
+    this.renderers = { ...defaultRenderers };
+
+    // Create context with reference to renderChildren
+    this.ctx = createPreviewContext(doc, theme, this.renderChildren.bind(this), sanitize);
+
+    // Build node-to-plugin map for O(1) lookup
+    this.nodeToPlugins = this.buildNodePluginMap();
+  }
+
+  /**
+   * Build a map from node names to plugins that handle them
+   */
+  private buildNodePluginMap(): Map<string, DraftlyPlugin[]> {
+    const map = new Map<string, DraftlyPlugin[]>();
+    for (const plugin of this.plugins) {
+      if (plugin.renderToHTML && plugin.requiredNodes.length > 0) {
+        for (const nodeName of plugin.requiredNodes) {
+          const list = map.get(nodeName) || [];
+          list.push(plugin);
+          map.set(nodeName, list);
+        }
+      }
+    }
+    return map;
+  }
+
+  /**
+   * Render the document to HTML
+   */
+  async render(): Promise<string> {
+    // Collect markdown extensions from plugins
+    const extensions = [
+      ...this.markdown,
+      ...this.plugins.map((p) => p.getMarkdownConfig()).filter((ext): ext is NonNullable<typeof ext> => ext !== null),
+    ];
+
+    // Use GFM extensions to match the editor (markdownLanguage includes GFM by default)
+    // GFM includes: Table, TaskList, Strikethrough, Autolink
+    const baseParser = markdownParser.configure([
+      GFM,
+      Subscript,
+      Superscript,
+      Emoji,
+      {
+        props: [
+          foldNodeProp.add({
+            Table: (tree, state) => ({ from: state.doc.lineAt(tree.from).to, to: tree.to }),
+          }),
+        ],
+      },
+    ]);
+    const parser = extensions.length > 0 ? baseParser.configure(extensions) : baseParser;
+
+    // Parse the document
+    const tree = parser.parse(this.doc);
+
+    // Render from root
+    return await this.renderNode(tree.topNode);
+  }
+
+  /**
+   * Render a single node to HTML
+   */
+  private async renderNode(node: SyntaxNode): Promise<string> {
+    // Get plugins that handle this node type (O(1) lookup)
+    const plugins = this.nodeToPlugins.get(node.name);
+    if (plugins) {
+      for (const plugin of plugins) {
+        const children = await this.renderChildren(node);
+        const result = await plugin.renderToHTML!(node, children, this.ctx);
+        if (result !== null) {
+          return result;
+        }
+      }
+    }
+
+    // Use default renderer
+    const renderer = this.renderers[node.name];
+    if (renderer) {
+      const children = await this.renderChildren(node);
+      return renderer(node, children, this.ctx);
+    }
+
+    // Unknown node - render children or text
+    if (node.firstChild) {
+      return await this.renderChildren(node);
+    }
+
+    // Leaf node - return text content
+    return this.ctx.sliceDoc(node.from, node.to);
+  }
+
+  /**
+   * Render all children of a node, including text between nodes
+   */
+  private async renderChildren(node: SyntaxNode): Promise<string> {
+    let result = "";
+    let pos = node.from; // Track position to find text gaps
+    let child = node.firstChild;
+
+    while (child) {
+      // Add any text between the last position and this child
+      if (child.from > pos) {
+        result += escapeHtml(this.ctx.sliceDoc(pos, child.from));
+      }
+
+      // Render the child node
+      result += await this.renderNode(child);
+
+      // Update position to end of this child
+      pos = child.to;
+      child = child.nextSibling;
+    }
+
+    // Add any trailing text after the last child
+    if (pos < node.to) {
+      result += escapeHtml(this.ctx.sliceDoc(pos, node.to));
+    }
+
+    return result;
+  }
+}

package/src/preview/types.ts

@@ -0,0 +1,72 @@
+import { SyntaxNode } from "@lezer/common";
+import { ThemeEnum } from "../editor/utils";
+
+/**
+ * Context passed to plugin preview methods
+ */
+export interface PreviewContext {
+  /** Full document text */
+  readonly doc: string;
+
+  /** Current theme */
+  readonly theme: ThemeEnum;
+
+  /** Slice document text between positions */
+  sliceDoc(from: number, to: number): string;
+
+  /** Sanitize HTML content (for HTMLBlock/HTMLTag) */
+  sanitize(html: string): string;
+
+  /** Render children of a node to HTML */
+  renderChildren(node: SyntaxNode): Promise<string>;
+}
+
+/**
+ * Configuration for the preview renderer
+ */
+export interface PreviewConfig {
+  /** Plugins to use for rendering */
+  plugins?: import("../editor/plugin").DraftlyPlugin[];
+
+  /** Markdown extensions to use for rendering */
+  markdown?: import("@lezer/markdown").MarkdownConfig[];
+
+  /** CSS class for the wrapper element */
+  wrapperClass?: string;
+
+  /** HTML tag for the wrapper element */
+  wrapperTag?: "article" | "div" | "section";
+
+  /** Whether to sanitize HTML blocks (default: true) */
+  sanitize?: boolean;
+
+  /** Theme to use */
+  theme?: ThemeEnum;
+}
+
+/**
+ * Result of CSS generation
+ */
+export interface GenerateCSSConfig {
+  /** Plugins to extract styles from */
+  plugins?: import("../editor/plugin").DraftlyPlugin[];
+
+  /** Theme to use */
+  theme?: ThemeEnum;
+
+  /** Wrapper class for scoping (default: "draftly-preview") */
+  wrapperClass?: string;
+
+  /** Include base styles */
+  includeBase?: boolean;
+}
+
+/**
+ * Node renderer function type
+ */
+export type NodeRenderer = (node: SyntaxNode, children: string, ctx: PreviewContext) => string;
+
+/**
+ * Map of node names to their renderers
+ */
+export type NodeRendererMap = Record<string, NodeRenderer>;

package/src/plugins/plugins.ts

@@ -1,9 +0,0 @@
-import { DraftlyPlugin } from "../plugin";
-import { HeadingPlugin } from "./heading-plugin";
-import { InlinePlugin } from "./inline-plugin";
-import { ListPlugin } from "./list-plugin";
-import { HTMLPlugin } from "./html-plugin";
-
-const defaultPlugins: DraftlyPlugin[] = [new HeadingPlugin(), new InlinePlugin(), new ListPlugin(), new HTMLPlugin()];
-
-export { defaultPlugins };

package/src/theme.ts

@@ -1,86 +0,0 @@
-import { EditorView } from "@codemirror/view";
-import { HighlightStyle } from "@codemirror/language";
-
-export const highlightStyle = HighlightStyle.define([]);
-
-/**
- * Base theme for draftly styling
- * Note: Layout styles are scoped under .cm-draftly-enabled which is added by the view plugin
- */
-export const draftlyBaseTheme = EditorView.baseTheme({
-  // Container styles - only apply when view plugin is enabled
-  "&.cm-draftly-enabled": {
-    fontSize: "16px",
-    lineHeight: "1.6",
-  },
-
-  "&.cm-draftly-enabled .cm-content": {
-    maxWidth: "48rem",
-    margin: "0 auto",
-    fontFamily: "var(--font-sans, sans-serif)",
-    fontSize: "16px",
-    lineHeight: "1.6",
-  },
-
-  // Inline code
-  ".cm-draftly-inline-code": {
-    fontFamily: "var(--font-mono, monospace)",
-    fontSize: "0.9em",
-    backgroundColor: "rgba(175, 184, 193, 0.2)",
-    padding: "0.1em 0.3em",
-    borderRadius: "4px",
-  },
-  ".cm-draftly-code-mark": {
-    opacity: "0.4",
-  },
-
-  // Links
-  ".cm-draftly-link": {
-    color: "#0969da",
-    textDecoration: "none",
-  },
-  ".cm-draftly-link:hover": {
-    textDecoration: "underline",
-  },
-  ".cm-draftly-url": {
-    opacity: "0.6",
-    fontSize: "0.9em",
-  },
-
-  // Images (placeholder styling)
-  ".cm-draftly-image": {
-    color: "#8250df",
-  },
-
-  // Code blocks
-  ".cm-draftly-fenced-code": {
-    fontFamily: "var(--font-mono, monospace)",
-    fontSize: "0.9em",
-  },
-  ".cm-draftly-line-code": {
-    backgroundColor: "rgba(175, 184, 193, 0.15)",
-    borderRadius: "0",
-  },
-  ".cm-draftly-code-info": {
-    color: "#6e7781",
-    fontStyle: "italic",
-  },
-
-  // Blockquote
-  ".cm-draftly-line-blockquote": {
-    borderLeft: "3px solid #d0d7de",
-    paddingLeft: "1em",
-    color: "#656d76",
-  },
-  ".cm-draftly-quote-mark": {
-    opacity: "0.4",
-  },
-
-  // Horizontal rule
-  ".cm-draftly-line-hr": {
-    textAlign: "center",
-  },
-  ".cm-draftly-hr": {
-    opacity: "0.4",
-  },
-});

package/src/utils.ts

@@ -1,21 +0,0 @@
-import { EditorView } from "@codemirror/view";
-
-/**
- * Check if cursor is within the given range
- */
-export function cursorInRange(view: EditorView, from: number, to: number): boolean {
-  const selection = view.state.selection.main;
-  return selection.from <= to && selection.to >= from;
-}
-
-/**
- * Check if any selection overlaps with the given range
- */
-export function selectionOverlapsRange(view: EditorView, from: number, to: number): boolean {
-  for (const range of view.state.selection.ranges) {
-    if (range.from <= to && range.to >= from) {
-      return true;
-    }
-  }
-  return false;
-}