# AuthorlyEditor Props Complete API reference for all props accepted by the `AuthorlyEditor` component. ## Import ```tsx import { AuthorlyEditor } from 'authorly-editor'; import type { AuthorlyEditorProps } from 'authorly-editor'; ``` > **Note:** `ContentBlocksEditor` and `ContentBlocksEditorProps` are deprecated aliases that still work for backwards compatibility. ## Props Overview | Prop | Type | Default | Description | |------|------|---------|-------------| | `initialContent` | `string` | `''` | Initial HTML content to load | | `blocks` | `BlockType[]` | All blocks | Enabled block types | | `inlineFormats` | `InlineFormat[]` | All formats | Enabled inline formats | | `placeholder` | `string` | `'Type "/" for commands...'` | Placeholder text when empty | | `readOnly` | `boolean` | `false` | Read-only mode (view only) | | `classPrefix` | `string` | `'cb'` | CSS class prefix | | `className` | `string` | `''` | Additional CSS class for container | | `style` | `React.CSSProperties` | `{}` | Inline styles for container | | `showToolbar` | `boolean` | `true` | Show/hide toolbar | | `toolbarPosition` | `'top' \| 'bottom' \| 'floating'` | `'top'` | Toolbar position | | `darkMode` | `boolean` | `false` | Enable dark mode | | `autoFocus` | `boolean` | `false` | Auto-focus on mount | | `spellCheck` | `boolean` | `true` | Enable spell checking | | `onChange` | `(html: string) => void` | `undefined` | Called when content changes | | `onSave` | `(html: string) => void` | `undefined` | Called when Ctrl+S is pressed | | `onFocus` | `() => void` | `undefined` | Called when editor gains focus | | `onBlur` | `() => void` | `undefined` | Called when editor loses focus | | `onReady` | `(editor: EditorInstance) => void` | `undefined` | Called when editor is ready | | `imageUploadConfig` | `UploadConfig` | `undefined` | Image upload configuration | | `onUploadStart` | `(filename: string) => void` | `undefined` | Called when upload starts | | `onUploadSuccess` | `(result: UploadResult) => void` | `undefined` | Called when upload succeeds | | `onUploadError` | `(error: Error) => void` | `undefined` | Called when upload fails | | `onUploadProgress` | `(progress: UploadProgress) => void` | `undefined` | Called during upload progress | ## Content Props ### initialContent ```tsx ``` Initial HTML content to populate the editor. Accepts any valid HTML. **Type:** `string` **Default:** `''` **Examples:** ```tsx // From state const [content, setContent] = useState('

Saved content

'); // From API const { data } = await fetch('/api/content'); // Complex content My Document

Introduction paragraph

Item 1
Item 2

`} /> ``` ### blocks ```tsx ``` Array of enabled block types. Restricts which blocks users can insert. **Type:** `BlockType[]` **Default:** All 16 block types **Available Block Types:** ```tsx type BlockType = | 'paragraph' | 'heading' | 'bulletList' | 'numberedList' | 'checkList' | 'quote' | 'code' | 'image' | 'video' | 'divider' | 'callout' | 'accordion' | 'table' | 'linkPreview' | 'date' | 'excalidraw'; ``` **Examples:** ```tsx // Text-only editor // Minimal editor (no media) // Full-featured ``` ### inlineFormats ```tsx ``` Array of enabled inline formatting options. **Type:** `InlineFormat[]` **Default:** All inline formats **Available Inline Formats:** ```tsx type InlineFormat = | 'bold' | 'italic' | 'underline' | 'strikethrough' | 'code' | 'link' | 'textColor' | 'highlight'; ``` **Examples:** ```tsx // Basic formatting only // No formatting // Text decoration + links ``` ### placeholder ```tsx ``` Placeholder text shown when editor is empty. **Type:** `string` **Default:** `'Type "/" for commands...'` **Examples:** ```tsx // Custom placeholder // Descriptive placeholder // Empty (no placeholder) ``` ## Display Props ### readOnly ```tsx ``` Enables read-only mode. Content is visible but not editable. **Type:** `boolean` **Default:** `false` **Examples:** ```tsx // Conditionally read-only const [isEditing, setIsEditing] = useState(false); // Always read-only (use AuthorlyRenderer instead) // Better: Use renderer for read-only ``` ### className ```tsx ``` Additional CSS class names for the editor container. **Type:** `string` **Default:** `''` **Examples:** ```tsx // Tailwind classes // Custom class // Multiple classes ``` ### style ```tsx ``` Inline CSS styles for the editor container. **Type:** `React.CSSProperties` **Default:** `{}` **Examples:** ```tsx // Fixed dimensions // Custom colors // Responsive height ``` ### classPrefix ```tsx ``` Prefix for all CSS classes. Useful for avoiding class name conflicts. **Type:** `string` **Default:** `'cb'` (ContentBlocks) **Examples:** ```tsx // Custom prefix // Generates: .ae-editor, .ae-content, .ae-block, etc. // No prefix // Generates: .editor, .content, .block, etc. // Namespace // Generates: .app-editor-editor, .app-editor-content, etc. ``` ## Toolbar Props ### showToolbar ```tsx ``` Show or hide the toolbar. **Type:** `boolean` **Default:** `true` **Examples:** ```tsx // No toolbar // Conditional toolbar const [showToolbar, setShowToolbar] = useState(true); ``` ### toolbarPosition ```tsx ``` Position of the toolbar relative to content. **Type:** `'top' | 'bottom' | 'floating'` **Default:** `'top'` **Examples:** ```tsx // Bottom toolbar // Top toolbar (default) // Floating toolbar ``` ## Theme Props ### darkMode ```tsx ``` Enable dark mode styling. **Type:** `boolean` **Default:** `false` **Examples:** ```tsx // Toggle dark mode const [isDark, setIsDark] = useState(false);

