@lexical/react 0.1.12 → 0.1.13

package/LexicalCollaborationPlugin.dev.js

@@ -32,7 +32,6 @@ function useYjsCollaboration(editor, id, provider, docMap, name, color, shouldBo
     } catch (e) {// Do nothing
     }
   }, [provider]);
-  const bootstrapPropagationRef = React.useRef(true);
   React.useEffect(() => {
     const {
       root
@@ -49,7 +48,6 @@ function useYjsCollaboration(editor, id, provider, docMap, name, color, shouldBo
 
     const onSync = isSynced => {
       if (shouldBootstrap && isSynced && root.isEmpty() && root._xmlText._length === 0) {
-        bootstrapPropagationRef.current = false;
         initializeEditor(editor);
       }
     };

package/LexicalCollaborationPlugin.prod.js

@@ -5,9 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 var d=require("@lexical/react/LexicalComposerContext"),g=require("react"),u=require("@lexical/yjs"),A=require("lexical"),B=require("react-dom");
-function C(b,c,a,h,n,p,q){const e=g.useMemo(()=>u.createBinding(b,a,c,h),[b,a,c,h]),k=g.useCallback(()=>{a.connect()},[a]),l=g.useCallback(()=>{try{a.disconnect()}catch(f){}},[a]),r=g.useRef(!0);g.useEffect(()=>{const {root:f}=e,{awareness:t}=a,w=({status:m})=>{b.execCommand("connected","connected"===m)},x=m=>{q&&m&&f.isEmpty()&&0===f._xmlText._length&&(r.current=!1,D(b))},y=()=>{u.syncCursorPositions(e,a)},z=(m,v)=>{v.origin!==e&&u.syncYjsChangesToLexical(e,a,m)};u.initLocalState(a,n,p,document.activeElement===
-b.getRootElement());a.on("status",w);a.on("sync",x);t.on("update",y);f.getSharedType().observeDeep(z);const M=b.addListener("update",({prevEditorState:m,editorState:v,dirtyLeaves:I,dirtyElements:J,normalizedNodes:K,tags:L})=>{u.syncLexicalUpdateToYjs(e,a,m,v,J,I,K,L)});k();return()=>{l();a.off("sync",x);a.off("status",w);t.off("update",y);f.getSharedType().unobserveDeep(z);M()}},[e,p,k,l,b,n,a,q]);const N=g.useMemo(()=>B.createPortal(g.createElement("div",{ref:f=>{e.cursorsContainer=f}}),document.body),
-[e]);g.useEffect(()=>b.addListener("command",(f,t)=>{"toggleConnect"===f&&void 0!==k&&void 0!==l&&(t?(console.log("Collaboration connected!"),k()):(console.log("Collaboration disconnected!"),l()));return!1},0),[k,l,b]);return[N,e]}function E(b,c){g.useEffect(()=>b.addListener("command",a=>{"focus"===a?u.setLocalStateFocus(c,!0):"blur"===a&&u.setLocalStateFocus(c,!1);return!1},0),[b,c])}
+function C(b,c,a,h,n,p,q){const e=g.useMemo(()=>u.createBinding(b,a,c,h),[b,a,c,h]),k=g.useCallback(()=>{a.connect()},[a]),l=g.useCallback(()=>{try{a.disconnect()}catch(f){}},[a]);g.useEffect(()=>{const {root:f}=e,{awareness:r}=a,w=({status:m})=>{b.execCommand("connected","connected"===m)},x=m=>{q&&m&&f.isEmpty()&&0===f._xmlText._length&&D(b)},y=()=>{u.syncCursorPositions(e,a)},z=(m,v)=>{v.origin!==e&&u.syncYjsChangesToLexical(e,a,m)};u.initLocalState(a,n,p,document.activeElement===b.getRootElement());
+a.on("status",w);a.on("sync",x);r.on("update",y);f.getSharedType().observeDeep(z);const M=b.addListener("update",({prevEditorState:m,editorState:v,dirtyLeaves:I,dirtyElements:J,normalizedNodes:K,tags:L})=>{u.syncLexicalUpdateToYjs(e,a,m,v,J,I,K,L)});k();return()=>{l();a.off("sync",x);a.off("status",w);r.off("update",y);f.getSharedType().unobserveDeep(z);M()}},[e,p,k,l,b,n,a,q]);const t=g.useMemo(()=>B.createPortal(g.createElement("div",{ref:f=>{e.cursorsContainer=f}}),document.body),[e]);g.useEffect(()=>
+b.addListener("command",(f,r)=>{"toggleConnect"===f&&void 0!==k&&void 0!==l&&(r?(console.log("Collaboration connected!"),k()):(console.log("Collaboration disconnected!"),l()));return!1},0),[k,l,b]);return[t,e]}function E(b,c){g.useEffect(()=>b.addListener("command",a=>{"focus"===a?u.setLocalStateFocus(c,!0):"blur"===a&&u.setLocalStateFocus(c,!1);return!1},0),[b,c])}
 function F(b,c){const a=g.useMemo(()=>u.createUndoManager(c,c.root.getSharedType()),[c]);g.useEffect(()=>b.addListener("command",h=>"undo"===h?(a.undo(),!0):"redo"===h?(a.redo(),!0):!1,0));return g.useCallback(()=>{a.clear()},[a])}function D(b){b.update(()=>{var c=A.$getRoot();if(null===c.getFirstChild()){const a=A.$createParagraphNode();c.append(a);c=document.activeElement;(null!==A.$getSelection()||null!==c&&c===b.getRootElement())&&a.select()}},{tag:"history-merge"})}
-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=g.createContext({clientID:0,color:H[1],name:H[0],yjsDocMap:new Map});
-function P(){return g.useContext(O)}exports.CollaborationContext=O;exports.CollaborationPlugin=function({id:b,providerFactory:c,shouldBootstrap:a}){const h=P(),{yjsDocMap:n,name:p,color:q}=h,[e]=d.useLexicalComposerContext(),k=g.useMemo(()=>c(b,n),[b,c,n]),[l,r]=C(e,b,k,n,p,q,a);h.clientID=r.clientID;F(e,r);E(e,k);return l};exports.useCollaborationContext=P;
+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))],N=g.createContext({clientID:0,color:H[1],name:H[0],yjsDocMap:new Map});
+function O(){return g.useContext(N)}exports.CollaborationContext=N;exports.CollaborationPlugin=function({id:b,providerFactory:c,shouldBootstrap:a}){const h=O(),{yjsDocMap:n,name:p,color:q}=h,[e]=d.useLexicalComposerContext(),k=g.useMemo(()=>c(b,n),[b,c,n]),[l,t]=C(e,b,k,n,p,q,a);h.clientID=t.clientID;F(e,t);E(e,k);return l};exports.useCollaborationContext=O;

package/LexicalComposer.d.ts

@@ -9,7 +9,7 @@
 import {Class} from 'utility-types';
 import type {EditorThemeClasses, LexicalEditor, LexicalNode} from 'lexical';
 type Props = {
-  initialConfig?: {
+  initialConfig: {
     editor?: LexicalEditor | null;
     isReadOnly?: boolean;
     namespace?: string;

package/LexicalComposer.dev.js

@@ -40,7 +40,7 @@ var useLayoutEffect = useLayoutEffectImpl;
  * 
  */
 function LexicalComposer({
-  initialConfig = {},
+  initialConfig,
   children
 }) {
   const parentContext = React.useContext(LexicalComposerContext.LexicalComposerContext);

package/LexicalComposer.js.flow

@@ -10,14 +10,14 @@
 import type {EditorThemeClasses, LexicalEditor, LexicalNode} from 'lexical';
 
 type Props = {
-  initialConfig?: {
+  initialConfig: $ReadOnly<{
     editor?: LexicalEditor | null,
     isReadOnly?: boolean,
     namespace?: string,
-    nodes?: Array<Class<LexicalNode>>,
+    nodes?: $ReadOnlyArray<Class<LexicalNode>>,
     theme?: EditorThemeClasses,
     onError: (error: Error, editor: LexicalEditor) => void,
-  },
+  }>,
   children: React$Node,
 };
 

package/LexicalComposer.prod.js

@@ -5,5 +5,5 @@
  * LICENSE file in the root directory of this source tree.
  */
 var b=require("@lexical/react/LexicalComposerContext"),f=require("lexical"),n=require("react"),p="undefined"!==typeof window&&"undefined"!==typeof window.document&&"undefined"!==typeof window.document.createElement?n.useLayoutEffect:n.useEffect;
-module.exports=function({initialConfig:h={},children:q}){const d=n.useContext(b.LexicalComposerContext),m=n.useMemo(()=>{let a,e;const {theme:k,namespace:r,editor:t,nodes:u,onError:v}=h;if(null!=k)a=k;else if(null!=d){e=d[0];var c=d[1].getTheme();null!=c&&(a=c)}c=b.createLexicalComposerContext(d,a);let g=t||null;if(null===g){const l=f.createEditor({context:c,namespace:r,nodes:u,onError:w=>v(w,l),parentEditor:e,readOnly:!0,theme:a});g=l}return[g,c]},[]);p(()=>{const a=h.readOnly,[e]=m;e.setReadOnly(a||
+module.exports=function({initialConfig:h,children:q}){const d=n.useContext(b.LexicalComposerContext),m=n.useMemo(()=>{let a,e;const {theme:k,namespace:r,editor:t,nodes:u,onError:v}=h;if(null!=k)a=k;else if(null!=d){e=d[0];var c=d[1].getTheme();null!=c&&(a=c)}c=b.createLexicalComposerContext(d,a);let g=t||null;if(null===g){const l=f.createEditor({context:c,namespace:r,nodes:u,onError:w=>v(w,l),parentEditor:e,readOnly:!0,theme:a});g=l}return[g,c]},[]);p(()=>{const a=h.readOnly,[e]=m;e.setReadOnly(a||
 !1)},[]);return n.createElement(b.LexicalComposerContext.Provider,{value:m},q)};

package/LexicalNestedComposer.d.ts

@@ -6,15 +6,12 @@
  *
  */
 
-import {Class} from 'utility-types';
-import type {DecoratorEditor, EditorThemeClasses, LexicalNode} from 'lexical';
+import type {DecoratorEditor, EditorThemeClasses} from 'lexical';
+
 export default function LexicalNestedComposer(arg0: {
-  initialConfig?: {
-    namespace?: string;
+  initialConfig: {
     decoratorEditor: DecoratorEditor;
-    nodes?: Array<Class<LexicalNode>>;
     theme?: EditorThemeClasses;
-    onError?: (arg0: Error) => void;
   };
-  children?: React.ReactNode;
+  children: React.ReactNode;
 }): React.ReactNode;

package/LexicalNestedComposer.dev.js

@@ -7,6 +7,7 @@
 'use strict';
 
 var LexicalComposer = require('@lexical/react/LexicalComposer');
+var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
 var LexicalOnChangePlugin = require('@lexical/react/LexicalOnChangePlugin');
 var React = require('react');
 
@@ -22,13 +23,18 @@ function LexicalNestedComposer({
   initialConfig = {},
   children
 }) {
+  const parentContext = React.useContext(LexicalComposerContext.LexicalComposerContext);
+
+  if (parentContext == null) {
+    {
+      throw Error(`Unexpected parent context null on a nested composer`);
+    }
+  }
+
   const [nestedEditor, setNestedEditor] = React.useState(null);
   const {
     decoratorEditor,
-    namespace,
-    theme,
-    nodes,
-    onError
+    theme
   } = initialConfig;
   React.useEffect(() => {
     if (!decoratorEditor.isEmpty() && nestedEditor !== null) {
@@ -45,13 +51,17 @@ function LexicalNestedComposer({
   }, // eslint-disable-next-line react-hooks/exhaustive-deps
   []);
   return /*#__PURE__*/React.createElement(LexicalComposer, {
-    initialConfig: {
-      editor: decoratorEditor.editor,
-      namespace,
-      nodes,
-      onError,
-      theme
-    }
+    initialConfig: React.useMemo(() => {
+      const [parentEditor] = parentContext;
+      return {
+        editor: decoratorEditor.editor,
+        namespace: parentEditor._config.namespace,
+        nodes: Array.from(parentEditor._nodes.values()).map(registeredNode => registeredNode.klass),
+        onError: parentEditor._onError,
+        theme
+      }; // We only do this for init
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [])
   }, /*#__PURE__*/React.createElement(LexicalOnChangePlugin, {
     onChange: onChange
   }), children);

package/LexicalNestedComposer.js.flow

@@ -10,12 +10,9 @@
 import type {DecoratorEditor, EditorThemeClasses, LexicalNode} from 'lexical';
 
 declare export default function LexicalNestedComposer({
-  initialConfig?: {
-    namespace?: string,
+  initialConfig: $ReadOnly<{
     decoratorEditor: DecoratorEditor,
-    nodes?: Array<Class<LexicalNode>>,
     theme?: EditorThemeClasses,
-    onError?: (Error) => void,
-  },
-  children?: React$Node,
+  }>,
+  children: React$Node,
 }): React$Node;

package/LexicalNestedComposer.prod.js

@@ -4,5 +4,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var a=require("@lexical/react/LexicalComposer"),f=require("@lexical/react/LexicalOnChangePlugin"),g=require("react");
-module.exports=function({initialConfig:c={},children:h}){const [d,k]=g.useState(null),{decoratorEditor:b,namespace:l,theme:m,nodes:n,onError:p}=c;g.useEffect(()=>{b.isEmpty()||null===d||b.init(d)},[d]);c=g.useCallback((q,e)=>{q.isEmpty()?k(e):b.set(e)},[]);return g.createElement(a,{initialConfig:{editor:b.editor,namespace:l,nodes:n,onError:p,theme:m}},g.createElement(f,{onChange:c}),h)};
+var a=require("@lexical/react/LexicalComposer"),h=require("@lexical/react/LexicalComposerContext"),k=require("@lexical/react/LexicalOnChangePlugin"),l=require("react");
+module.exports=function({initialConfig:e={},children:m}){const g=l.useContext(h.LexicalComposerContext);if(null==g)throw Error("Unexpected parent context null on a nested composer");const [f,n]=l.useState(null),{decoratorEditor:c,theme:p}=e;l.useEffect(()=>{c.isEmpty()||null===f||c.init(f)},[f]);e=l.useCallback((b,d)=>{b.isEmpty()?n(d):c.set(d)},[]);return l.createElement(a,{initialConfig:l.useMemo(()=>{const [b]=g;return{editor:c.editor,namespace:b._config.namespace,nodes:Array.from(b._nodes.values()).map(d=>
+d.klass),onError:b._onError,theme:p}},[])},l.createElement(k,{onChange:e}),m)};

package/package.json

@@ -12,13 +12,16 @@
     "rich-text"
   ],
   "license": "MIT",
-  "version": "0.1.12",
+  "version": "0.1.13",
+  "dependencies": {
+    "@lexical/helpers": "0.1.13",
+    "@lexical/clipboard": "0.1.13",
+    "@lexical/list": "0.1.13",
+    "@lexical/table": "0.1.13",
+    "@lexical/yjs": "0.1.13"
+  },
   "peerDependencies": {
-    "lexical": "0.1.12",
-    "@lexical/helpers": "0.1.12",
-    "@lexical/table": "0.1.12",
-    "@lexical/yjs": "0.1.12",
-    "@lexical/clipboard": "0.1.12",
+    "lexical": "0.1.13",
     "react": ">=17.x",
     "react-dom": ">=17.x"
   },