@turnix-co/konva-editor 2.0.9 → 2.0.11

package/README.md

@@ -46,9 +46,16 @@ import {
   Canvas,
   Toolbar,
   SlideNavigation,
+  TopNavBar,
+  BottomToolbar,
+  PublishButton,
+  EditorRoot,
   ReduxProvider,
   store,
-  useSlidesPersistence
+  useSlidesPersistence,
+  type Slide,
+  type PublishProgress,
+  type PublishResponse,
 } from '@turnix-co/konva-editor';
 import '@turnix-co/konva-editor/styles.css';
 import type Konva from 'konva';
@@ -62,24 +69,48 @@ function PersistenceLoader({ children }: { children: React.ReactNode }) {
 export default function EditorPage() {
   const stageRef = useRef<Konva.Stage | null>(null);
 
+  const handlePublish = async (
+    slides: Slide[],
+    onProgress?: (progress: PublishProgress) => void
+  ): Promise<PublishResponse> => {
+    // Your publish logic here
+    return { success: true, message: 'Published!' };
+  };
+
   return (
     <ReduxProvider store={store}>
       <PersistenceLoader>
-        <div style={{
-          width: '100vw',
-          height: '100vh',
-          display: 'flex',
-          flexDirection: 'column',
-          overflow: 'hidden'
-        }}>
+        <EditorRoot
+          style={{
+            width: '100vw',
+            height: '100vh',
+            display: 'flex',
+            flexDirection: 'column',
+            overflow: 'hidden',
+          }}
+        >
+          {/* Header with title and publish button */}
+          <TopNavBar
+            title="My Lesson"
+            autoSaveMessage="Auto-saved just now"
+            onBack={() => window.history.back()}
+            onPublish={handlePublish}
+          />
+
+          {/* Main toolbar */}
           <Toolbar stageRef={stageRef} />
 
+          {/* Canvas area */}
           <div style={{ flex: 1, position: 'relative' }}>
             <Canvas onStageReady={(ref) => { stageRef.current = ref.current; }} />
+
+            {/* Bottom toolbar for pen size and colors (shows when drawing) */}
+            <BottomToolbar />
           </div>
 
+          {/* Slide navigation */}
           <SlideNavigation />
-        </div>
+        </EditorRoot>
       </PersistenceLoader>
     </ReduxProvider>
   );
@@ -112,9 +143,12 @@ export default function EditorPage() {
 | `Canvas` | Main canvas component with drawing, images, videos, and text |
 | `Toolbar` | Toolbar with drawing tools, colors, and actions |
 | `SlideNavigation` | Multi-slide navigation and management |
+| `TopNavBar` | Header with title, auto-save status, and action buttons |
+| `BottomToolbar` | Pen size and color picker toolbar |
+| `LayersPanel` | Layer management panel for reordering elements |
 | `ScreenRecorder` | Screen recording functionality |
 | `PublishButton` | Customizable publish button with progress tracking |
-| `EditorRoot` | Root wrapper that scopes styles (optional) |
+| `EditorRoot` | Root wrapper that scopes styles (required for styling) |
 
 ### Redux Setup
 
@@ -311,6 +345,8 @@ import type {
   CanvasProps,
   ToolbarProps,
   EditorRootProps,
+  TopNavBarProps,
+  BottomToolbarProps,
   ExportOptions,
   PublishProgress,
   PublishResponse,
@@ -319,6 +355,36 @@ import type {
 } from '@turnix-co/konva-editor';
 ```
 
+## Component Props
+
+### TopNavBar
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `title` | `string` | `'Untitled'` | Title displayed in the header |
+| `autoSaveMessage` | `string` | `'Auto-saved just now'` | Auto-save status text |
+| `onBack` | `() => void` | - | Callback when back button clicked |
+| `onSettings` | `() => void` | - | Callback when settings button clicked |
+| `onProfile` | `() => void` | - | Callback when profile button clicked |
+| `onPublish` | `PublishButtonProps['onPublish']` | - | Publish function (shows publish button if provided) |
+| `showBackButton` | `boolean` | `true` | Show/hide back button |
+| `showSettingsButton` | `boolean` | `true` | Show/hide settings button |
+| `showProfileButton` | `boolean` | `true` | Show/hide profile button |
+| `showPublishButton` | `boolean` | `true` | Show/hide publish button |
+| `leftContent` | `React.ReactNode` | - | Custom left side content |
+| `rightContent` | `React.ReactNode` | - | Custom right side content |
+| `className` | `string` | - | Additional CSS classes |
+
+### BottomToolbar
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `colors` | `Array<{name: string, value: string}>` | Default colors | Custom color palette |
+| `showSizeSlider` | `boolean` | `true` | Show/hide pen size slider |
+| `showColorPicker` | `boolean` | `true` | Show/hide color picker |
+| `showBackgroundPicker` | `boolean` | `true` | Show/hide background color picker |
+| `className` | `string` | - | Additional CSS classes |
+
 ## Troubleshooting
 
 ### Recorded Video Not Displaying Full Screen