@datalayer/lexical-loro 0.2.5 → 1.0.0

package/lib/commenting/index.js

@@ -1,328 +0,0 @@
-/*
- * 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

@@ -1,7 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,65 +0,0 @@
-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

@@ -1,84 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

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

package/lib/hooks/useFlashMessage.js

@@ -1,8 +0,0 @@
-/*
- * 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

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