draftly 0.1.0-alpha.1 → 1.0.7

package/dist/plugins/index.d.ts

@@ -1,10 +1,26 @@
-import { a as DecorationPlugin, T as ThemeEnum, f as ThemeStyle, D as DecorationContext, d as DraftlyPlugin } from '../draftly-Bxu_H4nw.js';
+import { d as DraftlyPlugin, T as ThemeEnum, f as ThemeStyle, a as DecorationPlugin, D as DecorationContext } from '../draftly-BLnx3uGX.js';
 import { SyntaxNode } from '@lezer/common';
+import { KeyBinding } from '@codemirror/view';
 import { MarkdownConfig } from '@lezer/markdown';
 import '@codemirror/state';
-import '@codemirror/view';
 import 'style-mod';
 
+/**
+ * ParagraphPlugin - Adds top and bottom padding to paragraphs in preview
+ *
+ * Applies visual spacing to markdown paragraphs for better readability
+ */
+declare class ParagraphPlugin extends DraftlyPlugin {
+    readonly name = "paragraph";
+    readonly version = "1.0.0";
+    readonly requiredNodes: readonly ["Paragraph"];
+    /**
+     * Plugin theme for preview styling
+     */
+    get theme(): (theme: ThemeEnum) => ThemeStyle;
+    renderToHTML(node: SyntaxNode, children: string): string | null;
+}
+
 /**
  * HeadingPlugin - Decorates markdown headings
  *
@@ -17,6 +33,7 @@ declare class HeadingPlugin extends DecorationPlugin {
     readonly name = "heading";
     readonly version = "1.0.0";
     decorationPriority: number;
+    readonly requiredNodes: readonly ["ATXHeading1", "ATXHeading2", "ATXHeading3", "ATXHeading4", "ATXHeading5", "ATXHeading6", "HeaderMark"];
     /**
      * Constructor - calls super constructor
      */
