@ixo/editor 1.1.4 → 1.2.0

package/README.md

@@ -42,13 +42,13 @@ function MyEditor() {
       {
         type: 'heading',
         content: 'Welcome to IXO Editor',
-        props: { level: 1 }
+        props: { level: 1 },
       },
       {
         type: 'paragraph',
-        content: 'Start typing to create amazing content!'
-      }
-    ]
+        content: 'Start typing to create amazing content!',
+      },
+    ],
   });
 
   return <IxoEditor editor={editor} onChange={() => console.log('Content changed')} />;
@@ -70,9 +70,9 @@ function MyEditor() {
       {
         type: 'heading',
         content: 'Welcome to IXO Editor',
-        props: { level: 1 }
-      }
-    ]
+        props: { level: 1 },
+      },
+    ],
   });
 
   return (
@@ -88,17 +88,19 @@ function MyEditor() {
 The package provides flexible import patterns to suit your needs:
 
 ### Option 1: UI-Specific Imports (Recommended)
+
 ```tsx
 // Shadcn version with complete CSS bundle
 import { IxoEditor, useCreateIxoEditor } from '@ixo/editor/shadcn';
 import '@ixo/editor/style-shadcn.css';
 
-// Mantine version with complete CSS bundle  
+// Mantine version with complete CSS bundle
 import { IxoEditor, useCreateIxoEditor } from '@ixo/editor/mantine';
 import '@ixo/editor/style-mantine.css';
 ```
 
 ### Option 2: Default Import (Shadcn)
+
 ```tsx
 // Uses Shadcn version by default for backward compatibility
 import { IxoEditor, useCreateIxoEditor } from '@ixo/editor';
@@ -106,7 +108,8 @@ import '@ixo/editor/style.css';
 ```
 
 ### CSS Bundle Options
-- `@ixo/editor/style-shadcn.css` - Complete bundle: Inter fonts + Shadcn + IXO styles  
+
+- `@ixo/editor/style-shadcn.css` - Complete bundle: Inter fonts + Shadcn + IXO styles
 - `@ixo/editor/style-mantine.css` - Complete bundle: Inter fonts + Mantine + IXO styles
 - `@ixo/editor/style.css` - Default bundle (same as shadcn)
 - `@ixo/editor/style-core.css` - Only IXO custom styles (for advanced users)
@@ -123,18 +126,18 @@ const editor = useCreateIxoEditor(options?: IxoEditorOptions);
 
 #### Options
 
-| Option | Type | Default | Description |
-|--------|------|---------|-------------|
-| `theme` | `'light' \| 'dark'` | `'light'` | Editor color theme |
-| `uploadFile` | `(file: File) => Promise<string>` | Data URL converter | File upload handler |
-| `initialContent` | `PartialBlock[]` | `undefined` | Initial editor content |
-| `editable` | `boolean` | `true` | Whether editor is editable |
-| `sideMenu` | `boolean` | `true` | Show side menu (drag handle, plus button) |
-| `slashMenu` | `boolean` | `true` | Enable slash commands menu |
-| `formattingToolbar` | `boolean` | `true` | Show formatting toolbar |
-| `linkToolbar` | `boolean` | `true` | Show link toolbar |
-| `filePanel` | `boolean` | `true` | Show file panel |
-| `tableHandles` | `boolean` | `true` | Show table manipulation handles |
+| Option              | Type                              | Default            | Description                               |
+| ------------------- | --------------------------------- | ------------------ | ----------------------------------------- |
+| `theme`             | `'light' \| 'dark'`               | `'light'`          | Editor color theme                        |
+| `uploadFile`        | `(file: File) => Promise<string>` | Data URL converter | File upload handler                       |
+| `initialContent`    | `PartialBlock[]`                  | `undefined`        | Initial editor content                    |
+| `editable`          | `boolean`                         | `true`             | Whether editor is editable                |
+| `sideMenu`          | `boolean`                         | `true`             | Show side menu (drag handle, plus button) |
+| `slashMenu`         | `boolean`                         | `true`             | Enable slash commands menu                |
+| `formattingToolbar` | `boolean`                         | `true`             | Show formatting toolbar                   |
+| `linkToolbar`       | `boolean`                         | `true`             | Show link toolbar                         |
+| `filePanel`         | `boolean`                         | `true`             | Show file panel                           |
+| `tableHandles`      | `boolean`                         | `true`             | Show table manipulation handles           |
 
 ### `IxoEditor` Component
 
@@ -151,13 +154,13 @@ The main editor component. Available in both UI versions with identical APIs.
 
 #### Props
 
-| Prop | Type | Description |
-|------|------|-------------|
-| `editor` | `BlockNoteEditor \| undefined` | Editor instance from `useCreateIxoEditor` |
-| `className` | `string` | Additional CSS classes |
-| `onChange` | `() => void` | Callback when content changes |
-| `onSelectionChange` | `() => void` | Callback when selection changes |
-| `children` | `React.ReactNode` | Custom child components |
+| Prop                | Type                           | Description                               |
+| ------------------- | ------------------------------ | ----------------------------------------- |
+| `editor`            | `BlockNoteEditor \| undefined` | Editor instance from `useCreateIxoEditor` |
+| `className`         | `string`                       | Additional CSS classes                    |
+| `onChange`          | `() => void`                   | Callback when content changes             |
+| `onSelectionChange` | `() => void`                   | Callback when selection changes           |
+| `children`          | `React.ReactNode`              | Custom child components                   |
 
 ## Advanced Usage
 
@@ -168,15 +171,15 @@ const editor = useCreateIxoEditor({
   uploadFile: async (file: File) => {
     const formData = new FormData();
     formData.append('file', file);
-    
+
     const response = await fetch('/api/upload', {
       method: 'POST',
       body: formData,
     });
-    
+
     const { url } = await response.json();
     return url;
-  }
+  },
 });
 ```
 
@@ -195,10 +198,10 @@ function CollaborativeEditor() {
       name: 'John Doe',
       color: '#FF5733',
       accessToken: 'your-matrix-access-token',
-      address: 'your-user-address'
+      address: 'your-user-address',
     },
     matrixClient: matrixClient,
-    roomId: '!roomId:matrix.org'
+    roomId: '!roomId:matrix.org',
   });
 
   return (
@@ -214,7 +217,7 @@ function CollaborativeEditor() {
 
 ```tsx
 const editor = useCreateIxoEditor({
-  theme: 'dark'
+  theme: 'dark',
 });
 ```
 
@@ -225,7 +228,7 @@ const editor = useCreateIxoEditor({
   editable: false,
   sideMenu: false,
   slashMenu: false,
-  formattingToolbar: false
+  formattingToolbar: false,
 });
 ```
 
@@ -237,7 +240,7 @@ The IXO Editor includes custom blocks for working with IXO ecosystem data, avail
 
 The List block displays dynamic data from DID and fragment identifiers, perfect for displaying data from your GraphQL API.
 
-### Overview Block  
+### Overview Block
 
 The Overview block provides a comprehensive view of entity data from DID identifiers.
 
@@ -246,12 +249,14 @@ The Overview block provides a comprehensive view of entity data from DID identif
 Both blocks can be inserted using the slash menu:
 
 **List Block:**
+
 1. Type `/list` in the editor
 2. Or type `/` and search for "List", "data", or "dynamic"
 3. Configure the DID and fragment identifier in the settings
 
 **Overview Block:**
-1. Type `/overview` in the editor  
+
+1. Type `/overview` in the editor
 2. Or type `/` and search for "Overview", "overview-block", or "data-overview"
 3. Configure the DID in the settings
 
@@ -259,41 +264,55 @@ Both blocks can be inserted using the slash menu:
 
 ```tsx
 // Insert a list block programmatically
-editor.insertBlocks([{
-  type: 'list',
-  props: {
-    title: 'My Data List',
-    did: 'did:ixo:entity123',
-    fragmentIdentifier: 'claims-data'
-  }
-}], editor.getTextCursorPosition().block, 'after');
+editor.insertBlocks(
+  [
+    {
+      type: 'list',
+      props: {
+        title: 'My Data List',
+        did: 'did:ixo:entity123',
+        fragmentIdentifier: 'claims-data',
+      },
+    },
+  ],
+  editor.getTextCursorPosition().block,
+  'after'
+);
 
 // Insert an overview block programmatically
-editor.insertBlocks([{
-  type: 'overview',
-  props: {
-    did: 'did:ixo:entity123'
-  }
-}], editor.getTextCursorPosition().block, 'after');
+editor.insertBlocks(
+  [
+    {
+      type: 'overview',
+      props: {
+        did: 'did:ixo:entity123',
+      },
+    },
+  ],
+  editor.getTextCursorPosition().block,
+  'after'
+);
 ```
 
 ## UI Library Comparison
 
-| Feature | Shadcn UI | Mantine UI | 
-|---------|-----------|------------|
-| **Bundle Size** | ~46KB CSS | ~173KB CSS |
-| **Custom Blocks** | Full-featured | Minimal (expandable) |
-| **Theming** | Tailwind-based | CSS-in-JS |
-| **Dependencies** | Radix UI primitives | Mantine ecosystem |
+| Feature           | Shadcn UI            | Mantine UI            |
+| ----------------- | -------------------- | --------------------- |
+| **Bundle Size**   | ~46KB CSS            | ~173KB CSS            |
+| **Custom Blocks** | Full-featured        | Minimal (expandable)  |
+| **Theming**       | Tailwind-based       | CSS-in-JS             |
+| **Dependencies**  | Radix UI primitives  | Mantine ecosystem     |
 | **Customization** | High (CSS variables) | High (theme provider) |
 
 ### When to Choose Shadcn UI
+
 - ✅ You're already using Tailwind CSS
-- ✅ You prefer smaller bundle sizes  
+- ✅ You prefer smaller bundle sizes
 - ✅ You want the full-featured custom blocks
 - ✅ You like CSS variable-based theming
 
-### When to Choose Mantine UI  
+### When to Choose Mantine UI
+
 - ✅ You're already using Mantine in your app
 - ✅ You prefer component-based theming
 - ✅ You want consistent Mantine design language
@@ -306,7 +325,7 @@ editor.insertBlocks([{
 ```
 ixo-editor/
 ├── src/
-│   ├── core/            # Shared infrastructure  
+│   ├── core/            # Shared infrastructure
 │   │   ├── types.ts     # Shared types
 │   │   ├── hooks/       # Matrix provider
 │   │   └── lib/         # GraphQL client & utilities
@@ -316,7 +335,7 @@ ixo-editor/
 │   │   ├── components/  # Shadcn UI components
 │   │   ├── hooks/       # Editor hooks
 │   │   └── index.ts     # Shadcn exports
-│   ├── mantine/         # Mantine UI implementation  
+│   ├── mantine/         # Mantine UI implementation
 │   │   ├── IxoEditor.tsx
 │   │   ├── blocks/      # Minimal custom blocks
 │   │   ├── hooks/       # Editor hooks
@@ -359,10 +378,12 @@ pnpm run type-check
 ### Additional Requirements by UI Library
 
 **For Mantine version:**
+
 - `@mantine/core` ^8.0.0 (peer dependency)
 - `@mantine/hooks` ^8.0.0 (peer dependency)
 
 **For Shadcn version:**
+
 - Works with existing Tailwind CSS setup
 - No additional peer dependencies
 
@@ -371,6 +392,7 @@ pnpm run type-check
 ### From v1.x to v2.x (Multi-UI)
 
 **Before (v1.x):**
+
 ```tsx
 import { IxoEditor } from '@ixo/editor';
 import '@blocknote/shadcn/style.css';
@@ -378,6 +400,7 @@ import '@ixo/editor/style.css';
 ```
 
 **After (v2.x) - Recommended:**
+
 ```tsx
 // Explicit shadcn version with complete CSS bundle
 import { IxoEditor } from '@ixo/editor/shadcn';
@@ -385,6 +408,7 @@ import '@ixo/editor/style-shadcn.css'; // Single import!
 ```
 
 **After (v2.x) - Backward compatible:**
+
 ```tsx
 // Still works! (defaults to shadcn)
 import { IxoEditor } from '@ixo/editor';
@@ -404,10 +428,11 @@ This package is maintained by the IXO development team. For questions or issues,
 ### Version Management
 
 Follow semantic versioning:
+
 - Patch releases (0.0.x): Bug fixes and minor updates
 - Minor releases (0.x.0): New features that are backward compatible
 - Major releases (x.0.0): Breaking changes (like the multi-UI restructure)
 
 ### Contributing
 
-This is an internal package. All contributions should go through the standard IXO development workflow and review process.
+This is an internal package. All contributions should go through the standard IXO development workflow and review process.