UNPKG

@lexical/react

Version:

This package provides Lexical components and hooks for React applications.

21 lines (19 loc) 4.99 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"),g=require("@lexical/react/LexicalComposerContext"),n=require("@lexical/yjs"),D=require("react"),H=require("@lexical/utils"),I=require("lexical"),J=require("react-dom"),L=require("yjs"),M=require("react/jsx-runtime"),N=Object.create(null);if(D)for(var O in D)N[O]=D[O];N.default=D; function P(b,c,a,d,f,t,y,k,z,q,u,m){let l=D.useRef(!1),v=D.useCallback(()=>{a.connect()},[a]),w=D.useCallback(()=>{try{a.disconnect()}catch(h){}},[a]);D.useEffect(()=>{let {root:h}=k,{awareness:E}=a,B=({status:p})=>{b.dispatchCommand(n.CONNECTED_COMMAND,"connected"===p)},F=p=>{y&&p&&h.isEmpty()&&0===h._xmlText._length&&!1===l.current&&Q(b,u);l.current=!1},C=()=>{n.syncCursorPositions(k,a)},G=(p,A)=>{A=A.origin;A!==k&&n.syncYjsChangesToLexical(k,a,p,A instanceof L.UndoManager)};n.initLocalState(a, f,t,document.activeElement===b.getRootElement(),m||{});let r=p=>{R(b,k);z(p);d.set(c,p);l.current=!0};a.on("reload",r);a.on("status",B);a.on("sync",F);E.on("update",C);h.getSharedType().observeDeep(G);let V=b.registerUpdateListener(({prevEditorState:p,editorState:A,dirtyLeaves:S,dirtyElements:T,normalizedNodes:U,tags:K})=>{!1===K.has("skip-collab")&&n.syncLexicalUpdateToYjs(k,a,p,A,T,S,U,K)});v();return()=>{!1===l.current&&w();a.off("sync",F);a.off("status",B);a.off("reload",r);E.off("update",C); h.getSharedType().unobserveDeep(G);d.delete(c);V()}},[k,t,v,w,d,b,c,u,f,a,y,m,z]);let x=D.useMemo(()=>J.createPortal(M.jsx("div",{ref:h=>{k.cursorsContainer=h}}),q&&q.current||document.body),[k,q]);D.useEffect(()=>b.registerCommand(n.TOGGLE_CONNECT_COMMAND,h=>{void 0!==v&&void 0!==w&&(h?(console.log("Collaboration connected!"),v()):(console.log("Collaboration disconnected!"),w()));return!0},I.COMMAND_PRIORITY_EDITOR),[v,w,b]);return x} function W(b,c,a,d,f){D.useEffect(()=>H.mergeRegister(b.registerCommand(I.FOCUS_COMMAND,()=>{n.setLocalStateFocus(c,a,d,!0,f||{});return!1},I.COMMAND_PRIORITY_EDITOR),b.registerCommand(I.BLUR_COMMAND,()=>{n.setLocalStateFocus(c,a,d,!1,f||{});return!1},I.COMMAND_PRIORITY_EDITOR)),[d,b,a,c,f])} function X(b,c){let a=D.useMemo(()=>n.createUndoManager(c,c.root.getSharedType()),[c]);D.useEffect(()=>H.mergeRegister(b.registerCommand(I.UNDO_COMMAND,()=>{a.undo();return!0},I.COMMAND_PRIORITY_EDITOR),b.registerCommand(I.REDO_COMMAND,()=>{a.redo();return!0},I.COMMAND_PRIORITY_EDITOR)));let d=D.useCallback(()=>{a.clear()},[a]);N.useEffect(()=>{let f=()=>{b.dispatchCommand(I.CAN_UNDO_COMMAND,0<a.undoStack.length);b.dispatchCommand(I.CAN_REDO_COMMAND,0<a.redoStack.length)};a.on("stack-item-added", f);a.on("stack-item-popped",f);a.on("stack-cleared",f);return()=>{a.off("stack-item-added",f);a.off("stack-item-popped",f);a.off("stack-cleared",f)}},[b,a]);return d} function Q(b,c){b.update(()=>{var a=I.$getRoot();if(a.isEmpty())if(c)switch(typeof c){case "string":var d=b.parseEditorState(c);b.setEditorState(d,{tag:"history-merge"});break;case "object":b.setEditorState(c,{tag:"history-merge"});break;case "function":b.update(()=>{I.$getRoot().isEmpty()&&c(b)},{tag:"history-merge"})}else d=I.$createParagraphNode(),a.append(d),{activeElement:a}=document,(null!==I.$getSelection()||null!==a&&a===b.getRootElement())&&d.select()},{tag:"history-merge"})} function R(b,c){b.update(()=>{let d=I.$getRoot();d.clear();d.select()},{tag:"skip-collab"});if(null!=c.cursors&&(b=c.cursors,null!=b&&(c=c.cursorsContainer,null!=c))){b=Array.from(b.values());for(let d=0;d<b.length;d++){var a=b[d].selection;if(a&&null!=a.selections){a=a.selections;for(let f=0;f<a.length;f++)c.removeChild(a[d])}}}} function Y({editor:b,id:c,provider:a,yjsDocMap:d,name:f,color:t,shouldBootstrap:y,cursorsContainerRef:k,initialEditorState:z,awarenessData:q,collabContext:u,binding:m,setDoc:l}){c=P(b,c,a,d,f,t,y,m,l,k,z,q);u.clientID=m.clientID;X(b,m);W(b,a,f,t,q);return c} exports.CollaborationPlugin=function({id:b,providerFactory:c,shouldBootstrap:a,username:d,cursorColor:f,cursorsContainerRef:t,initialEditorState:y,excludedProperties:k,awarenessData:z}){let q=D.useRef(!1),u=D.useRef(!1),m=e.useCollaborationContext(d,f),{yjsDocMap:l,name:v,color:w}=m,[x]=g.useLexicalComposerContext();D.useEffect(()=>{m.isCollabActive=!0;return()=>{null==x._parentEditor&&(m.isCollabActive=!1)}},[m,x]);let [h,E]=D.useState();D.useEffect(()=>{if(!u.current){u.current=!0;var r=c(b,l); E(r);return()=>{r.disconnect()}}},[b,c,l]);let [B,F]=D.useState(l.get(b)),[C,G]=D.useState();D.useEffect(()=>{if(h&&!q.current){q.current=!0;var r=n.createBinding(x,h,b,B||l.get(b),l,k);G(r);return()=>{r.root.destroy(r)}}},[x,h,b,l,B,k]);return h&&C?M.jsx(Y,{awarenessData:z,binding:C,collabContext:m,color:w,cursorsContainerRef:t,editor:x,id:b,initialEditorState:y,name:v,provider:h,setDoc:F,shouldBootstrap:a,yjsDocMap:l}):M.jsx(M.Fragment,{})}