draftly 1.0.7 → 2.0.0

package/dist/preview/index.d.cts

@@ -1,11 +1,14 @@
 import * as _lezer_markdown from '@lezer/markdown';
 import { MarkdownConfig } from '@lezer/markdown';
-import { d as DraftlyPlugin, T as ThemeEnum } from '../draftly-BLnx3uGX.cjs';
+import { d as DraftlyPlugin, T as ThemeEnum } from '../draftly-BBL-AdOl.cjs';
+import * as _lezer_highlight from '@lezer/highlight';
+import * as _codemirror_state from '@codemirror/state';
+import * as _codemirror_language from '@codemirror/language';
 import { SyntaxNode } from '@lezer/common';
-import '@codemirror/state';
 import '@codemirror/view';
 import 'style-mod';
 
+type SyntaxThemeInput = _codemirror_language.HighlightStyle | _codemirror_state.Extension | readonly _codemirror_state.Extension[];
 /**
  * Context passed to plugin preview methods
  */
@@ -20,6 +23,8 @@ interface PreviewContext {
     sanitize(html: string): string;
     /** Render children of a node to HTML */
     renderChildren(node: SyntaxNode): Promise<string>;
+    /** Active syntax highlighters used for code rendering */
+    readonly syntaxHighlighters?: readonly _lezer_highlight.Highlighter[];
 }
 /**
  * Configuration for the preview renderer
@@ -37,6 +42,8 @@ interface PreviewConfig {
     sanitize?: boolean;
     /** Theme to use */
     theme?: ThemeEnum;
+    /** CodeMirror syntax theme input used for static preview highlighting */
+    syntaxTheme?: SyntaxThemeInput | SyntaxThemeInput[];
 }
 /**
  * Result of CSS generation
@@ -50,6 +57,8 @@ interface GenerateCSSConfig {
     wrapperClass?: string;
     /** Include base styles */
     includeBase?: boolean;
+    /** CodeMirror syntax theme input used for static preview syntax highlighting */
+    syntaxTheme?: SyntaxThemeInput | SyntaxThemeInput[];
 }
 /**
  * Node renderer function type
@@ -100,6 +109,11 @@ declare function preview(markdown: string, config?: PreviewConfig): Promise<stri
  */
 declare function generateCSS(config?: GenerateCSSConfig): string;
 
+/**
+ * Extract syntax highlight CSS from resolved CodeMirror HighlightStyle modules.
+ */
+declare function generateSyntaxThemeCSS(syntaxTheme: SyntaxThemeInput | SyntaxThemeInput[] | undefined, _wrapperClass: string): string;
+
 /**
  * Escape HTML special characters
  */
@@ -118,10 +132,11 @@ declare class PreviewRenderer {
     private plugins;
     private markdown;
     private sanitizeHtml;
+    private syntaxTheme;
     private renderers;
     private ctx;
     private nodeToPlugins;
-    constructor(doc: string, plugins: DraftlyPlugin[] | undefined, markdown: MarkdownConfig[], theme?: ThemeEnum, sanitize?: boolean);
+    constructor(doc: string, plugins: DraftlyPlugin[] | undefined, markdown: MarkdownConfig[], theme?: ThemeEnum, sanitize?: boolean, syntaxTheme?: SyntaxThemeInput | SyntaxThemeInput[]);
     /**
      * Build a map from node names to plugins that handle them
      */
@@ -140,4 +155,4 @@ declare class PreviewRenderer {
     private renderChildren;
 }
 
-export { type GenerateCSSConfig, type NodeRenderer, type NodeRendererMap, type PreviewConfig, type PreviewContext, PreviewRenderer, defaultRenderers, escapeHtml, generateCSS, preview };
+export { type GenerateCSSConfig, type NodeRenderer, type NodeRendererMap, type PreviewConfig, type PreviewContext, PreviewRenderer, type SyntaxThemeInput, defaultRenderers, escapeHtml, generateCSS, generateSyntaxThemeCSS, preview };

package/dist/preview/index.d.ts

@@ -1,11 +1,14 @@
 import * as _lezer_markdown from '@lezer/markdown';
 import { MarkdownConfig } from '@lezer/markdown';
-import { d as DraftlyPlugin, T as ThemeEnum } from '../draftly-BLnx3uGX.js';
+import { d as DraftlyPlugin, T as ThemeEnum } from '../draftly-BBL-AdOl.js';
+import * as _lezer_highlight from '@lezer/highlight';
+import * as _codemirror_state from '@codemirror/state';
+import * as _codemirror_language from '@codemirror/language';
 import { SyntaxNode } from '@lezer/common';
-import '@codemirror/state';
 import '@codemirror/view';
 import 'style-mod';
 
+type SyntaxThemeInput = _codemirror_language.HighlightStyle | _codemirror_state.Extension | readonly _codemirror_state.Extension[];
 /**
  * Context passed to plugin preview methods
  */
@@ -20,6 +23,8 @@ interface PreviewContext {
     sanitize(html: string): string;
     /** Render children of a node to HTML */
     renderChildren(node: SyntaxNode): Promise<string>;
+    /** Active syntax highlighters used for code rendering */
+    readonly syntaxHighlighters?: readonly _lezer_highlight.Highlighter[];
 }
 /**
  * Configuration for the preview renderer
@@ -37,6 +42,8 @@ interface PreviewConfig {
     sanitize?: boolean;
     /** Theme to use */
     theme?: ThemeEnum;
+    /** CodeMirror syntax theme input used for static preview highlighting */
+    syntaxTheme?: SyntaxThemeInput | SyntaxThemeInput[];
 }
 /**
  * Result of CSS generation
@@ -50,6 +57,8 @@ interface GenerateCSSConfig {
     wrapperClass?: string;
     /** Include base styles */
     includeBase?: boolean;
