@datalayer/lexical-loro 0.0.7 → 0.1.0

package/lib/utils/getDOMRangeRect.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+export declare function getDOMRangeRect(nativeSelection: Selection, rootElement: HTMLElement): DOMRect;

package/lib/utils/getDOMRangeRect.js

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+export function getDOMRangeRect(nativeSelection, rootElement) {
+    const domRange = nativeSelection.getRangeAt(0);
+    let rect;
+    if (nativeSelection.anchorNode === rootElement) {
+        let inner = rootElement;
+        while (inner.firstElementChild != null) {
+            inner = inner.firstElementChild;
+        }
+        rect = inner.getBoundingClientRect();
+    }
+    else {
+        rect = domRange.getBoundingClientRect();
+    }
+    return rect;
+}

package/lib/utils/getSelectedNode.d.ts

@@ -0,0 +1,2 @@
+import { ElementNode, RangeSelection, TextNode } from 'lexical';
+export declare function getSelectedNode(selection: RangeSelection): TextNode | ElementNode;

package/lib/utils/getSelectedNode.js

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { $isAtNodeEnd } from '@lexical/selection';
+export function getSelectedNode(selection) {
+    const anchor = selection.anchor;
+    const focus = selection.focus;
+    const anchorNode = selection.anchor.getNode();
+    const focusNode = selection.focus.getNode();
+    if (anchorNode === focusNode) {
+        return anchorNode;
+    }
+    const isBackward = selection.isBackward();
+    if (isBackward) {
+        return $isAtNodeEnd(focus) ? anchorNode : focusNode;
+    }
+    else {
+        return $isAtNodeEnd(anchor) ? anchorNode : focusNode;
+    }
+}

package/lib/utils/getThemeSelector.d.ts

@@ -0,0 +1,2 @@
+import { EditorThemeClasses } from 'lexical';
+export declare function getThemeSelector(getTheme: () => EditorThemeClasses | null | undefined, name: keyof EditorThemeClasses): string;

package/lib/utils/getThemeSelector.js

@@ -0,0 +1,10 @@
+export function getThemeSelector(getTheme, name) {
+    const className = getTheme()?.[name];
+    if (typeof className !== 'string') {
+        throw new Error(`getThemeClass: required theme property ${name} not defined`);
+    }
+    return className
+        .split(/\s+/g)
+        .map((cls) => `.${cls}`)
+        .join();
+}

package/lib/utils/isMobileWidth.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */

package/lib/utils/isMobileWidth.js

@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */

package/lib/utils/joinClasses.d.ts

@@ -0,0 +1 @@
+export default function joinClasses(...args: Array<string | boolean | null | undefined>): string;

package/lib/utils/joinClasses.js

@@ -0,0 +1,3 @@
+export default function joinClasses(...args) {
+    return args.filter(Boolean).join(' ');
+}

package/lib/utils/setFloatingElemPosition.d.ts

@@ -0,0 +1 @@
+export declare function setFloatingElemPosition(targetRect: DOMRect | null, floatingElem: HTMLElement, anchorElem: HTMLElement, isLink?: boolean, verticalGap?: number, horizontalOffset?: number): void;

package/lib/utils/setFloatingElemPosition.js

