UNPKG

@lexical/react

Version:

This package provides Lexical components and hooks for React applications.

10 lines (8 loc) 7.58 kB
/** * 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 e=require("@lexical/react/LexicalCollaborationContext"),t=require("@lexical/react/LexicalComposerContext"),o=require("@lexical/yjs"),r=require("react"),n=require("@lexical/utils"),s=require("lexical"),a=require("react-dom"),c=require("yjs"),i=require("react/jsx-runtime");function u(e){var t=Object.create(null);if(e)for(var o in e)t[o]=e[o];return t.default=e,t}var l=u(r);function d(e,t,n,a,i,u,l,d,p,_,g,M,R=o.syncCursorPositions){const O=r.useRef(!1),D=r.useCallback(()=>{const{root:t}=d;l&&t.isEmpty()&&0===t._xmlText._length&&m(e,g)},[d,e,g,l]);return r.useEffect(()=>{const{root:t}=d,r=(e,t)=>{const r=t.origin;if(r!==d){const t=r instanceof c.UndoManager;o.syncYjsChangesToLexical(d,n,e,t,R)}};t.getSharedType().observeDeep(r);const a=e.registerUpdateListener(({prevEditorState:e,editorState:t,dirtyLeaves:r,dirtyElements:a,normalizedNodes:c,tags:i})=>{i.has(s.SKIP_COLLAB_TAG)||o.syncLexicalUpdateToYjs(d,n,e,t,a,r,c,i)});return()=>{t.getSharedType().unobserveDeep(r),a()}},[d,n,e,p,a,t,R]),r.useEffect(()=>{const o=o=>{!function(e,t){if(e.update(()=>{const e=s.$getRoot();e.clear(),e.select()},{tag:s.SKIP_COLLAB_TAG}),null==t.cursors)return;const o=t.cursors;if(null==o)return;const r=t.cursorsContainer;if(null==r)return;const n=Array.from(o.values());for(let e=0;e<n.length;e++){const t=n[e].selection;if(t&&null!=t.selections){const o=t.selections;for(let t=0;t<o.length;t++)r.removeChild(o[e])}}}(e,d),p(o),a.set(t,o),O.current=!0},r=()=>{O.current=!1};return n.on("reload",o),n.on("sync",r),()=>{n.off("reload",o),n.off("sync",r)}},[d,n,e,p,a,t]),f(e,n,i,u,O,M,D),E(d,n),C(d,_)}function f(e,t,n,a,c,i,u){const l=r.useCallback(()=>t.connect(),[t]),d=r.useCallback(()=>{try{t.disconnect()}catch(e){}},[t]);r.useEffect(()=>{const r=({status:t})=>{e.dispatchCommand(o.CONNECTED_COMMAND,"connected"===t)},s=e=>{e&&!1===c.current&&u&&u()};o.initLocalState(t,n,a,document.activeElement===e.getRootElement(),i||{}),t.on("status",r),t.on("sync",s);const f=l();return()=>{!1===c.current&&(f?f.then(d):d()),t.off("sync",s),t.off("status",r)}},[e,t,n,a,c,i,u,l,d]),r.useEffect(()=>e.registerCommand(o.TOGGLE_CONNECT_COMMAND,e=>(e?(console.log("Collaboration connected!"),l()):(console.log("Collaboration disconnected!"),d()),!0),s.COMMAND_PRIORITY_EDITOR),[l,d,e]),r.useEffect(()=>{const e=()=>{try{t.awareness.setLocalState(null)}catch(e){}};return window.addEventListener("beforeunload",e),window.addEventListener("pagehide",e),()=>{window.removeEventListener("beforeunload",e),window.removeEventListener("pagehide",e)}},[t])}function E(e,t){r.useEffect(()=>{const{awareness:r}=t,n=()=>{o.syncCursorPositions(e,t)};return r.on("update",n),()=>{r.off("update",n)}},[e,t])}function C(e,t){return r.useMemo(()=>a.createPortal(i.jsx("div",{ref:t=>{e.cursorsContainer=t}}),t&&t.current||document.body),[e,t])}function p(e,t,a,c,i){r.useEffect(()=>n.mergeRegister(e.registerCommand(s.FOCUS_COMMAND,()=>(o.setLocalStateFocus(t,a,c,!0,i||{}),!1),s.COMMAND_PRIORITY_EDITOR),e.registerCommand(s.BLUR_COMMAND,()=>(o.setLocalStateFocus(t,a,c,!1,i||{}),!1),s.COMMAND_PRIORITY_EDITOR)),[c,e,a,t,i])}function _(e,t){r.useEffect(()=>n.mergeRegister(e.registerCommand(s.UNDO_COMMAND,()=>(t.undo(),!0),s.COMMAND_PRIORITY_EDITOR),e.registerCommand(s.REDO_COMMAND,()=>(t.redo(),!0),s.COMMAND_PRIORITY_EDITOR)));const o=r.useCallback(()=>{t.clear()},[t]);return l.useEffect(()=>{const o=()=>{e.dispatchCommand(s.CAN_UNDO_COMMAND,t.undoStack.length>0),e.dispatchCommand(s.CAN_REDO_COMMAND,t.redoStack.length>0)};return t.on("stack-item-added",o),t.on("stack-item-popped",o),t.on("stack-cleared",o),()=>{t.off("stack-item-added",o),t.off("stack-item-popped",o),t.off("stack-cleared",o)}},[e,t]),o}function m(e,t){e.update(()=>{const o=s.$getRoot();if(o.isEmpty())if(t)switch(typeof t){case"string":{const o=e.parseEditorState(t);e.setEditorState(o,{tag:s.HISTORY_MERGE_TAG});break}case"object":e.setEditorState(t,{tag:s.HISTORY_MERGE_TAG});break;case"function":e.update(()=>{s.$getRoot().isEmpty()&&t(e)},{tag:s.HISTORY_MERGE_TAG})}else{const t=s.$createParagraphNode();o.append(t);const{activeElement:r}=document;(null!==s.$getSelection()||null!==r&&r===e.getRootElement())&&t.select()}},{tag:s.HISTORY_MERGE_TAG})}function g({editor:e,id:t,provider:n,yjsDocMap:s,name:a,color:c,shouldBootstrap:i,cursorsContainerRef:u,initialEditorState:l,awarenessData:f,collabContext:E,binding:C,setDoc:m,syncCursorPositionsFn:g}){const M=d(e,t,n,s,a,c,i,C,m,u,l,f,g);return function(e,t){_(e,r.useMemo(()=>o.createUndoManager(t,t.root.getSharedType()),[t]))}(e,C),p(e,n,a,c,f),M}const M=(e,t)=>{r.useEffect(()=>(e.isCollabActive=!0,()=>{null==t._parentEditor&&(e.isCollabActive=!1)}),[e,t])};exports.CollaborationPlugin=function({id:n,providerFactory:s,shouldBootstrap:a,username:c,cursorColor:u,cursorsContainerRef:l,initialEditorState:d,excludedProperties:f,awarenessData:E,syncCursorPositionsFn:C}){const p=r.useRef(!1),_=r.useRef(!1),m=e.useCollaborationContext(c,u),{yjsDocMap:R,name:O,color:D}=m,[T]=t.useLexicalComposerContext();M(m,T);const[A,S]=r.useState(),[I,N]=r.useState();r.useEffect(()=>{if(_.current)return;_.current=!0;const e=s(n,R);return S(e),N(R.get(n)),()=>{e.disconnect()}},[n,s,R]);const[h,L]=r.useState();return r.useEffect(()=>{if(!A)return;if(p.current)return;p.current=!0;const e=o.createBinding(T,A,n,I||R.get(n),R,f);return L(e),()=>{e.root.destroy(e)}},[T,A,n,R,I,f]),A&&h?i.jsx(g,{awarenessData:E,binding:h,collabContext:m,color:D,cursorsContainerRef:l,editor:T,id:n,initialEditorState:d,name:O,provider:A,setDoc:N,shouldBootstrap:a,yjsDocMap:R,syncCursorPositionsFn:C}):i.jsx(i.Fragment,{})},exports.CollaborationPluginV2__EXPERIMENTAL=function({id:a,doc:i,provider:u,__shouldBootstrapUnsafe:l,username:d,cursorColor:g,cursorsContainerRef:R,excludedProperties:O,awarenessData:D}){const T=e.useCollaborationContext(d,g),{yjsDocMap:A,name:S,color:I}=T,[N]=t.useLexicalComposerContext();M(T,N);const h=function(e,t,a,i,u,l,d,C={}){const{awarenessData:p,excludedProperties:_,rootName:g,__shouldBootstrapUnsafe:M}=C,R=r.useMemo(()=>({current:!1}),[]),O=r.useMemo(()=>o.createBindingV2__EXPERIMENTAL(e,t,a,u,{excludedProperties:_,rootName:g}),[e,t,a,u,_,g]);r.useEffect(()=>(u.set(t,a),()=>{u.delete(t)}),[a,u,t]);const D=r.useCallback(()=>{const{root:t}=O;M&&0===t._length&&m(e)},[O,e,M]),[T,A]=r.useState();return r.useEffect(()=>{n.mergeRegister(e.registerCommand(o.CLEAR_DIFF_VERSIONS_COMMAND__EXPERIMENTAL,()=>(A(null),o.syncYjsStateToLexicalV2__EXPERIMENTAL(O,i),!0),s.COMMAND_PRIORITY_EDITOR),e.registerCommand(o.DIFF_VERSIONS_COMMAND__EXPERIMENTAL,({prevSnapshot:e,snapshot:t})=>(A({prevSnapshot:e,snapshot:t}),!0),s.COMMAND_PRIORITY_EDITOR))},[e,O,i]),r.useEffect(()=>{const{root:t}=O;if(T)return void o.renderSnapshot__EXPERIMENTAL(O,T.snapshot,T.prevSnapshot);const r=(e,t)=>{const r=t.origin;if(r!==O){const n=r instanceof c.UndoManager;o.syncYjsChangesToLexicalV2__EXPERIMENTAL(O,i,e,t,n)}};t.observeDeep(r);const n=e.registerUpdateListener(({prevEditorState:e,editorState:t,dirtyElements:r,normalizedNodes:n,tags:a})=>{a.has(s.SKIP_COLLAB_TAG)||o.syncLexicalUpdateToYjsV2__EXPERIMENTAL(O,i,e,t,r,n,a)});return()=>{t.unobserveDeep(r),n()}},[O,i,e,T]),f(e,i,l,d,R,p,D),E(O,i),O}(N,a,i,u,A,S,I,{__shouldBootstrapUnsafe:l,awarenessData:D,excludedProperties:O});return function(e,t){_(e,r.useMemo(()=>o.createUndoManager(t,t.root),[t]))}(N,h),p(N,u,S,I,D),C(h,R)};