@ixo/editor 1.0.1 → 1.1.0

package/README.md

@@ -1,12 +1,12 @@
 # IXO Editor
 
-A custom BlockNote editor wrapper built specifically for the IXO team's needs. This package provides a highly customized rich text editing experience built on top of [BlockNote](https://www.blocknotejs.org/).
+A custom BlockNote editor wrapper built specifically for the IXO team's needs. This package provides a highly customized rich text editing experience built on top of [BlockNote](https://www.blocknotejs.org/) with support for both **Shadcn UI** and **Mantine UI**.
 
 > **Note**: This package is designed for internal IXO team use and is not intended for public consumption, though it is hosted publicly.
 
 ## Features
 
-- 🎨 **Custom Theming**: Light and dark theme support with IXO-specific styling
+- 🎨 **Multi-UI Support**: Choose between Shadcn UI or Mantine UI components
 - 🔧 **Simplified API**: Wrapped BlockNote functionality with sensible defaults
 - 📝 **Rich Text Editing**: Full support for headings, lists, code blocks, tables, and more
 - 🔗 **Custom Blocks**: Built-in custom blocks including dynamic List block for DID data
@@ -14,6 +14,7 @@ A custom BlockNote editor wrapper built specifically for the IXO team's needs. T
 - 🎯 **TypeScript**: Full TypeScript support with exported types
 - 🤝 **Collaboration Ready**: Built-in Matrix-based collaborative editing with real-time synchronization
 - 📱 **Responsive**: Mobile-friendly editor experience
+- 💎 **Complete CSS Bundles**: Self-contained CSS with all dependencies included
 
 ## Installation
 
@@ -25,27 +26,14 @@ yarn add @ixo/editor
 pnpm add @ixo/editor
 ```
 
-### Important: Import Required Styles
-
-The IXO Editor requires two CSS imports:
-
-```tsx
-// Import BlockNote's shadcn styles
-import '@blocknote/shadcn/style.css';
-
-// Import IXO Editor custom styles
-import '@ixo/editor/style.css';
-```
-
-**Note for Next.js users**: Make sure to import these styles in your `_app.tsx` or at the component level where you use the editor.
-
 ## Quick Start
 
+### Shadcn UI Version (Default)
+
 ```tsx
 import React from 'react';
