@datalayer/lexical-loro 0.0.7 → 0.2.1

package/README.md

@@ -2,7 +2,7 @@
 
 [![Become a Sponsor](https://img.shields.io/static/v1?label=Become%20a%20Sponsor&message=%E2%9D%A4&logo=GitHub&style=flat&color=1ABC9C)](https://github.com/sponsors/datalayer)
 
-# ✍️ 🦜 Lexical Loro - Collaborative Plugin for Lexical with Loro CRDT
+# ✍️ 🦜 Collaborative Plugin for Lexical with Loro CRDT
 
 A collaborative editing plugin for [Lexical](https://github.com/facebook/lexical) Rich Editor built with [Loro](https://github.com/loro-dev) CRDT, providing real-time collaborative editing capabilities with conflict-free synchronization.
 
@@ -305,151 +305,38 @@ The examples include:
 
 See `src/examples/README.md` for detailed example documentation.
 
-## Project Structure
-
-### Core Components
-
-```
-src/
-├── LoroCollaborativePlugin.tsx         # Main Lexical plugin for collaboration
-└── vite-env.d.ts                       # TypeScript definitions
-
-lexical_loro/                           # Python WebSocket server package
-├── __init__.py                         # Package exports
-├── server.py                           # WebSocket server implementation  
-├── cli.py                              # Command line interface
-├── model/
-│   └── lexical_model.py                # Standalone LexicalModel library
-└── tests/                              # Python test suite
-
-docs/
-└── LEXICAL_MODEL_GUIDE.md              # Comprehensive library documentation
-
-examples/
-├── memory_only_example.py              # Basic LexicalModel usage
-├── file_sync_example.py                # File persistence example
-├── collaboration_example.py            # Collaborative editing simulation
-└── README.md                           # Examples documentation
-
-pyproject.toml                          # Python package configuration
-```
-
-### Examples Directory
-
-```
-src/examples/                           # Complete demo application
-├── App.tsx                             # Demo app with dual editors
-├── LexicalCollaborativeEditor.tsx      # Rich text editor example
-├── TextAreaCollaborativeEditor.tsx     # Simple text editor example
-├── ServerSelector.tsx                  # Server selection UI
-├── LexicalToolbar.tsx                  # Rich text toolbar
-├── main.tsx                            # Demo app entry point
-└── *.css                               # Styling for examples
-
-servers/
-└── server.ts                           # Node.js server (for comparison)
-```
-
-### Archive
-
-```
-src/archive/                            # Historical plugin implementations
-├── LoroCollaborativePlugin0.tsx        # Previous versions for reference
-├── LoroCollaborativePlugin1.tsx
-├── LoroCollaborativePlugin2.tsx
-├── LoroCollaborativePlugin3.tsx
-├── LoroCollaborativePlugin4.tsx
-└── LoroCollaborativePlugin5.tsx
-```
-
 ## Architecture
 
-For detailed architecture documentation, see [`docs/ARCHITECTURE.md`](docs/ARCHITECTURE.md).
-
-### System Overview
-
-The collaboration system consists of three main components:
-
-1. **LoroCollaborativePlugin** (Client-side) - Lexical integration
-2. **LoroWebSocketServer** (Server-side) - Real-time synchronization  
-3. **LexicalModel** (Standalone Library) - Independent document model
-
-### Data Flow
-
 ```
-User Types → Lexical Editor → Plugin → Loro CRDT → WebSocket
-                                                        ↓
-WebSocket ← Loro CRDT ← Plugin ← Lexical Editor ← Other Users
+EDITOR 1                                           EDITOR 2
+
+loro                                               loro
+- node(data: root(1))                              - node(data: root(12))
+  - node(data: element(2))                           - node(data: element(22))
+    - node(data: text(3))                              - node(data: text(13))
+  - node(data: counter(4))                           - node(data: counter(4))
+
+                <---- loro updates via websocket ------>
+                <---- loro node ids are the same ------>
+             <---- lexical node keys are different ------>
+
+lexical                                            lexical
+- root(1)                                          - root(12)
+  - element(2)                                       - element(22)
+    - text(3)                                          - text(13)
+  - counter(4)                                       - counter(49)
 ```
 
-## Configuration
-
-For detailed configuration options, see [`docs/API.md`](docs/API.md).
-
-### Quick Configuration
-
-```tsx
-// Plugin configuration
-<LoroCollaborativePlugin 
-  websocketUrl="ws://localhost:8081"
-  docId="my-document"
-  username="user123"
-  debug={true}
-/>
-```
-
-```bash
-# Server configuration
-lexical-loro-server --port 8081 --log-level DEBUG
-```
-
-## Development
-
-For comprehensive development guidelines, see [`docs/DEVELOPMENT.md`](docs/DEVELOPMENT.md).
-
-### Quick Start
-
-```bash
-# Install dependencies
-npm install
-pip install -e ".[dev]"
-
-# Run tests
-npm test
-npm run test:py
-
-# Start development server
-lexical-loro-server --log-level DEBUG
-```
-
-## Contributing
-
-We welcome contributions! Please see [`docs/DEVELOPMENT.md`](docs/DEVELOPMENT.md) for detailed guidelines.
-
-### Quick Contributing Guide
-
-1. Fork the repository
-2. Create a feature branch  
-3. Focus changes on core components
-4. Add tests for new functionality
-5. Update documentation as needed
-6. Submit a pull request
+## Examples
 
-## Documentation
+Loro examples
 
-- **[API Documentation](docs/API.md)** - Complete API reference
-- **[Initialization Guide](docs/INITIALIZATION_GUIDE.md)** - Best practices for setup
-- **[Architecture](docs/ARCHITECTURE.md)** - System design and data flow
-- **[Development Guide](docs/DEVELOPMENT.md)** - Contributing and development setup
-- **[LexicalModel Guide](docs/LEXICAL_MODEL_GUIDE.md)** - Standalone library documentation
+- http://localhost:3000/?isCollab=true
 
-## License
+- http://localhost:3000/split/?isCollab=true
 
-This project is open source and available under the [MIT License](LICENSE).
+Y.js examples (for reference)
 
-## Acknowledgments
+- http://localhost:3000/?isCollab=true&useYjs=true
 
-- [Loro CRDT](https://loro.dev/) - The CRDT library powering collaborative editing
-- [Lexical](https://lexical.dev/) - Facebook's extensible text editor framework  
-- [React](https://reactjs.org/) - UI library for plugin hooks
-- [WebSocket](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API) - Real-time communication
+- http://localhost:3000/split/?isCollab=true&useYjs=true

package/package.json

@@ -1,93 +1,124 @@
 {
   "name": "@datalayer/lexical-loro",
-  "private": false,
-  "version": "0.0.7",
-  "type": "module",
-  "description": "Collaborative editing solution for Lexical based on Loro CRDT",
+  "version": "0.2.1",
   "main": "lib/index.js",
-  "types": "lib/index.d.ts",
   "files": [
-    "lib/**/*.*"
+    "lib/**/*.{css,d.ts,eot,gif,html,jpg,js,js.map,json,png,svg,woff2,ttf}",
+    "style/**/*.{css,js,eot,gif,html,jpg,json,png,svg,woff2,ttf}",
+    "schema/*.json"
   ],
   "keywords": [
-    "lexical",
-    "loro",
-    "crdt",
-    "collaborative",
-    "editor",
-    "plugin",
-    "react",
-    "rich-editor"
+    "jupyter",
+    "jupyterlab",
+    "react"
   ],
   "repository": {
     "type": "git",
     "url": "https://github.com/datalayer/lexical-loro.git"
   },
-  "author": "Datalayer <info@datalayer.io>",
-  "license": "MIT",
+  "sideEffects": [
+    "style/*.css",
+    "src/**/*.css",
+    "style/index.js"
+  ],
+  "styleModule": "style/index.js",
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
     "build": "tsc -b && vite build",
+    "dev": "cross-env NODE_ENV=development concurrently \"npm:server:py:ws\" \"npm:server:py:mcp\" \"vite --host --port 3000\"",
+    "build:tsc": "tsc",
+    "build:dev": "vite build",
+    "build:prod": "vite build --mode production",
+    "server:loro": "fkill -s :1235 && cross-env HOST=localhost PORT=1235 YPERSISTENCE=./.wss-loro tsx src/collab/loro/servers/ws/server.ts",
+    "server:yjs": "fkill -s :1234 && cross-env HOST=localhost PORT=1234 YPERSISTENCE=./.wss-yjs tsx src/collab/yjs/servers/ws/server.ts",
+    "server:yjs:dist": "cross-env HOST=localhost PORT=1234 YPERSISTENCE=./.yjs-wss-db npx y-websocket",
+    "test": "npm run test:js && npm run test:py",
+    "test:watch": "jest --watch",
+    "test:coverage": "npm run test:js:coverage && npm run test:py:coverage",
+    "test:js:coverage": "jest --coverage",
+    "preview": "vite preview",
+    "watch:lib": "tsc -b -w",
     "clean": "rimraf dist lib",
-    "dev": "npm run example",
     "dev:all:js": "npm run example:js",
     "dev:all:py": "npm run example:py",
     "dev:vite": "npm run example:vite",
-    "example": "concurrently \"npm run server\" \"npm run server:py\" \"npm run server:mcp\" \"npm run example:vite\"",
+    "example": "concurrently \"npm run server\" \"npm run server:py\" \"npm run server:py:mcp\" \"npm run example:vite\"",
     "example:js": "concurrently \"npm run server\" \"npm run example:vite\"",
     "example:py": "concurrently \"npm run server:py:dev\" \"npm run example:vite\"",
     "example:vite": "vite",
     "lint": "eslint .",
-    "preview": "vite preview",
     "server": "tsx dev/node-server.ts",
     "server:py": "lexical-loro-server",
     "server:py:dev": "python3 -m lexical_loro.cli",
-    "server:mcp": "python3 -m lexical_loro.mcp start --transport streamable-http --port 3001 --host 0.0.0.0",
-    "test": "vitest",
+    "server:py:ws": "python3 -m lexical_loro.cli --host localhost --port 3002 --autosave-interval 5",
+    "server:py:mcp": "python3 -m lexical_loro.mcp start --transport streamable-http --host 0.0.0.0 --port 3001 --websocket-url ws://localhost:3002 --documents-path ./documents --log-level DEBUG",
     "test:js": "vitest run",
-    "test:py": "python3 -m pytest lexical_loro/tests/ -v",
-    "test:py:coverage": "python3 -m pytest lexical_loro/tests/ --cov=. --cov-report=html --cov-report=term",
-    "test:py:watch": "python3 -m pytest lexical_loro/tests/ -v --tb=short -f",
-    "watch:lib": "tsc -b -w"
+    "test:py": "python3 -m pytest tests/ -v",
+    "test:py:coverage": "python3 -m pytest tests/ --cov=lexical_loro --cov-report=html --cov-report=term",
+    "test:py:watch": "python3 -m pytest tests/ -v --tb=short -f"
   },
   "dependencies": {
-    "loro-crdt": "^1.5.10",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "lexical": "^0.33.1",
-    "@lexical/react": "^0.33.1",
-    "@lexical/selection": "^0.33.1"
+    "@datalayer/primer-addons": "^1.0.8",
+    "@floating-ui/react": "^0.27.8",
+    "@lexical/clipboard": "^0.35.0",
+    "@lexical/code": "^0.35.0",
+    "@lexical/code-shiki": "^0.35.0",
+    "@lexical/file": "^0.35.0",
+    "@lexical/hashtag": "^0.35.0",
+    "@lexical/headless": "^0.35.0",
+    "@lexical/link": "^0.35.0",
+    "@lexical/list": "^0.35.0",
+    "@lexical/mark": "^0.35.0",
+    "@lexical/overflow": "^0.35.0",
+    "@lexical/plain-text": "^0.35.0",
+    "@lexical/react": "^0.35.0",
+    "@lexical/rich-text": "^0.35.0",
+    "@lexical/selection": "^0.35.0",
+    "@lexical/table": "^0.35.0",
+    "@lexical/utils": "^0.35.0",
+    "date-fns": "^4.1.0",
+    "katex": "^0.16.10",
+    "lexical": "^0.35.0",
+    "lodash-es": "^4.17.21",
+    "loro-crdt": "^1.8.0",
+    "prettier": "^2.8.8",
+    "react": "^18.2.0",
+    "react-day-picker": "^9.7.0",
+    "react-dom": "^18.2.0",
+    "react-error-boundary": "^3.1.4",
+    "y-websocket": "3.0.0",
+    "yjs": ">=13.5.42"
   },
   "devDependencies": {
-    "@eslint/js": "^9.30.1",
-    "@types/react": "18.3.20",
-    "@types/react-dom": "18.3.6",
-    "@types/ws": "^8.18.1",
-    "@vitejs/plugin-react": "^4.6.0",
+    "@babel/plugin-transform-flow-strip-types": "^7.24.7",
+    "@babel/preset-react": "^7.24.7",
+    "@excalidraw/excalidraw": "^0.18.0",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@types/jest": "^29.5.12",
+    "@types/lodash-es": "^4.14.182",
+    "@types/prettier": "^3.0.0",
+    "@vitejs/plugin-react": "^4.2.1",
     "concurrently": "^9.2.0",
+    "cross-env": "^7.0.3",
     "eslint": "^9.30.1",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
-    "globals": "^16.3.0",
-    "@lexical/code": "^0.33.1",
-    "@lexical/history": "^0.33.1",
-    "@lexical/html": "^0.33.1",
-    "@lexical/list": "^0.33.1",
-    "@lexical/mark": "^0.33.1",
-    "@lexical/plain-text": "^0.33.1",
-    "@lexical/rich-text": "^0.33.1",
-    "@lexical/table": "^0.33.1",
-    "@lexical/utils": "^0.33.1",
-    "rimraf": "^6.0.1",
-    "tsx": "^4.20.3",
-    "typescript": "~5.8.3",
-    "typescript-eslint": "^8.35.1",
-    "vite": "^7.0.4",
-    "vitest": "^2.1.4",
+    "fkill-cli": "^8.0.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "prettier": "^3.3.2",
+    "rollup-plugin-copy": "^3.5.0",
+    "ts-jest": "^29.1.2",
+    "ts-node": "^10.9.2",
+    "tsx": "^4.20.5",
+    "typescript": "^5.9.2",
+    "vite": "^7.0.0",
+    "vite-plugin-static-copy": "^3.1.2",
     "vite-plugin-top-level-await": "^1.6.0",
     "vite-plugin-wasm": "^3.5.0",
-    "ws": "^8.18.3"
+    "vitest": "^3.2.4"
   }
 }

package/lib/DiffMerge.d.ts

@@ -1,39 +0,0 @@
-import { type LexicalEditor } from 'lexical';
-/**
- * DiffMerge System for Lexical Editor
- *
- * This module provides sophisticated differential updates for Lexical editor states,
- * preventing wholesale state replacement that would destroy React decorator nodes
- * like YouTube embeds, counters, and other custom components.
- *
- * Key Features:
- * - Selective node updates (only changed content)
- * - Decorator node preservation (YouTube, Counter nodes remain untouched)
- * - Table structure support with cell-level updates
- * - Graceful fallback for unsupported operations
- * - Deep content comparison to minimize unnecessary updates
- *
- * Usage:
- * ```typescript
- * const success = applyDifferentialUpdate(editor, newState, 'collaboration');
- * if (!success) {
- *   // Fall back to setEditorState if differential update fails
- *   editor.setEditorState(newState);
- * }
- * ```
- */
-interface EditorStateData {
-    root: {
-        type: 'root';
-        children: any[];
-        direction?: string | null;
-        format?: number;
-        indent?: number;
-        version?: number;
-    };
-}
-/**
- * Main function to apply differential updates to the editor
- */
-export declare function applyDifferentialUpdate(editor: LexicalEditor, newStateData: EditorStateData | any, source?: string): boolean;
-export {};