@lexical/react 0.1.4 → 0.1.8

package/LexicalCharacterLimitPlugin.dev.js

@@ -0,0 +1,352 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
+var React = require('react');
+var lexical = require('lexical');
+var withSubscriptions = require('@lexical/react/withSubscriptions');
+var OverflowNode = require('lexical/OverflowNode');
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+function $dfs__DEPRECATED(startingNode, nextNode) {
+  let node = startingNode;
+  nextNode(node);
+
+  while (node !== null) {
+    if (lexical.$isElementNode(node) && node.getChildrenSize() > 0) {
+      node = node.getFirstChild();
+    } else {
+      // Find immediate sibling or nearest parent sibling
+      let sibling = null;
+
+      while (sibling === null && node !== null) {
+        sibling = node.getNextSibling();
+
+        if (sibling === null) {
+          node = node.getParent();
+        } else {
+          node = sibling;
+        }
+      }
+    }
+
+    if (node !== null) {
+      node = nextNode(node);
+    }
+  }
+}
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+function $textContent() {
+  const root = lexical.$getRoot();
+  return root.getTextContent();
+}
+const $textContentCurry = $textContent;
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+function useCharacterLimit(editor, maxCharacters, optional = Object.freeze({})) {
+  const {
+    strlen = input => input.length,
+    // UTF-16
+    remainingCharacters = characters => {}
+  } = optional;
+  React.useEffect(() => {
+    if (!editor.hasNodes([OverflowNode.OverflowNode])) {
+      {
+        throw Error(`useCharacterLimit: OverflowNode not registered on editor`);
+      }
+    }
+  }, [editor]);
+  React.useEffect(() => {
+    let text = editor.getEditorState().read($textContentCurry);
+    let lastComputedTextLength = 0;
+    return withSubscriptions(editor.addListener('textcontent', currentText => {
+      text = currentText;
+    }), editor.addListener('update', ({
+      dirtyLeaves
+    }) => {
+      const isComposing = editor.isComposing();
+      const hasDirtyLeaves = dirtyLeaves.size > 0;
+
+      if (isComposing || !hasDirtyLeaves) {
+        return;
+      }
+
+      const textLength = strlen(text);
+      const textLengthAboveThreshold = textLength > maxCharacters || lastComputedTextLength !== null && lastComputedTextLength > maxCharacters;
+      const diff = maxCharacters - textLength;
+      remainingCharacters(diff);
+
+      if (lastComputedTextLength === null || textLengthAboveThreshold) {
+        const offset = findOffset(text, maxCharacters, strlen);
+        editor.update(() => {
+          lexical.$log('CharacterLimit');
+          $wrapOverflowedNodes(offset);
+        }, {
+          tag: 'without-history'
+        });
+      }
+
+      lastComputedTextLength = textLength;
+    }));
+  }, [editor, maxCharacters, remainingCharacters, strlen]);
+}
+
+function findOffset(text, maxCharacters, strlen) {
+  const Segmenter = Intl.Segmenter;
+  let offsetUtf16 = 0;
+  let offset = 0;
+
+  if (typeof Segmenter === 'function') {
+    const segmenter = new Segmenter();
+    const graphemes = segmenter.segment(text); // eslint-disable-next-line no-for-of-loops/no-for-of-loops
+
+    for (const {
+      segment: grapheme
+    } of graphemes) {
+      const nextOffset = offset + strlen(grapheme);
+
+      if (nextOffset > maxCharacters) {
+        break;
+      }
+
+      offset = nextOffset;
+      offsetUtf16 += grapheme.length;
+    }
+  } else {
+    const codepoints = Array.from(text);
+    const codepointsLength = codepoints.length;
+
+    for (let i = 0; i < codepointsLength; i++) {
+      const codepoint = codepoints[i];
+      const nextOffset = offset + strlen(codepoint);
+
+      if (nextOffset > maxCharacters) {
+        break;
+      }
+
+      offset = nextOffset;
+      offsetUtf16 += codepoint.length;
+    }
+  }
+
+  return offsetUtf16;
+}
+
+function $wrapOverflowedNodes(offset) {
+  const root = lexical.$getRoot();
+  let accumulatedLength = 0;
+  let previousNode = root;
+  $dfs__DEPRECATED(root, node => {
+    if (OverflowNode.$isOverflowNode(node)) {
+      const previousLength = accumulatedLength;
+      const nextLength = accumulatedLength + node.getTextContentSize();
+
+      if (nextLength <= offset) {
+        const parent = node.getParent();
+        const previousSibling = node.getPreviousSibling();
+        const nextSibling = node.getNextSibling();
+        $unwrapNode(node);
+        const selection = lexical.$getSelection(); // Restore selection when the overflow children are removed
+
+        if (selection !== null && (!selection.anchor.getNode().isAttached() || !selection.focus.getNode().isAttached())) {
+          if (lexical.$isTextNode(previousSibling)) {
+            previousSibling.select();
+          } else if (lexical.$isTextNode(nextSibling)) {
+            nextSibling.select();
+          } else if (parent !== null) {
+            parent.select();
+          }
+        }
+
+        return previousNode;
+      } else if (previousLength < offset) {
+        const descendant = node.getFirstDescendant();
+        const descendantLength = descendant !== null ? descendant.getTextContentSize() : 0;
+        const previousPlusDescendantLength = previousLength + descendantLength; // For simple text we can redimension the overflow into a smaller and more accurate
+        // container
+
+        const firstDescendantIsSimpleText = lexical.$isTextNode(descendant) && descendant.isSimpleText();
+        const firstDescendantDoesNotOverflow = previousPlusDescendantLength <= offset;
+
+        if (firstDescendantIsSimpleText || firstDescendantDoesNotOverflow) {
+          $unwrapNode(node);
+          return previousNode;
+        }
+      }
+    } else if (lexical.$isLeafNode(node)) {
+      const previousAccumulatedLength = accumulatedLength;
+      accumulatedLength += node.getTextContentSize();
+
+      if (accumulatedLength > offset && !OverflowNode.$isOverflowNode(node.getParent())) {
+        const previousSelection = lexical.$getSelection();
+        let overflowNode; // For simple text we can improve the limit accuracy by splitting the TextNode
+        // on the split point
+
+        if (previousAccumulatedLength < offset && lexical.$isTextNode(node) && node.isSimpleText()) {
+          const [, overflowedText] = node.splitText(offset - previousAccumulatedLength);
+          overflowNode = $wrapNode(overflowedText);
+        } else {
+          overflowNode = $wrapNode(node);
+        }
+
+        if (previousSelection !== null) {
+          lexical.$setSelection(previousSelection);
+        }
+
+        mergePrevious(overflowNode);
+      }
+    }
+
+    previousNode = node;
+    return node;
+  });
+}
+
+function $wrapNode(node) {
+  const overflowNode = OverflowNode.$createOverflowNode();
+  node.insertBefore(overflowNode);
+  overflowNode.append(node);
+  return overflowNode;
+}
+
+function $unwrapNode(node) {
+  const children = node.getChildren();
+  const childrenLength = children.length;
+
+  for (let i = 0; i < childrenLength; i++) {
+    node.insertBefore(children[i]);
+  }
+
+  node.remove();
+  return childrenLength > 0 ? children[childrenLength - 1] : null;
+}
+
+function mergePrevious(overflowNode) {
+  const previousNode = overflowNode.getPreviousSibling();
+
+  if (!OverflowNode.$isOverflowNode(previousNode)) {
+    return;
+  }
+
+  const firstChild = overflowNode.getFirstChild();
+  const previousNodeChildren = previousNode.getChildren();
+  const previousNodeChildrenLength = previousNodeChildren.length;
+
+  if (firstChild === null) {
+    overflowNode.append(...previousNodeChildren);
+  } else {
+    for (let i = 0; i < previousNodeChildrenLength; i++) {
+      firstChild.insertBefore(previousNodeChildren[i]);
+    }
+  }
+
+  const selection = lexical.$getSelection();
+
+  if (selection !== null) {
+    const anchor = selection.anchor;
+    const anchorNode = anchor.getNode();
+    const focus = selection.focus;
+    const focusNode = anchor.getNode();
+
+    if (anchorNode.is(previousNode)) {
+      anchor.set(overflowNode.getKey(), anchor.offset, 'element');
+    } else if (anchorNode.is(overflowNode)) {
+      anchor.set(overflowNode.getKey(), previousNodeChildrenLength + anchor.offset, 'element');
+    }
+
+    if (focusNode.is(previousNode)) {
+      focus.set(overflowNode.getKey(), focus.offset, 'element');
+    } else if (focusNode.is(overflowNode)) {
+      focus.set(overflowNode.getKey(), previousNodeChildrenLength + focus.offset, 'element');
+    }
+  }
+
+  previousNode.remove();
+}
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+const CHARACTER_LIMIT = 5;
+let textEncoderInstance = null;
+
+function textEncoder() {
+  if (window.TextEncoder === undefined) {
+    return null;
+  }
+
+  if (textEncoderInstance === null) {
+    textEncoderInstance = new window.TextEncoder();
+  }
+
+  return textEncoderInstance;
+}
+
+function utf8Length(text) {
+  const currentTextEncoder = textEncoder();
+
+  if (currentTextEncoder === null) {
+    // http://stackoverflow.com/a/5515960/210370
+    const m = encodeURIComponent(text).match(/%[89ABab]/g);
+    return text.length + (m ? m.length : 0);
+  }
+
+  return currentTextEncoder.encode(text).length;
+}
+
+function CharacterLimitPlugin({
+  charset = 'UTF-16'
+}) {
+  const [editor] = LexicalComposerContext.useLexicalComposerContext();
+  const [remainingCharacters, setRemainingCharacters] = React.useState(0);
+  const characterLimitProps = React.useMemo(() => ({
+    remainingCharacters: setRemainingCharacters,
+    strlen: text => {
+      if (charset === 'UTF-8') {
+        return utf8Length(text);
+      } else if (charset === 'UTF-16') {
+        return text.length;
+      } else {
+        throw new Error('Unrecognized charset');
+      }
+    }
+  }), [charset]);
+  useCharacterLimit(editor, CHARACTER_LIMIT, characterLimitProps);
+  return /*#__PURE__*/React.createElement("span", {
+    className: `characters-limit ${remainingCharacters < 0 ? 'characters-limit-exceeded' : ''}`
+  }, remainingCharacters);
+}
+
+module.exports = CharacterLimitPlugin;

