@lexical/react 0.13.1 → 0.14.0

package/LexicalCollaborationPlugin.dev.esm.js

@@ -0,0 +1,308 @@
+/**
+ * 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.
+ */
+import { useCollaborationContext } from '@lexical/react/LexicalCollaborationContext';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import * as React from 'react';
+import { useRef, useState, useMemo, useCallback, useEffect } from 'react';
+import { mergeRegister } from '@lexical/utils';
+import { createBinding, initLocalState, syncLexicalUpdateToYjs, TOGGLE_CONNECT_COMMAND, setLocalStateFocus, createUndoManager, CONNECTED_COMMAND, syncCursorPositions, syncYjsChangesToLexical } from '@lexical/yjs';
+import { COMMAND_PRIORITY_EDITOR, FOCUS_COMMAND, BLUR_COMMAND, UNDO_COMMAND, REDO_COMMAND, CAN_UNDO_COMMAND, CAN_REDO_COMMAND, $getRoot, $createParagraphNode, $getSelection } from 'lexical';
+import { createPortal } from 'react-dom';
+import { UndoManager } from 'yjs';
+
+/**
+ * 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 useYjsCollaboration(editor, id, provider, docMap, name, color, shouldBootstrap, cursorsContainerRef, initialEditorState, excludedProperties, awarenessData) {
+  const isReloadingDoc = useRef(false);
+  const [doc, setDoc] = useState(docMap.get(id));
+  const binding = useMemo(() => createBinding(editor, provider, id, doc, docMap, excludedProperties), [editor, provider, id, docMap, doc, excludedProperties]);
+  const connect = useCallback(() => {
+    provider.connect();
+  }, [provider]);
+  const disconnect = useCallback(() => {
+    try {
+      provider.disconnect();
+    } catch (e) {
+      // Do nothing
+    }
+  }, [provider]);
+  useEffect(() => {
+    const {
+      root
+    } = binding;
+    const {
+      awareness
+    } = provider;
+    const onStatus = ({
+      status
+    }) => {
+      editor.dispatchCommand(CONNECTED_COMMAND, status === 'connected');
+    };
+    const onSync = isSynced => {
+      if (shouldBootstrap && isSynced && root.isEmpty() && root._xmlText._length === 0 && isReloadingDoc.current === false) {
+        initializeEditor(editor, initialEditorState);
+      }
+      isReloadingDoc.current = false;
+    };
+    const onAwarenessUpdate = () => {
+      syncCursorPositions(binding, provider);
+    };
+    const onYjsTreeChanges = (events, transaction) => {
+      const origin = transaction.origin;
+      if (origin !== binding) {
+        const isFromUndoManger = origin instanceof UndoManager;
+        syncYjsChangesToLexical(binding, provider, events, isFromUndoManger);
+      }
+    };
+    initLocalState(provider, name, color, document.activeElement === editor.getRootElement(), awarenessData || {});
+    const onProviderDocReload = ydoc => {
+      clearEditorSkipCollab(editor, binding);
+      setDoc(ydoc);
+      docMap.set(id, ydoc);
+      isReloadingDoc.current = true;
+    };
+    provider.on('reload', onProviderDocReload);
+    provider.on('status', onStatus);
+    provider.on('sync', onSync);
+    awareness.on('update', onAwarenessUpdate);
+    // This updates the local editor state when we recieve updates from other clients
+    root.getSharedType().observeDeep(onYjsTreeChanges);
+    const removeListener = editor.registerUpdateListener(({
+      prevEditorState,
+      editorState,
+      dirtyLeaves,
+      dirtyElements,
+      normalizedNodes,
+      tags
+    }) => {
+      if (tags.has('skip-collab') === false) {
+        syncLexicalUpdateToYjs(binding, provider, prevEditorState, editorState, dirtyElements, dirtyLeaves, normalizedNodes, tags);
+      }
+    });
+    connect();
+    return () => {
+      if (isReloadingDoc.current === false) {
+        disconnect();
+      }
+      provider.off('sync', onSync);
+      provider.off('status', onStatus);
+      provider.off('reload', onProviderDocReload);
+      awareness.off('update', onAwarenessUpdate);
+      root.getSharedType().unobserveDeep(onYjsTreeChanges);
+      docMap.delete(id);
+      removeListener();
+    };
+  }, [binding, color, connect, disconnect, docMap, editor, id, initialEditorState, name, provider, shouldBootstrap, awarenessData]);
+  const cursorsContainer = useMemo(() => {
+    const ref = element => {
+      binding.cursorsContainer = element;
+    };
+    return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement("div", {
+      ref: ref
+    }), cursorsContainerRef && cursorsContainerRef.current || document.body);
+  }, [binding, cursorsContainerRef]);
+  useEffect(() => {
+    return editor.registerCommand(TOGGLE_CONNECT_COMMAND, payload => {
+      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 true;
+    }, COMMAND_PRIORITY_EDITOR);
+  }, [connect, disconnect, editor]);
+  return [cursorsContainer, binding];
+}
+function useYjsFocusTracking(editor, provider, name, color, awarenessData) {
+  useEffect(() => {
+    return mergeRegister(editor.registerCommand(FOCUS_COMMAND, () => {
+      setLocalStateFocus(provider, name, color, true, awarenessData || {});
+      return false;
+    }, COMMAND_PRIORITY_EDITOR), editor.registerCommand(BLUR_COMMAND, () => {
+      setLocalStateFocus(provider, name, color, false, awarenessData || {});
+      return false;
+    }, COMMAND_PRIORITY_EDITOR));
+  }, [color, editor, name, provider, awarenessData]);
+}
+function useYjsHistory(editor, binding) {
+  const undoManager = useMemo(() => createUndoManager(binding, binding.root.getSharedType()), [binding]);
+  useEffect(() => {
+    const undo = () => {
+      undoManager.undo();
+    };
+    const redo = () => {
+      undoManager.redo();
+    };
+    return mergeRegister(editor.registerCommand(UNDO_COMMAND, () => {
+      undo();
+      return true;
+    }, COMMAND_PRIORITY_EDITOR), editor.registerCommand(REDO_COMMAND, () => {
+      redo();
+      return true;
+    }, COMMAND_PRIORITY_EDITOR));
+  });
+  const clearHistory = useCallback(() => {
+    undoManager.clear();
+  }, [undoManager]);
+
+  // Exposing undo and redo states
+  React.useEffect(() => {
+    const updateUndoRedoStates = () => {
+      editor.dispatchCommand(CAN_UNDO_COMMAND, undoManager.undoStack.length > 0);
+      editor.dispatchCommand(CAN_REDO_COMMAND, undoManager.redoStack.length > 0);
+    };
+    undoManager.on('stack-item-added', updateUndoRedoStates);
+    undoManager.on('stack-item-popped', updateUndoRedoStates);
+    undoManager.on('stack-cleared', updateUndoRedoStates);
+    return () => {
+      undoManager.off('stack-item-added', updateUndoRedoStates);
+      undoManager.off('stack-item-popped', updateUndoRedoStates);
+      undoManager.off('stack-cleared', updateUndoRedoStates);
+    };
+  }, [editor, undoManager]);
+  return clearHistory;
+}
+function initializeEditor(editor, initialEditorState) {
+  editor.update(() => {
+    const root = $getRoot();
+    if (root.isEmpty()) {
+      if (initialEditorState) {
+        switch (typeof initialEditorState) {
+          case 'string':
+            {
+              const parsedEditorState = editor.parseEditorState(initialEditorState);
+              editor.setEditorState(parsedEditorState, {
+                tag: 'history-merge'
+              });
+              break;
+            }
+          case 'object':
+            {
+              editor.setEditorState(initialEditorState, {
+                tag: 'history-merge'
+              });
+              break;
+            }
+          case 'function':
+            {
+              editor.update(() => {
+                const root1 = $getRoot();
+                if (root1.isEmpty()) {
+                  initialEditorState(editor);
+                }
+              }, {
+                tag: 'history-merge'
+              });
+              break;
+            }
+        }
+      } else {
+        const paragraph = $createParagraphNode();
+        root.append(paragraph);
+        const {
+          activeElement
+        } = document;
+        if ($getSelection() !== null || activeElement !== null && activeElement === editor.getRootElement()) {
+          paragraph.select();
+        }
+      }
+    }
+  }, {
+    tag: 'history-merge'
+  });
+}
+function clearEditorSkipCollab(editor, binding) {
+  // reset editor state
+  editor.update(() => {
+    const root = $getRoot();
+    root.clear();
+    root.select();
+  }, {
+    tag: 'skip-collab'
+  });
+  if (binding.cursors == null) {
+    return;
+  }
+  const cursors = binding.cursors;
+  if (cursors == null) {
+    return;
+  }
+  const cursorsContainer = binding.cursorsContainer;
+  if (cursorsContainer == null) {
+    return;
+  }
+
+  // reset cursors in dom
+  const cursorsArr = Array.from(cursors.values());
+  for (let i = 0; i < cursorsArr.length; i++) {
+    const cursor = cursorsArr[i];
+    const selection = cursor.selection;
+    if (selection && selection.selections != null) {
+      const selections = selection.selections;
+      for (let j = 0; j < selections.length; j++) {
+        cursorsContainer.removeChild(selections[i]);
+      }
+    }
+  }
+}
+
+/**
+ * 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 CollaborationPlugin({
+  id,
+  providerFactory,
+  shouldBootstrap,
+  username,
+  cursorColor,
+  cursorsContainerRef,
+  initialEditorState,
+  excludedProperties,
+  awarenessData
+}) {
+  const collabContext = useCollaborationContext(username, cursorColor);
+  const {
+    yjsDocMap,
+    name,
+    color
+  } = collabContext;
+  const [editor] = useLexicalComposerContext();
+  useEffect(() => {
+    collabContext.isCollabActive = true;
+    return () => {
+      // Reseting flag only when unmount top level editor collab plugin. Nested
+      // editors (e.g. image caption) should unmount without affecting it
+      if (editor._parentEditor == null) {
+        collabContext.isCollabActive = false;
+      }
+    };
+  }, [collabContext, editor]);
+  const provider = useMemo(() => providerFactory(id, yjsDocMap), [id, providerFactory, yjsDocMap]);
+  const [cursors, binding] = useYjsCollaboration(editor, id, provider, yjsDocMap, name, color, shouldBootstrap, cursorsContainerRef, initialEditorState, excludedProperties, awarenessData);
+  collabContext.clientID = binding.clientID;
+  useYjsHistory(editor, binding);
+  useYjsFocusTracking(editor, provider, name, color, awarenessData);
+  return cursors;
+}
+
+export { CollaborationPlugin };

package/LexicalCollaborationPlugin.esm.js

@@ -0,0 +1,10 @@
+/**
+ * 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.
+ */
+import * as modDev from './LexicalCollaborationPlugin.dev.esm.js';
+import * as modProd from './LexicalCollaborationPlugin.prod.esm.js';
+const mod = process.env.NODE_ENV === 'development' ? modDev : modProd;
+export const CollaborationPlugin = mod.CollaborationPlugin;