// System preference const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; ``` ## Behavior Props ### autoFocus ```tsx ``` Automatically focus the editor when it mounts. **Type:** `boolean` **Default:** `false` **Examples:** ```tsx // Auto-focus in modal // Focus on mount ``` ### spellCheck ```tsx ``` Enable or disable browser spell checking. **Type:** `boolean` **Default:** `true` **Examples:** ```tsx // Disable spell check (for code) // Enable spell check ``` ## Event Callbacks ### onChange ```tsx { console.log('Content changed:', html); saveToLocalStorage(html); }} /> ``` Called whenever editor content changes. **Type:** `(html: string) => void` **Default:** `undefined` **Examples:** ```tsx // Auto-save const [content, setContent] = useState(''); { setContent(html); debouncedSave(html); }} /> // Track changes const [changeCount, setChangeCount] = useState(0); { setChangeCount(c => c + 1); }} /> // Sync with state ``` ### onSave ```tsx { await fetch('/api/save', { method: 'POST', body: JSON.stringify({ content: html }) }); }} /> ``` Called when user presses `Ctrl+S` (or `Cmd+S` on Mac). **Type:** `(html: string) => void` **Default:** `undefined` **Examples:** ```tsx // Save to API { const response = await saveContent(html); toast.success('Saved!'); }} /> // Save to localStorage { localStorage.setItem('draft', html); }} /> ``` ### onFocus / onBlur ```tsx console.log('Editor focused')} onBlur={() => console.log('Editor blurred')} /> ``` Called when editor gains or loses focus. **Type:** `() => void` **Default:** `undefined` **Examples:** ```tsx // Track editing state const [isEditing, setIsEditing] = useState(false); setIsEditing(true)} onBlur={() => setIsEditing(false)} /> // Show save prompt on blur { if (hasUnsavedChanges) { showSavePrompt(); } }} /> ``` ### onReady ```tsx { console.log('Editor ready!', editor); editor.focus(); }} /> ``` Called when editor is fully initialized and ready to use. **Type:** `(editor: EditorInstance) => void` **Default:** `undefined` **Examples:** ```tsx // Store editor instance const [editor, setEditor] = useState(null); // Execute commands on ready { editor.focus(); editor.insertBlock('heading', { level: 1 }); }} /> ``` ## Upload Callbacks ### onUploadStart ```tsx { console.log(`Uploading ${filename}...`); setUploading(true); }} /> ``` Called when an image upload begins. **Type:** `(filename: string) => void` **Default:** `undefined` ### onUploadSuccess ```tsx { console.log('Upload complete:', result.url); toast.success('Image uploaded!'); }} /> ``` Called when an upload completes successfully. **Type:** `(result: UploadResult) => void` **Default:** `undefined` ### onUploadError ```tsx { console.error('Upload failed:', error); toast.error(error.message); }} /> ``` Called when an upload fails. **Type:** `(error: Error) => void` **Default:** `undefined` ### onUploadProgress ```tsx { console.log(`${progress.percent}% uploaded`); setUploadProgress(progress.percent); }} /> ``` Called with upload progress updates. **Type:** `(progress: UploadProgress) => void` **Default:** `undefined` ## See Also - [EditorRef API](/docs/api/editor-ref) - Methods available on editor ref - [Events API](/docs/api/events) - Event handling details - [AuthorlyEditor](/docs/components/editor) - Component documentation - [Quick Start](/docs/quick-start) - Getting started guide

Was this helpful?