package/LexicalCharacterLimitPlugin.js

@@ -1,10 +1,9 @@
-'use strict';var l=require("@lexical/react/LexicalComposerContext"),p=require("lexical"),q=require("react"),r=require("@lexical/react/withSubscriptions");function t(a,e){for(e(a);null!==a;){if(p.$isElementNode(a)&&0<a.getChildrenSize())a=a.getFirstChild();else{let f=null;for(;null===f&&null!==a;)f=a.getNextSibling(),a=null===f?a.getParent():f}null!==a&&(a=e(a))}}function u(){return p.$getRoot().getTextContent()}
-function w(a,e,f={}){const {strlen:h=c=>c.length,remainingCharacters:d=()=>{}}=f;q.useEffect(()=>a.registerNodes([x]),[a]);q.useEffect(()=>{let c=a.getEditorState().read(u),b=0;return r(a.addListener("textcontent",g=>{c=g}),a.addListener("update",({dirtyLeaves:g})=>{var k=a.isComposing();g=0<g.size;if(!k&&g){k=h(c);g=k>e||null!==b&&b>e;d(e-k);if(null===b||g){const n=y(c,e,h);a.update(()=>{p.$log("CharacterLimit");z(n)},{tag:"without-history"})}b=k}}))},[a,e,d,h])}
-function y(a,e,f){var h=Intl.Segmenter;let d=0;var c=0;if("function"===typeof h){a=(new h).segment(a);for(var {segment:b}of a){c+=f(b);if(c>e)break;d+=b.length}}else for(b=Array.from(a),a=b.length,h=0;h<a;h++){const g=b[h];c+=f(g);if(c>e)break;d+=g.length}return d}
-function z(a){const e=p.$getRoot();let f=0,h=e;t(e,d=>{if(d instanceof x){var c=f;if(f+d.getTextContentSize()<=a){var b=d.getParent();c=d.getPreviousSibling();var g=d.getNextSibling();A(d);d=p.$getSelection();null===d||d.anchor.getNode().isAttached()&&d.focus.getNode().isAttached()||(p.$isTextNode(c)?c.select():p.$isTextNode(g)?g.select():null!==b&&b.select());return h}if(c<a&&(b=d.getFirstDescendant(),g=null!==b?b.getTextContentSize():0,c+=g,b=p.$isTextNode(b)&&b.isSimpleText(),c=c<=a,b||c))return A(d),
-h}else if(p.$isLeafNode(d)&&(c=f,f+=d.getTextContentSize(),f>a&&!(d.getParent()instanceof x)&&(b=p.$getSelection(),c<a&&p.$isTextNode(d)&&d.isSimpleText()?([,c]=d.splitText(a-c),c=B(c)):c=B(d),null!==b&&p.$setSelection(b),b=c,g=b.getPreviousSibling(),g instanceof x))){var k=b.getFirstChild(),n=g.getChildren();c=n.length;if(null===k)b.append(...n);else for(var m=0;m<c;m++)k.insertBefore(n[m]);m=p.$getSelection();if(null!==m){k=m.anchor;n=k.getNode();m=m.focus;const v=k.getNode();n.is(g)?k.set(b.getKey(),
-k.offset,"element"):n.is(b)&&k.set(b.getKey(),c+k.offset,"element");v.is(g)?m.set(b.getKey(),m.offset,"element"):v.is(b)&&m.set(b.getKey(),c+m.offset,"element")}g.remove()}return h=d})}
-class x extends p.ElementNode{static getType(){return"overflow"}static clone(a){return new x(a.__key)}constructor(a){super(a);this.__type="overflow"}createDOM(a){const e=document.createElement("div");a=a.theme.characterLimit;"string"===typeof a&&(e.className=a);return e}updateDOM(){return!1}insertNewAfter(a){return this.getParentOrThrow().insertNewAfter(a)}excludeFromCopy(){return!0}}function B(a){const e=new x;a.insertBefore(e);e.append(a);return e}
-function A(a){const e=a.getChildren(),f=e.length;for(let h=0;h<f;h++)a.insertBefore(e[h]);a.remove();return 0<f?e[f-1]:null}let C=null;
-module.exports=function({charset:a="UTF-16"}){const [e]=l.useLexicalComposerContext(),[f,h]=q.useState(0),d=q.useMemo(()=>({remainingCharacters:h,strlen:c=>{if("UTF-8"===a){if(void 0===window.TextEncoder)var b=null;else null===C&&(C=new window.TextEncoder),b=C;null===b?(b=encodeURIComponent(c).match(/%[89ABab]/g),c=c.length+(b?b.length:0)):c=b.encode(c).length;return c}if("UTF-16"===a)return c.length;throw Error("Unrecognized charset");}}),[a]);w(e,5,d);return q.createElement("span",{className:`characters-limit ${0>
-f?"characters-limit-exceeded":""}`},f)};
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict'
+const LexicalCharacterLimitPlugin = process.env.NODE_ENV === 'development' ? require('./LexicalCharacterLimitPlugin.dev.js') : require('./LexicalCharacterLimitPlugin.prod.js')
+module.exports = LexicalCharacterLimitPlugin;