-import { useCreateIxoEditor, IxoEditor } from '@ixo/editor';
-import '@blocknote/shadcn/style.css'; // Import BlockNote shadcn styles
-import '@ixo/editor/style.css'; // Import IXO custom styles
+import { useCreateIxoEditor, IxoEditor } from '@ixo/editor/shadcn';
+import '@ixo/editor/style-shadcn.css'; // Complete CSS bundle - no other imports needed!
 
 function MyEditor() {
   const editor = useCreateIxoEditor({
@@ -59,14 +47,6 @@ function MyEditor() {
       {
         type: 'paragraph',
         content: 'Start typing to create amazing content!'
-      },
-      {
-        type: 'list',
-        props: {
-          title: 'Dynamic List',
-          did: 'did:example:123',
-          fragmentIdentifier: 'sample-data'
-        }
       }
     ]
   });
@@ -75,11 +55,67 @@ function MyEditor() {
 }
 ```
 
+### Mantine UI Version
+
+```tsx
+import React from 'react';
+import { MantineProvider } from '@mantine/core';
+import { useCreateIxoEditor, IxoEditor } from '@ixo/editor/mantine';
+import '@ixo/editor/style-mantine.css'; // Complete CSS bundle - no other imports needed!
+
+function MyEditor() {
+  const editor = useCreateIxoEditor({
+    theme: 'light',
+    initialContent: [
+      {
+        type: 'heading',
+        content: 'Welcome to IXO Editor',
+        props: { level: 1 }
+      }
+    ]
+  });
+
+  return (
+    <MantineProvider>
+      <IxoEditor editor={editor} onChange={() => console.log('Content changed')} />
+    </MantineProvider>
+  );
+}
+```
+
+## Import Options
+
+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  
+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';
+import '@ixo/editor/style.css';
+```
+
+### CSS Bundle Options
+- `@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)
+
 ## API Reference
 
 ### `useCreateIxoEditor`
 
-The main hook for creating an IXO editor instance.
+The main hook for creating an IXO editor instance. Available in both UI versions.
 
 ```tsx
 const editor = useCreateIxoEditor(options?: IxoEditorOptions);
@@ -102,7 +138,7 @@ const editor = useCreateIxoEditor(options?: IxoEditorOptions);
 
 ### `IxoEditor` Component
 
-The main editor component.
+The main editor component. Available in both UI versions with identical APIs.
 
 ```tsx
 <IxoEditor
@@ -149,7 +185,7 @@ const editor = useCreateIxoEditor({
 For real-time collaborative editing, use the `useCreateCollaborativeIxoEditor` hook with Matrix protocol:
 
 ```tsx
-import { useCreateCollaborativeIxoEditor, IxoEditor } from '@ixo/editor';
+import { useCreateCollaborativeIxoEditor, IxoEditor } from '@ixo/editor/shadcn';
 
 function CollaborativeEditor() {
   const { editor, connectionStatus } = useCreateCollaborativeIxoEditor({
@@ -161,10 +197,8 @@ function CollaborativeEditor() {
       accessToken: 'your-matrix-access-token',
       address: 'your-user-address'
     },
-    matrix: {
-      roomId: '!roomId:matrix.org',
-      baseUrl: 'https://matrix.org'
-    }
+    matrixClient: matrixClient,
+    roomId: '!roomId:matrix.org'
   });
 
   return (
@@ -176,29 +210,6 @@ function CollaborativeEditor() {
 }
 ```
 
-### Accessing Editor Content
-
-```tsx
-function MyEditor() {
-  const editor = useCreateIxoEditor();
-  
-  const handleSave = () => {
-    if (editor) {
-      const content = editor.document;
-      console.log('Editor content:', content);
-      // Save content to your backend
-    }
-  };
-  
-  return (
-    <>
-      <IxoEditor editor={editor} />
-      <button onClick={handleSave}>Save</button>
-    </>
-  );
-}
-```
-
 ### Dark Theme
 
 ```tsx
@@ -220,7 +231,7 @@ const editor = useCreateIxoEditor({
 
 ## Custom Blocks
 
-The IXO Editor includes two custom blocks for working with IXO ecosystem data:
+The IXO Editor includes custom blocks for working with IXO ecosystem data, available in both UI versions:
 
 ### List Block
 
@@ -230,17 +241,9 @@ The List block displays dynamic data from DID and fragment identifiers, perfect
 
 The Overview block provides a comprehensive view of entity data from DID identifiers.
 
-#### Features
-
-- **Editable Title**: Click the title to edit it inline
-- **Settings Panel**: Click the gear icon to configure DID and fragment identifier
-- **Dynamic Data**: Ready for integration with your GraphQL API
-- **Responsive Design**: Works on all device sizes
-- **Theme Support**: Automatically adapts to light/dark themes
-
 #### Usage
 
-The List block can be inserted using the slash menu:
+Both blocks can be inserted using the slash menu:
 
 **List Block:**
 1. Type `/list` in the editor
@@ -274,86 +277,76 @@ editor.insertBlocks([{
 }], editor.getTextCursorPosition().block, 'after');
 ```
 
-#### Integration with GraphQL
+## UI Library Comparison
 
-Replace the mock data in `ListBlock.tsx` with your actual GraphQL call:
+| 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) |
 
-```tsx
-// Example integration (replace mockListItems in ListBlock.tsx)
-const { data, loading, error } = useQuery(GET_DATA_BY_DID, {
-  variables: { 
-    did: settings.did, 
-    fragmentIdentifier: settings.fragmentIdentifier 
-  },
-  skip: !settings.did || !settings.fragmentIdentifier
-});
+### When to Choose Shadcn UI
+- ✅ You're already using Tailwind CSS
+- ✅ You prefer smaller bundle sizes  
+- ✅ You want the full-featured custom blocks
+- ✅ You like CSS variable-based theming
 
-const listItems = data?.items || [];
-```
+### When to Choose Mantine UI  
+- ✅ You're already using Mantine in your app
+- ✅ You prefer component-based theming
+- ✅ You want consistent Mantine design language
+- ✅ You plan to enhance the minimal blocks with Mantine components
 
-## Styling
+## Development
 
-The editor comes with default styles, but you can override them using CSS custom properties:
+### Project Structure
 
-```css
-.ixo-editor {
-  --bn-colors-editor-background: #f5f5f5;
-  --bn-colors-editor-text: #333333;
-  --bn-colors-highlight-colors-blue: #0066cc;
-  /* ...more custom properties */
-}
 ```
-
-## Development
+ixo-editor/
+├── src/
+│   ├── core/            # Shared infrastructure  
+│   │   ├── types.ts     # Shared types
+│   │   ├── hooks/       # Matrix provider
+│   │   └── lib/         # GraphQL client & utilities
+│   ├── shadcn/          # Shadcn UI implementation
+│   │   ├── IxoEditor.tsx
+│   │   ├── blocks/      # Full-featured custom blocks
+│   │   ├── components/  # Shadcn UI components
+│   │   ├── hooks/       # Editor hooks
+│   │   └── index.ts     # Shadcn exports
+│   ├── mantine/         # Mantine UI implementation  
+│   │   ├── IxoEditor.tsx
+│   │   ├── blocks/      # Minimal custom blocks
+│   │   ├── hooks/       # Editor hooks
+│   │   └── index.ts     # Mantine exports
+│   ├── styles/          # Source CSS
+│   │   └── ixo-editor.css
+│   └── index.ts         # Main entry (defaults to shadcn)
+├── fonts/               # Inter font files
+├── dist/                # Built JavaScript
+│   ├── index.js         # Main bundle
+│   ├── shadcn/          # Shadcn bundle
+│   └── mantine/         # Mantine bundle
+├── style*.css           # CSS bundles
+└── package.json
+```
 
 ### Building the Package
 
 ```bash
 # Install dependencies
-npm install
+pnpm install
 
-# Build the package
-npm run build
+# Build the package (creates all bundles)
+pnpm build
 
 # Watch for changes during development
-npm run dev
+pnpm run dev
 
 # Type checking
-npm run type-check
-```
-
-### Project Structure
-
-```
-ixo-editor/
-├── src/
-│   ├── components/      # React components
-│   │   ├── IxoEditor.tsx
-│   │   ├── SettingsModal/
-│   │   ├── ui/         # Shadcn/UI components
-│   │   └── icons/      # Custom icon components
-│   ├── hooks/           # Custom hooks
-│   │   ├── useCreateIxoEditor.ts
-│   │   ├── useCollaborativeIxoEditor.ts
-│   │   └── useMatrixProvider.ts
-│   ├── blocks/          # Custom block implementations
-│   │   ├── list/       # List block
-│   │   ├── overview/   # Overview block
-│   │   └── index.ts
-│   ├── lib/            # Utilities and GraphQL
-│   │   ├── graphql-client.ts
-│   │   ├── graphql-queries.ts
-│   │   └── utils/
-│   ├── styles/          # CSS styles
-│   │   └── ixo-editor.css
-│   ├── types/           # TypeScript types
-│   │   ├── index.ts
-│   │   └── Domain.ts
-│   └── index.ts         # Main entry point
-├── dist/                # Built output (generated)
-├── package.json
-├── tsconfig.json
-└── README.md
+pnpm run type-check
 ```
 
 ## Requirements
@@ -363,6 +356,41 @@ ixo-editor/
 - Modern browser with ES2020 support
 - For collaborative editing: Matrix server access
 
+### 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
+
+## Migration Guide
+
+### From v1.x to v2.x (Multi-UI)
+
+**Before (v1.x):**
+```tsx
+import { IxoEditor } from '@ixo/editor';
+import '@blocknote/shadcn/style.css';
+import '@ixo/editor/style.css';
+```
+
+**After (v2.x) - Recommended:**
+```tsx
+// Explicit shadcn version with complete CSS bundle
+import { IxoEditor } from '@ixo/editor/shadcn';
+import '@ixo/editor/style-shadcn.css'; // Single import!
+```
+
+**After (v2.x) - Backward compatible:**
+```tsx
+// Still works! (defaults to shadcn)
+import { IxoEditor } from '@ixo/editor';
+import '@ixo/editor/style.css'; // Now includes all dependencies
+```
+
 ## License
 
 MIT © IXO Team
@@ -373,17 +401,13 @@ MIT © IXO Team
 
 This package is maintained by the IXO development team. For questions or issues, please contact the team directly through internal channels.
 
-### Deployment
-
-The package is deployed to npm under the `@ixo/editor` scope. Only team members with appropriate npm permissions can publish new versions.
-
 ### 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
+- 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.