@@ -0,0 +1,55 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+const VERTICAL_GAP = 10;
+const HORIZONTAL_OFFSET = 5;
+export function setFloatingElemPosition(targetRect, floatingElem, anchorElem, isLink = false, verticalGap = VERTICAL_GAP, horizontalOffset = HORIZONTAL_OFFSET) {
+    const scrollerElem = anchorElem.parentElement;
+    if (targetRect === null || !scrollerElem) {
+        floatingElem.style.opacity = '0';
+        floatingElem.style.transform = 'translate(-10000px, -10000px)';
+        return;
+    }
+    const floatingElemRect = floatingElem.getBoundingClientRect();
+    const anchorElementRect = anchorElem.getBoundingClientRect();
+    const editorScrollerRect = scrollerElem.getBoundingClientRect();
+    let top = targetRect.top - floatingElemRect.height - verticalGap;
+    let left = targetRect.left - horizontalOffset;
+    // Check if text is end-aligned
+    const selection = window.getSelection();
+    if (selection && selection.rangeCount > 0) {
+        const range = selection.getRangeAt(0);
+        const textNode = range.startContainer;
+        if (textNode.nodeType === Node.ELEMENT_NODE || textNode.parentElement) {
+            const textElement = textNode.nodeType === Node.ELEMENT_NODE
+                ? textNode
+                : textNode.parentElement;
+            const textAlign = window.getComputedStyle(textElement).textAlign;
+            if (textAlign === 'right' || textAlign === 'end') {
+                // For end-aligned text, position the toolbar relative to the text end
+                left = targetRect.right - floatingElemRect.width + horizontalOffset;
+            }
+        }
+    }
+    if (top < editorScrollerRect.top) {
+        // adjusted height for link element if the element is at top
+        top +=
+            floatingElemRect.height +
+                targetRect.height +
+                verticalGap * (isLink ? 9 : 2);
+    }
+    if (left + floatingElemRect.width > editorScrollerRect.right) {
+        left = editorScrollerRect.right - floatingElemRect.width - horizontalOffset;
+    }
+    if (left < editorScrollerRect.left) {
+        left = editorScrollerRect.left + horizontalOffset;
+    }
+    top -= anchorElementRect.top;
+    left -= anchorElementRect.left;
+    floatingElem.style.opacity = '1';
+    floatingElem.style.transform = `translate(${left}px, ${top}px)`;
+}

package/lib/utils/setFloatingElemPositionForLinkEditor.d.ts

@@ -0,0 +1 @@
+export declare function setFloatingElemPositionForLinkEditor(targetRect: DOMRect | null, floatingElem: HTMLElement, anchorElem: HTMLElement, verticalGap?: number, horizontalOffset?: number): void;

package/lib/utils/setFloatingElemPositionForLinkEditor.js

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+const VERTICAL_GAP = 10;
+const HORIZONTAL_OFFSET = 5;
+export function setFloatingElemPositionForLinkEditor(targetRect, floatingElem, anchorElem, verticalGap = VERTICAL_GAP, horizontalOffset = HORIZONTAL_OFFSET) {
+    const scrollerElem = anchorElem.parentElement;
+    if (targetRect === null || !scrollerElem) {
+        floatingElem.style.opacity = '0';
+        floatingElem.style.transform = 'translate(-10000px, -10000px)';
+        return;
+    }
+    const floatingElemRect = floatingElem.getBoundingClientRect();
+    const anchorElementRect = anchorElem.getBoundingClientRect();
+    const editorScrollerRect = scrollerElem.getBoundingClientRect();
+    let top = targetRect.top - verticalGap;
+    let left = targetRect.left - horizontalOffset;
+    if (top < editorScrollerRect.top) {
+        top += floatingElemRect.height + targetRect.height + verticalGap * 2;
+    }
+    if (left + floatingElemRect.width > editorScrollerRect.right) {
+        left = editorScrollerRect.right - floatingElemRect.width - horizontalOffset;
+    }
+    top -= anchorElementRect.top;
+    left -= anchorElementRect.left;
+    floatingElem.style.opacity = '1';
+    floatingElem.style.transform = `translate(${left}px, ${top}px)`;
+}

package/lib/utils/swipe.d.ts

@@ -0,0 +1,4 @@
+export declare function addSwipeLeftListener(element: HTMLElement, cb: (_force: number, e: TouchEvent) => void): () => void;
+export declare function addSwipeRightListener(element: HTMLElement, cb: (_force: number, e: TouchEvent) => void): () => void;
+export declare function addSwipeUpListener(element: HTMLElement, cb: (_force: number, e: TouchEvent) => void): () => void;
+export declare function addSwipeDownListener(element: HTMLElement, cb: (_force: number, e: TouchEvent) => void): () => void;

package/lib/utils/swipe.js

