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

package/dist/preview/index.d.ts

@@ -0,0 +1,143 @@
+import * as _lezer_markdown from '@lezer/markdown';
+import { MarkdownConfig } from '@lezer/markdown';
+import { d as DraftlyPlugin, T as ThemeEnum } from '../draftly-BLnx3uGX.js';
+import { SyntaxNode } from '@lezer/common';
+import '@codemirror/state';
+import '@codemirror/view';
+import 'style-mod';
+
+/**
+ * Context passed to plugin preview methods
+ */
+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
+ */
+interface PreviewConfig {
+    /** Plugins to use for rendering */
+    plugins?: DraftlyPlugin[];
+    /** Markdown extensions to use for rendering */
+    markdown?: _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
+ */
+interface GenerateCSSConfig {
+    /** Plugins to extract styles from */
+    plugins?: DraftlyPlugin[];
+    /** Theme to use */
+    theme?: ThemeEnum;
+    /** Wrapper class for scoping (default: "draftly-preview") */
+    wrapperClass?: string;
+    /** Include base styles */
+    includeBase?: boolean;
+}
+/**
+ * Node renderer function type
+ */
+type NodeRenderer = (node: SyntaxNode, children: string, ctx: PreviewContext) => string;
+/**
+ * Map of node names to their renderers
+ */
+type NodeRendererMap = Record<string, NodeRenderer>;
+
+/**
+ * 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',
+ * });
+ * ```
+ */
+declare function preview(markdown: string, config?: PreviewConfig): Promise<string>;
+
+/**
+ * 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,
+ * });
+ * ```
+ */
+declare function generateCSS(config?: GenerateCSSConfig): string;
+
+/**
+ * Escape HTML special characters
+ */
+declare function escapeHtml(text: string): string;
+/**
+ * Default node renderers for all markdown node types
+ */
+declare const defaultRenderers: NodeRendererMap;
+
+/**
+ * Renderer class that walks the syntax tree and produces HTML
+ */
+declare class PreviewRenderer {
+    private doc;
+    private theme;
+    private plugins;
+    private markdown;
+    private sanitizeHtml;
+    private renderers;
+    private ctx;
+    private nodeToPlugins;
+    constructor(doc: string, plugins: DraftlyPlugin[] | undefined, markdown: MarkdownConfig[], theme?: ThemeEnum, sanitize?: boolean);
+    /**
+     * Build a map from node names to plugins that handle them
+     */
+    private buildNodePluginMap;
+    /**
+     * Render the document to HTML
+     */
+    render(): Promise<string>;
+    /**
+     * Render a single node to HTML
+     */
+    private renderNode;
+    /**
+     * Render all children of a node, including text between nodes
+     */
+    private renderChildren;
+}
+
+export { type GenerateCSSConfig, type NodeRenderer, type NodeRendererMap, type PreviewConfig, type PreviewContext, PreviewRenderer, defaultRenderers, escapeHtml, generateCSS, preview };

package/dist/preview/index.js

@@ -0,0 +1,4 @@
+export { PreviewRenderer, defaultRenderers, escapeHtml, generateCSS, preview } from '../chunk-HPSMS2WB.js';
+import '../chunk-DFQYXFOP.js';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/preview/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "draftly",
-  "version": "0.1.0-alpha.0",
+  "version": "1.0.0-alpha.2",
   "description": "Core library for draftly",
   "license": "MIT",
   "repository": {
@@ -33,6 +33,9 @@
     "@lezer/highlight": "^1.2.3",
     "@lezer/markdown": "^1.6.3",
     "dompurify": "^3.3.1",
+    "katex": "^0.16.28",
+    "mermaid": "^11.12.2",
+    "style-mod": "^4.1.3",
     "zod": "^4.3.6"
   },
   "exports": {
@@ -42,6 +45,24 @@
       "require": "./dist/index.cjs",
       "default": "./dist/index.js"
     },
+    "./editor": {
+      "types": "./dist/editor/index.d.ts",
+      "import": "./dist/editor/index.js",
+      "require": "./dist/editor/index.cjs",
+      "default": "./dist/editor/index.js"
+    },
+    "./plugins": {
+      "types": "./dist/plugins/index.d.ts",
+      "import": "./dist/plugins/index.js",
+      "require": "./dist/plugins/index.cjs",
+      "default": "./dist/plugins/index.js"
+    },
+    "./preview": {
+      "types": "./dist/preview/index.d.ts",
+      "import": "./dist/preview/index.js",
+      "require": "./dist/preview/index.cjs",
+      "default": "./dist/preview/index.js"
+    },
     "./src": {
       "types": "./src/index.ts",
       "default": "./src/index.ts"

package/src/{draftly.ts → editor/draftly.ts}

@@ -1,12 +1,5 @@
 import { Extension, Prec } from "@codemirror/state";
-import {
-  drawSelection,
-  EditorView,
-  highlightActiveLine,
-  KeyBinding,
-  keymap,
-  rectangularSelection,
-} from "@codemirror/view";
+import { EditorView, highlightActiveLine, KeyBinding, keymap } from "@codemirror/view";
 import { markdown, markdownKeymap, markdownLanguage } from "@codemirror/lang-markdown";
 import type { MarkdownConfig } from "@lezer/markdown";
 import { DraftlyPlugin, PluginContext } from "./plugin";
@@ -14,7 +7,8 @@ import { createDraftlyViewExtension } from "./view-plugin";
 import { defaultKeymap, history, historyKeymap, indentWithTab } from "@codemirror/commands";
 import { indentOnInput } from "@codemirror/language";
 import { languages } from "@codemirror/language-data";
-import { defaultPlugins } from "./plugins/plugins";
+import { ThemeEnum } from "./utils";
+import { markdownResetExtension } from "./theme";
 
 /**
  * DraftlyNode: represents a node in the markdown tree
@@ -33,6 +27,12 @@ export type DraftlyNode = {
  * Configuration options for the draftly editor
  */
 export interface DraftlyConfig {
+  /** Theme */
+  theme?: ThemeEnum;
+
+  /** Weather to load base styles */
+  baseStyles?: boolean;
+
   /** Plugins to load */
   plugins?: DraftlyPlugin[];
 
@@ -57,15 +57,9 @@ export interface DraftlyConfig {
   /** Enable indent with tab */
   indentWithTab?: boolean;
 
-  /** Draw selection */
-  drawSelection?: boolean;
-
   /** Highlight active line */
   highlightActiveLine?: boolean;
 
-  /** Rectangular selection */
-  rectangularSelection?: boolean;
-
   /** Line wrapping in raw markdown mode */
   lineWrapping?: boolean;
 
@@ -96,6 +90,8 @@ export interface DraftlyConfig {
  */
 export function draftly(config: DraftlyConfig = {}): Extension[] {
   const {
+    theme: configTheme = ThemeEnum.AUTO,
+    baseStyles = true,
     plugins = [],
     extensions = [],
     keymap: configKeymap = [],
@@ -103,14 +99,12 @@ export function draftly(config: DraftlyConfig = {}): Extension[] {
     defaultKeybindings = true,
     history: configHistory = true,
     indentWithTab: configIndentWithTab = true,
-    drawSelection: configDrawSelection = true,
     highlightActiveLine: configHighlightActiveLine = true,
-    rectangularSelection: configRectangularSelection = true,
     lineWrapping: configLineWrapping = true,
     onNodesChange: configOnNodesChange = undefined,
   } = config;
 
-  const allPlugins = [...defaultPlugins, ...plugins];
+  const allPlugins = [...plugins];
 
   // Collect all extensions from plugins
   const pluginExtensions: Extension[] = [];
@@ -137,6 +131,12 @@ export function draftly(config: DraftlyConfig = {}): Extension[] {
       pluginKeymaps.push(...keys);
     }
 
+    // Collect theme via class method
+    const theme = plugin.theme;
+    if (baseStyles && theme && typeof theme === "function") {
+      pluginExtensions.push(EditorView.theme(theme(configTheme)));
+    }
+
     // Collect markdown parser extensions via class method
     const md = plugin.getMarkdownConfig();
     if (md) {
@@ -163,14 +163,15 @@ export function draftly(config: DraftlyConfig = {}): Extension[] {
     ...(defaultKeybindings ? [keymap.of(defaultKeymap)] : []),
     ...(configHistory ? [history(), keymap.of(historyKeymap)] : []),
     ...(configIndentWithTab ? [indentOnInput(), keymap.of([indentWithTab])] : []),
-    ...(configDrawSelection ? [drawSelection()] : []),
     ...(configHighlightActiveLine && disableViewPlugin ? [highlightActiveLine()] : []),
-    ...(configRectangularSelection ? [rectangularSelection()] : []),
   ];
 
   // draftly extensions (pass plugins for decoration support)
   const draftlyExtensions: Extension[] = [];
-  if (!disableViewPlugin) draftlyExtensions.push(createDraftlyViewExtension(allPlugins, configOnNodesChange));
+  if (!disableViewPlugin) {
+    draftlyExtensions.push(createDraftlyViewExtension(configTheme, baseStyles, allPlugins, configOnNodesChange));
+    draftlyExtensions.push(Prec.highest(markdownResetExtension));
+  }
   if (!disableViewPlugin || configLineWrapping) draftlyExtensions.push(EditorView.lineWrapping);
 
   // Compose all extensions together
@@ -179,19 +180,19 @@ export function draftly(config: DraftlyConfig = {}): Extension[] {
     Prec.high(markdownSupport),
     Prec.high(keymap.of(markdownKeymap)),
 
-    // Core CodeMirror extensions
-    ...baseExtensions,
-
     // draftly view plugin for rich rendering
-    ...draftlyExtensions,
+    draftlyExtensions,
+
+    // Core CodeMirror extensions
+    baseExtensions,
 
     // Plugin extensions & keymaps
-    ...pluginExtensions,
+    pluginExtensions,
     pluginKeymaps.length > 0 ? keymap.of(pluginKeymaps) : [],
 
     // Config keymaps & extensions
     configKeymap.length > 0 ? keymap.of(configKeymap) : [],
-    ...extensions,
+    extensions,
   ];
 
   return composedExtensions;

package/src/editor/index.ts

@@ -0,0 +1,5 @@
+// Core editor
+export * from "./draftly";
+export * from "./plugin";
+export * from "./utils";
+export * from "./theme";

package/src/{plugin.ts → editor/plugin.ts}

@@ -1,7 +1,10 @@
-import { Decoration, EditorView, KeyBinding, ViewUpdate, WidgetType } from "@codemirror/view";
+import { Decoration, EditorView, KeyBinding, ViewUpdate } from "@codemirror/view";
 import { Extension, Range } from "@codemirror/state";
 import { MarkdownConfig } from "@lezer/markdown";
+import { SyntaxNode } from "@lezer/common";
 import { DraftlyConfig } from "./draftly";
+import { createTheme, ThemeEnum, ThemeStyle } from "./utils";
+import { StyleModule } from "style-mod";
 
 /**
  * Context passed to plugin lifecycle methods
@@ -51,9 +54,15 @@ export abstract class DraftlyPlugin {
   /** Plugin version (abstract - must be implemented) */
   abstract readonly version: string;
 
+  /** Decoration priority (higher = applied later) */
+  readonly decorationPriority: number = 100;
+
   /** Plugin dependencies - names of required plugins */
   readonly dependencies: string[] = [];
 
+  /** Node types this plugin handles for decorations and preview rendering */
+  readonly requiredNodes: readonly string[] = [];
+
   /** Private configuration storage */
   private _config: PluginConfig = {};
 
@@ -75,6 +84,15 @@ export abstract class DraftlyPlugin {
     return this._context;
   }
 
+  /** Plugin theme */
+  get theme(): (theme: ThemeEnum) => ThemeStyle {
+    return createTheme({
+      default: {},
+      dark: {},
+      light: {},
+    });
+  }
+
   // ============================================
   // EXTENSION METHODS (overridable by subclasses)
   // ============================================
@@ -107,14 +125,6 @@ export abstract class DraftlyPlugin {
   // DECORATION METHODS (overridable by subclasses)
   // ============================================
 
-  /**
-   * Decoration priority (higher = applied later)
-   * Override to customize priority. Default: 100
-   */
-  get decorationPriority(): number {
-    return 100;
-  }
-
   /**
    * Build decorations for the current view state
    * Override to contribute decorations to the editor
@@ -169,47 +179,67 @@ export abstract class DraftlyPlugin {
   }
 
   // ============================================
-  // ACCESSIBILITY METHODS (overridable by subclasses)
+  // PROTECTED UTILITIES (for subclasses)
   // ============================================
 
   /**
-   * Return ARIA attributes to add to the editor
-   * Override to improve accessibility
+   * Helper to get current editor state
+   * @param view - The EditorView instance
    */
-  getAriaAttributes(): Record<string, string> {
-    return {};
+  protected getState(view: EditorView) {
+    return view.state;
   }
 
-  // ============================================
-  // VIEW CONTRIBUTIONS (overridable by subclasses)
-  // ============================================
-
   /**
-   * Return widget types this plugin provides
-   * Override to contribute custom widgets
+   * Helper to get current document
+   * @param view - The EditorView instance
    */
-  getWidgets(): WidgetType[] {
-    return [];
+  protected getDocument(view: EditorView) {
+    return view.state.doc;
   }
 
   // ============================================
-  // PROTECTED UTILITIES (for subclasses)
+  // PREVIEW RENDERING METHODS (for draftly/preview)
   // ============================================
 
   /**
-   * Helper to get current editor state
-   * @param view - The EditorView instance
+   * Render a syntax node to HTML for preview mode
+   * Override to provide custom HTML rendering for specific node types
+   *
+   * @param node - The syntax node to render
+   * @param children - Pre-rendered children HTML
+   * @param ctx - Preview context with document and utilities
+   * @returns HTML string to use, or null to use default rendering
    */
-  protected getState(view: EditorView) {
-    return view.state;
+  renderToHTML?(
+    node: SyntaxNode,
+    children: string,
+    ctx: { sliceDoc(from: number, to: number): string; sanitize(html: string): string }
+  ): string | null | Promise<string | null>;
+
+  /**
+   * Get CSS styles for preview mode
+   * Override to provide custom CSS for preview rendering
+   *
+   * @param theme - Current theme enum
+   * @returns CSS string for preview styles
+   */
+  getPreviewStyles(theme: ThemeEnum, wrapperClass: string): string {
+    const themeStyles = this.theme(theme);
+    return this.transformToCss(themeStyles, wrapperClass);
   }
 
   /**
-   * Helper to get current document
-   * @param view - The EditorView instance
+   * Transform ThemeStyle object to CSS string for preview
+   * Uses cssClassMap to convert CM selectors to semantic selectors
    */
-  protected getDocument(view: EditorView) {
-    return view.state.doc;
+  protected transformToCss(themeStyles: ThemeStyle, wrapperClass: string): string {
+    const styleMod = new StyleModule(themeStyles, {
+      finish: (sel) => {
+        return `.${wrapperClass} ${sel}`;
+      },
+    });
+    return styleMod.getRules();
   }
 }
 
@@ -222,9 +252,7 @@ export abstract class DecorationPlugin extends DraftlyPlugin {
    * Decoration priority - lower than default for decoration plugins
    * Override to customize
    */
-  override get decorationPriority(): number {
-    return 50;
-  }
+  override decorationPriority = 50;
 
   /**
    * Subclasses must implement this to provide decorations

package/src/editor/theme.ts

@@ -0,0 +1,62 @@
+import { EditorView } from "@codemirror/view";
+
+/**
+ * Base theme for draftly styling
+ * Note: Layout styles are scoped under .cm-draftly which is added by the view plugin
+ */
+export const draftlyBaseTheme = EditorView.theme({
+  // Container styles - only apply when view plugin is enabled
+  "&.cm-draftly": {
+    fontSize: "16px",
+    lineHeight: "1.6",
+  },
+
+  "&.cm-draftly .cm-content": {
+    width: "100%",
+    maxWidth: "48rem",
+    padding: "0 0.5rem",
+    margin: "0 auto",
+    fontFamily: "var(--font-sans, sans-serif)",
+    fontSize: "16px",
+    lineHeight: "1.6",
+  },
+
+  "&.cm-draftly .cm-content .cm-line": {
+    paddingInline: 0,
+  },
+
+  "&.cm-draftly .cm-content .cm-widgetBuffer": {
+    display: "none !important",
+  },
+});
+
+import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
+import { tags as t } from "@lezer/highlight";
+
+/**
+ * Reset syntax highlighting for markdown elements
+ * Used to disable theme colors for markdown syntax
+ */
+const markdownResetStyle = HighlightStyle.define([
+  {
+    tag: [
+      t.heading,
+      t.strong,
+      t.emphasis,
+      t.strikethrough,
+      t.link,
+      t.url,
+      t.quote,
+      t.list,
+      t.meta,
+      t.contentSeparator,
+      t.labelName,
+    ],
+    color: "inherit",
+    fontWeight: "inherit",
+    fontStyle: "inherit",
+    textDecoration: "none",
+  },
+]);
+
+export const markdownResetExtension = syntaxHighlighting(markdownResetStyle, { fallback: false });