+    /** CodeMirror syntax theme input used for static preview syntax highlighting */
+    syntaxTheme?: SyntaxThemeInput | SyntaxThemeInput[];
 }
 /**
  * Node renderer function type
@@ -100,6 +109,11 @@ declare function preview(markdown: string, config?: PreviewConfig): Promise<stri
  */
 declare function generateCSS(config?: GenerateCSSConfig): string;
 
+/**
+ * Extract syntax highlight CSS from resolved CodeMirror HighlightStyle modules.
+ */
+declare function generateSyntaxThemeCSS(syntaxTheme: SyntaxThemeInput | SyntaxThemeInput[] | undefined, _wrapperClass: string): string;
+
 /**
  * Escape HTML special characters
  */
@@ -118,10 +132,11 @@ declare class PreviewRenderer {
     private plugins;
     private markdown;
     private sanitizeHtml;
+    private syntaxTheme;
     private renderers;
     private ctx;
     private nodeToPlugins;
-    constructor(doc: string, plugins: DraftlyPlugin[] | undefined, markdown: MarkdownConfig[], theme?: ThemeEnum, sanitize?: boolean);
+    constructor(doc: string, plugins: DraftlyPlugin[] | undefined, markdown: MarkdownConfig[], theme?: ThemeEnum, sanitize?: boolean, syntaxTheme?: SyntaxThemeInput | SyntaxThemeInput[]);
     /**
      * Build a map from node names to plugins that handle them
      */
@@ -140,4 +155,4 @@ declare class PreviewRenderer {
     private renderChildren;
 }
 
-export { type GenerateCSSConfig, type NodeRenderer, type NodeRendererMap, type PreviewConfig, type PreviewContext, PreviewRenderer, defaultRenderers, escapeHtml, generateCSS, preview };
+export { type GenerateCSSConfig, type NodeRenderer, type NodeRendererMap, type PreviewConfig, type PreviewContext, PreviewRenderer, type SyntaxThemeInput, defaultRenderers, escapeHtml, generateCSS, generateSyntaxThemeCSS, preview };

package/dist/preview/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "draftly",
-  "version": "1.0.7",
+  "version": "2.0.0",
   "description": "Core library for draftly",
   "license": "MIT",
   "repository": {
@@ -35,6 +35,7 @@
     "dompurify": "^3.3.1",
     "katex": "^0.16.28",
     "mermaid": "^11.12.2",
+    "node-emoji": "^2.2.0",
     "style-mod": "^4.1.3",
     "zod": "^4.3.6"
   },
@@ -63,6 +64,12 @@
       "require": "./dist/preview/index.cjs",
       "default": "./dist/preview/index.js"
     },
+    "./lib": {
+      "types": "./dist/lib/index.d.ts",
+      "import": "./dist/lib/index.js",
+      "require": "./dist/lib/index.cjs",
+      "default": "./dist/lib/index.js"
+    },
     "./src": {
       "types": "./src/index.ts",
       "default": "./src/index.ts"

package/src/editor/draftly.ts

@@ -156,6 +156,7 @@ export function draftly(config: DraftlyConfig = {}): Extension[] {
     extensions: markdownExtensions,
     addKeymap: true,
     completeHTMLTags: true,
+    pasteURLAsLink: true,
   });
 
   // Core CodeMirror extensions (in order)

package/src/editor/plugin.ts