package/LexicalCharacterLimitPlugin.prod.js

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';var l=require("@lexical/react/LexicalComposerContext"),p=require("react"),q=require("lexical"),r=require("@lexical/react/withSubscriptions"),t=require("lexical/OverflowNode");function u(a,e){for(e(a);null!==a;){if(q.$isElementNode(a)&&0<a.getChildrenSize())a=a.getFirstChild();else{let f=null;for(;null===f&&null!==a;)f=a.getNextSibling(),a=null===f?a.getParent():f}null!==a&&(a=e(a))}}function w(){return q.$getRoot().getTextContent()}
+function x(a,e,f=Object.freeze({})){const {strlen:h=c=>c.length,remainingCharacters:d=()=>{}}=f;p.useEffect(()=>{if(!a.hasNodes([t.OverflowNode]))throw Error("useCharacterLimit: OverflowNode not registered on editor");},[a]);p.useEffect(()=>{let c=a.getEditorState().read(w),b=0;return r(a.addListener("textcontent",g=>{c=g}),a.addListener("update",({dirtyLeaves:g})=>{var k=a.isComposing();g=0<g.size;if(!k&&g){k=h(c);g=k>e||null!==b&&b>e;d(e-k);if(null===b||g){const n=y(c,e,h);a.update(()=>{q.$log("CharacterLimit");
+z(n)},{tag:"without-history"})}b=k}}))},[a,e,d,h])}function y(a,e,f){var h=Intl.Segmenter;let d=0;var c=0;if("function"===typeof h){a=(new h).segment(a);for(var {segment:b}of a){c+=f(b);if(c>e)break;d+=b.length}}else for(b=Array.from(a),a=b.length,h=0;h<a;h++){const g=b[h];c+=f(g);if(c>e)break;d+=g.length}return d}
+function z(a){const e=q.$getRoot();let f=0,h=e;u(e,d=>{if(t.$isOverflowNode(d)){var c=f;if(f+d.getTextContentSize()<=a){var b=d.getParent();c=d.getPreviousSibling();var g=d.getNextSibling();A(d);d=q.$getSelection();null===d||d.anchor.getNode().isAttached()&&d.focus.getNode().isAttached()||(q.$isTextNode(c)?c.select():q.$isTextNode(g)?g.select():null!==b&&b.select());return h}if(c<a&&(b=d.getFirstDescendant(),g=null!==b?b.getTextContentSize():0,c+=g,b=q.$isTextNode(b)&&b.isSimpleText(),c=c<=a,b||c))return A(d),
+h}else if(q.$isLeafNode(d)&&(c=f,f+=d.getTextContentSize(),f>a&&!t.$isOverflowNode(d.getParent())&&(b=q.$getSelection(),c<a&&q.$isTextNode(d)&&d.isSimpleText()?([,c]=d.splitText(a-c),c=B(c)):c=B(d),null!==b&&q.$setSelection(b),b=c,g=b.getPreviousSibling(),t.$isOverflowNode(g)))){var k=b.getFirstChild(),n=g.getChildren();c=n.length;if(null===k)b.append(...n);else for(var m=0;m<c;m++)k.insertBefore(n[m]);m=q.$getSelection();if(null!==m){k=m.anchor;n=k.getNode();m=m.focus;const v=k.getNode();n.is(g)?
+k.set(b.getKey(),k.offset,"element"):n.is(b)&&k.set(b.getKey(),c+k.offset,"element");v.is(g)?m.set(b.getKey(),m.offset,"element"):v.is(b)&&m.set(b.getKey(),c+m.offset,"element")}g.remove()}return h=d})}function B(a){const e=t.$createOverflowNode();a.insertBefore(e);e.append(a);return e}function A(a){const e=a.getChildren(),f=e.length;for(let h=0;h<f;h++)a.insertBefore(e[h]);a.remove();return 0<f?e[f-1]:null}let C=null;
+module.exports=function({charset:a="UTF-16"}){const [e]=l.useLexicalComposerContext(),[f,h]=p.useState(0),d=p.useMemo(()=>({remainingCharacters:h,strlen:c=>{if("UTF-8"===a){if(void 0===window.TextEncoder)var b=null;else null===C&&(C=new window.TextEncoder),b=C;null===b?(b=encodeURIComponent(c).match(/%[89ABab]/g),c=c.length+(b?b.length:0)):c=b.encode(c).length;return c}if("UTF-16"===a)return c.length;throw Error("Unrecognized charset");}}),[a]);x(e,5,d);return p.createElement("span",{className:`characters-limit ${0>
+f?"characters-limit-exceeded":""}`},f)};

