draftly 1.0.0-alpha.2 → 2.0.0

package/src/preview/context.ts

@@ -1,4 +1,5 @@
 import { SyntaxNode } from "@lezer/common";
+import { Highlighter } from "@lezer/highlight";
 import { ThemeEnum } from "../editor/utils";
 import { PreviewContext } from "./types";
 import DOMPurify from "dompurify";
@@ -10,11 +11,13 @@ export function createPreviewContext(
   doc: string,
   theme: ThemeEnum,
   renderChildren: (node: SyntaxNode) => Promise<string>,
-  sanitizeHtml: boolean = true
+  sanitizeHtml: boolean = true,
+  syntaxHighlighters: readonly Highlighter[] = []
 ): PreviewContext {
   return {
     doc,
     theme,
+    syntaxHighlighters,
 
     sliceDoc(from: number, to: number): string {
       return doc.slice(from, to);

package/src/preview/css-generator.ts

@@ -1,5 +1,6 @@
 import { ThemeEnum } from "../editor/utils";
 import { GenerateCSSConfig } from "./types";
+import { generateSyntaxThemeCSS } from "./syntax-theme";
 
 /**
  * Base CSS styles for preview rendering
@@ -27,7 +28,13 @@ const baseStyles = `.draftly-preview {
  * ```
  */
 export function generateCSS(config: GenerateCSSConfig = {}): string {
-  const { plugins = [], theme = ThemeEnum.AUTO, wrapperClass = "draftly-preview", includeBase = true } = config;
+  const {
+    plugins = [],
+    theme = ThemeEnum.AUTO,
+    wrapperClass = "draftly-preview",
+    includeBase = true,
+    syntaxTheme,
+  } = config;
 
   const cssChunks: string[] = [];
 
@@ -41,6 +48,12 @@ export function generateCSS(config: GenerateCSSConfig = {}): string {
     }
   }
 
+  // Collect syntax highlight styles (`tok-*` classes) from CodeMirror theme/extensions
+  const syntaxCSS = generateSyntaxThemeCSS(syntaxTheme, wrapperClass);
+  if (syntaxCSS) {
+    cssChunks.push("/* syntax-theme */\n" + syntaxCSS);
+  }
+
   // Collect styles from plugins
   for (const plugin of plugins) {
     const pluginCSS = plugin.getPreviewStyles(theme, wrapperClass);

package/src/preview/index.ts

@@ -9,9 +9,17 @@ export { preview } from "./preview";
 
 // CSS generation
 export { generateCSS } from "./css-generator";
+export { generateSyntaxThemeCSS } from "./syntax-theme";
 
 // Types
-export type { PreviewConfig, PreviewContext, GenerateCSSConfig, NodeRenderer, NodeRendererMap } from "./types";
+export type {
+	PreviewConfig,
+	PreviewContext,
+	GenerateCSSConfig,
+	SyntaxThemeInput,
+	NodeRenderer,
+	NodeRendererMap,
+} from "./types";
 
 // Utilities
 export { escapeHtml, defaultRenderers } from "./default-renderers";

package/src/preview/preview.ts

@@ -28,10 +28,11 @@ export async function preview(markdown: string, config: PreviewConfig = {}): Pro
     wrapperTag = "article",
     sanitize = true,
     theme = ThemeEnum.AUTO,
+    syntaxTheme,
   } = config;
 
   // Create renderer and generate HTML
-  const renderer = new PreviewRenderer(markdown, plugins, markdownConfig, theme, sanitize);
+  const renderer = new PreviewRenderer(markdown, plugins, markdownConfig, theme, sanitize, syntaxTheme);
   const content = await renderer.render();
 
   // Wrap in container

package/src/preview/renderer.ts

@@ -1,12 +1,14 @@
 import { SyntaxNode } from "@lezer/common";
-import { Emoji, GFM, MarkdownConfig, parser as markdownParser, Subscript, Superscript } from "@lezer/markdown";
+import { markdown, markdownLanguage } from "@codemirror/lang-markdown";
+import { MarkdownConfig } from "@lezer/markdown";
+import { languages } from "@codemirror/language-data";
 
 import { DraftlyPlugin } from "../editor/plugin";
 import { ThemeEnum } from "../editor/utils";
 import { createPreviewContext } from "./context";
 import { defaultRenderers, escapeHtml } from "./default-renderers";
+import { resolveSyntaxHighlighters } from "./syntax-theme";
 import { NodeRendererMap, PreviewContext } from "./types";
-import { foldNodeProp } from "@codemirror/language";
 
 /**
  * Renderer class that walks the syntax tree and produces HTML
@@ -17,6 +19,7 @@ export class PreviewRenderer {
   private plugins: DraftlyPlugin[];
   private markdown: MarkdownConfig[];
   private sanitizeHtml: boolean;
+  private syntaxTheme: import("./types").SyntaxThemeInput | import("./types").SyntaxThemeInput[] | undefined;
   private renderers: NodeRendererMap;
   private ctx: PreviewContext;
   private nodeToPlugins: Map<string, DraftlyPlugin[]>;
@@ -26,17 +29,21 @@ export class PreviewRenderer {
     plugins: DraftlyPlugin[] = [],
     markdown: MarkdownConfig[],
     theme: ThemeEnum = ThemeEnum.AUTO,
-    sanitize: boolean = true
+    sanitize: boolean = true,
+    syntaxTheme?: import("./types").SyntaxThemeInput | import("./types").SyntaxThemeInput[]
   ) {
     this.doc = doc;
     this.theme = theme;
     this.plugins = plugins;
     this.markdown = markdown;
     this.sanitizeHtml = sanitize;
+    this.syntaxTheme = syntaxTheme;
     this.renderers = { ...defaultRenderers };
 
+    const syntaxHighlighters = resolveSyntaxHighlighters(this.syntaxTheme, true);
+
     // Create context with reference to renderChildren
-    this.ctx = createPreviewContext(doc, theme, this.renderChildren.bind(this), sanitize);
+    this.ctx = createPreviewContext(doc, theme, this.renderChildren.bind(this), sanitize, syntaxHighlighters);
 
     // Build node-to-plugin map for O(1) lookup
     this.nodeToPlugins = this.buildNodePluginMap();
@@ -69,22 +76,16 @@ export class PreviewRenderer {
       ...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;
+    // Build parser through @codemirror/lang-markdown to match editor behavior exactly
+    const markdownSupport = markdown({
+      base: markdownLanguage,
+      codeLanguages: languages,
+      extensions,
+      addKeymap: true,
+      completeHTMLTags: true,
+      pasteURLAsLink: true,
+    });
+    const parser = markdownSupport.language.parser;
 
     // Parse the document
     const tree = parser.parse(this.doc);

package/src/preview/syntax-theme.ts

@@ -0,0 +1,110 @@
+import { classHighlighter, Highlighter } from "@lezer/highlight";
+import type { SyntaxThemeInput } from "./types";
+
+type HighlightSpec = {
+  tag?: unknown;
+  class?: string;
+  [key: string]: unknown;
+};
+
+type RuntimeHighlightStyle = {
+  specs?: HighlightSpec[];
+  style?: (tags: readonly import("@lezer/highlight").Tag[]) => string | null;
+  module?: { getRules(): string } | null;
+};
+
+const MAX_WALK_DEPTH = 8;
+
+/**
+ * Extract syntax highlight CSS from resolved CodeMirror HighlightStyle modules.
+ */
+export function generateSyntaxThemeCSS(
+  syntaxTheme: SyntaxThemeInput | SyntaxThemeInput[] | undefined,
+  _wrapperClass: string
+): string {
+  if (!syntaxTheme) return "";
+
+  const styles = extractRuntimeHighlightStyles(syntaxTheme);
+  if (!styles.length) return "";
+
+  const cssChunks: string[] = [];
+
+  for (const style of styles) {
+    const rules = style.module?.getRules();
+    if (!rules) continue;
+    cssChunks.push(rules);
+  }
+
+  if (!cssChunks.length) return "";
+
+  return Array.from(new Set(cssChunks))
+    .join("\n");
+}
+
+export function resolveSyntaxHighlighters(
+  syntaxTheme: SyntaxThemeInput | SyntaxThemeInput[] | undefined,
+  includeLegacyClassHighlighter: boolean = true
+): readonly Highlighter[] {
+  const resolved: Highlighter[] = [];
+  if (includeLegacyClassHighlighter) {
+    resolved.push(classHighlighter);
+  }
+
+  const styles = extractRuntimeHighlightStyles(syntaxTheme);
+  for (const style of styles) {
+    if (typeof style.style === "function") {
+      resolved.push(style as unknown as Highlighter);
+    }
+  }
+
+  return Array.from(new Set(resolved));
+}
+
+function extractRuntimeHighlightStyles(input: SyntaxThemeInput | SyntaxThemeInput[] | undefined): RuntimeHighlightStyle[] {
+  if (!input) return [];
+
+  const values = Array.isArray(input) ? input : [input];
+  const styles: RuntimeHighlightStyle[] = [];
+  const visited = new WeakSet<object>();
+
+  for (const value of values) {
+    walk(value, 0, visited, styles);
+  }
+
+  return styles;
+}
+
+function walk(value: unknown, depth: number, visited: WeakSet<object>, out: RuntimeHighlightStyle[]): void {
+  if (value === null || value === undefined) return;
+  if (depth > MAX_WALK_DEPTH) return;
+
+  if (isRuntimeHighlightStyle(value)) {
+    out.push(value);
+  }
+
+  if (Array.isArray(value)) {
+    for (const item of value) {
+      walk(item, depth + 1, visited, out);
+    }
+    return;
+  }
+
+  if (typeof value !== "object") return;
+  if (visited.has(value)) return;
+  visited.add(value);
+
+  const keys = Object.getOwnPropertyNames(value);
+  for (const key of keys) {
+    try {
+      walk((value as Record<string, unknown>)[key], depth + 1, visited, out);
+    } catch {
+      // Ignore inaccessible properties
+    }
+  }
+}
+
+function isRuntimeHighlightStyle(value: unknown): value is RuntimeHighlightStyle {
+  if (!value || typeof value !== "object") return false;
+  const style = value as RuntimeHighlightStyle;
+  return Array.isArray(style.specs) && typeof style.style === "function";
+}

package/src/preview/types.ts

@@ -1,6 +1,11 @@
 import { SyntaxNode } from "@lezer/common";
 import { ThemeEnum } from "../editor/utils";
 
+export type SyntaxThemeInput =
+  | import("@codemirror/language").HighlightStyle
+  | import("@codemirror/state").Extension
+  | readonly import("@codemirror/state").Extension[];
+
 /**
  * Context passed to plugin preview methods
  */
@@ -19,6 +24,9 @@ export interface PreviewContext {
 
   /** Render children of a node to HTML */
   renderChildren(node: SyntaxNode): Promise<string>;
+
+  /** Active syntax highlighters used for code rendering */
+  readonly syntaxHighlighters?: readonly import("@lezer/highlight").Highlighter[];
 }
 
 /**
@@ -42,6 +50,9 @@ export interface PreviewConfig {
 
   /** Theme to use */
   theme?: ThemeEnum;
+
+  /** CodeMirror syntax theme input used for static preview highlighting */
+  syntaxTheme?: SyntaxThemeInput | SyntaxThemeInput[];
 }
 
 /**
@@ -59,6 +70,9 @@ export interface GenerateCSSConfig {
 
   /** Include base styles */
   includeBase?: boolean;
+
+  /** CodeMirror syntax theme input used for static preview syntax highlighting */
+  syntaxTheme?: SyntaxThemeInput | SyntaxThemeInput[];
 }
 
 /**