@lax-wp/editor 0.4.3 → 0.4.4

package/README.md

@@ -12,6 +12,7 @@ A modern, feature-rich WordPress-style editor built with React and TipTap. This
   - [Basic Configuration](#basic-configuration)
   - [AI Autocompletion](#ai-autocompletion)
   - [Export Functionality](#export-functionality)
+  - [Screenshot Capture](#screenshot-capture)
   - [Variable Text Feature](#variable-text-feature)
   - [Configuration Options Reference](#configuration-options-reference)
 - [Components](#components)
@@ -298,6 +299,66 @@ insertVariable(key: string, value?: string)
 - Dynamic content generation
 - Personalized documents
 
+### Screenshot Capture
+
+The editor supports host-driven screenshot capture with a serializable trigger (`requestId`) and `File` callbacks.
+
+```tsx
+import { useMemo, useState } from 'react';
+import { Editor, type EditorConfig } from 'lax-wp-editor';
+
+function App() {
+  const [captureRequestId, setCaptureRequestId] = useState<string>();
+  const [captureApi, setCaptureApi] =
+    useState<((opts?: { fileName?: string; mimeType?: 'image/png' | 'image/jpeg'; quality?: number }) => Promise<File>) | null>(null);
+
+  const config = useMemo<EditorConfig>(() => ({
+    screenshot: {
+      requestId: captureRequestId, // capture runs once each time this value changes
+      fileName: 'contract-preview',
+      mimeType: 'image/png',
+      onSuccess: (file) => {
+        console.log('Screenshot file:', file);
+      },
+      onError: (error) => {
+        console.error('Screenshot failed:', error);
+      },
+    },
+    onEditorReady: ({ captureScreenshot }) => {
+      setCaptureApi(() => captureScreenshot);
+    },
+  }), [captureRequestId]);
+
+  return (
+    <div>
+      <button onClick={() => setCaptureRequestId(crypto.randomUUID())}>
+        Capture via requestId
+      </button>
+      <button
+        onClick={async () => {
+          const file = await captureApi?.({ fileName: 'manual-thumbnail', mimeType: 'image/jpeg', quality: 0.9 });
+          console.log(file);
+        }}
+      >
+        Capture imperatively
+      </button>
+      <Editor config={config} />
+    </div>
+  );
+}
+```
+
+`screenshot` config options:
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `requestId` | `string` | `undefined` | Trigger token. Capture runs when this changes to a new value. |
+| `fileName` | `string` | `editor-thumbnail` | Base file name (extension added automatically). |
+| `mimeType` | `'image/png' \| 'image/jpeg'` | `'image/png'` | Output image format. |
+| `quality` | `number` | `0.92` | JPEG quality (0..1), ignored for PNG. |
+| `onSuccess` | `(file: File) => void` | `undefined` | Called with captured screenshot file. |
+| `onError` | `(error: Error) => void` | `undefined` | Called if capture fails. |
+
 ### Configuration Options Reference
 
 | Option | Type | Default | Description |
@@ -313,6 +374,7 @@ insertVariable(key: string, value?: string)
 | `enableVariableText` | `boolean` | `false` | Enable variable text feature |
 | `variableValues` | `Record<string, string>` | `{}` | Variable name to value mappings |
 | `onEditorReady` | `(methods) => void` | `undefined` | Callback with editor methods when ready |
+| `screenshot` | `ScreenshotConfig` | `undefined` | Declarative screenshot request + callbacks |
 | `onShare` | `() => void` | `undefined` | Callback when share button is clicked |
 | `aiAutocompletion` | `AIAutocompletionConfig` | See below | AI autocompletion configuration |
 

package/dist/config/EditorConfig.d.ts

@@ -84,6 +84,33 @@ export interface AIAutocompletionConfig {
 }
 /** Pass scan/API JSON or an HTML string into the editor (used with {@link EditorConfig.onScanComplete}). */
 export type ApplyScanCompleteContent = (editorContent: string | Record<string, unknown>) => void;
+export type ScreenshotMimeType = 'image/png' | 'image/jpeg';
+/**
+ * Screenshot options accepted by both config-driven and imperative capture APIs.
+ */
+export interface ScreenshotCaptureOptions {
+    /** Output file name without extension. Defaults to `editor-thumbnail`. */
+    fileName?: string;
+    /** Output MIME type. Defaults to `image/png`. */
+    mimeType?: ScreenshotMimeType;
+    /** JPEG quality from 0..1. Used only when `mimeType` is `image/jpeg`. Defaults to `0.92`. */
+    quality?: number;
+}
+/**
+ * Declarative screenshot request configuration.
+ *
+ * Use `requestId` as a serializable trigger token (e.g. UUID or timestamp). The editor will capture once when this value changes.
+ */
+export interface ScreenshotConfig extends ScreenshotCaptureOptions {
+    /**
+     * Capture trigger token. Capture runs only when this value changes from the last handled request.
+     */
+    requestId?: string;
+    /** Callback fired with the generated screenshot file. */
+    onSuccess?: (file: File) => void;
+    /** Callback fired if capture fails. */
+    onError?: (error: Error) => void;
+}
 export interface EditorConfig {
     /** Editor mode */
     mode?: TEditorMode;
@@ -162,7 +189,15 @@ export interface EditorConfig {
             variableTableData?: Record<string, Record<string, unknown | undefined | null>[]>;
         }) => void;
         updateTableValues: () => void;
+        captureScreenshot: (options?: ScreenshotCaptureOptions) => Promise<File>;
     }) => void;
+    /**
+     * Screenshot capture configuration.
+     *
+     * Use `requestId` as a declarative trigger so host apps can request capture
+     * using serializable state updates.
+     */
+    screenshot?: ScreenshotConfig;
     /** Parent container id for redline positioning */
     parentContainerId?: string;
     /** PII Anonymization configuration */

package/dist/contexts/EditorShellContext.d.ts

@@ -1,6 +1,6 @@
 import type { ReactNode } from "react";
 import type { Editor } from "@tiptap/react";
-import type { EditorConfig } from "@/config/EditorConfig";
+import type { EditorConfig, ScreenshotCaptureOptions } from "@/config/EditorConfig";
 export interface EditorShellContextType {
     editor: Editor;
     editorConfig: EditorConfig;
@@ -11,7 +11,8 @@ interface EditorShellProviderProps {
     children: ReactNode;
     editor: Editor;
     editorConfig: EditorConfig;
+    captureScreenshot: (options?: ScreenshotCaptureOptions) => Promise<File>;
 }
-export declare const EditorShellProvider: ({ children, editor, editorConfig }: EditorShellProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const EditorShellProvider: ({ children, editor, editorConfig, captureScreenshot }: EditorShellProviderProps) => import("react/jsx-runtime").JSX.Element;
 export declare const useEditorShell: () => EditorShellContextType;
 export {};