package/LexicalCollaborationPlugin.dev.js

@@ -0,0 +1,235 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
+var React = require('react');
+var yjs = require('@lexical/yjs');
+var reactDom = require('react-dom');
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+const EditorPriority = 0;
+const BootstrapPriority = 1;
+function useYjsCollaboration(editor, id, provider, docMap, name, color, shouldBootstrap) {
+  const binding = React.useMemo(() => yjs.createBinding(editor, provider, id, docMap), [editor, provider, id, docMap]);
+  const connect = React.useCallback(() => {
+    provider.connect();
+  }, [provider]);
+  const disconnect = React.useCallback(() => {
+    try {
+      provider.disconnect();
+    } catch (e) {// Do nothing
+    }
+  }, [provider]);
+  const isInitialized = React.useRef(false);
+  React.useLayoutEffect(() => {
+    return editor.addListener('command', type => {
+      if (type === 'bootstrapEditor') {
+        return !isInitialized.current;
+      }
+
+      return false;
+    }, BootstrapPriority);
+  }, [editor]);
+  React.useEffect(() => {
+    const {
+      root
+    } = binding;
+    const {
+      awareness
+    } = provider;
+
+    const onStatus = ({
+      status
+    }) => {
+      editor.execCommand('connected', status === 'connected');
+    };
+
+    const onSync = isSynced => {
+      if (shouldBootstrap && isSynced && root.isEmpty() && root._xmlText._length === 0) {
+        isInitialized.current = true;
+        editor.execCommand('bootstrapEditor');
+      }
+    };
+
+    const onAwarenessUpdate = () => {
+      yjs.syncCursorPositions(binding, provider);
+    };
+
+    const onYjsTreeChanges = (events, transaction) => {
+      if (transaction.origin !== binding) {
+        yjs.syncYjsChangesToLexical(binding, provider, events);
+      }
+    };
+
+    yjs.initLocalState(provider, name, color, document.activeElement === editor.getRootElement());
+    provider.on('status', onStatus);
+    provider.on('sync', onSync);
+    awareness.on('update', onAwarenessUpdate);
+    root.getSharedType().observeDeep(onYjsTreeChanges);
+    const removeListener = editor.addListener('update', ({
+      prevEditorState,
+      editorState,
+      dirtyLeaves,
+      dirtyElements,
+      normalizedNodes,
+      tags
+    }) => {
+      yjs.syncLexicalUpdateToYjs(binding, provider, prevEditorState, editorState, dirtyElements, dirtyLeaves, normalizedNodes, tags);
+    });
+    connect();
+    return () => {
+      disconnect();
+      provider.off('sync', onSync);
+      provider.off('status', onStatus);
+      awareness.off('update', onAwarenessUpdate);
+      root.getSharedType().unobserveDeep(onYjsTreeChanges);
+      removeListener();
+    };
+  }, [binding, color, connect, disconnect, editor, name, provider, shouldBootstrap]);
+  const cursorsContainer = React.useMemo(() => {
+    const ref = element => {
+      binding.cursorsContainer = element;
+    };
+
+    return /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/React.createElement("div", {
+      ref: ref
+    }), document.body);
+  }, [binding]);
+  React.useEffect(() => {
+    return editor.addListener('command', (type, payload) => {
+      if (type === 'toggleConnect') {
+        if (connect !== undefined && disconnect !== undefined) {
+          const shouldConnect = payload;
+
+          if (shouldConnect) {
+            // eslint-disable-next-line no-console
+            console.log('Collaboration connected!');
+            connect();
+          } else {
+            // eslint-disable-next-line no-console
+            console.log('Collaboration disconnected!');
+            disconnect();
+          }
+        }
+      }
+
+      return false;
+    }, EditorPriority);
+  }, [connect, disconnect, editor]);
+  return [cursorsContainer, binding];
+}
+function useYjsFocusTracking(editor, provider) {
+  React.useEffect(() => {
+    const onBlur = () => {
+      yjs.setLocalStateFocus(provider, false);
+    };
+
+    const onFocus = () => {
+      yjs.setLocalStateFocus(provider, true);
+    };
+
+    return editor.addListener('root', (rootElement, prevRootElement) => {
+      // Clear our old listener if the root element changes
+      if (prevRootElement !== null) {
+        prevRootElement.removeEventListener('blur', onBlur);
+        prevRootElement.removeEventListener('focus', onFocus);
+      }
+
+      if (rootElement !== null) {
+        if (document.activeElement === rootElement) {
+          onFocus();
+        }
+
+        rootElement.addEventListener('blur', onBlur);
+        rootElement.addEventListener('focus', onFocus);
+      }
+    });
+  }, [editor, provider, provider.awareness]);
+}
+function useYjsHistory(editor, binding) {
+  const undoManager = React.useMemo(() => yjs.createUndoManager(binding, binding.root.getSharedType()), [binding]);
+  React.useEffect(() => {
+    const undo = () => {
+      undoManager.undo();
+    };
+
+    const redo = () => {
+      undoManager.redo();
+    };
+
+    const applyCommand = type => {
+      if (type === 'undo') {
+        undo();
+        return true;
+      }
+
+      if (type === 'redo') {
+        redo();
+        return true;
+      }
+
+      return false;
+    };
+
+    return editor.addListener('command', applyCommand, EditorPriority);
+  });
+  const clearHistory = React.useCallback(() => {
+    undoManager.clear();
+  }, [undoManager]);
+  return clearHistory;
+}
+
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+const entries = [['Cat', '255,165,0'], ['Dog', '0,200,55'], ['Rabbit', '160,0,200'], ['Frog', '0,172,200'], ['Fox', '197,200,0'], ['Hedgehog', '31,200,0'], ['Pigeon', '200,0,0'], ['Squirrel', '200,0,148'], ['Bear', '255,235,0'], ['Tiger', '86,255,0'], ['Leopard', '0,255,208'], ['Zebra', '0,243,255'], ['Wolf', '0,102,255'], ['Owl', '147,0,255'], ['Gull', '255,0,153'], ['Squid', '0,220,255']];
+const randomEntry = entries[Math.floor(Math.random() * (entries.length - 1 - 0 + 1) + 0)];
+function CollaborationPlugin({
+  id,
+  providerFactory,
+  shouldBootstrap
+}) {
+  const collabContext = useCollaborationContext();
+  const {
+    yjsDocMap,
+    name,
+    color
+  } = collabContext;
+  const [editor] = LexicalComposerContext.useLexicalComposerContext();
+  const provider = React.useMemo(() => providerFactory(id, yjsDocMap), [id, providerFactory, yjsDocMap]);
+  const [cursors, binding] = useYjsCollaboration(editor, id, provider, yjsDocMap, name, color, shouldBootstrap);
+  collabContext.clientID = binding.clientID;
+  useYjsHistory(editor, binding);
+  useYjsFocusTracking(editor, provider);
+  return cursors;
+}
+const CollaborationContext = /*#__PURE__*/React.createContext({
+  clientID: 0,
+  color: randomEntry[1],
+  name: randomEntry[0],
+  yjsDocMap: new Map()
+});
+function useCollaborationContext() {
+  return React.useContext(CollaborationContext);
+}
+
+exports.CollaborationContext = CollaborationContext;
+exports.CollaborationPlugin = CollaborationPlugin;
+exports.useCollaborationContext = useCollaborationContext;

