@datalayer/lexical-loro 0.2.4 → 0.2.5

package/lib/commenting/index.js

@@ -0,0 +1,328 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the MIT License.
+ */
+import { COMMAND_PRIORITY_LOW } from 'lexical';
+import { useEffect, useState } from 'react';
+import { Array as YArray, Map as YMap, YArrayEvent, } from 'yjs';
+import { TOGGLE_CONNECT_COMMAND } from '../collab/yjs/State';
+function createUID() {
+    return Math.random()
+        .toString(36)
+        .replace(/[^a-z]+/g, '')
+        .substring(0, 5);
+}
+export function createComment(content, author, id, timeStamp, deleted) {
+    return {
+        author,
+        content,
+        deleted: deleted === undefined ? false : deleted,
+        id: id === undefined ? createUID() : id,
+        timeStamp: timeStamp === undefined
+            ? performance.timeOrigin + performance.now()
+            : timeStamp,
+        type: 'comment',
+    };
+}
+export function createThread(quote, comments, id) {
+    return {
+        comments,
+        id: id === undefined ? createUID() : id,
+        quote,
+        type: 'thread',
+    };
+}
+function cloneThread(thread) {
+    return {
+        comments: Array.from(thread.comments),
+        id: thread.id,
+        quote: thread.quote,
+        type: 'thread',
+    };
+}
+function markDeleted(comment) {
+    return {
+        author: comment.author,
+        content: '[Deleted Comment]',
+        deleted: true,
+        id: comment.id,
+        timeStamp: comment.timeStamp,
+        type: 'comment',
+    };
+}
+function triggerOnChange(commentStore) {
+    const listeners = commentStore._changeListeners;
+    for (const listener of listeners) {
+        listener();
+    }
+}
+export class CommentStore {
+    _editor;
+    _comments;
+    _changeListeners;
+    _collabProvider;
+    constructor(editor) {
+        this._comments = [];
+        this._editor = editor;
+        this._collabProvider = null;
+        this._changeListeners = new Set();
+    }
+    isCollaborative() {
+        return this._collabProvider !== null;
+    }
+    getComments() {
+        return this._comments;
+    }
+    addComment(commentOrThread, thread, offset) {
+        const nextComments = Array.from(this._comments);
+        // The YJS types explicitly use `any` as well.
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const sharedCommentsArray = this._getCollabComments();
+        if (thread !== undefined && commentOrThread.type === 'comment') {
+            for (let i = 0; i < nextComments.length; i++) {
+                const comment = nextComments[i];
+                if (comment.type === 'thread' && comment.id === thread.id) {
+                    const newThread = cloneThread(comment);
+                    nextComments.splice(i, 1, newThread);
+                    const insertOffset = offset !== undefined ? offset : newThread.comments.length;
+                    if (this.isCollaborative() && sharedCommentsArray !== null) {
+                        const parentSharedArray = sharedCommentsArray
+                            .get(i)
+                            .get('comments');
+                        this._withRemoteTransaction(() => {
+                            const sharedMap = this._createCollabSharedMap(commentOrThread);
+                            parentSharedArray.insert(insertOffset, [sharedMap]);
+                        });
+                    }
+                    newThread.comments.splice(insertOffset, 0, commentOrThread);
+                    break;
+                }
+            }
+        }
+        else {
+            const insertOffset = offset !== undefined ? offset : nextComments.length;
+            if (this.isCollaborative() && sharedCommentsArray !== null) {
+                this._withRemoteTransaction(() => {
+                    const sharedMap = this._createCollabSharedMap(commentOrThread);
+                    sharedCommentsArray.insert(insertOffset, [sharedMap]);
+                });
+            }
+            nextComments.splice(insertOffset, 0, commentOrThread);
+        }
+        this._comments = nextComments;
+        triggerOnChange(this);
+    }
+    deleteCommentOrThread(commentOrThread, thread) {
+        const nextComments = Array.from(this._comments);
+        // The YJS types explicitly use `any` as well.
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const sharedCommentsArray = this._getCollabComments();
+        let commentIndex = null;
+        if (thread !== undefined) {
+            for (let i = 0; i < nextComments.length; i++) {
+                const nextComment = nextComments[i];
+                if (nextComment.type === 'thread' && nextComment.id === thread.id) {
+                    const newThread = cloneThread(nextComment);
+                    nextComments.splice(i, 1, newThread);
+                    const threadComments = newThread.comments;
+                    commentIndex = threadComments.indexOf(commentOrThread);
+                    if (this.isCollaborative() && sharedCommentsArray !== null) {
+                        const parentSharedArray = sharedCommentsArray
+                            .get(i)
+                            .get('comments');
+                        this._withRemoteTransaction(() => {
+                            parentSharedArray.delete(commentIndex);
+                        });
+                    }
+                    threadComments.splice(commentIndex, 1);
+                    break;
+                }
+            }
+        }
+        else {
+            commentIndex = nextComments.indexOf(commentOrThread);
+            if (this.isCollaborative() && sharedCommentsArray !== null) {
+                this._withRemoteTransaction(() => {
+                    sharedCommentsArray.delete(commentIndex);
+                });
+            }
+            nextComments.splice(commentIndex, 1);
+        }
+        this._comments = nextComments;
+        triggerOnChange(this);
+        if (commentOrThread.type === 'comment') {
+            return {
+                index: commentIndex,
+                markedComment: markDeleted(commentOrThread),
+            };
+        }
+        return null;
+    }
+    registerOnChange(onChange) {
+        const changeListeners = this._changeListeners;
+        changeListeners.add(onChange);
+        return () => {
+            changeListeners.delete(onChange);
+        };
+    }
+    _withRemoteTransaction(fn) {
+        const provider = this._collabProvider;
+        if (provider !== null) {
+            const doc = provider.doc;
+            doc.transact(fn, this);
+        }
+    }
+    _withLocalTransaction(fn) {
+        const collabProvider = this._collabProvider;
+        try {
+            this._collabProvider = null;
+            fn();
+        }
+        finally {
+            this._collabProvider = collabProvider;
+        }
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    _getCollabComments() {
+        const provider = this._collabProvider;
+        if (provider !== null) {
+            const doc = provider.doc;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            return doc.get('comments', YArray);
+        }
+        return null;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    _createCollabSharedMap(commentOrThread) {
+        const sharedMap = new YMap();
+        const type = commentOrThread.type;
+        const id = commentOrThread.id;
+        sharedMap.set('type', type);
+        sharedMap.set('id', id);
+        if (type === 'comment') {
+            sharedMap.set('author', commentOrThread.author);
+            sharedMap.set('content', commentOrThread.content);
+            sharedMap.set('deleted', commentOrThread.deleted);
+            sharedMap.set('timeStamp', commentOrThread.timeStamp);
+        }
+        else {
+            sharedMap.set('quote', commentOrThread.quote);
+            const commentsArray = new YArray();
+            commentOrThread.comments.forEach((comment, i) => {
+                const sharedChildComment = this._createCollabSharedMap(comment);
+                commentsArray.insert(i, [sharedChildComment]);
+            });
+            sharedMap.set('comments', commentsArray);
+        }
+        return sharedMap;
+    }
+    registerCollaboration(provider) {
+        this._collabProvider = provider;
+        const sharedCommentsArray = this._getCollabComments();
+        const connect = () => {
+            provider.connect();
+        };
+        const disconnect = () => {
+            try {
+                provider.disconnect();
+            }
+            catch (e) {
+                // Do nothing
+            }
+        };
+        const unsubscribe = this._editor.registerCommand(TOGGLE_CONNECT_COMMAND, (payload) => {
+            if (connect !== undefined && disconnect !== undefined) {
+                const shouldConnect = payload;
+                if (shouldConnect) {
+                    // eslint-disable-next-line no-console
+                    console.log('Comments connected!');
+                    connect();
+                }
+                else {
+                    // eslint-disable-next-line no-console
+                    console.log('Comments disconnected!');
+                    disconnect();
+                }
+            }
+            return false;
+        }, COMMAND_PRIORITY_LOW);
+        const onSharedCommentChanges = (
+        // The YJS types explicitly use `any` as well.
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        events, transaction) => {
+            if (transaction.origin !== this) {
+                for (let i = 0; i < events.length; i++) {
+                    const event = events[i];
+                    if (event instanceof YArrayEvent) {
+                        const target = event.target;
+                        const deltas = event.delta;
+                        let offset = 0;
+                        for (let s = 0; s < deltas.length; s++) {
+                            const delta = deltas[s];
+                            const insert = delta.insert;
+                            const retain = delta.retain;
+                            const del = delta.delete;
+                            const parent = target.parent;
+                            const parentThread = target === sharedCommentsArray
+                                ? undefined
+                                : parent instanceof YMap &&
+                                    this._comments.find((t) => t.id === parent.get('id'));
+                            if (Array.isArray(insert)) {
+                                insert
+                                    .slice()
+                                    .reverse()
+                                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                    .forEach((map) => {
+                                    const id = map.get('id');
+                                    const type = map.get('type');
+                                    const commentOrThread = type === 'thread'
+                                        ? createThread(map.get('quote'), map
+                                            .get('comments')
+                                            .toArray()
+                                            .map((innerComment) => createComment(innerComment.get('content'), innerComment.get('author'), innerComment.get('id'), innerComment.get('timeStamp'), innerComment.get('deleted'))), id)
+                                        : createComment(map.get('content'), map.get('author'), id, map.get('timeStamp'), map.get('deleted'));
+                                    this._withLocalTransaction(() => {
+                                        this.addComment(commentOrThread, parentThread, offset);
+                                    });
+                                });
+                            }
+                            else if (typeof retain === 'number') {
+                                offset += retain;
+                            }
+                            else if (typeof del === 'number') {
+                                for (let d = 0; d < del; d++) {
+                                    const commentOrThread = parentThread === undefined || !parentThread
+                                        ? this._comments[offset]
+                                        : parentThread.comments[offset];
+                                    this._withLocalTransaction(() => {
+                                        this.deleteCommentOrThread(commentOrThread, parentThread);
+                                    });
+                                    offset++;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        };
+        if (sharedCommentsArray === null) {
+            return () => null;
+        }
+        sharedCommentsArray.observeDeep(onSharedCommentChanges);
+        connect();
+        return () => {
+            sharedCommentsArray.unobserveDeep(onSharedCommentChanges);
+            unsubscribe();
+            this._collabProvider = null;
+        };
+    }
+}
+export function useCommentStore(commentStore) {
+    const [comments, setComments] = useState(commentStore.getComments());
+    useEffect(() => {
+        return commentStore.registerOnChange(() => {
+            setComments(commentStore.getComments());
+        });
+    }, [commentStore]);
+    return comments;
+}

package/lib/context/FlashMessageContext.d.ts

@@ -0,0 +1,7 @@
+import type { JSX } from 'react';
+import { ReactNode } from 'react';
+export type ShowFlashMessage = (message?: React.ReactNode, duration?: number) => void;
+export declare const FlashMessageContext: ({ children, }: {
+    children: ReactNode;
+}) => JSX.Element;
+export declare const useFlashMessageContext: () => ShowFlashMessage;

package/lib/context/FlashMessageContext.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useState, } from 'react';
+import FlashMessage from '../ui/FlashMessage';
+const Context = createContext(undefined);
+const INITIAL_STATE = {};
+const DEFAULT_DURATION = 1000;
+export const FlashMessageContext = ({ children, }) => {
+    const [props, setProps] = useState(INITIAL_STATE);
+    const showFlashMessage = useCallback((message, duration) => setProps(message ? { duration, message } : INITIAL_STATE), []);
+    useEffect(() => {
+        if (props.message) {
+            const timeoutId = setTimeout(() => setProps(INITIAL_STATE), props.duration ?? DEFAULT_DURATION);
+            return () => clearTimeout(timeoutId);
+        }
+    }, [props]);
+    return (_jsxs(Context.Provider, { value: showFlashMessage, children: [children, props.message && _jsx(FlashMessage, { children: props.message })] }));
+};
+export const useFlashMessageContext = () => {
+    const ctx = useContext(Context);
+    if (!ctx) {
+        throw new Error('Missing FlashMessageContext');
+    }
+    return ctx;
+};

package/lib/context/SettingsContext.d.ts

@@ -0,0 +1,12 @@
+import type { SettingName } from '../appSettings';
+import type { JSX } from 'react';
+import { ReactNode } from 'react';
+type SettingsContextShape = {
+    setOption: (name: SettingName, value: boolean) => void;
+    settings: Record<SettingName, boolean>;
+};
+export declare const SettingsContext: ({ children, }: {
+    children: ReactNode;
+}) => JSX.Element;
+export declare const useSettings: () => SettingsContextShape;
+export {};

package/lib/context/SettingsContext.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useMemo, useState, } from 'react';
+import { DEFAULT_SETTINGS, INITIAL_SETTINGS } from '../appSettings';
+const Context = createContext({
+    setOption: (name, value) => {
+        return;
+    },
+    settings: INITIAL_SETTINGS,
+});
+export const SettingsContext = ({ children, }) => {
+    const [settings, setSettings] = useState(INITIAL_SETTINGS);
+    const setOption = useCallback((setting, value) => {
+        setSettings((options) => ({
+            ...options,
+            [setting]: value,
+        }));
+        setURLParam(setting, value);
+    }, []);
+    const contextValue = useMemo(() => {
+        return { setOption, settings };
+    }, [setOption, settings]);
+    return _jsx(Context.Provider, { value: contextValue, children: children });
+};
+export const useSettings = () => {
+    return useContext(Context);
+};
+function setURLParam(param, value) {
+    const url = new URL(window.location.href);
+    const params = new URLSearchParams(url.search);
+    if (value !== DEFAULT_SETTINGS[param]) {
+        params.set(param, String(value));
+    }
+    else {
+        params.delete(param);
+    }
+    url.search = params.toString();
+    window.history.pushState(null, '', url.toString());
+}

package/lib/context/SharedHistoryContext.d.ts

@@ -0,0 +1,11 @@
+import type { HistoryState } from '@lexical/react/LexicalHistoryPlugin';
+import type { JSX } from 'react';
+import { ReactNode } from 'react';
+type ContextShape = {
+    historyState?: HistoryState;
+};
+export declare const SharedHistoryContext: ({ children, }: {
+    children: ReactNode;
+}) => JSX.Element;
+export declare const useSharedHistoryContext: () => ContextShape;
+export {};

package/lib/context/SharedHistoryContext.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createEmptyHistoryState } from '@lexical/react/LexicalHistoryPlugin';
+import { createContext, useContext, useMemo } from 'react';
+const Context = createContext({});
+export const SharedHistoryContext = ({ children, }) => {
+    const historyContext = useMemo(() => ({ historyState: createEmptyHistoryState() }), []);
+    return _jsx(Context.Provider, { value: historyContext, children: children });
+};
+export const useSharedHistoryContext = () => {
+    return useContext(Context);
+};

package/lib/context/ToolbarContext.d.ts

@@ -0,0 +1,65 @@
+import type { JSX } from 'react';
+import { ElementFormatType } from 'lexical';
+import { ReactNode } from 'react';
+export declare const MIN_ALLOWED_FONT_SIZE = 8;
+export declare const MAX_ALLOWED_FONT_SIZE = 72;
+export declare const DEFAULT_FONT_SIZE = 15;
+declare const rootTypeToRootName: {
+    root: string;
+    table: string;
+};
+export declare const blockTypeToBlockName: {
+    bullet: string;
+    check: string;
+    code: string;
+    h1: string;
+    h2: string;
+    h3: string;
+    h4: string;
+    h5: string;
+    h6: string;
+    number: string;
+    paragraph: string;
+    quote: string;
+};
+declare const INITIAL_TOOLBAR_STATE: {
+    bgColor: string;
+    blockType: keyof typeof blockTypeToBlockName;
+    canRedo: boolean;
+    canUndo: boolean;
+    codeLanguage: string;
+    codeTheme: string;
+    elementFormat: ElementFormatType;
+    fontColor: string;
+    fontFamily: string;
+    fontSize: string;
+    fontSizeInputValue: string;
+    isBold: boolean;
+    isCode: boolean;
+    isHighlight: boolean;
+    isImageCaption: boolean;
+    isItalic: boolean;
+    isLink: boolean;
+    isRTL: boolean;
+    isStrikethrough: boolean;
+    isSubscript: boolean;
+    isSuperscript: boolean;
+    isUnderline: boolean;
+    isLowercase: boolean;
+    isUppercase: boolean;
+    isCapitalize: boolean;
+    rootType: keyof typeof rootTypeToRootName;
+    listStartNumber: number | null;
+};
+type ToolbarState = typeof INITIAL_TOOLBAR_STATE;
+type ToolbarStateKey = keyof ToolbarState;
+type ToolbarStateValue<Key extends ToolbarStateKey> = ToolbarState[Key];
+type ContextShape = {
+    toolbarState: ToolbarState;
+    updateToolbarState<Key extends ToolbarStateKey>(key: Key, value: ToolbarStateValue<Key>): void;
+};
+export declare const ToolbarContext: ({ children, }: {
+    children: ReactNode;
+}) => JSX.Element;
+export declare const useToolbarState: () => ContextShape;
+export {};

package/lib/context/ToolbarContext.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState, } from 'react';
+export const MIN_ALLOWED_FONT_SIZE = 8;
+export const MAX_ALLOWED_FONT_SIZE = 72;
+export const DEFAULT_FONT_SIZE = 15;
+const rootTypeToRootName = {
+    root: 'Root',
+    table: 'Table',
+};
+export const blockTypeToBlockName = {
+    bullet: 'Bulleted List',
+    check: 'Check List',
+    code: 'Code Block',
+    h1: 'Heading 1',
+    h2: 'Heading 2',
+    h3: 'Heading 3',
+    h4: 'Heading 4',
+    h5: 'Heading 5',
+    h6: 'Heading 6',
+    number: 'Numbered List',
+    paragraph: 'Normal',
+    quote: 'Quote',
+};
+//disable eslint sorting rule for quick reference to toolbar state
+/* eslint-disable sort-keys-fix/sort-keys-fix */
+const INITIAL_TOOLBAR_STATE = {
+    bgColor: '#fff',
+    blockType: 'paragraph',
+    canRedo: false,
+    canUndo: false,
+    codeLanguage: '',
+    codeTheme: '',
+    elementFormat: 'left',
+    fontColor: '#000',
+    fontFamily: 'Arial',
+    // Current font size in px
+    fontSize: `${DEFAULT_FONT_SIZE}px`,
+    // Font size input value - for controlled input
+    fontSizeInputValue: `${DEFAULT_FONT_SIZE}`,
+    isBold: false,
+    isCode: false,
+    isHighlight: false,
+    isImageCaption: false,
+    isItalic: false,
+    isLink: false,
+    isRTL: false,
+    isStrikethrough: false,
+    isSubscript: false,
+    isSuperscript: false,
+    isUnderline: false,
+    isLowercase: false,
+    isUppercase: false,
+    isCapitalize: false,
+    rootType: 'root',
+    listStartNumber: null,
+};
+const Context = createContext(undefined);
+export const ToolbarContext = ({ children, }) => {
+    const [toolbarState, setToolbarState] = useState(INITIAL_TOOLBAR_STATE);
+    const selectionFontSize = toolbarState.fontSize;
+    const updateToolbarState = useCallback((key, value) => {
+        setToolbarState((prev) => ({
+            ...prev,
+            [key]: value,
+        }));
+    }, []);
+    useEffect(() => {
+        updateToolbarState('fontSizeInputValue', selectionFontSize.slice(0, -2));
+    }, [selectionFontSize, updateToolbarState]);
+    const contextValue = useMemo(() => {
+        return {
+            toolbarState,
+            updateToolbarState,
+        };
+    }, [toolbarState, updateToolbarState]);
+    return _jsx(Context.Provider, { value: contextValue, children: children });
+};
+export const useToolbarState = () => {
+    const context = useContext(Context);
+    if (context === undefined) {
+        throw new Error('useToolbarState must be used within a ToolbarProvider');
+    }
+    return context;
+};

package/lib/demo.d.ts

@@ -0,0 +1,12 @@
+import 'prismjs/components/prism-clike';
+import 'prismjs/components/prism-javascript';
+import 'prismjs/components/prism-markup';
+import 'prismjs/components/prism-markdown';
+import 'prismjs/components/prism-c';
+import 'prismjs/components/prism-css';
+import 'prismjs/components/prism-objectivec';
+import 'prismjs/components/prism-sql';
+import 'prismjs/components/prism-python';
+import 'prismjs/components/prism-rust';
+import 'prismjs/components/prism-swift';
+import './index.css';

package/lib/demo.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the MIT License.
+ */
+import { createRoot } from 'react-dom/client';
+// setupEnv must load before App because lexical computes CAN_USE_BEFORE_INPUT
+// at import time (disableBeforeInput is used to test legacy events)
+import setupEnv from './setupEnv';
+// Initialize Prism.js for code highlighting
+import Prism from 'prismjs';
+import 'prismjs/components/prism-clike';
+import 'prismjs/components/prism-javascript';
+import 'prismjs/components/prism-markup';
+import 'prismjs/components/prism-markdown';
+import 'prismjs/components/prism-c';
+import 'prismjs/components/prism-css';
+import 'prismjs/components/prism-objectivec';
+import 'prismjs/components/prism-sql';
+import 'prismjs/components/prism-python';
+import 'prismjs/components/prism-rust';
+import 'prismjs/components/prism-swift';
+// Make Prism globally available
+window.Prism = Prism;
+import App from './App';
+import './index.css';
+if (setupEnv.disableBeforeInput) {
+    // vite is really aggressive about tree-shaking, this
+    // ensures that the side-effects of importing setupEnv happens
+}
+// Handle runtime errors
+const showErrorOverlay = (err) => {
+    const ErrorOverlay = customElements.get('vite-error-overlay');
+    if (!ErrorOverlay) {
+        return;
+    }
+    const overlay = new ErrorOverlay(err);
+    const body = document.body;
+    if (body !== null) {
+        body.appendChild(overlay);
+    }
+};
+window.addEventListener('error', showErrorOverlay);
+window.addEventListener('unhandledrejection', ({ reason }) => showErrorOverlay(reason));
+createRoot(document.getElementById('root')).render(_jsx(App, {}));

package/lib/hooks/useFlashMessage.d.ts

@@ -0,0 +1,2 @@
+import { type ShowFlashMessage } from '../context/FlashMessageContext';
+export default function useFlashMessage(): ShowFlashMessage;

package/lib/hooks/useFlashMessage.js

@@ -0,0 +1,8 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the MIT License.
+ */
+import { useFlashMessageContext, } from '../context/FlashMessageContext';
+export default function useFlashMessage() {
+    return useFlashMessageContext();
+}

package/lib/hooks/useModal.d.ts

@@ -0,0 +1,5 @@
+import type { JSX } from 'react';
+export default function useModal(): [
+    JSX.Element | null,
+    (title: string, showModal: (onClose: () => void) => JSX.Element) => void
+];