@lexical/react 0.8.1 → 0.9.0

package/LexicalCheckListPlugin.dev.js

@@ -31,19 +31,25 @@ function CheckListPlugin() {
       return handleArrownUpOrDown(event, editor, true);
     }, lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical.KEY_ESCAPE_COMMAND, event => {
       const activeItem = getActiveCheckListItem();
+
       if (activeItem != null) {
         const rootElement = editor.getRootElement();
+
         if (rootElement != null) {
           rootElement.focus();
         }
+
         return true;
       }
+
       return false;
     }, lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical.KEY_SPACE_COMMAND, event => {
       const activeItem = getActiveCheckListItem();
+
       if (activeItem != null && editor.isEditable()) {
         editor.update(() => {
           const listItemNode = lexical.$getNearestNodeFromDOMNode(activeItem);
+
           if (list.$isListItemNode(listItemNode)) {
             event.preventDefault();
             listItemNode.toggleChecked();
@@ -51,22 +57,28 @@ function CheckListPlugin() {
         });
         return true;
       }
+
       return false;
     }, lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical.KEY_ARROW_LEFT_COMMAND, event => {
       return editor.getEditorState().read(() => {
         const selection = lexical.$getSelection();
+
         if (lexical.$isRangeSelection(selection) && selection.isCollapsed()) {
           const {
             anchor
           } = selection;
           const isElement = anchor.type === 'element';
+
           if (isElement || anchor.offset === 0) {
             const anchorNode = anchor.getNode();
             const elementNode = utils.$findMatchingParent(anchorNode, node => lexical.$isElementNode(node) && !node.isInline());
+
             if (list.$isListItemNode(elementNode)) {
               const parent = elementNode.getParent();
+
               if (list.$isListNode(parent) && parent.getListType() === 'check' && (isElement || elementNode.getFirstDescendant() === anchorNode)) {
                 const domNode = editor.getElementByKey(elementNode.__key);
+
                 if (domNode != null && document.activeElement !== domNode) {
                   domNode.focus();
                   event.preventDefault();
@@ -76,6 +88,7 @@ function CheckListPlugin() {
             }
           }
         }
+
         return false;
       });
     }, lexical.COMMAND_PRIORITY_LOW), editor.registerRootListener((rootElement, prevElement) => {
@@ -83,6 +96,7 @@ function CheckListPlugin() {
         rootElement.addEventListener('click', handleClick);
         rootElement.addEventListener('pointerdown', handlePointerDown);
       }
+
       if (prevElement !== null) {
         prevElement.removeEventListener('click', handleClick);
         prevElement.removeEventListener('pointerdown', handlePointerDown);
@@ -91,37 +105,45 @@ function CheckListPlugin() {
   });
   return null;
 }
+
 function handleCheckItemEvent(event, callback) {
   const target = event.target;
+
   if (target === null || !utils.isHTMLElement(target)) {
     return;
-  }
+  } // Ignore clicks on LI that have nested lists
+
 
-  // Ignore clicks on LI that have nested lists
   const firstChild = target.firstChild;
+
   if (firstChild != null && utils.isHTMLElement(firstChild) && (firstChild.tagName === 'UL' || firstChild.tagName === 'OL')) {
     return;
   }
-  const parentNode = target.parentNode;
 
-  // @ts-ignore internal field
+  const parentNode = target.parentNode; // @ts-ignore internal field
+
   if (!parentNode || parentNode.__lexicalListType !== 'check') {
     return;
   }
+
   const pageX = event.pageX;
   const rect = target.getBoundingClientRect();
+
   if (target.dir === 'rtl' ? pageX < rect.right && pageX > rect.right - 20 : pageX > rect.left && pageX < rect.left + 20) {
     callback();
   }
 }
+
 function handleClick(event) {
   handleCheckItemEvent(event, () => {
     const domNode = event.target;
     const editor = findEditor(domNode);
+
     if (editor != null && editor.isEditable()) {
       editor.update(() => {
         if (event.target) {
           const node = lexical.$getNearestNodeFromDOMNode(domNode);
+
           if (list.$isListItemNode(node)) {
             domNode.focus();
             node.toggleChecked();
@@ -131,65 +153,80 @@ function handleClick(event) {
     }
   });
 }
+
 function handlePointerDown(event) {
   handleCheckItemEvent(event, () => {
     // Prevents caret moving when clicking on check mark
     event.preventDefault();
   });
 }
+
 function findEditor(target) {
   let node = target;
+
   while (node) {
     // @ts-ignore internal field
     if (node.__lexicalEditor) {
       // @ts-ignore internal field
       return node.__lexicalEditor;
     }
+
     node = node.parentNode;
   }
+
   return null;
 }
+
 function getActiveCheckListItem() {
   const activeElement = document.activeElement;
-  return activeElement != null && activeElement.tagName === 'LI' && activeElement.parentNode != null &&
-  // @ts-ignore internal field
+  return activeElement != null && activeElement.tagName === 'LI' && activeElement.parentNode != null && // @ts-ignore internal field
   activeElement.parentNode.__lexicalListType === 'check' ? activeElement : null;
 }
+
 function findCheckListItemSibling(node, backward) {
   let sibling = backward ? node.getPreviousSibling() : node.getNextSibling();
-  let parent = node;
+  let parent = node; // Going up in a tree to get non-null sibling
 
-  // Going up in a tree to get non-null sibling
   while (sibling == null && list.$isListItemNode(parent)) {
     // Get li -> parent ul/ol -> parent li
     parent = parent.getParentOrThrow().getParent();
+
     if (parent != null) {
       sibling = backward ? parent.getPreviousSibling() : parent.getNextSibling();
     }
-  }
+  } // Going down in a tree to get first non-nested list item
+
 
-  // Going down in a tree to get first non-nested list item
   while (list.$isListItemNode(sibling)) {
     const firstChild = backward ? sibling.getLastChild() : sibling.getFirstChild();
+
     if (!list.$isListNode(firstChild)) {
       return sibling;
     }
+
     sibling = backward ? firstChild.getLastChild() : firstChild.getFirstChild();
   }
+
   return null;
 }
+
 function handleArrownUpOrDown(event, editor, backward) {
   const activeItem = getActiveCheckListItem();
+
   if (activeItem != null) {
     editor.update(() => {
       const listItem = lexical.$getNearestNodeFromDOMNode(activeItem);
+
       if (!list.$isListItemNode(listItem)) {
         return;
       }
+
       const nextListItem = findCheckListItemSibling(listItem, backward);
+
       if (nextListItem != null) {
         nextListItem.selectStart();
         const dom = editor.getElementByKey(nextListItem.__key);
+
         if (dom != null) {
           event.preventDefault();
           setTimeout(() => {
@@ -199,6 +236,7 @@ function handleArrownUpOrDown(event, editor, backward) {
       }
     });
   }
+
   return false;
 }
 

package/LexicalClearEditorPlugin.d.ts

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
+/// <reference types="react" />
 declare type Props = Readonly<{
     onClear?: () => void;
 }>;

package/LexicalClearEditorPlugin.dev.js

@@ -17,7 +17,6 @@ var react = require('react');
  * 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';
 
 /**
@@ -50,6 +49,7 @@ function ClearEditorPlugin({
           const paragraph = lexical.$createParagraphNode();
           root.clear();
           root.append(paragraph);
+
           if (selection !== null) {
             paragraph.select();
           }

package/LexicalCollaborationContext.dev.js

@@ -26,12 +26,15 @@ const CollaborationContext = /*#__PURE__*/react.createContext({
 });
 function useCollaborationContext(username, color) {
   const collabContext = react.useContext(CollaborationContext);
+
   if (username != null) {
     collabContext.name = username;
   }
+
   if (color != null) {
     collabContext.color = color;
   }
+
   return collabContext;
 }
 

package/LexicalCollaborationPlugin.d.ts

@@ -5,13 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
+/// <reference types="react" />
 import type { Doc } from 'yjs';
-import { WebsocketProvider } from 'y-websocket';
+import { Provider } from '@lexical/yjs';
 import { InitialEditorStateType } from './LexicalComposer';
 import { CursorsContainerRef } from './shared/useYjsCollaboration';
 export declare function CollaborationPlugin({ id, providerFactory, shouldBootstrap, username, cursorColor, cursorsContainerRef, initialEditorState, }: {
     id: string;
-    providerFactory: (id: string, yjsDocMap: Map<string, Doc>) => WebsocketProvider;
+    providerFactory: (id: string, yjsDocMap: Map<string, Doc>) => Provider;
     shouldBootstrap: boolean;
     username?: string;
     cursorColor?: string;

package/LexicalCollaborationPlugin.dev.js

@@ -32,8 +32,7 @@ function useYjsCollaboration(editor, id, provider, docMap, name, color, shouldBo
   const disconnect = React.useCallback(() => {
     try {
       provider.disconnect();
-    } catch (e) {
-      // Do nothing
+    } catch (e) {// Do nothing
     }
   }, [provider]);
   React.useEffect(() => {
@@ -43,39 +42,48 @@ function useYjsCollaboration(editor, id, provider, docMap, name, color, shouldBo
     const {
       awareness
     } = provider;
+
     const onStatus = ({
       status
     }) => {
       editor.dispatchCommand(yjs.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 = () => {
       yjs.syncCursorPositions(binding, provider);
     };
+
     const onYjsTreeChanges = (events, transaction) => {
       const origin = transaction.origin;
+
       if (origin !== binding) {
         const isFromUndoManger = origin instanceof yjs$1.UndoManager;
         yjs.syncYjsChangesToLexical(binding, provider, events, isFromUndoManger);
       }
     };
+
     yjs.initLocalState(provider, name, color, document.activeElement === editor.getRootElement());
+
     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
+    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,
@@ -94,6 +102,7 @@ function useYjsCollaboration(editor, id, provider, docMap, name, color, shouldBo
       if (isReloadingDoc.current === false) {
         disconnect();
       }
+
       provider.off('sync', onSync);
       provider.off('status', onStatus);
       provider.off('reload', onProviderDocReload);
@@ -107,6 +116,7 @@ function useYjsCollaboration(editor, id, provider, docMap, name, color, shouldBo
     const ref = element => {
       binding.cursorsContainer = element;
     };
+
     return /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/React.createElement("div", {
       ref: ref
     }), cursorsContainerRef && cursorsContainerRef.current || document.body);
@@ -115,6 +125,7 @@ function useYjsCollaboration(editor, id, provider, docMap, name, color, shouldBo
     return editor.registerCommand(yjs.TOGGLE_CONNECT_COMMAND, payload => {
       if (connect !== undefined && disconnect !== undefined) {
         const shouldConnect = payload;
+
         if (shouldConnect) {
           // eslint-disable-next-line no-console
           console.log('Collaboration connected!');
@@ -125,6 +136,7 @@ function useYjsCollaboration(editor, id, provider, docMap, name, color, shouldBo
           disconnect();
         }
       }
+
       return true;
     }, lexical.COMMAND_PRIORITY_EDITOR);
   }, [connect, disconnect, editor]);
@@ -147,9 +159,11 @@ function useYjsHistory(editor, binding) {
     const undo = () => {
       undoManager.undo();
     };
+
     const redo = () => {
       undoManager.redo();
     };
+
     return utils.mergeRegister(editor.registerCommand(lexical.UNDO_COMMAND, () => {
       undo();
       return true;
@@ -163,9 +177,11 @@ function useYjsHistory(editor, binding) {
   }, [undoManager]);
   return clearHistory;
 }
+
 function initializeEditor(editor, initialEditorState) {
   editor.update(() => {
     const root = lexical.$getRoot();
+
     if (root.isEmpty()) {
       if (initialEditorState) {
         switch (typeof initialEditorState) {
@@ -177,6 +193,7 @@ function initializeEditor(editor, initialEditorState) {
               });
               break;
             }
+
           case 'object':
             {
               editor.setEditorState(initialEditorState, {
@@ -184,10 +201,12 @@ function initializeEditor(editor, initialEditorState) {
               });
               break;
             }
+
           case 'function':
             {
               editor.update(() => {
                 const root1 = lexical.$getRoot();
+
                 if (root1.isEmpty()) {
                   initialEditorState(editor);
                 }
@@ -203,6 +222,7 @@ function initializeEditor(editor, initialEditorState) {
         const {
           activeElement
         } = document;
+
         if (lexical.$getSelection() !== null || activeElement !== null && activeElement === editor.getRootElement()) {
           paragraph.select();
         }
@@ -212,6 +232,7 @@ function initializeEditor(editor, initialEditorState) {
     tag: 'history-merge'
   });
 }
+
 function clearEditorSkipCollab(editor, binding) {
   // reset editor state
   editor.update(() => {
@@ -221,25 +242,33 @@ function clearEditorSkipCollab(editor, binding) {
   }, {
     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
+
 
-  // 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]);
       }

package/LexicalComposer.d.ts

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
+/// <reference types="react" />
 import { EditorState, EditorThemeClasses, Klass, LexicalEditor, LexicalNode } from 'lexical';
 export declare type InitialEditorStateType = null | string | EditorState | ((editor: LexicalEditor) => void);
 export declare type InitialConfigType = Readonly<{

package/LexicalComposer.dev.js

@@ -17,7 +17,6 @@ var React = require('react');
  * 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';
 
 /**
@@ -55,6 +54,7 @@ function LexicalComposer({
     } = initialConfig;
     const context = LexicalComposerContext.createLexicalComposerContext(null, theme);
     let editor = initialEditor || null;
+
     if (editor === null) {
       const newEditor = lexical.createEditor({
         editable: false,
@@ -66,33 +66,34 @@ function LexicalComposer({
       initializeEditor(newEditor, initialEditorState);
       editor = newEditor;
     }
+
     return [editor, context];
-  },
-  // We only do this for init
+  }, // 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
+    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.LexicalComposerContext.Provider, {
     value: composerContext
   }, children);
 }
+
 function initializeEditor(editor, initialEditorState) {
   if (initialEditorState === null) {
     return;
   } else if (initialEditorState === undefined) {
     editor.update(() => {
       const root = lexical.$getRoot();
+
       if (root.isEmpty()) {
         const paragraph = lexical.$createParagraphNode();
         root.append(paragraph);
         const activeElement = CAN_USE_DOM ? document.activeElement : null;
+
         if (lexical.$getSelection() !== null || activeElement !== null && activeElement === editor.getRootElement()) {
           paragraph.select();
         }
@@ -106,15 +107,18 @@ function initializeEditor(editor, initialEditorState) {
           editor.setEditorState(parsedEditorState, HISTORY_MERGE_OPTIONS);
           break;
         }
+
       case 'object':
         {
           editor.setEditorState(initialEditorState, HISTORY_MERGE_OPTIONS);
           break;
         }
+
       case 'function':
         {
           editor.update(() => {
             const root = lexical.$getRoot();
+
             if (root.isEmpty()) {
               initialEditorState(editor);
             }

package/LexicalComposerContext.dev.js

@@ -18,26 +18,32 @@ var react = require('react');
 const LexicalComposerContext = /*#__PURE__*/react.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 = react.useContext(LexicalComposerContext);
+
   if (composerContext == null) {
     {
       throw Error(`LexicalComposerContext.useLexicalComposerContext: cannot find a LexicalComposerContext`);
     }
   }
+
   return composerContext;
 }
 

package/LexicalContentEditable.dev.js

@@ -16,7 +16,6 @@ var React = require('react');
  * 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';
 
 /**

package/LexicalDecoratorBlockNode.d.ts

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
+/// <reference types="react" />
 import type { ElementFormatType, LexicalNode, NodeKey, SerializedLexicalNode, Spread } from 'lexical';
 import { DecoratorNode } from 'lexical';
 export declare type SerializedDecoratorBlockNode = Spread<{

package/LexicalDecoratorBlockNode.dev.js

@@ -20,6 +20,7 @@ class DecoratorBlockNode extends lexical.DecoratorNode {
     super(key);
     this.__format = format || '';
   }
+
   exportJSON() {
     return {
       format: this.__format || '',
@@ -27,16 +28,20 @@ class DecoratorBlockNode extends lexical.DecoratorNode {
       version: 1
     };
   }
+
   createDOM() {
     return document.createElement('div');
   }
+
   updateDOM() {
     return false;
   }
+
   setFormat(format) {
     const self = this.getWritable();
     self.__format = format;
   }
+
 }
 function $isDecoratorBlockNode(node) {
   return node instanceof DecoratorBlockNode;

package/LexicalErrorBoundary.d.ts

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
+/// <reference types="react" />
 export declare type LexicalErrorBoundaryProps = {
     children: JSX.Element;
     onError: (error: Error) => void;

package/LexicalHashtagPlugin.d.ts

@@ -5,4 +5,5 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
+/// <reference types="react" />
 export declare function HashtagPlugin(): JSX.Element | null;