@@ -41,6 +58,7 @@ declare class HeadingPlugin extends DecorationPlugin {
  * - Strikethrough - ~~text~~
  * - Subscript - ~text~
  * - Superscript - ^text^
+ * - Highlight - ==text==
  *
  * Hides formatting markers when cursor is not in the element
  */
@@ -48,12 +66,21 @@ declare class InlinePlugin extends DecorationPlugin {
     readonly name = "inline";
     readonly version = "1.0.0";
     decorationPriority: number;
+    readonly requiredNodes: readonly ["Emphasis", "StrongEmphasis", "Strikethrough", "Subscript", "Superscript", "Highlight", "EmphasisMark", "StrikethroughMark", "SubscriptMark", "SuperscriptMark", "HighlightMark"];
     marks: string[];
     constructor();
     /**
      * Plugin theme
      */
     get theme(): (theme: ThemeEnum) => ThemeStyle;
+    /**
+     * Keyboard shortcuts for inline formatting
+     */
+    getKeymap(): KeyBinding[];
+    /**
+     * Return markdown parser extensions for highlight syntax (==text==)
+     */
+    getMarkdownConfig(): MarkdownConfig;
     /**
      * Build inline decorations by iterating the syntax tree
      */
@@ -65,6 +92,56 @@ declare class InlinePlugin extends DecorationPlugin {
     renderToHTML(node: SyntaxNode, children: string): string | null;
 }
 
+/**
+ * LinkPlugin - Decorates and provides interactivity for markdown links
+ *
+ * Supports the full link syntax: [text](url) and [text](url "title")
+ * - Click: reveals raw markdown (selects/focuses the link syntax)
+ * - Ctrl+Click: opens the link URL in a new browser tab
+ * - Hover: shows tooltip with the link URL
+ * - Hides the markdown syntax when cursor is not in range
+ * - Shows raw markdown when cursor is within the link range
+ */
+declare class LinkPlugin extends DecorationPlugin {
+    readonly name = "link";
+    readonly version = "1.0.0";
+    decorationPriority: number;
+    readonly requiredNodes: readonly ["Link"];
+    constructor();
+    /**
+     * Plugin theme
+     */
+    get theme(): (theme: ThemeEnum) => ThemeStyle;
+    /**
+     * Keyboard shortcuts for link formatting
+     */
+    getKeymap(): KeyBinding[];
+    /**
+     * URL regex pattern
+     */
+    private readonly urlPattern;
+    /**
+     * Toggle link on selection
+     * - If text is selected and is a URL: [](url) with cursor in brackets
+     * - If text is selected (not URL): [text]() with cursor in parentheses
+     * - If nothing selected: []() with cursor in brackets
+     * - If already a link: remove syntax, leave plain text
+     */
+    private toggleLink;
+    buildDecorations(ctx: DecorationContext): void;
+    /**
+     * Decorate raw link markdown when cursor is in range
+     */
+    private decorateRawLink;
+    /**
+     * Render link to HTML for preview mode
+     */
+    renderToHTML(node: SyntaxNode, _children: string, ctx: {
+        sliceDoc(from: number, to: number): string;
+        sanitize(html: string): string;
+    }): string | null;
+}
+
 /**
  * Decorates markdown lists with custom styling.
  *
@@ -77,7 +154,16 @@ declare class ListPlugin extends DecorationPlugin {
     readonly name = "list";
     readonly version = "1.0.0";
     decorationPriority: number;
+    readonly requiredNodes: readonly ["BulletList", "OrderedList", "ListItem", "ListMark", "Task", "TaskMarker"];
     get theme(): (theme: ThemeEnum) => ThemeStyle;
+    /**
+     * Keyboard shortcuts for list formatting
+     */
+    getKeymap(): KeyBinding[];
+    /**
+     * Toggle list marker on current line or selected lines
+     */
+    private toggleListOnLines;
     buildDecorations(ctx: DecorationContext): void;
     /** Add line decoration for list items with nesting depth */
     private decorateListItem;
@@ -122,11 +208,28 @@ declare class ImagePlugin extends DecorationPlugin {
     readonly name = "image";
     readonly version = "1.0.0";
     decorationPriority: number;
+    readonly requiredNodes: readonly ["Image"];
     constructor();
     /**
      * Plugin theme
      */
     get theme(): (theme: ThemeEnum) => ThemeStyle;
+    /**
+     * Keyboard shortcuts for image formatting
+     */
+    getKeymap(): KeyBinding[];
+    /**
+     * URL regex pattern
+     */
+    private readonly urlPattern;
+    /**
+     * Toggle image on selection
+     * - If text selected and is a URL: ![Alt Text](url) with cursor in brackets
+     * - If text selected (not URL): ![text]() with cursor in parentheses
+     * - If nothing selected: ![Alt Text]() with cursor in parentheses
+     * - If already an image: remove syntax, leave just the URL
+     */
+    private toggleImage;
     buildDecorations(ctx: DecorationContext): void;
     /**
      * Decorate raw image markdown when cursor is in range
@@ -159,6 +262,7 @@ declare class MathPlugin extends DecorationPlugin {
     readonly name = "math";
     readonly version = "1.0.0";
     decorationPriority: number;
+    readonly requiredNodes: readonly ["InlineMath", "MathBlock", "InlineMathMark", "MathBlockMark"];
     constructor();
     /**
      * Plugin theme
@@ -181,6 +285,220 @@ declare class MathPlugin extends DecorationPlugin {
     }): string | null;
 }
 
+/**
+ * MermaidPlugin - Renders mermaid diagrams in the editor
+ *
+ * Supports block mermaid syntax:
+ *   ```mermaid
+ *   graph TD
+ *     A --> B
+ *   ```
+ *
+ * Behavior:
+ * - Always show rendered diagram below the block
+ * - Hide raw definition when cursor is outside the block
+ * - Show raw definition with styled markers when cursor is inside
+ */
+declare class MermaidPlugin extends DecorationPlugin {
+    readonly name = "mermaid";
+    readonly version = "1.0.0";
+    decorationPriority: number;
+    readonly requiredNodes: readonly ["MermaidBlock", "MermaidBlockMark"];
+    constructor();
+    /**
+     * Plugin theme
+     */
+    get theme(): (theme: ThemeEnum) => ThemeStyle;
+    /**
+     * Return markdown parser extensions for mermaid syntax
+     */
+    getMarkdownConfig(): MarkdownConfig;
+    /**
+     * Build decorations for mermaid blocks
+     */
+    buildDecorations(ctx: DecorationContext): void;
+    /**
+     * Render mermaid to HTML for preview mode
+     *
+     * Renders the actual mermaid diagram to SVG HTML
+     */
+    renderToHTML(node: SyntaxNode, _children: string, ctx: {
+        sliceDoc(from: number, to: number): string;
+        sanitize(html: string): string;
+    }): Promise<string | null>;
+}
+
+/**
+ * Text highlight definition
+ * Matches text or regex patterns with optional instance selection
+ */
+interface TextHighlight {
+    /** The pattern to match (regex without slashes) */
+    pattern: string;
+    /** Specific instances to highlight (e.g., [3,5] or range [3,4,5]) */
+    instances?: number[];
+}
+/**
+ * Properties extracted from CodeInfo string
+ *
+ * Example: ```tsx line-numbers{5} title="hello.tsx" caption="Example" copy {2-4,5} /Hello/3-5
+ */
+interface CodeBlockProperties {
+    /** Language identifier (first token) */
+    language: string;
+    /** Show line numbers, optionally starting from a specific number */
+    lineNumbers?: number | boolean;
+    /** Title to display */
+    title?: string;
+    /** Caption to display */
+    caption?: string;
+    /** Show copy button */
+    copy?: boolean;
+    /** Lines to highlight (e.g., [2,3,4,5,9]) */
+    highlightLines?: number[];
+    /** Text patterns to highlight with optional instance selection */
+    highlightText?: TextHighlight[];
+}
+/**
+ * CodePlugin - Handles inline code and fenced code blocks.
+ *
+ * **Inline code:** `code`
+ * Hides backticks when cursor is not in range.
+ *
+ * **Fenced code blocks:**
+ * Supports syntax highlighting, line numbers, line/text highlighting,
+ * title, caption, and copy button via CodeInfo properties.
+ *
+ * @example
+ * ```tsx line-numbers{5} title="example.tsx" {2-4} /pattern/
+ * const x = 1;
+ * ```
+ */
+declare class CodePlugin extends DecorationPlugin {
+    readonly name = "code";
+    readonly version = "1.0.0";
+    decorationPriority: number;
+    readonly requiredNodes: readonly ["InlineCode", "FencedCode", "CodeMark", "CodeInfo", "CodeText"];
+    /**
+     * Plugin theme
+     */
+    get theme(): (theme: ThemeEnum) => ThemeStyle;
+    /**
+     * Keyboard shortcuts for code formatting
+     */
+    getKeymap(): KeyBinding[];
+    /**
+     * Toggle code block on current line or selected lines
+     */
+    private toggleCodeBlock;
+    /**
+     * Parse CodeInfo string into structured properties
+     *
+     * @param codeInfo - The raw CodeInfo string (e.g., "tsx line-numbers{5} title=\"hello.tsx\" copy {2-4,5} /Hello/3-5")
+     * @returns Parsed CodeBlockProperties object
+     *
+     * @example
+     * ```typescript
+     * parseCodeInfo("tsx line-numbers{5} title=\"hello.tsx\" copy {2-4,5} /Hello/3-5")
+     * ```
+     *
+     * Returns:
+     * ```json
+     * {
+     *   language: "tsx",
+     *   lineNumbers: 5,
+     *   title: "hello.tsx",
+     *   copy: true,
+     *   highlightLines: [2,3,4,5],
+     *   highlightText: [{ pattern: "Hello", instances: [3,4,5] }]
+     * }
+     * ```
+     */
+    parseCodeInfo(codeInfo: string): CodeBlockProperties;
+    /**
+     * Build decorations for inline code and fenced code blocks.
+     * Handles line numbers, highlights, header/caption widgets, and fence visibility.
+     */
+    buildDecorations(ctx: DecorationContext): void;
+    /**
+     * Render code elements to HTML for static preview.
+     * Applies syntax highlighting using @lezer/highlight.
+     */
+    renderToHTML(node: SyntaxNode, children: string, ctx: {
+        sliceDoc(from: number, to: number): string;
+        sanitize(html: string): string;
+    }): string | null;
+    /**
+     * Highlight a single line of code using the language's Lezer parser.
+     * Falls back to sanitized plain text if the language is not supported.
+     */
+    private highlightCodeLine;
+    /**
+     * Apply text highlights (regex patterns) to already syntax-highlighted HTML.
+     * Wraps matched patterns in `<mark>` elements.
+     */
+    private applyTextHighlights;
+}
+
+/**
+ * QuotePlugin - Decorates markdown blockquotes
+ *
+ * Adds visual styling to blockquotes (> prefixed lines)
+ * - Line decorations for indicating quote blocks with a left border
+ * - Mark decorations for quote content
+ * - Hides > markers when cursor is not in the blockquote
+ */
+declare class QuotePlugin extends DecorationPlugin {
+    readonly name = "quote";
+    readonly version = "1.0.0";
+    decorationPriority: number;
+    readonly requiredNodes: readonly ["Blockquote", "QuoteMark"];
+    /**
+     * Constructor - calls super constructor
+     */
+    constructor();
+    /**
+     * Plugin theme
+     */
+    get theme(): (theme: ThemeEnum) => ThemeStyle;
+    /**
+     * Build blockquote decorations by iterating the syntax tree
+     */
+    buildDecorations(ctx: DecorationContext): void;
+    /**
+     * Recursively find and hide quote marks
+     */
+    private hideQuoteMarks;
+    renderToHTML(node: SyntaxNode, children: string): string | null;
+}
+
+/**
+ * HRPlugin - Decorates markdown horizontal rules
+ *
+ * Adds visual styling to thematic breaks (---, ***, ___)
+ * - Line decoration that renders a centered horizontal line
+ * - Hides raw marker characters when the cursor is not on the line
+ */
+declare class HRPlugin extends DecorationPlugin {
+    readonly name = "hr";
+    readonly version = "1.0.0";
+    decorationPriority: number;
+    readonly requiredNodes: readonly ["HorizontalRule"];
+    /**
+     * Constructor - calls super constructor
+     */
+    constructor();
+    /**
+     * Plugin theme
+     */
+    get theme(): (theme: ThemeEnum) => ThemeStyle;
+    /**
+     * Build horizontal rule decorations by iterating the syntax tree
+     */
+    buildDecorations(ctx: DecorationContext): void;
+    renderToHTML(node: SyntaxNode, _children: string): string | null;
+}
+
 /**
  * Default plugins
  *
@@ -194,4 +512,4 @@ declare const essentialPlugins: DraftlyPlugin[];
  */
 declare const allPlugins: DraftlyPlugin[];
 
-export { HTMLPlugin, HeadingPlugin, ImagePlugin, InlinePlugin, ListPlugin, MathPlugin, allPlugins, essentialPlugins };
+export { CodePlugin, HRPlugin, HTMLPlugin, HeadingPlugin, ImagePlugin, InlinePlugin, LinkPlugin, ListPlugin, MathPlugin, MermaidPlugin, ParagraphPlugin, QuotePlugin, allPlugins, essentialPlugins };

package/dist/plugins/index.js

@@ -1,5 +1,5 @@
-export { HTMLPlugin, HeadingPlugin, ImagePlugin, InlinePlugin, ListPlugin, MathPlugin, allPlugins, essentialPlugins } from '../chunk-TKZNKWGF.js';
-import '../chunk-MOG6E2LY.js';
-import '../chunk-LCQALOEI.js';
+export { CodePlugin, HRPlugin, HTMLPlugin, HeadingPlugin, ImagePlugin, InlinePlugin, LinkPlugin, ListPlugin, MathPlugin, MermaidPlugin, ParagraphPlugin, QuotePlugin, allPlugins, essentialPlugins } from '../chunk-N3WL3XPB.js';
+import '../chunk-CG4M4TC7.js';
+import '../chunk-DFQYXFOP.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/preview/index.cjs

@@ -1,29 +1,29 @@
 'use strict';
 
-var chunk7Z3SRTPZ_cjs = require('../chunk-7Z3SRTPZ.cjs');
-require('../chunk-RV2SYFA6.cjs');
+var chunkKBQDZ5IW_cjs = require('../chunk-KBQDZ5IW.cjs');
+require('../chunk-KDEDLC3D.cjs');
 
 
 
 Object.defineProperty(exports, "PreviewRenderer", {
   enumerable: true,
-  get: function () { return chunk7Z3SRTPZ_cjs.PreviewRenderer; }
+  get: function () { return chunkKBQDZ5IW_cjs.PreviewRenderer; }
 });
 Object.defineProperty(exports, "defaultRenderers", {
   enumerable: true,
-  get: function () { return chunk7Z3SRTPZ_cjs.defaultRenderers; }
+  get: function () { return chunkKBQDZ5IW_cjs.defaultRenderers; }
 });
 Object.defineProperty(exports, "escapeHtml", {
   enumerable: true,
-  get: function () { return chunk7Z3SRTPZ_cjs.escapeHtml; }
+  get: function () { return chunkKBQDZ5IW_cjs.escapeHtml; }
 });
 Object.defineProperty(exports, "generateCSS", {
   enumerable: true,
-  get: function () { return chunk7Z3SRTPZ_cjs.generateCSS; }
+  get: function () { return chunkKBQDZ5IW_cjs.generateCSS; }
 });
 Object.defineProperty(exports, "preview", {
   enumerable: true,
-  get: function () { return chunk7Z3SRTPZ_cjs.preview; }
+  get: function () { return chunkKBQDZ5IW_cjs.preview; }
 });
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map

package/dist/preview/index.d.cts

@@ -1,6 +1,6 @@
 import * as _lezer_markdown from '@lezer/markdown';
 import { MarkdownConfig } from '@lezer/markdown';
-import { d as DraftlyPlugin, T as ThemeEnum } from '../draftly-Bxu_H4nw.cjs';
+import { d as DraftlyPlugin, T as ThemeEnum } from '../draftly-BLnx3uGX.cjs';
 import { SyntaxNode } from '@lezer/common';
 import '@codemirror/state';
 import '@codemirror/view';
@@ -19,7 +19,7 @@ interface PreviewContext {
     /** Sanitize HTML content (for HTMLBlock/HTMLTag) */
     sanitize(html: string): string;
     /** Render children of a node to HTML */
-    renderChildren(node: SyntaxNode): string;
+    renderChildren(node: SyntaxNode): Promise<string>;
 }
 /**
  * Configuration for the preview renderer
@@ -78,7 +78,7 @@ type NodeRendererMap = Record<string, NodeRenderer>;
  * });
  * ```
  */
-declare function preview(markdown: string, config?: PreviewConfig): string;
+declare function preview(markdown: string, config?: PreviewConfig): Promise<string>;
 
 /**
  * Generate CSS for preview rendering
@@ -120,11 +120,16 @@ declare class PreviewRenderer {
     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(): string;
+    render(): Promise<string>;
     /**
      * Render a single node to HTML
      */

package/dist/preview/index.d.ts

@@ -1,6 +1,6 @@
 import * as _lezer_markdown from '@lezer/markdown';
 import { MarkdownConfig } from '@lezer/markdown';
-import { d as DraftlyPlugin, T as ThemeEnum } from '../draftly-Bxu_H4nw.js';
+import { d as DraftlyPlugin, T as ThemeEnum } from '../draftly-BLnx3uGX.js';
 import { SyntaxNode } from '@lezer/common';
 import '@codemirror/state';
 import '@codemirror/view';
@@ -19,7 +19,7 @@ interface PreviewContext {
     /** Sanitize HTML content (for HTMLBlock/HTMLTag) */
     sanitize(html: string): string;
     /** Render children of a node to HTML */
-    renderChildren(node: SyntaxNode): string;
+    renderChildren(node: SyntaxNode): Promise<string>;
 }
 /**
  * Configuration for the preview renderer
@@ -78,7 +78,7 @@ type NodeRendererMap = Record<string, NodeRenderer>;
  * });
  * ```
  */
-declare function preview(markdown: string, config?: PreviewConfig): string;
+declare function preview(markdown: string, config?: PreviewConfig): Promise<string>;
 
 /**
  * Generate CSS for preview rendering
@@ -120,11 +120,16 @@ declare class PreviewRenderer {
     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(): string;
+    render(): Promise<string>;
     /**
      * Render a single node to HTML
      */

package/dist/preview/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "draftly",
-  "version": "0.1.0-alpha.1",
+  "version": "1.0.7",
   "description": "Core library for draftly",
   "license": "MIT",
   "repository": {
@@ -34,6 +34,7 @@
     "@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"
   },

package/src/editor/draftly.ts

@@ -8,6 +8,7 @@ import { defaultKeymap, history, historyKeymap, indentWithTab } from "@codemirro
 import { indentOnInput } from "@codemirror/language";
 import { languages } from "@codemirror/language-data";
 import { ThemeEnum } from "./utils";
+import { markdownResetExtension } from "./theme";
 
 /**
  * DraftlyNode: represents a node in the markdown tree
@@ -29,9 +30,6 @@ export interface DraftlyConfig {
   /** Theme */
   theme?: ThemeEnum;
 
-  /** ThemeStlye */
-  themeStyle?: Extension;
-
   /** Weather to load base styles */
   baseStyles?: boolean;
 
@@ -93,7 +91,6 @@ export interface DraftlyConfig {
 export function draftly(config: DraftlyConfig = {}): Extension[] {
   const {
     theme: configTheme = ThemeEnum.AUTO,
-    themeStyle: configThemeStyle = undefined,
     baseStyles = true,
     plugins = [],
     extensions = [],
@@ -171,8 +168,10 @@ export function draftly(config: DraftlyConfig = {}): Extension[] {
 
   // draftly extensions (pass plugins for decoration support)
   const draftlyExtensions: Extension[] = [];
-  if (!disableViewPlugin)
+  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
@@ -181,22 +180,19 @@ export function draftly(config: DraftlyConfig = {}): Extension[] {
     Prec.high(markdownSupport),
     Prec.high(keymap.of(markdownKeymap)),
 
-    // Theme styles
-    ...(configThemeStyle ? [Prec.high(configThemeStyle)] : []),
+    // draftly view plugin for rich rendering
+    draftlyExtensions,
 
     // Core CodeMirror extensions
-    ...baseExtensions,
-
-    // draftly view plugin for rich rendering
-    ...draftlyExtensions,
+    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/plugin.ts

@@ -60,6 +60,9 @@ export abstract class DraftlyPlugin {
   /** 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 = {};
 
@@ -212,7 +215,7 @@ export abstract class DraftlyPlugin {
     node: SyntaxNode,
     children: string,
     ctx: { sliceDoc(from: number, to: number): string; sanitize(html: string): string }
-  ): string | null;
+  ): string | null | Promise<string | null>;
 
   /**
    * Get CSS styles for preview mode