package/LexicalCollaborationPlugin.js

@@ -5,5 +5,5 @@
  * 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')
+const LexicalCollaborationPlugin = process.env.NODE_ENV === 'development' ? require('./LexicalCollaborationPlugin.dev.js') : require('./LexicalCollaborationPlugin.prod.js');
 module.exports = LexicalCollaborationPlugin;

package/LexicalCollaborationPlugin.prod.esm.js

@@ -0,0 +1,7 @@
+/**
+ * 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.
+ */
+import{useCollaborationContext as e}from"@lexical/react/LexicalCollaborationContext";import{useLexicalComposerContext as t}from"@lexical/react/LexicalComposerContext";import*as o from"react";import{useRef as r,useState as n,useMemo as s,useCallback as c,useEffect as a}from"react";import{mergeRegister as i}from"@lexical/utils";import{createBinding as l,initLocalState as d,syncLexicalUpdateToYjs as m,TOGGLE_CONNECT_COMMAND as u,setLocalStateFocus as f,createUndoManager as p,CONNECTED_COMMAND as g,syncCursorPositions as y,syncYjsChangesToLexical as C}from"@lexical/yjs";import{COMMAND_PRIORITY_EDITOR as h,FOCUS_COMMAND as E,BLUR_COMMAND as v,UNDO_COMMAND as b,REDO_COMMAND as x,CAN_UNDO_COMMAND as k,CAN_REDO_COMMAND as S,$getRoot as D,$createParagraphNode as j,$getSelection as L}from"lexical";import{createPortal as T}from"react-dom";import{UndoManager as w}from"yjs";function A(e,t,i,f,p,E,v,b,x,k,S){const A=r(!1),[R,_]=n(f.get(t)),I=s((()=>l(e,i,t,R,f,k)),[e,i,t,f,R,k]),z=c((()=>{i.connect()}),[i]),B=c((()=>{try{i.disconnect()}catch(e){}}),[i]);a((()=>{const{root:o}=I,{awareness:r}=i,n=({status:t})=>{e.dispatchCommand(g,"connected"===t)},s=t=>{v&&t&&o.isEmpty()&&0===o._xmlText._length&&!1===A.current&&function(e,t){e.update((()=>{const o=D();if(o.isEmpty())if(t)switch(typeof t){case"string":{const o=e.parseEditorState(t);e.setEditorState(o,{tag:"history-merge"});break}case"object":e.setEditorState(t,{tag:"history-merge"});break;case"function":e.update((()=>{D().isEmpty()&&t(e)}),{tag:"history-merge"})}else{const t=j();o.append(t);const{activeElement:r}=document;(null!==L()||null!==r&&r===e.getRootElement())&&t.select()}}),{tag:"history-merge"})}(e,x),A.current=!1},c=()=>{y(I,i)},a=(e,t)=>{const o=t.origin;if(o!==I){C(I,i,e,o instanceof w)}};d(i,p,E,document.activeElement===e.getRootElement(),S||{});const l=o=>{!function(e,t){if(e.update((()=>{const e=D();e.clear(),e.select()}),{tag:"skip-collab"}),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,I),_(o),f.set(t,o),A.current=!0};i.on("reload",l),i.on("status",n),i.on("sync",s),r.on("update",c),o.getSharedType().observeDeep(a);const u=e.registerUpdateListener((({prevEditorState:e,editorState:t,dirtyLeaves:o,dirtyElements:r,normalizedNodes:n,tags:s})=>{!1===s.has("skip-collab")&&m(I,i,e,t,r,o,n,s)}));return z(),()=>{!1===A.current&&B(),i.off("sync",s),i.off("status",n),i.off("reload",l),r.off("update",c),o.getSharedType().unobserveDeep(a),f.delete(t),u()}}),[I,E,z,B,f,e,t,x,p,i,v,S]);const F=s((()=>T(o.createElement("div",{ref:e=>{I.cursorsContainer=e}}),b&&b.current||document.body)),[I,b]);return a((()=>e.registerCommand(u,(e=>{if(void 0!==z&&void 0!==B){e?(console.log("Collaboration connected!"),z()):(console.log("Collaboration disconnected!"),B())}return!0}),h)),[z,B,e]),[F,I]}function R(e,t){const r=s((()=>p(t,t.root.getSharedType())),[t]);a((()=>i(e.registerCommand(b,(()=>(r.undo(),!0)),h),e.registerCommand(x,(()=>(r.redo(),!0)),h))));const n=c((()=>{r.clear()}),[r]);return o.useEffect((()=>{const t=()=>{e.dispatchCommand(k,r.undoStack.length>0),e.dispatchCommand(S,r.redoStack.length>0)};return r.on("stack-item-added",t),r.on("stack-item-popped",t),r.on("stack-cleared",t),()=>{r.off("stack-item-added",t),r.off("stack-item-popped",t),r.off("stack-cleared",t)}}),[e,r]),n}function _({id:o,providerFactory:r,shouldBootstrap:n,username:c,cursorColor:l,cursorsContainerRef:d,initialEditorState:m,excludedProperties:u,awarenessData:p}){const g=e(c,l),{yjsDocMap:y,name:C,color:b}=g,[x]=t();a((()=>(g.isCollabActive=!0,()=>{null==x._parentEditor&&(g.isCollabActive=!1)})),[g,x]);const k=s((()=>r(o,y)),[o,r,y]),[S,D]=A(x,o,k,y,C,b,n,d,m,u,p);return g.clientID=D.clientID,R(x,D),function(e,t,o,r,n){a((()=>i(e.registerCommand(E,(()=>(f(t,o,r,!0,n||{}),!1)),h),e.registerCommand(v,(()=>(f(t,o,r,!1,n||{}),!1)),h))),[r,e,o,t,n])}(x,k,C,b,p),S}export{_ as CollaborationPlugin};

package/LexicalComposer.dev.esm.js

@@ -0,0 +1,129 @@
+/**
+ * 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.
+ */
+import { createLexicalComposerContext, LexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { createEditor, $getRoot, $createParagraphNode, $getSelection } from 'lexical';
+import * as React from 'react';
+import { useLayoutEffect as useLayoutEffect$1, useEffect, useMemo } from 'react';
+
+/**
+ * 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 CAN_USE_DOM = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined';
+
+/**
+ * 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 useLayoutEffectImpl = CAN_USE_DOM ? useLayoutEffect$1 : useEffect;
+var useLayoutEffect = useLayoutEffectImpl;
+
+/**
+ * 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 HISTORY_MERGE_OPTIONS = {
+  tag: 'history-merge'
+};
+function LexicalComposer({
+  initialConfig,
+  children
+}) {
+  const composerContext = useMemo(() => {
+    const {
+      theme,
+      namespace,
+      editor__DEPRECATED: initialEditor,
+      nodes,
+      onError,
+      editorState: initialEditorState,
+      html
+    } = initialConfig;
+    const context = createLexicalComposerContext(null, theme);
+    let editor = initialEditor || null;
+    if (editor === null) {
+      const newEditor = createEditor({
+        editable: initialConfig.editable,
+        html,
+        namespace,
+        nodes,
+        onError: error => onError(error, newEditor),
+        theme
+      });
+      initializeEditor(newEditor, initialEditorState);
+      editor = newEditor;
+    }
+    return [editor, context];
+  },
+  // We only do this for init
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  []);
+  useLayoutEffect(() => {
+    const isEditable = initialConfig.editable;
+    const [editor] = composerContext;
+    editor.setEditable(isEditable !== undefined ? isEditable : true);
+
+    // We only do this for init
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return /*#__PURE__*/React.createElement(LexicalComposerContext.Provider, {
+    value: composerContext
+  }, children);
+}
+function initializeEditor(editor, initialEditorState) {
+  if (initialEditorState === null) {
+    return;
+  } else if (initialEditorState === undefined) {
+    editor.update(() => {
+      const root = $getRoot();
+      if (root.isEmpty()) {
+        const paragraph = $createParagraphNode();
+        root.append(paragraph);
+        const activeElement = CAN_USE_DOM ? document.activeElement : null;
+        if ($getSelection() !== null || activeElement !== null && activeElement === editor.getRootElement()) {
+          paragraph.select();
+        }
+      }
+    }, HISTORY_MERGE_OPTIONS);
+  } else if (initialEditorState !== null) {
+    switch (typeof initialEditorState) {
+      case 'string':
+        {
+          const parsedEditorState = editor.parseEditorState(initialEditorState);
+          editor.setEditorState(parsedEditorState, HISTORY_MERGE_OPTIONS);
+          break;
+        }
+      case 'object':
+        {
+          editor.setEditorState(initialEditorState, HISTORY_MERGE_OPTIONS);
+          break;
+        }
+      case 'function':
+        {
+          editor.update(() => {
+            const root = $getRoot();
+            if (root.isEmpty()) {
+              initialEditorState(editor);
+            }
+          }, HISTORY_MERGE_OPTIONS);
+          break;
+        }
+    }
+  }
+}
+
+export { LexicalComposer };

package/LexicalComposer.esm.js

@@ -0,0 +1,10 @@
+/**
+ * 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.
+ */
+import * as modDev from './LexicalComposer.dev.esm.js';
+import * as modProd from './LexicalComposer.prod.esm.js';
+const mod = process.env.NODE_ENV === 'development' ? modDev : modProd;
+export const LexicalComposer = mod.LexicalComposer;

package/LexicalComposer.js

@@ -5,5 +5,5 @@
  * LICENSE file in the root directory of this source tree.
  */
 'use strict'
-const LexicalComposer = process.env.NODE_ENV === 'development' ? require('./LexicalComposer.dev.js') : require('./LexicalComposer.prod.js')
+const LexicalComposer = process.env.NODE_ENV === 'development' ? require('./LexicalComposer.dev.js') : require('./LexicalComposer.prod.js');
 module.exports = LexicalComposer;

package/LexicalComposer.prod.esm.js

@@ -0,0 +1,7 @@
+/**
+ * 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.
+ */
+import{createLexicalComposerContext as e,LexicalComposerContext as t}from"@lexical/react/LexicalComposerContext";import{createEditor as o,$getRoot as n,$createParagraphNode as i,$getSelection as r}from"lexical";import*as a from"react";import{useLayoutEffect as l,useEffect as c,useMemo as s}from"react";const d="undefined"!=typeof window&&void 0!==window.document&&void 0!==window.document.createElement;var m=d?l:c;const u={tag:"history-merge"};function f({initialConfig:l,children:c}){const f=s((()=>{const{theme:t,namespace:a,editor__DEPRECATED:c,nodes:s,onError:m,editorState:f,html:p}=l,E=e(null,t);let v=c||null;if(null===v){const e=o({editable:l.editable,html:p,namespace:a,nodes:s,onError:t=>m(t,e),theme:t});!function(e,t){if(null===t)return;if(void 0===t)e.update((()=>{const t=n();if(t.isEmpty()){const o=i();t.append(o);const n=d?document.activeElement:null;(null!==r()||null!==n&&n===e.getRootElement())&&o.select()}}),u);else if(null!==t)switch(typeof t){case"string":{const o=e.parseEditorState(t);e.setEditorState(o,u);break}case"object":e.setEditorState(t,u);break;case"function":e.update((()=>{n().isEmpty()&&t(e)}),u)}}(e,f),v=e}return[v,E]}),[]);return m((()=>{const e=l.editable,[t]=f;t.setEditable(void 0===e||e)}),[]),a.createElement(t.Provider,{value:f},c)}export{f as LexicalComposer};

package/LexicalComposerContext.dev.esm.js

@@ -0,0 +1,42 @@
+/**
+ * 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.
+ */
+import { createContext, useContext } from 'react';
+
+/**
+ * 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 LexicalComposerContext = /*#__PURE__*/createContext(null);
+function createLexicalComposerContext(parent, theme) {
+  let parentContext = null;
+  if (parent != null) {
+    parentContext = parent[1];
+  }
+  function getTheme() {
+    if (theme != null) {
+      return theme;
+    }
+    return parentContext != null ? parentContext.getTheme() : null;
+  }
+  return {
+    getTheme
+  };
+}
+function useLexicalComposerContext() {
+  const composerContext = useContext(LexicalComposerContext);
+  if (composerContext == null) {
+    {
+      throw Error(`LexicalComposerContext.useLexicalComposerContext: cannot find a LexicalComposerContext`);
+    }
+  }
+  return composerContext;
+}
+
+export { LexicalComposerContext, createLexicalComposerContext, useLexicalComposerContext };

package/LexicalComposerContext.esm.js

@@ -0,0 +1,12 @@
+/**
+ * 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.
+ */
+import * as modDev from './LexicalComposerContext.dev.esm.js';
+import * as modProd from './LexicalComposerContext.prod.esm.js';
+const mod = process.env.NODE_ENV === 'development' ? modDev : modProd;
+export const LexicalComposerContext = mod.LexicalComposerContext;
+export const createLexicalComposerContext = mod.createLexicalComposerContext;
+export const useLexicalComposerContext = mod.useLexicalComposerContext;

package/LexicalComposerContext.js

@@ -5,5 +5,5 @@
  * LICENSE file in the root directory of this source tree.
  */
 'use strict'
-const LexicalComposerContext = process.env.NODE_ENV === 'development' ? require('./LexicalComposerContext.dev.js') : require('./LexicalComposerContext.prod.js')
+const LexicalComposerContext = process.env.NODE_ENV === 'development' ? require('./LexicalComposerContext.dev.js') : require('./LexicalComposerContext.prod.js');
 module.exports = LexicalComposerContext;

package/LexicalComposerContext.prod.esm.js

@@ -0,0 +1,7 @@
+/**
+ * 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.
+ */
+import{createContext as e,useContext as n}from"react";var r=function(e){const n=new URLSearchParams;n.append("code",e);for(let e=1;e<arguments.length;e++)n.append("v",arguments[e]);throw Error(`Minified Lexical error #${e}; visit https://lexical.dev/docs/error?${n} for the full message or use the non-minified dev environment for full errors and additional helpful warnings.`)};const l=e(null);function t(e,n){let r=null;return null!=e&&(r=e[1]),{getTheme:function(){return null!=n?n:null!=r?r.getTheme():null}}}function o(){const e=n(l);return null==e&&r(8),e}export{l as LexicalComposerContext,t as createLexicalComposerContext,o as useLexicalComposerContext};

package/LexicalContentEditable.dev.esm.js

@@ -0,0 +1,107 @@
+/**
+ * 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.
+ */
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import * as React from 'react';
+import { useLayoutEffect as useLayoutEffect$1, useEffect, useState, useCallback } from 'react';
+
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+
+/**
+ * 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 CAN_USE_DOM = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined';
+
+/**
+ * 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 useLayoutEffectImpl = CAN_USE_DOM ? useLayoutEffect$1 : useEffect;
+var useLayoutEffect = useLayoutEffectImpl;
+
+function ContentEditable({
+  ariaActiveDescendant,
+  ariaAutoComplete,
+  ariaControls,
+  ariaDescribedBy,
+  ariaExpanded,
+  ariaLabel,
+  ariaLabelledBy,
+  ariaMultiline,
+  ariaOwns,
+  ariaRequired,
+  autoCapitalize,
+  className,
+  id,
+  role = 'textbox',
+  spellCheck = true,
+  style,
+  tabIndex,
+  'data-testid': testid,
+  ...rest
+}) {
+  const [editor] = useLexicalComposerContext();
+  const [isEditable, setEditable] = useState(false);
+  const ref = useCallback(rootElement => {
+    // defaultView is required for a root element.
+    // In multi-window setups, the defaultView may not exist at certain points.
+    if (rootElement && rootElement.ownerDocument && rootElement.ownerDocument.defaultView) {
+      editor.setRootElement(rootElement);
+    }
+  }, [editor]);
+  useLayoutEffect(() => {
+    setEditable(editor.isEditable());
+    return editor.registerEditableListener(currentIsEditable => {
+      setEditable(currentIsEditable);
+    });
+  }, [editor]);
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    "aria-activedescendant": !isEditable ? undefined : ariaActiveDescendant,
+    "aria-autocomplete": !isEditable ? 'none' : ariaAutoComplete,
+    "aria-controls": !isEditable ? undefined : ariaControls,
+    "aria-describedby": ariaDescribedBy,
+    "aria-expanded": !isEditable ? undefined : role === 'combobox' ? !!ariaExpanded : undefined,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-multiline": ariaMultiline,
+    "aria-owns": !isEditable ? undefined : ariaOwns,
+    "aria-readonly": !isEditable ? true : undefined,
+    "aria-required": ariaRequired,
+    autoCapitalize: autoCapitalize,
+    className: className,
+    contentEditable: isEditable,
+    "data-testid": testid,
+    id: id,
+    ref: ref,
+    role: role,
+    spellCheck: spellCheck,
+    style: style,
+    tabIndex: tabIndex
+  }));
+}
+
+export { ContentEditable };