@@ -0,0 +1,90 @@
+const elements = new WeakMap();
+function readTouch(e) {
+    const touch = e.changedTouches[0];
+    if (touch === undefined) {
+        return null;
+    }
+    return [touch.clientX, touch.clientY];
+}
+function addListener(element, cb) {
+    let elementValues = elements.get(element);
+    if (elementValues === undefined) {
+        const listeners = new Set();
+        const handleTouchstart = (e) => {
+            if (elementValues !== undefined) {
+                elementValues.start = readTouch(e);
+            }
+        };
+        const handleTouchend = (e) => {
+            if (elementValues === undefined) {
+                return;
+            }
+            const start = elementValues.start;
+            if (start === null) {
+                return;
+            }
+            const end = readTouch(e);
+            for (const listener of listeners) {
+                if (end !== null) {
+                    listener([end[0] - start[0], end[1] - start[1]], e);
+                }
+            }
+        };
+        element.addEventListener('touchstart', handleTouchstart);
+        element.addEventListener('touchend', handleTouchend);
+        elementValues = {
+            handleTouchend,
+            handleTouchstart,
+            listeners,
+            start: null,
+        };
+        elements.set(element, elementValues);
+    }
+    elementValues.listeners.add(cb);
+    return () => deleteListener(element, cb);
+}
+function deleteListener(element, cb) {
+    const elementValues = elements.get(element);
+    if (elementValues === undefined) {
+        return;
+    }
+    const listeners = elementValues.listeners;
+    listeners.delete(cb);
+    if (listeners.size === 0) {
+        elements.delete(element);
+        element.removeEventListener('touchstart', elementValues.handleTouchstart);
+        element.removeEventListener('touchend', elementValues.handleTouchend);
+    }
+}
+export function addSwipeLeftListener(element, cb) {
+    return addListener(element, (force, e) => {
+        const [x, y] = force;
+        if (x < 0 && -x > Math.abs(y)) {
+            cb(x, e);
+        }
+    });
+}
+export function addSwipeRightListener(element, cb) {
+    return addListener(element, (force, e) => {
+        const [x, y] = force;
+        if (x > 0 && x > Math.abs(y)) {
+            cb(x, e);
+        }
+    });
+}
+export function addSwipeUpListener(element, cb) {
+    return addListener(element, (force, e) => {
+        const [x, y] = force;
+        if (y < 0 && -y > Math.abs(x)) {
+            cb(x, e);
+        }
+    });
+}
+export function addSwipeDownListener(element, cb) {
+    return addListener(element, (force, e) => {
+        const [x, y] = force;
+        if (y > 0 && y > Math.abs(x)) {
+            cb(x, e);
+        }
+    });
+}

package/lib/utils/url.d.ts

@@ -0,0 +1,2 @@
+export declare function sanitizeUrl(url: string): string;
+export declare function validateUrl(url: string): boolean;

package/lib/utils/url.js

@@ -0,0 +1,27 @@
+const SUPPORTED_URL_PROTOCOLS = new Set([
+    'http:',
+    'https:',
+    'mailto:',
+    'sms:',
+    'tel:',
+]);
+export function sanitizeUrl(url) {
+    try {
+        const parsedUrl = new URL(url);
+        // eslint-disable-next-line no-script-url
+        if (!SUPPORTED_URL_PROTOCOLS.has(parsedUrl.protocol)) {
+            return 'about:blank';
+        }
+    }
+    catch {
+        return url;
+    }
+    return url;
+}
+// Source: https://stackoverflow.com/a/8234912/2013580
+const urlRegExp = new RegExp(/((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=+$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=+$,\w]+@)[A-Za-z0-9.-]+)((?:\/[+~%/.\w-_]*)?\??(?:[-+=&;%@.\w_]*)#?(?:[\w]*))?)/);
+export function validateUrl(url) {
+    // TODO Fix UI for link insertion; it should never default to an invalid URL such as https://.
+    // Maybe show a dialog where they user can type the URL before inserting it.
+    return url === 'https://' || urlRegExp.test(url);
+}

package/package.json

@@ -1,37 +1,47 @@
 {
   "name": "@datalayer/lexical-loro",
+  "version": "0.1.0",
   "private": false,
-  "version": "0.0.7",
-  "type": "module",
-  "description": "Collaborative editing solution for Lexical based on Loro CRDT",
   "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: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",
@@ -40,54 +50,75 @@
     "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:mcp": "python3 -m lexical_loro.mcp.server --host 0.0.0.0 --port 3001",
     "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"
+    "@excalidraw/excalidraw": "^0.18.0",
+    "@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",
+    "loro-crdt": "^1.8.0",
+    "lodash-es": "^4.17.21",
+    "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",
+    "@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 {};