@datalayer/lexical-loro 0.1.0 → 0.2.2

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.
 

package/package.json

@@ -1,7 +1,6 @@
 {
   "name": "@datalayer/lexical-loro",
-  "version": "0.1.0",
-  "private": false,
+  "version": "0.2.2",
   "main": "lib/index.js",
   "files": [
     "lib/**/*.{css,d.ts,eot,gif,html,jpg,js,js.map,json,png,svg,woff2,ttf}",
@@ -28,7 +27,7 @@
   },
   "scripts": {
     "build": "tsc -b && vite build",
-    "dev": "cross-env NODE_ENV=development concurrently \"npm:server:py:ws\" \"npm:server:mcp\" \"vite --host --port 3000\"",
+    "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",
@@ -45,7 +44,7 @@
     "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",
@@ -54,14 +53,14 @@
     "server:py": "lexical-loro-server",
     "server:py:dev": "python3 -m lexical_loro.cli",
     "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",
+    "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 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": {
-    "@excalidraw/excalidraw": "^0.18.0",
+    "@datalayer/primer-addons": "^1.0.8",
     "@floating-ui/react": "^0.27.8",
     "@lexical/clipboard": "^0.35.0",
     "@lexical/code": "^0.35.0",
@@ -82,8 +81,8 @@
     "date-fns": "^4.1.0",
     "katex": "^0.16.10",
     "lexical": "^0.35.0",
-    "loro-crdt": "^1.8.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",
@@ -95,6 +94,7 @@
   "devDependencies": {
     "@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",

package/lib/App.d.ts

@@ -1,2 +0,0 @@
-import type { JSX } from 'react';
-export default function PlaygroundApp(): JSX.Element;

package/lib/App.js

@@ -1,141 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { $createLinkNode } from '@lexical/link';
-import { $createListItemNode, $createListNode } from '@lexical/list';
-import { LexicalComposer } from '@lexical/react/LexicalComposer';
-import { $createHeadingNode, $createQuoteNode } from '@lexical/rich-text';
-import { $createParagraphNode, $createTextNode, $getRoot, $isTextNode, TextNode, } from 'lexical';
-import { isDevPlayground } from './appSettings';
-import { FlashMessageContext } from './context/FlashMessageContext';
-import { SettingsContext, useSettings } from './context/SettingsContext';
-import { SharedHistoryContext } from './context/SharedHistoryContext';
-import { ToolbarContext } from './context/ToolbarContext';
-import Editor from './Editor';
-import PlaygroundNodes from './nodes/PlaygroundNodes';
-import DocsPlugin from './plugins/DocsPlugin';
-import PasteLogPlugin from './plugins/PasteLogPlugin';
-import { TableContext } from './plugins/TablePlugin';
-import TestRecorderPlugin from './plugins/TestRecorderPlugin';
-import { parseAllowedFontSize } from './plugins/ToolbarPlugin/fontSize';
-import TypingPerfPlugin from './plugins/TypingPerfPlugin';
-import Settings from './Settings';
-import PlaygroundEditorTheme from './themes/PlaygroundEditorTheme';
-import { parseAllowedColor } from './ui/ColorPicker';
-import logo from './images/logo.svg';
-console.warn('If you are profiling the playground app, please ensure you turn off the debug view. You can disable it by pressing on the settings control in the bottom-left of your screen and toggling the debug view setting.');
-function $prepopulatedRichText() {
-    const root = $getRoot();
-    if (root.getFirstChild() === null) {
-        const heading = $createHeadingNode('h1');
-        heading.append($createTextNode('Welcome to the playground'));
-        root.append(heading);
-        const quote = $createQuoteNode();
-        quote.append($createTextNode(`In case you were wondering what the black box at the bottom is – it's the debug view, showing the current state of the editor. ` +
-            `You can disable it by pressing on the settings control in the bottom-left of your screen and toggling the debug view setting.`));
-        root.append(quote);
-        const paragraph = $createParagraphNode();
-        paragraph.append($createTextNode('The playground is a demo environment built with '), $createTextNode('@lexical/react').toggleFormat('code'), $createTextNode('.'), $createTextNode(' Try typing in '), $createTextNode('some text').toggleFormat('bold'), $createTextNode(' with '), $createTextNode('different').toggleFormat('italic'), $createTextNode(' formats.'));
-        root.append(paragraph);
-        const paragraph2 = $createParagraphNode();
-        paragraph2.append($createTextNode('Make sure to check out the various plugins in the toolbar. You can also use #hashtags or @-mentions too!'));
-        root.append(paragraph2);
-        const paragraph3 = $createParagraphNode();
-        paragraph3.append($createTextNode(`If you'd like to find out more about Lexical, you can:`));
-        root.append(paragraph3);
-        const list = $createListNode('bullet');
-        list.append($createListItemNode().append($createTextNode(`Visit the `), $createLinkNode('https://lexical.dev/').append($createTextNode('Lexical website')), $createTextNode(` for documentation and more information.`)), $createListItemNode().append($createTextNode(`Check out the code on our `), $createLinkNode('https://github.com/facebook/lexical').append($createTextNode('GitHub repository')), $createTextNode(`.`)), $createListItemNode().append($createTextNode(`Playground code can be found `), $createLinkNode('https://github.com/facebook/lexical/tree/main/packages/lexical-playground').append($createTextNode('here')), $createTextNode(`.`)), $createListItemNode().append($createTextNode(`Join our `), $createLinkNode('https://discord.com/invite/KmG4wQnnD9').append($createTextNode('Discord Server')), $createTextNode(` and chat with the team.`)));
-        root.append(list);
-        const paragraph4 = $createParagraphNode();
-        paragraph4.append($createTextNode(`Lastly, we're constantly adding cool new features to this playground. So make sure you check back here when you next get a chance :).`));
-        root.append(paragraph4);
-    }
-}
-function getExtraStyles(element) {
-    // Parse styles from pasted input, but only if they match exactly the
-    // sort of styles that would be produced by exportDOM
-    let extraStyles = '';
-    const fontSize = parseAllowedFontSize(element.style.fontSize);
-    const backgroundColor = parseAllowedColor(element.style.backgroundColor);
-    const color = parseAllowedColor(element.style.color);
-    if (fontSize !== '' && fontSize !== '15px') {
-        extraStyles += `font-size: ${fontSize};`;
-    }
-    if (backgroundColor !== '' && backgroundColor !== 'rgb(255, 255, 255)') {
-        extraStyles += `background-color: ${backgroundColor};`;
-    }
-    if (color !== '' && color !== 'rgb(0, 0, 0)') {
-        extraStyles += `color: ${color};`;
-    }
-    return extraStyles;
-}
-function buildImportMap() {
-    const importMap = {};
-    // Wrap all TextNode importers with a function that also imports
-    // the custom styles implemented by the playground
-    for (const [tag, fn] of Object.entries(TextNode.importDOM() || {})) {
-        importMap[tag] = (importNode) => {
-            const importer = fn(importNode);
-            if (!importer) {
-                return null;
-            }
-            return {
-                ...importer,
-                conversion: (element) => {
-                    const output = importer.conversion(element);
-                    if (output === null ||
-                        output.forChild === undefined ||
-                        output.after !== undefined ||
-                        output.node !== null) {
-                        return output;
-                    }
-                    const extraStyles = getExtraStyles(element);
-                    if (extraStyles) {
-                        const { forChild } = output;
-                        return {
-                            ...output,
-                            forChild: (child, parent) => {
-                                const textNode = forChild(child, parent);
-                                if ($isTextNode(textNode)) {
-                                    textNode.setStyle(textNode.getStyle() + extraStyles);
-                                }
-                                return textNode;
-                            },
-                        };
-                    }
-                    return output;
-                },
-            };
-        };
-    }
-    return importMap;
-}
-function App() {
-    const { settings: { isCollab, emptyEditor, measureTypingPerf }, } = useSettings();
-    const initialConfig = {
-        editorState: isCollab
-            ? null
-            : emptyEditor
-                ? undefined
-                : $prepopulatedRichText,
-        html: { import: buildImportMap() },
-        namespace: 'Lexical Loro Playground',
-        nodes: [...PlaygroundNodes],
-        onError: (error) => {
-            throw error;
-        },
-        theme: PlaygroundEditorTheme,
-    };
-    return (_jsx(LexicalComposer, { initialConfig: initialConfig, children: _jsx(SharedHistoryContext, { children: _jsx(TableContext, { children: _jsxs(ToolbarContext, { children: [_jsx("header", { children: _jsx("a", { href: "https://lexical.dev", target: "_blank", rel: "noreferrer", children: _jsx("img", { src: logo, alt: "Lexical Logo" }) }) }), _jsx("div", { className: "editor-shell", children: _jsx(Editor, {}) }), _jsx(Settings, {}), isDevPlayground ? _jsx(DocsPlugin, {}) : null, isDevPlayground ? _jsx(PasteLogPlugin, {}) : null, isDevPlayground ? _jsx(TestRecorderPlugin, {}) : null, measureTypingPerf ? _jsx(TypingPerfPlugin, {}) : null] }) }) }) }));
-}
-export default function PlaygroundApp() {
-    return (_jsxs(SettingsContext, { children: [_jsx(FlashMessageContext, { children: _jsx(App, {}) }), _jsx("a", { href: "https://github.com/facebook/lexical/tree/main/packages/lexical-playground", className: "github-corner", "aria-label": "View source on GitHub", children: _jsxs("svg", { width: "80", height: "80", viewBox: "0 0 250 250", style: {
-                        border: '0',
-                        color: '#eee',
-                        fill: '#222',
-                        left: '0',
-                        position: 'absolute',
-                        top: '0',
-                        transform: 'scale(-1,1)',
-                    }, "aria-hidden": "true", children: [_jsx("path", { d: "M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" }), _jsx("path", { d: "M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2", fill: "currentColor", style: {
-                                transformOrigin: '130px 106px',
-                            }, className: "octo-arm" }), _jsx("path", { d: "M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z", fill: "currentColor", className: "octo-body" })] }) })] }));
-}

package/lib/Editor.d.ts

@@ -1,2 +0,0 @@
-import { type JSX } from 'react';
-export default function Editor(): JSX.Element;

package/lib/Editor.js

@@ -1,111 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import { AutoFocusPlugin } from '@lexical/react/LexicalAutoFocusPlugin';
-import { CharacterLimitPlugin } from '@lexical/react/LexicalCharacterLimitPlugin';
-import { CheckListPlugin } from '@lexical/react/LexicalCheckListPlugin';
-import { ClearEditorPlugin } from '@lexical/react/LexicalClearEditorPlugin';
-import { ClickableLinkPlugin } from '@lexical/react/LexicalClickableLinkPlugin';
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
-import { HashtagPlugin } from '@lexical/react/LexicalHashtagPlugin';
-import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
-import { HorizontalRulePlugin } from '@lexical/react/LexicalHorizontalRulePlugin';
-import { ListPlugin } from '@lexical/react/LexicalListPlugin';
-import { PlainTextPlugin } from '@lexical/react/LexicalPlainTextPlugin';
-import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
-import { SelectionAlwaysOnDisplay } from '@lexical/react/LexicalSelectionAlwaysOnDisplay';
-import { TabIndentationPlugin } from '@lexical/react/LexicalTabIndentationPlugin';
-import { TablePlugin } from '@lexical/react/LexicalTablePlugin';
-import { useLexicalEditable } from '@lexical/react/useLexicalEditable';
-import { CAN_USE_DOM } from '@lexical/utils';
-import { useSettings } from './context/SettingsContext';
-import { useSharedHistoryContext } from './context/SharedHistoryContext';
-import ActionsPlugin from './plugins/ActionsPlugin';
-import AutocompletePlugin from './plugins/AutocompletePlugin';
-import AutoEmbedPlugin from './plugins/AutoEmbedPlugin';
-import AutoLinkPlugin from './plugins/AutoLinkPlugin';
-import CodeActionMenuPlugin from './plugins/CodeActionMenuPlugin';
-import CodeHighlightPrismPlugin from './plugins/CodeHighlightPrismPlugin';
-import CodeHighlightShikiPlugin from './plugins/CodeHighlightShikiPlugin';
-import CollapsiblePlugin from './plugins/CollapsiblePlugin';
-import CommentPlugin from './plugins/CommentPlugin';
-import ComponentPickerPlugin from './plugins/ComponentPickerPlugin';
-import ContextMenuPlugin from './plugins/ContextMenuPlugin';
-import CounterPlugin from './plugins/CounterPlugin';
-import DateTimePlugin from './plugins/DateTimePlugin';
-import DragDropPaste from './plugins/DragDropPastePlugin';
-import DraggableBlockPlugin from './plugins/DraggableBlockPlugin';
-import EmojiPickerPlugin from './plugins/EmojiPickerPlugin';
-import EmojisPlugin from './plugins/EmojisPlugin';
-import EquationsPlugin from './plugins/EquationsPlugin';
-import ExcalidrawPlugin from './plugins/ExcalidrawPlugin';
-import FigmaPlugin from './plugins/FigmaPlugin';
-import FloatingLinkEditorPlugin from './plugins/FloatingLinkEditorPlugin';
-import FloatingTextFormatToolbarPlugin from './plugins/FloatingTextFormatToolbarPlugin';
-import ImagesPlugin from './plugins/ImagesPlugin';
-import InlineImagePlugin from './plugins/InlineImagePlugin';
-import KeywordsPlugin from './plugins/KeywordsPlugin';
-import { LayoutPlugin } from './plugins/LayoutPlugin/LayoutPlugin';
-import LinkPlugin from './plugins/LinkPlugin';
-import MarkdownShortcutPlugin from './plugins/MarkdownShortcutPlugin';
-import { MaxLengthPlugin } from './plugins/MaxLengthPlugin';
-import MentionsPlugin from './plugins/MentionsPlugin';
-import PageBreakPlugin from './plugins/PageBreakPlugin';
-import PollPlugin from './plugins/PollPlugin';
-import ShortcutsPlugin from './plugins/ShortcutsPlugin';
-import SpecialTextPlugin from './plugins/SpecialTextPlugin';
-import SpeechToTextPlugin from './plugins/SpeechToTextPlugin';
-import TabFocusPlugin from './plugins/TabFocusPlugin';
-import TableCellActionMenuPlugin from './plugins/TableActionMenuPlugin';
-import TableCellResizer from './plugins/TableCellResizer';
-import TableHoverActionsPlugin from './plugins/TableHoverActionsPlugin';
-import TableOfContentsPlugin from './plugins/TableOfContentsPlugin';
-import ToolbarPlugin from './plugins/ToolbarPlugin';
-import TreeViewPlugin from './plugins/TreeViewPlugin';
-import TwitterPlugin from './plugins/TwitterPlugin';
-import YouTubePlugin from './plugins/YouTubePlugin';
-import ContentEditable from './ui/ContentEditable';
-import DatalayerPlugin from './plugins/DatalayerPlugin';
-import { LoroCollaborationPlugin as LoroCollaborationPlugin } from './collab/loro/LexicalCollaborationPlugin';
-import { createWebsocketProvider as createLoroWebsocketProvider } from './collab/loro/wsProvider';
-import { CollaborationPlugin as YjsCollaborationPlugin } from './collab/yjs/LexicalCollaborationPlugin';
-import { createWebsocketProvider as createYjsWebsocketProvider } from './collab/yjs/wsProvider';
-const skipCollaborationInit = 
-// @ts-expect-error
-window.parent != null && window.parent.frames.right === window;
-export default function Editor() {
-    const { historyState } = useSharedHistoryContext();
-    const { settings: { useYjs, isCodeHighlighted, isCodeShiki, isCollab, isAutocomplete, isMaxLength, isCharLimit, hasLinkAttributes, isCharLimitUtf8, isRichText, showTreeView, showTableOfContents, shouldUseLexicalContextMenu, shouldPreserveNewLinesInMarkdown, tableCellMerge, tableCellBackgroundColor, tableHorizontalScroll, shouldAllowHighlightingWithBrackets, selectionAlwaysOnDisplay, listStrictIndent, }, } = useSettings();
-    const isEditable = useLexicalEditable();
-    const placeholder = isCollab
-        ? 'Enter some collaborative rich text...'
-        : isRichText
-            ? 'Enter some rich text...'
-            : 'Enter some plain text...';
-    const [floatingAnchorElem, setFloatingAnchorElem] = useState(null);
-    const [isSmallWidthViewport, setIsSmallWidthViewport] = useState(false);
-    const [editor] = useLexicalComposerContext();
-    const [activeEditor, setActiveEditor] = useState(editor);
-    const [isLinkEditMode, setIsLinkEditMode] = useState(false);
-    const onRef = (_floatingAnchorElem) => {
-        if (_floatingAnchorElem !== null) {
-            setFloatingAnchorElem(_floatingAnchorElem);
-        }
-    };
-    useEffect(() => {
-        const updateViewPortWidth = () => {
-            const isNextSmallWidthViewport = CAN_USE_DOM && window.matchMedia('(max-width: 1025px)').matches;
-            if (isNextSmallWidthViewport !== isSmallWidthViewport) {
-                setIsSmallWidthViewport(isNextSmallWidthViewport);
-            }
-        };
-        updateViewPortWidth();
-        window.addEventListener('resize', updateViewPortWidth);
-        return () => {
-            window.removeEventListener('resize', updateViewPortWidth);
-        };
-    }, [isSmallWidthViewport]);
-    return (_jsxs(_Fragment, { children: [isRichText && (_jsx(ToolbarPlugin, { editor: editor, activeEditor: activeEditor, setActiveEditor: setActiveEditor, setIsLinkEditMode: setIsLinkEditMode })), isRichText && (_jsx(ShortcutsPlugin, { editor: activeEditor, setIsLinkEditMode: setIsLinkEditMode })), _jsxs("div", { className: `editor-container ${showTreeView ? 'tree-view' : ''} ${!isRichText ? 'plain-text' : ''}`, children: [isMaxLength && _jsx(MaxLengthPlugin, { maxLength: 30 }), _jsx(DragDropPaste, {}), _jsx(DatalayerPlugin, {}), _jsx(AutoFocusPlugin, {}), selectionAlwaysOnDisplay && _jsx(SelectionAlwaysOnDisplay, {}), _jsx(ClearEditorPlugin, {}), _jsx(ComponentPickerPlugin, {}), _jsx(EmojiPickerPlugin, {}), _jsx(AutoEmbedPlugin, {}), _jsx(MentionsPlugin, {}), _jsx(EmojisPlugin, {}), _jsx(HashtagPlugin, {}), _jsx(KeywordsPlugin, {}), _jsx(SpeechToTextPlugin, {}), _jsx(AutoLinkPlugin, {}), _jsx(DateTimePlugin, {}), useYjs &&
-                        _jsx(CommentPlugin, { providerFactory: isCollab ? createYjsWebsocketProvider : undefined }), isRichText ? (_jsxs(_Fragment, { children: [isCollab ? (useYjs ? (_jsx(YjsCollaborationPlugin, { id: "main", providerFactory: createYjsWebsocketProvider, shouldBootstrap: !skipCollaborationInit })) : (_jsx(LoroCollaborationPlugin, { id: "main", providerFactory: createLoroWebsocketProvider, shouldBootstrap: !skipCollaborationInit }))) : (_jsx(HistoryPlugin, { externalHistoryState: historyState })), _jsx(RichTextPlugin, { contentEditable: _jsx("div", { className: "editor-scroller", children: _jsx("div", { className: "editor", ref: onRef, children: _jsx(ContentEditable, { placeholder: placeholder }) }) }), ErrorBoundary: LexicalErrorBoundary }), _jsx(MarkdownShortcutPlugin, {}), isCodeHighlighted &&
-                                (isCodeShiki ? (_jsx(CodeHighlightShikiPlugin, {})) : (_jsx(CodeHighlightPrismPlugin, {}))), _jsx(ListPlugin, { hasStrictIndent: listStrictIndent }), _jsx(CheckListPlugin, {}), _jsx(TablePlugin, { hasCellMerge: tableCellMerge, hasCellBackgroundColor: tableCellBackgroundColor, hasHorizontalScroll: tableHorizontalScroll }), _jsx(TableCellResizer, {}), _jsx(ImagesPlugin, {}), _jsx(InlineImagePlugin, {}), _jsx(LinkPlugin, { hasLinkAttributes: hasLinkAttributes }), _jsx(PollPlugin, {}), _jsx(TwitterPlugin, {}), _jsx(YouTubePlugin, {}), _jsx(FigmaPlugin, {}), _jsx(ClickableLinkPlugin, { disabled: isEditable }), _jsx(HorizontalRulePlugin, {}), _jsx(EquationsPlugin, {}), _jsx(ExcalidrawPlugin, {}), _jsx(TabFocusPlugin, {}), _jsx(TabIndentationPlugin, { maxIndent: 7 }), _jsx(CollapsiblePlugin, {}), _jsx(CounterPlugin, {}), _jsx(PageBreakPlugin, {}), _jsx(LayoutPlugin, {}), floatingAnchorElem && (_jsxs(_Fragment, { children: [_jsx(FloatingLinkEditorPlugin, { anchorElem: floatingAnchorElem, isLinkEditMode: isLinkEditMode, setIsLinkEditMode: setIsLinkEditMode }), _jsx(TableCellActionMenuPlugin, { anchorElem: floatingAnchorElem, cellMerge: true })] })), floatingAnchorElem && !isSmallWidthViewport && (_jsxs(_Fragment, { children: [_jsx(DraggableBlockPlugin, { anchorElem: floatingAnchorElem }), _jsx(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem }), _jsx(TableHoverActionsPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem, setIsLinkEditMode: setIsLinkEditMode })] }))] })) : (_jsxs(_Fragment, { children: [_jsx(PlainTextPlugin, { contentEditable: _jsx(ContentEditable, { placeholder: placeholder }), ErrorBoundary: LexicalErrorBoundary }), _jsx(HistoryPlugin, { externalHistoryState: historyState })] })), (isCharLimit || isCharLimitUtf8) && (_jsx(CharacterLimitPlugin, { charset: isCharLimit ? 'UTF-16' : 'UTF-8', maxLength: 5 })), isAutocomplete && _jsx(AutocompletePlugin, {}), _jsx("div", { children: showTableOfContents && _jsx(TableOfContentsPlugin, {}) }), shouldUseLexicalContextMenu && _jsx(ContextMenuPlugin, {}), shouldAllowHighlightingWithBrackets && _jsx(SpecialTextPlugin, {}), _jsx(ActionsPlugin, { isRichText: isRichText, shouldPreserveNewLinesInMarkdown: shouldPreserveNewLinesInMarkdown })] }), showTreeView && _jsx(TreeViewPlugin, {})] }));
-}

package/lib/Settings.d.ts

@@ -1,2 +0,0 @@
-import type { JSX } from 'react';
-export default function Settings(): JSX.Element;

package/lib/Settings.js

@@ -1,57 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { CAN_USE_BEFORE_INPUT } from '@lexical/utils';
-import { useEffect, useMemo, useState } from 'react';
-import { INITIAL_SETTINGS, isDevPlayground } from './appSettings';
-import { useSettings } from './context/SettingsContext';
-import Switch from './ui/Switch';
-export default function Settings() {
-    const windowLocation = window.location;
-    const { setOption, settings: { measureTypingPerf, isCollab, isRichText, isMaxLength, hasLinkAttributes, isCharLimit, isCharLimitUtf8, isAutocomplete, showTreeView, showNestedEditorTreeView, 
-    // disableBeforeInput,
-    showTableOfContents, shouldUseLexicalContextMenu, shouldPreserveNewLinesInMarkdown, shouldAllowHighlightingWithBrackets, 
-    // tableHorizontalScroll,
-    selectionAlwaysOnDisplay, isCodeHighlighted, isCodeShiki, useYjs, }, } = useSettings();
-    useEffect(() => {
-        if (INITIAL_SETTINGS.disableBeforeInput && CAN_USE_BEFORE_INPUT) {
-            console.error(`Legacy events are enabled (disableBeforeInput) but CAN_USE_BEFORE_INPUT is true`);
-        }
-    }, []);
-    const [showSettings, setShowSettings] = useState(false);
-    const [isSplitScreen, search] = useMemo(() => {
-        const parentWindow = window.parent;
-        const _search = windowLocation.search;
-        const _isSplitScreen = parentWindow && parentWindow.location.pathname === '/split/';
-        return [_isSplitScreen, _search];
-    }, [windowLocation]);
-    return (_jsxs(_Fragment, { children: [_jsx("button", { id: "options-button", className: `editor-dev-button ${showSettings ? 'active' : ''}`, onClick: () => setShowSettings(!showSettings) }), showSettings ? (_jsxs("div", { className: "switches", children: [isRichText && isDevPlayground && (_jsx(Switch, { onClick: () => {
-                            setOption('isCollab', !isCollab);
-                            window.location.reload();
-                        }, checked: isCollab, text: "Collaboration" })), isRichText && isDevPlayground && isCollab && (_jsx(Switch, { onClick: () => {
-                            setOption('useYjs', !useYjs);
-                            window.location.reload();
-                        }, checked: useYjs, text: "Use Y.js (vs Loro)" })), isDevPlayground && (_jsx(Switch, { onClick: () => {
-                            if (isSplitScreen) {
-                                window.parent.location.href = `/${search}`;
-                            }
-                            else {
-                                window.location.href = `/split/${search}`;
-                            }
-                        }, checked: isSplitScreen, text: "Split Screen" })), _jsx(Switch, { onClick: () => setOption('measureTypingPerf', !measureTypingPerf), checked: measureTypingPerf, text: "Measure Perf" }), _jsx(Switch, { onClick: () => setOption('showTreeView', !showTreeView), checked: showTreeView, text: "Debug View" }), _jsx(Switch, { onClick: () => setOption('showNestedEditorTreeView', !showNestedEditorTreeView), checked: showNestedEditorTreeView, text: "Nested Editors Debug View" }), _jsx(Switch, { onClick: () => {
-                            setOption('isRichText', !isRichText);
-                            setOption('isCollab', false);
-                        }, checked: isRichText, text: "Rich Text" }), _jsx(Switch, { onClick: () => setOption('isCharLimit', !isCharLimit), checked: isCharLimit, text: "Char Limit" }), _jsx(Switch, { onClick: () => setOption('isCharLimitUtf8', !isCharLimitUtf8), checked: isCharLimitUtf8, text: "Char Limit (UTF-8)" }), _jsx(Switch, { onClick: () => setOption('hasLinkAttributes', !hasLinkAttributes), checked: hasLinkAttributes, text: "Link Attributes" }), _jsx(Switch, { onClick: () => setOption('isMaxLength', !isMaxLength), checked: isMaxLength, text: "Max Length" }), _jsx(Switch, { onClick: () => setOption('isAutocomplete', !isAutocomplete), checked: isAutocomplete, text: "Autocomplete" }), _jsx(Switch, { onClick: () => {
-                            setOption('showTableOfContents', !showTableOfContents);
-                        }, checked: showTableOfContents, text: "Table Of Contents" }), _jsx(Switch, { onClick: () => {
-                            setOption('shouldUseLexicalContextMenu', !shouldUseLexicalContextMenu);
-                        }, checked: shouldUseLexicalContextMenu, text: "Use Lexical Context Menu" }), _jsx(Switch, { onClick: () => {
-                            setOption('shouldPreserveNewLinesInMarkdown', !shouldPreserveNewLinesInMarkdown);
-                        }, checked: shouldPreserveNewLinesInMarkdown, text: "Preserve newlines in Markdown" }), _jsx(Switch, { onClick: () => {
-                            setOption('shouldAllowHighlightingWithBrackets', !shouldAllowHighlightingWithBrackets);
-                        }, checked: shouldAllowHighlightingWithBrackets, text: "Use Brackets for Highlighting" }), _jsx(Switch, { onClick: () => {
-                            setOption('selectionAlwaysOnDisplay', !selectionAlwaysOnDisplay);
-                        }, checked: selectionAlwaysOnDisplay, text: "Retain selection" }), _jsx(Switch, { onClick: () => {
-                            setOption('isCodeHighlighted', !isCodeHighlighted);
-                        }, checked: isCodeHighlighted, text: "Enable Code Highlighting" }), _jsx(Switch, { onClick: () => {
-                            setOption('isCodeShiki', !isCodeShiki);
-                        }, checked: isCodeShiki, text: "Use Shiki for Code Highlighting" })] })) : null] }));
-}

package/lib/appSettings.d.ts

@@ -1,36 +0,0 @@
-export declare const isDevPlayground: boolean;
-export declare const DEFAULT_SETTINGS: {
-    readonly useYjs: false;
-    readonly disableBeforeInput: false;
-    readonly emptyEditor: boolean;
-    readonly hasLinkAttributes: false;
-    readonly isAutocomplete: false;
-    readonly isCharLimit: false;
-    readonly isCharLimitUtf8: false;
-    readonly isCodeHighlighted: true;
-    readonly isCodeShiki: false;
-    readonly isCollab: true;
-    readonly isMaxLength: false;
-    readonly isRichText: true;
-    readonly listStrictIndent: false;
-    readonly measureTypingPerf: false;
-    readonly selectionAlwaysOnDisplay: false;
-    readonly shouldAllowHighlightingWithBrackets: false;
-    readonly shouldPreserveNewLinesInMarkdown: false;
-    readonly shouldUseLexicalContextMenu: false;
-    readonly showNestedEditorTreeView: false;
-    readonly showTableOfContents: false;
-    readonly showTreeView: true;
-    readonly tableCellBackgroundColor: true;
-    readonly tableCellMerge: true;
-    readonly tableHorizontalScroll: true;
-    readonly debug: false;
-};
-export declare const INITIAL_SETTINGS: Record<SettingName, boolean>;
-export type SettingName = keyof typeof DEFAULT_SETTINGS;
-export type Settings = typeof INITIAL_SETTINGS;
-/**
- * Check if debug mode is enabled via URL parameter
- * @returns true if ?debug=true is in the URL, false otherwise
- */
-export declare function isDebugEnabled(): boolean;

package/lib/appSettings.js

@@ -1,44 +0,0 @@
-const hostName = window.location.hostname;
-export const isDevPlayground = hostName !== 'playground.lexical.dev' &&
-    hostName !== 'lexical-playground.vercel.app';
-export const DEFAULT_SETTINGS = {
-    useYjs: false,
-    disableBeforeInput: false,
-    emptyEditor: isDevPlayground,
-    hasLinkAttributes: false,
-    isAutocomplete: false,
-    isCharLimit: false,
-    isCharLimitUtf8: false,
-    isCodeHighlighted: true,
-    isCodeShiki: false,
-    isCollab: true, // Enable collaboration by default for testing
-    isMaxLength: false,
-    isRichText: true,
-    listStrictIndent: false,
-    measureTypingPerf: false,
-    selectionAlwaysOnDisplay: false,
-    shouldAllowHighlightingWithBrackets: false,
-    shouldPreserveNewLinesInMarkdown: false,
-    shouldUseLexicalContextMenu: false,
-    showNestedEditorTreeView: false,
-    showTableOfContents: false,
-    showTreeView: true,
-    tableCellBackgroundColor: true,
-    tableCellMerge: true,
-    tableHorizontalScroll: true,
-    debug: false, // Enable Loro debugging utilities
-};
-// These are mutated in setupEnv
-export const INITIAL_SETTINGS = {
-    ...DEFAULT_SETTINGS,
-};
-/**
- * Check if debug mode is enabled via URL parameter
- * @returns true if ?debug=true is in the URL, false otherwise
- */
-export function isDebugEnabled() {
-    if (typeof window === 'undefined')
-        return false;
-    const urlParams = new URLSearchParams(window.location.search);
-    return urlParams.get('debug') === 'true';
-}

package/lib/collab/loro/Bindings.d.ts

@@ -1,41 +0,0 @@
-import type { LexicalEditor } from 'lexical';
-import { Klass, LexicalNode } from 'lexical';
-import type { LoroDoc, LoroTree } from 'loro-crdt';
-import type { CollabCursor } from './sync/SyncCursors';
-import { NodeMapper } from './nodes/NodesMapper';
-import { Provider } from './State';
-export type ClientID = number;
-export type Binding = {
-    tree: LoroTree;
-    clientID: ClientID;
-    cursors: Map<ClientID, CollabCursor>;
-    cursorsContainer: null | HTMLElement;
-    doc: LoroDoc;
-    docMap: Map<string, LoroDoc>;
-    editor: LexicalEditor;
-    id: string;
-    nodeProperties: Map<string, Array<string>>;
-    excludedProperties: ExcludedProperties;
-    nodeMapper: NodeMapper;
-    commitTimeout?: NodeJS.Timeout | null;
-    pendingCommit?: boolean;
-};
-export type ExcludedProperties = Map<Klass<LexicalNode>, Set<string>>;
-export declare function createBinding(editor: LexicalEditor, provider: Provider, id: string, doc: LoroDoc | null | undefined, docMap: Map<string, LoroDoc>, excludedProperties?: ExcludedProperties): Binding;
-/**
- * Schedules an asynchronous commit for the binding to reduce latency with large documents.
- * Uses debouncing to prevent excessive commits during rapid mutations.
- *
- * @param binding - The binding to commit
- * @param delay - Debounce delay in milliseconds (default: 100ms)
- */
-export declare function scheduleAsyncCommit(binding: Binding, delay?: number): void;
-/**
- * Forces an immediate commit if there are pending changes.
- * Useful for ensuring changes are committed before important operations.
- *
- * @param binding - The binding to commit
- */
-export declare function flushPendingCommit(binding: Binding): void;
-export { LoroCollaborators, type LoroCollaboratorsProps, LoroCollaborationUI, type LoroCollaborationUIProps } from './components';
-export { setupLoroDebugging, addDebugPanel, logTreeStructure, verifyTreeStructure } from './Debug';

package/lib/collab/loro/Bindings.js

@@ -1,95 +0,0 @@
-import invariant from '../utils/invariant';
-import { getLoroTree, generateClientID } from './utils/Utils';
-import { initializeNodeMapper } from './nodes/NodesMapper';
-import { setupLoroDebugging } from './Debug';
-import { isDebugEnabled } from '../../appSettings';
-export function createBinding(editor, provider, id, doc, docMap, excludedProperties) {
-    invariant(doc !== undefined && doc !== null, 'createBinding: doc is null or undefined');
-    // Initialize the tree - content will come from server snapshot via sync
-    const tree = getLoroTree(doc);
-    console.log('📄 Loro tree initialized, content will be populated via server sync');
-    const clientID = generateClientID(doc);
-    console.log('🏗️ BINDING DEBUG - Creating binding:', {
-        bindingId: id,
-        localPeerId: doc.peerId,
-        generatedClientID: clientID,
-        docPeerIdType: typeof doc.peerId,
-        awarenessKey: clientID.toString()
-    });
-    const binding = {
-        clientID: clientID,
-        cursors: new Map(),
-        cursorsContainer: null,
-        doc,
-        docMap,
-        editor,
-        tree,
-        excludedProperties: excludedProperties || new Map(),
-        id,
-        nodeProperties: new Map(),
-        nodeMapper: null, // Will be initialized below
-        // Initialize async commit properties
-        commitTimeout: null,
-        pendingCommit: false,
-    };
-    // Initialize the NodeMapper with the binding
-    binding.nodeMapper = initializeNodeMapper(binding);
-    // Setup debugging utilities only if debug is enabled via URL parameter
-    if (isDebugEnabled()) {
-        setupLoroDebugging(binding);
-        console.log('🐛 Loro debugging enabled via ?debug=true URL parameter');
-    }
-    return binding;
-}
-/**
- * Schedules an asynchronous commit for the binding to reduce latency with large documents.
- * Uses debouncing to prevent excessive commits during rapid mutations.
- *
- * @param binding - The binding to commit
- * @param delay - Debounce delay in milliseconds (default: 100ms)
- */
-export function scheduleAsyncCommit(binding, delay = 500) {
-    // Clear any existing timeout
-    if (binding.commitTimeout) {
-        clearTimeout(binding.commitTimeout);
-    }
-    // Mark that we have pending changes
-    binding.pendingCommit = true;
-    // Schedule the commit after the specified delay
-    binding.commitTimeout = setTimeout(() => {
-        if (binding.pendingCommit) {
-            try {
-                // Perform the actual commit
-                binding.doc.commit({ origin: binding.doc.peerIdStr });
-                console.log('🔄 Async commit completed for binding:', binding.id);
-            }
-            catch (error) {
-                console.error('❌ Async commit failed for binding:', binding.id, error);
-            }
-            // Reset pending state
-            binding.pendingCommit = false;
-        }
-        binding.commitTimeout = null;
-    }, delay);
-}
-/**
- * Forces an immediate commit if there are pending changes.
- * Useful for ensuring changes are committed before important operations.
- *
- * @param binding - The binding to commit
- */
-export function flushPendingCommit(binding) {
-    if (binding.commitTimeout) {
-        clearTimeout(binding.commitTimeout);
-        binding.commitTimeout = null;
-    }
-    if (binding.pendingCommit) {
-        binding.doc.commit({ origin: binding.doc.peerIdStr });
-        binding.pendingCommit = false;
-        console.log('🔄 Forced commit completed for binding:', binding.id);
-    }
-}
-// Export components
-export { LoroCollaborators, LoroCollaborationUI } from './components';
-// Export debug utilities for development use
-export { setupLoroDebugging, addDebugPanel, logTreeStructure, verifyTreeStructure } from './Debug';