@@ -214,7 +214,11 @@ export abstract class DraftlyPlugin {
   renderToHTML?(
     node: SyntaxNode,
     children: string,
-    ctx: { sliceDoc(from: number, to: number): string; sanitize(html: string): string }
+    ctx: {
+      sliceDoc(from: number, to: number): string;
+      sanitize(html: string): string;
+      syntaxHighlighters?: readonly import("@lezer/highlight").Highlighter[];
+    }
   ): string | null | Promise<string | null>;
 
   /**

package/src/editor/theme.ts

@@ -9,6 +9,7 @@ export const draftlyBaseTheme = EditorView.theme({
   "&.cm-draftly": {
     fontSize: "16px",
     lineHeight: "1.6",
+    backgroundColor: "transparent !important",
   },
 
   "&.cm-draftly .cm-content": {

package/src/editor/utils.ts

@@ -59,6 +59,10 @@ export function createTheme({
   light?: ThemeStyle;
 }): (theme: ThemeEnum) => ThemeStyle {
   return (theme: ThemeEnum) => {
+    defaultTheme = flattenThemeStyles(defaultTheme);
+    darkTheme = flattenThemeStyles(darkTheme || {});
+    lightTheme = flattenThemeStyles(lightTheme || {});
+
     let style: ThemeStyle = defaultTheme;
 
     if (theme === ThemeEnum.DARK) {
@@ -73,6 +77,33 @@ export function createTheme({
   };
 }
 
+export function flattenThemeStyles(themeStyles: ThemeStyle, parentSelector?: string): ThemeStyle {
+  const flattened: ThemeStyle = {};
+
+  for (const [selector, styles] of Object.entries(themeStyles)) {
+    if (typeof styles === "object" && !Array.isArray(styles)) {
+      // Flatten nested styles
+      const fullSelector = fixSelector(parentSelector ? `${parentSelector} ${selector}` : selector);
+      const nestedStyles = flattenThemeStyles(styles as ThemeStyle, fullSelector);
+      Object.assign(flattened, nestedStyles);
+    } else {
+      // Add styles to the flattened object
+      if (parentSelector) {
+        flattened[parentSelector] = { ...flattened[parentSelector], [selector]: styles };
+      } else {
+        flattened[selector] = styles as StyleSpec;
+      }
+    }
+  }
+
+  return flattened;
+}
+
+export function fixSelector(selector: string): string {
+  // Replace all occurrences of "&" with the parent selector
+  return selector.replace(/\s&/g, "");
+}
+
 /**
  * Check if cursor is within the given range
  */

package/src/index.ts

@@ -1,4 +1,5 @@
-// Re-export everything for backward compatibility
-export * from "./editor";
-export * from "./plugins";
-export * from "./preview";
+// Re-export everything for backward compatibility
+export * from "./editor";
+export * from "./plugins";
+export * from "./preview";
+export * from "./lib";

package/src/lib/index.ts

@@ -0,0 +1,2 @@
+export { createWrapSelectionInputHandler } from "./input-handler";
+export type { WrapSelectionMarkerMap } from "./input-handler";

package/src/lib/input-handler.ts

@@ -0,0 +1,45 @@
+import { EditorSelection, Extension } from "@codemirror/state";
+import { EditorView } from "@codemirror/view";
+
+/**
+ * Mapping of typed input characters to surrounding markers.
+ *
+ * Example:
+ * { "*": "*", "=": "==" }
+ */
+export type WrapSelectionMarkerMap = Record<string, string>;
+
+/**
+ * Creates an input handler that wraps non-empty selections with markdown markers
+ * when a mapped character is typed.
+ */
+export function createWrapSelectionInputHandler(markersByInput: WrapSelectionMarkerMap): Extension {
+  return EditorView.inputHandler.of((view, _from, _to, text) => {
+    const marker = markersByInput[text];
+    if (!marker) {
+      return false;
+    }
+
+    const ranges = view.state.selection.ranges;
+    if (ranges.length === 0 || ranges.some((range) => range.empty)) {
+      return false;
+    }
+
+    const changes = ranges
+      .map((range) => ({
+        from: range.from,
+        to: range.to,
+        insert: `${marker}${view.state.sliceDoc(range.from, range.to)}${marker}`,
+      }))
+      .reverse();
+
+    const nextRanges = ranges.map((range) => EditorSelection.range(range.from + marker.length, range.to + marker.length));
+
+    view.dispatch({
+      changes,
+      selection: EditorSelection.create(nextRanges, view.state.selection.mainIndex),
+    });
+
+    return true;
+  });
+}