@datalayer/lexical-loro 0.0.3 → 0.1.0

package/README.md

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

package/lib/App.d.ts

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

package/lib/App.js

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

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

package/lib/Editor.js

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

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

package/lib/Settings.js

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

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

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

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