@ixo/editor 0.2.0 → 1.0.1

package/README.md

@@ -12,7 +12,7 @@ A custom BlockNote editor wrapper built specifically for the IXO team's needs. T
 - 🔗 **Custom Blocks**: Built-in custom blocks including dynamic List block for DID data
 - 🖼️ **Media Support**: Image and file upload handling
 - 🎯 **TypeScript**: Full TypeScript support with exported types
-- 🤝 **Collaboration Ready**: Built-in collaboration configuration options
+- 🤝 **Collaboration Ready**: Built-in Matrix-based collaborative editing with real-time synchronization
 - 📱 **Responsive**: Mobile-friendly editor experience
 
 ## Installation
@@ -50,7 +50,6 @@ import '@ixo/editor/style.css'; // Import IXO custom styles
 function MyEditor() {
   const editor = useCreateIxoEditor({
     theme: 'light',
-    placeholder: 'Start writing...',
     initialContent: [
       {
         type: 'heading',
@@ -91,21 +90,15 @@ const editor = useCreateIxoEditor(options?: IxoEditorOptions);
 | Option | Type | Default | Description |
 |--------|------|---------|-------------|
 | `theme` | `'light' \| 'dark'` | `'light'` | Editor color theme |
-| `placeholder` | `string` | `'Start typing or press "/" for commands...'` | Placeholder text |
 | `uploadFile` | `(file: File) => Promise<string>` | Data URL converter | File upload handler |
 | `initialContent` | `PartialBlock[]` | `undefined` | Initial editor content |
 | `editable` | `boolean` | `true` | Whether editor is editable |
-| `animations` | `boolean` | `true` | Enable/disable animations |
 | `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 |
-| `trailingBlock` | `boolean` | `true` | Add trailing paragraph block |
-| `placeholders` | `Record<string, string>` | `{}` | Custom placeholders for blocks |
-| `dictionary` | `Record<string, string>` | `{}` | Custom translations |
-| `collaboration` | `CollaborationConfig` | `undefined` | Collaboration settings |
 
 ### `IxoEditor` Component
 
@@ -151,20 +144,36 @@ const editor = useCreateIxoEditor({
 });
 ```
 
-### Collaboration
+### Collaborative Editing
+
+For real-time collaborative editing, use the `useCreateCollaborativeIxoEditor` hook with Matrix protocol:
 
 ```tsx
-const editor = useCreateIxoEditor({
-  collaboration: {
-    documentId: 'doc-123',
-    websocketUrl: 'wss://collab.example.com',
+import { useCreateCollaborativeIxoEditor, IxoEditor } from '@ixo/editor';
+
+function CollaborativeEditor() {
+  const { editor, connectionStatus } = useCreateCollaborativeIxoEditor({
+    theme: 'light',
     user: {
-      id: 'user-456',
+      id: 'user-123',
       name: 'John Doe',
-      color: '#FF5733'
+      color: '#FF5733',
+      accessToken: 'your-matrix-access-token',
+      address: 'your-user-address'
+    },
+    matrix: {
+      roomId: '!roomId:matrix.org',
+      baseUrl: 'https://matrix.org'
     }
-  }
-});
+  });
+
+  return (
+    <div>
+      <div>Connection: {connectionStatus}</div>
+      <IxoEditor editor={editor} />
+    </div>
+  );
+}
 ```
 
 ### Accessing Editor Content
@@ -211,9 +220,15 @@ const editor = useCreateIxoEditor({
 
 ## Custom Blocks
 
+The IXO Editor includes two custom blocks for working with IXO ecosystem data:
+
 ### List Block
 
-The IXO Editor includes a custom List block for displaying dynamic data from DID and fragment identifiers. This block is perfect for displaying data from your GraphQL API.
+The List block displays dynamic data from DID and fragment identifiers, perfect for displaying data from your GraphQL API.
+
+### Overview Block  
+
+The Overview block provides a comprehensive view of entity data from DID identifiers.
 
 #### Features
 
@@ -227,10 +242,16 @@ The IXO Editor includes a custom List block for displaying dynamic data from DID
 
 The List block 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  
+2. Or type `/` and search for "Overview", "overview-block", or "data-overview"
+3. Configure the DID in the settings
+
 #### Programmatic Usage
 
 ```tsx
@@ -243,6 +264,14 @@ editor.insertBlocks([{
     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');
 ```
 
 #### Integration with GraphQL
@@ -299,15 +328,29 @@ npm run type-check
 ixo-editor/
 ├── src/
 │   ├── components/      # React components
-│   │   └── IxoEditor.tsx
+│   │   ├── IxoEditor.tsx
+│   │   ├── SettingsModal/
+│   │   ├── ui/         # Shadcn/UI components
+│   │   └── icons/      # Custom icon components
 │   ├── hooks/           # Custom hooks
-│   │   └── useCreateIxoEditor.ts
+│   │   ├── 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
+│   │   ├── index.ts
+│   │   └── Domain.ts
 │   └── index.ts         # Main entry point
-├── lib/                 # Built output (generated)
+├── dist/                # Built output (generated)
 ├── package.json
 ├── tsconfig.json
 └── README.md
@@ -318,6 +361,7 @@ ixo-editor/
 - React 18.0.0 or higher
 - React DOM 18.0.0 or higher
 - Modern browser with ES2020 support
+- For collaborative editing: Matrix server access
 
 ## License
 

package/dist/components/ui/button.js

@@ -38,7 +38,7 @@ exports.Button = Button;
 const React = __importStar(require("react"));
 const react_slot_1 = require("@radix-ui/react-slot");
 const class_variance_authority_1 = require("class-variance-authority");
-const utils_1 = require("@/lib/utils");
+const utils_1 = require("../../lib/utils");
 const buttonVariants = (0, class_variance_authority_1.cva)("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", {
     variants: {
         variant: {

package/dist/components/ui/card.js

@@ -35,7 +35,7 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CardContent = exports.CardDescription = exports.CardTitle = exports.CardFooter = exports.CardHeader = exports.Card = void 0;
 const React = __importStar(require("react"));
-const utils_1 = require("@/lib/utils");
+const utils_1 = require("../../lib/utils");
 const Card = React.forwardRef(({ className, ...props }, ref) => (React.createElement("div", { ref: ref, className: (0, utils_1.cn)("rounded-lg border bg-card text-card-foreground shadow-sm", className), ...props })));
 exports.Card = Card;
 Card.displayName = "Card";

package/dist/components/ui/dialog.js

@@ -46,7 +46,7 @@ exports.DialogTrigger = DialogTrigger;
 const React = __importStar(require("react"));
 const DialogPrimitive = __importStar(require("@radix-ui/react-dialog"));
 const lucide_react_1 = require("lucide-react");
-const utils_1 = require("@/lib/utils");
+const utils_1 = require("../../lib/utils");
 function Dialog({ ...props }) {
     return React.createElement(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
 }

package/dist/components/ui/label.js

@@ -36,7 +36,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Label = Label;
 const React = __importStar(require("react"));
 const LabelPrimitive = __importStar(require("@radix-ui/react-label"));
-const utils_1 = require("@/lib/utils");
+const utils_1 = require("../../lib/utils");
 function Label({ className, ...props }) {
     return (React.createElement(LabelPrimitive.Root, { "data-slot": "label", className: (0, utils_1.cn)("flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className), ...props }));
 }

package/dist/components/ui/toggle.js

@@ -38,7 +38,7 @@ exports.Toggle = Toggle;
 const React = __importStar(require("react"));
 const TogglePrimitive = __importStar(require("@radix-ui/react-toggle"));
 const class_variance_authority_1 = require("class-variance-authority");
-const utils_1 = require("@/lib/utils");
+const utils_1 = require("../../lib/utils");
 const toggleVariants = (0, class_variance_authority_1.cva)("inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap", {
     variants: {
         variant: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ixo/editor",
-  "version": "0.2.0",
+  "version": "1.0.1",
   "description": "A custom BlockNote editor wrapper for IXO team",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -18,6 +18,16 @@
     },
     "./style.css": "./style.css"
   },
+  "scripts": {
+    "build": "tsc && tsc-alias && npm run copy-css",
+    "copy-css": "node scripts/build-css.js",
+    "build:watch": "tsc --watch",
+    "dev": "tsc --watch",
+    "clean": "rimraf dist style.css",
+    "prepare": "npm run clean && npm run build",
+    "type-check": "tsc --noEmit",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
   "keywords": [
     "editor",
     "blocknote",
@@ -54,28 +64,26 @@
     "yjs": "^13.6.27"
   },
   "devDependencies": {
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/commit-analyzer": "^11.1.0",
+    "@semantic-release/git": "^10.0.1",
+    "@semantic-release/npm": "^11.0.2",
+    "@semantic-release/release-notes-generator": "^12.1.0",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rimraf": "^5.0.0",
+    "semantic-release": "^22.0.12",
+    "tsc-alias": "^1.8.16",
     "typescript": "^5.0.0"
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/ixofoundation/ixo-editor.git"
+    "url": "https://github.com/ixoworld/editor.git"
   },
-  "homepage": "https://github.com/ixofoundation/ixo-editor#readme",
+  "homepage": "https://github.com/ixoworld/editor#readme",
   "bugs": {
-    "url": "https://github.com/ixofoundation/ixo-editor/issues"
-  },
-  "scripts": {
-    "build": "tsc && npm run copy-css",
-    "copy-css": "node scripts/build-css.js",
-    "build:watch": "tsc --watch",
-    "dev": "tsc --watch",
-    "clean": "rimraf dist style.css",
-    "type-check": "tsc --noEmit",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "url": "https://github.com/ixoworld/editor/issues"
   }
-}
+}