slidecanvas 1.1.0 → 1.1.1

package/README.md

@@ -12,6 +12,7 @@
 - **Professional Ribbon UI**: A high-density, Microsoft Office-style toolbar layout (120px height) with optimized visibility for all controls.
 - **Slash Commands (`/`)**: A fast, context-aware command menu triggered by typing `/` anywhere on the canvas or in a text box.
 - **AI-Powered Image Generation**: Integrated flow for generating design assets via optional `onGenerateImage` hook, with built-in preview and replacement logic.
+- **Two-Step Infographic Generation**: Advanced workflow to refine selected slide text into visual prompts before generating infographics (via `onRefineInfographicPrompt` and `onGenerateInfographic`).
 - **AI Suggestion Box**: A side-by-side text refinement UI for reviewing Shorten/Reframe/Lengthen suggestions before applying them.
 - **Smart Actions Group**: Prominent buttons for Present, Export (PPTX), and Delete, with a subtle "Saved" status indicator.
 - **Professional Export**: High-quality `.pptx` generation with support for transparency and layout mapping.
@@ -129,7 +130,27 @@ You can integrate your own AI image provider (e.g., DALL-E, Midjourney, or a cus
 > [!TIP]
 > When an image is generated, SlideCanvas provides a professional **Preview Modal** allowing users to **Insert** as new, **Replace** a selected image (preserving dimensions), or **Discard**.
 
-### 6. Enabling AI Text Refinement
+### 6. Infographic Generation (Two-Step Flow)
+SlideCanvas supports a sophisticated two-step workflow for creating infographics from slide content. This is enabled via the `isTwoStepInfographicGeneration` prop.
+
+1. **Step 1: Refinement**: The selected text is sent to `onRefineInfographicPrompt`. The user previews and edits the AI-generated visual prompt.
+2. **Step 2: Generation**: The refined prompt is then sent to `onGenerateInfographic` to create the final asset.
+
+```tsx
+<PptEditor 
+  isTwoStepInfographicGeneration={true}
+  onRefineInfographicPrompt={async (text) => {
+     // Use LLM to turn slide text into a visualization prompt
+     return await myAiRefine(text); 
+  }}
+  onGenerateInfographic={async (prompt) => {
+     // Generate the actual chart/infographic image
+     return await myImageGen(prompt);
+  }}
+/>
+```
+
+### 7. Enabling AI Text Refinement
 SlideCanvas comes battery-included with Gemini AI support for text.
 
 ```tsx
@@ -147,6 +168,28 @@ export default function MyEditor() {
 }
 ```
 
+### 8. Custom AI Text Refinement Hooks
+While SlideCanvas includes built-in Gemini support, you can override the logic with your own AI providers (OpenAI, Anthropic, or custom internal LLMs) using the following hooks:
+
+```tsx
+<PptEditor 
+  onAiRewrite={async (text) => {
+    const res = await myAiService.call('rewrite', text);
+    return res.output;
+  }}
+  onAiGrammar={async (text) => {
+    return await myAiService.call('fix-grammar', text);
+  }}
+  onAiShorten={async (text) => {
+    return await myAiService.call('summarize', text);
+  }}
+  // Also supports onAiLengthen and onAiContinue
+/>
+```
+
+> [!NOTE]
+> When these hooks are provided, the editor will favor them over the default Gemini integration.
+
 ## Advanced Usage Examples
 
 ### 1. 7-Second S3 Auto-Save (Real-Time Persistence)
@@ -282,10 +325,18 @@ async function extractCaptions(fileBuffer: ArrayBuffer) {
 | `appBgColor` | `string` | `"#B7472A"` | Primary brand color for the UI. |
 | `geminiApiKey` | `string` | `undefined` | API key for built-in AI text actions. |
 | `onGenerateImage` | `(prompt: string) => Promise<string>` | `undefined` | Custom hook to handle AI image generation. |
+| `isTwoStepInfographicGeneration` | `boolean` | `false` | Enables Step 1: Prompt Refinement modal for infographics. |
+| `onRefineInfographicPrompt` | `(text: string) => Promise<string>` | `undefined` | Hook to transform text into a visual prompt (Step 1). |
+| `onGenerateInfographic` | `(prompt: string) => Promise<string>` | `undefined` | Hook to generate the infographic image (Step 2). |
 | `proxyUrl` | `string` | `undefined` | Base path for the proxy API (used for PPTX loading and image previews). |
 | `showHomeOnEmpty` | `boolean` | `false` | Shows a "New / Upload" splash if no data provided. |
 | `onChange` | `(pres: Presentation) => void` | `undefined` | Fired on any change to the deck. |
 | `onSourceChange` | `(src, url?) => void` | `undefined` | Fired when the deck origin changes (useful for routing). |
+| `onAiRewrite` | `(text: string) => Promise<string>` | `undefined` | Optional hook to override default Gemini rewrite logic. |
+| `onAiGrammar` | `(text: string) => Promise<string>` | `undefined` | Optional hook to override default Gemini grammar logic. |
+| `onAiShorten` | `(text: string) => Promise<string>` | `undefined` | Optional hook to override default Gemini shorten logic. |
+| `onAiLengthen` | `(text: string) => Promise<string>` | `undefined` | Optional hook to override default Gemini lengthen logic. |
+| `onAiContinue` | `(text: string) => Promise<string>` | `undefined` | Optional hook to override default Gemini continue-writing logic. |
 
 ### Usage Examples
 

package/dist/index.d.mts

@@ -19,10 +19,17 @@ interface TextElement extends BaseElement {
     fontSize: number;
     fontFamily: string;
     color: string;
+    highlightColor?: string;
     isBold?: boolean;
     isItalic?: boolean;
-    textAlign?: 'left' | 'center' | 'right';
+    isUnderline?: boolean;
+    isStrikethrough?: boolean;
+    hasShadow?: boolean;
+    charSpacing?: number;
+    listType?: string;
+    textAlign?: 'left' | 'center' | 'right' | 'justify';
     isBulleted?: boolean;
+    isNumbered?: boolean;
 }
 interface ImageElement extends BaseElement {
     type: 'image';
@@ -62,6 +69,14 @@ interface PptEditorProps {
     onSourceChange?: (source: PresentationSource, url?: string) => void;
     proxyUrl?: string;
     onGenerateImage?: (prompt: string) => Promise<string>;
+    onGenerateInfographic?: (prompt: string) => Promise<string>;
+    onAiRewrite?: (text: string) => Promise<string>;
+    onAiGrammar?: (text: string) => Promise<string>;
+    onAiShorten?: (text: string) => Promise<string>;
+    onAiLengthen?: (text: string) => Promise<string>;
+    onAiContinue?: (text: string) => Promise<string>;
+    isTwoStepInfographicGeneration?: boolean;
+    onRefineInfographicPrompt?: (text: string) => Promise<string>;
 }
 declare const PptEditor: React.FC<PptEditorProps>;
 

package/dist/index.d.ts

@@ -19,10 +19,17 @@ interface TextElement extends BaseElement {
     fontSize: number;
     fontFamily: string;
     color: string;
+    highlightColor?: string;
     isBold?: boolean;
     isItalic?: boolean;
-    textAlign?: 'left' | 'center' | 'right';
+    isUnderline?: boolean;
+    isStrikethrough?: boolean;
+    hasShadow?: boolean;
+    charSpacing?: number;
+    listType?: string;
+    textAlign?: 'left' | 'center' | 'right' | 'justify';
     isBulleted?: boolean;
+    isNumbered?: boolean;
 }
 interface ImageElement extends BaseElement {
     type: 'image';
@@ -62,6 +69,14 @@ interface PptEditorProps {
     onSourceChange?: (source: PresentationSource, url?: string) => void;
     proxyUrl?: string;
     onGenerateImage?: (prompt: string) => Promise<string>;
+    onGenerateInfographic?: (prompt: string) => Promise<string>;
+    onAiRewrite?: (text: string) => Promise<string>;
+    onAiGrammar?: (text: string) => Promise<string>;
+    onAiShorten?: (text: string) => Promise<string>;
+    onAiLengthen?: (text: string) => Promise<string>;
+    onAiContinue?: (text: string) => Promise<string>;
+    isTwoStepInfographicGeneration?: boolean;
+    onRefineInfographicPrompt?: (text: string) => Promise<string>;
 }
 declare const PptEditor: React.FC<PptEditorProps>;