package/LexicalCollaborationPlugin.js

@@ -1,8 +1,9 @@
-'use strict';var d=require("react"),g=require("@lexical/react/LexicalComposerContext"),t=require("react-dom"),z=require("@lexical/yjs"),A=require("lexical"),B=require("lexical/ParagraphNode");function C(b){b.update(()=>{A.$log("initEditor");var c=A.$getRoot();if(null===c.getFirstChild()){const a=B.$createParagraphNode();c.append(a);c=document.activeElement;(null!==A.$getSelection()||null!==c&&c===b.getRootElement())&&a.select()}})}
-function D(b,c,a,e,h,l,q){const f=d.useMemo(()=>z.createBinding(b,a,c,e),[b,a,c,e]),m=d.useCallback(()=>{a.connect()},[a]),n=d.useCallback(()=>{try{a.disconnect()}catch(k){}},[a]);d.useEffect(()=>{const {root:k}=f,{awareness:r}=a,v=({status:p})=>{b.execCommand("connected","connected"===p)},w=p=>{!q&&p&&k.isEmpty()&&0===k._xmlText._length&&C(b)},x=()=>{z.syncCursorPositions(f,a)},y=(p,u)=>{u.origin!==f&&z.syncYjsChangesToLexical(f,a,p)};z.initLocalState(a,h,l,document.activeElement===b.getRootElement());
-a.on("status",v);a.on("sync",w);r.on("update",x);k.getSharedType().observeDeep(y);const M=b.addListener("update",({prevEditorState:p,editorState:u,dirtyLeaves:I,dirtyElements:J,normalizedNodes:K,tags:L})=>{z.syncLexicalUpdateToYjs(f,a,p,u,J,I,K,L)});m();return()=>{n();a.off("sync",w);a.off("status",v);r.off("update",x);k.getSharedType().unobserveDeep(y);M()}},[f,l,m,n,b,h,a,q]);const N=d.useMemo(()=>t.createPortal(d.createElement("div",{ref:k=>{f.cursorsContainer=k}}),document.body),[f]);d.useEffect(()=>
-b.addListener("command",(k,r)=>{"toggleConnect"===k&&void 0!==m&&void 0!==n&&(r?(console.log("Collaboration connected!"),m()):(console.log("Collaboration disconnected!"),n()));return!1},0),[m,n,b]);return[N,f]}
-function E(b,c){d.useEffect(()=>{const a=()=>{z.setLocalStateFocus(c,!1)},e=()=>{z.setLocalStateFocus(c,!0)};return b.addListener("root",(h,l)=>{null!==l&&(l.removeEventListener("blur",a),l.removeEventListener("focus",e));null!==h&&(document.activeElement===h&&z.setLocalStateFocus(c,!0),h.addEventListener("blur",a),h.addEventListener("focus",e))})},[b,c,c.awareness])}
-function F(b,c){const a=d.useMemo(()=>z.createUndoManager(c,c.root.getSharedType()),[c]);d.useEffect(()=>b.addListener("command",e=>"undo"===e?(a.undo(),!0):"redo"===e?(a.redo(),!0):!1,0));return d.useCallback(()=>{a.clear()},[a])}
-const G=[["Cat","255,165,0"],["Dog","0,200,55"],["Rabbit","160,0,200"],["Frog","0,172,200"],["Fox","197,200,0"],["Hedgehog","31,200,0"],["Pigeon","200,0,0"],["Squirrel","200,0,148"],["Bear","255,235,0"],["Tiger","86,255,0"],["Leopard","0,255,208"],["Zebra","0,243,255"],["Wolf","0,102,255"],["Owl","147,0,255"],["Gull","255,0,153"],["Squid","0,220,255"]],H=G[Math.floor(Math.random()*(G.length-1+1))],O=d.createContext({yjsDocMap:new Map,name:H[0],color:H[1]});function P(){return d.useContext(O)}
-exports.CollaborationContext=O;exports.CollaborationPlugin=function({id:b,providerFactory:c,skipInit:a}){const {yjsDocMap:e,name:h,color:l}=P(),[q]=g.useLexicalComposerContext(),f=d.useMemo(()=>c(b,e),[b,c,e]),[m,n]=D(q,b,f,e,h,l,a||!1);F(q,n);E(q,f);return m};exports.useCollaborationContext=P;
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict'
+const LexicalCollaborationPlugin = process.env.NODE_ENV === 'development' ? require('./LexicalCollaborationPlugin.dev.js') : require('./LexicalCollaborationPlugin.prod.js')
+module.exports = LexicalCollaborationPlugin;

package/LexicalCollaborationPlugin.prod.js

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';var c=require("@lexical/react/LexicalComposerContext"),k=require("react"),z=require("@lexical/yjs"),A=require("react-dom");
+function B(b,d,a,f,g,l,r){const e=k.useMemo(()=>z.createBinding(b,a,d,f),[b,a,d,f]),m=k.useCallback(()=>{a.connect()},[a]),n=k.useCallback(()=>{try{a.disconnect()}catch(h){}},[a]),q=k.useRef(!1);k.useLayoutEffect(()=>b.addListener("command",h=>"bootstrapEditor"===h?!q.current:!1,1),[b]);k.useEffect(()=>{const {root:h}=e,{awareness:t}=a,v=({status:p})=>{b.execCommand("connected","connected"===p)},w=p=>{r&&p&&h.isEmpty()&&0===h._xmlText._length&&(q.current=!0,b.execCommand("bootstrapEditor"))},x=()=>
+{z.syncCursorPositions(e,a)},y=(p,u)=>{u.origin!==e&&z.syncYjsChangesToLexical(e,a,p)};z.initLocalState(a,g,l,document.activeElement===b.getRootElement());a.on("status",v);a.on("sync",w);t.on("update",x);h.getSharedType().observeDeep(y);const K=b.addListener("update",({prevEditorState:p,editorState:u,dirtyLeaves:G,dirtyElements:H,normalizedNodes:I,tags:J})=>{z.syncLexicalUpdateToYjs(e,a,p,u,H,G,I,J)});m();return()=>{n();a.off("sync",w);a.off("status",v);t.off("update",x);h.getSharedType().unobserveDeep(y);
+K()}},[e,l,m,n,b,g,a,r]);const L=k.useMemo(()=>A.createPortal(k.createElement("div",{ref:h=>{e.cursorsContainer=h}}),document.body),[e]);k.useEffect(()=>b.addListener("command",(h,t)=>{"toggleConnect"===h&&void 0!==m&&void 0!==n&&(t?(console.log("Collaboration connected!"),m()):(console.log("Collaboration disconnected!"),n()));return!1},0),[m,n,b]);return[L,e]}
+function C(b,d){k.useEffect(()=>{const a=()=>{z.setLocalStateFocus(d,!1)},f=()=>{z.setLocalStateFocus(d,!0)};return b.addListener("root",(g,l)=>{null!==l&&(l.removeEventListener("blur",a),l.removeEventListener("focus",f));null!==g&&(document.activeElement===g&&z.setLocalStateFocus(d,!0),g.addEventListener("blur",a),g.addEventListener("focus",f))})},[b,d,d.awareness])}
+function D(b,d){const a=k.useMemo(()=>z.createUndoManager(d,d.root.getSharedType()),[d]);k.useEffect(()=>b.addListener("command",f=>"undo"===f?(a.undo(),!0):"redo"===f?(a.redo(),!0):!1,0));return k.useCallback(()=>{a.clear()},[a])}
+const E=[["Cat","255,165,0"],["Dog","0,200,55"],["Rabbit","160,0,200"],["Frog","0,172,200"],["Fox","197,200,0"],["Hedgehog","31,200,0"],["Pigeon","200,0,0"],["Squirrel","200,0,148"],["Bear","255,235,0"],["Tiger","86,255,0"],["Leopard","0,255,208"],["Zebra","0,243,255"],["Wolf","0,102,255"],["Owl","147,0,255"],["Gull","255,0,153"],["Squid","0,220,255"]],F=E[Math.floor(Math.random()*(E.length-1+1))],M=k.createContext({clientID:0,color:F[1],name:F[0],yjsDocMap:new Map});
+function N(){return k.useContext(M)}exports.CollaborationContext=M;exports.CollaborationPlugin=function({id:b,providerFactory:d,shouldBootstrap:a}){const f=N(),{yjsDocMap:g,name:l,color:r}=f,[e]=c.useLexicalComposerContext(),m=k.useMemo(()=>d(b,g),[b,d,g]),[n,q]=B(e,b,m,g,l,r,a);f.clientID=q.clientID;D(e,q);C(e,m);return n};exports.useCollaborationContext=N;